debugging and deploying with phone gap

Debugging and Deploying with

PhoneGapTools and techniques for testing and

distributing cross-platform apps

Thursday, February 16, 2012

Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

Based in SeattleThings I Like:

BeerMountaineering/Hiking/BackpackingGeolocation/Mapping stuff


mailto:[email protected]


Agenda

• Debugging with PhoneGap

• Deploying PhoneGap Apps with PhoneGap Build


Debugging


Debugging these kinds of apps is best done on device. Luckily there are a few tools that make that easy.


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.


But what about Device APIs?Because we’re in the web view, there is no

way to do line-by-line debugging.


Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.

Now with


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.


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.


Demo:Debugging with Weinre


But, a much easier way:http://debug.phonegap.com/


http://debug.phonegap.com/




Demo:debug.phonegap.com


Deployingbuild.phonegap.com


e Problem:

You’re building a cross-platform app, but dealing with a lot of native projects


e Solution:PhoneGap Build - a cloud service for

creating binary files for multiple platforms from a single codebase


What PhoneGap Build lets you do:


No vendor platform lock-in

Want to build for iOS but don’t have a Mac? No problem.


Build for every platform at once

PhoneGap Build creates binaries for all of the major platforms at the same time and in one place.


Debug on your devices

Use PhoneGap Build to incorporate debug code in your application so you can test on the device itself.


Getting Started


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


Build lets you configure app properties across platforms.

You can also target specific versions of PhoneGap to maximize compatibility.


Core part of PhoneGap Build:

Work how you want to work


Using Git/SVN repositories


Build lets you create a new app from a Git or SVN repository (including GitHub support).

Note: It can’t be a private repo.


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.


Debugging and Testing


Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.com


Just click the “debug” button in Build and start debugging.

No dealing with the same wifi connection or USB tethering.


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.


Build lets you define individuals as tester/developer which changes permissions on the project accordingly.


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.


You can use Build as your testing distribution as well by making the

download pages public.


PhoneGap Build Roadmap


Will (soon) support popular plugins so that you can build plugins right into the build process.


Windows support also coming


Demo:PhoneGap Build


Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

Q&A




Are you building a cool app??

Let me know! - [email protected]




debugging and deploying with phone gap

Technology