網頁語言開發Android_App環境佈建

2013-10-24

3056
0
Mobile

一、準備

1. JDK。主要是Android會使用到，建議先下載安裝完成。

1. IntelliJ IDEA 主要編輯環境，有免費社群版及商業版，官網均可下載。(編輯器有很多種，Eclipse 或 Android Studio 甚至純文字編輯器也行，但某些步驟可能不盡相同，需自行變化)。

2. Android SDK，官網可下載。

3. Phonegap 下載，以下範例以 2.9.0 為準。

4. 測試行動裝置的驅動程式安裝。

5. 如果是在VMWare Workstation建構開發環境，要把虛擬機的USB開啟，同時插入裝置時，必須將目前滑鼠位置Focus在該虛擬機內，才會抓取成功。抓取後如有USB無法辨認問題，也必須將驅動程式裝好，後續在開發時，才能使用裝置測試。

另經實驗證實，也可以在 VMware Horizon View 的虛擬桌面內，建構開發環境，指定連線到本機 USB 裝置，即可結合插在本機上的Android，進行開發實測。

6. 設定行動裝置。

行動裝置要能做為開發測試機必須允許 USB 偵錯功能。

以 ASUS PadFone 為例，通常在 [設定] 的 [開發人員選項] 裡。

二、JDK

1. 先至Oracle官網下載對應作業系統的JDK，如果是Linux，由於部分版本可能已經先安裝了 Open JDK，建議先移除之後，再安裝 Oracle 版的 JDK。

2. JDK 安裝完後，設定兩個環境變數

JAVA_HOME 路徑指到JDK安裝的位置

JRE_HOME 路徑指到JDK安裝的資料夾內會有一個 jre 的子資料夾，如果沒有就是安裝版本有誤，請重新安裝。

3.安裝設定完畢，重開機。

4. 記住安裝位置，後續會用到。

三、IntelliJ IDEA

1. 逐步預設安裝，沒有特別之處。

四、Android SDK

1. 直接至 Google 網站下載，檔案不小，下載完解壓即可，不須安裝。

2. 將解壓完的資料夾，拷貝到硬碟固定位置(自訂)，就不要再動。記住資料夾位置，等會新建 Android 專案會用到。

3. 位置都固定之後，執行 IntelliJ IDEA。新增一個 Android 專案。

4. 系統會先詢問 JAVA 位置。

詢問 JDK 的安裝位置。

5. 詢問 Android SDK位置。

如果指定正確，會出現目前Java SDK最大版本，及建置目標適用的Android系統版本號碼。

如果沒有意外，Google下載的SDK裡面只會有最新版的Android。待會再繼續線上抓其他舊版本，先按OK。

6. 增加 Android 版本。

呼叫 SDK manager。

選取勾選要安裝的版本。

五、Phonegap API

1. 至官網下載，目前為止 2.9.0 版。

2. 解壓縮完，在lib資料夾內有對應不同系統的目錄分類。

六、建立 Phonegap 專案。

1. 執行 IntelliJ IDEA，開啟前面建立的Android專案，或另外新增一個皆可，新增步驟參考前面 Android SDK 的部分。

2. 重點在cordova.js、cordova-2.9.0.jar、xml資料夾，拷貝到下圖所示，專案相對應位置。www資料夾新專案是沒有的，要自己建。

3. cordova-2.9.0.jar 引入。

拷貝過去後，還要必須告知此為程式庫，方能展開內容。

4. 建立 index.html。

在 assets/www/ 資料夾底下，新增 index.html 網頁，做為App的主要顯示畫面。

預設空內容

5. 修改 App 主要入口程式，讓App執行時，改由 index.html 負責呈現處理。

修改MyActivity.java(若開專案時沒有特別修改，此為java主程式的預設名稱。如果有變更請以自取名稱為主)。

原預設內容

修改後內容(注意紅色圈起部分即為修改處)。

package net.snoone.pg5;
 
import android.app.Activity;
import android.os.Bundle;
import org.apache.cordova.*;
 
public class MyActivity extends DroidGap {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main); 該行註解掉
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

6. 修改AndroidManifest.xml，以便讓 Phonegap 專案撰寫的 App 有存取裝置的權限。(更完整權限設定名詞字典，在 Phonegap 官網文件有，請自行查詢)。

   <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" />