Your SlideShare is downloading. ×
07 PhoneGap
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

07 PhoneGap


Published on

The keynote is parse of my Mobile Web Applications course. Full details on the course are available on: …

The keynote is parse of my Mobile Web Applications course. Full details on the course are available on:

Writing hybrid apps with phonegap can solve a lot of the problems with traditional mobile web apps. In this keynote I describe why hybrid is important, and how phonegap is used to create cross platform hybrid apps.

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Pack It Get your app ready for the App StoreTuesday, September 25, 12
  • 2. Agenda Hybrid Apps Introducing PhoneGap Using Native APIs Writing Custom PhoneGap ExtensionsTuesday, September 25, 12
  • 3. Mobile Web Is Broken No Push Notifications No Filesystem Access No Audio Recording No ContactsTuesday, September 25, 12
  • 4. Mobile Web Is Broken No Push Notifications No Filesystem Access No Audio Recording No ContactsTuesday, September 25, 12
  • 5. Mobile Web Is Broken No Push Notifications No Filesystem Access No Audio Recording No ContactsTuesday, September 25, 12
  • 6. Mobile Web Is Broken No Push Notifications No Filesystem Access No Audio Recording No ContactsTuesday, September 25, 12
  • 7. Mobile Web Is Broken No Push Notifications No Filesystem Access No Audio Recording No ContactsTuesday, September 25, 12
  • 8. Native Apps Are Broken Rewrite same UI code over and over again Solve the same bugs Maintainability nightmareTuesday, September 25, 12
  • 9. Hybrid Apps A native app with an embedded web view Runs mobile web code “in the box” Runs native code “in the frame”Tuesday, September 25, 12
  • 10. Hybrid Apps Mobile HTML Native WrapperTuesday, September 25, 12
  • 11. Hybrid Apps + Most of the app is written once in HTML/JS Native parts are written in platform specific code (Objective C, Java, etc.) Works like a native app - can send to app store Developer controls native code - can use native APIsTuesday, September 25, 12
  • 12. Hybrid Apps - Complex Code Requires many programming languages and data transfer between them Hard to debugTuesday, September 25, 12
  • 13. Introducing PhoneGap Open Source “connecting” solution from mobile web to native Exports native APIs to JS code using plugins Also has an online beta build systemTuesday, September 25, 12
  • 14. Selected Apps Runners Ally Taxi Madrid Binary Clock HAL 9000 Tank Inside Trader Radios RoadtripperTuesday, September 25, 12
  • 15. PhoneGap DemoTuesday, September 25, 12
  • 16. PhoneGap Native Build Install the SDK (Android or iPhone) Install PhoneGap lib Compile & GoTuesday, September 25, 12
  • 17. Using The Build Server Have a web app prepare a config.xml file Have an app icon image (png) Register for the beta at:, September 25, 12
  • 18. Directory Structure assets dir holds all the assets/ files that are accessible www/ from the html index.html config.xml It acts as the root of icon.png the web page css/ js/ Can use a komodo img/ templateTuesday, September 25, 12
  • 19. Config.xml An xml file with all metadata on your app Used by PhoneGap’s build servers Optional but highly recommended Full spec: config-xmlTuesday, September 25, 12
  • 20. Config.xml Elements Widget xml root element <?xml version="1.0" encoding="UTF-8"?> <widget xmlns! ! = "" ! xmlns:gap! = "" ! id! ! = "com.phonegap.getting.started" ! version ! "1.0.0"> = App Name & Description ! <name>PhoneGap: Getting Started</name> ! <description> ! ! A template for getting started with PhoneGap development and ! </description> <icon src=”images/icon.png” /> App Icon ! <gap:platforms> ! ! <gap:platform name="android" minVersion="2.1" /> ! ! <gap:platform name="webos" /> Platforms for the Build Server ! ! <gap:platform name="symbian.wrt" /> ! ! <gap:platform name="blackberry" project="widgets"/> ! </gap:platforms> ! <icon src="icon.png" gap:role="default" /> ! <feature name=""/> ! <feature name=""/> Features (for permissions) ! <!-- sample preference specification --> ! <!-- <preference name="autorotate" value="false" readonly="true"/> --> </widget>Tuesday, September 25, 12
  • 21. Manual Build Can also install locally as an addon to eclipse or xcode When used locally, no need for config.xml Can integrate with private native code Some features are still missing from build server Requires native toolchainTuesday, September 25, 12
  • 22. Installing Android SDK Full SDK installation instructions: When all is ready, start a new project and follow PhoneGap step-by-step instructions at: master/Android/README.mdTuesday, September 25, 12
  • 23. Q&ATuesday, September 25, 12
  • 24. PhoneGap API JavaScript interfaces to native device features All required objects are inserted to the window by phonegap.js No need for native codeTuesday, September 25, 12
  • 25. PhoneGap’s APIs Accelerometer Events Compass Media Device Capture Geolocation Contacts Storage File Camera Notification ConnectionTuesday, September 25, 12
  • 26. PhoneGap’s APIs Accelerometer Events Compass Media Device Capture Geolocation Contacts Storage File Camera Notification ConnectionTuesday, September 25, 12
  • 27. Device Information var name = var phonegap_version = device.phonegap var os_name = device.platform var os_version = device.version var uuid = device.uuid Demo: examples/phonegap/DeviceInfoTuesday, September 25, 12
  • 28. NotificationsTuesday, September 25, 12
  • 29. Notifications navigator.notification.alert(‘foo’); navigator.notification.confirm(‘are you sure ?’, yesCallback, [title], [labels]); navigator.notification.beep(times); navigator.notification.vibrate(ms);Tuesday, September 25, 12
  • 30. Notifications iPhone ignores vibrate times PhoneGap implements beeping on the iPhone by playing an audio file. Developer must provide the audio file named beep.wav and placed in the www/ root folderTuesday, September 25, 12
  • 31. Exercise Use PhoneGap to write a native application that shows current device details in a jQM style form Add vibrate and beep buttonsTuesday, September 25, 12
  • 32. Contacts Access An API for reading & writing Contacts information contacts.create to add a new contact contact.find to fetch a contact’s informationTuesday, September 25, 12
  • 33. Contact Methods Preferred var contact = navigator.contacts.create( opts ); // Example: var numbers = []; numbers[0] = new ContactField(mobile, 052-1121321, true); var friend ={ displayName : Some User, phoneNumbers : numbers });Tuesday, September 25, 12
  • 34. Contact Methods function findAllContacts(success, error) { var fields = [displayName]; navigator.contacts.find(fields, success, error); } An array of success error field names callback callbackTuesday, September 25, 12
  • 35. Contact Object id ims (ContactField[]) displayName organizations (ContactOrganizations[]) name (ContactName) birthday (Date) nickname note (String) phoneNumbers (ContactField[]) photos (ContactField[]) emails (ContactField[]) categories (ContactField[]) addresses array urls (ContactField[])Tuesday, September 25, 12
  • 36. Contact Methods Contact.remove() Contact.clone()Tuesday, September 25, 12
  • 37. Address Book Example Show full contact list Exercise: write contact info pageTuesday, September 25, 12
  • 38. Adding Contacts Create a contact with contacts.create Modify the contact’s properties Save it to the device’s address book using contact.saveTuesday, September 25, 12
  • 39. Q&A Device Notification Contacts Accelerometer Events CameraTuesday, September 25, 12
  • 40. Accelerometer Mobile Movement DetectionTuesday, September 25, 12
  • 41. Accelerometer Most mobile devices have accelerometers that detect device motion An accelerometer reports device position using x,y,z coordinate vector Need to register for accelerometer eventsTuesday, September 25, 12
  • 42. Accelerometer Register for Notifications Handle accelerometer changes Unregister when doneTuesday, September 25, 12
  • 43. Accelerometer API watchAccelerometer(success, error, options) clearWatch(watchId) API Doc:, September 25, 12
  • 44. Demo examples/phonegap/ BouncersTuesday, September 25, 12
  • 45. Accelerometer Takeaways accelerometer measures acceleration. That is measured in m/ s2 Imagine a ball inside your phone. Now measure that ball’s acceleration when the phone movesTuesday, September 25, 12
  • 46. Exercise Use accelerometer API to write a “shake” detector App should display a red box in the center When user shakes the phone, box changes color to blue Bonus: Have the box shade correspond to the shaking power (stronger shake means darker color)Tuesday, September 25, 12
  • 47. Q&ATuesday, September 25, 12
  • 48. PhoneGap Events PhoneGap triggers events when things happen on the device We already know the “deviceready” event Handling events is performed using event listeners in the DOM Events are triggered on the document objectTuesday, September 25, 12
  • 49. PhoneGap Events Write a handler function Bind an Event Handler using: document.addEventListener(‘eventname’, handler, false); Can also bind using jQueryTuesday, September 25, 12
  • 50. PhoneGap Events backbutton online deviceready offline menubutton pause resume searchbuttonTuesday, September 25, 12
  • 51. BackButton Event Android devices have a back button Default behavior - go back one page. Tapping back on the first page leaves the app Implement event to overrideTuesday, September 25, 12
  • 52. Menu Button Menus are not enabled in phonegap by default Users expect menu button to show them extra options. This can now be performed A footer with buttons or any other menu layout will work here Still cannot use platform menusTuesday, September 25, 12
  • 53. Pause/Resume Events Android & iOS platforms can send an app to the background if something more important happens No JS will run after a pause. This is your last chance to save data or report back to server App will resume on a ‘resume’ eventTuesday, September 25, 12
  • 54. online/offline events When device gets connected to the internet, phonegap sends an online event When device gets disconnected, phonegap sends an offline event Use these to control behavior of network related appsTuesday, September 25, 12
  • 55. CAMERA API TAKE AND SHARE PHOTOSTuesday, September 25, 12
  • 56. Camera API Takes a picture using the device camera Can also request for a saved image (from photo gallery) iPhone: use built in photo edit dialog for croppingTuesday, September 25, 12
  • 57. Camera API options = { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 100, targetHeight : 100 };, error, options);Tuesday, September 25, 12
  • 58. Camera API Quality is ranged 0..100 Destination type selects between DATA_URL and FILE_URI PictureSourceType selects between PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUMTuesday, September 25, 12
  • 59. Use The Image - Data function onSuccess(imageData) { var img = document.querySelector(‘#img’); img.src = “data:image/jpeg;base64,” + imageData } function onFail(msg) { alert(‘fail because: ‘ + msg); }Tuesday, September 25, 12
  • 60. Use The Image - File function onSuccess(imageURI) { var img = document.querySelector(‘#img’); img.src = imageURI; } function onFail(msg) { alert(‘fail because: ‘ + msg); }Tuesday, September 25, 12
  • 61. Camera Tips Use FILE_URI destination type to save on device memory Use DATA_URL to post the data remotelyTuesday, September 25, 12
  • 62. Camera API - Missing Check if device actually has a camera (consider iPod touch/iPads) Use image overlayTuesday, September 25, 12
  • 63. Exercise Write a connection indicator app App has a big circle in the middle Circle color is red when offline, and green when online Tapping the circle when it’s green takes a picture, and use it as a background image. Tapping the circle when it’s red takes a picture from the gallery and use it as a background imageTuesday, September 25, 12
  • 64. PhoneGap Plugins Each API we examined is just native code “connected” to JS, and bridged by PhoneGap Extending PhoneGap is easy by writing dedicated plugins in native Java or Objective C code A plugin can perform any native taskTuesday, September 25, 12
  • 65. Q&ATuesday, September 25, 12
  • 66. Thank You Ynon Perek ynonperek.comTuesday, September 25, 12