먼저 이클립스와 안드로이드 SDK를 설치한다.
Eclipse 3.4 이상 버전을 지원한다.
안드로이드 관련 SDK와 ADT Plugin을 설치한다.
Download and install -
Android SDK
이클립스와 Android SDK 및 ADT Plugin 설치가 완료 되면, 최신 PhoneGap을 다운로드 받기 위해서 아래의 사이트로 이동한다.
http://phonegap.com
다운로드한 압축 파일을 특정 폴더에 압축을 푼다.
안드로이드 SDK 설치와 이클립스 설정을 완료한 후에 프로젝트 생성을 한다.
이클립스를 구동해서 File 메뉴 아래의 New > Other 메뉴를 클릭해서 Android Project를 선택한다.
Next> 버튼을 클릭해서 다음으로 넘어간다.
프로젝트 명칭은 지정하며, 여기서는 프로젝트 명칭을 HelloPhoneGap 지정한다.
Next> 버튼을 클릭해서 다음으로 넘어간다.
안드로이드 버전을 선택한다. 여기서는 최신 버전인 Android 4.0.3을 선택.
Next> 버튼을 클릭해서 다음으로 넘어간다.
Application Name을 Hello로 지정
Package Name은 com.phonegap.hello로 지정
Creative Activity를 체크(Default로 체크되어 있음)하고 Activity 명칭을 HelloActivity로 지정
Minimum SDK를 8(Android 2.2)로 지정 후 우측 하단의 Finish 버튼을 클릭해서 프로젝트를 생성한다.
프로젝트 생성 후 Project Root폴더에 2개의 폴더를 추가로 생성한다.
Project Root 폴더 바로 아래에 libs폴더를 추가
Project Root 폴더 아래의 assets 폴더 아래에 www 폴더를 추가
압축을 풀었던 PhoneGap파일의 Android폴더 아래를 펼쳐서 파일을 프로젝트 폴더에 복사를 한다.
1. phonegap.js 파일을 Project Root 폴더 아래의 assets/www 폴더에 복사한다.
2. phonegap.jar 파일을 Project Root 폴더 아래의 libs 폴더에 복사한다.
3. xml 폴더 전체를 Project Root 폴더 아래의 res 폴더에 복사한다.
* phonegap-1.3.0.jar 파일을 HelloPhoneGap Project의 Java Build Path에 포함시켜야 한다.
Project 내의 src 폴더 아래에 있는 HelloActivity.java 파일을 더블 클릭해서 파일을 연다.
1. HelloActivity가 상속했던 Activity 클래스를 DroidGap 클래스로 대치한다.
이때 com.phonegap.Droidgap을 import 한다.
2. 기존의 setContentView(R.layout.main)을 super.loadUrl("file:///android_asset/www/index.html")으로 변경한다.
3. 기존에 있는 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.phonegap.hello"
android:versionCode="1"
android:versionName="1.0" >
<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" />
<application
android:icon="@drawable/ic_launcher"
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>
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>
</application>
</manifest>
Project 내의 /assets/www 폴더 아래에 새로운 파일(New > File)을 index.html로 생성한다.
index.html 파일에 아래의 내용을 추가한 후에 저장하도록 한다.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Project를 선택 후 우측 마우스 버튼을 클릭해서 Run As > Android Application 선택한다.
애뮬레이터가 구동되면서 실행된 화면이 Display 된다.
