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.

1. Phonegap
Martin de Keijzer
Codemotion- April 11, 2014 - The Netherlands
Native Javascript apps with

2. Introduction
2

3. About me
Martin de Keijzer
Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl

4. What is PhoneGap?
4

5. 5
What is PhoneGap
A way to wrap your HTML
app as a native application.

6. 6
What is PhoneGap
A way to bridge ‘Native’ functionality to a Javascript API

7. 7
Mission
PhoneGap’s mission is for
PhoneGap to cease to exist!

8. 8
Cordova, PhoneGap
WTF?!?!?

9. History class
9

10. PhoneGap Pre-Adobe
10
by

11. PhoneGap acquisistion by Adobe
11
Acquired by
Donated to

12. Acquisition by Adobe
12
“PhoneGap” “Callback”
“Cordova”

13. PhoneGap now
13
Where changes get committed

14. PhoneGap now
14
PhoneGap releases, still identical to
Apache Cordova

15. In conclusion
15
You’ll use PhoneGap!

16. 16
Running PhoneGap
Getting ready for lift-off

17. Getting the PhoneGap software
17
sudo npm install -g phonegap

18. Creating a project
18
phonegap create <projectname>

19. Running the scaffold
19
phonegap run ios

20. 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!

21. 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

22. When the web just doesn’t suffice
Plug-ins
22

23. 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. 24
Notification
•Alert
•Confirmation
•Beep
•Vibrate

25. Notification
navigator.notification.vibrate(2500);
25

26. 26
Camera, Capture & Media
Use the device’s library,
camera and microphone to
work with local audio, video
and images.

27. Camera, Capture & Media
function 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. 28
Contacts
Access the user’s contact list

29. 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. 30
InAppBrowser
The browser opened by
window.open()
Extremely useful to open
external links!

31. InAppBrowser
var ref = window.open('http://apache.org', '_blank',
‘location=yes');
!
// close InAppBrowser after 5 seconds
setTimeout(function() {
ref.close();
}, 5000);
31

32. 32
Full API Documentation
http://docs.phonegap.com

33. Why reinvent the wheel
User plugins
33

34. 34
Pick what you want
http://plugins.cordova.io/#/_browse/all

35. Go Pro
Create your own plugins
35
Disclaimer: Native knowledge is a requirement

36. Let’s take it easy
PhoneGap build
36

37. 37
PhoneGap build to the rescue!
http://build.phonegap.com

38. 38
PhoneGap build in a nutshell

39. 39
Getting started
OR

40. 40
Getting started

41. 41
Getting started
OR
Repository that represents
“www”
Zip-file that represents
“www”

42. 42
Getting started

43. 43
The power of PhoneGap Build
Title
Code
Metadata Test

44. 44
Build statusses
Grey: Still building, be patient
Blue-ish: Build succeeded, click to download
Red: Build error, action required

45. 45
Build errors

46. 46
Working in teams

47. 47
Building like a pro
config.xml
W3C Widget Specification
https://gist.github.com/Martin1982/5063962

48. Now it’s your turn
Conclusion
48

49. 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

50. QUESTIONS
50

51. 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