中央資管 - 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

停止除錯