하이브리드 앱 프레임워크 (PhoneGap)

이전 블로그에서 이전 함 (원본 글 2013/04/07 작성)

웹앱을 만들어 보려고 찾고 있는 중에 하이브리드 앱 프레임워크를 알게 됨.

하이브리드 앱 프레임워크는 대략 아래 3가지가 대표적임.

[하이브리드 앱 프레임워크]

1. PhoneGap

. http://phonegap.com/

2. APPSPRESSO

. http://appspresso.com/

3. Titanium

. http://www.appcelerator.com/

각각에 대한 장단점은 아래 링크를 참조하면 될듯.

[참고]

(아래표 출처) 하이브리드 앱 개발 전략과 이슈 : http://www.slideshare.net/iolo/ss-13724051

크로스플랫폼 앱 프레임워크 선택의 기준 : http://www.slideshare.net/w3labs/ss-9014657

PhoneGap을 이용한 앱 개발 : http://helloworld.naver.com/helloworld/8180

[모바일] 다양한 하이브리드 무엇이 최선일까? :  http://koko8829.tistory.com/1172

일단 PhoneGap을 한번 사용해 보기로 함...

-----------------------------------------------------------------------------------------------------------------------------

[Getting Started]

http://docs.phonegap.com/en/2.5.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

1. 준비 및 설치

. Eclipse Classic

. Android SDK

. ADT Plguin

. Phone Gap

2. 환경 변수 설정

. Android SDK 의 platform-tools과 tools 위치들

. java JDK의 bin 위치

* Windows의 경우 JDK, Android SDK, Ant를 설치 해야 한다.

%PATH% 환경 변수에 JDK/bin, Android SDK/tools, platform-tools, Ant/bin 을 설정 하고 

JDK 설치 시 JAVA_HOME (= JDK Root directory) 를 환경 변수로 설정해야 한다.

3. Android project 생성

. Phone Gap 설치 폴더/lib/android/bin 에서

./create <project_folder_path> <package_name> <project_name>

 : <project_folder_path> 는 eclispe의 workspace 내로 지정하면 

   "overlaps the location of another project.." 에러 발생한다.

   => http://stackoverflow.com/questions/11733089/eclipse-error-overlaps-the-location-of-another-project-when-trying-to-cr

. 생성된 <project_folder_path>를 Eclispe New Project에서 "Android Project from Existing Code"로 import

4. 실행 (Run As > Android Application)

실행된 화면은 PhoneGap의 로봇 아이콘과 APACHE CORDOVA DEVICE IS READY라는 문구가 보인다.

[동작]

- main java 파일

. onCreate()가 override 되어 있고 URL을 loading하는 부분 존재

  super.loadUrl(Config.getStartUrl());

  : res/xml/config.xml 내 <content> tag 내의 src attribute의 url을 open한다.

  : <content src="index.html"/> 일 경우 아래 문구와 동일하게 동작.

   > super.loadUrl("file:///android_asset/www/index.html");

   > project내의 assets 아래 www/index.html을 open

- res/xml/config.xml

. 설정<access>, <content>, <log>, <preference>, <plugin> 등이 있음. 자세한 것은 아래 링크 참조

 > https://build.phonegap.com/docs/config-xml

- assets/www/index.html

. Hello World title의 HTML파일 존재

. "cordova-2.5.0.js java script loading

. app.initialize() 호출

- 로딩 속도가 좀 느리다.. 다른 feature는 모르겠고...