PhoneGap Build with WP7 Compilation

This month PhoneGap announced PhoneGap Build compilation support for Windows Phone 7. PhoneGap Build is the service that allows you to take an HTML5 based web site and have a cloud-based service build and return the assembly needed to deploy your mobile web site as a native app for multiple mobile device operating systems, now including WP7.

Transcript

1. PhoneGap Build with WP7 Compilation Justin Saraceno 1
2. Who @JustinSaraceno Software Developer TRINUG AIS 2
3. What We Learned in March  Lots of jQuery Mobile  Codiqa  Uploading a zip to build.phonegap.com  Abracadabra, it’s on your phone 3
4. What We’ll Review Today  PhoneGap Build is now available for WP7!  Review (breifly) an HTML5 site using the jQuery Mobile framework  Pull TRINUG data from meetup.com API  Design considerations for PhoneGap vs PhoneGap Build, vs hosted on the www  PhoneGap API (and not the PhoneGap Build API)  Deploy on WP7 & Android: GitHub, AppHarbor, & PhoneGap Build Trifecta  Not all devices are created or treated equal!  Debugging your PhoneGap Build App (oh, man!!) 4
5. PhoneGap (the assembly)  Download platform-specific assemblies  Incorporate within a native app  For instance, WP7 would be a WP7 project in VS2010.  Still use a web content, but it’s intermixed with native code  ie: using native toolbar 5
6. PhoneGap Build – Now With WP7! 6
7. PhoneGap Build  Doesn’t follow PhoneGap’s release schedule  Latest PhoneGap is v. 1.7rc1  PhoneGap Build for WP7 supports PhoneGap 1.5.0 1.6.1  No special SDK or OS needed  Except for iOS; you need a Mac to configure certificate & provisioning file which is used in the build process.  All you need is a web site!  Has to have at least an index.html  Need a config.xml for PhoneGap Build configurations 7
8. HTML5 Site  We’ll use jQuery Mobile  Connect to the meetup.com API to pull TRINUG event data  Design considerations for PhoneGap  Navigation  Bandwidth (offline storage, etc)  Market-specific submission guidelines 8
9. HTML5 Site Demo 9
10. PhoneGap API  Different than PhoneGap Build API  Available at a specific point in time of the DOM lifecycle  Even though this is just javascript, it’s only executed if built with PhoneGap  PhoneGap Build injects cordova.js during the build process  Is still growing 10
11. PhoneGap API 11
12. PhoneGap API 12
13. API Demo 13
14. config.xml  Container to configure your app with properties like:  PhoneGap version  Device orientation  Min & Max versions (Android)  Icon  Splash Screen  PhoneGap API Features 14
15. Deployment  Getting source to PhoneGap Build  Upload a .zip  Connect it to a GitHub repo  Deploying to Device or Emulator  WP7: Download .xap file  Can deploy to emulator  Can deploy to phone if dev unlocked  Android: No restrictions to deployment of .apk  iOS: For device, it must be developer unlocked 15
16. Deploy Demo 16
17. Now you’ve deployed…  Not all devices are created equal!  jQuery Mobile behaves a little differently on each device (not PhoneGap’s fault).  Where are our JSON calls on WP7? (PhoneGap Build’s fault)  The hardware Back button  Android – awesome  WP7 – huge problem!! 17
18. Debugging  AppHarbor (for HTML only)  PhoneGap Build Debug  Powerful tools  Doesn’t always work on all devices (including WP7) 18
19. Debugging demo! 19
20. Resources  PhoneGap.com  Extensive documentation  Newsletter  Build.PhoneGap.com  Community forums  FAQ  “jQuery Mobile Up and Running” by Maximiliano Firtman @firt  Glen Gordon’s Blog http://blogs.msdn.com/b/glengordon/ WP7 series on PhoneGap. 20
21. Resources Continued… 21 @brianleroux PhoneGap @alunny PhoneGap @stevegill PhoneGap @hardeepshoker PhoneGap Build @davejohnson PhoneGap @purplecabbage PhoneGap
22. End Slide deck is out on speakerdeck.com 22