Your SlideShare is downloading. ×
Intro to PhoneGap
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

Intro to PhoneGap

1,041

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,041
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
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

    ×