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.
Introduction to PhoneGap     Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
About Me  Mihai Corlan      Adobe Web Developer Evangelist      Blog: http://corlan.org      Twitter: mcorlan      Ema...
Agenda      PhoneGap      PhoneGap Build      Debugging PhoneGap Apps© 2011 Adobe Systems Incorporated.
What is PhoneGap?© 2011 Adobe Systems Incorporated.
PhoneGap - Cordova      Is an open source platform for building native mobile applications using       standard web techn...
Why would you use PhoneGap?      Traditional mobile development looks like this:                                         ...
Why would you use PhoneGap?      Traditional mobile development looks like this:                                     Plat...
Why would you use PhoneGap?      What if you want iOS, Android, Symbian, Windows, BlackBerry?© 2011 Adobe Systems Incorpo...
Why would you use PhoneGap?      PhoneGap allows you to use “write once, run everywhere” paradigm      Web standards bas...
PhoneGap supports 7 platforms© 2011 Adobe Systems Incorporated.
PhoneGap could be your best friend                  if      You want to target multiple mobile platforms      You know H...
Demo© 2011 Adobe Systems Incorporated.
How does PhoneGap work?                       PhoneGap App                         Mobile Device      PhoneGap            ...
Built-in device APIs© 2011 Adobe Systems Incorporated.
PhoneGap Plug-ins      http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins      Examples of plugins: https://git...
Building PhoneGap Apps© 2011 Adobe Systems Incorporated.
Build your PhoneGap app as you’d build a regular web app      Using your favorite editors (Eclipse, vim, Dreamweaver)   ...
What can you use to build your application?      Remember your application will run on the device’s browser      You can...
Creating the native installers  There are 2 different methods to build the native installers for your  PhoneGap app:     ...
Using platform native tool chain      Use the OS and tools each platform recommends:           iOS - http://phonegap.com...
Using PhoneGap Build      http://build.phonegap.com - a cloud service      Supports: iOS, Android, BlackBerry, WebOS, Wi...
Resources      Source: github.com/callback      Docs: docs.phonegap.com      Wiki: wiki.phonegap.com      PhoneGap Bui...
Thank You!                                     Question & Answers Time!                 http://corlan.org                 ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in …5
×

Introduction to PhoneGap

5,322 views

Published on

Introduction to PhoneGap - an open source and cross platform solution for building mobile applications using web standards

Published in: Technology
  • Be the first to comment

Introduction to PhoneGap

  1. 1. Introduction to PhoneGap Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
  2. 2. About Me Mihai Corlan  Adobe Web Developer Evangelist  Blog: http://corlan.org  Twitter: mcorlan  Email: mcorlan@adobe.com 2© 2011 Adobe Systems Incorporated.
  3. 3. Agenda  PhoneGap  PhoneGap Build  Debugging PhoneGap Apps© 2011 Adobe Systems Incorporated.
  4. 4. What is PhoneGap?© 2011 Adobe Systems Incorporated.
  5. 5. PhoneGap - Cordova  Is an open source platform for building native mobile applications using standard web technologies (HTML/CSS/JavaScript)  Apache Cordova is the name of the open source project (it is in incubator for now): http://incubator.apache.org/cordova/  PhoneGap is the name of the Adobe’s Cordova distrbution© 2011 Adobe Systems Incorporated.
  6. 6. Why would you use PhoneGap?  Traditional mobile development looks like this: Platform Tools Language Objective-C© 2011 Adobe Systems Incorporated.
  7. 7. Why would you use PhoneGap?  Traditional mobile development looks like this: Platform Platform Tools Language Tools Language Objective-C Java© 2011 Adobe Systems Incorporated.
  8. 8. Why would you use PhoneGap?  What if you want iOS, Android, Symbian, Windows, BlackBerry?© 2011 Adobe Systems Incorporated.
  9. 9. Why would you use PhoneGap?  PhoneGap allows you to use “write once, run everywhere” paradigm  Web standards based & Open Source  You get native installers for each platform ready to be distributed through application stores (App Store, Android Market, …)© 2011 Adobe Systems Incorporated.
  10. 10. PhoneGap supports 7 platforms© 2011 Adobe Systems Incorporated.
  11. 11. PhoneGap could be your best friend if  You want to target multiple mobile platforms  You know HTML/JavaScript/CSS  You already have a web site/web application. Thus you can reuse parts of this (see Wikipedia)© 2011 Adobe Systems Incorporated.
  12. 12. Demo© 2011 Adobe Systems Incorporated.
  13. 13. How does PhoneGap work? PhoneGap App Mobile Device PhoneGap PhoneGap JavaScript Native Engine Engine Access to native mobile Your Code features HTML/JavaScript/CSS/Images/ Frameworks/Libraries Web View Renders the app UI© 2011 Adobe Systems Incorporated.
  14. 14. Built-in device APIs© 2011 Adobe Systems Incorporated.
  15. 15. PhoneGap Plug-ins  http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins  Examples of plugins: https://github.com/purplecabbage/phonegap-plugins  Extend the built-in functionality with custom plug-ins  Delegate heavyweight data processing to native code  Create background services© 2011 Adobe Systems Incorporated.
  16. 16. Building PhoneGap Apps© 2011 Adobe Systems Incorporated.
  17. 17. Build your PhoneGap app as you’d build a regular web app  Using your favorite editors (Eclipse, vim, Dreamweaver)  Test and debug the app using your desktop browser  Test and debug the app using mobile simulators/emulators and the physical devices© 2011 Adobe Systems Incorporated.
  18. 18. What can you use to build your application?  Remember your application will run on the device’s browser  You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on  Pay attention to performance (mobile vs. desktop)  Pay attention to mobile browser features or lack of them (I am talking about SVG)© 2011 Adobe Systems Incorporated.
  19. 19. Creating the native installers There are 2 different methods to build the native installers for your PhoneGap app:  Using the target platform tool chain  Using PhoneGap Build – a cloud service© 2011 Adobe Systems Incorporated.
  20. 20. Using platform native tool chain  Use the OS and tools each platform recommends:  iOS - http://phonegap.com/start#ios-x4  Android - http://phonegap.com/start#android  BlackBerry - http://phonegap.com/start#blackberry  Windows Phone - http://phonegap.com/start#wp  WebOS: http://phonegap.com/start#webos  Symbian: http://phonegap.com/start#symbian© 2011 Adobe Systems Incorporated.
  21. 21. Using PhoneGap Build  http://build.phonegap.com - a cloud service  Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian  Supports one plugin (ChildBrowser); but you can hack in support for other plugins  It is in beta and it is free; it will always be free for Open Source projects  You upload your files (index.html, CSS, JS, images)  Or you provide a Git / SVN link  Support for debugging© 2011 Adobe Systems Incorporated.
  22. 22. Resources  Source: github.com/callback  Docs: docs.phonegap.com  Wiki: wiki.phonegap.com  PhoneGap Build: build.phonegap.com  Plugins: github.com/purplecabbage/phonegap-plugins  Support: groups.google.com/group/phonegap  IRC: irc.freenode.net #phonegap  Apps: phonegap.com/apps  Bugs: issues.apache.org/jira/browse/CB© 2011 Adobe Systems Incorporated.
  23. 23. Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com© 2011 Adobe Systems Incorporated.
  24. 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×