PhoneGap 개발 환경 구축 (안드로이드 기반)

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 하는 구조이구나!!

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