[HybridApp] Cordova를 이용한 Hybird App 개발환경 구축

Cordova + jQuery를 사용한 Hybrid App 개발을 위해 개발환경을 구축해보자.

 

 

1. Apache ANT 설치

  Cordova 를 이용하여 Android Platform 설치 시 Apache ANT가 필요하다고 한다.

  Apache ANT는 압축파일 형태로 http://ant.apache.org/bindownload.cgi 에서 다운로드 할 수 있다.

  압축파일 원하는 폴더에 풀고 \apache-ant-1.9.6\bin 폴더를 환경변수에 등록하면 된다.

 

 

2. Node.js 설치

  Cordova를 설치하기 위해서는 NPM을 이용해서 설치해야 하는데 먼저 Node.js를 설치해야 한다.

  Node.js 사이트 https://nodejs.org/en/에서 msi 파일(windows installer)를 다운로드 한다.

 

  msi 파일을 실행하여 Node.js를 설치한다.

  Node.js 가 설치된 경로(C:\Program Files\nodejs\node_modules\npm\bin)를 환경변수로 등록한다.

 

 

3.  Cordova 및 jQuery Mobile 설치

   윈도우 프롬프트 창에서 다음을 입력하면 C:\Users\[사용자이름]\AppData\Roaming\npm 경로에 설치가 된다.

  

 C:\User\Go>npm install -g cordova jquery-mobile

 

    설치가 완료되면 다음 두 경로를 Path 환경변수로 등록한다.

    - C:\Users\[사용자이름]\AppData\Roaming\npm\

    - C:\Users\[사용자이름]\AppData\Roaming\npm\node_modules\cordova\bin

 

 

4. Java SDK 설치

     http://www.oracle.com/technetwork/java/javase/downloads/index.html 으로 접속하여 JDK를 받아 설치한다.

     설치가 완료되면 C:\Program Files\Java\jdk1.7.0_51\bin 폴더를 환경변수로 등록한다.

 

 

5. Android Studio 설치

   Android Studio 설치에 대한 포스팅은 여기를 참고하길 바란다.

   Android Studio의 SDK Manager를 이용하여 Android SDK를 설치한다.

   Cordova 에서는 Android 2.3.3 이하 그리고 Android 3.x 버전은 지원하지 않는다고 하니 해당 버전으로 설치하지 않도록 하자.

   설치한 SDK는 C:\Users\[사용자이름]\AppData\Local\Android\sdk 경로에서 확인할 수 있다.

   Android SDK 설치 완료 후 다음의 경로를 환경변수에 등록한다.

    - [안드로이드 SDK 설치경로]\platform-tools

    - [안드로이드 SDK 설치경로]\tools

 

 

6. 프로젝트 생성 및 테스트

  Cordova 프로젝트를 생성하고자 하는 폴더로 이동 후 윈도우 프롬프트 창에서 다음을 입력한다.

  MobileAppTest 는 프로젝트 이름으로 원하는 프로젝트 이름으로 바꾸어 입력하자.

 cordova create MobileAppTest

  프로젝트 경로에 가보면 다음과 같이 프로젝트가 생성된 것을 확인 할 수 있다.

   이제 생생된 Cordova 프로젝트에 Android platform을 추가한다.

 cordova platform add android 

   Android platform 추가가 성공하면 Cordova 프로젝트를 빌드한다. 

 cordova build android 

   빌드된 모바일 앱을 에뮬레이터에서 실행한다.

 cordova emulate android

   만약 실제 단말에서 실행하려면 다음과 같이 입력한다.

 cordova run android 

   실행하면 다음과 같은 화면이 출력된다.

 

참고

1. http://www.gajotres.net/building-a-native-mobile-app-with-cordova-and-jquery-mobile/

2. http://www.hans.or.kr/2014/08/phonegap-hybrid-app.html

3. http://blog.saltfactory.net/hybridapp/developing-hybridapp-using-phonegap-and-node.html

4. http://blog.saltfactory.net/hybridapp/create-phonegap-android-plugin.html

출처: http://matthaios.tistory.com/21 [은근히 잘 되리라]