Your SlideShare is downloading. ×
Introduction to PhoneGap and PhoneGap Build
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to PhoneGap and PhoneGap Build

1,122
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 …

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,122
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
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 KeijzerDutch Mobile Conference - June 7, 2013 - The NetherlandsNative Javascript apps withFriday, 7 June 13
  • 2. Introduction2Friday, 7 June 13
  • 3. About meMartin de KeijzerDutch web developer3@Martin1982PHPBenelux Board MemberWorking for Ibuildingshttp://www.martindekeijzer.nlFriday, 7 June 13
  • 4. What is PhoneGap?4Friday, 7 June 13
  • 5. What is PhoneGap5A way to wrap you HTMLapp as a native application.Friday, 7 June 13
  • 6. What is PhoneGap6A way to bridge ‘Native’ functionality to a Javascript APIFriday, 7 June 13
  • 7. Mission7PhoneGap’s mission is forPhoneGap to cease to exist!Friday, 7 June 13
  • 8. WTF?!?!?Cordova, PhoneGap8Friday, 7 June 13
  • 9. History class9Friday, 7 June 13
  • 10. PhoneGap Pre-Adobe10byFriday, 7 June 13
  • 11. PhoneGap acquisistion by Adobe11Acquired byDonated toFriday, 7 June 13
  • 12. Acquisition by Adobe12“PhoneGap” “Callback”“Cordova”Friday, 7 June 13
  • 13. PhoneGap now13Where changes get committedFriday, 7 June 13
  • 14. PhoneGap now14PhoneGap releases, still identical toApache CordovaFriday, 7 June 13
  • 15. In conclusion15You’ll use PhoneGap!Friday, 7 June 13
  • 16. Getting ready for lift-offInstalling PhoneGap16Friday, 7 June 13
  • 17. Getting PhoneGap17http://phonegap.com/download/Friday, 7 June 13
  • 18. Lib is where the magic lives18“lib” contains all supportedplatforms.... and♥ ♥ ♥ ♥ CLI tools ♥ ♥ ♥ ♥Friday, 7 June 13
  • 19. XCode Command Line Tools19Friday, 7 June 13
  • 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. Creating your first project21XCode ProjectFriday, 7 June 13
  • 22. The app22Friday, 7 June 13
  • 23. First Run23Friday, 7 June 13
  • 24. Android24Friday, 7 June 13
  • 25. BlackBerry WebWorks25Friday, 7 June 13
  • 26. BlackBerry WebWorks26Set the project.propertiesand run:ant qnx load-simulatorFriday, 7 June 13
  • 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. Let’s take it easyPhoneGap build28Friday, 7 June 13
  • 29. Creating builds using platform specific tools29The pain:Running updates and checking requirements overand over again!Friday, 7 June 13
  • 30. Creating builds using platform specific tools30Friday, 7 June 13
  • 31. PhoneGap build to the rescue!31http://build.phonegap.comFriday, 7 June 13
  • 32. PhoneGap build in a nutshell32Friday, 7 June 13
  • 33. Getting started33ORFriday, 7 June 13
  • 34. Getting started34Friday, 7 June 13
  • 35. Getting started35ORRepository that represents“www”Zip-file that represents“www”Friday, 7 June 13
  • 36. Getting started36Friday, 7 June 13
  • 37. The power of PhoneGap Build37TitleCodeMetadata TestFriday, 7 June 13
  • 38. Build statusses38Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action requiredFriday, 7 June 13
  • 39. Build errors39Friday, 7 June 13
  • 40. Working in teams40Friday, 7 June 13
  • 41. Building like a pro41config.xmlW3C Widget Specificationhttps://gist.github.com/Martin1982/5063962Friday, 7 June 13
  • 42. When the web just doesn’t sufficePlug-ins42Friday, 7 June 13
  • 43. Accelerometer43Get device movementin an X,Y, Z space.Friday, 7 June 13
  • 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. Compass45API to detect which way adevice user is pointingFriday, 7 June 13
  • 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. Contacts47Access the user’s contact listFriday, 7 June 13
  • 48. Device48•Name•Cordova version•Platform•UUID•Version•ModelFriday, 7 June 13
  • 49. Events49Handles application stateFriday, 7 June 13
  • 50. File50Filesystem bridging, basedon the W3C File APIFriday, 7 June 13
  • 51. Geolocation51Caution: Already supported by browsers!API to get the latitudes andlongitudes of the device.Friday, 7 June 13
  • 52. Globalization52Currency, language, date & timeFriday, 7 June 13
  • 53. InAppBrowser53The browser opened bywindow.open()Extremely useful to openexternal links!Friday, 7 June 13
  • 54. Notification54•Alert•Confirmation•Beep•VibrateFriday, 7 June 13
  • 55. Splashscreen55No matter how beautiful your splash screen is,eventually you’ll need to show and hide itFriday, 7 June 13
  • 56. Storage56SQL storage based on the W3CWebSQL specification.Caution; WebSQL is no longer maintainedIndexedDB is the new superhero!Friday, 7 June 13
  • 57. Why reinvent the wheelUser plugins57Friday, 7 June 13
  • 58. Pick what you want58https://github.com/phonegap/phonegap-pluginsFriday, 7 June 13
  • 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. Now it’s your turnConclusion60Friday, 7 June 13
  • 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. Start playingSmall demo app available from:http://martin1982.github.io/dmc2013demo/62Friday, 7 June 13
  • 63. QUESTIONS63Friday, 7 June 13
  • 64. mdkeijzer@ibuildings.nl@Martin1982Thank you for listeningFriday, 7 June 13

×