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

Like this? Share it with your network

Share

Introduction to PhoneGap

  • 4,611 views
Uploaded on

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,611
On Slideshare
4,596
From Embeds
15
Number of Embeds
1

Actions

Shares
Downloads
221
Comments
0
Likes
5

Embeds 15

http://www.pearltrees.com 15

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 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.