04/10/2023 1

WEB-BASED MOBILE APP

OVERVIEW

Jquery Mobile with PhoneGap plateform

文孝義

04/10/2023 2

Agenda

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

04/10/2023 3

Why use Web-Based

AndroidADK - JavaNDK - C++

iOSObject C++

04/10/2023 4

Why use Web-Based

Web-Based - Web DevelopmentHTMLJavaScriptCSS

04/10/2023 5

Why use Web-Based

跨平台 在瀏覽器容器中運作 容易學習 HTML UI 豐富容易設計 CSS 3 動畫硬體驅動

WebKit 離線運作 不需要 SERVER

04/10/2023 6

Understand PhoneGap

http://phonegap.com/ 建立 WEB 與系統之間的橋接機制

操作與控制硬體設備 目前版本 1.5.0 已經轉移到 Apache 基金會維護

Callback/Cordova

04/10/2023 7

Mobile Framework – WEB Based

JQuery Mobilehttp://jquerymobile.com/

JQTouchhttp://jqtouch.com/

Senchahttp://www.sencha.com/

iUIhttp://code.google.com/p/iui/

04/10/2023 8

How to develop

安裝 Eclipse 安裝 Google ADK

Android SDK 安裝 ADT Plugin for Eclipse

04/10/2023 9

How to develop

Android SDK ManagerSDK Manager.exe

04/10/2023 10

How to develop

Android SDK Manager至少要選取 2.3.X下載 USB Driver

04/10/2023 11

How to develop

AVD Manager設定模擬器

04/10/2023 12

How to develop

新增 Android Project

04/10/2023 13

How to develop

Web based 開發測試NB 電腦的瀏覽器單機測試架設 Web Server ，從手機的瀏覽器連上執行。

○ 以 iPad 為例缺點 :

○ 不能測試真實設備與感測器優點 :

○ 快速測試 HTML UI 設計

04/10/2023 14

How to develop

Web based 開發測試DEMO

04/10/2023 15

How to develop

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

04/10/2023 16

How to develop

USB DriverPath:

android-sdk-windows\extras\google\usb_driver\

04/10/2023 17

How to develop

啟用開發模式

04/10/2023 18

How to develop

啟用開發模式

04/10/2023 19

How to develop

啟用開發模式 完成相關設定後，插入

USB 連結線。

04/10/2023 20

How to develop

DDMS (Dalvik Debug Monitor)Path:

android-sdk-windows\tools\ddms.bat

04/10/2023 21

How to develop

DDMS 功能抓圖除錯

注意採用 TCP PORTLocal Port: 8600VM Port: 8700

04/10/2023 22

How to develop

啟用除錯

04/10/2023 23

How to develop

選擇測試裝置

04/10/2023 24

How to develop

停止除錯

04/10/2023 25

Deploy to Phone

方式 :直接佈署

○ 利用 WEB Server 下載○ SD 卡

上架市集

04/10/2023 26

Distribute to Market/AppStore

省略

04/10/2023 27

What is PhoneGap Build

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

04/10/2023 28

What is PhoneGap Build

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

04/10/2023 29

What is PhoneGap Build