Cordova mobile app development

This page will describe, how to setup your environment to be able to create and deploy Mobile apps using Cordova.

It will be done from a Windows7 laptop, but the Cordova documentation helps to show how to do on other platforms - I also have the same thing setup and running on a Linux Mint laptop.  Very little difference.


Now...as you may or may not be aware, I've been using the above technologies in my day-job since around, 1997 onwards.  I spent about 7 years using JavaScipt "server-side" within various products.  To this very day, I use a BPM Product that also uses JavaScript "server-side".  It has evolved a lot over that duration of time, so much so that I do really see much advantage of doing things any other way.  I'll just point you towards NodeJS if you want to see that evolution errr.... evolving.
I did learn native Android Java programming (even attended the 2014 Coursera.org online course to get up to speed with the latest version), but again, there was a lot of "faffing" about to do something simple.
I built a native app that did most things and it took a week of learning, debugging and getting it right.  I did the same thing using HTML, CSS and JavaScript and it took me about a day.  I'm not sure if that says more about my skillsets than the tooling, but it gives you an idea of why I decided to "give Cordova a go".

Hop over to the Cordova documentation and follow the instructions for Command Line Interface:
Simple steps =
download and install the Android SDK
download and install the FirefoxOS SDK
download and install nodeJS
download and install a git client
use >npm to install cordova
c:\>npm install -g cordova

create a folder c:\cordova and navigate to it and type:

>cordova create hello com.example.tony HelloWorld

you'll notice that hello is now a sub-folder, navigate to it and now we need to add platforms to the project:
>cd hello
>cordova platform add android
>cordova platform add firefoxos

if you wish to add device plugin features you can add the plugins now, such as:
>cordova plugin add org.apache.cordova.network-information

now we need to build our app:
>cordova build
that command will build and output for all platforms, if you wish to output for firefoxOS use:
>cordova prepare firefoxos

you can use the Android SDK emulator (but it is real slow and takes ages to boot up) or you can use:

>cordova serve android

this will create a localhost:8000 website that will open in Chrome locally on the PC and will allow you to test out the app (open Developer Tools and Console to see any errors).  Once you are happy with this, plug in your Nexus 7 Tablet and type:

>cordova run android

this will download and install the app to the device and run it.


The next step will be to take your AngularJS web application and drop it into the \www folder, then rebuild and create the output.  I'll walk through doing this with a simple app just to demonstrate how to do this as a skeleton starter.

>cordova create event com.tony.app Event
>cd event
>cordova platform add android
>cordova platform add firefoxos
then I copied my \www folder from an AngularJS web app that I had written.
You can then execute to build for android with:
>cordova build android

This will then create the .apk file in \event\platforms\android\ant-build\nameOfApp-debug.apk

You can manually share this as-is or if you can plug in the device, you can:

>cordova run android

The FirefoxOS version requires you to:

>cordova prepare

this creates the output offline web app for firefox:


I found that to be able to deploy this to my FirefoxOS phone, I needed to download the tooling into the Firefox web browser and that I needed to upgrade to v1.2 of the firmware.  That detail is for another posting!




1 comment:

  1. Very fantastic and well-written post.Its extremely good and very helpful for me.
    Mobile App Development

    ReplyDelete