debugging and deploying with phone gap
DESCRIPTION
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.TRANSCRIPT
![Page 1: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/1.jpg)
Debugging and Deploying with
PhoneGapTools and techniques for testing and
distributing cross-platform apps
Thursday, February 16, 2012
![Page 2: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/2.jpg)
Ryan StewartWeb Developer Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
github.com/ryanstewart
Based in SeattleThings I Like:
BeerMountaineering/Hiking/BackpackingGeolocation/Mapping stuff
Thursday, February 16, 2012
![Page 3: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/3.jpg)
Agenda
• Debugging with PhoneGap
• Deploying PhoneGap Apps with PhoneGap Build
Thursday, February 16, 2012
![Page 4: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/4.jpg)
Debugging
Thursday, February 16, 2012
![Page 5: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/5.jpg)
Debugging these kinds of apps is best done on device. Luckily there are a few tools that make that easy.
Thursday, February 16, 2012
![Page 6: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/6.jpg)
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
![Page 7: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/7.jpg)
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
![Page 8: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/8.jpg)
Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
Now with
Thursday, February 16, 2012
![Page 9: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/9.jpg)
Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
Now with
Thursday, February 16, 2012
![Page 10: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/10.jpg)
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
![Page 11: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/11.jpg)
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
![Page 12: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/12.jpg)
Demo:Debugging with Weinre
Thursday, February 16, 2012
![Page 13: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/13.jpg)
But, a much easier way:http://debug.phonegap.com/
Thursday, February 16, 2012
![Page 14: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/14.jpg)
Demo:debug.phonegap.com
Thursday, February 16, 2012
![Page 15: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/15.jpg)
Deployingbuild.phonegap.com
Thursday, February 16, 2012
![Page 16: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/16.jpg)
e Problem:
You’re building a cross-platform app, but dealing with a lot of native projects
Thursday, February 16, 2012
![Page 17: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/17.jpg)
e Solution:PhoneGap Build - a cloud service for
creating binary files for multiple platforms from a single codebase
Thursday, February 16, 2012
![Page 18: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/18.jpg)
Thursday, February 16, 2012
![Page 19: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/19.jpg)
What PhoneGap Build lets you do:
Thursday, February 16, 2012
![Page 20: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/20.jpg)
No vendor platform lock-in
Want to build for iOS but don’t have a Mac? No problem.
Thursday, February 16, 2012
![Page 21: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/21.jpg)
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
![Page 22: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/22.jpg)
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
![Page 23: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/23.jpg)
Getting Started
Thursday, February 16, 2012
![Page 24: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/24.jpg)
1) Sign up for an account2) Create an application
a) Can be uploaded HTML/CSS/JS filesb) Can be a Git/SVN repoc) PhoneGap can create and host a Git repo
3) Profit
Thursday, February 16, 2012
![Page 25: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/25.jpg)
Build lets you configure app properties across platforms.
You can also target specific versions of PhoneGap to maximize compatibility.
Thursday, February 16, 2012
![Page 26: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/26.jpg)
Core part of PhoneGap Build:
Work how you want to work
Thursday, February 16, 2012
![Page 27: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/27.jpg)
Using Git/SVN repositories
Thursday, February 16, 2012
![Page 28: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/28.jpg)
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
![Page 29: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/29.jpg)
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
![Page 30: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/30.jpg)
Debugging and Testing
Thursday, February 16, 2012
![Page 31: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/31.jpg)
Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.com
Thursday, February 16, 2012
![Page 32: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/32.jpg)
Just click the “debug” button in Build and start debugging.
No dealing with the same wifi connection or USB tethering.
Thursday, February 16, 2012
![Page 33: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/33.jpg)
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
![Page 34: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/34.jpg)
Build lets you define individuals as tester/developer which changes permissions on the project accordingly.
Thursday, February 16, 2012
![Page 35: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/35.jpg)
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
![Page 36: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/36.jpg)
You can use Build as your testing distribution as well by making the
download pages public.
Thursday, February 16, 2012
![Page 37: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/37.jpg)
PhoneGap Build Roadmap
Thursday, February 16, 2012
![Page 38: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/38.jpg)
Will (soon) support popular plugins so that you can build plugins right into the build process.
Thursday, February 16, 2012
![Page 39: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/39.jpg)
Windows support also coming
Thursday, February 16, 2012
![Page 40: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/40.jpg)
Demo:PhoneGap Build
Thursday, February 16, 2012
![Page 41: Debugging and deploying with phone gap](https://reader033.vdocument.in/reader033/viewer/2022052522/554bbd39b4c90530298b4d85/html5/thumbnails/41.jpg)
Ryan StewartWeb Developer Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
github.com/ryanstewart
Q&A
Thursday, February 16, 2012