1. 行動技術開發概論

2. 綱要
 關於行動開發平台
 Native vs Web
 Mobile Web Framework
 Apache Cordova
 App 產生器解決方案
 開發環境
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 2

3. 關於行動開發平台
 行動裝置
 螢幕大小
 Phone base
 Tablet base
 傳輸頻寬
 Bluetooth
 2G/3G/4G/LTE
 WIFI / WiMAX
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 3

4. 關於行動開發平台
 行動裝置
 處理器速度
 1G – 相等於PC，但是與同等級PC不能相等。設計
不同，不是只有CPU計算能力。
 儲存空間
 內部儲存 – Flash memory
 外部儲存 – SD Card
 電力續航力
 觸控介面
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 4

5. 關於行動開發平台
 非智慧型手機
 功能手機
 GSM/PHS/Palm
 非完整作業系統
 特殊規格綁定硬體
 特殊開發SDK
 能實作的功能非常有限
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 5

6. 關於行動開發平台
 智慧型手機
 非功能手機
 智慧型手機能夠顯示與個人電腦所顯示出來一致的
正常網頁
 具有獨立的作業系統以及良好的用戶介面
 擁有很強的應用擴展性、能方便隨意地安裝和刪除
應用程式
 較大螢幕
 能進行多任務操作，並且擁有強大的多媒體、郵件、
上網功能
 能取代個人電腦處理辦公事務和其他事務，能與網
路保持無縫連接，能與電腦、筆記型電腦等其他設
備同步資料。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 6

7. 關於行動開發平台
 智慧型手機
 Mobile OS
 iOS、Android、bada OS、MeeGo、Palm OS、
WebOS、Windows Mobile、Symbian OS及
BlackBerry OS
 開發
 Java Based/ C++ Based
 Application
 安裝第三方軟體
 功能豐富
 可以不斷擴充
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 7

8. 關於行動開發平台-開發工具
 Symbian
 C/C++
 Java ME
 Android
 NDK - C/C++
 SDK – Java、Go and Python
 iOS
 Object C++
 Windows
 .Net
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 8

9. 關於行動開發平台-開發工具
 C base
 優勢
 標準ANSI
 適用Android、iOS、.Net、Symbian
 適用於高度效能要求: 遊戲或是特殊硬體
 如: Xbox Kinect
 大量程式庫
 開發驅動程式
 缺點
 不易學習
 雖然是ANSI C ，但是不易跨平台。
 難以除錯
 自行管理記憶體管理等其他回收問題
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 9

10. 關於行動開發平台-開發工具
 Java Base
 優勢
 適用多個平台: Symbian OS、Android OS、Windows OS
 物件導向語言
 VM設計: 系統自行管理資源
 豐富大量程式庫
 容易開發應用程式
 缺點
 沒有高度效能要求時
 缺乏驅動程式時，需要廠商開發JAVA程式庫支援
 JAVA分支嚴重影響跨平台能力: Java ME、 Android Java
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 10

11. 關於行動開發平台-開發工具
 DotNet base
 優點
 Windows Base
 大廠支援
 大批原微軟陣營開發人員
 缺點
 難以跨平台，特殊開發語言。
 目前市場占有率小，影響開發預期收益。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 11

12. Native vs Web
Why use Web-Based
 原因
 語言門檻高
 多又難以跨平台
 C++/JAVA/.Net …
 優勢
 Web-Based - Web Development
 HTML
 JavaScript
 CSS
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 12

13. Native vs Web
 跨平台
 在瀏覽器容器中運作
 容易學習 HTML
 UI 豐富容易設計
 CSS 3 動畫硬體驅動
 WebKit
 離線運作
 不需要SERVER
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 13

14. Native vs Web
 Native App vs. Mobile Web App
http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 14

15. Native vs Web
 What is a Native App?
 直接安裝在裝置內
 透過市集
 並非一定是用純原生碼開發的APP
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 15

16. Native vs Web
 What is a Mobile Web App?
 經由網際網路
 透過裝置內的瀏覽器
 不需要安裝步驟
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 16

17. Native vs Web
 User interface
 Development
 Capabilities
 Monetization
 Method of delivery
 Versioning of the app
 Strengths
 Weaknesses
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 17

18. Native vs Web
 User interface
 差異小
 各平台可以
有一致性介
面
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 18

19. Native vs Web
 Development
 Native Apps
 各平台有專屬的開發方式與環境
 指定的開發工具與SDK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 19

20. Native vs Web
 Development
 Mobile Web Apps
 採用瀏覽器運作
 採用標準化HTML 5、CSS3
 沒有特定的SDK或環境
 各平台可以擁有較一致的環境
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 20

21. Native vs Web
 Capabilities
 Native Apps
 擁有完整設備裝置的控制存取
 Mobile Web Apps
 有限的裝置設備控制存取
 例如: GPS
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 21

22. Native vs Web
 Monetization
 Native Apps
 透過指定的流程與方式收取軟體收入
 受限於裝置的設備製造商或是系統商
 Mobile Web Apps
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 22

23. Native vs Web
 Method of delivery
 Native Apps
 直接下載到設備
 直接安裝
 版本的異動需自行處理
 透過設備或是系統商的市集
 Mobile Web Apps
 透過瀏覽器運作
 不需要安裝
 更新等不須使用者操心
 無市集
 因此在行銷上曝光度都需要更努力讓使用者關注
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 23

24. Native vs Web
 Versioning of the app
 Native Apps
 須更新才能擁有最新版本
 Mobile Web Apps
 線上唯一版本
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 24

25. Native vs Web
 Strengths
 Native Apps
 效能好
 有市集容易尋找軟體
 官方市集有審核機制，過濾不安全軟體
 Mobile Web Apps
 統一跨平台的程式碼
 不需要安裝
 版本立即更新，不需要審核。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 25

26. Native vs Web
 Weaknesses
 Native Apps
 開發門檻代價高
 各平台都是獨立完整開發專案
 無法控制使用者版本，影響系統的運作控制權。
 受限市集審核，不保證能上架。
 Mobile Web Apps
 無法控制完整設備裝置
 跨越不同平台，有同一的一致性介面。
 缺尐專屬市集，使用者不容易找到APP。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 26

27. Native vs Web
Native App Hybrid App Mobile Web App
• 原生碼為基礎 • WEB介面 • WEB為基礎
• 直接安裝在設備中 • 容易跨平台與裝置 • 傳統網站過度行動的
• 有專屬市集 • 一致性介面 快速方案
• 開發成本高 • 開發門檻低 • 開發成本低
• 需重新開發行動APP • 能控制絕大部分裝置 • 與原網站有一致性介
• 效能好 • 兼顧native & web 面與內容
• 也能擁有WEB介面 • Web App也歸入這定 • 能控制的裝置有限
• 難以跨平台 義
• 能控制全部裝置
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 27

28. Native vs Web
 既有網站系統如何轉型到行動商務
 解法1: 開發支援行動瀏覽器的WEB系統
 解法2: 開發online 行動版WEB
 解法3: 開發行動裝置Native Code 系統
 解法4: 開發行動裝置 Html 5 Based 系統
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 28

29. Mobile Web Framework
 WEB UI Framework
 JQuery Mobile
 jqWidgets
 Sencha
 Mobile Platform Framework
 Phonegap
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 29

30. Mobile Web Framework
 JQuery based
 JQuery Mobile
 http://jquerymobile.com/
 jqWidgets
 http://www.jqwidgets.com/
 Sencha
 http://www.sencha.com/
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 30

31. Mobile Web Framework
 jQuery Mobile
 http://jquerymobile.com/
 MIT or the GPL2 license
 HTML5-based
 Native WebKit Animations
 基於Jquery framework
 jQuery Mobile 1.1.1 Final
 注意 Requires jQuery core 1.6.4 or 1.7.1
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 31

32. Mobile Web Framework
 使用方式- 宣告語法
 如果是網站版本，就直接線上嵌入官方版本。
 若為手機版本，請下載與應用程式放在手機端。
 載入快
 避免網路未連線
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.1.1.min.js"></script>
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 32

33. Mobile Web Framework
 ThemeRoller for Mobile
 http://jquerymobile.com/themeroller
 量身設計專屬的佈景設計，基於CSS3規格
 下載後，更換宣告中的CSS檔案即可立即生效。
 容易設計UI美觀性，且不改變原程式碼。
異動成本低。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 33

34. Mobile Web Framework
 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
 滿足企業需求，提供企業支援服務。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 34

35. Mobile Web Framework
 Sencha Touch 與Jquery不同
 Jquery 是片段JavaScript API用來支援與擴充網頁功
能，HTML是主要元素，JavaScript是輔助強化。
 Sencha是完全以JavaScript為主要程式語言。HTML
所佔的比例則是次要的。
 JQUERY MOBILE是基於原JQUERY API的外掛擴充。
 Sencha Touch是根據MOBILE重新設計的專屬框架。
 Sencha Touch與其他框架採用adapter方式可以良好
運作。
 支援DOJO、JQUERY等AJAX框架。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 35

36. Mobile Web Framework
 DEMO
 http://dev.sencha.com/deploy/touch/examples/
 http://www.sencha.com/products/touch/demos/
 豐富圖表元件
 http://www.sencha.com/products/touch/charts/
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 36

37. Mobile Platform Framework
Apache Cordova
 Apache Cordova
 http://incubator.apache.org/callback/index.html
 PhoneGap，http://www.phonegap.com/
 PhoneGap 的前身，已經轉移給Apache 基金會維護。
 http://incubator.apache.org/callback/
 為何需要PhoneGap?
 WEB 開發若要在行裝置上控制硬體，有很大的困難。
 PhoneGap 提供一個包裝機制透過JavaScript間接呼叫原
生碼的呼叫，以提供與原生開發工具相當的功能。
 PhoneGap是一個橋接機制。
 兼具WEB標準化優勢，網頁開發的技術門檻，容易維護
與控制平台版本。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 37

38. Apache Cordova
 支援大部分的平台與裝置
 Open Source and Free
 Apache License, Version 2.0.
 不需要學習Android Java或Object-C
 採用WEB標準化技術，HTML 5。
 目前為Adobe擁有該公司
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 38

39. Apache Cordova
 全新開發人員資源
 http://phonegap.com/developer
 目前現行版本
 PhoneGap 2.1.0
 Released 21 Sep 2012
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 39

40. Apache Cordova
 Adobe® PhoneGap™ Build
 https://build.phonegap.com/
 支援平台
 iOS, Android™, Windows® Phone, Blackberry®
5/6/7, webOS and Symbian™ all with a single
codebase.
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 40

41. Apache Cordova
 PhoneGap Plugins
 提供原有機制作為一個外掛模式，來提供無限
的擴充能力。任何人都可以開發外掛來支援更
多的平台、裝置、程式庫、服務等
 例如: Facebook Plugin
 外掛程式庫
 https://github.com/phonegap/phonegap-plugins
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 41

42. Apache Cordova
 最後的釐清
 Phonegap 是個行動裝置平台系統
 支援大部分的Web UI Framework
 提供WEB 應用程式與行動裝置之間的橋接
 Phonegap 本身也是native開發設計
 Phoengap 提供彈性的外掛設計
 自由開發支援的新硬體
 開發軟體的支援
 Facebook
 Twitter
 自家後台API整合
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 42

43. App 產生器解決方案
 APPz
 http://www.appz.com.tw/
 appMobi
 http://www.appmobi.com/
 iBuildApp
 http://ibuildapp.com/
 MobiCart
 http://www.mobi-cart.com/
 Tiggzi
 http://tiggzi.com
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 43

44. App 產生器解決方案
 Widgetbox
http://www.widgetbox.com
 Apps-Builder
http://www.apps-builder.com/
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 44

45. App 產生器解決方案
 甚麼是App產生器
 成熟的開發平台
 類似IDE的開發介面
 勿需要程式設計能力
 豐富的模組化元件
 積木般的組合所需功能
 快速開發
 成本低
 容易維護
 缺點
 平台綁定限制
 不適合客製化
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 45

46. 開發環境
 安裝Eclipse
 http://www.eclipse.org/
 安裝Google Plugin for Eclipse
 https://developers.google.com/eclipse/?hl=zh-tw
 安裝 Google ADK
 Android SDK
 http://developer.android.com/sdk/index.html
 安裝ADT Plugin for Eclipse
 http://developer.android.com/sdk/installing/install
ing-adt.html
2012/11/6 46

47. How to develop
 Android SDK Manager
 SDK Manager.exe
2012/11/6 47

48. How to develop
 Android SDK Manager
 至尐要選取 2.3.X
 下載 USB Driver
2012/11/6 48

49. How to develop
 AVD Manager
 設定模擬器
2012/11/6 49

50. How to develop
 新增Android Project
2012/11/6 50

51. How to develop
 Web based 開發測試
 NB電腦的瀏覽器單機測試
 架設Web Server，從手機的瀏覽器連上執行。
 以 iPad 為例
 缺點:
 不能測試真實設備與感測器
 優點:
 快速測試HTML UI設計
2012/11/6 51

52. How to develop
 Web based 開發測試
 DEMO
2012/11/6 52

53. How to develop
 實機測試
 真正運作環境
 真實感測器
 真實狀況
 真實網路
 真實設備
2012/11/6 53

54. How to develop
 USB Driver
 Path:
android-sdk-windowsextrasgoogleusb_driver
2012/11/6 54

55. How to develop
 啟用開發模式
2012/11/6 55

56. How to develop
 啟用開發模式
2012/11/6 56

57. How to develop
 啟用開發模式
 完成相關設定後，插入
USB連結線。
2012/11/6 57

58. How to develop
 DDMS (Dalvik Debug Monitor)
 Path:
android-sdk-windowstoolsddms.bat
2012/11/6 58

59. How to develop
 DDMS 功能
 抓圖
 除錯
 注意採用TCP PORT
 Local Port: 8600
 VM Port: 8700
2012/11/6 59

60. How to develop
 啟用除錯
2012/11/6 60

61. How to develop
 選擇測試裝置
2012/11/6 61

62. How to develop
 停止除錯
2012/11/6 62