中央資管 - 43013

Apache Cordova 開發環境建置

04/12/2023 2

開發環境

安裝 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/12/2023 3

How to develop

Android SDK Manager SDK Manager.exe

04/12/2023 4

How to develop

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

04/12/2023 5

How to develop

AVD Manager 設定模擬器

04/12/2023 6

How to develop

新增 Android Project

04/12/2023 7

How to develop

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

以 iPad 為例 缺點 :

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

快速測試 HTML UI 設計

04/12/2023 8

How to develop

Web based 開發測試 DEMO

04/12/2023 9

How to develop

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

04/12/2023 10

How to develop

USB Driver Path:

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

04/12/2023 11

How to develop

啟用開發模式

04/12/2023 12

How to develop

啟用開發模式

04/12/2023 13

How to develop

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

USB 連結線。

04/12/2023 14

How to develop

DDMS (Dalvik Debug Monitor) Path:

android-sdk-windows\tools\ddms.bat

04/12/2023 15

How to develop

DDMS 功能 抓圖 除錯

注意採用 TCP PORT Local Port: 8600 VM Port: 8700

04/12/2023 16

How to develop

啟用除錯

04/12/2023 17

How to develop

選擇測試裝置

04/12/2023 18

How to develop

停止除錯

19

Phonegap - Cordova

Downloadhttp://phonegap.com

版本 : 2.1.0

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

20

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

21

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

22

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

23

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

24

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

25

Phonegap – 建立新專案

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

26

Phonegap – 設定 Phonegap

建立 libs 目錄 與 assets/www 目錄

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

27

Phonegap – 設定 Phonegap

解開 Phoengap 到目錄下

phonegap-phonegap-2.1.0-0-g26d211b\phonegap-phonegap-26d211b\lib\android\

複製 cordova-2.1.0.js 到 assets/www 下

複製 cordova-2.1.0.jar 到 libs 下

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

28

Phonegap – 設定 Phonegap

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

29

Phonegap – 設定 Phonegap

複製 xml 目錄的內容 到 專案的 /res 下

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

30

Phonegap – 設定 Phonegap

將 cordova-2.1.0.jar 加入倒 Build Path 下

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

31

Phonegap – 設定 Phonegap

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

32

Phonegap – 設定 Phonegap

修改主程式

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

33

Phonegap – 設定 Phonegap

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

34

Phonegap – 設定 Phonegap

開啟 AndroidManifest.xml 

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

35

Phonegap – 設定 Phonegap

貼上 裝置設定參數

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

phonegap-phonegap-2.1.0-0-g26d211b\phonegap-phonegap-26d211b\lib\android\example\AndroidManifest.xml

36

Phonegap – 設定 Phonegap

加入裝置轉向事件設定

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

37

Phonegap – 設定 Phonegap

在 assets/www 目錄下新增 index.html 

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

38

Phonegap – 設定 Phonegap

將範例檔案複製到專案中

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢

39

Phonegap – 設定 Phonegap

執行模擬器

2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢