說明傳統app開發方法與phonegap開發之差異

1. Hybridapp
&Phonegap
陳柏伸

2. Outline
• Native app
• Hybrid app
• 開發環境設置
• 實作Build、deploy專案
• 結論

3. Native app
Objective-C / Swift
Java
C#
…
…
.

4. Hybrid app - Phonegap

5. Cordova and Phonegap?
• 如果你去看Phonegap官方網站，也許你會
有點混淆。
• http://phonegap.com/
• 到底是在開發Cordova還是Phonegap…
官方表示：

6. Phonegap iOS debugger
直接對UI除錯、直接對JS除錯，還能下中斷點。

7. •開發環境設置
• Phonegap官方- Overview
• Phonegap官方 - Command-Line Interface
• Phonegap官方 - Android Platform Guide
• develop-machine: win7
• Target: android

8. Install the Android SDK
下載之後，Unpack the ZIP file
(named adt-bundle-<os_platform>.zip)
至任意目錄。
開啟adt-bundle裡的eclipse，去
Android SDK Manager 下載你需要的
SDK和tools；安裝後可用模擬器或
實機測試按看是否成功。

9. 設置環境變數
• 為了讓 Cordova command-line tools幫你做編
譯專案、deploy到實體手機、在模擬器測試，
你必須要設置一些環境變數。
;{{任一目錄}}adt-bundlesdkplatform-tools;
;{{任一目錄}}adt-bundlesdktools;

10. 設置環境變數 (cont.)
• Ant – Java自動化編譯工具，在phonegap
workflow中它讓CLI(Command Line Interface)
可以成功運作。
• http://ant.apache.org/bindownload.cgi
• 下載 .zip archive，在任一目錄unpack之後，
去設定環境變數。
• 在cmd.exe(Terminal)中輸入 ant –v測試是否
安裝成功。
;{{任一目錄}}apache-ant-1.9.4bin;

11. •Installing the Cordova
CLI

12. Install node.js and npm
• 什麼是Node.js?
• 什麼是 npm ?
• http://nodejs.org/download/
• 安裝好node.js時，npm會一併被安裝。

13. Install git
• Git – 版本控制系統，即便你在開發
phonegap時不會用到git，但使用Cordova CLI
時它需要，所以還是要裝。
• http://git-scm.com/

14. Install Cordova
C:>npm install -g cordova

15. •Create the App
•& build or run ur app
•Using Command line

16. 為什麼用CLI
• CLI除了打指令方便快速之外，
• 它還支援api update
• 而且它是官方推薦
• 方便跨平台管理(分類出共用的code跟專屬
的code)

17. Create cordova專案
$ cordova create first com.roy.test firstPhonegap
$ cordova create
first: folder name
com.roy.test: package
firstPhonegap: app name

18. Add platform
加入跨平台，可以add各種OS。
$ cordova platform add “platform name”

19. Check current platform
$ cordova platform ls
可以顯示你的專案目前加入了那些平台，
下面則是我這台機器可以加入的平台，
因為不是mac所以沒有ios。

20. 刪除某一平台
• 你的專案決定放棄某一平台時，你可以
$ cordova platform remove blackberry10
$ cordova platform rm amazon-fireos
$ cordova platform rm android

21. 整合eclipse

22. 整合eclipse (cont.)

23. 整合eclipse (cont.)
即便你不懂java、android，
但你只需要專注在
www這個folder就可以開始
工作了，在phonegap你需
要的是js,html,css.

24. Build the project
$ cordova build
$ cordova build android

25. Test the App on an Emulator
$ cordova emulate android

26. 跑實機也是可以的
$ cordova run android

27. •實作

28. 熟悉的html

29. “cordova run android”

31. Conclusion
• 也就是說寫phonegap app基本上就是在寫
web。
• HTML5對於拍照、聲音、影片、衛星定位都
有支援；真的必須要用到native api時也可
以投過phonegap api去間接呼叫。
• Demo的作品可以直接build到ios上，這也就
是俗稱的跨平台app開發。
• 還是有缺點的。

32. • 謝謝聆聽
• 安裝有問題歡迎來信