行動技術開發概論

綱要

 關於行動開發平台
 Native vs Web
 Mobile Web Framework
 Apache Cordova
 App 產生器解決方案
 開發環境

2012.IM.mgt.ncu.edu.tw/ 文孝義方毓賢 2

關於行動開發平台

 行動裝置
 螢幕大小
 Phone base
 Tablet base
 傳輸頻寬
 Bluetooth
 2G/3G/4G/LTE
 WIFI / WiMAX



 行動裝置
 處理器速度
 1G – 相等於PC，但是與同等級PC不能相等。設計
不同，不是只有CPU計算能力。
 儲存空間
 內部儲存 – Flash memory
 外部儲存 – SD Card
 電力續航力
 觸控介面



 非智慧型手機
 功能手機
 GSM/PHS/Palm
 非完整作業系統
 特殊規格綁定硬體
 特殊開發SDK
 能實作的功能非常有限



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


 智慧型手機
 Mobile OS
 iOS、Android、bada OS、MeeGo、Palm OS、
WebOS、Windows Mobile、Symbian OS及
BlackBerry OS
 開發
 Java Based/ C++ Based
 Application
 安裝第三方軟體
 功能豐富
 可以不斷擴充

關於行動開發平台-開發工具

 Symbian
 C/C++
 Java ME
 Android
 NDK - C/C++
 SDK – Java、Go and Python
 iOS
 Object C++
 Windows
 .Net


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



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



 DotNet base
 優點
 Windows Base
 大廠支援
 大批原微軟陣營開發人員
 缺點
 難以跨平台，特殊開發語言。
 目前市場占有率小，影響開發預期收益。


Native vs Web
Why use Web-Based
 原因
 語言門檻高
 多又難以跨平台
 C++/JAVA/.Net …
 優勢
 Web-Based - Web Development
 HTML
 JavaScript
 CSS


Native vs Web

 跨平台
 在瀏覽器容器中運作
 容易學習 HTML
 UI 豐富容易設計
 CSS 3 動畫硬體驅動
 WebKit
 離線運作
 不需要SERVER


Native vs Web

 Native App vs. Mobile Web App

http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/

Native vs Web

 What is a Native App?
 直接安裝在裝置內
 透過市集
 並非一定是用純原生碼開發的APP


Native vs Web

 What is a Mobile Web App?
 經由網際網路
 透過裝置內的瀏覽器
 不需要安裝步驟


Native vs Web

 User interface
 Development
 Capabilities
 Monetization
 Method of delivery
 Versioning of the app
 Strengths
 Weaknesses

Native vs Web

 User interface
 差異小
 各平台可以
有一致性介
面


Native vs Web

 Development
 Native Apps
 各平台有專屬的開發方式與環境
 指定的開發工具與SDK


Native vs Web

 Development
 Mobile Web Apps
 採用瀏覽器運作
 採用標準化HTML 5、CSS3
 沒有特定的SDK或環境
 各平台可以擁有較一致的環境


Native vs Web

 Capabilities
 Native Apps
 擁有完整設備裝置的控制存取
 Mobile Web Apps
 有限的裝置設備控制存取
 例如: GPS


Native vs Web

 Monetization
 Native Apps
 透過指定的流程與方式收取軟體收入
 受限於裝置的設備製造商或是系統商
 Mobile Web Apps


Native vs Web

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

Native vs Web

 Versioning of the app
 Native Apps
 須更新才能擁有最新版本

 Mobile Web Apps
 線上唯一版本


Native vs Web

 Strengths
 Native Apps
 效能好
 有市集容易尋找軟體
 官方市集有審核機制，過濾不安全軟體
 Mobile Web Apps
 統一跨平台的程式碼
 不需要安裝
 版本立即更新，不需要審核。


Native vs Web

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

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


Native vs Web

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


Mobile Web Framework

 WEB UI Framework
 JQuery Mobile
 jqWidgets
 Sencha
 Mobile Platform Framework
 Phonegap



 JQuery based
 JQuery Mobile
 http://jquerymobile.com/
 jqWidgets
 http://www.jqwidgets.com/
 Sencha
 http://www.sencha.com/



 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



 使用方式- 宣告語法
 如果是網站版本，就直接線上嵌入官方版本。

 若為手機版本，請下載與應用程式放在手機端。
 載入快
 避免網路未連線

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



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



 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
 滿足企業需求，提供企業支援服務。



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



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

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


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標準化優勢，網頁開發的技術門檻，容易維護
與控制平台版本。


Apache Cordova

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


Apache Cordova

 全新開發人員資源
 http://phonegap.com/developer
 目前現行版本
 PhoneGap 2.1.0
 Released 21 Sep 2012


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.


Apache Cordova

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

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


Apache Cordova

 最後的釐清
 Phonegap 是個行動裝置平台系統
 支援大部分的Web UI Framework
 提供WEB 應用程式與行動裝置之間的橋接
 Phonegap 本身也是native開發設計
 Phoengap 提供彈性的外掛設計
 自由開發支援的新硬體
 開發軟體的支援
 Facebook
 Twitter
 自家後台API整合


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



 Widgetbox
http://www.widgetbox.com
 Apps-Builder
http://www.apps-builder.com/



 甚麼是App產生器
 成熟的開發平台
 類似IDE的開發介面
 勿需要程式設計能力
 豐富的模組化元件
 積木般的組合所需功能
 快速開發
 成本低
 容易維護
 缺點
 平台綁定限制
 不適合客製化

開發環境

 安裝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

How to develop

 Android SDK Manager
 SDK Manager.exe

2012/11/6 47

How to develop

 Android SDK Manager
 至尐要選取 2.3.X
 下載 USB Driver

2012/11/6 48

How to develop
 AVD Manager
 設定模擬器

2012/11/6 49

How to develop

 新增Android Project

2012/11/6 50

How to develop

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

2012/11/6 51

How to develop

 Web based 開發測試
 DEMO

2012/11/6 52

How to develop

 實機測試
 真正運作環境
 真實感測器
 真實狀況
 真實網路
 真實設備

2012/11/6 53

How to develop
 USB Driver
 Path:
android-sdk-windowsextrasgoogleusb_driver

2012/11/6 54

How to develop

 啟用開發模式

2012/11/6 55

How to develop


2012/11/6 56

How to develop
 完成相關設定後，插入
USB連結線。

2012/11/6 57

How to develop

 DDMS (Dalvik Debug Monitor)
 Path:
android-sdk-windowstoolsddms.bat

2012/11/6 58

How to develop

 DDMS 功能
 抓圖
 除錯
 注意採用TCP PORT
 Local Port: 8600
 VM Port: 8700

2012/11/6 59

How to develop

 啟用除錯

2012/11/6 60

How to develop

 選擇測試裝置

2012/11/6 61

How to develop

 停止除錯

2012/11/6 62

行動技術開發概論

More Related Content

What's hot

Viewers also liked

Similar to 行動技術開發概論

More from My own sweet home!

行動技術開發概論