PhoneGap + Sencha Touch 這是跨平台 mobile app 開發的一種組合，在開發速度與效能都能接受的情況下，我近期都投入在這個 framework。在此要與大家分享如何快速建立一個 mobile app，系列文章包含三部分：
基本需求
開發環境 MacOSPhoneGap 3.0.0
SenchaTouch 2.2.1
Part I：建立 PhoneGap 專案
1. 安裝 Mobile SDK
PhoneGap 支援的 mobile 平台有很多種，在這邊只針對 iOS 與 Android 做說明。iOS 需要安裝 Xcode，可以從 app store 下載，目前我使用的版本是 4.6.3。
而 Android 的部分請參照 Android Platform Guide 下載 ADT，裡面包含了 Eclipse 編輯器與 SDK，SDK 的路徑必須加到環境變數 $PATH，日後 command line 會使用到。
2. 安裝 PhoneGap
PhoneGap 3.0.0 開始的 command line tool 改由 npm 套件管理程式來維護，所以我們要先安裝 node。Node.js官方網站有提供 Mac 專屬的.pkg可以下載，不過我習慣抓 source code 下來編譯，node 安裝好之後自然也會有 npm 指令可以用利用 npm 來安裝 phonegap
$ sudo npm install -g phonegap $ phonegap -v 3.0.0-0.14.3
3. 建立 PhoneGap 專案
$ phonegap create hello com.example.hello HelloWorld產生 hello 資料夾，裡面包含 merges, platforms, plugins, www
platform 擺放各 mobile 平台的專案，plugins 存放提供你存取 device-level API 的 plugin，而 www 就是 app 主程式，平時就是編譯這一份檔案，預設會有基本的 demo 程式在裡面
剛建立好的 phonegap project 是不包含任何 mobile 平台支援，我們要加入 ios, android
$ phonegap build ios $ phonegap build android可以看到 hello/platform/ 之下有這兩個平台的專案資料夾
再來我們安裝 device-level API 支援，在此僅安裝最基本的 console plugin，至少可以拿來 debug，其它像是 camera, geolocation... 日後都可以依需求再安裝
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
4. 編譯 PhoneGap 專案
PhoneGap 提供 command line 的方式可以編譯與運行，在此我則採用自己的方式$ phonegap build下達此指令後，PhoneGap 會從 hello/www 去建立各平台的必要資源，包含 app 原始碼與 plugin，可以在下面資料夾看到編譯結果
hello/platform/ios/www
hello/platform/android/assets/www
5. 編譯各平台的專案並運行
iOS 的部分，用 Xcode 開啓 hello/platform/ios/HelloWorld.xcodeproj，按下左上角的編譯就可以在模擬器上面運行了。同時間在 console window 也可以看到 deviceready 的字眼
Android 的部分程序比較多，請先參照 Android Platform Guide 設定模擬器並開啓
編譯 android 專案
$ cd platform/android $ ant debug
列出可用的模擬器
$ adb devices List of devices attached emulator-5554 device
安裝到模擬器
$ adb -s emulator-5554 install -r bin/HelloWorld-debug.apk 337 KB/s (1579758 bytes in 4.565s) pkg: /data/local/tmp/HelloWorld-debug.apk Success
沒有留言:
張貼留言