이미지따윈 취급하지 않았다.
아래 작성한 순서 고대~로만 따라온다면 무리없이 웹앱을 네이티브앱으로 실행해볼 수 있을것이다.
화이팅 !!
환경
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. 주소
- 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
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
근데.. 구버전 사용해서 하면.. 자꾸 오류가 조금씩 ㅡ,.ㅡ ;;
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
댓글
댓글 쓰기