中央資管 - 43013

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

2

大綱

Phonegap 架構介紹 Phonegap 環境建置 第一個 Phonegap App Phonegap Build

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

3

Phonegap 架構介紹

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

4

Phonegap 架構介紹

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

5

Phonegap 架構介紹

Phonegap 本身實作瀏覽器，建立網頁程式碼與手機層串

接的橋接介面。 本身是原生碼開發，提供對應網頁的

JavaScript API 呼叫介面。 先天 Plugin 設計， Phonegap 本身裝置 API

皆為 Plugin 設計。 官方已經提供 Qrcode Scanner 外掛。

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

6

Phonegap 環境建置 - Cordova

Downloadhttp://phonegap.com

版本 : 2.2.0 以 Android 環境為主，備好 Android 手

機。 備好 專用的 USB 連接線

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

7

Phonegap – 建立新專案

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

8

Phonegap – 建立新專案

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

9

Phonegap – 建立新專案

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

10

Phonegap – 建立新專案

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

11

Phonegap – 建立新專案

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

12

Phonegap – 建立新專案

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

13

Phonegap – 設定 Phonegap

建立 libs 目錄 與 assets/www 目錄

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

14

Phonegap – 設定 Phonegap

解開 Phoengap 到目錄下

\lib\android\

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

複製 cordova-2.2.0.jar 到 libs 下

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

15

Phonegap – 設定 Phonegap

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

16

Phonegap – 設定 Phonegap

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

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

17

Phonegap – 設定 Phonegap

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

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

18

Phonegap – 設定 Phonegap

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

19

Phonegap – 設定 Phonegap

修改主程式

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

20

Phonegap – 設定 Phonegap

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

21

Phonegap – 設定 Phonegap

開啟 AndroidManifest.xml 

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

22

Phonegap – 設定 Phonegap

貼上 裝置設定參數

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

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

23

Phonegap – 設定 Phonegap

加入裝置轉向事件設定

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

24

Phonegap – 設定 Phonegap

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

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

25

Phonegap – 設定 Phonegap

將範例檔案複製到專案中

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

26

Phonegap – 設定 Phonegap

執行模擬器

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

27

第一個 Phonegap App

製作 APK 安裝檔 預設測試用簽章 製作個人用正式簽章

簽章有效期，請至少 30 年以上。

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

28

第一個 Phonegap App

預設測試用簽章

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

29

第一個 Phonegap App

製作正式簽章 工具 KeyStore Explorer

http://www.lazgosoftware.com/kse/index.html

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

30

第一個 Phonegap App

建立 JAVA KEY STORE

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

31

第一個 Phonegap App

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

32

第一個 Phonegap App

設定簽章資料

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

33

第一個 Phonegap App

命名之後辨認的別名

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

34

第一個 Phonegap App

儲存，請加上附檔名 .keystore

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

35

第一個 Phonegap App

利用 eclipse 外掛指定製作的簽章製作APK

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

36

第一個 Phonegap App

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

37

第一個 Phonegap App

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

38

第一個 Phonegap App

測試用簽章有 30 天的有效期 請勿使用測試簽章正式上架 上架用途，請慎重製作正式簽章。 日後版本更新升級，會檢核簽章是否一致。

檢核是由 Android 系統進行

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

39

Phonegap Build

https://build.phonegap.com 支援 6 大平台 不需要 MacOSX 即可開發 iOS APP iOS 平台需要開發者簽章 開發一次，同時完成 6 大手機平台 APP 。

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