2013/08/19

PhoneGap + Sencha Touch Quickstart (Part I)


PhoneGap + Sencha Touch 這是跨平台 mobile app 開發的一種組合,在開發速度與效能都能接受的情況下,我近期都投入在這個 framework。在此要與大家分享如何快速建立一個 mobile app,系列文章包含三部分:

基本需求

開發環境 MacOS
PhoneGap 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



沒有留言:

張貼留言