native javascript apps with phonegap by martin de keijzer

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

mdkeijzer@ibuildings.nl@Martin1982

Thank you for listening

Saturday, 11 May 13