1O S S 行 動 領 域 - 1

專案管理軟體–管理與實務 （開放原始碼）

OVERVIEW相關開發框架Apache Callback

CH 3

2

MOBILE OVERVIEW

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

3

MOBILE OVERVIEW關於行動開發

• 螢幕大小• Phone base• Tablet base

• 傳輸頻寬• Bluetooth• 2G/3G• WIFI / WiMAX

• 處理器速度• 1G – 相等於 PC ，但是與同等級 PC 不能相等。設計不同，不是只有

CPU 計算能力。• 儲存空間• 內部儲存 – Flash memory• 外部儲存 – SD Card

4

MOBILE OVERVIEW

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

5

MOBILE OVERVIEW開發技術工具

• Symbian• C/C++• Java ME

• Android• NDK - C/C++• SDK – Java 、 Go and Python

• iOS• Object C++

• Windows• .Net

6

MOBILE OVERVIEW

• 優缺點• C base• 優勢

• 標準 ANSI• 適用 Android 、 iOS 、 .Net 、 Symbian• 適用於高度效能要求 : 遊戲或是特殊硬體• 如 : Xbox Kinect

• 大量程式庫• 開發驅動程式

• 缺點• 不易學習• 雖然是 ANSI C ，但是不易跨平台。• 難以除錯• 自行管理記憶體管理等其他回收問題

7

MOBILE OVERVIEW

• Java Base• 優勢

• 適用多個平台 : Symbian OS 、 Android OS 、 Windows OS• 物件導向語言• VM 設計 : 系統自行管理資源• 大量程式庫• 容易開發應用程式

• 缺點• 沒有高度效能要求時• 缺乏驅動程式時，需要廠商開發 JAVA 程式庫支援• JAVA 分支嚴重影響跨平台能力 : Java ME 、 Android Java

• DotNet base• 優點• Windows Base• 大廠支援

• 缺點• 難以跨平台 : Android 需要 Mono 程式庫支援

8

MOBILE OVERVIEW

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

9

MOBILE OVERVIEW

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

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

11

MOBILE FRAMEWORKJQUERY 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

12

MOBILE FRAMEWORKJQUERY 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>

13

MOBILE FRAMEWORKJQUERY MOBILE

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

14

MOBILE FRAMEWORKJQTOUCH 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

15

MOBILE FRAMEWORKAPP INVENTOR

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

16

MOBILE FRAMEWORKAPP INVENTOR

• Blocks Editor• 圖形化視覺開發

17

MOBILE FRAMEWORKNIMBLEKIT

• 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 平台

18

MOBILE FRAMEWORKNIMBLEKIT

• 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();

19

MOBILE FRAMEWORKSENCHA 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

• 滿足企業需求，提供企業支援服務。

20

MOBILE FRAMEWORKSENCHA 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 框架。

21

MOBILE FRAMEWORKSENCHA TOUCH

• 授權方式• Open Source License GPLv3• 須提供自己開發的原始碼給使用者

• Commercial Software License (Now Free!)• 不願分享原始碼與散布• 沒有開發 APP 的數量限制

22

MOBILE FRAMEWORKSENCHA TOUCH

• DEMO• http://dev.sencha.com/deploy/touch/examples/• http://www.sencha.com/products/touch/demos/

• 豐富圖表元件• http://www.sencha.com/products/touch/charts/

23

APACHE CALLBACK

• PhoneGap ， http://www.phonegap.com/• PhoneGap 的前身，已經轉移給 Apache 基金會維護。• http://incubator.apache.org/callback/

• 為何需要 PhoneGap?• WEB 開發若要在行裝置上控制硬體，有很大的困難。• PhoneGap 提供一個包裝機制透過 JavaScript 間接呼叫原生碼的呼叫，以提供與原生開發工具相當的功能。

• PhoneGap 是一個橋接機制。• 兼具 WEB 標準化優勢，網頁開發的技術門檻，容易維護與控制平

台版本。

24

APACHE CALLBACK

• 支援大部分的平台與裝置• Open Source and Free• Apache License, Version 2.0.

• 不需要學習 Android Java 或 Object-C• 採用 WEB 標準化技術， HTML 5 。• 目前為 Adobe擁有該公司

25

APACHE CALLBACK

• PhoneGap Plugins• 提供原有機制作為一個外掛模式，來提供無限的擴充能力。任何人都可以開發外掛來支援更多的平台、裝置、程式庫、服務等

• 例如 : Facebook Plugin

• 外掛程式庫• https://github.com/phonegap/phonegap-plugins

26

APACHE CALLBACK整合

• 基於瀏覽器為基礎的運作• 在 iOS 與 Android 上的 Webkit• 提供硬體驅動的 CSS3 動畫效果

• 基於 PhoneGap整合原有 WEB 行動框架• Jquery• jQTouch• Sencha Touch

27

APACHE CALLBACK

• 開發參考• http://phonegap.com/start

• 建議原文書• PhoneGap Beginner's Guide• Paperback : 328 pages• Release Date : September 2011• ISBN : 1849515360