How I turn my website into an Android app - Part 1

This is an account on how I turned a website into an Android app. The website is built with Bootstrap v3.  I am going to use Apache Cordova v3.0.6 (aka PhoneGap) to convert it into an app.  Almost everything is done in the command line, and the operating system in use is Debian 6.x.  Let's see the result first.  

The website:

    http://amgcomputing.com

The Android app:

    https://play.google.com/store/apps/details?id=com.amgcomputing.website

or you can see the app website here:

    http://amg99.com/amg.html

This post is divided into three parts:

1. Set up the Cordova environment.

2. Convert the website into an Android app.

3. Publish the Android app to Google Play.

Here is part 1 of the post.

Step 1 

Cordova is installed by Node.js. So we need to intall Node.js first.  We will install it locally in the user's home folder so that we do not root access.

$ wget http://nodejs.org/dist/v0.10.18/node-v0.10.18.tar.gz

$ tar -xzvf node-v0.10.18.tar.gz

$ cd node-v0.10.18

$ ./configure --prefix=$HOME

$ make

$ make install

It will take some time to "make" Node.js.  Please be patient.  Eventually, the Node.js package manager (npm) will be installed in the ~/bin folder.  

Step 2 

Install Apache Cordova using the Node.js package manager (npm).

$ npm install -g cordova

Step 3

Download the ADT (Android Developer Tools) bundle from the Android Developer website here.  We need the ADT to build the Android app.

As of this writing, I have downloaded the following zip file for my Debian 6 (32-bit). You will have to agree with Google terms and conditions before you can download the ADT.

   adt-bundle-linux-x86-20130729.zip (Linux 32-bit)

Unzip it and move its content to a convenient location:

$ unzip adt-bundle-linux-x86-20130729.zip

$ mkdir ~/android

$ mv adt-bundle-linux-x86-20130729/eclipse ~/android

$ mv adt-bundle-linux-x86-20130729/sdk ~/android

Step 4

Download Oracle JDK.  We need the JDK to compile the java source files.  OpenJDK may or may not work.  Your mileage may vary.

The Oracle JDK can be downloaded from the Oracle website here.  You must accept Oracle's license agreement in order to download the JDK.

As of this writing, I have downloaded the following file for my Debian 6 (32-bit):

   jdk-7u25-linux-i586.tar.gz (Linux x86)

Untar it and move it to a convenient location:

$ tar -xzvf jdk-7u25-linux-i586.tar.gz

$ mv jdk1.7.0_25 ~/android

Step 5

Add various paths in ~/.bashrc for convenience:

echo 'PATH="$HOME/bin:$PATH"' >> ~/.bashrc
echo 'PATH="$HOME/android/sdk/tools:$PATH"' >> ~/.bashrc
echo 'PATH="$HOME/android/sdk/platform-tools:$PATH"' >> ~/.bashrc
echo 'PATH="$HOME/android/jdk1.7.0_25/bin:$PATH"' >> ~/.bashrc
echo 'PATH="$HOME/android/eclipse:$PATH"' >> ~/.bashrc

Step 6

Install the Android API by starting the Android SDK Manager:

$ android

and follow the on screen instruction to install the Android API. In this writing, I installed Android 4.3 (API 18).

You may also like to create an Android Virtual Device (AVD) for testing purpose.  You can start the Android Virtual Device Manager from the Android SDK Manager by going to the "Tools" menu and select "Manage AVDs...".

We are now ready to move on to Part 2 of this post, i.e. to convert the website into an Android app using Cordova.

Please note that Cordova can build mobile apps in multiple platforms, including Android, iOS, etc.  In this post, we will focus in Android only.