Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

行動技術開發概論

1,521 views

Published on

Published in: Technology
  • Be the first to comment

行動技術開發概論

  1. 1. 行動技術開發概論
  2. 2. 綱要 關於行動開發平台 Native vs Web Mobile Web Framework Apache Cordova App 產生器解決方案 開發環境2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 2
  3. 3. 關於行動開發平台 行動裝置  螢幕大小  Phone base  Tablet base  傳輸頻寬  Bluetooth  2G/3G/4G/LTE  WIFI / WiMAX2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 3
  4. 4. 關於行動開發平台 行動裝置  處理器速度  1G – 相等於PC,但是與同等級PC不能相等。設計 不同,不是只有CPU計算能力。  儲存空間  內部儲存 – Flash memory  外部儲存 – SD Card  電力續航力  觸控介面2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 4
  5. 5. 關於行動開發平台 非智慧型手機  功能手機  GSM/PHS/Palm  非完整作業系統  特殊規格綁定硬體  特殊開發SDK  能實作的功能非常有限2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 5
  6. 6. 關於行動開發平台 智慧型手機  非功能手機  智慧型手機能夠顯示與個人電腦所顯示出來一致的 正常網頁  具有獨立的作業系統以及良好的用戶介面  擁有很強的應用擴展性、能方便隨意地安裝和刪除 應用程式  較大螢幕  能進行多任務操作,並且擁有強大的多媒體、郵件、 上網功能  能取代個人電腦處理辦公事務和其他事務,能與網 路保持無縫連接,能與電腦、筆記型電腦等其他設 備同步資料。2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 6
  7. 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. 8. 關於行動開發平台-開發工具 Symbian  C/C++  Java ME Android  NDK - C/C++  SDK – Java、Go and Python iOS  Object C++ Windows  .Net2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 8
  9. 9. 關於行動開發平台-開發工具 C base 優勢  標準ANSI  適用Android、iOS、.Net、Symbian  適用於高度效能要求: 遊戲或是特殊硬體  如: Xbox Kinect  大量程式庫  開發驅動程式 缺點  不易學習  雖然是ANSI C ,但是不易跨平台。  難以除錯  自行管理記憶體管理等其他回收問題2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 9
  10. 10. 關於行動開發平台-開發工具 Java Base  優勢  適用多個平台: Symbian OS、Android OS、Windows OS  物件導向語言  VM設計: 系統自行管理資源  豐富大量程式庫  容易開發應用程式  缺點  沒有高度效能要求時  缺乏驅動程式時,需要廠商開發JAVA程式庫支援  JAVA分支嚴重影響跨平台能力: Java ME、 Android Java2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 10
  11. 11. 關於行動開發平台-開發工具 DotNet base 優點  Windows Base  大廠支援  大批原微軟陣營開發人員 缺點  難以跨平台,特殊開發語言。  目前市場占有率小,影響開發預期收益。2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 11
  12. 12. Native vs WebWhy use Web-Based 原因  語言門檻高  多又難以跨平台  C++/JAVA/.Net … 優勢  Web-Based - Web Development  HTML  JavaScript  CSS2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 12
  13. 13. Native vs Web 跨平台 在瀏覽器容器中運作 容易學習 HTML UI 豐富容易設計 CSS 3 動畫硬體驅動  WebKit 離線運作 不需要SERVER2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 13
  14. 14. Native vs Web Native App vs. Mobile Web Apphttp://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 14
  15. 15. Native vs Web What is a Native App?  直接安裝在裝置內  透過市集  並非一定是用純原生碼開發的APP2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 15
  16. 16. Native vs Web What is a Mobile Web App?  經由網際網路  透過裝置內的瀏覽器  不需要安裝步驟2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 16
  17. 17. Native vs Web User interface Development Capabilities Monetization Method of delivery Versioning of the app Strengths Weaknesses2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 17
  18. 18. Native vs Web User interface  差異小  各平台可以 有一致性介 面2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 18
  19. 19. Native vs Web Development  Native Apps  各平台有專屬的開發方式與環境  指定的開發工具與SDK2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 19
  20. 20. Native vs Web Development  Mobile Web Apps  採用瀏覽器運作  採用標準化HTML 5、CSS3  沒有特定的SDK或環境  各平台可以擁有較一致的環境2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 20
  21. 21. Native vs Web Capabilities  Native Apps  擁有完整設備裝置的控制存取  Mobile Web Apps  有限的裝置設備控制存取  例如: GPS2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 21
  22. 22. Native vs Web Monetization  Native Apps  透過指定的流程與方式收取軟體收入  受限於裝置的設備製造商或是系統商  Mobile Web Apps2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 22
  23. 23. Native vs Web Method of delivery  Native Apps  直接下載到設備  直接安裝  版本的異動需自行處理  透過設備或是系統商的市集  Mobile Web Apps  透過瀏覽器運作  不需要安裝  更新等不須使用者操心  無市集  因此在行銷上曝光度都需要更努力讓使用者關注2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 23
  24. 24. Native vs Web Versioning of the app  Native Apps  須更新才能擁有最新版本  Mobile Web Apps  線上唯一版本2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 24
  25. 25. Native vs Web Strengths  Native Apps  效能好  有市集容易尋找軟體  官方市集有審核機制,過濾不安全軟體  Mobile Web Apps  統一跨平台的程式碼  不需要安裝  版本立即更新,不需要審核。2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 25
  26. 26. Native vs Web Weaknesses  Native Apps  開發門檻代價高  各平台都是獨立完整開發專案  無法控制使用者版本,影響系統的運作控制權。  受限市集審核,不保證能上架。  Mobile Web Apps  無法控制完整設備裝置  跨越不同平台,有同一的一致性介面。  缺尐專屬市集,使用者不容易找到APP。2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 26
  27. 27. Native vs WebNative App Hybrid App Mobile Web App• 原生碼為基礎 • WEB介面 • WEB為基礎• 直接安裝在設備中 • 容易跨平台與裝置 • 傳統網站過度行動的• 有專屬市集 • 一致性介面 快速方案• 開發成本高 • 開發門檻低 • 開發成本低• 需重新開發行動APP • 能控制絕大部分裝置 • 與原網站有一致性介• 效能好 • 兼顧native & web 面與內容• 也能擁有WEB介面 • Web App也歸入這定 • 能控制的裝置有限• 難以跨平台 義• 能控制全部裝置2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 27
  28. 28. Native vs Web 既有網站系統如何轉型到行動商務  解法1: 開發支援行動瀏覽器的WEB系統  解法2: 開發online 行動版WEB  解法3: 開發行動裝置Native Code 系統  解法4: 開發行動裝置 Html 5 Based 系統2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 28
  29. 29. Mobile Web Framework WEB UI Framework  JQuery Mobile  jqWidgets  Sencha Mobile Platform Framework  Phonegap2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 29
  30. 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. 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.12012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 31
  32. 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. 33. Mobile Web Framework ThemeRoller for Mobile  http://jquerymobile.com/themeroller  量身設計專屬的佈景設計,基於CSS3規格  下載後,更換宣告中的CSS檔案即可立即生效。 容易設計UI美觀性,且不改變原程式碼。 異動成本低。2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 33
  34. 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. 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. 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. 37. Mobile Platform FrameworkApache 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. 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. 39. Apache Cordova 全新開發人員資源  http://phonegap.com/developer 目前現行版本  PhoneGap 2.1.0  Released 21 Sep 20122012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 39
  40. 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. 41. Apache Cordova PhoneGap Plugins  提供原有機制作為一個外掛模式,來提供無限 的擴充能力。任何人都可以開發外掛來支援更 多的平台、裝置、程式庫、服務等  例如: Facebook Plugin 外掛程式庫  https://github.com/phonegap/phonegap-plugins2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 41
  42. 42. Apache Cordova 最後的釐清  Phonegap 是個行動裝置平台系統  支援大部分的Web UI Framework  提供WEB 應用程式與行動裝置之間的橋接  Phonegap 本身也是native開發設計  Phoengap 提供彈性的外掛設計  自由開發支援的新硬體  開發軟體的支援  Facebook  Twitter  自家後台API整合2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 42
  43. 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.com2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 43
  44. 44. App 產生器解決方案 Widgetbox http://www.widgetbox.com Apps-Builder http://www.apps-builder.com/2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 44
  45. 45. App 產生器解決方案 甚麼是App產生器  成熟的開發平台  類似IDE的開發介面  勿需要程式設計能力  豐富的模組化元件  積木般的組合所需功能  快速開發  成本低  容易維護 缺點  平台綁定限制  不適合客製化2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 45
  46. 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. 47. How to develop Android SDK Manager  SDK Manager.exe 2012/11/6 47
  48. 48. How to develop Android SDK Manager  至尐要選取 2.3.X  下載 USB Driver 2012/11/6 48
  49. 49. How to develop AVD Manager  設定模擬器 2012/11/6 49
  50. 50. How to develop 新增Android Project 2012/11/6 50
  51. 51. How to develop Web based 開發測試  NB電腦的瀏覽器單機測試  架設Web Server,從手機的瀏覽器連上執行。  以 iPad 為例  缺點:  不能測試真實設備與感測器  優點:  快速測試HTML UI設計 2012/11/6 51
  52. 52. How to develop Web based 開發測試  DEMO 2012/11/6 52
  53. 53. How to develop 實機測試  真正運作環境  真實感測器  真實狀況  真實網路  真實設備 2012/11/6 53
  54. 54. How to develop USB Driver  Path: android-sdk-windowsextrasgoogleusb_driver 2012/11/6 54
  55. 55. How to develop 啟用開發模式 2012/11/6 55
  56. 56. How to develop 啟用開發模式 2012/11/6 56
  57. 57. How to develop 啟用開發模式 完成相關設定後,插入 USB連結線。 2012/11/6 57
  58. 58. How to develop DDMS (Dalvik Debug Monitor)  Path: android-sdk-windowstoolsddms.bat 2012/11/6 58
  59. 59. How to develop DDMS 功能  抓圖  除錯 注意採用TCP PORT  Local Port: 8600  VM Port: 8700 2012/11/6 59
  60. 60. How to develop 啟用除錯 2012/11/6 60
  61. 61. How to develop 選擇測試裝置 2012/11/6 61
  62. 62. How to develop 停止除錯 2012/11/6 62

×