07 PhoneGap

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

Mobile Web Is Broken

No Push Notifications

No Filesystem Access

No Audio Recording

No Contacts

No Audio Recording

No Contacts

No Audio Recording

No Contacts

No Audio Recording

No Contacts

No Audio Recording

No Contacts

Native Apps Are Broken

Rewrite same UI code over and over again

Solve the same bugs

Maintainability nightmare

Hybrid Apps

A native app with an embedded web view

Runs mobile web code “in the box”

Runs native code “in the frame”

Hybrid Apps

Mobile HTML

Native Wrapper

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

Hybrid Apps -

Complex Code

Requires many programming languages and data transfer between them

Hard to debug

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

Selected Apps

Runners Ally Taxi Madrid Binary Clock HAL 9000

Tank Inside Trader Radios Roadtripper

PhoneGap Demo

PhoneGap Native Build

Install the SDK (Android or iPhone)

Install PhoneGap lib

Compile & Go

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

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

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

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"/>

! ! </widget>

Widget xml root element

App Name & Description

Platforms for the Build Server

Features (for permissions)

App Icon

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

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

PhoneGap API

JavaScript interfaces to native device features

All required objects are inserted to the window by phonegap.js

No need for native code

PhoneGap’s APIsAccelerometer

Compass

Device

Geolocation

Storage

Camera

Connection

Events

Capture

Contacts

Notification

PhoneGap’s APIsAccelerometer

Compass

Device

Geolocation

Storage

Camera

Connection

Events

Capture

Contacts

Notification

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

Notifications

navigator.notification.alert(‘foo’);

navigator.notification.confirm(‘are you sure ?’, yesCallback, [title], [labels]);

navigator.notification.beep(times);navigator.notification.vibrate(ms);

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

Exercise

Use PhoneGap to write a native application that shows current device details in a jQM style form

Add vibrate and beep buttons

Contacts Access

An API for reading & writing Contacts information

contacts.create to add a new contact

contact.find to fetch a contact’s information

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

Contact Methods

function findAllContacts(success, error) { var fields = ['displayName']; navigator.contacts.find(fields, success, error);}

An array of field names

success callback

error callback

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[])

Contact Methods

Contact.save()

Contact.remove()

Contact.clone()

Address Book Example

Show full contact list

Exercise: write contact info page

Adding Contacts

Create a contact with contacts.create

Modify the contact’s properties

Save it to the device’s address book using contact.save

Q & ADevice

Notification

Contacts

Accelerometer

Events

Camera

AccelerometerMobile Movement Detection

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

Accelerometer

Register for Notifications

Handle accelerometer changes

Unregister when done

Accelerometer API

watchAccelerometer(success, error, options)

clearWatch(watchId)

API Doc: http://docs.phonegap.com/phonegap_accelerometer_accelerometer.md.html

Demoexamples/phonegap/Bouncers

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

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)

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

PhoneGap Events

Write a handler function

Bind an Event Handler using:document.addEventListener(‘eventname’, handler, false);

Can also bind using jQuery

PhoneGap Eventsbackbutton

deviceready

menubutton

resume

searchbutton

online

offline

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

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

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

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

CAMERA APITAKE AND SHARE PHOTOS

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

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);

Quality is ranged 0..100

Destination type selects between DATA_URL and FILE_URI

PictureSourceType selects between PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUM

Camera API

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);

Use The Image - Filefunction onSuccess(imageURI) {

var img = document.querySelector(‘#img’);

img.src = imageURI;}

function onFail(msg) {

alert(‘fail because: ‘ + msg);

Camera Tips

Use FILE_URI destination type to save on device memory

Use DATA_URL to post the data remotely

Camera API - Missing

Check if device actually has a camera (consider iPod touch/iPads)

Use image overlay

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

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

Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com

07 PhoneGap

Technology