The document discusses PhoneGap, an open source framework that allows developers to build mobile apps using HTML, CSS, and JavaScript. It describes how PhoneGap works, the setup and configuration tools for Android, and how to build and debug PhoneGap apps. Developers can distribute PhoneGap apps to app stores after building native installers for each mobile platform using either each platform's native tools or the PhoneGap Build cloud service.

1. Development Mobile App PhoneGap
Nguyen Thai Hoang Phuong – Dai-ichi Life
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. Agenda
• Smartphone Market Share
• PhoneGap
• Setup and Configuration Tool
• PhoneGap Build
• Debugging PhoneGap Apps
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

4. Marketshare In 2012 With 40 Million Units Sold
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5. What is PhoneGap?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

6. • Traditional mobile development looks like this:
Platform Platform
Tools Language
Tools Language
Objective-C
Java
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

7. 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
• PhoneGap is the name of the Adobe’s Cordova
distrbution
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

8. Why would you use PhoneGap?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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, …)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

10. 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)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

11. Setup and Configuration Tool
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12. Setup Tool - Android
• Eclipse Classic
http://www.eclipse.org/downloads/
• Android SDK
http://developer.android.com/sdk/index.html
• PhoneGap
http://phonegap.com/download
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

13. Configure the ADT Plugin for Eclipse
• ADT plugin must be installed through the
Eclipse Install New Software wizard.
Start Eclipse.
These steps will guide you through the installation
of the ADT plugin.
http://developer.android.com/sdk/installing/instal
ling-adt.html
Restart Eclipse.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

14. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

15. Demo - Example
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

16. Add new contact
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

17. Add new contact
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

18. index.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

19. index.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

20. contact.js
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

21. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

22. Built-in device APIs
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

23. PhoneGap Plug-ins
• Examples of plugins:
https://github.com/purplecabbage/phonegap-
plugins
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

24. Demo - Example
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

25. Use Google Chart API
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

26. index.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

27. index.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

28. index.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

29. Building PhoneGap Apps
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

30. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

31. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

32. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

33. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

34. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

35. Resources(cont)
• Getting started with PhoneGap in Eclipse for
Android
• Getting started with PhoneGap in Xcode for iOS
• Develop Mobile Applications Using PhoneGap and
Kendo UI
• Creating Cross-Device Compatible Mobile
Applications that Integrate with SharePoint
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

36. Resource(cont)
Wrox.Beginning.PhoneGap
https://skydrive.live.com/redir?resid=86951F18
C2B21FFB!196&authkey=!AACYDJFxtXRv4Kc
PhoneGap Mobile Application Development
Cookbook
https://skydrive.live.com/redir?resid=86951F18
C2B21FFB!190&authkey=!AMoFJrzjyP8JfZo
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

37. Question & Answers Time!
Thank You!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.