Downloaded 955 times
Uploaded byRyan Stewart
PhoneGap: Building Mobile Applications with HTML/JS
The document is a presentation by Ryan Stewart discussing PhoneGap, a framework for building cross-platform mobile applications using HTML and JavaScript. It covers the advantages of using PhoneGap, its APIs, and how to get started, as well as tips for debugging and extending functionality with plugins. The presentation emphasizes the importance of designing for mobile apps versus mobile web apps and provides resources for building and testing apps.
More Related Content
![Resume - Tina Fey[1]](https://cdn.slidesharecdn.com/ss_thumbnails/21c070a0-7ce8-4728-a9b6-673266fcaeb9-150722072830-lva1-app6891-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[ApacheCon 2016] Advanced Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/apachecon2016advancedapachecordova-160512193548-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
- 1. Developing with Phonegap Building mobile applications with HTML/JS Monday, January 23, 2012
- 2. Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Things I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff Monday, January 23, 2012
- 3. Agenda • Why PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final Considerations Monday, January 23, 2012
- 4. Why PhoneGap? Monday, January23, 2012
- 5. The moral reason: The web is awesome Monday, January 23, 2012
- 6. The realistic reason Cross platform applications with HTML/JS will be faster and easier Monday, January 23, 2012
- 7. What is PhoneGap? Monday,January 23, 2012
- 8.
- 9. Your Code Monday, January23, 2012
- 10. Your Code Native Web View Monday, January 23, 2012
- 11. Your Code Native Web View Native APIs Monday, January 23, 2012
- 12. Your Code Native Web View Native APIs Native App - .apk, .ipa, etc Monday, January 23, 2012
- 13. PhoneGap uses thenative 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 Monday, January 23, 2012
- 14. PhoneGap uses the native project format for each platform. Open, emulate, and test from within the native development environment! Monday, January 23, 2012
- 15. Because it’s usingthe native projects it’s fully extendable. Monday, January 23, 2012
- 16. PhoneGap provides a JavaScript Library that reaches out into the native APIs. That means anything the device supports is doable. Monday, January 23, 2012
- 17. PhoneGap is completely open source and has been submitted to the Apache Foundation. Monday, January 23, 2012
- 18. It will beknown as Cordova when it gets approved http:// incubator.apache. org/callback/ Monday, January 23, 2012
- 19. The entire projectis available on Github https:// github.com/ cordova Monday, January 23, 2012
- 20. Getting Started Monday, January23, 2012
- 21. There are multiple ways to “start” with PhoneGap. The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support. Monday, January 23, 2012
- 22. bin/create ~/Sites/phonegap_preso/demo Demo Monday,January 23, 2012
- 23. Quick tour throughthe project structure Monday, January 23, 2012
- 24. Demo: Hello World Monday, January 23, 2012
- 25. Quick segue: mobileweb apps versus mobile applications Monday, January 23, 2012
- 26. Very important to keep in mind that we’re building a mobile app, not a mobile web app. Let’s look at jQuery Mobile Monday, January 23, 2012
- 27. You can useANY framework you want, but try to design for an app. (I kind of like Bootstrap) Monday, January 23, 2012
- 28. Diving into the PhoneGap APIs Monday, January 23, 2012
- 29. - Accelerometer - Camera - Capture Out of the box, - Compass - Connection PhoneGap - Contacts provides support for a - - Device Events number of basic device - - File Geolocation APIs - Media - Network - Notification - Storage Monday, January 23, 2012
- 30. Camera API example Monday, January 23, 2012
- 31. Demo: Using the device APIs Monday, January 23, 2012
- 32.
- 33. It’s all justHTML/JS, so you can use your browser! Take advantage of Chrome Developer tools/Firebug to test your app’s UI. Monday, January 23, 2012
- 34. But what aboutDevice APIs? Because we’re in the web view, there is no way to do line-by-line debugging. Monday, January 23, 2012
- 35. Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs. Monday, January 23, 2012
- 36. Weinre can be configured as a server (there is a Mac application) and uses the developer tools from Chrome to provide hooks into the mobile app. Monday, January 23, 2012
- 37. 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. Monday, January 23, 2012
- 38. Demo: Debugging with Weinre Monday, January 23, 2012
- 39. But, a mucheasier way: http:// debug.phonegap.com/ Monday, January 23, 2012
- 40. Demo: debug.phonegap Monday, January 23, 2012
- 41.
- 42. 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 Monday, January 23, 2012
- 43. Plug-is are oneof 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! Monday, January 23, 2012
- 44. Available at https://github.com/phonegap/phonegap-plugins Monday, January 23, 2012
- 45. This app canjust use the plugins.barcodeScanner.scan method to call out to some native code that reads and parses a barcode. Monday, January 23, 2012
- 46. Demo: PhoneGap Plugins Monday, January 23, 2012
- 47.
- 48. Remember that we’reon different platforms Monday, January 23, 2012
- 49. Versus http://developer.apple.com/library/IOs/#documentation/ UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.html Monday, January 23, 2012
- 50. Some important performance implications: Currently only iOS hardware accelerates CSS3 transitions. Monday, January 23, 2012
- 51. Couple of tips: Always test features first (if !supported) For UI-specifics, you can use the device class to get device info Monday, January 23, 2012
- 52. Demo: PhoneGap in Action Monday, January 23, 2012
- 53. One more thing. build.phonegap.com Monday, January 23, 2012
- 54. The Problem: You’re building a cross-platform app, but dealing with a lot of native projects Monday, January 23, 2012
- 55. The Solution: Monday, January23, 2012
- 56.
- 57. Build includes git support so you can use git and host projects on PhoneGap or build a project from Github. Monday, January 23, 2012
- 58. Build lets youdefine individuals as tester/ developer which changes permissions on the project accordingly. Monday, January 23, 2012
- 59. You can useBuild as your testing distribution as well by making the download pages public. Monday, January 23, 2012
- 60. Will (soon) support popular plugins so that you can build plugins right into the build process. Monday, January 23, 2012
- 61. Supports multiple PhoneGap versions so you can target a wide range of devices. Monday, January 23, 2012
- 62. Demo: PhoneGap Build Monday, January 23, 2012
- 63. Recap • Why is PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final Considerations Monday, January 23, 2012
- 64. also, Beer: Q&A Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Monday, January 23, 2012