강좌 : 폰갭 앱 개발 PhoneGAP App Development
작성자 : 송재호
저작권 : 없음. 본 문서는 누구든지 마음데로 활용하실 수 있습니다.
요약
참고 자료
필고
폰갭
Node.js
폰갭의 이해
지원 OS
PhoneGap 과 Cordova 개발 주체
Apache Cordova
개발 전략
설치하기전
설치 요약
JDK 설치
ADT ( 안드로이드 Development Tool ) 설치
ANT 설치
NODE.JS 설치
폰갭 3.0 설치
Cordova 설치
업데이트
Cordova 로 앱 생성
create 명령 에러시 해결
플랫폼 추가
Phonegap 명령으로 앱 생성
명령행에서 모두 실행
명령행에서 실행이 잘 안되면 이클립스에서 실행하면된다.
이클립스에서 오픈
수정
Eclipse 에서 빌드 및 테스트
RUN
Eclipse ini 설정
Eclipse 편집기
Eclipse 텍스트 편집기 환경 설정
폰트 체
스펠링 Spelling
Web Developer Tools
단축키
총체적인 평가
Cordova 개발 문서
플러그인 추가
plugin 제거
plugin 버젼 별 추가
iOS 개발 ( 개발 환경 준비 )
최신 버젼 설치
폰갭 설치
nodejs 설치
Cordova 설치
폰갭 앱 생성 및 실행
앱 배포
오프라인에서 잘 보이게
Ajax 대신 웹 소켓으로
필고 API 를 통한 필리핀 정보 제공 앱 개발
필고 api
개발 팁
폰갭 online / offline event
jQueryMobile 을 사용 할 수 없는 이유
공유 소스
구글 맵
개발 툴
문제 해결 : 에러 처리
App has stopped
APK 설치가 안되는 경우,
빌드 에러
2014 년 1월 16일 윈도우즈8 설치
SE JDK Development Kit 설치
NodeJs 설치
Cordova 설치
Ant 설치
ADT 설치
Target 설치
TEST APP실행
Eclipse 를 통한 실행
요약
본 문서는 필리핀 최대의 정보 사이트 필고 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 과 Cordova 개발 주체
PhoneGap 을 Adobe 에서 인수해서 Apache 재단에 기부하였다.
따라서 PhoneGap 은 Apache Software Foundation(아파치 소프트웨어 재단)의 것이며 Open Source 이다.
폰갭은 Adobe 에 의해서 계속 유지되고 있으나 Cordova 에 몇 가지 기능을 추가한 것이다.
Apache Cordova
PhoneGap 1.5 부터 정식 소프트웨어 명칭은 Apache Cordova 이다.
본 문서를 처음 작성 할 때에는 PhoneGap 을 위주로 설명 하였으나 2014년 부터는 PhoneGap 을 사용하지 않고 Cordova 를 사용한다.
개발 전략
Cordova 앱 개발 전략 문서 참고
https://docs.google.com/document/d/1ttlI8gCTb1VjmPJk1BDMYBwYitWx_kIKFZTY8uzSSaw/edit#heading=h.1sw416ytmdx2
Adobe PhoneGap Build 에서 한번의 컴파일로 여러 OS 에서 사용 할 수 있도록 해 주고 있는데 이것은 단지 테스트 용일 뿐 실제로는 각 OS 에서 테스트를 해야 한다.
설치하기전
본 문서에서는 여러분이 컴퓨터에 대해서 어느 정도 알고 있다고 생각을 하고 진행한다. 적어도 환경 변수가 무엇을 하는지 어떻게 관리하는지 정도는 잘 알고 있어야 한다.
참고로 환경 변수 등록은 윈도우즈7 기준으로 “시스템고급설정”에서 환경변수 등록 버튼을 찾을 수 있다.
윈도우즈 7에서 이클립스를 통한 안드로이드 앱 개발 환경을 만드는 것으로 목표로 하겠다. iOS 는 차 후에 설명을 할 수 있도록 한다.
작업 폴더를 “C:\Development” 로 하도록 한다. 그리고 앱 작업 폴더는 “C:\Development\workspace” 로 한다.
윈도우즈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 환경 변수를 추가하고 그 위치 값은 자바 설치 폴더 경로를 입력한다.
중요: JDK bin 폴더가 아닌 JDK 설치 폴더를 지정해야 한다.
그리고 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:\Development\adt 와 같이 저장을 했다. PATH 에는 아래와 같이 추가를 했다. platform-tools 가 먼저 지정되어야 한다.
C:\Development\adt\sdk\platform-tools;C:\Development\adt\sdk\tools;
C:\Development\adt\eclipse\eclipse.exe 프로그램이 이클립스이다.
이클립스를 더블클릭해서 실행하면 workspace 를 물어보는데, 본인은 C:\Development\workspace 와 같이 했다. 그리고 종료한다.
커맨드라인에서 android 를 실행해서 API Target 17, 18 전체를 설치한다. 여기서 설치를 하지 않으면 나중에 다시 설치하라고 얘기 할 것이다.
설치후 추가적(종속적)으로 설치하라는 플러그인을 다 설치한다.
API 타겟이란, 앱을 제작 할 때, 어떤 API 에 맞출 것인가를 선택하는 것이다. 너무 최신 버젼의 API 맞추면 옛날 버젼의 안드로이드에서는 동작을 하지 않을 수 있다.
또는 빌드를 할 때, API Target 번호를 찾을 수 없다면 적절한 다른 API Target 을 설치 하면 된다.
(사진 : adt 와 ant 를 설치한 모습. 별거 없다. 그냥 압축 풀고 적절한 이름을 변경하면 된다. 그리고 환경 변수에 등록하면 끝.)
ANT 설치
ANT 다운로드 : http://ant.apache.org/bindownload.cgi
Apache ANT 는 자바 패키지를 관리하는 툴이다.
만약 ant 가 설치되어져 있으면 설치 할 필요는 없다. 본인의 컴퓨터에는 없어서 별도로 설치를 한 것이다.
다운로드해서 압축을 해제하는 것으로 설치가 끝난다. 본인은 C:\Development\ant 에 저장을 했다.
ANT 의 경우 환경 변수 PATH 에 ANT/bin 폴더를 지정하고 ANT_HOME 변수에 ANT 폴더 경로를 지정해야한다. 즉, 2 개의 환경 변수에 등록해야 하는 것이다.
%PATH% 에 “C:\Development\ant\bin” 추가 |
ANT_HOME 환경 변수에도 등록을 하는데, bin 경로가 아닌 설치 폴더를 지정한다.
ANT_HOME = c:\Development\ant |
NODE.JS 설치
http://nodejs.org 에서 다운받아서 설치하면 된다.
폰갭 3.0 설치
노드를 설치 했으면 이제 폰갭을 설치 할 차례이다.
폰갭으로 하지 않고 cordova 로 한다.
Cordova 설치
C:\Development\workspace> npm install -g cordova
업데이트
참고로 3.2 버젼으로 업데이트( npm -g update cordover )를 하려는 데 에러가 나서 아래와 같이 삭제를 하고 재 설치를 했다.
; 삭제 npm remove -g cordova npm remove -g phonegap
; 설치 npm install -g phonegap
; 위 처럼 설치하니 phonegap@3.3.0-0.17.1 와 같이 업데이트 된 것을 볼 수 있다. |
Cordova 로 앱 생성
create 명령 에러시 해결
cordova create 시 www/index.html 등의 기본 파일이 생성되지 않는 문제. 해법 1 : cordova version 3.3 앱 생성하는데 create 명령어로 app-name/www 폴더에 기본 파일이 제대로 생성되지 않아서 cordova version 3.2 로 다운 그레이드 해서 하니 된다. |
cordova create 시 www/index.html 등의 기본 파일이 생성되지 않는 문제. 해법 2 : 원칙적으로 lazy loading 관련이 있는데, c:\users\user_name\.cordova 에서 해당 버젼의 www 를 삭제하고 다시 생성하면 된다.
|
앱 생성을 하는 방법은 여러가지가 있다.
아래와 같은 명령으로 한다.
> 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:\Development\workspace>cordova create hello org.local.hello "hello"
C:\Development\workspace>cd hello
C:\Development\workspace\hello>cordova platform add android
만약 플랫폼을 추가하는 과정에서 “Please install Android API target 17...” 와 같은 에러가 발생한다면, 아래와 같이 android 를 실행해서 API target 17 부터 그 이후의 것을 모두 설치한다.
C:\Development\workspace\hello> android
와 같이 하면 Android SDK Manager 툴이 뜬다. API target 을 선택하고 설치한다. API target 버젼을 설치하고 나면 추가로 설치해야 할 플러그인들이 표시되는데 마저 다 설치하도록 한다.
중요 : 플랫폼을 추가한 후 dir platforms\android\libs 와 해서 cordova.x.x.x.jar 파일이 생성되어 있는지 확인을 한다.
왜 그런지는 모르겠지만 때로는 cordova.x.x.x.jar 가 생성이 안되는 경우가 있다. 반복적으로 테스트를 해 본 결과 프로젝트 이름에 특수문자가 들어가면 안되는 것 같기도 하다.
이 부분은 본인도 아직 더 공부를 해 보아야 할 것 같지만 프로젝트 이름에는 공백이나 느낌표, 물음표, 하이픈 등을 넣지 않도록 한다.
Phonegap 명령으로 앱 생성
명령행에서 모두 실행
http://phonegap.com/install/ 에 나와 있는 데로 설치를 하는 방법이다.
phonegap 3.3.0 최신 버젼으로 하니 Android Target 19 를 설치하라고 한다.
명령형에서 그냥 android 라고 입력해서 설치하면 된다.
phonegap create my12 --name PhilCompany --id com.philgo.comapny cd my-app phonegap run android |
주의 : 만약 config cannot be resolved 와 같은 에러가 나면 --id 는 생략하고 생성을 해 본다. 그래도 에러가 나면 옵션을 다 빼고 해 본다.
--name 은 프로그램 이름이며, --id 는 도메인 형식의 ID 이다.
my12 는 폴더명이다.
phonegap run android 를 실행해야지 android 플랫폼이 추가 된다.
명령행에서 실행이 잘 안되면 이클립스에서 실행하면된다.
이클립스에서 오픈
위와 같이 실행하고,
File -> New -> Project -> Android Project from Existing code -> 해당 프로젝트 선택
수정
안드로이드의 HTML 파일 경로는 아래와 같다.
\philcompany\platforms\android\assets\www
Eclipse 에서 빌드 및 테스트
Eclipse 를 실행하고 File -> New > Project -> Android Project from existing code -> 앱폴더 선택
RUN
RUN -> Run Configuration -> Android Application (더블클릭) -> Project (개발 중인 프로젝트 선택)
Target 탭에서 “Alway prompt to pick device” 선택
Run 버튼 클릭
연결된 디바이스 선택 ( 이 때 디바이스는 USB 디버깅 모드로 선택되어져 있어야 한다. )
만약 연결된 디바이스가 없으면 Android Virtual Device Manager 를 통해서 새로운 가상 디바이스를 생성하고 테스트를 하면 된다.
(사진 : 생성한 앱을 Eclipse 에 추가하는 모습)
(사진 : Eclipse 에서 HTML 파일 수정하는 모습 )
( 사진 : 실제로 빌드하고 샐행한 간단한 앱 )
Eclipse ini 설정
Cordova emulator 속도가 상당히 느리다. 뿐만아니라 cli 에서 cordova run 도 속도가 느린편이며 prepare 과정에서 소스를 덮어 쓰기 때문에 작업이 용의한 편이 아니다.
Eclipse 로 개발이 불편하여 notepadd++ 로 작업을 하는데, 실행은 Eclipse 로 해야한다. 이때, project clean 을 항상 실행해 주어야하는데, 불편하다.
RUN 을 할 때, project clean 을 먼저 해주는 방법은
eclipse 를 설치한 경로에서 eclipse.ini 파일을 열어서 맨 위에 --clean 를 추가해 주면 된다.
Eclipse 편집기
HTML 파일은 HTML Editor 로 열고,
Javascript 는 Javascript Editor 로 열어서 사용한다.
CSS 는 CSS 에디터로 열어서 사용하면 된다.
Eclipse 텍스트 편집기 환경 설정
폰트 체
Window -> Preference -> General -> Appearance -> Colors and Fonts 에서 굴림체 10pt 로 바꾸고 적당하게 수정하면 된다.
Gulim 으로 하지 말고 GulimChe 로 할 것.
스펠링 Spelling
글자 밑에 빨간색 줄이 나온다. 스펠링 옵션을 제거하면 된다.
동일한 단어가 5 번 이상 연속으로 나오면 에러가 아닌 것으로 표시를 한다.
Web Developer Tools
웹 작업을 하는데 편리한 Web Developer Tools 를 설치한다.
(사실 왜 이것을 설치해야하는지 모르겠음. 이것을 설치 후에 HTML, Javascript, CSS 가 활성화가 되는지 모르겠음)
단축키
Window -> Preferences -> General -> Keys 에서 기존에 F4 로 바인드되어 있는 것을 지우고 Run 을 F4 로 바인드한다.
총체적인 평가
Eclipse 편집기는 사용이 불편하다.
특히 개발 작업과 테스트 작업이 모두 Notepad++ 와 크롬 브라우저로 이루어지고 마지막 에러 점검만 모바일 장치에서 하게된다.
그리고 Eclipse 로 모바일 장치에서 실행되는 앱을 직접적으로 디버깅을 할 수가 없다.
즉, Eclipse 편집기의 활용 가치가 상당히 떨어진다.
그냥 Notepad++ 로 작업하고 크롬으로 테스트 할 것. 그리고 마지막 과정에 Eclipse 로 모바일 장치에 앱을 설치하고 디버깅 메세지 정도를 테스트한다.
Eclipse.ini 에 --clean 추가하고 F4 로 RUN 커맨드를 바인드해서 사용한다.
Cordova 개발 문서
폰갭을 피한다.
개발 주체가 Apache 이고 Cordova 로 서비스 된다. PhoneGap 은 Cordova 에 작은 기능을 추가 한 것 뿐이며 유료/무료 서비스가 있다.
http://cordova.apache.org/docs/en/3.3.0/
플러그인 추가
폰갭 3.0 부터는 필요한 기능을 플러그인으로 설치해야 한다.
참고 : http://docs.phonegap.com/en/3.2.0/guide_cli_index.md.html#The%20Command-Line%20Interface
phonegap local plugin list |
현재 프로젝트에 설치된 플러그인 목록을 한다.
우선 Git 부터 먼저 설치를 한다. GIT 을 설치할 때, 윈도우즈 Command Prompt 에서 사용 하도록 옵션 체크를 해야한다.
설치하는 예제는 아래와 같다. 잘 설치 안되는 경우가 많아서 혼났다.
요점은
- plugin add 를 했으면,
- 다시 phonegap run android 로 재 설치하고 컴파일 해야 한다.
이 때, android platform 의 코드를 다시 복사하므로 소스코드가 모두 초기화되는 것 같다. 따라서 CVS 작업을 먼저 커밋해야 한다.
CMD> phonegap create test8 --name test11 CMD> cd test11 CMD> phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git CMD> phonegap run android CVS> app-src 체크 아웃하고, index.android.html 을 상위로 복사 한 후, Eclipse> Project -> Clean 후 실행 |
plugin 제거
phonegap local plugin remove org.apache.cordova.core.console |
제거 할 때도 마찬가지로 플랫폼 소스를 초기화 하므로 작업 중인 소스를 커밋해야 한다.
plugin 버젼 별 추가
최신 버젼의 device plugin 에 문제가 있어서 그 이전버젼으로 설치한 경험이 있다.
아래와 같은 형식으로 추가하면 된다.
cordova plugin add [PLUGIN ID]@[VERSION] |
예
cordova -d plugin add org.apache.cordova.device@0.2.5 |
iOS 개발 ( 개발 환경 준비 )
PhoneGap 으로 iOS 앱 개발을 위한 준비 과정을 설명합니다.
본 글에서는 여러분이 Mac OS 에 대해서 잘 알고 있다고 가정을 하고 설명을 합니다.
사실 저는 Mac 을 잘 사용하지 못합니다. 이번이 딱 두번째 쓰는 것입니다. 프로그램을 다운받고 설치하는 방법도 몰라서 엄청헤멨네요.
과거 버전의 PhoneGap 으로 iOS 앱 개발에 대한 문서는 아래 링크를 참고하십시오.
https://docs.google.com/a/withcenter.com/document/d/1nP6MIdYE_aTG4d7phy9eGAnnTrB_PR8n8_UKLkk7QTw/edit#heading=h.th1yl31zlf
최신 버젼 설치
2013년 12월 22일 현재 제 맥북에는 OS X Version 10.9.1 이 깔려져 있습니다. Mavericks 라고 하네요.
Xcode 는 5.0.2 버젼입니다.
( 맥북을 사용 할 줄도 모르는데, 어제 업데이트 하느라고 고생을 좀 했죠. 인터넷 카드가 안잡혀서.. ㅡㅡ; Xcode 사용 법도 다 잊어 버렸네요 ㅡㅡ; )
폰갭 최신 버젼은 3.3 입니다.
자 그럼 설치해 볼까요?
폰갭 설치
http://phonegap.com/install/ 에 있는 문서 대로 하지 말구요,
http://docs.phonegap.com/en/3.3.0/guide_cli_index.md.html#The%20Command-Line%20Interface 에 나오는 대로 하면 됩니다.
phonegap 과 cordova 의 명령어가 약간 틀리는데 주로 cordova 를 많이 사용하는 것 같습니다.
그리고 http://docs.phonegap.com/en/3.3.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide 문서를 보시면 됩니다.
그런데 저 문서를 언제 다 읽겠습니까...
무식하면 용감하다고. 그냥 무대뽀 정신으로 갑니다.
nodejs 설치
nodejs.org 에서 설치합니다. 따로 설명이 필요하나요? 그렇다면 필고 개발자 그룹의 노드 강좌를 참고해 주세요.
http://dev.philgo.com/?1269552300
nodejs 설치하는 과정이 신기하네요. 윈도우즈 프로그램 설치 처럼 몇 번 클릭으로 됩니다. ( OS X 프로그램 설치가 어려워서 잔뜩 긴장하고 있었는데요 ... )
아래 처럼 하니 node 버젼이 v0.10.24 라고 나오네요.
Cordova 설치
아래와 같이 하면 됩니다.
$ su - # npm install -g cordova |
폰갭 앱 생성 및 실행
$ cordova create app1 com.example.app1 HelloApp1 $ cd app1 $ cordova platform add ios $ cordova build |
cordova build 대신 cordova build ios 라고 입력해도 되며 build 대신 prepare 를 사용해도 된다.
Xcode 에서 HelloApp1.xcodeproj 파일을 더블클릭하여 해당 프로젝트를 연다.
그리고 왼쪽 상단에 Emaulator 를 선택하고 실행하면 된다.
앱 배포
앱 배포는 다른 사람들이 사용 할 수 있도록 앱마켓(앱스토어 등)에 올리는 것이다. 이렇게 하면 다른 사람들이 앱을 검색해서 설치 및 사용을 할 수 있다.
구글 플레이스토어 같은 경우 심사 과정도 없고 별도의 비용도 들지 않아 비교적 앱 등록이 간편하다.
하지만 애플 앱 스토어의 경우 멤버쉽에 가입해야 하고 장시간의 심사 과정을 거쳐야 한다. 뿐만아니라 심사 단계에서 거절되기 십상이어서 비교적 등록이 어렵다.
이 부분에 대해서 차후에 설명을 하겠다.
오프라인에서 잘 보이게
특히 iOS 에서는 오프라인에서 잘 나오지 않으면, 앱 등록에서 거절 당할 수 있다. 본인이 iOS 앱 스토어에 앱을 처음 등록할 때, 약 7번 정도는 거절 당한것 같다.
오프라인에서도 잘 보이게 하는 것을 다른 말로 하면 “성의 있게” 앱을 만들라는 것이다.
Ajax 대신 웹 소켓으로
기존에는 Ajax 에서 Cross Domain 호출을 하기 위해서 JSONP 호출을 했는데, 서버 스크립트와 동작을 맞추어야 해서 여간 불편한 것이 아니었다.
지금은 소켓접속으로 크로스 도메인 상태의 데이터를 쉽게 가져 올 수 있다.
필고 API 를 통한 필리핀 정보 제공 앱 개발
게시판 및 각종 필리핀 정보, 통계 등을 활용 할 수 있다.
필고 api
<script>
var io = io.connect('127.0.0.1:8080');
console.log('io connected!');
io.emit('api', {'post_id': 'freetalk'});
io.on('api-forum-list', callback_forum_list);
function callback_forum_list(data)
{
console.log('io on forum-api-list');
console.log(data.list);
posts = JSON.parse(data.list);
for ( i=0; i < posts.length; i++ ) {
$('body').append("<div>subject: "+posts[i].subject+"</div>");
}
}
</script>
개발 팁
폰갭 online / offline event
앱이 실행 될 때, online, offline 이벤트가 한번 이상 발생한다.
따라서 온라인이면 어떤 작업을 하려 한다면, device ready 이벤트 보다는 online 이벤트에서 하는 것이 좋다.
jQueryMobile 을 사용 할 수 없는 이유
동적으로 HTML 을 추하가고 rendering 을 잘 할 수 없음.
공유 소스
현재 app-src 와 app-proxy CVS 프로젝트로 개발 중이다.
공유 할 수 있는 최대한의 소스 코드를 CVS 에 넣고,
최대의 호환성을 유지한다.
예를 들면 BODY 태그에는 아무값도 없이 빈 값이다.
자바스크립트로 처리를 하면 된다.
app-src/css/company.css 처럼 모든 media query 를 처리한다.
app-proxy 에서 호출하는 api 는 아래와 같이 리턴을 해야 한다.
<div class=title>
<div class=subtitle>
<div class=line>
<a ...>
<span class=’...’>...</span>
</a>
</div>
</div>
이미지가 있는 경우에는 .line 부분을 아래와 같이 출력해야 한다.
<div class="line image" idx="1269621687">
<a href="javascript:void(0);">
<span class="icon"><img src="http://philgo.com/etc/image_resize.php?&adaptive=1&w=64&h=64&path=../data/upload/0/820230" border="0"></span>
English4foreign Online School / (+632) 352-1381
</a>
</div>
구글 맵
http://www.icenium.com/blog/icenium-team-blog/2013/12/12/mobile-friendly-mapping-options-for-phonegap-cordova-apps
개발 툴
크롬 Canary 는 기본 크롬 버젼 보다 훨씬 앞선 버젼으로 개발자나 디자이너를 위한 것이다.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel
문제 해결 : 에러 처리
App has stopped
여러가지 원인이 있을 수 있다.
직접 경험한 예를 들면,
앱 생성을 하고 “cordova run android” 로 실행하고 종료를 하면 “app has stopped” 라는 에러가 발생하는 것이다.
여러 플러그인 추가를 하는데, 다른 플러그인을 추가하면 문제가 없는데
org.apache.cordova.device 플러그인만 추가하면 “HelloCordova” has stopped 와 같은 에러가 발생하였다.
처음에는 문제의 원인을 찾지 못하여 cordova 를 업데이트하고 dos cli 에서 android (각종 SDK, 라이브러리) 를 업데이트 하였다.
그래도 에러는 계속 되어서 plugin 을 하나씩 추가하면서 테스트를 해 보았는데 device 플러그인을 추가하면 “app has stopped” 라는 에러가 발생하는 것이다.
검색을 통해서 오랜 시간 동안 해결책을 찾으로 노력했지만 해결을 하지 못했다.
그래서 다음과 같이 우회를 했다.
2014년 1월 2일 : Cordova Plugins 가 업데이트 됨. 2014년 1월 2일 이후로 device plugin 을 추가하면 app has stopped 에러가 발생. 업데이트된 버젼은 device@0.2.6 인데, 이것을 빼고 device@0.2.5 버젼으로 하니 문제가 없다. |
APK 설치가 안되는 경우,
아래와 같은 에러가 나는 경우가 있다.
이것의 주요 원인은 동일한 APK 키(CETIFICATES, 또는 앱 id)가 이미 설치하려면 장치(mobile device 등)에 설치가 되어져 있는 경우이다.
예를 들면, 집에 있는 컴퓨터로 빌드하고 이미 장치에 설치했는데,
사무실에 있는 컴퓨터로 다시 빌드하고 (다른 컴퓨터로) 똑같은 장치에 설치하려는 경우 에러가 발생한다.
이 같은 경우 모바일에서 해당 앱을 완전히 삭제하고 다시 빌드를 하면 된다.
ERROR: Failed to launch application on device: ERROR: Failed to install apk to device: pkg: /data/local/tmp/Angeles-debug-unaligned.apk
Failure [INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES]
"Application not installed. An existing package by the same name with a conflicting signature is already installed."
또는 그냥 다른 앱 id 를 만들어서 빌드하는 것이 좋다.
빌드 에러
아래와 같이 에러 메세지가 발생하는 경우,
The container 'Android Dependencies' references non existing library ... |
Cordova 3.0 부터는 Eclipse 에서 하나의 앱을 만드는데, 2개의 프로젝트가 생긴다.
따라서 Clean 을 할 때,
위 빨간색 네모 처럼 전체를 다 Clean 하고
아래 빨간색 네모 처럼 일부분만 빌드한다면
이와 같은 에러가 발생할 수 있다.
2014 년 1월 16일 윈도우즈8 설치
English version of installation guide
https://docs.google.com/a/withcenter.com/document/d/1NEnhnCTalvP0iqHouWOaLbTXPi6g6X0TiSJsPQ-EAGs/edit#heading=h.z5x32n9x2n8j
SE JDK Development Kit 설치
다운로드 사이트
jdk-7u51-windows-x64.exe 파일을 다운로드 하여 설치한다.
JDK 환경 변수 추가
환경 변수 JAVA_HOME 에 JDK 설치 폴더를 지정한다.
중요: JDK bin 폴더가 아닌 JDK 설치 폴더를 지정해야 한다.
NodeJs 설치
nodejs.org 에서 설치를 한다.
환경 변수에 설정을 해 주어야 한다.
예) 아래의 값을 경로 변수에 추가한다.
Cordova 설치
Ant 설치
ant 를 설치하지 않으니, cordova platform add 를 할 때 에러가 발생한다.
ant 설치를 하고 환경 변수를 추가한다.
ADT 설치
adt 를 설치 하지 않으면 platform add 를 할 때, target 이 지정 되지 않았다고 한다.
adt 를 설치하고 환경 변수를 추가한다.
Target 설치
어떤 장치(또는 안드로이드 API)까지 지원할 것인지 관련 라이브러리(SDK 등)를 설치한다.
CLI 에서 android 라고 입력하고 필요한 것 설치한다.
target 을 설치하니 “cordova platform add android” 명령을 실행할 수 있다.
TEST APP실행
cordova run android 명령을 하니 JAVA_HOME 환경 변수가 등록되어 있지 않다고 한다.
환경 변수에 등록하고 나니 문제 없이 실행되었다.
Eclipse 를 통한 실행
별 문제 없이 실행되었다.
GPL·AGPL·MPL…한눈에 보는 오픈소스SW 라이선스.pdf
