0
Phonegap
Martin de Keijzer
Codemotion- 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.mar...
What is PhoneGap?
4
5
What is PhoneGap
A way to wrap your HTML
app as a native application.
6
What is PhoneGap
A way to bridge ‘Native’ functionality to a Javascript API
7
Mission
PhoneGap’s mission is for 	

PhoneGap to cease to exist!
8
Cordova, PhoneGap
WTF?!?!?
History class
9
PhoneGap Pre-Adobe
10
by
PhoneGap acquisistion by Adobe
11
Acquired by
Donated 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 PhoneGap
Getting 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...
PhoneGap per platform commands
21
install - install a platform SDK to the project	

run - run your project on a certain pl...
When the web just doesn’t suffice
Plug-ins
22
Plugin management
Add a new plugin:
phonegap plugin add org.apache.cordova.inappbrowser
!
!
!
List added plugin(s):
phoneg...
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 & Media
function onSuccess(imageData) { // Do stuff with the image!
}
function onFail(message) {
alert('Fa...
28
Contacts
Access the user’s contact list
Contacts
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady,
false);
!
// ...
30
InAppBrowser
The browser opened by
window.open()
Extremely useful to open	

external links!
InAppBrowser
var ref = window.open('http://apache.org', '_blank',
‘location=yes');
!
// close InAppBrowser after 5 seconds...
32
Full API Documentation
http://docs.phonegap.com
Why reinvent the wheel
User 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 easy
PhoneGap 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, act...
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 turn
Conclusion
48
Conclusion
49
Package web applications as native apps
Enrich applications with native plugins
Quick deployment with PhoneG...
QUESTIONS
50
mdkeijzer@ibuildings.nl
@Martin1982
Thank you for listening
Creative Commons License
This work is licensed under a Creativ...
Upcoming SlideShare
Loading in...5
×

Native Javascript apps with Phonegap - De Keijzer

588

Published on

Slides from Martin De Keijzer talk @ codemotion rome 2014

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
588
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Native Javascript apps with Phonegap - De Keijzer"

  1. 1. Phonegap Martin de Keijzer Codemotion- April 11, 2014 - The Netherlands Native Javascript apps with
  2. 2. Introduction 2
  3. 3. About me Martin de Keijzer Dutch web developer 3 @Martin1982 PHPBenelux Board Member Working for Ibuildings http://www.martindekeijzer.nl
  4. 4. What is PhoneGap? 4
  5. 5. 5 What is PhoneGap A way to wrap your HTML app as a native application.
  6. 6. 6 What is PhoneGap A way to bridge ‘Native’ functionality to a Javascript API
  7. 7. 7 Mission PhoneGap’s mission is for PhoneGap to cease to exist!
  8. 8. 8 Cordova, PhoneGap WTF?!?!?
  9. 9. History class 9
  10. 10. PhoneGap Pre-Adobe 10 by
  11. 11. PhoneGap acquisistion by Adobe 11 Acquired by Donated to
  12. 12. Acquisition by Adobe 12 “PhoneGap” “Callback” “Cordova”
  13. 13. PhoneGap now 13 Where changes get committed
  14. 14. PhoneGap now 14 PhoneGap releases, still identical to Apache Cordova
  15. 15. In conclusion 15 You’ll use PhoneGap!
  16. 16. 16 Running PhoneGap Getting ready for lift-off
  17. 17. Getting the PhoneGap software 17 sudo npm install -g phonegap
  18. 18. Creating a project 18 phonegap create <projectname>
  19. 19. Running the scaffold 19 phonegap run ios
  20. 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. 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. 22. When the web just doesn’t suffice Plug-ins 22
  23. 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. 24 Notification •Alert •Confirmation •Beep •Vibrate
  25. 25. Notification navigator.notification.vibrate(2500); 25
  26. 26. 26 Camera, Capture & Media Use the device’s library, camera and microphone to work with local audio, video and images.
  27. 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. 28 Contacts Access the user’s contact list
  29. 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. 30 InAppBrowser The browser opened by window.open() Extremely useful to open external links!
  31. 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. 32 Full API Documentation http://docs.phonegap.com
  33. 33. Why reinvent the wheel User plugins 33
  34. 34. 34 Pick what you want http://plugins.cordova.io/#/_browse/all
  35. 35. Go Pro Create your own plugins 35 Disclaimer: Native knowledge is a requirement
  36. 36. Let’s take it easy PhoneGap build 36
  37. 37. 37 PhoneGap build to the rescue! http://build.phonegap.com
  38. 38. 38 PhoneGap build in a nutshell
  39. 39. 39 Getting started OR
  40. 40. 40 Getting started
  41. 41. 41 Getting started OR Repository that represents
 “www” Zip-file that represents
 “www”
  42. 42. 42 Getting started
  43. 43. 43 The power of PhoneGap Build Title Code Metadata Test
  44. 44. 44 Build statusses Grey: Still building, be patient Blue-ish: Build succeeded, click to download Red: Build error, action required
  45. 45. 45 Build errors
  46. 46. 46 Working in teams
  47. 47. 47 Building like a pro config.xml W3C Widget Specification https://gist.github.com/Martin1982/5063962
  48. 48. Now it’s your turn Conclusion 48
  49. 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. 50. QUESTIONS 50
  51. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×