폰갭 앱 개발 PhoneGAP App Development

강좌 : 폰갭 앱 개발 PhoneGAP App Development

작성자 : 송재호

저작권 : 없음. 본 문서는 누구든지 마음데로 활용하실 수 있습니다.

ADT ( 안드로이드 Development Tool ) 설치

필고 API 를 통한 필리핀 정보 제공 앱 개발

요약

본 문서는 필리핀 최대의 정보 사이트 필고 http://www.philgo.com 커뮤니티 활성화와 필리핀에 계시는 교민들 중 IT 에 관심있는 분들께 도움을 드리고자 작성한 강좌입니다.

화상 회의, 원격 지원 등 온라인으로 주로 강좌가 진행되며 오프라인 스터디도 진행 할 계획에 있습니다.

2013년 7월 19일, 폰갭 3.0 이 세상에 드러났습니다.

폰갭 2.0과 3.0에는 차이가 많다고 하니, 본 문서는 3.0 을 기준으로 설명을 하겠습니다. 다만 2.0을 기준으로 작성된 내용은 별도로 표시를 하겠습니다.

이후 문서에서는 존칭을 생략하겠습니다.

참고 자료

필고

본 강좌에서는 필고와 연동하는 앱을 작성하는 예를 보일 것이다.

본 (강좌) 문서의 원본는 “구글 드라이브 폰갭 앱 개발” 에 있다. 여러분들이 본 문서의 최신 버젼을 얻고 싶다면 이 링크를 참고하시면 됩니다.

폰갭

phonegap.com

Node.js

nodejs.org

노드는 참 신기하며 그리고 새로운 프로그래밍 패러다임을 이끌 고 있다. 기회가 된다면 별도의 강좌로 여러분들께 꼭 가르쳐드리고 싶다. 하지만 이 문서에서는 노드에 대해서 설명을 하지 않는다.

요즘 대세는 자바스크립트인 것 같다. 자바스크립트를 잘 하는 개발자가 진정한 개발자로 취급을 받는 듯하다.

폰갭의 이해

대부분의 모바일 플랫폼은 WebView 를 가지고 있다.

이 부분에 착안하여 기본적인 기능은 HTML, CSS, Javascript 로 만들고 WebView 에서 동작하기 위해 필요한 Device(Native Code) 부분은 PhoneGap Framework 가 보완하도록 하여 앱을 개발 할 수 있도록 해 주는 것이 폰갭의 역활이다.

좀 더 쉽게 말하면 폰갭이 HTML,CSS,JAVASCRIPT 로 모바일 안에서 앱으로 실행될 수 있도록 Wrapper 역활을 한다고 보면 된다.

더 쉽게 말하면, 간단한 홈페이지를 들면 폰갭이 앱으로 실행되도록 해 준다고 생각을 하면 된다.

지원 OS

iOS, Android, BlackBerry, WebOS, Symbian, Bada, Windows8 등 등

폰갭 개발 주체

PhoneGap 을 Adobe 에서 인수해서 Apache 재단에 기부하였다.

따라서 PhoneGap 은 Apache Software Foundation(아파치 소프트웨어 재단)의 것이며 Open Source 이다.

Apache Cordova

PhoneGap 은 상징적인 명이며 PhoneGap 1.5 부터 정식 소프트웨어 명칭은 Apache Cordova 이다.

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

설치하기전

본 문서에서는 여러분이 컴퓨터에 대해서 어느 정도 알고 있다고 생각을 하고 진행한다. 적어도 환경 변수가 무엇을 하는지 어떻게 관리하는지 정도는 잘 알고 있어야 한다.

참고로 환경 변수 등록은 윈도우즈7 기준으로 “시스템고급설정”에서 환경변수 등록 버튼을 찾을 수 있다.

윈도우즈 7에서 이클립스를 통한 안드로이드 앱 개발 환경을 만드는 것으로 목표로 하겠다. iOS 는 차 후에 설명을 할 수 있도록 한다.

작업 폴더를 “C:Development” 로 하도록 한다. 그리고 앱 작업 폴더는 “C:Developmentworkspace” 로 한다.

윈도우즈XP 나 비스타 등에서도 크게 다르지 않다고 생각하므로 적절하게 응용을 하면 될 것이다.

Node, ADT, ANT 의 설치는 순서와 상관 없이 진행하면 된다. 동시에 같이 진행을 해도 된다.

설치 요약

설치가 약간은 복잡하는 것 같다. 아마 처음 하시는 분들에게는 쉽지 않은 것이라 생각을 한다. 그래서 최대한 쉽게 작성을 하려고 노력을 해 보지만 여러분들이 어떻게 받아 들일지는 의문이다.

JDK, ANT, NODE 을 설치를 해야 한다. 이 3 가지는 순서에 상관없이 따로 설치를 해도 된다.
JDK 과 ANT 는 특별한 설치 과정이 없이 압축만 풀면 되는데, 중요한 것은 환경 변수에 올바로 등록을 하는 것이다.
그리고 나서 ADT 를 설치해야 한다.
그 다음은 PhoneGap 을 설치하는 것이다.
그리고 앱 생성을 하는데, 이때에 또 추가적인 (플러그인 등의) 설치 작업이 필요 할 수 있다.

아래의 사진은 자바와 ADT 를 동시에 설치를 하는 모습이다. 설치의 순서가 중요한 것이 아니라 정확하게 무엇이 설치되고 어떻게 연동이 되는지 그리고 어떻게 관리를 할 것인지를 이해 할 수 있어야 한다. ( 그렇다고 처음 부터 너무 깊이 빠져들 필요는 없다. 서서히 시간을 들이면서 내공을 쌓아야 하는 것이다. 여러분들은 본 문서에 나오는 순서데로 차근 차근 설치를 해 보기 바란다.)

(사진 : Java 와 ADT 설치 )

JDK 설치

java.com 에 들어가보니 그냥 다운로드하도록 되어져 있는데, 2013년 9월 현재 Java SE Runtime Environment 7 이 다운로드 된다.

반드시 JDK 를 설치해야 한다. (JRE 를 설치해도 된다고 하는데, 본인의 경험으로는 JDK 를 설치해야지 제대로 빌드가 되었다.)

아래의 링크에서 JDK 를 설치한다.

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

설치가 끝나면 대부분은 “C:Program Files” 또는 “C:Program Files(x86)” 에 등록이 될 것이다.

(설치 옵션 에 따라서 다른 위치 일 수도 있다.)

(사진 : JDK 가 설치된 위치 )

설치를 하였으면 환경 변수를 등록해야한다.

우선 커맨드 라인 창을 연다. 윈도우즈 시작 버튼에서 CMD 명령으로 열 수 있다.

그리고 아래와 같이 환경 변수 정보를 살펴본다.

보시다시피 자바에 대한 정보가 환경 변수로 등록이 되어져 있지 않다.

아래와 같이 JAVA_HOME 환경 변수를 추가하고 그 위치 값은 자바 설치 폴더 경로를 입력한다.

그리고 javac.exe 가 있는 폴더를 PATH 에 추가해 준다. javac.exe 는 jdk 폴더 아래의 bin 폴더에 있을 것이다.

현재 사진을 찍으면서 설치하는 컴퓨터에는 PATH 환경 변수가 등록되어져 있지 않았다. 따라서 추가를 해 주었다.

그리고 기존의 커맨드 라인 창을 닫고 다시 열어서 아래와 같이 잘 나오는지 확인을 한다.

( 참고 : JAVA_HOME 에 JDK 경로가 지정되지 않으면 codova ploatfrom add 에서 cordova.x.x.x.jar 가 생성이 되지 않는다. 특히 JRE 로 하면 생성되지 않는다. )

ADT ( 안드로이드 Development Tool ) 설치

http://developer.android.com/sdk/index.html 에서 다운로드 하여 설치 할 수 있다.

(본인의 컴퓨터가 32 bit 인지 64 bit 인지에 따라 다운로드 하는 파일이 틀리다.)

이 다운로드 압축 파일에는 아래와 같은 것들이 있다. Eclipse 가 기본적으로 포함되어져 있는 것을 확인 할 수 있다.

Eclipse + ADT plugin

Android SDK Tools

Android Platform-tools

The latest Android platform

The latest Android system image for the emulator

설치는 간단하다. 압축을 풀면 설치가 끝난다. 다만 환경 변수 PATH 에 설치된 경로를 지정해야한다.

본인의 컴퓨터에는 C:Developmentadt 와 같이 저장을 했다. PATH 에는 아래와 같이 추가를 했다. platform-tools 가 먼저 지정되어야 한다.

C:Developmentadtsdkplatform-tools;C:Developmentadtsdktools;

이클립스를 더블클릭해서 실행하면 workspace 를 물어보는데, 본인은 C:Developmentworkspace 와 같이 했다. 그리고 종료한다.

커맨드라인에서 android 를 실행해서 API Target 17, 18 전체를 설치한다. 여기서 설치를 하지 않으면 나중에 다시 설치하라고 얘기 할 것이다.

설치후 추가적(종속적)으로 설치하라는 플러그인을 다 설치한다.

API 타겟이란, 앱을 제작 할 때, 어떤 API 에 맞출 것인가를 선택하는 것이다. 너무 최신 버젼의 API 맞추면 옛날 버젼의 안드로이드에서는 동작을 하지 않을 수 있다.

또는 빌드를 할 때, API Target 번호를 찾을 수 없다면 적절한 다른 API Target 을 설치 하면 된다.

(사진 : adt 와 ant 를 설치한 모습. 별거 없다. 그냥 압축 풀고 적절한 이름을 변경하면 된다. 그리고 환경 변수에 등록하면 끝.)

ANT 설치

Apache ANT 는 자바 패키지를 관리하는 툴이다.

만약 ant 가 설치되어져 있으면 설치 할 필요는 없다. 본인의 컴퓨터에는 없어서 별도로 설치를 한 것이다.

다운로드해서 압축을 해제하는 것으로 설치가 끝난다. 본인은 C:Developmentant 에 저장을 했다.

ANT 의 경우 환경 변수 PATH 에 ANT/bin 폴더를 지정하고 ANT_HOME 변수에 ANT 폴더 경로를 지정해야한다. 즉, 2 개의 환경 변수에 등록해야 하는 것이다.

%PATH% 에 “C:Developmentantbin” 추가

ANT_HOME 환경 변수에도 등록을 하는데, bin 경로가 아닌 설치 폴더를 지정한다.

ANT_HOME = c:Developmentant

NODE.JS 설치

http://nodejs.org 에서 다운받아서 설치하면 된다.

폰갭 3.0 설치

노드를 설치 했으면 이제 폰갭을 설치 할 차례이다.

C:Developmentworkspace> npm install -g cordova

앱 생성

아래와 같은 명령으로 한다.

> cordova create hello com.example.hello HelloWorld

(참고: 만약 cordova 명령을 내렸는데, 실행 파일을 찾지 못한다면 글로벌 옵션 -g 로 설치가 되지 않았을 수 있으니 다시 설치하고 그래도 안되면 명령을 내리는 위치에 설치를 해 본다.)

hello 는 디렉토리 이름이다. hello 라는 폴더를 생성하는데, 이 폴더에는 www 폴더와 그리고 그 하위에 css, js, img 등이 생성된다.

config.xml 에는 앱을 생성하고 배포하는데에 필요한 메타데이터가 기록된다.

두번째 파라메타로 “com.example.hello” 가 있는데, 도메인 이름을 거꾸로 지정하는 것이 원칙인데, 앱의 고유한 도메인 주소이다. ( 이 값은 고유 값이로 지정을 하면 된다. )

세번째 파라메타 “HelloWorld” 는 프로젝트 (앱) 이름이다.

아래와 같이 옵션을 기호를 지정해서 앱을 생성 할 수도 있다.

> cordova create hello -n HelloWorld -i com.example.hello

> cordova create hello --name HelloWorld --id com.example.hello

여기서 앱을 생성했다는 것은 그냥 단순히 앱을 만들기 위한 기초 소스를 생성했다는 것이다.

본 예제에서 생성된 소스는 hello 폴더에 있는데 그 아래에 www 폴더가 있고 그 아래에 index.html 파일이 있는데 이 HTML 을 수정하면 되는 것이다.

플랫폼 추가

앱을 위와 같이 생성했으면 앱을 어느 플랫폼(iOS, Android, BlackBerry 등)에서 쓸 것인지 결정을 해야한다.

안드로이드에서 개발을 한다면, 아래와 같이 안드로이드 플랫폼을 추가하면 된다.

앱 생성 후 항상 앱 폴더로 들어가서 명령을 내려야 한다.

( 주의 : 프로젝트 이름에 특수문자 사용 불가 )

C:Developmentworkspace>cordova create hello org.local.hello "hello"

C:Developmentworkspace>cd hello

C:Developmentworkspacehello>cordova platform add android

만약 플랫폼을 추가하는 과정에서 “Please install Android API target 17...” 와 같은 에러가 발생한다면, 아래와 같이 android 를 실행해서 API target 17 부터 그 이후의 것을 모두 설치한다.

C:Developmentworkspacehello> android

와 같이 하면 Android SDK Manager 툴이 뜬다. API target 을 선택하고 설치한다. API target 버젼을 설치하고 나면 추가로 설치해야 할 플러그인들이 표시되는데 마저 다 설치하도록 한다.

중요 : 플랫폼을 추가한 후 dir platformsandroidlibs 와 해서 cordova.x.x.x.jar 파일이 생성되어 있는지 확인을 한다.

왜 그런지는 모르겠지만 때로는 cordova.x.x.x.jar 가 생성이 안되는 경우가 있다. 반복적으로 테스트를 해 본 결과 프로젝트 이름에 특수문자가 들어가면 안되는 것 같기도 하다.

이 부분은 본인도 아직 더 공부를 해 보아야 할 것 같지만 프로젝트 이름에는 공백이나 느낌표, 물음표, 하이픈 등을 넣지 않도록 한다.

Eclipse 에서 빌드 및 테스트

Eclipse 를 실행하고 File -> New > Project -> Android Project from existing code -> 앱폴더 선택

RUN

Run Configuration -> Android Application (더블클릭) -> Project (Browse 선택)

Target 탭에서 “Alway prompt to pick device” 선택

Run 버튼 클릭

연결된 디바이스 선택 ( 이 때 디바이스는 USB 디버깅 모드로 선택되어져 있어야 한다. )

만약 연결된 디바이스가 없으면 Android Virtual Device Manager 를 통해서 새로운 가상 디바이스를 생성하고 테스트를 하면 된다.

(사진 : 생성한 앱을 Eclipse 에 추가하는 모습)

(사진 : Eclipse 에서 HTML 파일 수정하는 모습 )

( 사진 : 실제로 빌드하고 샐행한 간단한 앱 )

앱 배포

앱 배포는 다른 사람들이 사용 할 수 있도록 앱마켓(앱스토어 등)에 올리는 것이다. 이렇게 하면 다른 사람들이 앱을 검색해서 설치 및 사용을 할 수 있다.

구글 플레이스토어 같은 경우 심사 과정도 없고 별도의 비용도 들지 않아 비교적 앱 등록이 간편하다.

하지만 애플 앱 스토어의 경우 멤버쉽에 가입해야 하고 장시간의 심사 과정을 거쳐야 한다. 뿐만아니라 심사 단계에서 거절되기 십상이어서 비교적 등록이 어렵다.

이 부분에 대해서 차후에 설명을 하겠다.

오프라인에서 잘 보이게

특히 iOS 에서는 오프라인에서 잘 나오지 않으면, 앱 등록에서 거절 당할 수 있다. 본인이 iOS 앱 스토어에 앱을 처음 등록할 때, 약 7번 정도는 거절 당한것 같다.

오프라인에서도 잘 보이게 하는 것을 다른 말로 하면 “성의 있게” 앱을 만들라는 것이다.

Ajax 대신 웹 소켓으로

기존에는 Ajax 에서 Cross Domain 호출을 하기 위해서 JSONP 호출을 했는데, 서버 스크립트와 동작을 맞추어야 해서 여간 불편한 것이 아니었다.

지금은 소켓접속으로 크로스 도메인 상태의 데이터를 쉽게 가져 올 수 있다.

필고 API 를 통한 필리핀 정보 제공 앱 개발

게시판 및 각종 필리핀 정보, 통계 등을 활용 할 수 있다.