CoderDojo - Getting started with PhoneGap

Make your cool web app mobile : Part 1 Upload your zip file

Frequently phonegap gets brought up in CoderDojo as an option to get some of the cool projects online into the app store.  PhoneGap definitely provides an excellent platform to achieving this for HTML based programs without having to learn advance programming concepts at an early stage.  This quick access to the app platforms provides an excellent, quick and exciting hook for anyone looking to get started with app development.  

I played around with it two years ago using the eclipse IDE, building a simple geo tagging app using HTML 5 was alot of fun and at the time was a great introduction to phonegap and its capabilities.  For a Java developer being asked to build a phone gap app on the eclipse platform was not a challenge and was able to get the app up and running fairly quickly.   Most people out there aren't Java developers so asking them to jump into an IDE and understand all the concepts is an adventurous leap that cause many unwelcome side effects including frustration, hair pulling and even failure.  You have built your really cool and fun web based app, you just want it to become an app.

Well this blog is just what you are looking for and will provide you get you up and running with your first app using the Phone Gap build cloud service.  I will outline the easiest of the two approaches to getting your app working by a zip file.  In part 2 of this blog I will outline the github option.

Control the excitement

There is a few points you will need to be aware of before deciding the PhoneGap build approach is the right option for you

* With this option you will only be able to build one private application
* If you have more than one app to build you have the following options

• Need to delete you app from Phone Gap build server before you build a new one each time
• Have all you code opensource on github
• Need to upgrade you account and pay

In true CoderDojo opensource spirit the github is my favorite option here as we release all our code and teaching material online.  However you do what ever fits your needs.

One other key difference here is that you are only really testing you mobile app on the phone after you deploy it so you may find yourself deploying this multiple times, before you get it right.  This is where the eclipse solution has the advantage as you can quickly deploy your phonegap mobile app to your phone for testing while you are developing.

Demo code

The code was put together for the purpose of showing how easy it can be to build a phonegap article, code is a very basic web page, to highlight the phonegap cloud service.  The code used for this demo can be found at

https://github.com/CoderDojo/GetStartedWithPhoneGap

1 Lets get coding

You have building you app and now you want to phone gap it, well the first step is an XML file you will need to create and put in the root folder of your web app.  Call this file config.xml
Update the following values for your needs

• Id
• Version
• Name
• Description
• Icon location

 

2 Zip up your web app

Now zip up the root folder of your web app so it can uploaded to phonegap for deployment.
 

3 Register on phonegap site

You will need to register on phone gap site (https://build.phonegap.com) to get their cloud service built the app, you can sign up in two ways

• GitHub credentials (Register using you git credentials if you want to upload your web app from github)
•  Phonegap registration with your email address

 

4 Upload your zip file

 

On your private tab, click upload a zip file, this will turn you web app into a mobile app.

5 Download you app

Once you app has finished building you will get download options as shown, just click the app OS you are looking to deploy and test.

In this example select the android application and download the apk file.

6 Get your phone ready

To test your app on your Android phone you will need to enable it allow "Unknown Sources"

Navigate to Settings >  Applications > Unknown Sources

Make sure this setting is ticked or turned on.

7 Deploy your app

You can deploy the app in two ways first

• Put the URL from the android button link into the browser on your phone and download you apk file which will also install
• Upload to your phone using USB and install it.

8 Test your app

Now test you app on as many phones as possible, send the link around get your friends feedback.  Remember with android screen sizes can be quite different so your app must look great on all of them.

Congratulations

You have just deployed you first application which can work on all platforms, enjoy and keep building them.