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

Published on

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

No Downloads
Views
Total Views
1,056
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
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

    ×