Web based mobile devlopment 快速簡介

Jquery Mobile with PhoneGap plateform

文孝義
2012/4/17 1

Agenda
 Why use Web-Based
 Understand PhoneGap
 Mobile Framework
 How to develop
 Deploy to Phone
 Distribute to Market/AppStore
 What is PhoneGap Build

2012/4/17 2

Why use Web-Based
 Android
 ADK - Java
 NDK - C++
 iOS
 Object C++

2012/4/17 3

Why use Web-Based
 Web-Based - Web Development
 HTML
 JavaScript
 CSS

2012/4/17 4

Why use Web-Based
 跨平台
 在瀏覽器容器中運作
 容易學習 HTML
 UI 豐富容易設計
 CSS 3 動畫硬體驅動
 WebKit
 離線運作
 不需要SERVER

2012/4/17 5

Understand PhoneGap
 http://phonegap.com/
 建立WEB與系統之間的橋接機制
 操作與控制硬體設備
 目前版本 1.5.0
 已經轉移到Apache 基金會維護
 Callback/Cordova

2012/4/17 6

Mobile Framework – WEB
Based
 JQuery Mobile
 http://jquerymobile.com/
 JQTouch
 http://jqtouch.com/
 Sencha
 http://www.sencha.com/
 iUI
 http://code.google.com/p/iui/

2012/4/17 7

How to develop
 安裝Eclipse
 安裝 Google ADK
 Android SDK
 安裝ADT Plugin for Eclipse

2012/4/17 8

How to develop
 Android SDK Manager
 SDK Manager.exe

2012/4/17 9

How to develop
 Android SDK Manager
 至少要選取 2.3.X
 下載 USB Driver

2012/4/17 10

How to develop
 AVD Manager
 設定模擬器

2012/4/17 11

How to develop
 新增Android Project

2012/4/17 12

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

2012/4/17 13

How to develop
 Web based 開發測試
 DEMO

2012/4/17 14

How to develop
 實機測試
 真正運作環境
 真實感測器
 真實狀況
 真實網路
 真實設備

2012/4/17 15

How to develop
 USB Driver
 Path:
android-sdk-windowsextrasgoogleusb_driver

2012/4/17 16

How to develop
 啟用開發模式

2012/4/17 17

How to develop

2012/4/17 18

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

2012/4/17 19

How to develop
 DDMS (Dalvik Debug Monitor)
 Path:
android-sdk-windowstoolsddms.bat

2012/4/17 20

How to develop
 DDMS 功能
 抓圖
 除錯
 注意採用TCP PORT
 Local Port: 8600
 VM Port: 8700

2012/4/17 21

How to develop
 啟用除錯

2012/4/17 22

How to develop
 選擇測試裝置

2012/4/17 23

How to develop
 停止除錯

2012/4/17 24

Deploy to Phone
 方式:
 直接佈署
○ 利用WEB Server下載
○ SD卡
 上架市集

2012/4/17 25

Distribute to Market/AppStore
 省略

2012/4/17 26

What is PhoneGap Build
 build.phonegap.com
 提供製作特定平台的安裝程式
 目前線上支援平台
 目前免費試營運中

2012/4/17 27

 各平台目前支援的設備
 http://phonegap.com/about/features

2012/4/17 28


2012/4/17 29

Web based mobile devlopment 快速簡介

More Related Content

Viewers also liked (13)

Similar to Web based mobile devlopment 快速簡介 (20)

More from My own sweet home! (9)

Web based mobile devlopment 快速簡介