Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
PhoneGap	 	 
跨平台任我玩,HTML5	 無痛開發	 App
輔仁大學	 資工四乙	 楊皇毅	 
	 	 	 	 	 	 	 	 	 	 	 	 	 資工四甲	 葉名哲 WECO
LAB
13年8月27⽇日星期⼆二
Outline
·•Why	 Mobile	 App
·•Why	 PhoneGap
·•Myth
·•Pros
·•History
·•What	 is	 PhoneGap	 Build
·•DEMO
13年8月27⽇日星期⼆二
Why	 Mobile	 App?
13年8月27⽇日星期⼆二
Smartphone	 Addicts
Source: http://farm9.staticflickr.com/8525/8679232861_ef9d5c6ec9_b_d.jpg
13年8月27⽇日星期⼆二
Mobile	 is	 Growing
Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices-
growth.jpg
...
But...
13年8月27⽇日星期⼆二
Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices-
growth.jpg
Various	 Platforms
1...
OS Language
Android Java
Windows	 Phone	  C#
iOS Object	 C
RIM Java
Native	 Development
13年8月27⽇日星期⼆二
Hybrid	 App	 is	 becoming	 popular
HTML5	 is	 the	 solution
13年8月27⽇日星期⼆二
Mobile	 HTML5	 Support	 
Source: http://mobilehtml5.org/
13年8月27⽇日星期⼆二
Mobile	
  Web	
   Na+ve	
  App Hybrid	
  App
Dev	
  Time Short	
   Long	
   Normal	
  
Dev	
  Cost	
   Reasonable Expensiv...
Why	 PhoneGap
·•Hybrid	 App
·•Free
·•Easy	 to	 Use
·•Open	 Source
·•Support	 Major	 Platforms
·•What	 is	 PhoneGap	 Build
...
Concepts	 in	 PhoneGap	 
13年8月27⽇日星期⼆二
API	 Support
13年8月27⽇日星期⼆二
Myth
·•Knowing	 web	 development	 means	 good	 App?	 
·•TRUE	 Easy	 and	 Painless	 development?
·•Bad	 performance	 compar...
Myth
13年8月27⽇日星期⼆二
Myth
Source: http://www.mobilespect.com/wp-content/uploads/2012/01/android_market_versions_jan3-2012_b.png
Wide range of S...
Myth
“Our	 Biggest	 Mistake	 Was	 Betting	 Too	 Much	 On	 HTML5”
source:http://www.socialpositives.com/wp-content/uploads/...
But...
13年8月27⽇日星期⼆二
Myth
HTML5	 isn’t	 the	 CAUSE	 for	 Facebook	 App	 being	 slow
13年8月27⽇日星期⼆二
Pros
debug
·•HTML5	 App	 Platform
·•Browser	 without	 tool	 bar
·•Package	 HTML	 to	 App	 
·•Use	 JS	 API
·•Write	 once	 ,...
Create	 App	 step
·•Create	 using	 HTML5
·•Package	 into	 PhoneGap	 
·•Deploy	 to	 device	 
13年8月27⽇日星期⼆二
About	 PhoneGap
·•Project	 begin	 in	 2008
·•iPhoneDevCamp
·•Developed	 to	 get	 geolocation
·•Adobe	 Acquire	 PhoneGap	 t...
About	 Apache	 Cordova
·•Cordova	 is	 a	 open	 source	 project
·•PhoneGap	 is	 the	 implement
·•Bond	 like	 Chrome	 and	 W...
What	 is	 PhoneGap	 Build
Take	 the	 pain	 out	 of	 developing	 mobile	 apps.
13年8月27⽇日星期⼆二
What	 is	 PhoneGap	 Build
·•We	 compile	 for	 you
·•Support	 multiple	 platforms
·•Work	 together
·•Quick	 deployment	 cyc...
DEMO
13年8月27⽇日星期⼆二
Installation
·•Download	 pre-compiled	 package
·•easy	 ,	 quick	 ,	 for	 testing	 purpose	 
·•Use	 npm	 install	 the	 late...
Setup	 Environment
·•Download	 and	 Install	 NodeJS
·•Using	 npm	 to	 install	 phonegap
·•sudo	 npm	 install	 -g	 phonegap...
Create	 New	 Project
·•phonegap	 create	 AAA	 -n	 BBB.BBB.BBB	 -i	 CCC
AAA	 is	 directory	 to	 be	 generated	 for	 your	 p...
Create	 New	 Project
·•phonegap	 local	 plugin	 add	 https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
·•p...
Build	 the	 project
·•phonegap	 build	 android
·•phonegap	 build	 ios
generating platform-specific files within the project'...
Run	 the	 project
·•phonegap	 run	 android
·•phonegap	 run	 ios
both the build and install operations in one line
13年8月27⽇...
Próxima SlideShare
Cargando en…5
×

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

2013 FJU CSIE WECO LAB

  • Sé el primero en comentar

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⽇日星期⼆二

×