2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App

650 views
578 views

Published on

2013 FJU CSIE WECO LAB

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
650
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App

  1. 1. PhoneGap 跨平台任我玩,HTML5 無痛開發 App 輔仁大學 資工四乙 楊皇毅 資工四甲 葉名哲 WECO LAB 13年8月27⽇日星期⼆二
  2. 2. Outline ·•Why Mobile App ·•Why PhoneGap ·•Myth ·•Pros ·•History ·•What is PhoneGap Build ·•DEMO 13年8月27⽇日星期⼆二
  3. 3. Why Mobile App? 13年8月27⽇日星期⼆二
  4. 4. Smartphone Addicts Source: http://farm9.staticflickr.com/8525/8679232861_ef9d5c6ec9_b_d.jpg 13年8月27⽇日星期⼆二
  5. 5. Mobile is Growing Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices- growth.jpg 13年8月27⽇日星期⼆二
  6. 6. But... 13年8月27⽇日星期⼆二
  7. 7. Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices- growth.jpg Various Platforms 13年8月27⽇日星期⼆二
  8. 8. OS Language Android Java Windows Phone C# iOS Object C RIM Java Native Development 13年8月27⽇日星期⼆二
  9. 9. Hybrid App is becoming popular HTML5 is the solution 13年8月27⽇日星期⼆二
  10. 10. Mobile HTML5 Support Source: http://mobilehtml5.org/ 13年8月27⽇日星期⼆二
  11. 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. 12. Why PhoneGap ·•Hybrid App ·•Free ·•Easy to Use ·•Open Source ·•Support Major Platforms ·•What is PhoneGap Build 13年8月27⽇日星期⼆二
  13. 13. Concepts in PhoneGap 13年8月27⽇日星期⼆二
  14. 14. API Support 13年8月27⽇日星期⼆二
  15. 15. Myth ·•Knowing web development means good App? ·•TRUE Easy and Painless development? ·•Bad performance comparing with native? 13年8月27⽇日星期⼆二
  16. 16. Myth 13年8月27⽇日星期⼆二
  17. 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. 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. 19. But... 13年8月27⽇日星期⼆二
  20. 20. Myth HTML5 isn’t the CAUSE for Facebook App being slow 13年8月27⽇日星期⼆二
  21. 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. 22. Create App step ·•Create using HTML5 ·•Package into PhoneGap ·•Deploy to device 13年8月27⽇日星期⼆二
  23. 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. 24. About Apache Cordova ·•Cordova is a open source project ·•PhoneGap is the implement ·•Bond like Chrome and Webkit 13年8月27⽇日星期⼆二
  25. 25. What is PhoneGap Build Take the pain out of developing mobile apps. 13年8月27⽇日星期⼆二
  26. 26. What is PhoneGap Build ·•We compile for you ·•Support multiple platforms ·•Work together ·•Quick deployment cycles 13年8月27⽇日星期⼆二
  27. 27. DEMO 13年8月27⽇日星期⼆二
  28. 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. 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. 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. 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. 32. Build the project ·•phonegap build android ·•phonegap build ios generating platform-specific files within the project's platforms subdirectory 13年8月27⽇日星期⼆二
  33. 33. Run the project ·•phonegap run android ·•phonegap run ios both the build and install operations in one line 13年8月27⽇日星期⼆二

×