56
Phonegap Martin de Keijzer iOSOnRailsConf2013 13-14 April, Alushta Ukraine Native Javascript apps with Sunday, 14 April 13

Native Javascript apps with PhoneGap

Embed Size (px)

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.

Citation preview

Page 1: Native Javascript apps with PhoneGap

Phonegap

Martin de KeijzeriOSOnRailsConf2013 13-14 April, Alushta Ukraine

Native Javascript apps with

Sunday, 14 April 13

Page 2: Native Javascript apps with PhoneGap

Introduction

2

Sunday, 14 April 13

Page 3: Native Javascript apps with PhoneGap

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

SubtitelWhat is PhoneGap?

4

Sunday, 14 April 13

Page 5: Native Javascript apps with PhoneGap

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

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

Mission

7

PhoneGap’s mission is for PhoneGap to cease to exist!

Sunday, 14 April 13

Page 8: Native Javascript apps with PhoneGap

WTF?!?!?Cordova, PhoneGap

8

Sunday, 14 April 13

Page 9: Native Javascript apps with PhoneGap

PhoneGap Pre-Adobe

9

by

Sunday, 14 April 13

Page 10: Native Javascript apps with PhoneGap

PhoneGap acquisistion by Adobe

10

Acquired byDonated to

Sunday, 14 April 13

Page 11: Native Javascript apps with PhoneGap

Acquisition by Adobe

11

“PhoneGap” “Callback”“Cordova”

Sunday, 14 April 13

Page 12: Native Javascript apps with PhoneGap

PhoneGap now

12

Where changes get committed

Sunday, 14 April 13

Page 13: Native Javascript apps with PhoneGap

PhoneGap now

13

PhoneGap releases, still identical to Apache Cordova

Sunday, 14 April 13

Page 14: Native Javascript apps with PhoneGap

In conclusion

14

You’ll use PhoneGap!

Sunday, 14 April 13

Page 15: Native Javascript apps with PhoneGap

Getting ready for lift-offInstalling PhoneGap

15

Sunday, 14 April 13

Page 16: Native Javascript apps with PhoneGap

Getting PhoneGap

16

http://phonegap.com/download/

Sunday, 14 April 13

Page 17: Native Javascript apps with PhoneGap

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

XCode Command Line Tools

18

Sunday, 14 April 13

Page 19: Native Javascript apps with PhoneGap

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

Creating your first project

20

XCode Project

Sunday, 14 April 13

Page 21: Native Javascript apps with PhoneGap

The app

21

Sunday, 14 April 13

Page 22: Native Javascript apps with PhoneGap

First Run

22

Sunday, 14 April 13

Page 23: Native Javascript apps with PhoneGap

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

Let’s take it easyPhoneGap build

24

Sunday, 14 April 13

Page 25: Native Javascript apps with PhoneGap

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

Creating builds using XCode

26

Sunday, 14 April 13

Page 27: Native Javascript apps with PhoneGap

PhoneGap build to the rescue!

27

http://build.phonegap.com

Sunday, 14 April 13

Page 28: Native Javascript apps with PhoneGap

PhoneGap build in a nutshell

28

Sunday, 14 April 13

Page 29: Native Javascript apps with PhoneGap

Getting started

29

OR

Sunday, 14 April 13

Page 30: Native Javascript apps with PhoneGap

Getting started

30

Sunday, 14 April 13

Page 31: Native Javascript apps with PhoneGap

Getting started

31

OR

Repository that represents“www”

Zip-file that represents“www”

Sunday, 14 April 13

Page 32: Native Javascript apps with PhoneGap

Getting started

32

Sunday, 14 April 13

Page 33: Native Javascript apps with PhoneGap

The power of PhoneGap Build

33

Title

Code

Metadata Test

Sunday, 14 April 13

Page 34: Native Javascript apps with PhoneGap

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

Build errors

35

Sunday, 14 April 13

Page 36: Native Javascript apps with PhoneGap

Working in teams

36

Sunday, 14 April 13

Page 37: Native Javascript apps with PhoneGap

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

When the web just doesn’t sufficePlug-ins

38

Sunday, 14 April 13

Page 39: Native Javascript apps with PhoneGap

Accelerometer

39

Get device movement in an X, Y, Z space.

Sunday, 14 April 13

Page 40: Native Javascript apps with PhoneGap

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

Compass

41

API to detect which way a device user is pointing

Sunday, 14 April 13

Page 42: Native Javascript apps with PhoneGap

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

Contacts

43

Access the user’s contact list

Sunday, 14 April 13

Page 44: Native Javascript apps with PhoneGap

Device

44

•Name•Cordova version•Platform•UUID•Version•Model

Sunday, 14 April 13

Page 45: Native Javascript apps with PhoneGap

Events

45

Handles application state(deviceready, paused etc)

Sunday, 14 April 13

Page 46: Native Javascript apps with PhoneGap

File

46

Filesystem bridging, based on the W3C File API

Sunday, 14 April 13

Page 47: Native Javascript apps with PhoneGap

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

Globalization

48

Currency, language, date time

Sunday, 14 April 13

Page 49: Native Javascript apps with PhoneGap

InAppBrowser

49

The browser opened by window.open()

Sunday, 14 April 13

Page 50: Native Javascript apps with PhoneGap

Notification

50

•Alert•Confirmation•Beep•Vibrate

Sunday, 14 April 13

Page 51: Native Javascript apps with PhoneGap

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

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

Why reinvent the wheelUser plugins

53

Sunday, 14 April 13

Page 54: Native Javascript apps with PhoneGap

Pick what you want

54https://github.com/phonegap/phonegap-plugins

Sunday, 14 April 13

Page 55: Native Javascript apps with PhoneGap

QUESTIONS

55

Sunday, 14 April 13

Page 56: Native Javascript apps with PhoneGap

[email protected]@Martin1982

Thank you for listening

Sunday, 14 April 13