07 phonegap
DESCRIPTION
The keynote is parse of my Mobile Web Applications course. Full details on the course are available on: http://mobileweb.ynonperek.com 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.TRANSCRIPT
Pack ItGet your app ready for the App Store
Tuesday, September 25, 12
Agenda
Hybrid Apps
Introducing PhoneGap
Using Native APIs
Writing Custom PhoneGap Extensions
Tuesday, September 25, 12
Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
Native Apps Are Broken
Rewrite same UI code over and over again
Solve the same bugs
Maintainability nightmare
Tuesday, September 25, 12
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
Hybrid Apps
Mobile HTML
Native Wrapper
Tuesday, September 25, 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
Tuesday, September 25, 12
Hybrid Apps -
Complex Code
Requires many programming languages and data transfer between them
Hard to debug
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Selected Apps
Runners Ally Taxi Madrid Binary Clock HAL 9000
Tank Inside Trader Radios Roadtripper
Tuesday, September 25, 12
PhoneGap Demo
Tuesday, September 25, 12
PhoneGap Native Build
Install the SDK (Android or iPhone)
Install PhoneGap lib
Compile & Go
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Directory Structure
assets/ www/ index.html config.xml icon.png 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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Manual BuildCan 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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Q & A
Tuesday, September 25, 12
PhoneGap API
JavaScript interfaces to native device features
All required objects are inserted to the window by phonegap.js
No need for native code
Tuesday, September 25, 12
PhoneGap’s APIsAccelerometer
Compass
Device
Geolocation
Storage
Camera
Connection
Events
Media
Capture
Contacts
File
Notification
Tuesday, September 25, 12
PhoneGap’s APIsAccelerometer
Compass
Device
Geolocation
Storage
Camera
Connection
Events
Media
Capture
Contacts
File
Notification
Tuesday, September 25, 12
Device Information
var name = device.namevar phonegap_version = device.phonegapvar os_name = device.platformvar os_version = device.versionvar uuid = device.uuid
Demo: examples/phonegap/DeviceInfo
Tuesday, September 25, 12
Notifications
Tuesday, September 25, 12
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
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
Tuesday, September 25, 12
Exercise
Use PhoneGap to write a native application that shows current device details in a jQM style form
Add vibrate and beep buttons
Tuesday, September 25, 12
Contacts Access
An API for reading & writing Contacts information
contacts.create to add a new contact
contact.find to fetch a contact’s information
Tuesday, September 25, 12
Contact Methods
var contact = navigator.contacts.create( opts );
// Example:
var numbers = [];numbers[0] = new ContactField('mobile', '052-1121321', true);var friend = navigator.contact.create({ 'displayName' : 'Some User', 'phoneNumbers' : numbers});
Preferred
Tuesday, September 25, 12
Contact Methods
function findAllContacts(success, error) { var fields = ['displayName']; navigator.contacts.find(fields, success, error);}
An array of field names
success callback
error callback
Tuesday, September 25, 12
Contact Objectid
displayName
name (ContactName)
nickname
phoneNumbers (ContactField[])
emails (ContactField[])
addresses array
ims (ContactField[])
organizations (ContactOrganizations[])
birthday (Date)
note (String)
photos (ContactField[])
categories (ContactField[])
urls (ContactField[])
Tuesday, September 25, 12
Contact Methods
Contact.save()
Contact.remove()
Contact.clone()
Tuesday, September 25, 12
Address Book Example
Show full contact list
Exercise: write contact info page
Tuesday, September 25, 12
Adding Contacts
Create a contact with contacts.create
Modify the contact’s properties
Save it to the device’s address book using contact.save
Tuesday, September 25, 12
Q & ADevice
Notification
Contacts
Accelerometer
Events
Camera
Tuesday, September 25, 12
AccelerometerMobile Movement Detection
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Accelerometer
Register for Notifications
Handle accelerometer changes
Unregister when done
Tuesday, September 25, 12
Accelerometer API
watchAccelerometer(success, error, options)
clearWatch(watchId)
API Doc: http://docs.phonegap.com/phonegap_accelerometer_accelerometer.md.html
Tuesday, September 25, 12
Demoexamples/phonegap/Bouncers
Tuesday, September 25, 12
Accelerometer Takeawaysaccelerometer measures acceleration. That is measured in m/s2
Imagine a ball inside your phone. Now measure that ball’s acceleration when the phone moves
Tuesday, September 25, 12
ExerciseUse 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
Q & A
Tuesday, September 25, 12
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
Tuesday, September 25, 12
PhoneGap Events
Write a handler function
Bind an Event Handler using:document.addEventListener(‘eventname’, handler, false);
Can also bind using jQuery
Tuesday, September 25, 12
PhoneGap Eventsbackbutton
deviceready
menubutton
pause
resume
searchbutton
online
offline
Tuesday, September 25, 12
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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
CAMERA APITAKE AND SHARE PHOTOS
Tuesday, September 25, 12
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
Tuesday, September 25, 12
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);
Tuesday, September 25, 12
Quality is ranged 0..100
Destination type selects between DATA_URL and FILE_URI
PictureSourceType selects between PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUM
Camera API
Tuesday, September 25, 12
Use The Image - Datafunction 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
Use The Image - Filefunction onSuccess(imageURI) {
var img = document.querySelector(‘#img’);
img.src = imageURI;}
function onFail(msg) {
alert(‘fail because: ‘ + msg);
}
Tuesday, September 25, 12
Camera Tips
Use FILE_URI destination type to save on device memory
Use DATA_URL to post the data remotely
Tuesday, September 25, 12
Camera API - Missing
Check if device actually has a camera (consider iPod touch/iPads)
Use image overlay
Tuesday, September 25, 12
ExerciseWrite 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
Tuesday, September 25, 12
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
Tuesday, September 25, 12
Q & A
Tuesday, September 25, 12
Thank You
Ynon Perek
ynonperek.com
Tuesday, September 25, 12