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

2. 大綱
 Phonegap 架構介紹
 Phonegap 環境建置
 第一個Phonegap App
 Phonegap Build
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 2

3. Phonegap 架構介紹
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 3

4. Phonegap 架構介紹
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 4

5. Phonegap 架構介紹
 Phonegap
 本身實作瀏覽器，建立網頁程式碼與手機層串
接的橋接介面。
 本身是原生碼開發，提供對應網頁的JavaScript
API 呼叫介面。
 先天Plugin 設計，Phonegap本身裝置API 皆為
Plugin設計。
 官方已經提供Qrcode Scanner外掛。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 5

6. Phonegap 環境建置- Cordova
 Download
http://phonegap.com
 版本: 2.2.0
 以Android 環境為主，備好 Android手機。
 備好 專用的USB連接線
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 6

7. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 7

8. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 8

9. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 9

10. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 10

11. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 11

12. Phonegap – 建立新專案
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 12

13. Phonegap – 設定Phonegap
 建立 libs 目錄 與 assets/www目錄
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 13

14. Phonegap – 設定Phonegap
 解開Phoengap
 到目錄下
libandroid
 複製 cordova-2.2.0.js 到 assets/www下
 複製 cordova-2.2.0.jar 到 libs下
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 14

15. Phonegap – 設定Phonegap
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 15

16. Phonegap – 設定Phonegap
 複製 xml目錄的內容 到 專案的 /res下
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 16

17. Phonegap – 設定Phonegap
 將 cordova-2.1.0.jar 加入
倒 Build Path下
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 17

18. Phonegap – 設定Phonegap
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 18

19. Phonegap – 設定Phonegap
 修改主程式
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 19

20. Phonegap – 設定Phonegap
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 20

21. Phonegap – 設定Phonegap
 開啟 AndroidManifest.xml
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 21

22. Phonegap – 設定Phonegap
 貼上 裝置設定參數
phonegap-phonegap-2.1.0-0-g26d211bphonegap-phonegap-
26d211blibandroidexampleAndroidManifest.xml
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 22

23. Phonegap – 設定Phonegap
 加入裝置轉向事件設定
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 23

24. Phonegap – 設定Phonegap
 在assets/www目錄下新增 index.html
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 24

25. Phonegap – 設定Phonegap
 將範例檔案複製到專案中
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 25

26. Phonegap – 設定Phonegap
 執行模擬器
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 26

27. 第一個Phonegap App
 製作APK安裝檔
 預設測試用簽章
 製作個人用正式簽章
 簽章有效期，請至少30年以上。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 27

28. 第一個Phonegap App
 預設測試用簽章
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 28

29. 第一個Phonegap App
 製作正式簽章
 工具 KeyStore Explorer
 http://www.lazgosoftware.com/kse/index.html
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 29

30. 第一個Phonegap App
 建立 JAVA KEY STORE
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 30

31. 第一個Phonegap App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 31

32. 第一個Phonegap App
 設定簽章資料
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 32

33. 第一個Phonegap App
 命名之後辨認的別名
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 33

34. 第一個Phonegap App
 儲存，請加上附檔名 .keystore
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 34

35. 第一個Phonegap App
 利用eclipse外掛指定製作的簽章製作APK
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 35

36. 第一個Phonegap App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 36

37. 第一個Phonegap App
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 37

38. 第一個Phonegap App
 測試用簽章有30天的有效期
 請勿使用測試簽章正式上架
 上架用途，請慎重製作正式簽章。
 日後版本更新升級，會檢核簽章是否一致。
 檢核是由Android 系統進行
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 38

39. Phonegap Build
 https://build.phonegap.com
 支援6大平台
 不需要MacOSX即可開發iOS APP
 iOS平台需要開發者簽章
 開發一次，同時完成6大手機平台APP。
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 39