PhoneGap

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