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 並且安裝,下載網址如下
2. 設定 Android SDK Manager,加入系統環境變數
-
- 點選 [我的電腦] 右鍵 [內容],選擇 [進階] 標籤頁選取 [環境變數]
- 點選 [新增] 加入環境變數「ANDROID_SDK_HOME」設定到 SDK 的安裝路徑中( AVD 會建立在此路徑中)
- 點選 [我的電腦] 右鍵 [內容],選擇 [進階] 標籤頁選取 [環境變數]
3. Android SDK Manager 設定 (安裝API)
4. 建置 Eclispe 開發環境
-
- 下載 Eclipse Classic (下載後解壓縮),目前下載的版本為 3.7.2,網址如下
- http://www.eclipse.org/downloads/
5. 安裝 ADT Plugin for Eclipse(參考 ADT Plugin for Eclipse)
6. 設定 Eclipse Android SDK
7. Eclipse 建立 Android 專案
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...] 啟動模擬器
- 啟動要等待一些時間,執行完成的模擬器畫面如下:
- 執行 Android Virtual Device Manager (在Eclispe工具列中)
9. 在 Eclipse 執行 Android Project
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/"); } }
- 由於我們希望這個 Android App 能夠存取 Internet 因此需要修改 AndroidManifest.xml,新增 android.permission.INTERNET (Users Permission)。先開啟 Android Project 中的 AndroidManifest.xml 檔案,新增的方式如下:
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 這類的框架都能夠幫助我們更快速地開發系統。有機會再與各位介紹吧。
1 comment for “Android WebApp 開發教學 (1) - HTML5 WebView 行動應用”