Creating a Chronometer App for Firefox OS

Posted by in 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.

App Cronometro

App Cronometro

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.

Preparando los iconos para Firefox OS

Preparando los iconos para Firefox OS

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:

Instalando App en FirefoxOS

Instalando App en FirefoxOS

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

Cronometro en FirefoxOS

Cronometro on FirefoxOS

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

Cronometro en FirefoxOS

Cronometro on FirefoxOS

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:

Desinstalar app en FirefoxOS

Unsinstall the app on FirefoxOS

Search for App Permissions:

Permisos de apps en FirefoxOS

App Permissions on FirefoxOS

And locate the app:

Desinstalar app en FirefoxOS

Desinstalar app en FirefoxOS

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.

Desinstalar app en FirefoxOS

Uninstall an app on FirefoxOS

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