Ibuildings blog

afbeelding van mdkeijzer

Boosting mobile deployment with PhoneGap Build

PhoneGap to the rescue

In July 2011 Nitobi (now acquired by Adobe) released a stable version of a small library called PhoneGap. It's main purpose was to close the gap between web- and native applications. This was achieved by wrapping web applications in a native app for each supported platform. Another feature to close the gap is to expose Javascript API's for functionality which is otherwise only available to native applications.

phonegap

From this day on PhoneGap gained more and more enthousiasm from developers around the world, and boosted the development of mobile browsers as people started to make use of the features HTML 5, CSS and Javascript have to offer. At the time of writing PhoneGap 2.3 has been released, and the basic PhoneGap implementation is an incubator project at the Apache Foundation with the name Cordova.

cordova_logo_normal_dark

For people who are confused with the names; PhoneGap is Adobe's implementation, Cordova is the Apache Foundation implementation. At this time it actually doesn't matter what is being used. Both implementations are still in sync with eachother. In the future Adobe might decide to create commercial additions or additions which are based on their other products.

The pain of deploying with PhoneGap

Even though PhoneGap solves the problem of developing for multiple platforms, the deployment itself is still a painful process. You'd have to install the native SDK's, tools and create a project for each platform in which you add the PhoneGap framework and your web-application. Next to that you'd have to invest time to investigate and stay up-to-date with the deployment requirements for each platform. This makes the deployment of these applications a tedious task that might even take weeks to get your application out there for all the supported platforms.

Adobe to the rescue

Adobe has seen the pain that developers and app publishers have with this way of deploying and they came up with a solution for this; a build farm in the cloud. They named it PhoneGap Build and after an extensive beta-period it is now a stable platform, ready for anyone to use. PhoneGap Build can be linked to your Github account or you can use an AdobeID to login to the service. One of the benefits of linking your Github account is that you can build your public projects (open source) for free! The free plan also includes 1 private project. So you can start test-driving PhoneGap Build without paying a single dollar. If you're satisfied and like to add more private applications you can update your plan. The main functionality is simple; insert your html/javascript application, let PhoneGap Build do it's magic, and get a package for the native platforms which are supported. You can look at it as a conveyor belt in a factory.

phonegap build

Currently PhoneGap Build has support for iOS, Android, Windows Phone, BlackBerry, WebOS and Bada.

Getting started with PhoneGap Build

Once you've setup your Github account or Adobe ID account on the PhoneGap Build website you'll be able to access your dashboard. The first things you'll want to do is adding your application code. PhoneGap Build will ask you to add a public repository from Github, or a private repository/zip file to create a private build project. Once you've picked your project you can change the name in the next step and add a description to clarify what your app is about. When pressing the "Ready to build" button your first build will be initiated, and you can see the results in the bar beneath your project description.

firstbuild

We see icons having 3 colors, this quickly identifies the state of your builds:

  • Grey: Your build is not finished yet, the page will be automatically updated when a build is finished.
  • Blue: Your build has succeeded, you can download the native package
  • Red: An error occurred, further action and a new build is required

The grey icons can be ignored for the time being, they will finish up at some point in time which usually translates to just a few minutes. The red's are more of a concern, once we click the red icon we will see the detailed view of the project where we can inspect further. buildresults This is where PhoneGap Build really shines, it shows you exactly why your build has failed and provides you with a link on how to possibly resolve the issue. From here on you can work your way through the errors, up to the moment where the builds for your applicable platforms are all blue. From within the detail view you can fine-tune the metadata settings for your project (like the project icon, package name, package version etc) or add collaborators if you're working on an app with a team, this is all pretty straight forward.

Distributing the build

Once you've set up your project and all applicable keys are in place, you can start distributing your app. There are 2 types of distribution which need to be taken into account; development distributions and public distributions. The development distributions can be used to test your applications on physical devices, or to showcase the state of the product to your customer. To setup the devices you'll need to setup the proper keys and settings as you would when building a native application. There is no silver bullet to circumvent these rules created by the platform manufacturers. Once you've setup the proper keys or device settings you can open the PhoneGap build dashboard and scan the QR-code with your favorite scanner on your testing device. The application installer will now launch and place the application on your device. No cable connections or desktop applications are required, which makes it super easy to load your test build.

pgbuild-qr

Next to that there is also a link you can share to testers, or you can visit the PhoneGap build dashboard with your phone, which uses a responsive design, and use the install-button from there. This easy to use functionality is a huge time saver. Just click on one of the platforms icons and the package will download to your computer. Unfortunately like with setting up the test devices there is also no silver bullet to send these packages directly to an App Store. Who knows what the future might have in store for us, but up until today this process is still bound to the platform manufacturer's system.

Advancing your build with a config.xml

Usually when working on a small project the information from the Getting started should be enough. But once you start building larger projects you might want to fine-tune your builds further and add a configuration to your source-code repository. You can do this by adding a config.xml file to your project root directory which conforms to the W3C Widget Specification. The PhoneGap team has already created a boilerplate file to get you up and running: https://gist.github.com/5063962 This sets up the basic project just like you would after reading the getting started. The real magic is happening in this file when you're having specific deployment requirements, like "Do not show the default spinner when loading the app on iOS" or "My application is Jelly Bean specific for Android". No iOS splash screen spinner https://gist.github.com/5064255 Only build for Jelly Bean https://gist.github.com/5064262 There are many options you can explore, all of these are documented at http://build.phonegap.com/docs/config-xml

In conclusion

PhoneGap is a wonderful way to make your web applications available through app stores and marketplaces, and PhoneGap Build is a great addition to the tool. It helps you not to invest time on repetitive tasks when creating builds, but to actually spend your precious time on development and distribution.

Reacties

vr, 03/22/2013 - 09:34
It came to my attention that our good friends at Inviqa also posted about PhoneGap; http://techportal.inviqa.com/2013/03/20/tips-for-developing-apps-with-phone-gap/

Leave a reply