Apache Cordova 開發環境建置 – 101-1學期 行動商務管理實務 第七週

1. Apache Cordova 開發環境建置

2. 開發環境
 安裝Eclipse
 http://www.eclipse.org/
 安裝Google Plugin for Eclipse
 https://developers.google.com/eclipse/?hl=zh-tw
 安裝 Google ADK
 Android SDK
 http://developer.android.com/sdk/index.html
 安裝ADT Plugin for Eclipse
 http://developer.android.com/sdk/installing/install
ing-adt.html
2012/11/2 2

3. How to develop
 Android SDK Manager
 SDK Manager.exe
2012/11/2 3

4. How to develop
 Android SDK Manager
 至少要選取 2.3.X
 下載 USB Driver
2012/11/2 4

5. How to develop
 AVD Manager
 設定模擬器
2012/11/2 5

6. How to develop
 新增Android Project
2012/11/2 6

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

8. How to develop
 Web based 開發測試
 DEMO
2012/11/2 8

9. How to develop
 實機測試
 真正運作環境
 真實感測器
 真實狀況
 真實網路
 真實設備
2012/11/2 9

10. How to develop
 USB Driver
 Path:
android-sdk-windowsextrasgoogleusb_driver
2012/11/2 10

11. How to develop
 啟用開發模式
2012/11/2 11

12. How to develop
 啟用開發模式
2012/11/2 12

13. How to develop
 啟用開發模式
 完成相關設定後，插入
USB連結線。
2012/11/2 13

14. How to develop
 DDMS (Dalvik Debug Monitor)
 Path:
android-sdk-windowstoolsddms.bat
2012/11/2 14

15. How to develop
 DDMS 功能
 抓圖
 除錯
 注意採用TCP PORT
 Local Port: 8600
 VM Port: 8700
2012/11/2 15

16. How to develop
 啟用除錯
2012/11/2 16

17. How to develop
 選擇測試裝置
2012/11/2 17

18. How to develop
 停止除錯
2012/11/2 18

19. Phonegap - Cordova
 Download
http://phonegap.com
 版本: 2.1.0
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 19

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

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

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

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

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

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

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

27. Phonegap – 設定Phonegap
 解開Phoengap
 到目錄下
phonegap-phonegap-2.1.0-0-g26d211bphonegap-
phonegap-26d211blibandroid
 複製 cordova-2.1.0.js 到 assets/www下
 複製 cordova-2.1.0.jar 到 libs下
2012.IM.mgt.ncu.edu.tw/ 文孝義 方毓賢 27

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

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

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

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

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

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

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

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

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

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

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

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