PhoneGap 在 Android 平台的第一步

PhoneGap 被 Adobe 買下來之後, 核心的部份捐給了 Apache, 目前為 Apache Cordova 專案。以下為使用 PhoneGap 開發 Android App 的初步設定:

1. Eclipse ( 目前為 4.2 ) 開發環境要先裝好 Android SDK, Android ADT plugin ( Android SDK Manager, Android Virtual Device Manager )。

2. 下載 PhoneGap ( Cordova 目前為 2.4 ), 並解壓縮檔案。

3. 建立 Android Application Project, 設定專案名稱為 Phonegap-hellohell 。標的版本設為 Android 4.1, 官方的範例可以使用 Android 2.1 以上。

4. 將 Phonegap 解壓縮後, 複製 phonegap-2.4.0\lib\android 裡的 cordova-2.4.0.jar 到  Phonegap-hellohell 專案的 libs 目錄內。複製後, 右擊  libs/cordova-2.4.0.jar , 點選 Build Path → Add to Build Path。

5. 複製 phonegap-2.4.0\lib\android\xml 目錄 ( 裡面只有一個 config.xml 檔案 ) 到  Phonegap-hellohell 專案的 res 目錄內。

6. 在 Phonegap-hellohell 專案的 assets 目錄裡建立 www 目錄, 並複製 phonegap-2.4.0\lib\android 裡的 cordova-2.4.0.js 到此目錄, 往後所有 HTML 相關的檔案都放在此目錄內。



7. 修改 AndroidManifest.xml, 可以參考 phonegap-2.4.0\lib\android\example 裡的範例設定。原則上有四個地方要新增: 用戶允許, 支援的螢幕, 在主要的 activity 設定 android:configChanges="orientation|keyboardHidden", 設定第二個 activity。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    android:windowSoftInputMode="adjustPan"
    package="com.shinder.phonegap_hellohell"
    android:versionCode="1"
    android:versionName="1.0"
    android:hardwareAccelerated="true"
    >

    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".HelloHellActivity"
            android:label="@string/title_activity_hello_hell"
            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>

8. 修改主要的 activity ( HelloHellActivity.java )。

package com.shinder.phonegap_hellohell;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MenuItem;
import android.support.v4.app.NavUtils;
import org.apache.cordova.DroidGap;

public class HelloHellActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
      // setContentView(R.layout.activity_hello_hell);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_hello_hell, menu);
        return true;
    }
}

9. 撰寫 index.html 並存放到 assets/www 目錄內。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8" />
 <title>PhoneGap</title>
 <script type="text/javascript" src="cordova-2.4.0.js"></script>

 <script type="text/javascript">
  function onDeviceReady() {
   document.getElementById("hihi").innerHTML = 
    "跨出成功的第一步^^";
  }

  function init(){
   document.addEventListener("deviceready", onDeviceReady, false);
  }
  
  window.onload = init;
 </script>
</head>
<body>
 <h1 id="hihi">沒成功, 繼續加油!</h1>
</body>
</html>

10. 專案 Run as Android Application 就可以在模擬器上看到執行情況。

11. Export 專案成為 apk 安裝檔。