Ma première application Firefox OS

Migrer facilement une application JS

Dans ce tutoriel, je vous expliquer comment migrer une application JS sur le marketplace de Firefox OS 9 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

 
Sélectionnez
{
  "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.

Image non disponible

Nous avons ainsi l'arborescence suivante :

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

Image non disponible

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.

Image non disponible

Cliquons sur le bouton « hamburger »

Image non disponible

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

Image non disponible

Nous arrivons ici sur l'émulateur Firefox OS

Image non disponible

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

Image non disponible

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 :

Image non disponible

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

Image non disponible

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

Image non disponible

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

Image non disponible

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

Image non disponible

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 :

 
Sélectionnez
<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

 
Sélectionnez
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 :

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

j'ai mis à la place :

 
Sélectionnez
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) :

Image non disponible

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 :

Image non disponible

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 :

 
Sélectionnez

//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) :

 
Sélectionnez
//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 :

 
Sélectionnez
MozSmsManager.send(number, message) ;

Pour récupérer les contacts :

 
Sélectionnez
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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.