Presented at SpringOne 2GX 2011

1. Making the Mobile Web Native with PhoneGap
Roy Clarkson and Keith Donald
SpringSource, a division of VMware, Inc.
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

2. Agenda
• Introduction
• Support for Android and iOS
• PhoneGap API & Plugins
• PhoneGap Build
• Remote Debugging
• html5expense reference app walk-through
• Q&A
2

3. Introduction
3

4. What problem are we trying to solve?
• Each device has a different native development SDK and
associated programming language
• For a variety of reasons, it may not be feasible to build
and maintain multiple native apps
• How can we reach all these different devices and app
stores?
4

5. Native Development Environments
5

6. What is the solution?
• Build your application using web standards like HTML5,
CSS3, and JavaScript.
• But what about accessing other features of the device,
such as the camera or contacts list?
6

7. What is PhoneGap?
“PhoneGap is an HTML5 app platform that allows you to
author native applications with web technologies and get
access to APIs and app stores. PhoneGap leverages web
technologies developers already know best... HTML and
JavaScript.” - phonegap.com
7

8. PhoneGap and Nitobi in the News
• In October 2011, Adobe acquired Nitobi enabling the team
to focus solely on the PhoneGap project and continue its
work on efficient expressive design and development
across devices.
• The PhoneGap code was contributed to the Apache
Software Foundation (ASF) under the name Apache
Callback in October 2011. It is currently under incubation
until it can become a full Apache project.
8

9. Support for iOS and Android
9 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

10. iOS Configuration
• Mac OS X
• Xcode 4
• iOS simulator
• PhoneGap
• Xcode project template
10

11. Android Configuration
• Eclipse
• Android SDK
• ADT Plugin for Eclipse
• PhoneGap
11

12. Phonegap API and plugins
12 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

13. Phonegap Core Device APIs
• Accelerometer
• Camera / Media Capture
• Connection
• Compass
• Contacts
• Events / Notifications
• File
• Geolocation
• Storage
13

14. Phonegap Core Device APIs (2)
• API Documentation
– http://docs.phonegap.com/en/1.1.0/
• Source Code
– Android: https://github.com/callback/callback-android
– IOS: https://github.com/callback/callback-ios
14

15. Demo: Phonegap APIs
15 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

16. Phonegap Plugins
• Moving toward “everything is a plugin” model
• Core “plugins” included by default
• New plugins can be added / developed in a consistent
way
– JavaScripts
– Native bridging for each platform e.g .java
• Source Code
– https://github.com/phonegap/phonegap-plugins
16

17. Demo: Plugins
17 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

18. PhoneGap Build
• Cross platform
– iOS
– Android
– webOS
– Symbian
– BlackBerry
• No local setup required
• Supports Git
• https://build.phonegap.com/
18

19. Demo
Getting started with Phonegap Build
https://build.phonegap.com
https://github.com/kdonald/hello-phonegap
19 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

20. Debugging
• Weinre
– Debugger for web pages
– Designed to work remotely
– Debug web pages on a phone
• Availability
– http://debug.phonegap.com/
– http://phonegap.github.com/weinre/
20

21. Demo
Remote debugging demo
21 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

22. html5expense walkthrough
• Phonegap 1.1.0
• jquery Mobile
• Camera API
• “Stopgap” for portability
• PhoneGap build for native builds
– Also created native projects so we can do local builds
• Weinre for remote debugging
• “Hydra” for dynamic update capability
22

23. Q&A
23 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.