센차터치 2.3과 폰갭3.1로 네이티브 앱을 제작하는 과정

안녕하세요 

이번에 센차터치 2.3과 폰갭3.1로 네이티브 앱을 제작하는 과정을 제가 삽질한 결과물로 포스팅합니다.

우선 sencha.com에 들어 가셔서 sencha touch(이하 st) SDK를 다운받으시고 적절한 디렉토리에 압축풀어 놓습니다. 

이번 st 2.3에서는 폰갭을 st프레임워크내에서 사용할수 있도록 서포트 하고 있습니다. 

그리고 그 과정을 레퍼런스(http://docs.sencha.com/touch/2.3.0/#!/guide/cordova)에서 자세히 설명하고 있습니다. 

한번 읽어 보시기 바랍니다

그리고, 폰갭을 설치 해야 하는데 폰갭 3.0부터 이전 2.x의 설치 방법과 많이 틀립니다.

우선 폰갭을 설치 하기 위해서는 node.js(http://nodejs.org/)를 설치 하셔야 합니다. 폰갭이 nodejs모듈아래서 작동하기 때문입니다.

노드를 설치를 마치셨다면 윈도우즈 콘솔(이하 cli)을 이용하기 위해 Ctrl + R을 눌러 윈도우의 실행 화면이 나오면 cmd라고 입력후 엔터를 치시면 콘솔 cli가 실행됩니다.

이하 안드로이드를 기준으로 설명을 드리겠습니다.

폰갭 설치가 마무리돼면 폰갭프로젝트를 아래의 명령어를 통해 생성합니다.

nmp install -g phonegap(nmp install -g cordova) -g옵션은 글로벌로 설치를 한다는 의미입니다.

cordova create myAppName  myAppId(예:com.my.app.service) 

주)phonegap 명령어를 사용하지 않고 cordova명령어를 사용하는 이유는 필자가 경험한바로 cordova 명령어가 훨씬 안정적이었습니다.

프로젝트가 생성이 되었다면 앱을 제작하려는 운영체제를 설치를 해야 합니다.

안드로이드 SDK가 설치가 되어 있다는 가정하에서 

생성한 폰갭프로젝트 디렉토리로 이동을 하셔서 (cd myAppName/)

cordova platform add android(ios)

이렇게 하시면 폰갭 안드로이드 앱을 제작하실 준비는 모두끝났습니다.

그리고, 필요한 플러그인들을 설치를 해줍니다.

폰갭 3.0부터는 필요한 플러그인을 수동으로 설치를 해주셔야 합니다.

http://docs.sencha.com/touch/2.3.0/#!/guide/cordova 에 가시면 간단히 설명이 되어 있고

https://build.phonegap.com/plugins 에 가셔도 설치하실수 있는 플러그인들에 대해 자세히 설명하고 있습니다.

제가 선호하는 플러그인 몇개를 나열해보겠습니다.

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git 디바이스 플러그인은 필수로 설치를 하셔야 합니다

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git (카메라)

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git (찍은사진 업로드를 위해서)

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git (현재위치를 얻기 위해서)

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git (주소록)

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git  (다이얼로그 alert/comirm/prompt등)

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git  (스프레쉬 이미지 로딩을 컨트롤 하기 위해)

cordova plugin add https://github.com/phonegap-build/PushPlugin.git  (GCM)

cordova plugin add https://github.com/kdileep1990/com.dileep.plugins.datepicker.git 

cordova plugin add https://github.com/macdonst/TelephoneNumberPlugin.git 

cordova plugin add https://github.com/kdileep1990/com.dileep.plugins.datepicker.git 

여기까지 하셨다면 기본적인 폰갭프로젝트를 하실 준비는 끝났다고 보입니다.

하지만 안드로이드 프로젝트를 하시려면 이클립스를 이용하시는것이 정신건강에 좋습니다.

물론 CLI를 이용해서 프로젝트를 관리하고 빌드를 해도 되지만 필자의 경험으로는 아직까지는 힘들다고 생각합니다.

http://developer.android.com/sdk/index.html#download 에 들어 가셔서 오른쪽에 Download the SDK를 클릭하셔서 

안드로이드 SDK를 다운로드 합니다. 

Eclipse + ADT plugin

Android SDK Tools

Android Platform-tools

The latest Android platform

The latest Android system image for the emulator

위의 페키지들이 포함되어 다운로드 됩니다.

그리고, http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 에서 자바 JDK도 설치를 하셔야 합니다.

JDK환경변수 설정은 구글링하시면 많이 있으므로 여기서는 패스 하도록 하겠습니다

반드시 환경변수 설정을 해주셔야 합니다.

참고로 폰갭 프로젝트를 수행하기 위한 저의 환경변수들입니다. 

사용자변수에 아래아 같이 정의 합니다.

ANT_NOME = D:\DaumCloud\Develop\DevTools\apache-ant-1.9.2

JAVA_HOME = C:\Program Files\Java\jdk1.7.0_40

NMP_HOME = C:\Users\blueming\AppData\Roaming\npm

path = %JAVA_HOME%\bin;%ANT_HOME%\bin;%NPM_HOME%\

시스템 환경변수에 아래를 추가합니다. androidSdk의 경로는 위에서 다운받은 SDK의 경로에 따라 달라지겠습니다.

C:\Program Files\nodejs\;

D:\Develop\DevTools\androidSdk_eclips\sdk\tools;

D:\Develop\DevTools\androidSdk_eclips\sdk\platform-tools;