기본 콘텐츠로 건너뛰기

Android - PhoneGap 개발환경 구축 및 테스트 실행까지 ~!

 

이미지따윈 취급하지 않았다. 

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

화이팅 !! 

 

환경

OS : windows7 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 버튼 클릭 시 환경에 맞는 설치파일을 다운로드 받을수있다. 

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


*** 설치사항 추가 

*** git 설치 (플러그인 설치시 git URL 로 설치할 경우가 발생하므로 꼭 설치되어야함)

방법은 아래 주소 참고

http://forum.falinux.com/zbxe/index.php?document_srl=588283&mid=lecture_tip



6. 폰갭(PhoneGap) 설치

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

최신버전 사용방법 (전 이걸 적용했숨다)


(작성 참고사이트 : http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide )


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 함수에 파라미터를 웹앱 주소로 적용한 다음 실행해보면 

웹앱이 네이티브앱으로 변환되어 보이는것을 확인 할 수 있다. 

 

 

 


android sqlite를 사용하기위한 sqlite 플러그인 추가 및 사용법 주소  

 https://github.com/brodysoft/Cordova-SQLitePlugin








아래 주소로 이동하면.. 플러그인 설치에따른 숨겨진 .js 파일을 볼수있는 방법이있음 

힌트 : assets 아래에 있는.. _where-is-www.txt

http://insnote.com/xe/kkang/6369

 

댓글

이 블로그의 인기 게시물

리눅스 부팅시 스크립트 실행하기

서버를 끄고 켤때  실행되어야할 명령 혹은 프로세스들이 있을것이다. 이것들을 서버를 켜고 매번 직접 실행시켜준다면 누락의 위험도 잇고.. 번거롭기도 하고  그리하여  윈도우즈에서 시작프로그램에 등록하면 컴퓨터가 다 켜졌을때 알아서 실행해주듯이 리눅스에도 이와같은 기능이 있다.  ============================================================= 기본배경지식 리눅스는 부팅이되면서  런레벨에 맞는 작업을 수행하며  각 런레벨의 작업은 아래와 같이 분리된다.  /etc/rc.d/rc0.d           runlevel 0 /etc/rc.d/rc1.d             runlevel 1 /etc/rc.d/rc2.d             runlevel 2 /etc/rc.d/rc3.d             runlevel 3 /etc/rc.d/rc4.d             runlevel 4 /etc/rc.d/rc5.d             runlevel 5 /etc/rc.d/rc6.d             runlevel 6 /etc/rc.d/rc.local         모든 부팅작업이 완료된 다음 마지막에 수행  ============================================================= 부팅시 스크립트 실행하기  방법 1. 난이도 (하),  rc.local 에 등록하기. rc.local 을 편집기로 열어서  vi  /etc/rc.d/rc.local    실행하고자 하는 스크립트를 작성  톰캣을 실행한다고 했을때 예제 : su - root -c /tomcat/bin/startup.sh  위에서 root 부분은 사용자계정으로 실행하고싶을 시 사용자계정을 적용해주면 되고.. 뒤에 톰캣 startup.sh 경로는 본인에 상황에 맞는 경로로 ~  방법 2. 난이도 (중) 서비스로 등록하기  방법2는 .. 조금 내용도 길고 이해가 필요하므로 잘 정리되어있는 이곳을 참조하자.  http

Redhat 7, CentOS 7 이상버전의 locale 설정 (언어설정)

레드햇과, 센트오에스 6점대 버전까지는 /etc/sysconfig/i18n 이곳에 인코딩설정을 해서 처리했었지만 7부터는 i18n을 사용하지 않는다. 필요할법한 명령어들을 정리해봤으니 참고해서 사용하면 되겠다. 1. 현재 언어셋팅상태 확인 env |grep -e LANG -e LC 또는 locale 2. 시스템에서 지원 가능한 캐릭터셋 확인 localectl list-locales 3. 콘솔명령어를 통해 locale설정 변경 localectl set-locale LANG={적용할 캐릭터셋} ex) localectl set-locale LANG=ko_KR.euckr 4. 캐릭터셋 수동설정 vi /etc/locale.conf 로 파일을 연다음 아래 내용을 작성 LANG={적용할 캐릭터셋} ex) LANG=ko_KR.euckr 설정 완료후 재부팅시 locale명령을 통해 원하는 캐릭터셋이 유지되는지 확인

vscode (visual studio code) 한글 인코딩 설정

1. 파일 -> 기본설정 -> 설정 에서 나오는 설정화면 우측에 아래 두개 내용을 추가 "files.encoding" : "EUC-KR" , "files.autoGuessEncoding" : true 위에는 항상 EUC-KR 로 인코딩하겠다는 기본설정을 바꾸는 내용이며 아래는 현재 파일에 알맞은 인코딩을 알아서 찾겠다는 내용이라고 한다 끝 !