phonegap 3.3.0

Phonegap 3.3.0

jungkun

폰갭을 써보자!!

폰갭 설치방법이 나와 있습니다.!!!

http://phonegap.com/install/

전 mac에서 깔게요...

폰갭 설치 전 node.js 를 설치하세요.

설치 명령어sudo npm install -g phonegap

설치 끝!!!!이제 프로젝트를 만들어 봅시다.

$ phonegap create appName

자, 이제 API문서 뒤지면서 만들면 됩니다.

docs.phonegap.com

뭔가 만들어 봅시다.

그냥 제가 다니는 회사 소개하는 앱 만들게요.bcloud.kr

이거 모바일 웹용으로...

대충 이렇게 생긴 웹 페이지를 모바일 용으로 바꿀게요.

모바일 웹은 대세인 bootstrap을 써보도록 하겠습니다.

getbootstrap.com에서 다운로드 받을 수 있습니다.

프로젝트를 생성하면 아래의 그림처럼 만들어 집니다. www라는 폴더에 html + js + css의 조합으로 앱을 만들 수 있습니다.

다운받은 bootstrap폴더에서 js파일과 css파일을 www아래에 js와 css폴더를 만들어 넣어 둡니다.js폴더는 프로젝트 생성 시 자동으로 만들어져 있습니다.

폰갭을 적용한 index.html페이지를 만들어 보겠습니다.

폰갭 사용을 위한 js파일을 include하고 <body>태그에 onload를 사용해서 onLoad()함수를 호출 합니다.폰갭 이벤트 리스너가 실행되면 이제 폰갭으로 디바이스를 제어할 수 있습니다.

하지만!!!

디바이스의 원하는 기능을 제어하기 위해서는 plugin을 설치해야 합니다.

앱에 지도를 표시해 주기 위해서 Geolocation plugin을 설치해 보겠습니다.

● $ phonegap plugin add org.apache.cordova.geolocation● 설치 됐는지 확인해 보겠습니다.

잘 됐습니다….

이제 다 만들었다 치고!!!빌드해 보죠.

$phonegap build android

이제 이클립스를 열어서 빌드한 소스를 프로젝트 폴더로 import해 줍니다.

플러그인 설치 했을 경우

작성한 html, js, css

이클립스로 안드로이드 빌드하면 끝납니다!

apk 다운로드

http://14.63.161.108:8010/download/

간단하게 폰갭을 사용해서 안드로이드 앱을 만들어 보았습니다.

이전 버전에 비해 달라진 점은 plugin!

예전에는 이미 디바이스 제어를 위한 기능들이 다 있었는데 지금은 필요한 기능을 설치해서 쓰는 방식으로 바뀜!

끝.감사합니다.

Technology