利用 html5 + javascript + css 開發手機應用程式

技術分享 利用 HTML5 + JavaScript + CSS 開發手機應用程式 (以 Android 為例)

R3 kuro

http://slidesha.re/xeqC4C

常見行動裝置 App 類型： 1. Native App.

2. Web App.

3. Hybrid App.

Native App (原生介面，為裝置量身訂做)

1. 對系統/手機硬體支援度好 2. 執行效率最佳 3. 開發門檻相對高 Android: Java iOS: Objective-C

Web App (在行動裝置上的瀏覽器執行)

1. 完全利用 HTML 開發，開發速度相對快

2. UI 交給瀏覽器 Rendering，執行效率好壞全依賴裝置硬體規格 3. 對硬體支援度差，無法使用行動裝置特殊功能 (如拍照，加速度計，GPS，檔案系統存取… 等功能)

Hybrid App (混合型，將網站包進全螢幕瀏覽器)

1. 開發方式與 Web App 類似 2. 透過 Mobile App Framework 包裝成原生 App，可以使 Web App 使用行動裝置上的特殊功能 Android: WebView iOS: UIWebView

* Android Market 因為某某因素…

Native App. Hybrid App. Web App.

技術門檻 Java / Obj-C HTML5 + JS + CSS

+ JS API HTML5 + JS +

CSS

跨平台 X O O

使用者經驗 最佳 普通 普通

離線使用 O O X

裝置功能整合 最佳 普通 低

*上架賣錢 O O X

UI Component: 提供適用於觸控螢幕的UI元件

JavaScript Library: 讓開發更有效率的 JavaScript 函式庫。

Wrapper: 可把 Mobile Web App 包裝成原生軟體 (Native App)，同時提供一些 function 讓 JavaScript 可以存取一些底層的功能

今天的主角

為何使用 PhoneGap ? 使用容易 支援多種行動裝置平台 Open Source 社群支援 免費

開發需求 Android : Android SDK + PhoneGap Eclipse (非必要)

iOS : Mac OS X 10.6+ iOS SDK + Phonegap

Xcode (非必要)

PhoneGap API 介紹 ACCELEROMETER (加速度計)

CAMERA (相機) COMPASS (指南針) DEVICE (裝置資訊) GEOLOCATION (地理定位)

PhoneGap API 介紹 EVENTS (事件處理)

FILE (檔案系統) CONNECTION (連線偵測) MEDIA (多媒體) STORAGE (LOCAL 資料存儲)

DEMO 1 : 透過台北市政府公開資料平台線上取得台北超市商場資料 資料來源: http://data.taipei.gov.tw/ct.asp?xitem=3448994&ctnode=45112&mp=datataipei

JQuery mobile (UI) Geolocation API Ajax

DEMO 2 : 搖靈籤 APP

(安裝前需先勾選允許安裝非 Market 應用程式)

Accelerometer (加速度計) Events API Media API Local Storage API HTML5 Canvas

Q & A

參考資料： 1. PhoneGap: http://phonegap.com/start/#android 2. PhoneGap API: http://docs.phonegap.com/en/1.3.0/index.html 3. PhoneGap Wiki http://wiki.phonegap.com/w/page/16494772/FrontPage 4. Mobile web app framework 總整理: http://www.lis186.com/?p=2030 5. 你的第一支 PhoneGap 應用程式：HELLO INSIDE! http://www.inside.com.tw/2011/01/29/hello-inside-phonegap 6. 跨平台手機服務開發 JQuery Mobile http://www.cc.ntu.edu.tw/chinese/epaper/0016/20110320_1609.html 7. 使用 JQuery Mobile 快速開發 Mobile 網站 http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development 8. JQuery Mobile framework – a forms tutorial http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms

謝謝大家