오늘은 PhoneGap 을 한번 설치 해 보기로 했습니다.
저는 Hybrid App 을 Corona SDK, Sencha Touch, JQuery Mobile 을 위주로 한번 연구해 볼 생각이거든요.
거기다가 Kurogo 가 도움이 된다면 같이 한번 사용해 보고 싶고...
웹 서버쪽은 PHP 와 데이터베이스를 사용할 거고.
이런 구조로 Hybrid App 을 개발 툴 조합을 연구해 보고 있습니다.
그런데 디바이스의 Native 기능 등을 사용하기 위해 Corona SDK를 사용하느냐. PhoneGap을 사용하느냐 를 결정하려면 장단점을 알고 있어야 할 것 같아서요.
Corona SDK에 대해서는 잘 알지만 일반적으로 Hybrid App에 많이 사용되는 PhoneGap에 대해서는 전혀 몰라서 오늘 한번 설치해보고 감을 잡고자 합니다.
우선 eclipse 와 Android SDK, ADT Plugin, JAVA 등은 다 설치 되서 Native Android 앱 개발 환경은 다 완료 된 것으로 하고 PhoneGap 설치를 진행해 보겠습니다.
1. http://phonegap.com/start 로 접속을 합니다.
2. 아래 화면에서 해당 platform을 선택합니다. (저는 Android를 선택했습니다.)
3. 비디오 튜토리얼이 있네요. 이것부터 한번 볼까요?
보니까 PhoneGap 에 대해 많이 이해가 되네요.
이클립스 개발환경에서 폰갭을 설치하고 샘플 앱을 만드는 방법까지 자세히 설명을 했습니다.
4. 다음 단계는 Eclipse, Android SDK, ADT Plugin을 설치하는 단계입니다.
저는 ADT Plugin 까지 모두 설치 된 상태이기 때문에 PhoneGap 다운로드부터 하겠습니다.
이 글을 올리는 시점에는 PhoneGap 1.6.1 이 최신 버전이네요.
5. 다운받은 압축 파일을 푸니까 아래와 같은 구조네요.
lib 폴더에 android, bada, blackberry, ios, symbian, windows 같은 각 모바일 플랫폼 별 jar 파일과 js 파일이 들어있고 예제 파일도 들어있습니다.
6. 그 다음은 Android Native Language로 App을 만들 때 처럼 이클립스에서 New Android Projet를 만듭니다.
- 이클립스에서 File-New-Android Project를 선택합니다. 그리고 Project Name을 정합니다.
- 일단 버전은 2.2 를 선택하겠습니다.
- Package Name 이 빠졌으면 이 부분 넣고 Finish 버튼을 누릅니다.
7. 그 다음에는 project 폴더에 2개의 폴더를 더 추가해 넣습니다. (libs, assets/www)
8. 다음에 아까 받았던 PhoneGap 의 jar 파일을 libs에 js 파일을 www 에 복사해 넣습니다.
그리고 xml 폴더를 res 폴더 밑에 복사해 넛습니다.
9. 다음은 java 파일을 조금 수정하는데요.
위에 빨간 줄 친 부분을 바꾸시면 됩니다. (위에것 에서 아래 것으로요)
10. 다음에는 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 프로그래밍을 하시면 됩니다.
www 폴더 밑에 index.html 파일을 생성하신후 아래와 같이 해 보세요.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.x.x.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
11. 이제 실행하시면 됩니다. Ctrl + F11 을 누르시던지 프로젝트에서 오른쪽 마우스 버튼을 클릭한 후 Run As - Android Application을 실행 해 보세요.
아래 화면이 완성된 화면입니다.
처음엔 좀 복잡하네요..
하여간 이렇게 설치하고 예제를 하나 실행했더니 폰갭이 대강 이해가 갑니다.
자체적으로 jar 파일하고 js 파일을 제공해서 모바일 앱을 만들도록 하는 거네요.
각 플랫폼 마다 따로따로 개발해야 되는 번거로움이 좀 있구요.
(코로나 SDK 는 그냥 빌드만 따로 하면 되는데 말이죠.)
대신 기존 Android Native Programming 구도를 그대로 사용하는 거라서 Native 기능을 모두 사용할 수는 있겠네요.
폰갭 + JQuery, Sencha Touch를 하면 정말 많이 편리할 것 같습니다.
폰갭 공부도 좀 더 해서 폰갭 조합 하고 코로나 SDK 조합 Hybrid App 개발 둘 다 해야 겠습니다.
재밌네요...
'WEB_APP > PhoneGap' 카테고리의 다른 글
| 이클립스에서 안드로이드 용 apk 파일 생성하기 (1) | 2013.02.28 |
|---|---|
| PhoneGap 으로 Network 연결 상태 확인하기 -Connection- (2) | 2012.12.16 |
| PhoneGap 설치하고 예제 실행하기 2 (2012/12/09) (1) | 2012.12.10 |
| 안드로이드 터미널에서 폰갭 실행하기 (0) | 2012.06.23 |
| 이클립스에 폰갭 설치하기 (1) | 2012.06.22 |
| Phonegap Keyword Index (0) | 2012.05.26 |