native javascript apps with phonegap - de keijzer
DESCRIPTION
Slides from Martin De Keijzer talk @ codemotion rome 2014TRANSCRIPT
![Page 1: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/1.jpg)
Phonegap
Martin de KeijzerCodemotion- April 11, 2014 - The Netherlands
Native Javascript apps with
![Page 2: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/2.jpg)
Introduction
2
![Page 3: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/3.jpg)
About me
Martin de Keijzer Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
![Page 4: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/4.jpg)
What is PhoneGap?
4
![Page 5: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/5.jpg)
5
What is PhoneGap
A way to wrap your HTML app as a native application.
![Page 6: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/6.jpg)
6
What is PhoneGapA way to bridge ‘Native’ functionality to a Javascript API
![Page 7: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/7.jpg)
7
Mission
PhoneGap’s mission is for PhoneGap to cease to exist!
![Page 8: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/8.jpg)
8
Cordova, PhoneGapWTF?!?!?
![Page 9: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/9.jpg)
History class
9
![Page 10: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/10.jpg)
PhoneGap Pre-Adobe
10
by
![Page 11: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/11.jpg)
PhoneGap acquisistion by Adobe
11
Acquired byDonated to
![Page 12: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/12.jpg)
Acquisition by Adobe
12
“PhoneGap” “Callback” “Cordova”
![Page 13: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/13.jpg)
PhoneGap now
13
Where changes get committed
![Page 14: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/14.jpg)
PhoneGap now
14
PhoneGap releases, still identical to Apache Cordova
![Page 15: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/15.jpg)
In conclusion
15
You’ll use PhoneGap!
![Page 16: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/16.jpg)
16
Running PhoneGapGetting ready for lift-off
![Page 17: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/17.jpg)
Getting the PhoneGap software
17
sudo npm install -g phonegap
![Page 18: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/18.jpg)
Creating a project
18
phonegap create <projectname>
![Page 19: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/19.jpg)
Running the scaffold
19
phonegap run ios
![Page 20: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/20.jpg)
Your app
20
Copy your html/css/javascript to the ‘www’ folder always include an index.html in the root
REMEMBER: Files run from a filesystem not a webserver!
![Page 21: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/21.jpg)
PhoneGap per platform commands
21
install - install a platform SDK to the project run - run your project on a certain platform
build - build a distributable package for a platform
![Page 22: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/22.jpg)
When the web just doesn’t sufficePlug-ins
22
![Page 23: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/23.jpg)
Plugin management
Add a new plugin: phonegap plugin add org.apache.cordova.inappbrowser !!!
List added plugin(s): phonegap plugin ls !!!!
Remove a plugin: phonegap plugin remove org.apache.cordova.inappbrowser
23
![Page 24: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/24.jpg)
24
Notification
•Alert •Confirmation •Beep •Vibrate
![Page 25: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/25.jpg)
Notification
navigator.notification.vibrate(2500);
25
![Page 26: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/26.jpg)
26
Camera, Capture & Media
Use the device’s library, camera and microphone to work with local audio, video
and images.
![Page 27: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/27.jpg)
Camera, Capture & Mediafunction onSuccess(imageData) { // Do stuff with the image!
}
function onFail(message) {
alert('Failed to get the picture: ' + message);
}
var cameraPopoverHandle = navigator.camera.getPicture(onSuccess, onFail, { destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
! // Reposition the popover if the orientation changes.
window.onorientationchange = function() {
var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0);
cameraPopoverHandle.setPosition(cameraPopoverOptions);
}
27
![Page 28: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/28.jpg)
28
Contacts
Access the user’s contact list
![Page 29: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/29.jpg)
Contacts// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
! // device APIs are available
//
function onDeviceReady() {
var options = new ContactFindOptions();
options.filter="";
filter = ["displayName","organizations"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
29
![Page 30: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/30.jpg)
30
InAppBrowser
The browser opened by window.open()
Extremely useful to open external links!
![Page 31: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/31.jpg)
InAppBrowservar ref = window.open('http://apache.org', '_blank', ‘location=yes');
!// close InAppBrowser after 5 seconds
setTimeout(function() {
ref.close();
}, 5000);
31
![Page 33: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/33.jpg)
Why reinvent the wheelUser plugins
33
![Page 34: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/34.jpg)
34
Pick what you want
http://plugins.cordova.io/#/_browse/all
![Page 35: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/35.jpg)
Go Pro
Create your own plugins
35
Disclaimer: Native knowledge is a requirement
![Page 36: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/36.jpg)
Let’s take it easyPhoneGap build
36
![Page 38: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/38.jpg)
38
PhoneGap build in a nutshell
![Page 39: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/39.jpg)
39
Getting started
OR
![Page 40: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/40.jpg)
40
Getting started
![Page 41: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/41.jpg)
41
Getting started
OR
Repository that represents“www”
Zip-file that represents“www”
![Page 42: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/42.jpg)
42
Getting started
![Page 43: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/43.jpg)
43
The power of PhoneGap Build
Title
Code
Metadata Test
![Page 44: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/44.jpg)
44
Build statusses
Grey: Still building, be patient Blue-ish: Build succeeded, click to download Red: Build error, action required
![Page 45: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/45.jpg)
45
Build errors
![Page 46: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/46.jpg)
46
Working in teams
![Page 47: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/47.jpg)
47
Building like a pro
config.xml W3C Widget Specification
https://gist.github.com/Martin1982/5063962
![Page 48: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/48.jpg)
Now it’s your turnConclusion
48
![Page 49: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/49.jpg)
Conclusion
49
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
![Page 50: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/50.jpg)
QUESTIONS
50
![Page 51: Native Javascript apps with Phonegap - De Keijzer](https://reader033.vdocuments.site/reader033/viewer/2022052523/55514646b4c905f2288b4d22/html5/thumbnails/51.jpg)
[email protected]@Martin1982
Thank you for listening
Creative Commons License This work is licensed under a Creative Commons Attribution-
NonCommercial-ShareAlike 3.0 Unported License.
Slides can also be found at: http://www.slideshare.net/Martin82