making the mobile web native with phonegap
DESCRIPTION
Presented at SpringOne 2GX 2011TRANSCRIPT
![Page 1: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/1.jpg)
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Roy Clarkson and Keith Donald
SpringSource, a division of VMware, Inc.
Making the Mobile Web Native with PhoneGap
![Page 2: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/2.jpg)
2
Agenda
• Introduction• Support for Android and iOS• PhoneGap API & Plugins• PhoneGap Build• Remote Debugging• html5expense reference app walk-through• Q&A
![Page 3: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/3.jpg)
3
Introduction
![Page 4: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/4.jpg)
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?
![Page 5: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/5.jpg)
5
Native Development Environments
![Page 6: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/6.jpg)
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?
![Page 7: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/7.jpg)
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
![Page 8: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/8.jpg)
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.
![Page 9: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/9.jpg)
9 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Support for iOS and Android
![Page 10: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/10.jpg)
10
iOS Configuration
• Mac OS X• Xcode 4• iOS simulator• PhoneGap• Xcode project template
![Page 11: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/11.jpg)
11
Android Configuration
• Eclipse• Android SDK• ADT Plugin for Eclipse• PhoneGap
![Page 12: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/12.jpg)
12
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Phonegap API and plugins
![Page 13: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/13.jpg)
13
Phonegap Core Device APIs
• Accelerometer• Camera / Media Capture• Connection• Compass• Contacts• Events / Notifications• File• Geolocation• Storage
![Page 14: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/14.jpg)
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
![Page 15: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/15.jpg)
15
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Demo: Phonegap APIs
![Page 16: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/16.jpg)
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
![Page 17: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/17.jpg)
17
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Demo: Plugins
![Page 18: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/18.jpg)
18
PhoneGap Build
• Cross platform– iOS– Android– webOS– Symbian– BlackBerry
• No local setup required• Supports Git• https://build.phonegap.com/
![Page 19: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/19.jpg)
19
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Demo
Getting started with Phonegap Buildhttps://build.phonegap.comhttps://github.com/kdonald/hello-phonegap
![Page 20: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/20.jpg)
20
• 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/
Debugging
![Page 21: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/21.jpg)
21
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Demo
Remote debugging demo
![Page 22: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/22.jpg)
22
• 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
html5expense walkthrough
![Page 23: Making the Mobile Web Native with PhoneGap](https://reader033.vdocuments.mx/reader033/viewer/2022052823/5554df5ab4c905a16f8b53b4/html5/thumbnails/23.jpg)
23
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Q&A