Your SlideShare is downloading. ×
0
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

4,284

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,284
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
247
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • You choose a platform like iOS for example and then you use the platform specific tools and languages like xCode and Objective-C in this case.
  • It is the only open source framework that supports 7 platforms AFAIK
  • 2010 CensusWikipediaUntapFacebook
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • We still have some time for questions. Anyone?
  • Transcript of "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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×