Android WebApp 開發教學 (1) - HTML5 WebView 行動應用

Introduction - HTML 5 的眼淚

說到使用 HTML5 來開發系統其實有好有壞，好處是跨平台且標準化（說實在的現在並不是那麼標準!?），壞處是目前的 Browser 對於 HTML5 的支援比較混亂，實作也比較不完整。此外相較於 Native 原生撰寫的 App，HTML 5 在執行速度上確實有改善的空間。但是跨平台這個優點確實吸引我們不可輕易放棄 HTML5，畢竟我相信硬體的效能限制突破的速度是常驚人的。

蘋果電腦執行長 Steve Jobs 也大力推崇 HTML5，然而 iOS 自家 Browser Safari 在 HTML5 可是下足了功夫，執行速度相較於其他 Browser 可是略勝一籌。以下是 Steve Jobs 表態支持 HTML5 的畫面：

接下來介紹如何在 Android 系統中開發 HTML5 應用程式。

Android WebApp Development Environment - WebApp 開發環境建置

今天我們要建立的開發環境使用 Eclipse 作為開發的 IDE (Integrated development environment)，Eclipse 藉由安裝 ADT (Android Development Tools) Plugin 來整合 Android SDK 與 AVD (Android Virtual Device) 執行模擬環境。

Eclipse 是一的優秀的 IDE，底層採用 RCP (Rich Client Platform) 的架構來管理 Plugins，這樣設計使我們能夠輕易的在 IDE 中整合第三方開發工具。請跟著以下步驟來建立 Android HTML5 開發環境。

1. 下載 Android SDK 並且安裝，下載網址如下

• • http://developer.android.com/sdk/index.html

2. 設定 Android SDK Manager，加入系統環境變數

• • 點選 [我的電腦] 右鍵 [內容]，選擇 [進階] 標籤頁選取 [環境變數]
    
  • 點選 [新增] 加入環境變數「ANDROID_SDK_HOME」設定到 SDK 的安裝路徑中（ AVD 會建立在此路徑中）
    

3. Android SDK Manager 設定 (安裝API)

• • 從開始功能表執行 Android SDK Manager
  • 選擇需要的 Android API 版本進行安裝。此外 Android 不像 iOS 單純，版本相當多，App 上架前在測試上別忘了多測試幾種常用的版本比較妥當。
    
  • 點選(Accept All)同意授權協議後，按下 [Install]。程式會即時下載安裝，時間蠻久，請喝杯咖啡等一下.......
    

4. 建置 Eclispe 開發環境

• • 下載 Eclipse Classic (下載後解壓縮)，目前下載的版本為 3.7.2，網址如下
  • http://www.eclipse.org/downloads/

5. 安裝 ADT Plugin for Eclipse（參考 ADT Plugin for Eclipse）

• • 開啟 Eclipse，選擇 Help > Install New Software....
    
  • 點選 Add，輸入以下網址，也可單純使用 Http 安裝（將網址 Https 改為 Http 即可），在測試的時候使用 Httpd 常常會安裝失敗。
  • https://dl-ssl.google.com/android/eclipse/
    
  • 選擇 Developer Tools 並且按下 [Next]
    
  • 確認安裝套件後再次按下 [Next]
    
  • 同意使用條款後按下 [Finish]
    
  • 如果沒有使用 Https 會出現提示視窗，點選 [OK] 繼續安裝
    
  • 安裝完成後需重新啟動 Eclipse
    

6. 設定 Eclipse Android SDK

• • 重新啟動 Eclipse 後會出現以下 Android SDK 的設定畫面。選擇使用現有的 Android SDK 並且輸入以下位置（Windows 系統預設都裝會這裡）：
  • C:\Program Files\Android\android-sdk
    

7. Eclipse 建立 Android 專案

• • 開啟 Eclipse，選擇 File > New > Other...
  • 選擇 Android > Android Project 按下 [Next]
  • 
  • 輸入 Project Name (範例中輸入 HTML5_App) 後按下 [Next]
  • 
  • Build Target 選擇您想建置的 Android 版本，按下 [Next]。等等後面會建立 Android Project 執行需要的 AVD。
  • 
  • 輸入 Package Name (需遵照Java Package命名慣例)，按下 [Finish]
  • 

8. 建立模擬器 Android Virtual Device (AVD)

• • 執行 Android Virtual Device Manager (在Eclispe工具列中)
    
  • 點選 [New] 新增一個 AVD
    
  • Name 輸入名稱，並且選擇要模擬 Target (Android 版本選擇與前面步驟建立 Android Project 使用版本一致)，後按下 [Create AVD]。在這裡也可以設定 SD Card Size 來模擬外接的 SD Card，AVD 建立後檔案會放在系統環境變數「ANDROID_SDK_HOME」底下的 「.android」目錄中。
    
  • 建立完成後在 AVD Manager 可以看到已經建立的裝置，選擇後按下 [Start...] 啟動模擬器
    
  • 啟動要等待一些時間，執行完成的模擬器畫面如下：
    

9. 在 Eclipse 執行 Android Project

• • 對 Project 按下滑鼠右鍵，選擇 [Run As] > [Android Appilcation]，如果出現以下訊息表示您尚未設定執行的 AVD，請點選 [Yes] 來設定 AVD。
    
  • 正常的話 Eclispe 會啟動 AVD 並且執行 Android Project，Hello World 執行畫面如下：
    

10. 建立 WebView 讀取網頁

• • 由於我們希望這個 Android App 能夠存取 Internet 因此需要修改  AndroidManifest.xml，新增 android.permission.INTERNET (Users Permission)。先開啟 Android Project 中的 AndroidManifest.xml 檔案，新增的方式如下：
    
  • 在 Activity Class 中的 onCreate() 函式加入以下程式碼：

    package com.toright.android.webapp;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.WebView;
    
    public class PhoneGap_WebAppActivity extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 建立一個 WebView
            WebView webview = new WebView(this);
            webview.getSettings().setJavaScriptEnabled(true);
            setContentView(webview);
            webview.loadUrl("http://html5test.com/");
        }
    }

• • 執行後 App 便能夠使用 WebView 載入 Internet 網頁，在上面的網址中我刻意使用 HTML5 Test 順便測試 Android Browser 對 HTML 5 的支援狀況。執行畫面如下，分數越高代表對 HTML5 的支援越完整，這邊的範例是使用 Android 2.3.3 來執行 App。
    

11. Load Local HTML Files

使用 WebView 讀取遠端的網頁就像使用瀏覽器開啟網頁是一樣的，很顯然這對 App 的設計沒多太大的幫助。我們主要的開發情境還是透過開啟本機的 Html 網頁來實做應用程式，因此我們需要使用讀取本機網頁的技巧來實現。

• 首先在 assests 下建立 index.html，這個檔案用來設計我們的 HTML5 App
  
• 修改 loadUrl() 來開啟 assests 中的檔案

  webview.loadUrl("file:///android_asset/index.html");

• 加入以下程式碼來開啟 HTML5 Web Storage 功能，不然會無法使用 Web Storage API

  webview.getSettings().setDomStorageEnabled(true);

  Activity 修改後的元整程式碼如下：

  package com.toright.android.webapp;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.webkit.WebView;
  
  public class PhoneGap_WebAppActivity extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          // 建立一個 WebView
          WebView webview = new WebView(this);
          webview.getSettings().setJavaScriptEnabled(true);
          // 開啟 HTML5 Web Storage
          webview.getSettings().setDomStorageEnabled(true);
          setContentView(webview);
          webview.loadUrl("file:///android_asset/index.html");
      }
  }

• 執行畫面如下：
  

成功在 WebView 中看見第一個自己設計的 Hello World for HTML，再來就是用你習慣的網頁開發方式來設計 App 囉，剩下就是你對 HTML5, CSS3, JavaScript 的功力如何發揮了。

Discussion - 討論

單純使用 WebView 來載入本機網頁，藉由 HTML5 API 來開發應用程式，這招雖然可以跨平台執行，但是由於都是使用網頁技巧來設計應用程式，實際上這樣的開發方式限制太多，只靠 HTML5 的技巧是不夠的。但我們可以藉由 JavaScript Bridge 來橋接 Native 函式，打破這些限制並且提升 WebView 的能力。目前也有成熟的框架可以使用，下次我們就來介紹 PhoneGap 這一套函式庫，讓我們快速地在 WebView 中發揮更高的應用能力。

此外在 User Interface ，上原本的網頁設計都是用滑鼠進行操作，相較於行動裝置的觸控面板，UI 在設計上更為重要。行動裝置要考慮的因素更多，包含畫面的大小與多點觸控的問題。在 WebView 徒手打造 UI 是很累人的，我們也可以利用現有的 Library 幫助我們開發應用程式，像是 jQuery Mobile 或者 Sencha Touch 這類的框架都能夠幫助我們更快速地開發系統。有機會再與各位介紹吧。

Reference - 參考資料

• Android Developer (WebView)
• HTML5 Test Site
• ADT Plugin for Eclipse

系列文章

• Android WebApp 開發教學 (1) – HTML5 WebView 行動應用
• Android WebApp 開發教學 (2) – HTML5 Web Storage
• Android WebApp 開發教學 (3) – HTML5 + PhoneGap = 如虎添翼
• Android WebApp 開發教學 (4) – PhoneGap Contacts API 使用教學