Introduction to PhoneGap
Upcoming SlideShare
Loading in...5
×
 

Introduction to PhoneGap

on

  • 4,506 views

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

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

Statistics

Views

Total Views
4,506
Views on SlideShare
4,491
Embed Views
15

Actions

Likes
5
Downloads
221
Comments
0

1 Embed 15

http://www.pearltrees.com 15

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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?

Introduction to PhoneGap Presentation Transcript

  • 1. Introduction to PhoneGap Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
  • 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. Agenda  PhoneGap  PhoneGap Build  Debugging PhoneGap Apps© 2011 Adobe Systems Incorporated.
  • 4. What is PhoneGap?© 2011 Adobe Systems Incorporated.
  • 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. Why would you use PhoneGap?  Traditional mobile development looks like this: Platform Tools Language Objective-C© 2011 Adobe Systems Incorporated.
  • 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. Why would you use PhoneGap?  What if you want iOS, Android, Symbian, Windows, BlackBerry?© 2011 Adobe Systems Incorporated.
  • 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. PhoneGap supports 7 platforms© 2011 Adobe Systems Incorporated.
  • 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. Demo© 2011 Adobe Systems Incorporated.
  • 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. Built-in device APIs© 2011 Adobe Systems Incorporated.
  • 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. Building PhoneGap Apps© 2011 Adobe Systems Incorporated.
  • 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. 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. 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. 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. 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. 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. Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com© 2011 Adobe Systems Incorporated.
  • 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.