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