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

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.