Making the Mobile Web Native with PhoneGapRoy Clarkson and Keith DonaldSpringSource, a division of VMware, Inc.© 2011 Spri...
Agenda•   Introduction•   Support for Android and iOS•   PhoneGap API & Plugins•   PhoneGap Build•   Remote Debugging•   h...
Introduction3
What problem are we trying to solve?• Each device has a different native development SDK and  associated programming langu...
Native Development Environments5
What is the solution?• Build your application using web standards like HTML5,  CSS3, and JavaScript.• But what about acces...
What is PhoneGap?“PhoneGap is an HTML5 app platform that allows you toauthor native applications with web technologies and...
PhoneGap and Nitobi in the News• In October 2011, Adobe acquired Nitobi enabling the team  to focus solely on the PhoneGap...
Support for iOS and Android9   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
iOS Configuration•    Mac OS X•    Xcode 4•    iOS simulator•    PhoneGap•    Xcode project template10
Android Configuration•    Eclipse•    Android SDK•    ADT Plugin for Eclipse•    PhoneGap11
Phonegap API and plugins12   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Phonegap Core Device APIs•    Accelerometer•    Camera / Media Capture•    Connection•    Compass•    Contacts•    Events ...
Phonegap Core Device APIs (2)• API Documentation     – http://docs.phonegap.com/en/1.1.0/• Source Code     – Android: http...
Demo: Phonegap APIs15   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Phonegap Plugins• Moving toward “everything is a plugin” model• Core “plugins” included by default• New plugins can be add...
Demo: Plugins17   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
PhoneGap Build• Cross platform     –   iOS     –   Android     –   webOS     –   Symbian     –   BlackBerry• No local setu...
Demo     Getting started with Phonegap Build     https://build.phonegap.com     https://github.com/kdonald/hello-phonegap1...
Debugging• Weinre     – Debugger for web pages     – Designed to work remotely     – Debug web pages on a phone• Availabil...
Demo     Remote debugging demo21   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
html5expense walkthrough•    Phonegap 1.1.0•    jquery Mobile•    Camera API•    “Stopgap” for portability•    PhoneGap bu...
Q&A23   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Upcoming SlideShare
Loading in...5
×

Making the Mobile Web Native with PhoneGap

1,036

Published on

Presented at SpringOne 2GX 2011

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,036
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Making the Mobile Web Native with PhoneGap"

  1. 1. Making the Mobile Web Native with PhoneGapRoy Clarkson and Keith DonaldSpringSource, a division of VMware, Inc.© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  2. 2. Agenda• Introduction• Support for Android and iOS• PhoneGap API & Plugins• PhoneGap Build• Remote Debugging• html5expense reference app walk-through• Q&A2
  3. 3. Introduction3
  4. 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. 5. Native Development Environments5
  6. 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. 7. What is PhoneGap?“PhoneGap is an HTML5 app platform that allows you toauthor native applications with web technologies and getaccess to APIs and app stores. PhoneGap leverages webtechnologies developers already know best... HTML andJavaScript.” - phonegap.com7
  8. 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. 9. Support for iOS and Android9 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  10. 10. iOS Configuration• Mac OS X• Xcode 4• iOS simulator• PhoneGap• Xcode project template10
  11. 11. Android Configuration• Eclipse• Android SDK• ADT Plugin for Eclipse• PhoneGap11
  12. 12. Phonegap API and plugins12 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  13. 13. Phonegap Core Device APIs• Accelerometer• Camera / Media Capture• Connection• Compass• Contacts• Events / Notifications• File• Geolocation• Storage13
  14. 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-ios14
  15. 15. Demo: Phonegap APIs15 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  16. 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-plugins16
  17. 17. Demo: Plugins17 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  18. 18. PhoneGap Build• Cross platform – iOS – Android – webOS – Symbian – BlackBerry• No local setup required• Supports Git• https://build.phonegap.com/18
  19. 19. Demo Getting started with Phonegap Build https://build.phonegap.com https://github.com/kdonald/hello-phonegap19 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  20. 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. 21. Demo Remote debugging demo21 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  22. 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 capability22
  23. 23. Q&A23 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×