Native Javascript apps with PhoneGap by Martin de Keijzer

  • 658 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
658
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
10
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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