Cordova

Cordova is a framework that lets you write web applications
using HTML, CSS and javascript.
It provides basically a webserver to run the same application
natively on most smartphone operating systems.

Cordova was formerly known as Phonegap
before it was donated to Apache and open sourced.
A commercial version by Phonegap is available
which includes some nice features that are not needed for this howto.

Cordova also supplies a set of plugins that you
can use to utilise the phones camera, contacts, GPS etc.

Ratchet

We use Ratchet for the look and feel of the app.
Think of Ratchet as a subset of Bootstrap (not entirely true),
that are specificaly aimed at smartphone apps.
It provides stylesheets that make make the app look
like a native IOS, Android, etc app.
It also provides useful javascript libraries such as push and toggle.

However in this howto we keep it simple and do not use any application framework.
We instead utilise the Handlebars javascript templating framework.
It enables us to write little HTML snippets to compose our pages,
and keep these logic free.

Setup

Install Cordova

For detailed installation steps please read my
Cordova (Phonegap) within Vagrant for Android howto.
It is a step by step guide on installing
and setting up Cordova for building Android applications.
It optionally uses Vagrant as a means of keeping it separate from your local machine,
but you can install everything locally if you prefer.

Create Cordova application

Lets check if you have installed Cordova correctly.

cordova --version

If okay lets create a basic scaffold application.

cordova create pizza com.example.pizza Pizzeria

Install Bower

You can manually find the javascript files
for the libraries used in this application,
but I prefer to keep things tidy and use Bower.

We then initialise Bower.
Set the name to Pizzeria and accept the default for everything else.

cd www;bower init

We then add each library with Bower.

Add Ratchet

bower install -S -p ratchet

Add Handlebars

bower install -S -p handlebars

Install additional libraries

A couple of extra libraries will also make our lives easier.
JQuery for simple page event handling.
Fastclick to support touch click events better.

bower install -S -p fastclick;bower install -S -p jquery

You can keep the application lighter
by only keeping the required files inside bower_components.
Ie. remove source files and other non dist files etc.
But it is often hard to be certain which files are needed
so for this howto we keep all of them.

Hello World

Let's just knock up a quick hello world page as tracer bullet to check if everything installed ok.

If you installed the Android SDK detailed in my Cordova setup howto,
then you can test this hello world on a emulator device.
Otherwise I will assume you test it directly from a normal browser
as the feedback loop is obviously much faster.

Ps: If you test it in Chrome you can open developer tools and click on the
mobile icon to enable scaling to different phones. Quite useful.

open index.html

If the page says Good bye all is well.
If not check the browser's developer console for errors.
If opened in a browser then console 404 errors for cordova.js is expected
as that only exists if on a device.

What Next

Obviously this is just a rudementary example
and does not actually order any real pizzas!
But it does demonstrate the basics of
iterating and displaying collections of data,
passing parameters along,
and submitting forms.

From this you can expand to
include storage, synchronising offline data,
external API calls, application resume etc.
You can add Ratchet's or other javascript libraries
to slide and fade in pages,
use the history API etc.
And also experiment with Cordova's plugins
to use other device features available.