07 PhoneGap

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


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


https://build.phonegap.com/start

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


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


http://www.w3.org/ns/widgets

http://www.w3.org/ns/widgets

http://phonegap.com/ns/1.0

http://phonegap.com/ns/1.0

http://api.phonegap.com/1.0/geolocation

http://api.phonegap.com/1.0/geolocation

http://api.phonegap.com/1.0/network

http://api.phonegap.com/1.0/network

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


http://developer.android.com/sdk/installing.html

http://developer.android.com/sdk/installing.html

https://github.com/phonegap/phonegap/blob/master/Android/README.md




Q & A


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

Media

Capture

Contacts

File

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


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


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




Demoexamples/phonegap/Bouncers


https://github.com/ynonp/pg-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)


Q & A


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

pause

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


Q & A


Thank You

Ynon Perek

[email protected]

ynonperek.com


mailto:[email protected]

mailto:[email protected]

http://www.ynonperek.com

http://www.ynonperek.com

07 PhoneGap

Technology

Transcript of 07 PhoneGap