PhoneGap 개발환경을 구축하고 샘플 프로젝트를 생성하여 시뮬레이터에서 띄워 보았다
또한 이클립스를 이용해 안드로이드 프로젝트로 불러와서 실행해 보았다

자동으로 생성된 샘플 프로젝트이 코드 구조를 대략 살펴 보았다

phonegap.jar 라이브러리
폰갭 프로젝트는 phonegap.jar 라는 압축 형태의 클래스 모음인 라이브러리가 포함된다
안드로이드 프로젝트가 각 버전에 맞는 android.jar 가 필요하듯이 미리 정의된 폰갭 클래스들을
위한 라이브러리가 필요하다

phonegap.jar 에는 com.phonegap 패키지로 묶여 있는 많은 클래스가 정의되어 있다
여기에 폰갭 프로그램 구성을 위한 각종 클래스와 Device 고유 기능을 이용하기 위한
일종의 랩퍼 클래스들이 정의되어 있는 듯 하다

메인 클래스 구성
일반적인 안드로이드 어플리케이션의 경우 메인 클래스는 Activity 로부터 상속받는다
그리고 setContentView 메서드를 통해 View를 Activity 에 바인딩하는 구조이다

하지만 폰갭 어플의 경우 phonegap.jar 에 있는 DroidGap 클래스로부터 상속을 받도록 되어있다
그리고 이 DroidGap 클래스에 정의된 loadUri 메서드를 통해 html과 같은 웹 리소스를 바인딩 하는
구조이다. 다음 코드는 자동으로 생성된 폰갭 프로그램의 메인 클래스 전체 코드이다
라이브러리로 추가된 com.phonegap 패키지를 import 하고 DroidGap를 상속받으며
loadUrl 을 통해 html 파일을 화면에 바인딩하고 있다

웹 리소스
폰갭 프로젝트를 만들면 index.html 파일과 css, js 파일 등의 웹 리소스가 자동 생성 되는데,
이 파일들은 프로젝트의 assets 폴더에 위치하게 된다

보통 안드로이드 프로젝트의 경우 assets 폴더의 역할은 컴파일 되지 않는 큰 리소스를 담는 용도이다
프로그램은 코드와 리소스로 구분되는데 리소스는 또 컴파일 되는 경량의 리소스와 원본 그대로 저장하는 큰 리소스로 구분된다

안드로이드 프로젝트이 res 폴더는 경량의 리소스를 위한 폴더이며 assets 는 큰 리소스를 위한 폴더이다. HTML 파일이나 동영상과 같은 큰 데이터를 위한 공간이 assets 인 셈이다

폰갭 프로그램의 사용자 화면에 해당하는 html 파일과 Device 기능 호출을 위한 js 파일 등 웹 리소스가assets 폴더에 위치하고 있다

이후부터는 일반적인 웹 개발을 진행 하듯 웹 리소스들을 추가, 수정 하면 될 듯 하다
물론 폰갭이 제공하는 각종 디바이스 접근 기능을 사용하려면 폰갭 스크립트에 대한 학습이 있어야 할 것 같고...

PhoneGap 이라는 것이 도대체 어떤 식으로 구성되고 어떤 식으로 개발되는지 알아보기 위해 환경 구추을 해보기로 했다

오늘 환경 구축을 하고 샘플 프로젝트도 돌려 봤지만.... 음.. 여전히 낯설다
일단 PhoneGap 개발 환경을 셋팅하는 것을 정리 해 본다

1. 안드로이드 개발 환경 구축
PhoneGap 는 각 모바일 플랫폼 별로 개발환경이 셋팅되는 듯 하다
음.. 이건 좀 의외다. 단순히 기본 웹 개발 환경에서 적당히 갖다 붙이기만 하면 될 줄 알았는데,
각 개발환경과 유기적으로 결합된 느낌이다. 물론 설치 후에는 웹 개발 하듯 하면 되는 것 같다

안드로이드 기반 PhoneGap 를 설치하기 위해서 먼저 안드로이드 개발환경이 구축되어 있어야 한다
다음 글을 참고해서 안드로이드 개발 환경을 구축한다

http://mobilepp.tistory.com/18

2. Apach ANT 설치
이것은 뭣에 쓰는 물건인고? 음.. 필요 하다고 하니, 일단 설치 해 보자
다음 사이트로 이동해서 압축파일을 다운 받아서 압축해제 한다

http://ant.apache.org/bindownload.cgi

3. Ruby 설치
이건 또 뭣에 쓰는 물건인고.. 음.. 아파치 안트에 이어 루비까지.. 도대체 폰갭은 어떤 환경이길래,
이름만 들어 본 이것들을 요구하는가? 역시 필요하다고 하니 설치 해 보자
다음 사이트에서 다운받아서 설치 파일을 실행해서 설치를 완료한다

http://www.ruby-lang.org/en/downloads/




4. 안드로이드용 폰갭 설치
다음 사이트에서 압축파일을 다운로드 하여 압추 해제 한다
http://github.com/phonegap/phonegap-android

5. 윈도우 환경 변수 등록
앞 두 과정에서 설치한 Apach ANT 와 Ruby 의 환경변수를 등록한다
시스템 환경변수 Path 에 다음 두 경로를 추가하자

- Apche ANT 의 bin 폴더 등록
D:\MobileWeb\PhoneGap\apache-ant-1.8.1-bin\apache-ant-1.8.1\bin;

- Ruby 의 bin 폴더 등록
D:\MobileWeb\PhoneGap\Ruby191\bin;

- 그리고 안드로이드 개발 환경에서 설치했던 Android SDK 의 tools 폴더도 path로 등록한다
D:\Android\android-sdk-windows\tools

마지막으로 JAVA_HOME 환경변수를 새로 추가 해야 한다
만일 이 변수가 추가되어 있지 않다면 폰갭 프로젝트 빌드 시 아래와 같은 오류를 만나게 된다


이것 때문에 한참을 해맸다. 폰갭에서 JAVA_HOME 이라는 환경변수를 참조해서 JDK의 위치를
참조하나 보다. 어쨋던 아래와 같이 JAVA_HOME 라는 변수 명으로 JDK 위치를 등록해 주자



이제 기본적인 설치는 완료 되었다

다음으로 폰갭 프로젝트를 하나 생성해 보도록 하자
안드로이드용 폰갭 프로젝트를 만들고 빌드 하려면 명령프롬프트를 사용해야 하나보다

명령프롬프트를 띄워서 4 과정에서 설치한 안드로이드 용 폰갭 압축 해제한 폴더로 이동하여 다음
명령을 수행하자

CMD>Ruby droidgap <android_sdk_path> <name> <package_name> <www> <path>

<android_sdk_path>: Android SDK 폴더 위치
<name>: 프로젝트 명
<package_name> : 패키지 명
<www> : 웹 파일(html, js, css) 등이 위치할 폴더 지정
<path> : 이 프로젝트가 생성될 위치 지정

현재 나의 환경에서는 다음과 같은 CMD 명령을 수행했다
그리고 Complete! 라는 결과가 나왔다

즉 아래와 같이 명령을 수행했다

Ruby droidgap "D:\\\Android\\\android-sdk-windows" "Demo" "my.phonegap.demo" .\example ..\PhoneGapDemo1


프로젝트가 하나 생성되었으니 에뮬레이터로 확인해 보도록 하자
다음 사이트에서 에뮬레이터를 다운 받고 설치 한다

http://www.phonegap.com/tools




에뮬레이트를 실행하여 앞서 만든 프로젝트를 로드 해 보자
우측의 새 문서 아이콘으로 index.html 파일을 로드하면 아래와 같이 시뮬화면이 나타난다
이것 저것 손 대 보니 꽤 흥미로운 시뮬레이터이다. 아이폰, 안드로이드 등 스킨을 선택할 수 있고
폰 세로,가로 기울이기 등 동작에 반응하도록 시뮬해 볼 수 있다
자세한 건 하나씩 알아 가면서 다음에 정리하기로 하자




그리고 마지막으로 이클립스를 통해 앞서 생성한 프로젝트를 불러와서 실행 해 보자
이클립스에서 새 프로젝트를 만드는데, 앞서 생성한 프로젝트가 있으니
다음 그림과 같이 이미 존재하는 프로젝트로 해당 경로를 선택해 준다

그리고 이상하게, BuildTarget이 Goolge APIs 로 잡혀버려서 강제로 Android 2.2로 변경했다



다음으로 프로젝트를 빌드 하기 전에 phonegap.jar가 라이브러리로 추가 되었는지 확인한다
아래 그림과 같이 프로젝트의 properties 로 가서 phonegap.jar 체크박스를 체크한다.
만일 없으면 Libraries 탭으로 이동해서 새로 추가해야 한다.



그리고 프로젝트를 실행(Run) 해 보자. 안드로이드 에뮬이 아래와 같이 실행된다



음.. 일단 여기까지... 설치 완료!
설치 하면서 꽤 삽질했다 --;

html 파일은 그렇다 치고.
안드로이드 Activity  에 어떻게 Add In 되나 소스를 보니 다음 한줄에 핵심인듯..

public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}

일반적인 안드로이드 구성은 setContentView 를 통해 View 객체를 바인딩 하는 것에 반해
폰갭은 html 파일을 load 하는 구조이구나!!

일단은 여기까지 정리하고 시간을 내어 하나하나 자세히 살펴 봐야 겠다
어떤 식으로 구성되어 있는지 그리고 어떻게 개발을 덧 붙여 나가는 지 등등 볼게 많구낭...

모바일 웹은 모바일 단말기의 브라우저에서 동작하기 때문에 앱(App)처럼 별도의 설치나 업데이트
과정이 필요치 편리하다.

그리고 모바일 앱(App)의 경우 아이폰, 안드로이드, 윈도모바일 등 각 플랫폼마다 개발하는 환경이나
언어가 서로 상이해서 각각 별도로 개발해야 하지만 웹은 그럴 필요가 없다

이러한 특징은 전통적인 데스크탑의 윈도우어플리케이션과 웹어플리케이션과의 차이점과 거의 동일한 개념이다.

모바일 시장의 성장과 환경의 보편화로 모바일 앱(App)도 성장을 하겠지만 모바일 웹도 그에 못지않은 영역을 구축해 나갈 것 같다

물론 모바일 웹이 모바일 앱에 비해 가지는 단점도 몇 가지 있는데...
그중에서도 모바일 단말기 즉 디바이스의 고유 기능을 사용할 수 없다는 것이 가장 안타깝다
고유기능이라 함은 디바이스의 전화번호부, SMS, 일정관리, 사진, 파일시스템 등을 말하며 이들 컨텐트에 접근해서 핸들링 할 수 없다는 것이다

웹 자체가 브라우저에서 해석되고 실행되기에 어찌보면 당연한 것이지만 그래도 이러한 제약이
모바일 웹의 기능 확장에 걸림돌이 될 소지는 충분히 있어 보인다

모바일 장치 자체가 굉장히 개인화된 영역이고 이러한 개인성향의 컨텐츠가 웹 컨텐츠와 융합될 수 있다면 다양한 모바일 웹 어플리케이션이 개발 가능하지 않겠는가?

그런데. 이것이 불가능 하지 않다 !!!
바로 PhoneGap 이다. http://www.phonegap.com/

폰갭은 HTML, JavaScript 을 기반으로 하는 오픈소스 개발 프레임워크로 아이폰, 안드로이드폰, 블랙베리 등의 SDK 핵심 기능을 지원하는 굉장히 고마운 놈이다

폰갭을 이용하면 모바일 웹에서도 디자이스의 고유 기능을 가져다 쓸 수 있다고 한다
점점 알아볼것이 많이 생긴다 --;

그리고 폰갭 이외에도
Bondi, Titanium Mobile 라는 것도 있는데, 역시 유사한 기능을 제공해 주는 프레임워크라 한다