PhonegapMartin de KeijzerCode Motion Berlin - May 11, 2013 - GermanyNative Javascript apps withSaturday, 11 May 13
Introduction2Saturday, 11 May 13
About meMartin de KeijzerDutch web developer3@Martin1982PHPBenelux Board MemberWorking for Ibuildingshttp://www.martindeke...
What is PhoneGap?4Saturday, 11 May 13
What is PhoneGap5A way to wrap you HTMLapp as a native application.Saturday, 11 May 13
What is PhoneGap6A way to bridge ‘Native’ functionality to a Javascript APISaturday, 11 May 13
Mission7PhoneGap’s mission is forPhoneGap to cease to exist!Saturday, 11 May 13
WTF?!?!?Cordova, PhoneGap8Saturday, 11 May 13
PhoneGap Pre-Adobe9bySaturday, 11 May 13
PhoneGap acquisistion by Adobe10Acquired byDonated toSaturday, 11 May 13
Acquisition by Adobe11“PhoneGap” “Callback”“Cordova”Saturday, 11 May 13
PhoneGap now12Where changes get committedSaturday, 11 May 13
PhoneGap now13PhoneGap releases, still identical toApache CordovaSaturday, 11 May 13
In conclusion14You’ll use PhoneGap!Saturday, 11 May 13
Getting ready for lift-offInstalling PhoneGap15Saturday, 11 May 13
Getting PhoneGap16http://phonegap.com/download/Saturday, 11 May 13
Lib is where the magic lives17“lib” contains all supportedplatforms.... and a♥ ♥ ♥ ♥ CLI tool ♥ ♥ ♥ ♥Saturday, 11 May 13
XCode Command Line Tools18Saturday, 11 May 13
Creating your first project19$ ./path/to/cordova-ios/bin/create/path/to/my_new_cordova_projectcom.example.cordova_project_...
Creating your first project20XCode ProjectSaturday, 11 May 13
The app21Saturday, 11 May 13
First Run22Saturday, 11 May 13
Ready for action23Always use the “www” folder & always assume yourapp is running from a filesystem instead of a web server!...
Let’s take it easyPhoneGap build24Saturday, 11 May 13
Creating builds using XCode25The pain:Running updates and checking requirements overand over again!Saturday, 11 May 13
Creating builds using XCode26Saturday, 11 May 13
PhoneGap build to the rescue!27http://build.phonegap.comSaturday, 11 May 13
PhoneGap build in a nutshell28Saturday, 11 May 13
Getting started29ORSaturday, 11 May 13
Getting started30Saturday, 11 May 13
Getting started31ORRepository that represents“www”Zip-file that represents“www”Saturday, 11 May 13
Getting started32Saturday, 11 May 13
The power of PhoneGap Build33TitleCodeMetadata TestSaturday, 11 May 13
Build statusses34Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action requ...
Build errors35Saturday, 11 May 13
Working in teams36Saturday, 11 May 13
Building like a pro37config.xmlW3C Widget Specificationhttps://gist.github.com/Martin1982/5063962Saturday, 11 May 13
When the web just doesn’t sufficePlug-ins38Saturday, 11 May 13
Accelerometer39Get device movementin an X,Y, Z space.Saturday, 11 May 13
Camera & Capture & Media40Use the device’s library,camera and microphone towork with local audio, videoand images.<input t...
Compass41API to detect which way adevice user is pointingSaturday, 11 May 13
Connection42See if a user is connected andinspect the type of connection:Wifi, xG, EthernetCaution navigator.isOnline is yo...
Contacts43Access the user’s contact listSaturday, 11 May 13
Device44•Name•Cordova version•Platform•UUID•Version•ModelSaturday, 11 May 13
Events45Handles application state(deviceready, paused etc)Saturday, 11 May 13
File46Filesystem bridging, basedon the W3C File APISaturday, 11 May 13
Geolocation47Caution: Already supported by browsers!API to get the latitudes andlongitudes of the device.Saturday, 11 May 13
Globalization48Currency, language, date timeSaturday, 11 May 13
InAppBrowser49The browser opened bywindow.open()Saturday, 11 May 13
Notification50•Alert•Confirmation•Beep•VibrateSaturday, 11 May 13
Splashscreen51No matter how beautiful your splash screen is,eventually you’ll need to show and hide itSaturday, 11 May 13
Storage52SQL storage based on the W3CWebSQL specification.Caution; WebSQL is no longer maintainedIndexedDB is the new super...
Why reinvent the wheelUser plugins53Saturday, 11 May 13
Pick what you want54https://github.com/phonegap/phonegap-pluginsSaturday, 11 May 13
QUESTIONS55Saturday, 11 May 13
mdkeijzer@ibuildings.nl@Martin1982Thank you for listeningSaturday, 11 May 13
Upcoming SlideShare
Loading in...5
×

Native Javascript apps with PhoneGap by Martin de Keijzer

736

Published on

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 and deploying your app via PhoneGap Build which easily builds your application for all platforms.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
736
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Native Javascript apps with PhoneGap by Martin de Keijzer"

  1. 1. PhonegapMartin de KeijzerCode Motion Berlin - May 11, 2013 - GermanyNative Javascript apps withSaturday, 11 May 13
  2. 2. Introduction2Saturday, 11 May 13
  3. 3. About meMartin de KeijzerDutch web developer3@Martin1982PHPBenelux Board MemberWorking for Ibuildingshttp://www.martindekeijzer.nlSaturday, 11 May 13
  4. 4. What is PhoneGap?4Saturday, 11 May 13
  5. 5. What is PhoneGap5A way to wrap you HTMLapp as a native application.Saturday, 11 May 13
  6. 6. What is PhoneGap6A way to bridge ‘Native’ functionality to a Javascript APISaturday, 11 May 13
  7. 7. Mission7PhoneGap’s mission is forPhoneGap to cease to exist!Saturday, 11 May 13
  8. 8. WTF?!?!?Cordova, PhoneGap8Saturday, 11 May 13
  9. 9. PhoneGap Pre-Adobe9bySaturday, 11 May 13
  10. 10. PhoneGap acquisistion by Adobe10Acquired byDonated toSaturday, 11 May 13
  11. 11. Acquisition by Adobe11“PhoneGap” “Callback”“Cordova”Saturday, 11 May 13
  12. 12. PhoneGap now12Where changes get committedSaturday, 11 May 13
  13. 13. PhoneGap now13PhoneGap releases, still identical toApache CordovaSaturday, 11 May 13
  14. 14. In conclusion14You’ll use PhoneGap!Saturday, 11 May 13
  15. 15. Getting ready for lift-offInstalling PhoneGap15Saturday, 11 May 13
  16. 16. Getting PhoneGap16http://phonegap.com/download/Saturday, 11 May 13
  17. 17. Lib is where the magic lives17“lib” contains all supportedplatforms.... and a♥ ♥ ♥ ♥ CLI tool ♥ ♥ ♥ ♥Saturday, 11 May 13
  18. 18. XCode Command Line Tools18Saturday, 11 May 13
  19. 19. Creating your first project19$ ./path/to/cordova-ios/bin/create/path/to/my_new_cordova_projectcom.example.cordova_project_nameCordovaProjectNameSaturday, 11 May 13
  20. 20. Creating your first project20XCode ProjectSaturday, 11 May 13
  21. 21. The app21Saturday, 11 May 13
  22. 22. First Run22Saturday, 11 May 13
  23. 23. Ready for action23Always use the “www” folder & always assume yourapp is running from a filesystem instead of a web server!Saturday, 11 May 13
  24. 24. Let’s take it easyPhoneGap build24Saturday, 11 May 13
  25. 25. Creating builds using XCode25The pain:Running updates and checking requirements overand over again!Saturday, 11 May 13
  26. 26. Creating builds using XCode26Saturday, 11 May 13
  27. 27. PhoneGap build to the rescue!27http://build.phonegap.comSaturday, 11 May 13
  28. 28. PhoneGap build in a nutshell28Saturday, 11 May 13
  29. 29. Getting started29ORSaturday, 11 May 13
  30. 30. Getting started30Saturday, 11 May 13
  31. 31. Getting started31ORRepository that represents“www”Zip-file that represents“www”Saturday, 11 May 13
  32. 32. Getting started32Saturday, 11 May 13
  33. 33. The power of PhoneGap Build33TitleCodeMetadata TestSaturday, 11 May 13
  34. 34. Build statusses34Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action requiredSaturday, 11 May 13
  35. 35. Build errors35Saturday, 11 May 13
  36. 36. Working in teams36Saturday, 11 May 13
  37. 37. Building like a pro37config.xmlW3C Widget Specificationhttps://gist.github.com/Martin1982/5063962Saturday, 11 May 13
  38. 38. When the web just doesn’t sufficePlug-ins38Saturday, 11 May 13
  39. 39. Accelerometer39Get device movementin an X,Y, Z space.Saturday, 11 May 13
  40. 40. Camera & Capture & Media40Use the device’s library,camera and microphone towork with local audio, videoand images.<input type="file" accept="image/*" capture="camera">Don’t forget iOS 6 supports:Saturday, 11 May 13
  41. 41. Compass41API to detect which way adevice user is pointingSaturday, 11 May 13
  42. 42. Connection42See if a user is connected andinspect the type of connection:Wifi, xG, EthernetCaution navigator.isOnline is your close friendSaturday, 11 May 13
  43. 43. Contacts43Access the user’s contact listSaturday, 11 May 13
  44. 44. Device44•Name•Cordova version•Platform•UUID•Version•ModelSaturday, 11 May 13
  45. 45. Events45Handles application state(deviceready, paused etc)Saturday, 11 May 13
  46. 46. File46Filesystem bridging, basedon the W3C File APISaturday, 11 May 13
  47. 47. Geolocation47Caution: Already supported by browsers!API to get the latitudes andlongitudes of the device.Saturday, 11 May 13
  48. 48. Globalization48Currency, language, date timeSaturday, 11 May 13
  49. 49. InAppBrowser49The browser opened bywindow.open()Saturday, 11 May 13
  50. 50. Notification50•Alert•Confirmation•Beep•VibrateSaturday, 11 May 13
  51. 51. Splashscreen51No matter how beautiful your splash screen is,eventually you’ll need to show and hide itSaturday, 11 May 13
  52. 52. Storage52SQL storage based on the W3CWebSQL specification.Caution; WebSQL is no longer maintainedIndexedDB is the new superhero!Saturday, 11 May 13
  53. 53. Why reinvent the wheelUser plugins53Saturday, 11 May 13
  54. 54. Pick what you want54https://github.com/phonegap/phonegap-pluginsSaturday, 11 May 13
  55. 55. QUESTIONS55Saturday, 11 May 13
  56. 56. mdkeijzer@ibuildings.nl@Martin1982Thank you for listeningSaturday, 11 May 13
  1. A particular slide catching your eye?

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

×