PhoneGap to the rescue
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
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.
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. 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.
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
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.