native javascript apps with phonegap 11-04-2014 codemotion rome
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, in our application. The final part of the presentation is about deployment of these applications. Adobe offers a cloud based service called PhoneGap Build which easily builds your application for all platforms.TRANSCRIPT
Phonegap
Martin de KeijzerCodemotion- April 11, 2014 - The Netherlands
Native Javascript apps with
Introduction
2
About me
Martin de Keijzer Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
What is PhoneGap?
4
5
What is PhoneGap
A way to wrap your HTML app as a native application.
6
What is PhoneGapA way to bridge ‘Native’ functionality to a Javascript API
7
Mission
PhoneGap’s mission is for PhoneGap to cease to exist!
8
Cordova, PhoneGapWTF?!?!?
History class
9
PhoneGap Pre-Adobe
10
by
PhoneGap acquisistion by Adobe
11
Acquired byDonated to
Acquisition by Adobe
12
“PhoneGap” “Callback” “Cordova”
PhoneGap now
13
Where changes get committed
PhoneGap now
14
PhoneGap releases, still identical to Apache Cordova
In conclusion
15
You’ll use PhoneGap!
16
Running PhoneGapGetting ready for lift-off
Getting the PhoneGap software
17
sudo npm install -g phonegap
Creating a project
18
phonegap create <projectname>
Running the scaffold
19
phonegap run ios
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!
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
When the web just doesn’t sufficePlug-ins
22
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
24
Notification
•Alert •Confirmation •Beep •Vibrate
Notification
navigator.notification.vibrate(2500);
25
26
Camera, Capture & Media
Use the device’s library, camera and microphone to work with local audio, video
and images.
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
28
Contacts
Access the user’s contact list
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
30
InAppBrowser
The browser opened by window.open()
Extremely useful to open external links!
InAppBrowservar ref = window.open('http://apache.org', '_blank', ‘location=yes');
!// close InAppBrowser after 5 seconds
setTimeout(function() {
ref.close();
}, 5000);
31
Why reinvent the wheelUser plugins
33
34
Pick what you want
http://plugins.cordova.io/#/_browse/all
Go Pro
Create your own plugins
35
Disclaimer: Native knowledge is a requirement
Let’s take it easyPhoneGap build
36
38
PhoneGap build in a nutshell
39
Getting started
OR
40
Getting started
41
Getting started
OR
Repository that represents“www”
Zip-file that represents“www”
42
Getting started
43
The power of PhoneGap Build
Title
Code
Metadata Test
44
Build statusses
Grey: Still building, be patient Blue-ish: Build succeeded, click to download Red: Build error, action required
45
Build errors
46
Working in teams
47
Building like a pro
config.xml W3C Widget Specification
https://gist.github.com/Martin1982/5063962
Now it’s your turnConclusion
48
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
QUESTIONS
50
[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