이제는 유지보수에만 전념하던 그래서 약간은 지루했던(잘 알지도 못하면서;) 안드로이드 개발에 또 하나의 도전 과제가 생겼다. 나태에 젖어 흐느적 거리고 있던 내게 팀장님이 재미있는 미끼를 던져주었다. 이름 하여 PhoneGap 하고픈 말은 나중에 보중하고 일단 개발자라면 늘 친숙한 Hello world 부터 찍어보자
개발자는 두 가지 부류가 있다.
설계를 머리에 이고 키보드 부터 두드리는자,
그리고 UML부터 그려가며 말과 글과 그림그리며 오감으로 개발을 시작하는 자.
다들 안다. 후자가 고수의 길이며 정도라고..
하지만 난 늘 전자의 유혹에 무릎을 꿇는다..
후자 스타일이라면 먼저 PhoneGap 이 무언지 부터 살펴보자
http://phonegap.com/
시작하기
http://phonegap.com/start#android
1.요구사항
- 이클립스 3.4 이상 필요하단다 찾아보니 Ganymede 이상이면 될듯하다. 아직도 난 정식명칭이 궁금 가니메데? 개니메드? 가나이메드? ㅋ
- 이클립스를 사용하지 않는 이 듀토리얼의 터미널 버전 - 이건 무슨말인지 모르겠다;
2. SDK 설치 + PhoneGap
- 이클립스 받아 설치
- 안드로이드 SDK 받아 설치
- ADT 까지 받아 설치, 여기까지는 기존에 안드로이드 개발을 했던 분이라면 이미 준비되어 있을거라 생각된다.
- PhoneGap 최신 버전을 받아서 압축을 풉니다. 이 압축 푼 내용을 안드로이드 디렉토리와 함께 작업할 껍니다. 나는 다른 라이브러리 처럼 플러인이나 라이브러리 path를 잡아줘야 되는 줄 알았다.
하지만 내용을 보면 알겠지만 jar, js, htm 이 들어 있어 안드로이드 소스에 직접 복사해서 넣는 방법을 쓰며 배포시 패키지 만들때 포함되어 릴리즈 되는 것 같다.
3. 새 프로젝트 만들기
- New>Android Project 로 실제 Helloworld 안드로이드 프로젝트를 만든다.
- 버전선택을 맘대로 정한다. 테스트로 2.2
- 앱네임과 패키지 명, 메인 액티비티 명을 이름 짓는다.
- 최소 sdk 버전은 써도 안써도 좋다. 2.2로 정했다면 2.2의 api 레벨인 8로 테스트로 세팅한다.
여기까지는 기존에 안드로이드 개발해보신 분이라면 무난히 수월하게 따라 왔으리라고 본다.
이 후에 설정 작업이 재미있다.
- 여러분이 만든 Helloworld 프로젝트 루트 디렉토리에 다음과 같이 /libs 디렉토리를 만들고 기존에 있는 /assets 디렉토리 밑에 /www 디렉토리를 새로 만든다. 그러면 /libs , /assets/www 두 개의 디렉터리가 만들어진다.
- 아까 다운로드 받아 압축 풀어놨던 파일들 중에 android 디렉토리 안에 phonegap.js 파일을 /assets/www 에 복사해 붙여 넣는다.
- phonegap.jar 파일을 /libs 디렉토리 안에 복사하기 해서 붙여 넣는다.
- 마지막으로 이번엔 xml 디렉토리 전체를 복사하여 /res 디렉토리에 붙여넣는다.
- 이제 만들었던 메인 액티비티 소스를 고쳐보자.
- 고치기에 앞서서 추가했던 jar를 프로젝트 path에 설정해주자. 프로젝트명 오른쪽 마우스 클릭해 Properties를 선택하여 java build path를 살펴보면 Libraries 탭을 설정해서 Add JARs를 선택해 현재 프로젝트에 속해있는 phonegap.jar 파일을 선택해 포함시킨후 확인 저장한다.
- 다음으로 소스를 고친다 이미 기본으로 생성된 소스를 다음과 같이 수정한다.
- Activity 로 extends된 클래스를 DroidGap으로 바꾼다.
- 뷰를 그려주는 역할을 하는 setContentView() 대신 super.loadUrl("file://android_asset/www/index.htm"); 으로 설정한다. 해당 index.htm 은 조금 있다 만들겠다. file:///android_asset 은 루트의 기본 디렉토리인 /assets 를 말합니다.
- ctrl + o 를 눌러서 import com.phonegarp.*; 이 추가되고 import android.app.Activity;는 제거됩니다.
- 그리고 환경설정파일인 AndroidManifest.xml 파일에 버전정보 다음으로 아래 내용을 추가합니다. 아래는 제 소스 샘플입니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.binsolb.phonegap.helloworld"
android:versionCode="1"
android:versionName="1.0">
<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-sdk android:minSdkVersion="8" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".HelloActivity"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
- 그리고 다음의 회전설정도 추가해줍니다.
4. Hellow World htm 만들기
-앞서 말씀드렸던 htm파일을 만듭니다. 위치는 /assets/www 아래에 index.htm 파일을 아래와 같이 만듭니다.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
- 스크립트 파일 명은 복사 해 넣은 버전의 파일명 그대로 쓰시면됩니다. 위는 제 샘플입니다.
5 배포합니다.
- 시뮬레이터로 배포 또는 디바이스로 배포를 합니다.
- Run as > Android Application 선택으로 실행시킵니다.
6. 결과 확인
잘나오는 군요 뿌듯합니다 이제 간단히 tv팟을 만들어봐야겠어요!
*혹시 잘 모르시는 분은 좀더 자세한 설명의 아래 페이지를 참고하세요~
http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
