phonegap으로 안드로이드 빌드하기

cordova  4.1.2 기준으로 설명한다. (cordova --version 하면 나온다)

너무 간단하다. 

폰갭 설치 안한 사람은 여기 클릭

여기서 따로 설명하지 않지만 필요한건 android sdk plugin이 설치된 eclipse 이다.

큰 그림으로 설명하자면

phonegap project에 내가 만든 웹결과물(HTML 파일 or javascirpt 파일 or 웹 주소) 을 넣고 build하면 된다.

1. phonegap project 설치하기

d:\>cordova create helloDemo or.kr.jhpark HelloDemo

d:\>cd helloDemo

d:\helloDemo>cordova platform add android

2. elipse에서 import하기.

import할 때 2개를 하면 된다.

helloDemo와 CordvovaLib 

만약 cordovalib를 import하지 않으면 helloDemo에서 comple error가 난다.

cordoalib를 import는 아래 이미처럼 하면 된다.

3. hellodemo 소스 수정하기.

먼저 간단하게 www.daum.net 이 사이트를  phonegap으로 만들어보자.

config.xml 파일을 열고 content src의 index.html를 http://www.daum.net/ 으로 변경한다.

4. build하기.

d:\hellodemo>cordova build

apk 파일은 helloDemo\platforms\android\ant-build\에 있다.

5. 실행화면

위 사진을 보면 왼쪽엔 HelloDemo가 있고 HelloDemo를 실행한 결과가 오른쪽 화면이다.

즉 이말은 아무 사이트나 apk로 만들 수 있다.

6. 내가 만든 HTML or javaScript 빌드하기.

일단 프로젝트 구조를 대략적으로 보자.

2번 박스와 3번 박스는 차이가 있다. www 라는 폴더가 보이지 않는다. 1번 박스에 있는 2개를 remove하면 된다.

3번 박스의 www 폴더를 확장했다..빨간색 박스와 파일를 비교해보자. cordova.js, cordova_plugins.js 파일이 추가 되었다.

여기서 중요한 것은 빨간색 박스의 www 폴더이다.

www폴더에 html 에 관련된 파일들이 있을것이다. 즉  www 폴더에 내가 작성한 html code나 javascript를 넣어주면 된다.

예제 소스 다운 받기

default.html

빨간색 박스의 www 밑에 파일을 전부 삭제하고 default.html을 붙혀넣는다. 그리고 config.xml파일를 변경한다.

d:\hellodemo>cordova build

위 이미지의 박스를 보면 뭐가 바뀌는지 알것이다.

실행화면

이상 phonegap의 기본 설정을 알아봤다.