Android - PhoneGap 개발환경 구축부터 테스트 실행까지

 

아래 작성한 순서 고대~로만 따라온다면 무리없이 웹앱을 네이티브앱으로 실행해볼 수 있을것이다.

화이팅 !!

 

환경

OS : windows10 64bit

 

아무것도 없다는 가정하에 개발환경 구축 절차 나열해보겟습니다.

 

1. JDK 설치 (설치방법 생략)

1-1. JAVA 환경변수 설정

      - 윈도우로고 + Pause Break = "시스템" 창

      - "시스템"창 좌측 "고급 시스템설정" 클릭

      - 우측 하단에 "환경 변수(N)..." 클릭

      - 하단 "시스템 변수" 영역에서 "새로 만들기" 클릭

      - 변수이름 : JAVA_HOME

      - 변수 값 : C:\Program Files\Java\jdk1.8.0_25

      - 위 두가지 입력 후 확인

      - 시스템 변수 항목중에서 Path 항목 선택 -> 편집 클릭

      - 맨 끝에 ;%JAVA_HOME%\bin; 입력

1-2. JAVA 설치확인

      - 명령프롬프트 실행

      - java -version 입력 > 버전정보가 나오면 정상적으로 환경변수가 설정된것이다.

 

2. Android bundle 설치 (Android 개발환경으로써 번들로 포함된 이클립스까지 한번에 OK)

2-1. 다운로드

      - http://developer.android.com/sdk/index.html

      - Download Eclipse ADT with the Android SDK for Windows 클릭

2-2. 설치

      - 다운받은 zip 파일을 원하는곳에 압축을 풀면 끝.

      - 간혹 너무 긴 이름의 경로가 만들어지는탓에 압축이 잘 안풀릴때가있는데..

      - 압축 풀때 디렉토리 명을 짧게 지어주면 해결됨

 

3. Android SDK 설치

3-1. Android SDK 환경변수 설정

      - 우선 android sdk 에 대하여 환경변수 설정부터 고고

      - 윈도우로고 + Pause Break = "시스템" 창

      - "시스템"창 좌측 "고급 시스템설정" 클릭

      - 우측 하단에 "환경 변수(N)..." 클릭

      - 시스템 변수 항목중에서 Path 항목 선택 -> 편집 클릭

      - 내용 추가 후 저장

>> ;C:\adt-bundle-windows-x86-20140702\sdk\tools;C:\adt-bundle-windows-x86-20140702\sdk\platform-tools;

3-2. SDK 매니저 실행 및 SDK설치

      - 2번에서 압축을 푼곳에 들어가서 이클립스 실행

      - 이클립스의 메뉴에서 Window -> Android SDK Manager 클릭

      - 원하는 항목을 선택해서 이것저것 install 진행 ~

      - 저는 4.2.2, 4.3.1, 4.4 버전의 SDK 만 선택해서 설치했고.. tools 와 extra 들을 설치했습니다.

 

4. ANT 설치 (PhoneGap 에서는 Apache Ant를 사용한다고 함..)

4-1.다운로드

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

      - Current Release of Ant 항목에서 .zip archive 항목 다운로드

      - 저는 apache-ant-1.9.4-bin.zip 를 다운받았습니다.

4-2. 설치

      - 원하는 위치에 압축을 풀고 환경변수 설정해주면 끝.

4-3. 환경변수 설정

      - 윈도우로고 + Pause Break = "시스템" 창

      - "시스템"창 좌측 "고급 시스템설정" 클릭

      - 우측 하단에 "환경 변수(N)..." 클릭

      - 하단 "시스템 변수" 영역에서 "새로 만들기" 클릭

      - 변수이름 : ANT_HOME

      - 변수 값 : C:\apache-ant-1.9.4

      - 위 두가지 입력 후 확인

      - 시스템 변수 항목중에서 Path 항목 선택 -> 편집 클릭

      - 맨 끝에 ;%ANT_HOME%\bin; 입력

4-5. ANT 설치확인

      - 명령프롬프트 실행

      - ant -version 입력 > 버전정보가 나오면 정상적으로 환경변수가 설정된것이다.

 

5. Node.js 설치

5-1. 주소

      - http://www.nodejs.org/

      - install 버튼 클릭 시 환경에 맞는 설치파일을 다운로드 받을수있다.

      - 설치파일 실행해서 셋업하면 환경변수설정까지 알아서 완료 ~

 

6. 폰갭(PhoneGap) 설치

6-1. cordova 설치

      - 명령프롬프트 실행

      - c:\>npm install -g cordova

6-2. 프로젝트 생성

      - c:\>cordova create testapp com.test.testapp testapp

      - c:\>cd testapp

      - c:\>cordova platform add android

      - c:\>cordova build

 

이제 만들어진 프로젝트를 이클립스에서 불러다 사용하면 되구요

 

* 중요

익히 알고계시겠지만

하이브리드앱인 즉슨 웹앱을 네이티브앱 화 시키기위해 폰갭이 중간다리 역할을 해주는거라고 생각할수있습니다.

따라서 웹앱에서 네이티브앱에 카메라, 위치정보, 이것들에 접근하려면 플러그인 이라는게 별도로 추가되어야 하는데요!

 

$ cordova plugin add org.apache.cordova.device

$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status

$ cordova plugin add org.apache.cordova.device-motion

$ cordova plugin add org.apache.cordova.device-orientation

$ cordova plugin add org.apache.cordova.geolocation

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media

$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer

$ cordova plugin add org.apache.cordova.dialogs

$ cordova plugin add org.apache.cordova.vibration

$ cordova plugin add org.apache.cordova.contacts

$ cordova plugin add org.apache.cordova.globalization

$ cordova plugin add org.apache.cordova.splashscreen

$ cordova plugin add org.apache.cordova.inappbrowser

$ cordova plugin add org.apache.cordova.console

위와 같은 형태로 플러그인들을 추가할 수 있으며 추가후에 cordova build 명령을 수행하고

이미 개발중이던 이클립스는 껏다 키면 해당 플러그인들이 알아서 로딩되는모습을 보실 수 있습니다.

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

근데.. 구버전 사용해서 하면.. 자꾸 오류가 조금씩 ㅡ,.ㅡ ;;

6-1. 다운로드 및 설치 (구버전 사용시)

      - http://cordova.apache.org/#download

      - Older versions can be downloaded from the archive. 라는 문구에서 archive에 링크를 타고이동

      - http://archive.apache.org/dist/cordova/ 이곳으로 이동하게되면 여러 zip 파일들이 있음

      - 스크롤을 쭉 내려서 전 최신버전을 받겟습니다. cordova-3.4.0-src.zip

      - 원하는 위치에 압축을 푸시고 ~

      - 압축을 풀면 그 안에 cordova-android.zip 가 존재하는데 이것도 압축을 풀어줍시다.

6-2. Android SDK 설정

      - 기본적으로 최신버전의 SDK(android-19) 를 찾으려고하기때문에 내가 원하는 SDK 를 사용하도록 설정필요

      - 저는 4.2.2 (SDK 버전17 ) 이므로 ~ 아래와같이 셋팅합니다.

      - 명령프롬프트 : cd C:\cordova-3.4.0\cordova-android\framework (디렉토리 이동)

      - 명령프롬프트 : android update project -p . -t android-17 (SDK 버전을 17로 설정)

6-3. 폰갭 프로젝트 생성 테스트 !

      - 명령프롬프트 실행

      - 명령프롬프트 : cd C:\cordova-3.4.0\cordova-android\bin (디렉토리 이동)

      - 명령프롬프트 : create c:\testapp com.test.testapp testapp (testapp 라는 폰갭프로젝트 생성)

      - Project successfully created. 명령이 나오면 정상적으로 프로젝트를 생성한것입니다.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 

7. 폰갭 프로젝트 실행

      - 6번에서 만든 프로젝트를 3번에서 설치한 Android bundle Eclipse 에서 돌려봅시다.

      - File - New - Project 클릭

      - Android - Android Project from Existing Code 선택

      - Browser 클릭해서 6에서 만든 프로젝트폴더를 선택한뒤 finish 클릭

           * 만약에.. 워크스페이스에 이 프로젝트를 넣어두고 호출을 한다면

           "invalid project description" 이와같은 에러가 발생할지어다..

           해결방법 : 워크스페이스안에잇는 프로젝트 디렉토리를 그대로 잘라내어 다른곳으로 이동시킨 뒤 참조하면 정상적으로 작동함 !

 

*** 아.. 혹시 웹앱을 이미 만들어둔게 있다면 간편하게 폰갭 테스트 프로젝트에서 호출해볼수있다.

 

1. 위에서만든 testapp.java 를 열면 친절하게도 아래와같이 소스가있는데

public void onCreate(Bundle savedInstanceState)

{

      super.onCreate(savedInstanceState);

      super.init();

// Set by <content src="index.html" /> in config.xml

      super.loadUrl(Config.getStartUrl());

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

}

 

loadUrl 함수에 파라미터를 웹앱 주소로 적용한 다음 실행해보면 웹앱이 네이티브앱으로 변환되어 보이는것을 확인 할 수 있다.