PhoneGap 설치하고 예제 실행하기 2 (2012/12/09)

정말 오랜만에 폰갭 관련 글을 올립니다.

요즘 회사일로 Hybrid App 을 연구 중이거든요.

기존의 모바일 웹을 Hybrid App 으로 만들려고 합니다.

그래서 그 기능을 Corona SDK 와 Corona SDK 의 Web App 을 이용해서 Hybrid App으로 만들 수 있는지 여부에 대해 궁금해서요.

지난주에 몇가지 기능에 대해 문의를 했거든요.

목요일 아침에 했는데 아직 응답이 안 오네요.

그래서 오늘(일)은 따로 폰갭을 설치해서 필요한 기능들을 테스트 해 볼까 하는 기특한 마음이 생기더라구요.

(일요일이라고 뒹굴뒹굴 거리지 않고요.. ^^ 이런 날 며칠 없어요..)

지난번에 설치한 건 제 노트북에 설치해서.. 오늘은 회사 노트북에 설치 하기로 맘 먹었습니다.

설치하는 법을 검색하려고 네이버에 '폰갭 이클립스' 로 검색했더니......

제 글이 제일 상단에 뜨는 거예요.. 이런 영광이... ^^

그래서 제 블로그로 들어왔는데 검색해서 뜬 글보다는 그 전에 더 간단하게 PhoneGap 설치 과정을 정리한 글이 있더라구요.

PhoneGap 설치하고 예제 실행하기 

이 블로그에 글을 정리하는 이유가 이렇게 나중에 필요할 때 찾아보기 위해서거든요.
나름 뿌듯하게 생각하면서 따라하고 있는데요...

이럴수가 그동안 너무 많이 바뀌었어요.
그 글은 올해(2012) 4월에 올린글인데 12월인 지금은 너무나도 많이 바뀌어 있는거예요.

물론 너무너무 간단해 졌다는거...

간단해 진 부분은 안드로이드 SDK 설치 과정입니다.
이거 설치하면 자동적으로 이클립스까지 설치되서 복잡하게 Android Development Tool (ADT) 설치하고 환경 맞추고 뭐 그럴 필요 없이 그냥 버튼만 누르면 다 되더라구요.
(이거 오래전에 바뀌었겠죠? 전 계속 모바일 웹만 개발하느라 Android Native 쪽에는 손을 놓은지 오래 되서 몰랐어요. ^;)

이 변경된 방법도 여기 한번 정리해 놓으렵니다.

우선 PhoneGap 웹사이트로 갑니다. http://phonegap.com/developer

여기서 Getting Started Guides 를 클릭합니다.

거기서 Getting Started with Android를 클릭합니다.

뭘 많이 설치하라구 나오죠? 다 무시하고 Android SDK 를 클릭합니다.

Download the SDK 를 클릭해서 다운 받습니다.

다운받은 압축파일을 풀면 끝입니다.

이렇게 두개의 폴더가 있을 텐데요. 그냥 이클립스로 들어가셔서 실행시키기만 하시면 됩니다.

첫 실행에서는 작업할 때 파일이 저장될 workspace 의 경로를 임의의 장소로 정해 주시구요.

그리고 이런 화면이 나올 겁니다.
첫번째 프로젝트를 만들기 위해 이 Welcome 화면에서 시키는 대로 하겠습니다.
(이 Welcome 화면은 나중에 Help-Welcome 을 선택하시면 언제든지 보실 수 있습니다.)

1. Click File > New > Android Application Project.
   (If you don't see this option, click File > New > Other, then open the Android folder and select Android Application Project.)
2. Follow the wizard to set up your new Android app project.

이 글대로 따라 하세요. 그냥 시키는 대로만 하면 됩니다.
그러면 첫번째 안드로이드 프로젝트가 만들어 질 텐데요.
여기다 그냥 안드로이드 앱 프로그래밍을 하셔도 되구요.
오늘 목적은 PhoneGap을 사용할 거니까 여기서 PhoneGap 을 사용하는 방법을 알아 보겠습니다.

아까 저 맨 첫번째 그림에서 Download & Archives 를 클릭해서 폰갭을 다운 받습니다.
그리고 압축을 풉니다.

그 압축을 푼 다음 lib-android 폴더로 들어가시면 위와 같이 뜰 겁니다.
여기서 저 cordova-2.2.0.jar 와 cordova-2.2.0.js 파일만 복사해서 아까 이클립스에 만든 프로젝트의 적당한 위치에 복사해 넣으시면 됩니다.

바로 저 assets 에 www 란 폴더를 만들고 cordova-2.2.0.js 를 복사해 넣구요.

그 다음에는 원래 있던 libs 라는 폴더에 cordova-2.2.0.jar를 복사해 넣습니다.

그럼 이제 java 파일을 약간 손보실 차례입니다.

저 빨간 줄 그은 부분만 보이시는 대로 수정하시면 됩니다.

이 부분은 이전에 제가 올린 글에서 복사해 넣을 께요.

다음에는 AndroidManifest.xml 파일을 수정합니다.

AndroidManifest.xml 안에서 <uses-sdk android:minSdkVersion="8" /> 코드를 찾으세요.

그리고 그 위에 아래 코드를 붙여 넣으세요.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

그리고 <activity ..... > 태그에 아래 코드를 추가하세요.

android:configChanges="orientation|keyboardHidden"

그러면 대개 아래와 같은 형식이 될 겁니다.










10. 그 다음은 PhoneGap 프로그래밍을 하시면 됩니다.

저는 제 블로그의 http://coronasdk.tistory.com/521 에 있는 소스코드를 사용했는데요.
여러분들도 거기서 다운 받으셔도 되고 아니면 여러분 나름대로 html 파일을 만드시면 됩니다.
전 tistory521_01.html 파일을 사용했습니다.


11. 이제 실행하시면 됩니다. Ctrl + F11 을 누르시던지 프로젝트에서 오른쪽 마우스 버튼을 클릭한 후 Run As - Android Application을 실행 해 보세요.

아래 화면이 완성된 화면입니다.

PhoneGap 을 사용해서 jQuery Mobile 페이지를 표시할 때 까지의 과정이었습니다.

여전히 복잡한가요? 그래도 이게 많이 단순화 한 거예요. 따라해 보시고 좋은 application 많이 만드세요.