phonegap-android-eclipse-quickstart
Requirements
이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다.
You also need to: 또한 폰갭도 필요하겠죠.
- Download the latest copy of PhoneGap and extract its contents. 이글은 Android에 대한 튜토리얼이기 때문에 Android 디렉토리에 있는 내용이 중요합니다.
이클립스에 이미 Android SDK 가 세팅 돼 있어야 겠죠. Window > Preferences > Android 를 여시고 아래와 같이 됐는지 확인해 보세요.
이제 여러분은 샘플 프로젝트를 빌드하시거나 새로운 프로젝트를 만드실 수 있습니다.
Building The Sample Project
File > New > Android Project
- Create new project from existing source 를 선택하세요.
- Browse를 클릭하시고 다운로드 하신 폰갭에서 제공된 샘플 앱이 있는 곳을 찾아가세요.
오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다. 다만 이글을 쓰는 시점에 다운받은 폰갭 0.9.4 는 안드로이드 3.0과 문제가 있을 수 있으니 2.2나 2.3을 먼저 사용해 보세요.
(이 부분에서 이클립스가 phonegap.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽 마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서 Libraries tab에서 phonegap.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서 refresh(F5)를 하시면 제대로 표시 할 겁니다.)
이제 여러분은 여러분의 프로젝트를 안드로이드 어플리케이션으로 돌릴 수 있습니다. 프로젝트에서 오른쪽 마우스를 누르시고 Run As 로 가셔서 Android Application 을 클릭하세요. 이클립스가 AVD를 선택하라고 할 수도 있습니다. 만약에 없으면 이때 create 하셔도 됩니다. 미리 생성해 놓으셨다면 선택하시고 진행하시면 됩니다.
Creating A New Project
File > New > Android Project
And give it some sensible defaults.
오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다.
여러분이 다운로드 받으신 폰갭에서 우리는 아래 두개의 파일이 필요합니다.
- Android/phonegap-1.0.0.jar
- Android/phonegap-1.0.0.js
이클립스에서 생성하신 프로젝트의 root 디렉토리에 아래 두개의 디렉토리를 생성하세요.
- /libs
- /assets /www
위 두 파일을 복사해 넣으세요.
- Android/phonegap-1.0.0.jar to /libs
- Android/phonegap-1.0.0.js to /assets/www
이클립스에서 Package Explorer에서 해당 프로젝트를 선택하신 후 refresh(F5)를 해 주세요. 복사해 넣은 두개의 파일이 보이실 거예요.
Now, create index.html in your www folder and add some code like so:
이제 www 폴더에 index.html을 생성하세요. 그리고 아래 코드를 복사해 넣으세요.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
이클립스의 src 폴더에 있는 main 자바 파일을 약간 수정해 주세요.
- 클래스의 extend를 Activity에서 DroidGap으로 바꿔주세요.
- Replace the setContentView() line 을 super.loadUrl("file:///android_asset/www/index.html"); 로 바꿔주세요.
- Add import com.phonegap.*;
(이 부분에서 이클립스가 phonegap-1.0.0.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽 마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서 Libraries tab에서 phonegap-1.0.0.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서 refresh(F5)를 하시면 제대로 표시 할 겁니다.)
마지막으로 폰갭이 제대로 동작할 수 있도록 AndroidManifest.xml 파일에 몇개의 퍼미션을 추가하겠습니다.
여러분이 사용하시는 에디터로 매니페스트 파일을 열어 주세요. 그리고 versionName과 application 태그 사이에 아래 내용을 복사해서 넣어 주세요.
<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" />
AndroidManifest.xml에서 activity 태그에 아래 attribute 가 있어야 합니다.
android:configChanges="orientation|keyboardHidden"
이건 뭘 말하냐 하면요. 안드로이드는 이런 이벤트들이 일어날 때 index.html을 reload 하지 않을거란 겁니다. phonegap이 이 이벤트들에 대해서 핸들링 할 겁니다.
마지막으로 다운로드 받으신 폰갭의 xml 폴더를 카피하셔서 여러분 프로젝트의 res 폴더에 넣으세요.
이제 여러분은 여러분의 프로젝트를 Android Application으로 실행하실 수 있습니다. 프로젝트에서 오른쪽 마우스를 클릭하신다음에 Run As -> Android Application을 선택하세요. 이클립스가 AVD를 선택하라고 물어볼 겁니다. AVD를 생성하지 않으셨으면 새로 생성하시고 이전에 생성하셨으면 그걸 선택해서 계속 진행합니다.
AVD가 적용되서 에뮬레이터가 뜨는데는 시간이 걸릴겁니다. 그리고 에뮬레이터가 뜬 후에도 조금 기다리시면 여러분이 만든 프로젝트가 화면에 실행 되는 걸 보실 수 있습니다.
Have fun!
'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 |
| Phonegap Keyword Index (0) | 2012.05.26 |
| PhoneGap 설치하고 예제 실행하기 (0) | 2012.04.26 |