2013 FJU CSIE WECO LAB

1. PhoneGap
跨平台任我玩，HTML5 無痛開發 App
輔仁大學 資工四乙 楊皇毅
資工四甲 葉名哲 WECO
LAB
13年8月27⽇日星期⼆二

2. Outline
·•Why Mobile App
·•Why PhoneGap
·•Myth
·•Pros
·•History
·•What is PhoneGap Build
·•DEMO
13年8月27⽇日星期⼆二

3. Why Mobile App?
13年8月27⽇日星期⼆二

4. Smartphone Addicts
Source: http://farm9.staticflickr.com/8525/8679232861_ef9d5c6ec9_b_d.jpg
13年8月27⽇日星期⼆二

5. Mobile is Growing
Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices-
growth.jpg
13年8月27⽇日星期⼆二

6. But...
13年8月27⽇日星期⼆二

7. Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices-
growth.jpg
Various Platforms
13年8月27⽇日星期⼆二

8. OS Language
Android Java
Windows Phone C#
iOS Object C
RIM Java
Native Development
13年8月27⽇日星期⼆二

9. Hybrid App is becoming popular
HTML5 is the solution
13年8月27⽇日星期⼆二

10. Mobile HTML5 Support
Source: http://mobilehtml5.org/
13年8月27⽇日星期⼆二

11. Mobile
Web
Na+ve
App Hybrid
App
Dev
Time Short
Long
Normal
Dev
Cost
Reasonable Expensive Reasonable
Portability
Yes No Yes
Performance
Fast Very
Fast Normal
Na+ve
Func+on
NO YES YES
Offline NO YES YES
User
Experience Normal
Best Normal
App
Store
Distribu+on
NO YES YES
Comparison
13年8月27⽇日星期⼆二

12. Why PhoneGap
·•Hybrid App
·•Free
·•Easy to Use
·•Open Source
·•Support Major Platforms
·•What is PhoneGap Build
13年8月27⽇日星期⼆二

13. Concepts in PhoneGap
13年8月27⽇日星期⼆二

14. API Support
13年8月27⽇日星期⼆二

15. Myth
·•Knowing web development means good App?
·•TRUE Easy and Painless development?
·•Bad performance comparing with native?
13年8月27⽇日星期⼆二

16. Myth
13年8月27⽇日星期⼆二

17. Myth
Source: http://www.mobilespect.com/wp-content/uploads/2012/01/android_market_versions_jan3-2012_b.png
Wide range of Screen Size, Versions
13年8月27⽇日星期⼆二

18. Myth
“Our Biggest Mistake Was Betting Too Much On HTML5”
source:http://www.socialpositives.com/wp-content/uploads/2012/12/org_4552057-3418413.jpg
13年8月27⽇日星期⼆二

19. But...
13年8月27⽇日星期⼆二

20. Myth
HTML5 isn’t the CAUSE for Facebook App being slow
13年8月27⽇日星期⼆二

21. Pros
debug
·•HTML5 App Platform
·•Browser without tool bar
·•Package HTML to App
·•Use JS API
·•Write once , run anywhere
13年8月27⽇日星期⼆二

22. Create App step
·•Create using HTML5
·•Package into PhoneGap
·•Deploy to device
13年8月27⽇日星期⼆二

23. About PhoneGap
·•Project begin in 2008
·•iPhoneDevCamp
·•Developed to get geolocation
·•Adobe Acquire PhoneGap team in 2011
and donated to Apache Foundation
13年8月27⽇日星期⼆二

24. About Apache Cordova
·•Cordova is a open source project
·•PhoneGap is the implement
·•Bond like Chrome and Webkit
13年8月27⽇日星期⼆二

25. What is PhoneGap Build
Take the pain out of developing mobile apps.
13年8月27⽇日星期⼆二

26. What is PhoneGap Build
·•We compile for you
·•Support multiple platforms
·•Work together
·•Quick deployment cycles
13年8月27⽇日星期⼆二

27. DEMO
13年8月27⽇日星期⼆二

28. Installation
·•Download pre-compiled package
·•easy , quick , for testing purpose
·•Use npm install the latest core file
·•official recommend , for real develop
13年8月27⽇日星期⼆二

29. Setup Environment
·•Download and Install NodeJS
·•Using npm to install phonegap
·•sudo npm install -g phonegap (MAC/LINUX)
·•npm install -g phonegap (WIN)
13年8月27⽇日星期⼆二

30. Create New Project
·•phonegap create AAA -n BBB.BBB.BBB -i CCC
AAA is directory to be generated for your project
BBB provides your project with a reverse domain-style identifier
CCC provides the application's display text
13年8月27⽇日星期⼆二

31. Create New Project
·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
13年8月27⽇日星期⼆二

32. Build the project
·•phonegap build android
·•phonegap build ios
generating platform-specific files within the project's platforms subdirectory
13年8月27⽇日星期⼆二

33. Run the project
·•phonegap run android
·•phonegap run ios
both the build and install operations in one line
13年8月27⽇日星期⼆二