顯示具有 cross platform 標籤的文章。 顯示所有文章
顯示具有 cross platform 標籤的文章。 顯示所有文章

2013/08/19

PhoneGap + Sencha Touch Quickstart (Part III)


透過前兩篇(Part I, Part II)我們分別建立的 PhoneGap 專案與 Sencha Touch 專案,再來就是將他們合併,也就是讓 Sencha Touch 透過 PhoneGap run 在模擬器上



Part III:Sencha Touch 與 PhoneGap 的結合


1. 把 Sencha Touch web page 複製到 PhoneGap

我們可以把 PhoneGap 想像成一個載體 (webview),上面運行著 Sencha Touch web page,而透過 javascript 可以和底層的 device 溝通。

所以最快的方式就是把 build 出來的 Sencha Touch package 複製到 PhoneGap 底下的 www 資料夾,然後重新 build PhoneGap,再重新 build 各平台的專案。
(在此為了簡化示範流程,才會用手動的方式複製,真正在開發時應該使用 ST project 內的 build.xml 去描述此步驟)

編譯出來的 ST 程式碼
 
Copy 到 PhoneGap 的www
注意來源跟目的,一個是 ST 一個是 PhoneGap。
另外原本在 www 裡面的 config.xml 要留著,編譯時會用到!
$ cp -a SenchaTouch/hello/build/HelloWorld/package/* PhoneGap/hello/www/
$ phonegap build ios
$ phonegap build android

按照 Part I 的方式分別編譯 ios/android 並運行
Good! It works.


2. 加入 PhoneGap deviceready event

由於 Sencha Touch demo 程式中並未使用到 PhoneGap 提供的 API,為了證明它可以work,所以我們要修改 Sencha Touch project 中的 index.html,加入很簡單的程式碼:當 deviceready event 觸發時就在 debug window 印出 deviceready (註:device ready 就表示 API 可以呼叫了)
加在 <head></head>之間,include "touch/microloader/development.js" 之後
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
  console.log('deviceready');
}, false);
</script>

重新編譯 Sencha Touch project 後產生 package,將其 copy 到 PhoneGap ... (重複步驟1)
還記得編譯 ST 的指令嗎
$ sencha app build package

若看到 demo 網頁出現,同時 console 也跑出 deviceready 字眼,表示我們成功結合 Sencha Touch 與 PhonaGap 了!

iOS 訊息
2013-08-19 23:51:55.016 HelloWorld[71208:c07] deviceready
Android 訊息
I/Web Console( 1291): deviceready at file:///android_asset/www/index.html:61

註:
ios 的 debug window 在 Xcode 裡面
android 可以透過下面指令觀看整個系統的 log
$ adb -s emulator-5554 logcat

PhoneGap + Sencha Touch Quickstart (Part II)


上一篇講完了如何建立 PhoneGap 專案並且 run 在模擬器上,再來要講 Sencha Touch 這個 mobile web framework



Part II: 建立 Sencha Touch 專案


1. 下載 Sencha Touch SDK 與 Sencha Cmd

SDK 有分兩種版本 GPL 與 Commercial,目前最新版本為 2.2.1 在此下載
解壓縮開之後可以得到 touch-2.2.1 資料夾

Sencha Cmd 有 Mac 專屬版本,最新版本為 3.1.2 在此下載
下載後是個安裝檔,請指定安裝路徑。安裝後請把 sencha 執行檔的路徑加到環境變數 $PATH

試一下是否 work
$ sencha help | head -n 1
Sencha Cmd v3.1.2.342


2. 建立專案

利用 Sencha CMD 來建立專案,請指定 sdk 路徑到剛剛下載的 touch-2.2.1,HelloWorld 為專案名,"./hello"是專案建立的位置
$ sencha -sdk ~/Development/touch-2.2.1 generate app HelloWorld ./hello
產生專案資料夾 hello,裡面的 index.html 就是 app 的首頁
app.js 是程式進入點,app 資料夾依據 MVC 的分類放置自己的程式碼
resources 擺放 css, image, icon 這些檔案
touch 放置 Sencha Touch 原始碼,編譯時會引用


3. 編譯專案

夠過編譯可以將引用到的 javascript 從 source 中抽出並壓縮,SCSS 的部分也是會經過 compass 編譯壓縮
$ sencha app build package
在 hello/build/HelloWorld/package 資料夾下可以看到編譯結果


4. 測試

啓動 MacOS 內建 apache
$ sudo apachectl start

將 hello/build/HelloWorld/package copy 到 apache 預設的 document root: /Library/WebServer/Documents/hello
瀏覽網頁 http://localhost/hello/ 即可看到 demo 網站

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

2012/10/23

PhoneGap - Cross platform solution for mobile app - Hello world

跨平台的 mobile solution 越來越多種, google 一下就可以找到人家推薦或比較的文章:



其實大部分都是用純網頁的方式來開發:HTML5 + Javascript,好像只有 Titanium 會把 project 轉成 native code 再編譯,而 PhoneGap 則是為每個平台開發了 framework,提供存取硬體資源的界面,而 UI 層一樣用網頁的方式呈現。
效能理論上是 native code 好些,但目前我的需求在於呈現一些靜態的資料,不需要大量的運算或是圖形成像,選擇了 Phonegap + jQuery mobile 來玩玩看。



下列記錄一個專案產生及編譯的過程:

2.1.0 版 (目前最新版)

1. 安裝方式跟以往不同,沒有 dmg 檔,改採 command line 的方式,可以先看一下官網的 Getting Started with iOS,整理步驟如下:
  • 安裝 Xcode Command Line Tools
  • 下載 cordova source,並解壓縮
  • 進到目錄裡執行下列 script,創建 iOS 專案
$ cd ./phonegap-phonegap-26d211b/lib/ios/bin
$ ./create ~/my-phonegap com.phonegap my-phonegap
$ ./update_cordova_subproject ~/my-phonegap/my-phonegap.xcodeproj/

2. 編譯
開啟剛剛產生出來的 xcode project,從圖中可以看到裡面還包含 CordovaLib,先編譯 CordovaLib 再編譯自己的專案

順利的話就會 deploy 到模擬器上了

註:預設是把 ARC 打開的,所以如果 target iphone 上面沒有支援,就會有下面的錯誤發生。Disable ARC 不是一個好方法,如果有需要可以使用舊版的 library。
dyld: lazy symbol binding failed: Symbol not found: _objc_retain
  Referenced from: /var/mobile/Applications/81EB9778-1819-454F-BF09-5D7CA2706A1A/phonegap.app/phonegap
  Expected in: /usr/lib/libobjc.A.dylib
dyld: lazy symbol binding failed: Symbol not found: _objc_storeStrong
  Referenced from: /var/mobile/Applications/81EB9778-1819-454F-BF09-5D7CA2706A1A/phonegap.app/phonegap
  Expected in: /usr/lib/libobjc.A.dylib

3. 再來就可以參考 API 去撰寫自己的 app 了,資料放在 www 這 folder 底下即可



1.8.0 版

1. 下載 source 後直接執行 phonegap-phonegap-2b7ffca/lib/ios/Cordova-1.8.0.dmg 

2. 安裝後開啓 xcode 就可以看到 Cordova-based Application 的專案可以新增

3. 編譯並執行

出現了錯誤?
ERROR: Start Page at 'www/index.html' was not found
原來是 www 加進專案的方式有問題,正確的步驟如下:在專案按右建選擇"Add file to (project name)",選擇 www 資料夾,並勾選 "Copy items into destination group's" folder (if needed)",Folders 選擇 "Create folder references for any added folders"

再編譯一次就沒有問題了!

2012/03/04

實現網頁即時傳訊 Web instant message (IM)

最近想弄一個Web IM,在web上做即時聊天有一定的困難,因為受限在http協定原生的特性:
client:request -> server:response -> 結束
傳輸一定要從client開始,而且一來一往誰也不能多,想做到server push有一定的難度,不像tcp raw socket自由度那麼高。


早期的聊天室會使用polling的方式定期 refresh (post back) 來更新頁面,同步的時間取決於refresh的頻率,但server loading也隨著頻率上升而增加。後來有了Ajax,頁面更新不用再一直閃爍,但還是有原本耗資源的問題。

近期較廣泛被使用的是Ajax搭配long polling,做到省資源又可以與server同步的效果。
Polling就是client定期的發request,long polling就是定期發request,但server不馬上response,而是等到有需要的時候再response (例如有人傳新訊息給你時),通常browser timeout都蠻長的,所以這段等待的期間相對polling就很省資源。如果還不是很懂,可以參考這一篇:Browser 與 Server 持續同步的作法介紹。

要做到long polling這個效果需要server support,server必需要把request object先keep住,等到有需要的時候再抓出來回應給client。用Tornado來舉例,就是RequestHandler被call時,先把Handler存起來,等到時機到了再執行finish() function。


下面列出幾種IM的 model,我想實現的是最後一種 ── 跨平台而且server可以隨著loading scale-up。