How I turn my website into an Android App - Part 2

In part 2 of this blog post, we are going to convert my website into an Android app using Cordova command line interface (CLI).

Step 1 

Create a Cordova project to host the website.

$ cordova create amg com.amgcomputing.website AMG

where:
amg = directory to host the project files
com.amgcomputing.website = reverse domain-style project identifier
AMG = display name of the app

Step 2
Since I am only interested in the Android platform in this post, I remove all icon and screen resources for other platforms.

$ cd amg

$ rm -rf www/res/icon/bada
$ rm -rf www/res/icon/bada-wac
$ rm -rf www/res/icon/blackberry
$ rm -rf www/res/icon/ios
$ rm -rf www/res/icon/tizen
$ rm -rf www/res/icon/webos
$ rm -rf www/res/icon/windows-phone

$ rm -rf www/res/screen/bada
$ rm -rf www/res/screen/bada-wac
$ rm -rf www/res/screen/blackberry
$ rm -rf www/res/screen/ios
$ rm -rf www/res/screen/tizen
$ rm -rf www/res/screen/webos
$ rm -rf www/res/screen/windows-phone

Step 3
Add android platform support to the project.

$ cordova platform add android

Step 4
To keep it simple, I am going to delete the higher resolution drawable resources that come with the platform:

$ rm -rf platforms/android/res/drawable-hdpi
$ rm -rf platforms/android/res/drawable-ldpi
$ rm -rf platforms/android/res/drawable-mdpi
$ rm -rf platforms/android/res/drawable-xhdpi

Then I replace the icon resource (96x96 pixels) that comes with the platform with my own version of it:

platforms/android/res/drawable/icon.png

Step 5
Here is the directory structure of my Bootstrap v3 based website.  I built it using the starter-template.

www
|_ assets
|  |_ js
|_ dist
   |_ css
   |_ js

I put a copy of my website in the www folder of the cordova project, replacing the index.html there.

Step 6
I like to set my app at version 1.0, so I change the version name from the default of "0.0.1" to "1.0" in the www/config.xml file.  During the build process, Cordova will automatically update the Android Manifest (AndroidManifest.xml) located in the platforms/android direcotry to reflect this change.

$ sed -i'' 's/version="0.0.1"/version="1.0"/' www/config.xml

The -i'' option is for in place editing without making any backup.

Step 7
Build the project to generate a debug apk:

$ cordova build android

The generated debug apk is located at:
platorms/android/bin/AMG-deubg.apk

You can also test the app by running it in the Android Virtual Device (AVD) created in Part 1 of this post:

$ cordova emulate android

Step 8
Next is to create a release version of the apk:

$ cordova build --release android

The generated release apk is located at:
platorms/android/bin/AMG-release-unsigned.apk

Step 9
Now we are ready to prepare the release apk for publishing to the Google Play store.

See you in Part 3 of this post.