Intro to PhoneGap
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,436
On Slideshare
1,436
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
29
Comments
0
Likes
3

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://sarthony.deviantart.com/art/Two-worlds-76448188?q=boost%3Apopular%20two%20worlds&qo=45\n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n

Transcript

  • 1. Developing with PhonegapBuilding mobile applications with HTML/JS
  • 2. Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
  • 3. Why PhoneGap?
  • 4. The moral reason:The web is awesome
  • 5. The realistic reason: Cross platformapplications with HTML/CSS/JS will be faster and easier
  • 6. What is PhoneGap?
  • 7. Your Code
  • 8. Your CodeNative Web View
  • 9. Your CodeNative Web View Native APIs
  • 10. Your Code Native Web View Native APIsNative App - .apk, .ipa, etc
  • 11. PhoneGap uses the native browseron the device to render the HTML/ CSS/JS Keep in mind that can affect theexperience. It also keeps apps nice and small
  • 12. PhoneGap uses thenative projectformat for eachplatform.Open, emulate,and test fromwithin the nativedevelopmentenvironment!
  • 13. Because it’s usingthe native projectsit’s fullyextendable.
  • 14. PhoneGap providesa JavaScript Librarythat reaches outinto the nativeAPIs.That meansanything thedevice supports isdoable.
  • 15. PhoneGap iscompletely opensource and is partof the Apachefoundation.
  • 16. The entire projectis available onGithubhttps://github.com/cordova
  • 17. Getting Started
  • 18. bin/create /Developer/Sites/demoapp com.digitalbackcountry DemoApp
  • 19. Demo:Hello World
  • 20. Quick segue: mobile web apps versusmobile applications
  • 21. Very important tokeep in mind thatwe’re building amobile app, not amobile web app.Let’s look atjQuery Mobile
  • 22. You can use ANYframework youwant, but try todesign for an app.
  • 23. Diving into thePhoneGap APIs
  • 24. - Accelerometer - Camera - CaptureOut of the box, - Compass - ConnectionPhoneGap - Contacts - Deviceprovides support - Eventsfor a number of - - File Geolocationbasic device APIs - - Media Network - Notification - Storage
  • 25. capturePhotoEdit: function() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); },Camera API onPhotoDataSucess: function(imageData) { var smallImage = document.getElementById(smallImage);example smallImage.style.display = block; smallImage.src = "data:image/jpeg;base64," + imageData; }, onFail: function(message) { alert(Failed because: + message); }
  • 26. Demo:PhoneGap API Explorer
  • 27. Debugging
  • 28. It’s all just HTML/JS, so you can useyour browser!Take advantage ofChrome Developertools/Firebug totest your app’s UI.
  • 29. But what about Device APIs?Because we’re in the web view, there is no way to do line-by-line debugging.
  • 30. Luckily we haveWeinre, which letsus debug andmanipulate theDOM from our PCs.
  • 31. Weinre is built withnode.JS and acts asa server and usesthe developer toolsfrom Chrome toprovide hooks intothe mobile app.
  • 32. Drop in a <script>tag on a remoteserver and Weinrewill let you use theDeveloper Tools onyour apps.Requires internetaccess, so keepthat in mind.
  • 33. But, a much easier way:http://debug.phonegap.com/
  • 34. Demo:debug.phonegap
  • 35. Extending Phonegap
  • 36. For addedfunctionalityPhoneGap providesa plug-inmechanism.Includes OS-specific code/libraries and the JSto use it inPhoneGapSome of thehelpful ones:PayPal, Facebook,Push Notification
  • 37. Plug-is are one ofthe areas thatshow off the powerof a hybrid web/native approach.There are a ton ofnative-centricSDKs (likeFacebook) thatprovide a greatnative experience.We can use those!
  • 38. Available athttps://github.com/phonegap/phonegap-plugins
  • 39. FinalConsiderations
  • 40. Remember that we’re on different platforms
  • 41. Versus http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.html
  • 42. Demo:PhoneGap in Action
  • 43. DeployingPhoneGap Apps
  • 44. build.phonegap.com
  • 45. The Problem:You’re building a cross-platform app, but dealing with a lot of native projects
  • 46. The Solution: PhoneGap Build - create distributionbinaries for multiple platforms in one place
  • 47. Build includes gitsupport so you canuse git and hostprojects onPhoneGap or builda project fromGithub.
  • 48. Build lets youdefine individualsas tester/developerwhich changespermissions on theprojectaccordingly.
  • 49. You can use Build as your testingdistribution as well by making the download pages public.
  • 50. Will (soon) supportpopular plugins sothat you can buildplugins right intothe build process.
  • 51. Supports multiplePhoneGap versionsso you can target awide range ofdevices.
  • 52. Demo:PhoneGap Build
  • 53. Q&A Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart