phonegap 3.3.0
Post on 18-Dec-2014
1.092 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
예전에는 이미 디바이스 제어를 위한 기능들이 다 있었는데 지금은 필요한 기능을 설치해서 쓰는 방식으로 바뀜!
끝.감사합니다.
top related