IoT 를 위한 하이브리드앱 개발 (2) - IONIC 프레임워크 시작하기

IONIC 프레임워크 시작하기 

Ionic Framework = Cordova + Angluar.js + Ionic UI 

한글소개 :  http://blog.saltfactory.net/239

메인         : http://www.ionicframework.com/

특징 ) 

1. 모바일 앱을 개발하기에 최적화된 UI가 기본적으로 제공한다. 

2. HTML으로 UI를 만들고 JavaScript의 데이타 업데이트를 빠르게 적용할 수 있다.

3. MVC 개발을 할 수 있는 환경을 제공한다.

4. 네이트브 자원을 사용할 수 있는 plugins 사용을 허용한다.

5. 크로스 플랫폼 빌드를 제공한다.

6. Node.js 기반으로 개발할 수 있는 환경을 지원한다.

7. 활발한 개발자 포럼을 지원하고 있다.

 개발환경 구축하기  (on Windows) 

 

1. 자바 JDK 설치 ( 1.7 버전 ) 

     SDK 설치후 PATH 설정까지 하세요.

 2.  Apache Ant 설치 

    안드로이드 나  Cordova 빌드시 필요합니다. 설치하고 PATH 설정까지 하세요.

     http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

 3.  안드로이드 SDK  설치  

  3-1. http://developer.android.com/sdk/index.html   에서 윈도우용  설치하시고 아래 처럼 두개 폴더를  패스 설정하세요.

  %Android SDK%\platform-tools;

  %Android SDK%\tools;

  3-2. cmd 창에서 android 명령어를 치면 다음과 같은 창이 나옵니다. 타겟 19, 21,22,24 버전 설치 (원하는 버전 설치) 

 

4. npm (node.js) 설치 

  https://nodejs.org/#download 에서 INSTALL 클릭 

node-v0.12.4-x64.msi 설치  ( 계속 NEXT 로 설치 ) 

 

  설치후에 CMD 창에서 npm 타이핑후 엔터치면 다음과 같이 나와야함. 

5.  Cordova 인스톨 

$ npm install -g cordova

6. 이제 npm 을 이용하여 ionic 을 설치합니다.  

$ npm install -g ionic  <-- 이거 타이핑해주면 알아서 설치합니다.!

Windows users: we strongly recommend Visual Studio Community for development which comes with everything you need.

7. 프로젝트 만들기 

$ ionic start M-MOS tabs      <-- 만들고싶은 폴더쪽으로 이동후 실행 !! M-MOS 는 프로젝트명 

blank / tabs / sidemunu 중 선택해서 기본 구성의 프로젝트를 만듭니다. M-MOS 는 제가 만드는 프로젝트 이름입니다.

아래와 같은 구성을 가진 프로젝트가 만들어졌습니다.

8. 프로젝트 실행   (IOS 모드 or 안드로이드 모드) 

$ cd M-MOS
$ ionic platform add ios or android 
$ ionic build ios or android           

$ ionic emulate ios or android    // 에뮬레이션을 통한 앱 실행  

$ ionic run ios or android  -device      // 기기를  통한 앱 실행 

$ ionic serve                    // 내장서버가 동작하면서 브라우저에서 실행 
                                 // 내장서버가 동작하면서 스마트폰에서 폰갭 앱 받아서 실행

$ ionic serve --lab              //  --lab붙히면 모바일화면하고 같아진다. 이거 써라~

 ionic serve 로 동작한 웹 앱은 웹 자원의 수정 사항이 있을 경우 자동으로 reloading을 하게 되어서 변경된 내용을 바로 웹에서 적용해서 변경된 사항을 확인할 수 있다. dash의 내용을 수정하기 위해서 www/templates/tab-dash.html의 파일을 열어서 다음과 같이 수정한다.

<ion-view title="목록">  // "Dashboard" -> "목록" 으로 변경 

  <ion-content class="padding">

     ....

     ....

  </ion-content>

</ion-view>

HTML 파일을 수정하면 ionic serve는 변경된 파일을 감지하고 reloading를 실행한다. 그래서 브라우저에서 refresh 필요 없이 브라우저로 이동하면 다음과 같이 변경된 내용이 적용된 것을 확인할 수 있다. 웹브라우저에서는 네이티브기능은 확인할수없다.

PATH들 예 ) 

%JAVA_HOME%\bin;

%ANT_HOME%\bin;

%Android SDK%\platform-tools;

%Android SDK%\tools;

C:\Users\brad\AppData\Roaming\npm