Debugging and                                  Deploying with                                    PhoneGap                 ...
Ryan Stewart                              Web Developer Evangelist, Adobe                                     ryan@adobe.c...
Agenda                    • Debugging with PhoneGap                    • Deploying PhoneGap Apps with                     ...
DebuggingThursday, February 16, 2012
Debugging these            kinds of apps is            best done on            device. Luckily            there are a few ...
It’s all just HTML/            JS, so you can use            your browser!            Take advantage of            Chrome ...
But what about Device APIs?Because we’re in the web view, there is no   way to do line-by-line debugging.Thursday, Februar...
No                                    w                                        wi                                         ...
No                                    w                                        wi                                         ...
Weinre can be            configured as a            server (there is a            Mac application)            and uses the...
Drop in a <script>            tag on a remote            server and Weinre            will let you use the            Deve...
Demo:     Debugging with WeinreThursday, February 16, 2012
But, a much easier            way:            http://            debug.phonegap.com/Thursday, February 16, 2012
Demo:     debug.phonegap.comThursday, February 16, 2012
Deploying                              build.phonegap.comThursday, February 16, 2012
e Problem:   You’re building a cross-platform app, but     dealing with a lot of native projectsThursday, February 16, 2012
e Solution:   PhoneGap Build - a cloud service forcreating binary files for multiple platforms         from a single code...
Thursday, February 16, 2012
What PhoneGap Build                              lets you do:Thursday, February 16, 2012
No vendor platform lock-in Want to build for iOS but don’t have a Mac? No problem.Thursday, February 16, 2012
Build for every platform at once  PhoneGap Build creates binaries for all of the  major platforms at the same time and in ...
Debug on your devices  Use PhoneGap Build to incorporate debug  code in your application so you can test on  the device it...
Getting StartedThursday, February 16, 2012
1) Sign up for an account      2) Create an application        a) Can be uploaded        HTML/CSS/JS files        b) Can b...
Build lets you      configure app      properties across      platforms.      You can also target      specific versions o...
Core part of PhoneGap Build:                              Work how you want to workThursday, February 16, 2012
Using Git/SVN                              repositoriesThursday, February 16, 2012
Build lets you            create a new app            from a Git or SVN            repository            (including GitHub...
All of your            development can            be done from            source control.            Simply “Update       ...
Debugging and TestingThursday, February 16, 2012
Build includes a            debugging option            that will inject the            Weinre JavaScript            into ...
Just click the            “debug” button in            Build and start            debugging.            No dealing with   ...
What I find to be            easiest is to set up            a “regular” version            of the app and a            “d...
Build lets you            define individuals            as tester/            developer which            changes          ...
Testers: Can access            the binaries and            rebuild the            binaries based on            what’s in t...
You can use Build as your testing                              distribution as well by making the                         ...
PhoneGap Build RoadmapThursday, February 16, 2012
Will (soon)            support popular            plugins so that you            can build plugins            right into t...
Windows support            also comingThursday, February 16, 2012
Demo:           PhoneGap BuildThursday, February 16, 2012
Q&A                              Ryan Stewart                              Web Developer Evangelist, Adobe                ...
Are you building a cool app??                              Let me know! - ryan@adobe.comThursday, February 16, 2012
Upcoming SlideShare
Loading in...5
×

Debugging and deploying with phone gap

7,189

Published on

A presentation covering methods for debugging and deploying PhoneGap applications. Covers Weinre and some of the features of PhoneGap Build for deploying across many platforms.

Published in: Technology, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,189
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
162
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Debugging and deploying with phone gap

  1. 1. Debugging and Deploying with PhoneGap Tools and techniques for testing and distributing cross-platform appsThursday, February 16, 2012
  2. 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 stuffThursday, February 16, 2012
  3. 3. Agenda • Debugging with PhoneGap • Deploying PhoneGap Apps with PhoneGap BuildThursday, February 16, 2012
  4. 4. DebuggingThursday, February 16, 2012
  5. 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. 6. 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.Thursday, February 16, 2012
  7. 7. But what about Device APIs?Because we’re in the web view, there is no way to do line-by-line debugging.Thursday, February 16, 2012
  8. 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. 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. 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. 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. 12. Demo: Debugging with WeinreThursday, February 16, 2012
  13. 13. But, a much easier way: http:// debug.phonegap.com/Thursday, February 16, 2012
  14. 14. Demo: debug.phonegap.comThursday, February 16, 2012
  15. 15. Deploying build.phonegap.comThursday, February 16, 2012
  16. 16. e Problem: You’re building a cross-platform app, but dealing with a lot of native projectsThursday, February 16, 2012
  17. 17. e Solution: PhoneGap Build - a cloud service forcreating binary files for multiple platforms from a single codebaseThursday, February 16, 2012
  18. 18. Thursday, February 16, 2012
  19. 19. What PhoneGap Build lets you do:Thursday, February 16, 2012
  20. 20. No vendor platform lock-in Want to build for iOS but don’t have a Mac? No problem.Thursday, February 16, 2012
  21. 21. Build for every platform 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. 22. Debug on your devices Use PhoneGap Build to incorporate debug code in your application so you can test on the device itself.Thursday, February 16, 2012
  23. 23. Getting StartedThursday, February 16, 2012
  24. 24. 1) Sign up for 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) ProfitThursday, February 16, 2012
  25. 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. 26. Core part of PhoneGap Build: Work how you want to workThursday, February 16, 2012
  27. 27. Using Git/SVN repositoriesThursday, February 16, 2012
  28. 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. 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. 30. Debugging and TestingThursday, February 16, 2012
  31. 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 omThursday, February 16, 2012
  32. 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. 33. What I find to 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. 34. Build lets you define individuals as tester/ developer which changes permissions on the project accordingly.Thursday, February 16, 2012
  35. 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. 36. You can use Build as your testing distribution as well by making the download pages public.Thursday, February 16, 2012
  37. 37. PhoneGap Build RoadmapThursday, February 16, 2012
  38. 38. Will (soon) support popular plugins so that you can build plugins right into the build process.Thursday, February 16, 2012
  39. 39. Windows support also comingThursday, February 16, 2012
  40. 40. Demo: PhoneGap BuildThursday, February 16, 2012
  41. 41. Q&A Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartThursday, February 16, 2012
  42. 42. Are you building a cool app?? Let me know! - ryan@adobe.comThursday, February 16, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×