Post on 08-May-2015
description
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
ryan@adobe.com
github.com/ryanstewart
Based in SeattleThings I Like:
BeerMountaineering/Hiking/BackpackingGeolocation/Mapping stuff
Thursday, February 16, 2012
Agenda
• Debugging with PhoneGap
• Deploying PhoneGap Apps with PhoneGap Build
Thursday, February 16, 2012
Debugging
Thursday, February 16, 2012
Debugging these kinds of apps is best done on device. Luckily there are a few tools that make that easy.
Thursday, February 16, 2012
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
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
Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
Now with
Thursday, February 16, 2012
Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
Now with
Thursday, February 16, 2012
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
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
Demo:Debugging with Weinre
Thursday, February 16, 2012
But, a much easier way:http://debug.phonegap.com/
Thursday, February 16, 2012
Demo:debug.phonegap.com
Thursday, February 16, 2012
Deployingbuild.phonegap.com
Thursday, February 16, 2012
e Problem:
You’re building a cross-platform app, but dealing with a lot of native projects
Thursday, February 16, 2012
e Solution:PhoneGap Build - a cloud service for
creating binary files for multiple platforms from a single codebase
Thursday, February 16, 2012
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 one place.
Thursday, February 16, 2012
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
Getting Started
Thursday, February 16, 2012
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
Build lets you configure app properties across platforms.
You can also target specific versions of PhoneGap to maximize compatibility.
Thursday, February 16, 2012
Core part of PhoneGap Build:
Work how you want to work
Thursday, February 16, 2012
Using Git/SVN repositories
Thursday, February 16, 2012
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
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
Debugging and Testing
Thursday, February 16, 2012
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
Just click the “debug” button in Build and start debugging.
No dealing with the same wifi connection or USB tethering.
Thursday, February 16, 2012
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
Build lets you define individuals as tester/developer which changes permissions on the project accordingly.
Thursday, February 16, 2012
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
You can use Build as your testing distribution as well by making the
download pages public.
Thursday, February 16, 2012
PhoneGap Build Roadmap
Thursday, February 16, 2012
Will (soon) support popular plugins so that you can build plugins right into the build process.
Thursday, February 16, 2012
Windows support also coming
Thursday, February 16, 2012
Demo:PhoneGap Build
Thursday, February 16, 2012
Ryan StewartWeb Developer Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
ryan@adobe.com
github.com/ryanstewart
Q&A
Thursday, February 16, 2012
Are you building a cool app??
Let me know! - ryan@adobe.com
Thursday, February 16, 2012