Step by step guide to converting your web app to an Android app

I’ve published a couple of apps to the Google Play store now, and when I came to do the same for a new app I’ve been working on, I had completely forgotten the steps involved and had to read all of the documentation again. It’s not straightforward, and involves a lot of commands in the terminal.

This as it is, I’ve resolved to document the process here so that, at the very least, I’ll be able to remember for next time. Hopefully this will help you too. Thanks go our to this article here which really helped me get to grips with the concepts (and which I’m mainly just elaborating on here).

I’m primarily a web developer, so am comfortable with the HTML, CSS, Javascript technology stack. In the last year or so, I’ve augmented this with Angular to enable rapid development of web apps.

The app I set out to make was to keep score in the word-based board game Scrabble. I built it over the course of a couple of weeks using Yeoman to create the project structure, which allows easy integration of Bower components and Grunt tasks. When generating the project with Yeoman, I opted to include Bootstrap to give me a head start on the styles, and SASS to organise and compile my CSS. At the end of development, you can run

grunt build

to minify and concatenate all files and prepare them for distribution.

Whatever your method for creating a web application, you go ahead and do it. It could just be static HTML if you feel that it makes a useful app for someone. Either way, now you have an app. Next stage is to get Phonegap involved to convert it to an Android app.

First, make sure you have Phonegap installed:

sudo npm install -g phonegap

This does have a dependency on NodeJS, so make sure to go get that. Then you’ll want to create the Phonegap project. In a suitable directory, run:

phonegap create my-app
cd my-app
phonegap run android

This creates the directory ‘my-app’ (in this case, obviously feel free to call it something that resembles your app name) and puts a whole whack of files in it.

You can now copy all of your web app files into the my-app/www directory, replacing those that had been created for their default ‘HelloWorld’ application.

Prepping your app

In order for your app to know what it is in the world, you’ll have to update a few definitions in some xml files. First up, go through the www/config.xml file, and update all the info so it looks like your app and your details. Also in here in the ‘widget’ tag is the version attribute. This is the version number that’s displayed to users in the Google Play Store.

The other file you’ll need to update is platforms/android/AndroidManifest.xml – this contains references to your package name (which you’ll want to change to com.yourcompany.yourappname), you’ll want to add the attribute:

android:debuggable="false"

to the ‘application’ tag, and each time you want to publish a new version you’ll have to increment the ‘android:versionCode’ attribute on the ‘manifest’ tag. You can only go up in whole integers, and this the the version that the Play Store itself uses to recognise a newer version of your app.

Generating a keystore file

Follow the prompts and it will create a keystore file in the folder you run it from (with the name ‘my-app-key.keystore’ or whatever you put in that bit of the command). It’s recommended not to keep this in the same file as your app, and certainly don’t put it in a public Github repository. You should create a new one for every app you make.

Next, create a new file called ‘ant.properties’ inside platforms/android in this, save the following information

key.store=../../../my-app-key.keystore
key.alias=app_key

the relative path should point to where you saved your keystore file, and the alias is as specified in the keystore generation command.

Signing in release mode

Run this in your phonegap project:

phonegapbuildandroid

You’ll then want to run the following, which will create release versions of the app:

cdplatforms/androidantrelease

Follow the prompts and enter your keystore password where required.

There will now be some new files inside the bin directory, have a look, as you’ll have to target one of them at the next stage.

To sign the files, you’ll need to head to the bin directory and run the following: