Introduction to PhoneGap and PhoneGap Build

1,737 views

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

Published in: Technology, Business

Introduction to PhoneGap and PhoneGap Build

  1. 1. PhonegapMartin de KeijzerDutch Mobile Conference - June 7, 2013 - The NetherlandsNative Javascript apps withFriday, 7 June 13
  2. 2. Introduction2Friday, 7 June 13
  3. 3. About meMartin de KeijzerDutch web developer3@Martin1982PHPBenelux Board MemberWorking for Ibuildingshttp://www.martindekeijzer.nlFriday, 7 June 13
  4. 4. What is PhoneGap?4Friday, 7 June 13
  5. 5. What is PhoneGap5A way to wrap you HTMLapp as a native application.Friday, 7 June 13
  6. 6. What is PhoneGap6A way to bridge ‘Native’ functionality to a Javascript APIFriday, 7 June 13
  7. 7. Mission7PhoneGap’s mission is forPhoneGap to cease to exist!Friday, 7 June 13
  8. 8. WTF?!?!?Cordova, PhoneGap8Friday, 7 June 13
  9. 9. History class9Friday, 7 June 13
  10. 10. PhoneGap Pre-Adobe10byFriday, 7 June 13
  11. 11. PhoneGap acquisistion by Adobe11Acquired byDonated toFriday, 7 June 13
  12. 12. Acquisition by Adobe12“PhoneGap” “Callback”“Cordova”Friday, 7 June 13
  13. 13. PhoneGap now13Where changes get committedFriday, 7 June 13
  14. 14. PhoneGap now14PhoneGap releases, still identical toApache CordovaFriday, 7 June 13
  15. 15. In conclusion15You’ll use PhoneGap!Friday, 7 June 13
  16. 16. Getting ready for lift-offInstalling PhoneGap16Friday, 7 June 13
  17. 17. Getting PhoneGap17http://phonegap.com/download/Friday, 7 June 13
  18. 18. Lib is where the magic lives18“lib” contains all supportedplatforms.... and♥ ♥ ♥ ♥ CLI tools ♥ ♥ ♥ ♥Friday, 7 June 13
  19. 19. XCode Command Line Tools19Friday, 7 June 13
  20. 20. Creating your first project20$ ./path/to/cordova-ios/bin/create/path/to/my_new_cordova_projectcom.example.cordova_project_nameCordovaProjectNameFriday, 7 June 13
  21. 21. Creating your first project21XCode ProjectFriday, 7 June 13
  22. 22. The app22Friday, 7 June 13
  23. 23. First Run23Friday, 7 June 13
  24. 24. Android24Friday, 7 June 13
  25. 25. BlackBerry WebWorks25Friday, 7 June 13
  26. 26. BlackBerry WebWorks26Set the project.propertiesand run:ant qnx load-simulatorFriday, 7 June 13
  27. 27. Ready for action27Always use the “www” folder & always assume yourapp is running from a filesystem instead of a web server!On Android it’s “assets/www”Friday, 7 June 13
  28. 28. Let’s take it easyPhoneGap build28Friday, 7 June 13
  29. 29. Creating builds using platform specific tools29The pain:Running updates and checking requirements overand over again!Friday, 7 June 13
  30. 30. Creating builds using platform specific tools30Friday, 7 June 13
  31. 31. PhoneGap build to the rescue!31http://build.phonegap.comFriday, 7 June 13
  32. 32. PhoneGap build in a nutshell32Friday, 7 June 13
  33. 33. Getting started33ORFriday, 7 June 13
  34. 34. Getting started34Friday, 7 June 13
  35. 35. Getting started35ORRepository that represents“www”Zip-file that represents“www”Friday, 7 June 13
  36. 36. Getting started36Friday, 7 June 13
  37. 37. The power of PhoneGap Build37TitleCodeMetadata TestFriday, 7 June 13
  38. 38. Build statusses38Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action requiredFriday, 7 June 13
  39. 39. Build errors39Friday, 7 June 13
  40. 40. Working in teams40Friday, 7 June 13
  41. 41. Building like a pro41config.xmlW3C Widget Specificationhttps://gist.github.com/Martin1982/5063962Friday, 7 June 13
  42. 42. When the web just doesn’t sufficePlug-ins42Friday, 7 June 13
  43. 43. Accelerometer43Get device movementin an X,Y, Z space.Friday, 7 June 13
  44. 44. Camera & Capture & Media44Use 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:Friday, 7 June 13
  45. 45. Compass45API to detect which way adevice user is pointingFriday, 7 June 13
  46. 46. Connection46See if a user is connected andinspect the type of connection:Wifi, xG, EthernetCaution navigator.isOnline is your close friendFriday, 7 June 13
  47. 47. Contacts47Access the user’s contact listFriday, 7 June 13
  48. 48. Device48•Name•Cordova version•Platform•UUID•Version•ModelFriday, 7 June 13
  49. 49. Events49Handles application stateFriday, 7 June 13
  50. 50. File50Filesystem bridging, basedon the W3C File APIFriday, 7 June 13
  51. 51. Geolocation51Caution: Already supported by browsers!API to get the latitudes andlongitudes of the device.Friday, 7 June 13
  52. 52. Globalization52Currency, language, date & timeFriday, 7 June 13
  53. 53. InAppBrowser53The browser opened bywindow.open()Extremely useful to openexternal links!Friday, 7 June 13
  54. 54. Notification54•Alert•Confirmation•Beep•VibrateFriday, 7 June 13
  55. 55. Splashscreen55No matter how beautiful your splash screen is,eventually you’ll need to show and hide itFriday, 7 June 13
  56. 56. Storage56SQL storage based on the W3CWebSQL specification.Caution; WebSQL is no longer maintainedIndexedDB is the new superhero!Friday, 7 June 13
  57. 57. Why reinvent the wheelUser plugins57Friday, 7 June 13
  58. 58. Pick what you want58https://github.com/phonegap/phonegap-pluginsFriday, 7 June 13
  59. 59. Creating your own plugin59window.echo = function(str, callback) {    cordova.exec(callback, function(err) {        callback(Nothing to echo.);    }, "Echo", "echo", [str]);};Define the Javascript MethodUse Cordova.exec and give the followingarguments:JavaScript Success callback functionJavaScript Error handling callback functionNative class to map toNative method to map toNative method argumentsFriday, 7 June 13
  60. 60. Now it’s your turnConclusion60Friday, 7 June 13
  61. 61. Conclusion61Package web applications as native appsEnrich applications with native pluginsQuick deployment with PhoneGap Build VS. fine-tuned deployment with PhoneGap CLI tools / IDEIf it doesn’t fit the bill? Download or write your ownplugin!Always remember; your app runs as a localapplication straight from the filesystem as in file://Friday, 7 June 13
  62. 62. Start playingSmall demo app available from:http://martin1982.github.io/dmc2013demo/62Friday, 7 June 13
  63. 63. QUESTIONS63Friday, 7 June 13
  64. 64. mdkeijzer@ibuildings.nl@Martin1982Thank you for listeningFriday, 7 June 13

×