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.
1. Pack It
Get your app ready for the App Store
Tuesday, September 25, 12
2. Agenda
Hybrid Apps
Introducing PhoneGap
Using Native APIs
Writing Custom PhoneGap Extensions
Tuesday, September 25, 12
3. Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
4. Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
5. Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
6. Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
7. Mobile Web Is Broken
No Push Notifications
No Filesystem Access
No Audio Recording
No Contacts
Tuesday, September 25, 12
8. Native Apps Are Broken
Rewrite same UI code
over and over again
Solve the same bugs
Maintainability
nightmare
Tuesday, September 25, 12
9. 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
10. Hybrid Apps
Mobile HTML
Native Wrapper
Tuesday, September 25, 12
11. 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
12. Hybrid Apps -
Complex Code
Requires many programming languages and data
transfer between them
Hard to debug
Tuesday, September 25, 12
13. 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
14. Selected Apps
Runners Ally Taxi Madrid Binary Clock HAL 9000
Tank Inside Trader Radios Roadtripper
Tuesday, September 25, 12
16. PhoneGap Native Build
Install the SDK (Android or iPhone)
Install PhoneGap lib
Compile & Go
Tuesday, September 25, 12
17. 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
18. Directory Structure
assets dir holds all the assets/
files 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
Tuesday, September 25, 12
19. 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
20. Config.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)
! <!-- sample preference specification -->
! <!-- <preference name="autorotate" value="false" readonly="true"/> -->
</widget>
Tuesday, September 25, 12
21. Manual Build
Can 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
22. 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
24. 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
25. PhoneGap’s APIs
Accelerometer Events
Compass Media
Device Capture
Geolocation Contacts
Storage File
Camera Notification
Connection
Tuesday, September 25, 12
26. PhoneGap’s APIs
Accelerometer Events
Compass Media
Device Capture
Geolocation Contacts
Storage File
Camera Notification
Connection
Tuesday, September 25, 12
27. 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
Tuesday, September 25, 12
29. 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
30. 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
31. 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
32. 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
33. 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
});
Tuesday, September 25, 12
34. Contact Methods
function findAllContacts(success, error) {
var fields = ['displayName'];
navigator.contacts.find(fields, success, error);
}
An array of success error
field names callback callback
Tuesday, September 25, 12
36. Contact Methods
Contact.save()
Contact.remove()
Contact.clone()
Tuesday, September 25, 12
37. Address Book Example
Show full contact list
Exercise: write contact
info page
Tuesday, September 25, 12
38. 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
39. Q&A
Device
Notification
Contacts
Accelerometer
Events
Camera
Tuesday, September 25, 12
40. Accelerometer
Mobile Movement Detection
Tuesday, September 25, 12
41. 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
42. Accelerometer
Register for Notifications
Handle accelerometer changes
Unregister when done
Tuesday, September 25, 12
43. Accelerometer API
watchAccelerometer(success, error, options)
clearWatch(watchId)
API Doc: http://docs.phonegap.com/
phonegap_accelerometer_accelerometer.md.html
Tuesday, September 25, 12
44. Demo
examples/phonegap/
Bouncers
Tuesday, September 25, 12
45. 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
Tuesday, September 25, 12
46. 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)
Tuesday, September 25, 12
48. 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
49. 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
51. 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
52. 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
53. 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
54. 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
55. CAMERA API
TAKE AND SHARE PHOTOS
Tuesday, September 25, 12
56. 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
58. Camera API
Quality is ranged 0..100
Destination type selects between DATA_URL and
FILE_URI
PictureSourceType selects between
PHOTOLIBRARY, CAMERA,
SAVEDPHOTOALBUM
Tuesday, September 25, 12
59. 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);
}
Tuesday, September 25, 12
60. Use The Image - File
function onSuccess(imageURI) {
var img = document.querySelector(‘#img’);
img.src = imageURI;
}
function onFail(msg) {
alert(‘fail because: ‘ + msg);
}
Tuesday, September 25, 12
61. Camera Tips
Use FILE_URI
destination type to
save on device
memory
Use DATA_URL to post
the data remotely
Tuesday, September 25, 12
62. Camera API - Missing
Check if device actually
has a camera (consider
iPod touch/iPads)
Use image overlay
Tuesday, September 25, 12
63. Exercise
Write 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
64. 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