Creating a Chronometer App for Firefox OS

On a previous entrance about #FirefoxOS I wrote about how to write manifest.webapp files. This files contains a JSON string with the metadata of the App.

For a better understanding, let’s use an example: chronometer.

Programming the chronometer

Apart from the header and the footer, the central part of the app includes two buttons that give functionality to the app. One button is for start-stop the timer, and the second is for clearing the data. Also, I have included the neccesary code to store partial times on localStorage.

I have used zepto.js instead of jQuery, and the Javascript code to read the data (in case it existes) from localStorage, load and preparing the start-stop actions, show information, … The code is not complicated, I think!

Concerning the aspect of the App, I have applied a style close to www.manejandodatos.es, making use of the PureCSS framework for the front-end part.

About icons

Icons can be a minor aspect of an app, but in deed, it is NOT, and it must be an important part of our app. One of the metadata included on the manifest.webapp is the path to icons, so you ned to create them with several sizes.

I tend to create 16, 32, 48, 60, 64, 90, 120, 128 and 256 pixel icons.

Nota: I should have spent more time on icons …. but I’m sure you’ll understand me 😉

Creating the manifest.webapp

Now, it’s turn of the manifest.webapp file, with all info about the app:

{    "name": "MD Crono",
    "description": "Manejando datos, by David Trillo Montero",
    "launch_path" : "/crono.html",
    "icons": {
        "256" : "/img/crono256.png",
        "128" : "/img/crono128.png",
        "120" : "/img/crono120.png",
        "90" : "/img/crono90.png",
        "64"  : "/img/crono64.png",
        "60"  : "/img/crono60.png",
        "48"  : "/img/crono48.png",
        "32"  : "/img/crono32.png",
        "16"  : "/img/crono16.png"
    },
    "type": "web",
    "developer": {
        "name": "David Trillo Montero",
        "url" : "http://www.manejandodatos.es"
    },
    "version": "1.0",
    "default_locale": "es"
}

A very important issue is the launch_path: you need to give relative paths, no root required, but the rest of the path in case you have your files distributed on subdirs.

Install chronometer using App Manager as a Hosted App

We have out app ready to install it on Firefox Os simulator (I have used versión 1.3), so on Add Packaged App  (you need to specify a local path of your computer), select a path where your app is:

Click on Update, and now you have the chronometer app on Firefox OS.

Click on the icon, and you start the chronometer app:

Unsinstall the app

I have found several web pages about how to install apps on Firefox OS, but none about unistalling apps. The way to do it is accessing to Adjustments:

Search for App Permissions:

And locate the app:

After clicking on the app, you receive more info of the app (the info containes on the manifest.webapp), and you have a nice button for Uninstall , and in case you click, you are asekd for a confirm before proceed.

Well, I hope you find interesting this information about Firefox OS, and have a nice day!