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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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.