phonegap android helloworld

오늘은 안드로이드로 하이브리드앱을 만들어볼려고 찾아보았습니다.
일단 삽질끝에 처리를 하긴 했는대 기존에 있는 데이터들과는 조금 차이가 있습니다. 
제가 진행했던 방법을 기록해두겠습니다.

제일 많이 참고 했던 사이트는 다음과 같습니다.
http://wiki.phonegap.com/w/page/16494774/Getting%20started%20with%20Android%20PhoneGap%20in%20Eclipse


# 1 기본적인 설치
JAVA JDK , Android SDK, Eclipse를 일단 설치를 했구요
설치 방법은 http://v.daum.net/link/8469722?CT=WIDGET 참고 하시면 됩니다.

여기서 골치아팠던게 루비인데요... 왜 루비가 필요한건지...머리가 아파왔습니다.
일단 Apache ANT http://ant.apache.org/index.html
Ruby http://rubyinstaller.org 
다음과 같이 받아서 설치를 했습니다. 

그리고 다음과 같이 환경설정을 처리 했습니다.

ANDROID_HOME, location of the Android SDK (for example: D:/android-sdk-windows)

ANT_HOME, location of Android Ant (for example: D:\apache-ant-1.8.1)

JAVA_HOME, location of the JDK (for example: C:\Program Files\Java\jdk1.6.0_20)

Path, folders where the operating system always looks when given a command (includes these, for example: C:\Ruby191\bin; D:\apache-ant-1.8.1\bin; C:\Program Files\Java\jdk1.6.0_20\bin; D:\android-sdk-windows\tools)

  


# 2 폰갭 설치
자 이제부터 폰갭을 받아서 처리 해야 하는대요

위키상에 내용을 보면 Git를 설치해서 내려 받아라고 되어 있습니다. 전 일단 받긴했는데..
머가 잘 안되더라구요

 Git Bash (Windows only) 

 Visit: http://code.google.com/p/msysgit/downloads/list

계속 삽질한 위키상에 대해서 이야기 하겠습니다.
http://github.com/phonegap/phonegap-android 소스를 내려 받아라고 되어 있습니다.

그리고 전 막삽질을 해도 안되었던 부분입니다.

$ ruby ./droidgap classic "C:/Progra~1/Androi~1/android-sdk-windows" pgtest com.example.android.pgtest example/ "c:/Progra~1/Androi~1/phonegap-android/output"

 

In the above Windows example, the following environment settings were used:

android_sdk_path = "c:\Program Files\Android SDK\android-sdk-windows"

name = pgtest

path = "c:\Program Files\Android SDK\phonegap-android\output" (This is the output location where the example files were placed)

 

Example (Mac environment):

 

> cd phonegap-android

> ruby ./droidgap classic android/android-sdk-mac_86/ test_app com.mayerdan.testapp example/ ~/projects/test_droid_phonegap

 

Note if you get errors like:

BUILD FAILED

~/projects/phonegap-android/framework/build.xml:49: taskdef class com.android.ant.SetupTask cannot be found

 

followed by more errors like:

0:in `stat': No such file or directory - ~/projects/phonegap-android/framework/phonegap.jar

 

To fix this, just run the command with the full path to the android SDK

"sdk.dir=/andriod/android-sdk-mac_86" => "sdk.dir=/projects/andriod/android-sdk-mac_86"

 

Then run `ruby ./droidgap classic /Users/danmayer/projects/android/android-sdk-mac_86 test_app com.mayerdan.testapp example/ ~/projects/test_droid_phonegap` again.

다른 분들은 어떻게 하셨는지 모르겠는대 전 오늘 오전 내내 안되더라구요.... 

# 3 꼼수를 찾아내다...
그러다 다른 방법을 찾았습니다.
트루모바일 대표이사이신 정우진님과 구글 플러스로 어제 질문을 드렸던 부분이 있어서 찾아보았습니다.
그리고 약간 다른 방법으로 접근을 했습니다.

먼저 폰갭 사이트에서 다운을 받았습니다.
http://www.phonegap.com/download-thankyou

압축을 푸신후에 phonegap\Android 디렉토리에서 두 파일만 딱 추출했습니다.
phonegap-1.0.0.jar , phonegap-1.0.0.js

그리고 이클립스로 기존에 안드로이드 프로젝트 생성 하듯 진행을 합니다.

프로젝트 루트 폴더에 두 개의 새로운 폴더를 만들어 둡니다

/libs

/assets/www

Android 폴더 내에 있는 phonegap.js 파일을 /assets/www 로 복사한다.
phonegap.jar 파일을 /libs 폴더로 복사한다.
xml 폴더를 /res 로 복사한다.

프로젝트 아래의 /src 폴더에 있는 Project 메인 Java 파일({$프로젝트명}Activity.java – 예:DuraboysActivity.java)에서 몇 가지 수정을 하여야 한다.

class의 extend를 Activity 에서 DroidGap으로 변경한다.

setContentView(); 를  super.loadUrl("file:///android_asset/www/index.html");로 변경한다.

import com.phonegap.*;을 추가한다. 

/libs 폴더에서 오른쪽 마우스 버튼을 클릭한 후 Build Paths/ > Configure Build Paths를 선택한다.
이때 표시되는 화면의 Libraries 탭에서 Add Jars 를 선택하여
Project에 phonegap-1.0.0.jar 를 추가한다.

AndroidManifest.xml를 찾아 오른쪽 마우스를 클릭한 후 Open with > Text Editor 를
선택하여 파일을 연다. 
빨간색 부분을 추가 한다.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

      package="com.Dura.Demo"

      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-sdk android:minSdkVersion="10" />

    <application android:icon="@drawable/icon" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">

        <activity android:name=".DemoActivity"

                  android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

 /assets/www 에  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>

여기까지하고 기존 안드로이드 빌드하듯 처리 한다.
그러면 헬로 월드를 만날수 있다.

일단 오전 삽질한 결과를 기록하는건대... 이게 정확하게 맞는건지는 잘 모르겠다.
잘못된 부분이 있음 연락 주시면 수정도 하고 저도 파악좀 했음 한다..

아직도 루비가 왜 필요한지를 모르겠다...