폰갭 + 이클립스 실행 최종본

안드로이드 개발환경을 폰갭을 이용하기로 하고 세팅을 하던 중 무척이나 까다로워서 성공한 내역을 기록해 둔다.

- 이 내용은 2014년 2월 5일에 최종 수정되었다.

내 환경은

Windows 8 Professional 64bit Kor
C: – Windows 설치
D: – 작업드라이브
E: – 임시드라이브
C/D/E 모두 SSD로 세팅되어 있으며 Intel 하스웰 i5, 8GB DDR3, ATI환경이다.

아래쪽 참고 사이트를 토대로 해나왔으며 굵은 글자로 된 두 사이트에서 많은 도움을 받았다.

1.

안드로이드 개발환경이므로 Java를 설치해야 한다. Java 7 SDK를 다운받아 설치한다. 내 경우엔 C:\Program Files\Java\jdk1.7.0_45 폴더로 설치가 되었다.

2.

환경변수를 처리해주어야 한다. PATH설정을 해주는것인데 일부 안내사이트에서 해주는대로 했을 경우 정상적으로 되지 않아 내 임의대로 처리한 부분이 있다. 제어판 – 시스템 및 보안 – 시스템으로 들어간다.

 

좌측 상단부 화살표 표시된곳의 고급 시스템 설정으로 들어가서 환경변수 버튼을 누른다.

내 경우엔 D:드라이브에 Development라는 폴더를 만들어서 그곳에서 작업을 하려고 한다. 따라서 각자 원하는 위치에 폴더를 만들어 놓고 시작을 하면 된다. 이 개발환경은 PATH설정을 해주는것 이외에는 따로 크게 연동되서 돌아가는 부분이 없는듯 하다. 따라서 한 폴더에 몰아넣어 놔도 작동은 잘 되었다.

형광펜으로 표시된 부분을 중심으로 보면 좋다. (윈도우 8의 캡쳐도구는 이런걸 하기에 무척이나 편하구나. 잘 써먹고 있다)
사용자변수 부분에 새로만들기 버튼을 클릭해서 변수이름에 JAVA_HOME | 변수값에 C:\Program Files\Java\jdk1.7.0_45라고 넣어준 후 확인버튼을 누른다.

시스템 변수 부분의 Path를 더블클릭하여 설치된 자바의 폴더를 지정해 준다.
마지막 부분에 이렇게 써 넣어주면 된다.

;C:\Program Files\Java\jdk1.7.0_45\bin

사실 이 부분에서 참고했던 사이트들에서는 ;%JAVA_HOME%\bin 이렇게 넣어주라고 되어있었으나 무엇때문인지 내 환경에서는 제대로 작동이 되질 않아서 저렇게 해버렸다. 시스템 변수부분이 제대로 되었는지를 확인하기 위해서는 PATH값이 적용되어야 하는데 윈도우를 재부팅 하면 된다.

자바가 제대로 설치 되었는지를 확인하고자 하면 명령프롬프트를 열어서 C:\>java   혹은 C:\>javac 를 실행했을때 주르륵 메시지가 나오면 된다.

3.

안드로이드 SDK를 설치한다. 여기 저기에서 나오는것들은 SDK만을 설치하고 이클립스를 따로 설치해서 세팅하는 방법등이 나오기도 하는데 이미 이클립스에 익숙하거나 이미 설치해서 사용하시는 분들이라면 어렵지 않을듯 하니 익숙하지 않은 상황에서의 설치로 생각하고  ADT bundle for Windows 를 다운받는다.
다운받은 파일은 일반적인 ZIP파일로 압축이 되어 있는데 압축파일속의 sdk, eclipse 폴더와 SDK Manager.exe 프로그램을 아까 만들어 둔 작업폴더인 Development 폴더로 복사해 넣는다.

이제 PATH를 추가해주어야 한다. 2번에서 했던 환경변수로 가서 Path부분에 다음 두 폴더를 추가해 준다.

;D:\Development\sdk\tools;D:\Development\sdk\platform-tools;

물론 아까 말했듯이 이 내용이 적용되려면 윈도우 재부팅이 이루어져야 한다.

4.

Cordova(PhoneGap)에서는 Apache Ant를 사용한다고 한다. 따라서 설치를 해 주어야 한다.  Download Apache Ant 에서 zip파일을 다운받아서 압축을 풀어준다. 현재 1.9.3버전이며 apache-ant-1.9.3 폴더 자체를 Development 폴더로 풀어준다.

D:\Development\apache-ant-1.9.3

이제 환경 변수를 세팅해 주어야 한다.

2번에서 했던 환경변수를 불러서 새로만들기 버튼을 눌러서 변수이름 ANT_HOME 변수값 D:\Development\apache-ant-1.9.3을 넣어준다.

아래쪽 시스템 변수의 Path를 더블클릭(혹은 클릭 후 편집버튼)을 한 후 다음값을 추가해 준다.

;D:\Development\apache-ant-1.9.3\bin

여기까지 설치된 내용을 확인해 보고 싶다면 명령프롬프트를 열어서

C:\…>android list

C:\…>ant

를 실행했을때 어쩌구 저쩌구 메시지가 뜨면 된것이다.

5.

이제 Cordova(PhoneGap)을 설치한다.

Latest Cordova(PhoneGap) 을 클릭하여 최근 파일을 다운받는다. 현재 시점에서 홈페이지에는 source.zip 파일로 되어 있고 압축을 풀었을때 cordova-3.3.0 버전이다.

압축을 풀면 다음과 같이 나오는데

현재 안드로이드세팅을 하는것이므로 cordova-android.zip 파일을 압축을 풀고 그 폴더를 Development 폴더로 복사한다.

이제 테스트를 위해 Development 폴더내에 projects 폴더를 생성한다.

여기까지 따라왔다면 다음과 비슷할것이다.

6.

이제 테스트를 해 보자. 우선 처음 해야 할 일은 안드로이드 에뮬레이터를 만드는것이다.

D:\Development\eclipse 폴더의 eclipse를 실행하자. 이때 WorkSpace를 지정하라고 하는데 아까 만들어두었던 projects 폴더를 지정하면 안된다. 나도 이제 처음 시작해보는거라 자세한 내용은 모르겠지만 projects 폴더는 폰갭프로젝트를 생성하는데 사용하고 WorkSpace는 이클립스에서 작업환경(?)을 저장하는데 이용하는거 같아 보였다. 따라서 나는 D:\job이라는 폴더로 지정을 하여 실행하였다. 이렇게 하면 자동으로 그 폴더가 생기고 .metadata 폴더가 생성된다.

이클립스를 실행한 후 Window 메뉴에 Android Virtual Devices Manager 를 선택한다.

물론 내 장비에 맞추어 세팅을 해야 겠지만 테스트이므로 위와 같은 세팅으로 만들었다. OK버튼을 누르고나면 에뮬레이터가 만들어진다. 이후에 우측에있는 Start버튼을 누르면 에뮬레이터가 실행되어야 하는데 내 경우엔 에러가 발생하였다.

android launch PANIC: Could not open….

여기 저기 검색을 해본결과로는 이 버추얼디바이스(에뮬레이터)가 C:\사용자\UserName 폴더내에 .android 폴더로 저장되어야 하는데 한글문제인지 아니면 D:드라이브에 작업환경을 갖추어서인지 다른쪽으로 생성되어 생기는 문제였다. 내 경우에는 E:\.android 폴더로 생성이 되어있었다.

심볼릭링크를 걸까 하다 그냥 간단하게 복사해주었다. E:\.android폴더를 복사하여 C:\사용자\User\에 복사하여 넣었다.

이후 Start를 하면 에뮬레이터가 실행된다.

에뮬레이터 실행은 시간이 좀 걸린다.

이제 프로젝트를 생성해서 이클립스로 불러들여 실행을 해보자.

폰갭프로젝트를 생성하기 위해서는 D:\Development\cordova-android\bin 폴더로가서 명령프롬프트를 연다. Windows 8에서는 폴더창에서 파일메뉴를 누르면 그 위치에서 프롬프트를 여는 메뉴가 있다.

프롬프트 상에서 다음과 같이 써 넣고 엔터를 친다.

D:\Development\cordova-androind\bin>create D:\Development\projects\testapp com.myname.testapp testapp

메시지가 주르륵 뜨고 프로젝트가 생성된다.

이제 이클립스를 열고 File – New – Project 를 누른 후 Android – Android Project from Existing Code를 선택하여 Next > 버튼을 누른다.

이제 아까 생성한 testapp 폴더를 선택해주고 Finish 버튼을 누른다.

프로젝트가 Open되면 Run메뉴를 눌러 실행해 보자. 다음과 같이 화면이 나타난다면 환경구성이 끝난것이다.

아무런 코드도 들어있지 않기 때문에 이렇게 나오는게 정상이다.

PS

1) Cordova를 설치(압축을 풀어낸)한 후 이렇게 명령을 넣어주었었다. 추후에 생각난건데 무엇때문에 해야 하는지는 아직 모르지만 적어 놓는다. jar를 생성하는거라고 하는데 혹시라도 계속 따라왔는데 제대로 안된다면 이걸 해 보시길…

D:\Development\cordova-android\framework\android update project -p . -t android-19

위에서 보이는 android-19는 D:….>android list 해보시면 번호가 나옵니다. 그걸 따라 하시면 됩니다.

2) 이건 약간의 노파심인데 검색을 해 나가다가 구버전의 PhoneGap 화면에서 폰갭을 사용하려면 node.js를 설치하라고 나와서 설치를 했었습니다. 이게 위 내용에 영향을 미칠지는 알 수 없으니 실행에 문제가 생긴다면 이것도 설치해 보시길 바랍니다.
NodeJs <- 클릭 후 홈페이지 상의Install 버튼을 눌러 설치.

따라오시느라 수고하셨습니다. 추후 문제가 보이거나 추가해야 할 내용이 생기면 수정 보완하도록 하겠습니다.

제가 일로 사용하는 홈페이지이다보니 댓글세팅을 어떻게 해놨는지, 추후에 막아놓을 가능성도 있습니다. 문의사항이 있다면 트위터 @younoa로 멘션을 주시거나 gsyounoa@gmail.com으로 메일을 주세요.

 

 

 

 

※ 참고

• Intel XDK (http://software.intel.com/en-us/html5/tools)
• Google Web Designer (http://www.google.com/webdesigner/)
• 소개 1 (http://llcrazyll.tistory.com/24)
• 안드로이드용 설치 (http://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android)
• 강좌 1 (http://htmlfive.co.kr)

• PhoneGap and Android on Windows(http://www.andrewsavory.com/blog/2013/2517)

• Installing Android 4.2 SDK and Phonegap 2.4.0 on Windows 7 step-by-step (http://cookieflow.wordpress.com/2013/02/24/installing-android-4-2-sdk-and-phonegap-2-4-0-on-windows-7/)

글참조 : http://insnote.com/xe/kkang/416