Your SlideShare is downloading. ×
Introduction to PhoneGap
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to PhoneGap


Published 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

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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:  Twitter: mcorlan  Email: 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):  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   Examples of 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 -  Android -  BlackBerry -  Windows Phone -  WebOS:  Symbian:© 2011 Adobe Systems Incorporated.
    • 21. Using PhoneGap Build  - 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:  Docs:  Wiki:  PhoneGap Build:  Plugins:  Support:  IRC: #phonegap  Apps:  Bugs:© 2011 Adobe Systems Incorporated.
    • 23. Thank You! Question & Answers Time!© 2011 Adobe Systems Incorporated.
    • 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.