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