In my last tutorial we built a PhoneGap Mobile UI, and now you’re ready to use PhoneGap Build. PhoneGap Build enables you to build your application for multiple platforms.
What is PhoneGap Build?
PhoneGap Build is a service provided by the makers of PhoneGap that allows you to build your application for multiple platforms without having to have those set ups on your local machine.
In our case, we developed our PhoneGap app in Visual Studio in the Windows 7 Phone SDK. Within that PhoneGap App is an App Package. This www folder is the core of the PhoneGap application. Everything else is part of the Windows 7 Phone Shell. We zip that www folder and send it up to PhoneGap Build, PhoneGap Build swaps our setup with other mobile setups, runs those builds over the cloud and gives us access to various platforms such as IOS, Blackberry, etc…
Simply write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.
So even though PhoneGap itself is free, PhoneGap Build is not and that is how they make their money, but the pricing is reasonable as you can see below:
Here’s the work flow you will follow:
- Write your app using HTML, CSS and JavaScript
- Upload it to the PhoneGap Build service
- Get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, Blackberry and more.
You don’t have to use phone gap build to use phone gap. You could set up all the environments locally and do the individual builds for each device yourself. PhoneGap Build relieves the headache of trying to maintain all that code locally.
Here are the specific steps:
- Zip-up your www folder in your Visual Studio Windows 7 Phone application developed in the last tutorial. You’ll actually go to where it is on your hard drive and do that.
In my case the path was Documents->Visual Studio 2010->Projects->Geolocator->Geolocator
Be careful with your naming, Blackberry doesn’t like folders with the names src, bin, or image and file names with special characters.
2. Create a PhoneGap Build account (at https://build.phonegap.com/)). If you already have an Adobe ID that will work as well.
3. Add a new app, after giving your app a name, choose your upload method and click create! It’s that easy.
PhoneGap Build builds the various platforms shown below:
You can now download these apps and run them on the various platforms. To do that click on Admin (shown above) and download your app!
But you’re not ready to go live just yet …you need to sign!
4. At this point you need to sign your apps. Click Admin ->Edit ->Signing and select or add your keys.
For example, for iOS you’ll need the same developers key that you would use to build a regular iOS phone app. To find out more about signing check out the following docs link https://build.phonegap.com/docs. To put your apps in the market they need to be signed!
5. Finally, you’ll need to configure your app. You can configure your app by clicking on the details tab and filling out the form below. This info will be used in your app distribution.
But not everything you need can always be put in this short form, such as plugins. So in that case you’ll need to use an xml config file.
To find out more go to https://build.phonegap.com/docs/config-xml. Once the config file is completed you need to zip it up in your www file and upload it to PhoneGap Build and build your various platforms. You must ensure that your config.xml
file is at the top level of your application (the same level as your index.html
file). Otherwise it will not be loaded correctly.
Debugging!
One more cool thing about PhoneGap Build is that you can remotely debug your application from a browser. This service enables users to debug and interactively modify their applications during runtime; this new addition offers similar functionality to those found in Firebug and Google Chrome Inspector, which serve as an indispensable tool to developers working on web based projects. And now debug build provides the same benefits for PhoneGap developers. The learn more about debug mode go to https://build.phonegap.com/docs/phonegap-debug.