phonegap (폰갭)

폰갭(phonegap)은 자바스크립트로 개발하는 모바일 프로그래밍이다. 

네이티브 앱을 구현하려면 아이폰용, 안드로이드용, 블랙베리, 윈도위 심비안  이렇게 OS마다 개발을 해야하는데 os마다 이렇게 개발하기는 정말 힘들다. 

폰갭을 사용하면 실제 하나의 코드를 생성하여 여러가지 os에서 구동가능한 app을 만들어 낼 수 있다. 

그럼 폰갭으로 정말 앱을 만들어 낼 수 있는 것인가? 

개념을 위해 네이버에서 제공하는 폰갭 관련 글을 먼저 읽어 보시라 ( http://helloworld.naver.com/helloworld/8180 )

그러면 실제로 만들어 보자 

http://phonegap.com/start에 가면 start가이드를 볼 수 있다. 

phonegap개발을 위해서는 Mac OS X 스노우 레오파드 10.6 이상이 필요하다. 

올려보기 위해서는 iphone등의 device도 당연 필요하겠다. 

xcode가 없다면 저 링크를 따라가서 다운로드 받는다. 

그 아래 주황색 Download  링크를 누르면 phonegap  설치 파일이 다운로드된다. 다운로드 된 파일을 그냥 누르면 설치 시작 

phonegap이 설치되었다면 위와같이 xcode ios 프로젝트 생성시에 phonegap용 application을 생성할 수 있게 된다. 

위와 같이 프로젝트가 저장될 directory를 지정한 후 프로젝트 이름과  Company Identifier를 적어준다. 

혹시 만들다가 auto reference 카운드 머시기가 나오면 해제 해준다. 

프로젝트를 생성하고 run버튼을 누르면 www directory를 찾을 수 없다는 둥 하며 에러가 난다. 여기서 부터가 난관 

FINDER에서 아까 프로젝트 생성시에 지정해 주었던 폴더에 가면 위와 같이 WWW폴더를 볼 수 있다.  이 폴더를 드래그 해서 아래 그림의 빨간 부분에 올려 놓는데 올려 놓고 확인을 누르지 말고 아래 글을 더 읽어야 한다. 

자  Create folder references for any added folders에 체크를 해주어야 한다. 안그러면 안되니 조심하길 바란다. 

아마 저 옵션이 한글로 되어 있을 수도 있다. 

성공했다면 아래와 같이 www폴더가 생겼을 것이다. 파일은 저렇게 많지 않을 것이다.

 아마 index.html, readme.txt, cordova-1.5.0.js 세개 정도만 있을 것이다. 

그럼 이제 코딩을 해보자

위에서 설명하는 것 처럼 Hello earth!!를 <h1> 태그 사이에 적어보자. 

그림은 아래와 같다. 

RUN 버튼을 누르면 아래와 같이 시뮬레이터에 Hello Earth!!가 뜬다. 

끗!!!!