Intro to PhoneGap
4 likes1,315 views
The document discusses developing mobile applications using PhoneGap, which allows creating cross-platform mobile apps using HTML, CSS, and JavaScript. PhoneGap uses a native web view to render the application, while also providing access to device APIs through a JavaScript library. This allows building apps that can be deployed to various mobile platforms like iOS and Android from a single codebase. The document covers getting started, debugging techniques, extending apps through plugins, and deploying finished apps through services like PhoneGap Build.
Intro to PhoneGap
- 1. Developing with Phonegap Building mobile applications with HTML/JS
- 2. Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Things I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
- 4. The moral reason: The web is awesome
- 5. The realistic reason: Cross platform applications with HTML/ CSS/JS will be faster and easier
- 8. Your Code
- 9. Your Code Native Web View
- 10. Your Code Native Web View Native APIs
- 11. Your Code Native Web View Native APIs Native App - .apk, .ipa, etc
- 12. PhoneGap uses the native browser on the device to render the HTML/ CSS/JS Keep in mind that can affect the experience. It also keeps apps nice and small
- 13. PhoneGap uses the native project format for each platform. Open, emulate, and test from within the native development environment!
- 14. Because it’s using the native projects it’s fully extendable.
- 15. PhoneGap provides a JavaScript Library that reaches out into the native APIs. That means anything the device supports is doable.
- 16. PhoneGap is completely open source and is part of the Apache foundation.
- 17. The entire project is available on Github https:// github.com/ cordova
- 18. Getting Started
- 19. bin/create /Developer/Sites/demoapp com.digitalbackcountry DemoApp
- 21. Quick segue: mobile web apps versus mobile applications
- 22. Very important to keep in mind that we’re building a mobile app, not a mobile web app. Let’s look at jQuery Mobile
- 23. You can use ANY framework you want, but try to design for an app.
- 24. Diving into the PhoneGap APIs
- 25. - Accelerometer - Camera - Capture Out of the box, - Compass - Connection PhoneGap - Contacts - Device provides support - Events for a number of - - File Geolocation basic device APIs - - Media Network - Notification - Storage
- 26. 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); }
- 28. Debugging
- 29. It’s all just HTML/ JS, so you can use your browser! Take advantage of Chrome Developer tools/Firebug to test your app’s UI.
- 30. But what about Device APIs? Because we’re in the web view, there is no way to do line-by-line debugging.
- 31. Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
- 32. Weinre is built with node.JS and acts as a server and uses the developer tools from Chrome to provide hooks into the mobile app.
- 33. Drop in a <script> tag on a remote server and Weinre will let you use the Developer Tools on your apps. Requires internet access, so keep that in mind.
- 34. But, a much easier way: http://debug.phonegap.com/
- 37. For added functionality PhoneGap provides a plug-in mechanism. Includes OS- specific code/ libraries and the JS to use it in PhoneGap Some of the helpful ones: PayPal, Facebook, Push Notification
- 38. Plug-is are one of the areas that show off the power of a hybrid web/ native approach. There are a ton of native-centric SDKs (like Facebook) that provide a great native experience. We can use those!
- 41. Remember that we’re on different platforms
- 42. Versus http://developer.apple.com/library/IOs/#documentation/ UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.html
- 46. The Problem: You’re building a cross-platform app, but dealing with a lot of native projects
- 47. The Solution: PhoneGap Build - create distribution binaries for multiple platforms in one place
- 49. Build includes git support so you can use git and host projects on PhoneGap or build a project from Github.
- 50. Build lets you define individuals as tester/developer which changes permissions on the project accordingly.
- 51. You can use Build as your testing distribution as well by making the download pages public.
- 52. Will (soon) support popular plugins so that you can build plugins right into the build process.
- 53. Supports multiple PhoneGap versions so you can target a wide range of devices.
- 55. Q&A Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: http://sarthony.deviantart.com/art/Two-worlds-76448188?q=boost%3Apopular%20two%20worlds&qo=45\n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: https://github.com/callback/phonegap\n\n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: https://github.com/callback/phonegap\n\n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: https://github.com/callback/phonegap\n\n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: https://github.com/callback/phonegap\n\n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: https://github.com/callback/phonegap\n\n
- #55: \n