將 HTML5 hybrid 應用程式轉成 App 的解決方案已有 PhoneGap, Titanium, jsWaffle 等, 各家功能比較如下表, 其中 Web 是指以網站形式運作之意. Titanium 僅支援 Android 與 iOS 兩大平台, 但著重於追求原生 App UI 的相似度; 而 PhoneGap 的跨平台支援數量多, 且可以使用 jQueryMobile 或 SenchaTouch 等函式庫. 而 jsWaffle 目前只限於 Android 平台而已.
| 功能 | Web | jsWaffle | PhoneGap | Titanium |
| 震動 | X | O | O | O |
| 錄音 | X | O | O | O |
| 相機 | X | O | O | O |
| 電子羅盤 | X | O | O | O |
| SD 卡存取 | X | O | X | O |
| SQL 資料庫 | X | O | X | O |
| Google Play | X | O | O | O |
| 瀏覽器測試 | O | O | O | X |
| 免費授權使用 | O | O | O | X |
跨平台支援 | All | Android |
Android
iOS
Windows
BlackBerry
Symbian
Palm
|
Android
iOS
|
這個 jsWaffle 是日本 Aoikujira 公司開發的, 其主要功能是自動製作出 Android 應用程式雛型架構, 匯入 Aptana編輯好 HTML5 網頁程式後, 利用 Aptana 將 HTML5 網頁程式編譯成原生的 Apk 檔, 再發布到 Google Play 市集, 以下摘要整理其開發環境佈置與開發流程. 首先說明開發環境佈置, 因為 Aptana 是以 Eclipse 為基礎的, 因此安裝 JDK 是必要的. 以下是我今天實裝心得 :
- 安裝 JDK :
http://www.oracle.com/technetwork/java/javase/downloads/index.html
JDK 是 Eclipse 家族之根本. - 安裝 Aptana Stidio :
http://www.aptana.com/products/studio3/download (150MB)
預設是下載 standalone 版, 直接按下方藍色 Download 鈕就對了. - 安裝 Android SDK :
http://developer.android.com/sdk/index.html#download
因為 Google 現在把 Eclipse 與 SDK 打包成 ADT Bundle, 如果已經下載 Bundle, 在 Aptana 裡設定 SDK 位置指向 Bundle 中的 sdk 目錄即可. 若不需要 Bundle, 那就單獨下載 Android SDK, 請點開 "USE AN EXISTING IDE" 就會出現 "Download the SDK tools for Windows" 鈕, 目前是 r22.3 版連結如下 :
http://dl.google.com/android/installer_r22.3-windows.exe (84.7MB)
這個 Android SDK 預設是安裝到 C:\ProgramFile\Android\android-sdk 目錄下, 安裝時也可以改為 C:\android-sdk 或 D:\android-sdk 較好記. 單獨的 SDK 裡面並沒有像 Bundle 那樣預載 最新的 Android API, 因此安裝完會自動彈出 API 下載列表, 勾選最新版 API 以及其他可能需要的版本 (例如我的手機還是 2.3.3 版, 為了實機測試, 所以我需要下載此版).
下載 API 過程非常緩慢, 特別所選的版本較多時更慢 (睡覺前開始下載吧), 最好只挑選最新版下載, 以後有需要再下載其它版本. 這就是 Google 要推出 ADT Bundle 的原因了, 因為一下載完就可以馬上進行開發 (用最新版 API). - 在 Aptana 上安裝 ADT 插件 :
事實上必須先安裝 JDT 再安裝 ADT, 因為 Aptana Studio 4.3.2 並未預載 JDT. 而安裝 ADT 必須要有 JDT 才行, 否則就會找不到檔案的錯誤 (dependence), 詳見 :
Aptana Studio 安裝 ADT 的問題. - 安裝 Adobe AIR :
http://get.adobe.com/tw/air/
因為 jsWaffle 是以 AIR 寫的, 所以需要安裝 AIR 才能執行 jsWaffle 安裝程式.. - 安裝 jsWaffle :
http://code.google.com/p/jswaffle/downloads/list
或 Aoikujira 公司官網 :
http://d.aoikujira.com/jsWaffle/wiki/ (按 Download 後再按中央的 jsw 圓圖)
請下載 jsWaffleForAndroid.air 檔安裝即可 (www.zip 是範例, 而 jsWaffle.jar 是 Java 版).
以上依序安裝完成後, 還有一個重要工作, 那就是幫 Aptana 設定 Android SDK 的位置. 打開 Aptana 就會出現一個錯誤提示, 說找不到 Android SDK :
按 Open Preference 鈕就會進入設定視窗 (也可以從 Window/Preference), 若 Android SDK 安裝在預設目錄, 則輸入 :
C:\ProgramFile\Android\android-sdk
如果有下載 ADT Bundle, 那就指定其解壓縮目錄下的 sdk 目錄即可, 如下圖 :
這樣就可以開始開發 App 了. 執行桌面的 jsWaffleForAndroid 如下圖 :
接著開啟 Aptana, 點選 "File/New/Project", 在 New Project 視窗中打開 Android 項目 :
點選 "Android Project from Existing Code", 在 Import Project 視窗中, 按 "Browse" 鈕, 點選剛剛用 jsWaffle 產生的 App 模板所在目錄 D:\jsWaffle\HelloWorld :
這樣就會將模版匯入到 Aptana 了, 下面介紹如何修改此模板為顯示 "Hello World!". 點開左方 Package Explorer 中的樹狀結構之 "assets/www" 目錄, 就可以看到三個檔案 :
點其中的 index.html, 中間就會顯示網頁原始碼, 但這是 jsWaffle 的模板, 將其刪減成如下的 HelloWorld :
按功能列的 Run (或 Ctrl+F11) , 就會打開瀏覽器顯示結果, 按一下 "hi" 也會顯示 "Hello World!" 訊息窗 :
接著說明如何將此網頁程式轉成可上傳 Google PLAY 或在手機安裝之 APK 檔. 打開樹狀結構 res 目錄下的 AndroidMenifest.xml 檔, 第一個頁籤是一般設定如版本號碼 (Google Play 不允許同一 version code 再次上傳, 必須變更版本號碼), 這裡只需要把下方預設的 SD 卡存取取消掉 (按 Remove), 因為 HelloWorld 用不到 :
接著切到第三頁籤 Permission, 同樣因為用不到, 把這些全部權限 Remove 掉 :
然後點選 "File/Save" 將改好的 manifest 檔存檔, 再點選 "File/Export" 來輸出成 APK 檔. 請點選 Android/Export Android Application :
然後用 Browse 點選 Package 名稱 HellowWorld :
接下來是要設定 APK 簽章用的金鑰, 因為是第一次, 所以要選 "Create new keystore", 須輸入密碼兩次 :
最後按 Finish, 就完成 APK 輸出了 (112KB). 我用 Blue Stack 這個 Android 模擬器執行此 APK 結果如下, 大功告成 ! (不過是個簡單的 Hello World, 不知道在高興什麼) :
如果使用 AVD 模擬器, 那速度真是慢到受不了.
APK 下載 : http://mybidrobot.allalla.com/android/HelloWorld.apk
原始檔下載 : http://mybidrobot.allalla.com/android/HelloWorld.zip
# BlueStacks 0.7.18 中文版 ~ MAC / Windows上 的 Android 系統模擬器
為了方便下載到手機實際安裝看看 (我直接在 HTC Desire S 手機打開 Blogger 點上面超連結卻沒下載), 所以利用中華電信 emome 的我的行動條碼製作了上面 APK 檔下載網址的 QR Code :
# http://qrcode.emome.net/qrcpromote/QRDIYManager (我的行動條碼)
下載完別忙著點 APK 檔安裝, 因為若沒有把 "設定/應用程式/未知的來源" 打開, 應該無法安裝成功, 如下圖所示要在 "未知的來源" 打勾才能安裝 (只要不是從 Google Play 下載的 APK, 包括從 USB 存入的, 都必須打開這選項~~申請 Google Play 要 25 美金ㄚ) :
# 參考 : 把APP安裝到手機裡
應用程式安裝執行結果跟模擬器幾乎一模一樣 :
沒有留言 :
張貼留言