native javascript apps with phonegap - de keijzer

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

32

Full API Documentation

http://docs.phonegap.com

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

37

PhoneGap build to the rescue!

http://build.phonegap.com

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

mdkeijzer@ibuildings.nl@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