Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


  • Login to see the comments

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: 13年8月27⽇日星期⼆二
  5. 5. Mobile is Growing Source: growth.jpg 13年8月27⽇日星期⼆二
  6. 6. But... 13年8月27⽇日星期⼆二
  7. 7. Source: 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: 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: Wide range of Screen Size, Versions 13年8月27⽇日星期⼆二
  18. 18. Myth “Our Biggest Mistake Was Betting Too Much On HTML5” source: 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 ·•phonegap local plugin add ·•phonegap local plugin add 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⽇日星期⼆二