Phonegap 3.0 개발 시작하기

 Phonegap 은 HTML 과 Javascript 로 모바일 앱을 하이브리드 앱으로( 안드로이드, 아이폰 겸용 HTML 기반 앱 ) 만들수 있게 해주는 말합니다.

 여기서는 Phonegap 3.0 부터 새롭게 적용된 The Command-line Interface + Node.JS 를 이용한 프로젝트 관리 방법에 관해서 간단하게 설명드리겠습니다.

 우선 Phonegap 3.0 을 이용하기 위해서 Node.js 를 설치하도록합니다. ( 다운로드 )

 이제 터미널을(MAC 기준 Windows 는 아직 테스트를 해보지 않았습니다.) 이용할 차례입니다. Phonegap 3.0 의 경우 터미널의 Node.js 를 이용한 설치를 이용합니다. ( 그래서 홈페이지에 3.0 에 대한 프로젝트 다운로드가 없습니다. )

 이제 Node JS 를 설치후 터미널에서 아래의 명령어로 설치를 시작합니다.

$ sudo npm install -g phonegap

설치가 완료 되었다면 프로젝트를 설치할 상위 폴더로 이동하여 프로젝트를 생성합니다.

$ phonegap create deoker com.deoker.app app

위에서 보신다면 첫번째는 폴더 이름 두번째는 Identifier 이름 세번째 값은 프로젝트 이름을 말합니다.

 여기서 대략적으로 Phonegap 3.0 과 2.x 의 차이점을 설명드리자면 3.0의 경우 통합 앱을 개발 후 phonegap build ios 또는 phonegap build android 와 같은 명령어로 개발 후 각 플렛폼에 따라 빌드를하지만 phonegap 2.x의 경우 다운로드 받은 파일의 안을 보면 아래와 같이 미리 플렛폼 별로 미리 빌드가 되어 있고 플렛폼에 맞게 개발을 하게 되어 있습니다.

이제 프로젝트로 들어가서 프로젝트를 build 를 할 차례 입니다.

위에서 만든 프로젝트에서 ls 를 이용하여 deoker 가 생성된것을 보셨을것입니다. 이제 프로젝트 안으로 이동합니다.

$ cd  deoker

$ phonegap build ios

$ phonegap build android

이제 cd platform 을 이용하여 platforms 을 이동하면 ios  와 android 프로젝트가 생성된 모습을 보실수 있으실 것입니다.

* phonegap build ios 의 경우 XCode 가 설치된 환경에서만 가능합니다.

* phonegap build android 는 ADT 의 설치와 환경 설정( Path ) 설정이 완료된 상태에서만 가능합니다.

IOS 는 Platforms > IOS 로 이동 후 프로젝트 파일을 실행하시면 됩니다.

아래는 기본 Phonegap 프로젝트를 ipad 시뮬레이션에서 실행한 모습입니다.

 Android 는 ADT 가 설치된 Eclipse 또는 ADT 에서 New > Project 로 이동 후

Android Project from Existing Code 를 선택

아래와 같이 이전에 build 해 놓은 프로젝트를 불러 옵니다.

이제 시뮬레이션이나 안드로이드 폰으로 실행하여 주시면 됩니다. 

잘 실행된 모습입니다. ^^