思考要在空白頁: PhoneGap + Sencha Touch Quickstart (Part I)

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

2 則留言:

新增留言