영문보다 괜찮게 정리한글
출처 : http://ujeani.wordpress.com/2011/09/02/002/
웹앱 또는 아이폰과 안드로이드용 하이브리드 앱을 개발하기 위한 선택은 여러가지가 있다. 여기에서는 그 중에서도 PhoneGap과 jQuery Mobile을 이용하여 하이브리드 앱을 개발하는 것에 대해 설명한다.
PhoneGap은 아마도 현재 가장 활발하게 개발되고 적용되고 있는 플랫폼이라 생각된다. 오픈 소스로 공개된 플랫폼일 뿐 아니라 이 플랫폼에 적용하기 위해 많은 사람들이 다양한 플러그인을 개발, 적용하고 있다.
이 글에서는 PhoneGap의 홈페이지에서 제공하는 설치 방법에 따라 android 개발을 위해 eclipse에 설치하는 방법과 iOS를 위해 Xcode에 설치하는 방법을 설명한다.
안드로이드 플랫폼을 위한 PhoneGap 설치
1. Android 개발환경 셋업
이미 안드로이드 앱을 개발하고 있는 개발자라면 개발 환경은 셋업되어있을 것이다. PhoneGap을 위해 개발 환경을 새로 설정하는 경우라면 안드로이드 개발자 사이트의 절차를 잘 따라하길 바란다.
2. 새로운 프로젝트 만들기
- 1단계의 모든 툴들을 설정하였다면 Eclipse 를 실행하여 File>New>Android Project 선택하여 새로운 프로젝트를 시작한다. 이 대화창에서 다음 사항들을 설정한다.
Project name
Build target
Package name
안드로이드 개발자라면 여기까지는 매번 프로젝트 시작때마다 하는 단계일 것이다.
3. 폴더 추가하기
프로젝트 루트 폴더에 두 개의 새로운 폴더를 만든다.
4. Javascript 파일 복사
- 다운로드한 PhoneGap 파일들 중 Android 폴더 내에 있는 phonegap.js 파일을 /assets/www 로 복사한다. (폴더 구성에 따라 서브 폴더를 만들고 복사해도 된다.)
- 여기서 기본적이지만 중요한 주의 사항 하나! phonegap.js 는 꼭 다운로드 받은 PhoneGap 파일들 중에서 Android 폴더에 있는 phonegap.js 파일을 사용해야 한다. 즉, phonegap.js는 각 플랫폼에 맞는 버전을 사용해야 한다는 것이다. 매우 기본적인 사항이지만 이걸 깜빡하면 일주일간 개고생(!) 을 할 수도 있다. 나처럼..
5. jar 파일 복사하기
- 다운로드한 PhoneGap 파일들 중 phonegap.jar 파일을 /libs 폴더로 복사한다.
6.xml 폴더 복사
- 다운로드한 PhoneGap 파일들 중 xml 폴더를 /res 로 복사한다.
7. 프로젝트 메인 Java 파일 수정하기
프로젝트 아래의 /src 폴더에 있는 Project 메인 Java 파일({$프로젝트명}Activity.java – 예:SenchaMapActivity.java)에서 몇 가지 수정을 하여야 한다.
- class의 extend를
Activity 에서 DroidGap으로 변경한다.
setContentView(); 를 super.loadUrl("file:///android_asset/www/index.html");로 변경한다.import com.phonegap.*;을 추가한다.
8. jar파일 추가하기
여기까지 진행한 상태에서는 Eclipse가 phonegap-1.0.0.jar를 발견하지 못하여 에러가 발생함을 볼 수 있을 것이다. 이것을 해결하기 위해 /libs 폴더에서 오른쪽 마우스 버튼을 클릭한 후 Build Paths/ > Configure Build Paths를 선택한다. 이때 표시되는 화면의 Libraries 탭에서 Add Jars 를 선택하여 Project에 phonegap-1.0.0.jar 를 추가한다.
9. AndroidManifest.xml 수정하기
- AndroidManifest.xml를 찾아 오른쪽 마우스를 클릭한 후 Open with > Text Editor 를 선택하여 파일을 연다.
android:versionName="x.x">을 찾아 그 아래쪽에 다음의 퍼미션을 복사해서 붙여넣는다. (묻지도 따지지도 말고 그냥 복사해 넣는다..)
02 |
android:largeScreens="true" |
03 |
android:normalScreens="true" |
04 |
android:smallScreens="true" |
05 |
android:resizeable="true" |
06 |
android:anyDensity="true" |
08 |
<uses-permission android:name="android.permission.CAMERA" /> |
09 |
<uses-permission android:name="android.permission.VIBRATE" /> |
10 |
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> |
11 |
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> |
12 |
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> |
13 |
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> |
14 |
<uses-permission android:name="android.permission.INTERNET" /> |
15 |
<uses-permission android:name="android.permission.RECEIVE_SMS" /> |
16 |
<uses-permission android:name="android.permission.RECORD_AUDIO" /> |
17 |
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> |
18 |
<uses-permission android:name="android.permission.READ_CONTACTS" /> |
19 |
<uses-permission android:name="android.permission.WRITE_CONTACTS" /> |
20 |
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> |
21 |
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> |
-
<activity android:name= ....> 내부에android:configChanges="orientation|keyboardHidden" 를 추가한다.
자, 이제 PhoneGap을 이용해서 안드로이드용 앱을 개발하기 위한 개발 환경의 설정이 완료되었다.
10. 앱 개발
PhoneGap 을 이용한 안드로이드 앱의 소스들은 /assets/www에 만들며 그 첫번째 시작은 일반적인 웹 개발과 같이 index.html로 부터 시작한다. 이제 웹을 개발할때 사용한 HTML, CSS, Javascript의 온갖 고급 기술과 잡기와 꽁수를 총동원하여 웹사이트를 개발하는 처럼 개발을 하면 된다.
그럼 누구나 꼭 한 번은 하고 넘어가야할 helloworld 앱을 만들어보자. 아래 코드는 이 앱을 위한 index.html 의 내용이다. phonegap.js를 포함시켜야 하는 것을 유념하면 된다.
04 |
<title>PhoneGap</title> |
05 |
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> |
11. 시뮬레이터에서 실행하기
- 이제 위의 index.html을 저장하고 Run>Run As>Android Application을 선택한다.
- Eclipse는 어떤 AVD를 사용할 것인지 물어보고 적절한 AVD를 선택하면 된다. 아직 AVD가 없다며 해상도등을 지정하여 새로 만든다.
- 아는 사람은 다 알지만 안드로이드 시뮬레이터는 실행되는데 상당히 오랜 시간이 걸린다.
- 처음 안드로이드 환경을 설정하고 시뮬레이터를 띄워보는 경우라면 뭔가 잘못된 줄 알고 시뮬레이터를 강제 종료시키고 다시 실행시키는 삽질을 할 수 도 있다. 또 나처럼…
12. 디바이스에서 실행하기
- 안드로이드폰의 환경설정>응용프로그램>개발 메뉴에서 “USB 디버깅”이 체크되어있는지 확인한다.
- 안드로이드폰을 USB로 연결한다.
- Run>Run As>Android Application을 선택한다.
- 이제 위에서 개발한 helloworld 앱이 안드로이드폰에서 실행될 것이다.
이젠 PhoneGap 을 이용한 안드로이드 앱을 개발할 수 있는 준비가 되었다. 안드로이드 개발 환경을 한 번도 사용해 보지 않은 사람도 안드로이드 개발 환경 설정 안내 페이지와 이 페이지의 절차를 잘 따라했다면 큰 어려움 없이 개발 환경 셋업이 가능할 것이다.
