Download as PDF, PPTX
Uploaded byRyan Stewart
Debugging and deploying with phone gap
The document discusses debugging and deploying cross-platform apps using PhoneGap tools, particularly emphasizing mobile app debugging techniques with Weinre and browser developer tools. It also highlights PhoneGap Build as a cloud service that simplifies building binaries for multiple platforms from a single codebase and allows for easy debugging. The presentation covers how to start with PhoneGap Build, manage app properties, and utilize version control for app development.
More Related Content
Similar to Debugging and deploying with phone gap
![[2015/2016] Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/05cordova-160401161537-thumbnail.jpg?width=640&height=640&fit=bounds)
Debugging and deploying with phone gap
- 1. Debugging and Deploying with PhoneGap Tools and techniques for testing and distributing cross-platform apps Thursday, February 16, 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 Thursday, February 16, 2012
- 3. Agenda • Debugging with PhoneGap • Deploying PhoneGap Apps with PhoneGap Build Thursday, February 16, 2012
- 4.
- 5. Debugging these kinds of apps is best done on device. Luckily there are a few tools that make that easy. Thursday, February 16, 2012
- 6. It’s all justHTML/ JS, so you can use your browser! Take advantage of Chrome Developer tools/Firebug to test your app’s UI. Thursday, February 16, 2012
- 7. But what aboutDevice APIs? Because we’re in the web view, there is no way to do line-by-line debugging. Thursday, February 16, 2012
- 8. No w wi th Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs. Thursday, February 16, 2012
- 9. No w wi th Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs. Thursday, February 16, 2012
- 10. 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. Thursday, February 16, 2012
- 11. 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. Thursday, February 16, 2012
- 12. Demo: Debugging with Weinre Thursday, February 16, 2012
- 13. But, a mucheasier way: http:// debug.phonegap.com/ Thursday, February 16, 2012
- 14. Demo: debug.phonegap.com Thursday, February 16, 2012
- 15. Deploying build.phonegap.com Thursday, February 16, 2012
- 16. e Problem: You’re building a cross-platform app, but dealing with a lot of native projects Thursday, February 16, 2012
- 17. e Solution: PhoneGap Build - a cloud service for creating binary files for multiple platforms from a single codebase Thursday, February 16, 2012
- 18.
- 19. What PhoneGap Build lets you do: Thursday, February 16, 2012
- 20. No vendor platformlock-in Want to build for iOS but don’t have a Mac? No problem. Thursday, February 16, 2012
- 21. Build for everyplatform at once PhoneGap Build creates binaries for all of the major platforms at the same time and in one place. Thursday, February 16, 2012
- 22. Debug on yourdevices Use PhoneGap Build to incorporate debug code in your application so you can test on the device itself. Thursday, February 16, 2012
- 23.
- 24. 1) Sign upfor an account 2) Create an application a) Can be uploaded HTML/CSS/JS files b) Can be a Git/SVN repo c) PhoneGap can create and host a Git repo 3) Profit Thursday, February 16, 2012
- 25. Build lets you configure app properties across platforms. You can also target specific versions of PhoneGap to maximize compatibility. Thursday, February 16, 2012
- 26. Core part ofPhoneGap Build: Work how you want to work Thursday, February 16, 2012
- 27. Using Git/SVN repositories Thursday, February 16, 2012
- 28. Build lets you create a new app from a Git or SVN repository (including GitHub support). Note: It can’t be a private repo. Thursday, February 16, 2012
- 29. All of your development can be done from source control. Simply “Update Code” from the App page and Build will recreate the binaries based on the code in your repository. Thursday, February 16, 2012
- 30. Debugging and Testing Thursday,February 16, 2012
- 31. Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.c om Thursday, February 16, 2012
- 32. Just click the “debug” button in Build and start debugging. No dealing with the same wifi connection or USB tethering. Thursday, February 16, 2012
- 33. What I findto be easiest is to set up a “regular” version of the app and a “debug” version of the app. Can be the exact same repo, but one will provide debug binaries automatically. Thursday, February 16, 2012
- 34. Build lets you define individuals as tester/ developer which changes permissions on the project accordingly. Thursday, February 16, 2012
- 35. Testers: Can access the binaries and rebuild the binaries based on what’s in the linked repository. Developers: Can admin the application as well as do all the things testers can do. Thursday, February 16, 2012
- 36. You can useBuild as your testing distribution as well by making the download pages public. Thursday, February 16, 2012
- 37. PhoneGap Build Roadmap Thursday,February 16, 2012
- 38. Will (soon) support popular plugins so that you can build plugins right into the build process. Thursday, February 16, 2012
- 39. Windows support also coming Thursday, February 16, 2012
- 40. Demo: PhoneGap Build Thursday, February 16, 2012
- 41. Q&A Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Thursday, February 16, 2012
- 42. Are you buildinga cool app?? Let me know! - ryan@adobe.com Thursday, February 16, 2012