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

Like this? Share it with your network

Share

Intro to PhoneGap

on

  • 1,406 views

 

Statistics

Views

Total Views
1,406
Views on SlideShare
1,406
Embed Views
0

Actions

Likes
3
Downloads
29
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Intro to PhoneGap Presentation 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