07 PhoneGap

Pack It
Get 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 Notiﬁcations

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


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 conﬁg.xml ﬁle

Have an app icon image (png)

Register for the beta at:
https://build.phonegap.com/start


Directory Structure
assets dir holds all the assets/
ﬁles that are accessible www/
from the html index.html
config.xml
It acts as the root of icon.png
the web page css/
js/
Can use a komodo img/
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


Conﬁg.xml Elements
Widget xml root element
<?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">
= App Name & Description
! <name>PhoneGap: Getting Started</name>

! <description>
! ! A template for getting started with PhoneGap development and build.phonegap.com
! </description>
<icon src=”images/icon.png” /> App Icon
! <gap:platforms>
! ! <gap:platform name="android" minVersion="2.1" />
! ! <gap:platform name="webos" /> Platforms for the Build Server
! ! <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"/>
Features (for permissions)
! 
! 
</widget>

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


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


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 APIs
Accelerometer Events

Compass Media

Device Capture

Geolocation Contacts

Storage File

Camera Notiﬁcation

Connection


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


Notiﬁcations


Notiﬁcations

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.ﬁnd to fetch a
contact’s information


Contact Methods
Preferred

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


Contact Methods

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

An array of success error
field names callback callback


Contact Object
id ims (ContactField[])

displayName organizations
(ContactOrganizations[])
name (ContactName)
birthday (Date)
nickname
note (String)
phoneNumbers
(ContactField[]) photos (ContactField[])

emails (ContactField[]) categories (ContactField[])

addresses array 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&A
Device

Notiﬁcation

Contacts

Accelerometer

Events

Camera


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

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


Demo
examples/phonegap/
Bouncers


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


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)


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 Events
backbutton online

deviceready oﬄine

menubutton

pause

resume

searchbutton


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


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/ofﬂine events

When device gets connected to the internet,
phonegap sends an online event

When device gets disconnected, phonegap sends
an oﬄine event

Use these to control behavior of network related
apps


CAMERA API
TAKE 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);


Camera API
Quality is ranged 0..100

Destination type selects between DATA_URL and
FILE_URI

PictureSourceType selects between
PHOTOLIBRARY, CAMERA,
SAVEDPHOTOALBUM


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

}


Use The Image - File
function 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


Exercise
Write a connection indicator app

App has a big circle in the middle

Circle color is red when oﬄ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


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

Recommended

Recommended

More Related Content

Similar to 07 PhoneGap

Similar to 07 PhoneGap (20)

More from Ynon Perek

More from Ynon Perek (20)

Recently uploaded

Recently uploaded (20)

07 PhoneGap