1. OSS行動領域-1 1
CH 3
OVERVIEW
相關開發框架
Apache Callback

2. MOBILE OVERVIEW
• 關於行動開發
• 平台種類
• 開發技術工具
• 優缺點
• 遇到問題
2

3. MOBILE OVERVIEW
關於行動開發
• 螢幕大小
• Phone base
• Tablet base
• 傳輸頻寬
• Bluetooth
• 2G/3G
• WIFI / WiMAX
• 處理器速度
• 1G – 相等於PC，但是與同等級PC不能相等。設計不同，不是只有
CPU計算能力。
• 儲存空間
• 內部儲存 – Flash memory
• 外部儲存 – SD Card
3

4. MOBILE OVERVIEW
• 平台種類
• Symbian OS
• Android – Linux base
• iOS – Mac OSX base
• Windows – Windows Mobile OS
4

5. MOBILE OVERVIEW
開發技術工具
• Symbian
• C/C++
• Java ME
• Android
• NDK - C/C++
• SDK – Java、Go and Python
• iOS
• Object C++
• Windows
• .Net
5

6. MOBILE OVERVIEW
• 優缺點
• C base
• 優勢
• 標準ANSI
• 適用Android、iOS、.Net、Symbian
• 適用於高度效能要求: 遊戲或是特殊硬體
• 如: Xbox Kinect
• 大量程式庫
• 開發驅動程式
• 缺點
• 不易學習
• 雖然是ANSI C ，但是不易跨平台。
• 難以除錯
• 自行管理記憶體管理等其他回收問題
6

7. MOBILE OVERVIEW
• Java Base
• 優勢
• 適用多個平台: Symbian OS、Android OS、Windows OS
• 物件導向語言
• VM設計: 系統自行管理資源
• 大量程式庫
• 容易開發應用程式
• 缺點
• 沒有高度效能要求時
• 缺乏驅動程式時，需要廠商開發JAVA程式庫支援
• JAVA分支嚴重影響跨平台能力: Java ME、 Android Java
• DotNet base
• 優點
• Windows Base
• 大廠支援
• 缺點
• 難以跨平台: Android需要 Mono程式庫支援
7

8. MOBILE OVERVIEW
• 對於開發人員遇到的挑戰與問題
• 不同平台開發難度高
• 採用開發工具不同
• 分別用不同平台開發，難以維護。
• 開發的應用系統難以確保各平台的一致性。
• 各家Market Store規則不同
• 各平台提供的支援與性能不一樣
• 各家系統限制不同
8

9. MOBILE OVERVIEW
• 既有網站系統如何轉型到行動商務
• 解法1: 開發支援行動瀏覽器的WEB系統
• 解法2: 開發online 行動版WEB
• 解法3: 開發行動裝置Native Code 系統
• 解法4: 開發行動裝置 Html 5 Based 系統
9

10. MOBILE FRAMEWORK
• 以Web Browser為主的開發框架
• 現行WEB的行動開發框架
• jQuery Mobile
• JQTouch plugin for Jquery
• Sencha Touch
• http://www.sencha.com/products/touch/
• App Inventor
• http://www.appinventorbeta.com
• NimbleKit
• http://www.nimblekit.com
10

11. MOBILE FRAMEWORK
JQUERY MOBILE
• jQuery Mobile
• http://jquerymobile.com/
• MIT or the GPL2 license
• HTML5-based
• Native WebKit Animations
• 基於Jquery framework
• jQuery Mobile 1.0 Final
• 注意 Requires jQuery core 1.6.4
• 切勿使用最新的jQuery 1.7
11

12. MOBILE FRAMEWORK
JQUERY MOBILE
• 使用方式- 宣告語法
• 如果是網站版本，就直接線上嵌入官方版本。
• 若為手機版本，請下載與應用程式放在手機端。
• 載入快
• 避免網路未連線
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
12

13. MOBILE FRAMEWORK
JQUERY MOBILE
• ThemeRoller for Mobile
• http://jquerymobile.com/themeroller
• 量身設計專屬的布景設計，基於CSS3規格
• 下載後，更換宣告中的CSS檔案即可立即生效。
13

14. MOBILE FRAMEWORK
JQTOUCH PLUGIN
• jQTouch
• http://jqtouch.com/
• MIT License
• jQuery 外掛模式
• 基於Jquery framework
• 1.0 Beta 3
• Native WebKit Animations
• Demo
• 請使用iPhone or Android 或是 safrai
• http://jqtouch.com/preview/demos/main/#home
14

15. MOBILE FRAMEWORK
APP INVENTOR
• App Inventor
• http://www.appinventorbeta.com/
• MIT License
• 針對Android平台
• 線上設計，類似VisualBasic。
• 產生方式
• 打包成APK下載
• 產生Qrcode線上安裝
• 直接安裝在Phone上
15

16. MOBILE FRAMEWORK
APP INVENTOR
• Blocks Editor
• 圖形化視覺開發
16

17. MOBILE FRAMEWORK
NIMBLEKIT
• Nimblekit
• http://www.nimblekit.com
• 基於HTML & Javascript開發原生碼 iOS apps
• 一次購買$99美金
• 免費版，可在模擬器上開發，不能發布正式版。
• 不需要學習Object-C
• Fully supports iPad
• 完全iOS原生介面
• 需要Mac OSX開發環境，提供installer安裝。
• 將Xcode SDK包裝成JavaScript來使用，直接呼叫iOS核心 API。
• 效能與Object-C沒有差異。
• 針對iOS平台
17

18. MOBILE FRAMEWORK
NIMBLEKIT
• NKButton
• init(x, y, width, height, callback)
function playRadio()
{
var radio = new NKInternetPlayer();
radio.playFromURL("http://myradio.com:8000");
}
var playButton = new NKButton();
playButton.init(15, 390, 60, 20, "playRadio");
playButton.setImage("play.png");
playButton.show();
18

19. MOBILE FRAMEWORK
SENCHA TOUCH
• Sencha Touch
• http://www.sencha.com/products/touch/
• 基於 Ext JS framework 架構重新設計，完全為了mobile重新設計
的框架。
• 支援 iPhone, Android, and BlackBerry
• 支援 PhoneGap
• 支援 Apps Offline (HTML 5)
• 採用WEB標準設計，因此較為相容性的問題。
• 支援各種觸控手勢 Enhanced Touch Events
• 提供強大豐富完整的資料處裡元件
• 支援AJAX, JSONP, or YQL
• 滿足企業需求，提供企業支援服務。
19

20. MOBILE FRAMEWORK
SENCHA TOUCH
• Sencha Touch 與Jquery不同
• Jquery 是片段JavaScript API用來支援與擴充網頁功能，HTML是
主要元素，JavaScript是輔助強化。
• Sencha是完全以JavaScript為主要程式語言。HTML所佔的比例
則是次要的。
• JQUERY MOBILE是基於原JQUERY API的外掛擴充。
• Sencha Touch是根據MOBILE重新設計的專屬框架。
• Sencha Touch與其他框架採用adapter方式可以良好運作。
• 支援DOJO、JQUERY等AJAX框架。
20

21. MOBILE FRAMEWORK
SENCHA TOUCH
• 授權方式
• Open Source License GPLv3
• 須提供自己開發的原始碼給使用者
• Commercial Software License (Now Free!)
• 不願分享原始碼與散布
• 沒有開發APP的數量限制
21

22. MOBILE FRAMEWORK
SENCHA TOUCH
• DEMO
• http://dev.sencha.com/deploy/touch/examples/
• http://www.sencha.com/products/touch/demos/
• 豐富圖表元件
• http://www.sencha.com/products/touch/charts/
22

23. APACHE CALLBACK
• PhoneGap，http://www.phonegap.com/
• PhoneGap 的前身，已經轉移給Apache 基金會維護。
• http://incubator.apache.org/callback/
• 為何需要PhoneGap?
• WEB 開發若要在行裝置上控制硬體，有很大的困難。
• PhoneGap 提供一個包裝機制透過JavaScript間接呼叫原生碼的呼叫，
以提供與原生開發工具相當的功能。
• PhoneGap是一個橋接機制。
• 兼具WEB標準化優勢，網頁開發的技術門檻，容易維護與控制平
台版本。
23

24. APACHE CALLBACK
• 支援大部分的平台與裝置
• Open Source and Free
• Apache License, Version 2.0.
• 不需要學習Android Java或Object-C
• 採用WEB標準化技術，HTML 5。
• 目前為Adobe擁有該公司
24

25. APACHE CALLBACK
• PhoneGap Plugins
• 提供原有機制作為一個外掛模式，來提供無限的擴充能力。任何人
都可以開發外掛來支援更多的平台、裝置、程式庫、服務等
• 例如: Facebook Plugin
• 外掛程式庫
• https://github.com/phonegap/phonegap-plugins
25

26. APACHE CALLBACK
整合
• 基於瀏覽器為基礎的運作
• 在iOS與Android上的Webkit
• 提供硬體驅動的CSS3動畫效果
• 基於PhoneGap整合原有WEB行動框架
• Jquery
• jQTouch
• Sencha Touch
26

27. APACHE CALLBACK
• 開發參考
• http://phonegap.com/start
• 建議原文書
• PhoneGap Beginner's Guide
• Paperback : 328 pages
• Release Date : September 2011
• ISBN : 1849515360
27