native javascript apps with phonegap by martin de keijzer
DESCRIPTION
Writing applications for phones has been a daunting task since every platform uses it’s own language and API’s. PhoneGap will solve this problem for you by utilizing the browser capabilities. In this session we will see how we can turn a web based application into a native app. We will also look at posibilites to integrate native functionality, like the camera or accelerometer and deploying your app via PhoneGap Build which easily builds your application for all platforms.TRANSCRIPT
Phonegap
Martin de KeijzerCode Motion Berlin - May 11, 2013 - Germany
Native Javascript apps with
Saturday, 11 May 13
Introduction
2
Saturday, 11 May 13
About me
Martin de KeijzerDutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
Saturday, 11 May 13
What is PhoneGap?
4
Saturday, 11 May 13
What is PhoneGap
5
A way to wrap you HTML app as a native application.
Saturday, 11 May 13
What is PhoneGap
6
A way to bridge ‘Native’ functionality to a Javascript API
Saturday, 11 May 13
Mission
7
PhoneGap’s mission is for PhoneGap to cease to exist!
Saturday, 11 May 13
WTF?!?!?Cordova, PhoneGap
8
Saturday, 11 May 13
PhoneGap Pre-Adobe
9
by
Saturday, 11 May 13
PhoneGap acquisistion by Adobe
10
Acquired byDonated to
Saturday, 11 May 13
Acquisition by Adobe
11
“PhoneGap” “Callback”“Cordova”
Saturday, 11 May 13
PhoneGap now
12
Where changes get committed
Saturday, 11 May 13
PhoneGap now
13
PhoneGap releases, still identical to Apache Cordova
Saturday, 11 May 13
In conclusion
14
You’ll use PhoneGap!
Saturday, 11 May 13
Getting ready for lift-offInstalling PhoneGap
15
Saturday, 11 May 13
Getting PhoneGap
16
http://phonegap.com/download/
Saturday, 11 May 13
Lib is where the magic lives
17
“lib” contains all supported platforms.... and a
♥ ♥ ♥ ♥ CLI tool ♥ ♥ ♥ ♥
Saturday, 11 May 13
XCode Command Line Tools
18
Saturday, 11 May 13
Creating your first project
19
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
Saturday, 11 May 13
Creating your first project
20
XCode Project
Saturday, 11 May 13
The app
21
Saturday, 11 May 13
First Run
22
Saturday, 11 May 13
Ready for action
23
Always use the “www” folder & always assume yourapp is running from a filesystem instead of a web server!
Saturday, 11 May 13
Let’s take it easyPhoneGap build
24
Saturday, 11 May 13
Creating builds using XCode
25
The pain:Running updates and checking requirements over
and over again!
Saturday, 11 May 13
Creating builds using XCode
26
Saturday, 11 May 13
PhoneGap build to the rescue!
27
http://build.phonegap.com
Saturday, 11 May 13
PhoneGap build in a nutshell
28
Saturday, 11 May 13
Getting started
29
OR
Saturday, 11 May 13
Getting started
30
Saturday, 11 May 13
Getting started
31
OR
Repository that represents“www”
Zip-file that represents“www”
Saturday, 11 May 13
Getting started
32
Saturday, 11 May 13
The power of PhoneGap Build
33
Title
Code
Metadata Test
Saturday, 11 May 13
Build statusses
34
Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action required
Saturday, 11 May 13
Build errors
35
Saturday, 11 May 13
Working in teams
36
Saturday, 11 May 13
Building like a pro
37
config.xmlW3C Widget Specification
https://gist.github.com/Martin1982/5063962
Saturday, 11 May 13
When the web just doesn’t sufficePlug-ins
38
Saturday, 11 May 13
Accelerometer
39
Get device movement in an X, Y, Z space.
Saturday, 11 May 13
Camera & Capture & Media
40
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:
Saturday, 11 May 13
Compass
41
API to detect which way a device user is pointing
Saturday, 11 May 13
Connection
42
See if a user is connected and inspect the type of connection:
Wifi, xG, Ethernet
Caution navigator.isOnline is your close friend
Saturday, 11 May 13
Contacts
43
Access the user’s contact list
Saturday, 11 May 13
Device
44
•Name•Cordova version•Platform•UUID•Version•Model
Saturday, 11 May 13
Events
45
Handles application state(deviceready, paused etc)
Saturday, 11 May 13
File
46
Filesystem bridging, based on the W3C File API
Saturday, 11 May 13
Geolocation
47
Caution: Already supported by browsers!
API to get the latitudes and longitudes of the device.
Saturday, 11 May 13
Globalization
48
Currency, language, date time
Saturday, 11 May 13
InAppBrowser
49
The browser opened by window.open()
Saturday, 11 May 13
Notification
50
•Alert•Confirmation•Beep•Vibrate
Saturday, 11 May 13
Splashscreen
51
No matter how beautiful your splash screen is, eventually you’ll need to show and hide it
Saturday, 11 May 13
Storage
52
SQL storage based on the W3C WebSQL specification.
Caution; WebSQL is no longer maintained IndexedDB is the new superhero!
Saturday, 11 May 13
Why reinvent the wheelUser plugins
53
Saturday, 11 May 13
Pick what you want
54https://github.com/phonegap/phonegap-plugins
Saturday, 11 May 13
QUESTIONS
55
Saturday, 11 May 13