PhoneGap - Speaker Deck

Slide 1

Slide 1 text

Pack It Get your app ready for the App Store Sunday, October 9, 2011

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 4

Slide 4 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 5

Slide 5 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 6

Slide 6 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 7

Slide 7 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 8

Slide 8 text

Mobile Web Is Broken No Camera No Push Notiﬁcations No Filesystem Access No Audio Recording No Contacts Sunday, October 9, 2011

Slide 9

Slide 9 text

Native Apps Are Broken Rewrite same UI code over and over again Solve the same bugs Maintainability nightmare Sunday, October 9, 2011

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Hybrid Apps Mobile HTML Native Wrapper Sunday, October 9, 2011

Slide 12

Slide 12 text

Hybrid Apps + Most of the app is written once in HTML/JS Native parts are written in platform speciﬁc 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

Slide 13

Slide 13 text

Hybrid Apps - Complex Code Requires many programming languages and data transfer between them Hard to debug Sunday, October 9, 2011

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Selected Apps Runners Ally Taxi Madrid Binary Clock HAL 9000 Tank Inside Trader Radios Roadtripper Sunday, October 9, 2011

Slide 16

Slide 16 text

PhoneGap Demo Sunday, October 9, 2011

Slide 17

Slide 17 text

PhoneGap Native Build Install the SDK (Android or iPhone) Install PhoneGap lib Compile & Go Sunday, October 9, 2011

Slide 18

Slide 18 text

Using The Build Server Have a web app prepare a conﬁg.xml ﬁle Have an app icon image (png) Register for the beta at: https://build.phonegap.com/start Sunday, October 9, 2011

Slide 19

Slide 19 text

Directory Structure / index.html conﬁg.xml icon.png assets/ css/ js/ img/ assets dir holds all the ﬁles that are accessible from the html It acts as the root of the web page Can use a komodo template Sunday, October 9, 2011

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Conﬁg.xml Elements ! PhoneGap: Getting Started ! ! ! A template for getting started with PhoneGap development and build.phonegap.com ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Widget xml root element App Name & Description Platforms for the Build Server Features (for permissions) App Icon Sunday, October 9, 2011

Slide 22

Slide 22 text

Manual Build Can also install locally as an addon to eclipse or xcode When used locally, no need for conﬁg.xml Can integrate with private native code Some features are still missing from build server Requires native toolchain Sunday, October 9, 2011

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Q & A Phonegap Installation & Conﬁguration Sunday, October 9, 2011

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

PhoneGap’s APIs Accelerometer Compass Device Geolocation Storage Camera Connection Events Media Capture Contacts File Notiﬁcation Sunday, October 9, 2011

Slide 27

Slide 27 text

PhoneGap’s APIs Accelerometer Compass Device Geolocation Storage Camera Connection Events Media Capture Contacts File Notiﬁcation Sunday, October 9, 2011

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Notiﬁcations 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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Contacts Access An API for reading & writing Contacts information contacts.create to add a new contact contact.ﬁnd to fetch a contact’s information Sunday, October 9, 2011

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Contacts Object Not all properties are supported on all device platforms and versions Data type is speciﬁed in parens or string Check API docs for full documentation on supported features and platforms Sunday, October 9, 2011

Slide 35

Slide 35 text

Address Book Example Show full contact list in a jQM list Exercise: write contact info page Sunday, October 9, 2011

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Q & A Device Notiﬁcation Contacts Accelerometer Events Camera Sunday, October 9, 2011

Slide 38

Slide 38 text

Accelerometer Mobile Movement Detection Sunday, October 9, 2011

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Accelerometer Register for Notiﬁcations Handle accelerometer changes Unregister when done Sunday, October 9, 2011

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Q & A Accelerometer Sunday, October 9, 2011

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

PhoneGap Events backbutton deviceready menubutton pause resume searchbutton online ofﬂine Sunday, October 9, 2011

Slide 49

Slide 49 text

BackButton Event Android devices have a back button Default behavior - go back one page. Tapping back on the ﬁrst page leaves the app Implement event to override Sunday, October 9, 2011

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

online/ofﬂine events When device gets connected to the internet, phonegap sends an online event When device gets disconnected, phonegap sends an ofﬂine event Use these to control behavior of network related apps Sunday, October 9, 2011

Slide 53

Slide 53 text

CAMERA API TAKE AND SHARE PHOTOS Sunday, October 9, 2011

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Camera Tips Use FILE_URI destination type to save on device memory Use DATA_URL to post the data remotely Sunday, October 9, 2011

Slide 60

Slide 60 text

Camera API - Missing Check if device actually has a camera (consider iPod touch/iPads) Use image overlay Sunday, October 9, 2011

Slide 61

Slide 61 text

Exercise Write a connection indicator app App has a big circle in the middle Circle color is red when ofﬂine, 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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Q & A Sunday, October 9, 2011

Slide 64

Slide 64 text

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