Ma première application Firefox OS

Migrer facilement une application JS

Michael Bertocchi

Dans ce tutoriel, je vous expliquer comment migrer une application JS sur le marketplace de Firefox OS Commentez

- Titre : Ma première application Firefox OS

- Auteur : Michael Bertocchi

- Parution : 9 octobre 2014

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2014 Michael Bertocchi. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Préambule

- II. L'application originale à migrer

- III. L'application cible

- IV. Créons notre structure d'application

- V. Testons l'application

- VI. Soumettre notre application au « store » Firefox OS

- VII. FAQ : Foire Aux Questions

- VII-A. Comment se passe le stockage de données ?

- VII-A-1. localForage

- VII-A-2. WebSQL

- VII-B. Comment interagit-on avec le hardware de son téléphone ?

- VIII. Conclusion

- IX. Remerciements

I - Préambule

Firefox OS, l'OS mobile de Firefox est un système d'exploitation interprétant des applications web.

Ici pas d'Objective-C , de Java ou de C#, juste des technologies web (HTML5, JavaScript, CSS3)

Nous allons dans cet article migrer un jeu écrit en HTML et JavaScript en application Firefox OS.

II - L'application originale à migrer

L'application que nous allons migrer est un jeu d'échecs présent sur le site supercapote.com.

C'est un projet simple utilisant du HTML pour l'affichage de l'échiquier et du JavaScript pour le déplacement des pièces.

III - L'application cible

Il y a deux types d'applications pour Firefox OS : les empaquetées et les hébergées.

Selon la définition de Mozilla : « Les applications empaquetées sont essentiellement des fichiers zip contenant toutes les ressources de l'application : HTML, CSS, JavaScript, images, manifeste, etc. Les applications hébergées sont exécutées à partir d'un serveur avec un domaine donné ».

Ici nous allons créer une application « empaquetée ».

IV - Créons notre structure d'application

Créons un répertoire « chess » dans le répertoire web.

Ajoutons un fichier « manifest.webapp » :

{
"version": "0.1",
"name": "Supercapote Chess",
"description": "Simple Chess Game",
"launch_path": "/index.html",
"icons": {
"16": "/app-icons/icon-16.png",
"48": "/app-icons/icon-48.png",
"128": "/app-icons/icon-128.png"
},
"developer": {
"name": "Mika",
"url": "http://supercapote.com"
},
"locales": {
"fr": {
"description": "Simple jeu d'échecs",
"developer": {
"url": "http://supercapote.com"
}
}
},
"default_locale": "en"
}

Créons ensuite un répertoire « app-template » dans lequel nous copions les sources de notre application web.

Et enfin créons un répertoire « app-icons » dans lequel enregistrer les icônes de notre application au format 128x128, 48x38 et 16x16 pixels.

Nous avons ainsi l'arborescence suivante :

Si nous ouvrons notre navigateur web à l'adresse : http://localhost/chess

V - Testons l'application

Rendons-nous à l'adresse https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ pour télécharger le simulateur Firefox OS.

Nous téléchargeons une extension xpi pour Firefox, il vous suffit ensuite de l'ouvrir pour qu'elle soit installée dans Firefox.

Cliquons sur le bouton « hamburger »

Cliquons ensuite sur « développement » puis sur « Gestionnaire d'applications »  :

Nous arrivons ici sur l’émulateur Firefox OS

Cliquons sur le bouton « Ajouter une application empaquetée » et sélectionnons notre répertoire « chess »

Lançons maintenant le simulateur, cliquons sur le bouton « Lancer le simulateur ».

Puis cliquons sur le bouton « Firefox OS 1.3 ».

Une fenêtre s'ouvre :

C'est l'écran de notre émulateur Firefox OS.

Pour installer notre application et ainsi pouvoir la tester, dans l'autre fenêtre, cliquons sur « Mettre à jour » :

Nous voyons apparaître notre application sur l'écran, il nous suffit de cliquer dessus pour la tester :

VI - Soumettre notre application au « store » Firefox OS

Notre application terminée, créons une archive zip du contenu de notre répertoire « chess » et non du répertoire en lui-même.

Rendons-nous à l'adresse : https://marketplace.firefox.com/developers/submit/

Créer un compte développeur.

Puis cliquons sur le lien « Envoyer une application » :

Sélectionnons « Firefox OS », l'onglet « Empaquetée » et choisissons l'archive zip de notre application.

Il peut y avoir des avertissements de type CSP « Content security policy ». En effet, si nous développons des applications en JavaScript, il y a quelques restrictions listées ici :

https://developer.mozilla.org/fr/Apps/PSC

Dans mon cas, les erreurs relevées concernaient ma balise body :

<body onload="load" >

qui démarrait le jeu au chargement de la page.

Ici j'ai donc supprimé cet attribut et ajouté en fin de fichier echec.js

window.onload = load();

qui lui est autorisé.

Attention également pour les onclick : ils ne sont pas autorisés non plus, il faut utiliser à la place « addEventListener »

Par exemple pour mes liens :

var a=getById('piece'+i+'_'+j);
if(a){
a.onclick= game.selectCase(i,j) ;
}

j'ai mis à la place :

var a=getById('piece'+i+'_'+j);
if(a){
a.i=i;
a.j=j;
a.addEventListener("mousedown", function(){   game.selectCase(this.i,this.j); } ,true    );
}

Un formulaire demandera ensuite la catégorie de l'application ainsi qu'une copie d'écran de celle-ci (pour avoir un aperçu sur le store) :

Ici, cliquons sur « La classification du contenu » qui permet d'indiquer l'âge autorisé pour utiliser notre application.

Et voilà, notre application est publiée :

VII - FAQ : Foire Aux Questions

VII-A - Comment se passe le stockage de données ?

Pour une application « empaquetée », plusieurs choix sont offerts :

IndexDb via la library localForage, WebSql et localStorage, nous verrons ci-dessous les deux premiers.

VII-A-1 - localForage

Pour information, c'est un stockage asynchrone, donc il faut toujours indiquer une fonction callback à la récupération et à l'enregistrement :

//récupération
localforage.getItem('maVariable', function(valeur) {
alert('Ma valeur est ' + valeur);
});

//enregistrement
localforage.setItem('maVariable', 'valeur', maFonctionCallBack);

Plus d'informations ici : https://github.com/mozilla/localForage#how-to-use-localforage

VII-A-2 - WebSQL

Ici nous écrivons également en asynchone, mais nous utilisons une base de données (plus puissant et flexible comme stockage) :

//création d'une base de données
var db = openDatabase('maBase', '1.0', 'Description de la base', 2 * 1024 * 1024);

//création d'une table
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS auteur (id unique, nom, prenom)');
});

//exécution d'une requête SQL d'insertion/update
var nom='mon nom';
var prenom='mon prenom';
db.transaction(function(tx) {
tx.executeSql('INSERT INTO auteur ( nom,prenom) VALUES ( ?,?)',[nom,prenom]);
});

//récupération de Select
db.transaction(function (tx){

tx.executeSql('SELECT * FROM auteur', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {

alert(results.rows.item(i).nom+' '+results.rows.item(i).prenom);
}
});

});

Plus d'informations ici :http://html5doctor.com/introducing-web-sql-databases/.

VII-B - Comment interagit-on avec le hardware de son téléphone ?

Firefox OS met à votre disposition des Web API pour interagir avec les fonctionnalités de votre téléphone (SMS, vibration, orientation…)

Par exemple pour envoyer un SMS :

MozSmsManager.send(number, message) ;

Pour récupérer les contacts :

var cursor = navigator.mozContacts.getAll({});

cursor.onsuccess = function() {
if (cursor.result) {
alert("Contact: " + cursor.result.name.join(" "));
cursor.continue();
} else {
alert("Fini !");
}
};

cursor.onerror = function() {
alert("Erreur a la recuperation des contacts");
};

Plus d'informations sur les Web API ici : https://wiki.mozilla.org/WebAPI.

VIII - Conclusion

Comme vous avez pu le voir, il est assez simple de migrer une application JavaScript en une application Firefox OS.

Vous avez également pu voir la simplicité de soumission au market Firefox, j'espère que ce tutoriel vous donnera envie de développer ou porter vos applications web sur cette nouvelle plateforme prometteuse.

Pour information, l'application a été publiée sur le « marketplace » : https://marketplace.firefox.com/app/chess-3?src=search

IX - Remerciements

Je souhaitais remercier chrtophe, yahiko et zoom61 pour la validation technique et ClaudeLELOUP pour la correction orthographique.