Phonegap
Martin de Keijzer
Dutch Mobile Conference - June 7, 2013 - The Netherlands
Native Javascript apps with
Friday, 7 June 13

Introduction
2
Friday, 7 June 13

About me
Martin de Keijzer
Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
Friday, 7 June 13

What is PhoneGap?
4
Friday, 7 June 13

What is PhoneGap
5
A way to wrap you HTML
app as a native application.
Friday, 7 June 13

What is PhoneGap
6
A way to bridge ‘Native’ functionality to a Javascript API
Friday, 7 June 13

Mission
7
PhoneGap’s mission is for
PhoneGap to cease to exist!
Friday, 7 June 13

WTF?!?!?
Cordova, PhoneGap
8
Friday, 7 June 13

History class
9
Friday, 7 June 13

PhoneGap Pre-Adobe
10
by
Friday, 7 June 13

PhoneGap acquisistion by Adobe
11
Acquired by
Donated to
Friday, 7 June 13

Acquisition by Adobe
12
“PhoneGap” “Callback”
“Cordova”
Friday, 7 June 13

PhoneGap now
13
Where changes get committed
Friday, 7 June 13

PhoneGap now
14
PhoneGap releases, still identical to
Apache Cordova
Friday, 7 June 13

In conclusion
15
You’ll use PhoneGap!
Friday, 7 June 13

Getting ready for lift-off
Installing PhoneGap
16
Friday, 7 June 13

Getting PhoneGap
17
http://phonegap.com/download/
Friday, 7 June 13

Lib is where the magic lives
18
“lib” contains all supported
platforms.... and
♥ ♥ ♥ ♥ CLI tools ♥ ♥ ♥ ♥
Friday, 7 June 13

XCode Command Line Tools
19
Friday, 7 June 13

Creating your first project
20
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
Friday, 7 June 13

Creating your first project
21
XCode Project
Friday, 7 June 13

The app
22
Friday, 7 June 13

First Run
23
Friday, 7 June 13

Android
24
Friday, 7 June 13

BlackBerry WebWorks
25
Friday, 7 June 13

BlackBerry WebWorks
26
Set the project.properties
and run:
ant qnx load-
simulator
Friday, 7 June 13

Ready for action
27
Always use the “www” folder & always assume your
app is running from a filesystem instead of a web server!
On Android it’s “assets/www”
Friday, 7 June 13

Let’s take it easy
PhoneGap build
28
Friday, 7 June 13

Creating builds using platform specific tools
29
The pain:
Running updates and checking requirements over
and over again!
Friday, 7 June 13

Creating builds using platform specific tools
30
Friday, 7 June 13

PhoneGap build to the rescue!
31
http://build.phonegap.com
Friday, 7 June 13

PhoneGap build in a nutshell
32
Friday, 7 June 13

Getting started
33
OR
Friday, 7 June 13

Getting started
34
Friday, 7 June 13

Getting started
35
OR
Repository that represents
“www”
Zip-file that represents
“www”
Friday, 7 June 13

Getting started
36
Friday, 7 June 13

The power of PhoneGap Build
37
Title
Code
Metadata Test
Friday, 7 June 13

Build statusses
38
Grey: Still building, be patient
Blue-ish: Build succeeded, click to download
Red: Build error, action required
Friday, 7 June 13

Build errors
39
Friday, 7 June 13

Working in teams
40
Friday, 7 June 13

Building like a pro
41
config.xml
W3C Widget Specification
https://gist.github.com/Martin1982/5063962
Friday, 7 June 13

When the web just doesn’t suffice
Plug-ins
42
Friday, 7 June 13

Accelerometer
43
Get device movement
in an X,Y, Z space.
Friday, 7 June 13

Camera & Capture & Media
44
Use the device’s library,
camera and microphone to
work with local audio, video
and images.
<input type="file" accept="image/*" capture="camera">
Don’t forget iOS 6 supports:
Friday, 7 June 13

Compass
45
API to detect which way a
device user is pointing
Friday, 7 June 13

Connection
46
See if a user is connected and
inspect the type of connection:
Wifi, xG, Ethernet
Caution navigator.isOnline is your close friend
Friday, 7 June 13

Contacts
47
Access the user’s contact list
Friday, 7 June 13

Device
48
•Name
•Cordova version
•Platform
•UUID
•Version
•Model
Friday, 7 June 13

Events
49
Handles application state
Friday, 7 June 13

File
50
Filesystem bridging, based
on the W3C File API
Friday, 7 June 13

Geolocation
51
Caution: Already supported by browsers!
API to get the latitudes and
longitudes of the device.
Friday, 7 June 13

Globalization
52
Currency, language, date & time
Friday, 7 June 13

InAppBrowser
53
The browser opened by
window.open()
Extremely useful to open
external links!
Friday, 7 June 13

Notification
54
•Alert
•Confirmation
•Beep
•Vibrate
Friday, 7 June 13

Splashscreen
55
No matter how beautiful your splash screen is,
eventually you’ll need to show and hide it
Friday, 7 June 13

Storage
56
SQL storage based on the W3C
WebSQL specification.
Caution; WebSQL is no longer maintained
IndexedDB is the new superhero!
Friday, 7 June 13

Why reinvent the wheel
User plugins
57
Friday, 7 June 13

Pick what you want
58
https://github.com/phonegap/phonegap-plugins
Friday, 7 June 13

Creating your own plugin
59
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};
Define the Javascript Method
Use Cordova.exec and give the following
arguments:
JavaScript Success callback function
JavaScript Error handling callback function
Native class to map to
Native method to map to
Native method arguments
Friday, 7 June 13

Now it’s your turn
Conclusion
60
Friday, 7 June 13

Conclusion
61
Package web applications as native apps
Enrich applications with native plugins
Quick deployment with PhoneGap Build VS. fine-
tuned deployment with PhoneGap CLI tools / IDE
If it doesn’t fit the bill? Download or write your own
plugin!
Always remember; your app runs as a local
application straight from the filesystem as in file://
Friday, 7 June 13

Start playing
Small demo app available from:
http://martin1982.github.io/dmc2013demo/
62
Friday, 7 June 13

QUESTIONS
63
Friday, 7 June 13

mdkeijzer@ibuildings.nl
@Martin1982
Thank you for listening
Friday, 7 June 13