PhoneGap

82fe3950bdbb0b1048e870fa04c89cfd?s=47 ynonperek
November 28, 2011

 PhoneGap

82fe3950bdbb0b1048e870fa04c89cfd?s=128

ynonperek

November 28, 2011
Tweet

Transcript

  1. Pack It Get your app ready for the App Store

    Sunday, October 9, 2011
  2. Agenda Hybrid Apps Introducing PhoneGap Using Native APIs Writing Custom

    PhoneGap Extensions Sunday, October 9, 2011
  3. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  4. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  5. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  6. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  7. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  8. Mobile Web Is Broken No Camera No Push Notifications No

    Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011
  9. Native Apps Are Broken Rewrite same UI code over and

    over again Solve the same bugs Maintainability nightmare Sunday, October 9, 2011
  10. Hybrid Apps A native app with an embedded web view

    Runs mobile web code “in the box” Runs native code “in the frame” Sunday, October 9, 2011
  11. Hybrid Apps Mobile HTML Native Wrapper Sunday, October 9, 2011

  12. 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 APIs Sunday, October 9, 2011
  13. Hybrid Apps - Complex Code Requires many programming languages and

    data transfer between them Hard to debug Sunday, October 9, 2011
  14. 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 system Sunday, October 9, 2011
  15. Selected Apps Runners Ally Taxi Madrid Binary Clock HAL 9000

    Tank Inside Trader Radios Roadtripper Sunday, October 9, 2011
  16. PhoneGap Demo Sunday, October 9, 2011

  17. PhoneGap Native Build Install the SDK (Android or iPhone) Install

    PhoneGap lib Compile & Go Sunday, October 9, 2011
  18. Using The Build Server Have a web app prepare a

    config.xml file Have an app icon image (png) Register for the beta at: https://build.phonegap.com/start Sunday, October 9, 2011
  19. Directory Structure / index.html config.xml icon.png assets/ css/ js/ img/

    assets dir holds all the files that are accessible from the html It acts as the root of the web page Can use a komodo template Sunday, October 9, 2011
  20. Config.xml An xml file with all metadata on your app

    Used by PhoneGap’s build servers Optional but highly recommended Full spec: https://build.phonegap.com/docs/ config-xml Sunday, October 9, 2011
  21. Config.xml Elements <?xml version="1.0" encoding="UTF-8"?> <widget xmlns! ! = "http://www.w3.org/ns/widgets"

    ! xmlns:gap! = "http://phonegap.com/ns/1.0" ! id! ! = "com.phonegap.getting.started" ! version ! = "1.0.0"> ! <name>PhoneGap: Getting Started</name> ! <description> ! ! A template for getting started with PhoneGap development and build.phonegap.com ! </description> <icon src=”images/icon.png” /> ! <gap:platforms> ! ! <gap:platform name="android" minVersion="2.1" /> ! ! <gap:platform name="webos" /> ! ! <gap:platform name="symbian.wrt" /> ! ! <gap:platform name="blackberry" project="widgets"/> ! </gap:platforms> ! <icon src="icon.png" gap:role="default" /> ! <feature name="http://api.phonegap.com/1.0/geolocation"/> ! <feature name="http://api.phonegap.com/1.0/network"/> ! <!-- sample preference specification --> ! <!-- <preference name="autorotate" value="false" readonly="true"/> --> </widget> Widget xml root element App Name & Description Platforms for the Build Server Features (for permissions) App Icon Sunday, October 9, 2011
  22. 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 toolchain Sunday, October 9, 2011
  23. Installing Android SDK Full SDK installation instructions: http://developer.android.com/sdk/installing.html When all

    is ready, start a new project and follow PhoneGap step-by-step instructions at: https://github.com/phonegap/phonegap/blob/ master/Android/README.md Sunday, October 9, 2011
  24. Q & A Phonegap Installation & Configuration Sunday, October 9,

    2011
  25. PhoneGap API JavaScript interfaces to native device features All required

    objects are inserted to the window by phonegap.js No need for native code Sunday, October 9, 2011
  26. PhoneGap’s APIs Accelerometer Compass Device Geolocation Storage Camera Connection Events

    Media Capture Contacts File Notification Sunday, October 9, 2011
  27. PhoneGap’s APIs Accelerometer Compass Device Geolocation Storage Camera Connection Events

    Media Capture Contacts File Notification Sunday, October 9, 2011
  28. Device Information var name = device.name var phonegap_version = device.phonegap

    var os_name = device.platform var os_version = device.version var uuid = device.uuid Demo: examples/phonegap/DeviceInfo Sunday, October 9, 2011
  29. Notifications navigator.notification.alert(‘foo’); navigator.notification.confirm(‘are you sure ?’, yesCallback, [title], [labels]); navigator.notification.beep(times);

    navigator.notification.vibrate(ms); Sunday, October 9, 2011
  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 folder Sunday, October 9, 2011
  31. Exercise Use PhoneGap to write a native application that shows

    current device details in a jQM style form Add vibrate and beep buttons Sunday, October 9, 2011
  32. Contacts Access An API for reading & writing Contacts information

    contacts.create to add a new contact contact.find to fetch a contact’s information Sunday, October 9, 2011
  33. Contact Object id displayName name (ContactName) nickname phoneNumbers (ContactField[]) emails

    (ContactField[]) addresses array ims (ContactField[]) organizations (ContactOrganizations[]) birthday (Date) note (String) photos (ContactField[]) categories (ContactField[]) urls (ContactField[]) Sunday, October 9, 2011
  34. Contacts Object Not all properties are supported on all device

    platforms and versions Data type is specified in parens or string Check API docs for full documentation on supported features and platforms Sunday, October 9, 2011
  35. Address Book Example Show full contact list in a jQM

    list Exercise: write contact info page Sunday, October 9, 2011
  36. Adding Contacts Create a contact with contacts.create Modify the contact’s

    properties Save it to the device’s address book using contact.save Sunday, October 9, 2011
  37. Q & A Device Notification Contacts Accelerometer Events Camera Sunday,

    October 9, 2011
  38. Accelerometer Mobile Movement Detection Sunday, October 9, 2011

  39. 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 events Sunday, October 9, 2011
  40. Accelerometer Register for Notifications Handle accelerometer changes Unregister when done

    Sunday, October 9, 2011
  41. Accelerometer API watchAccelerometer(success, error, options) clearWatch(watchId) API Doc: http://docs.phonegap.com/ phonegap_accelerometer_accelerometer.md.html

    Sunday, October 9, 2011
  42. Demo examples/phonegap/ Bouncers Sunday, October 9, 2011

  43. 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 moves Sunday, October 9, 2011
  44. 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) Sunday, October 9, 2011
  45. Q & A Accelerometer Sunday, October 9, 2011

  46. 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 object Sunday, October 9, 2011
  47. PhoneGap Events Write a handler function Bind an Event Handler

    using: document.addEventListener(‘eventname’, handler, false); Can also bind using jQuery Sunday, October 9, 2011
  48. PhoneGap Events backbutton deviceready menubutton pause resume searchbutton online offline

    Sunday, October 9, 2011
  49. 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 override Sunday, October 9, 2011
  50. 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 menus Sunday, October 9, 2011
  51. 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’ event Sunday, October 9, 2011
  52. 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 apps Sunday, October 9, 2011
  53. CAMERA API TAKE AND SHARE PHOTOS Sunday, October 9, 2011

  54. 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 cropping Sunday, October 9, 2011
  55. Camera API options = { quality : 75, destinationType :

    Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 100, targetHeight : 100 }; navigator.camera.getPicture(success, error, options); Sunday, October 9, 2011
  56. Quality is ranged 0..100 Destination type selects between DATA_URL and

    FILE_URI PictureSourceType selects between PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUM Camera API Sunday, October 9, 2011
  57. 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); } Sunday, October 9, 2011
  58. Use The Image - File function onSuccess(imageURI) { var img

    = document.querySelector(‘#img’); img.src = imageURI; } function onFail(msg) { alert(‘fail because: ‘ + msg); } Sunday, October 9, 2011
  59. Camera Tips Use FILE_URI destination type to save on device

    memory Use DATA_URL to post the data remotely Sunday, October 9, 2011
  60. Camera API - Missing Check if device actually has a

    camera (consider iPod touch/iPads) Use image overlay Sunday, October 9, 2011
  61. 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 image Sunday, October 9, 2011
  62. 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 task Sunday, October 9, 2011
  63. Q & A Sunday, October 9, 2011

  64. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Sunday, October 9, 2011