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 :
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 :
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.