Développer sur Firefox OS

Sur le marché du mobile un acteur du web à fait son apparition depuis quelques temps, la fondation Mozilla.Elle développe un système d'exploitation libre pour le mobile, Firefox OS. Développé par la fondation Mozilla est un système d'exploitation mobile libre. Destiné dans un premier temps au marché des mobiles low-cost, son moteur de rendu Gecko permet de faire fonctionner des applications web au format HTML5.

Installer Firefox Developper Edition

Pour travailler sur notre future application, il faut installer Firefox Developper Edition disponible à l'adresse suivante : https://www.mozilla.org/fr/firefox/developer/

Remarque : cette article a été rédigé sur la version 40.0a2 de Firefox Developper Edition.

Premier aperçu

Cliquez sur l'onglet de Firefox WebIDE.
Une fois l'éditeur ouvert, cliquez sur "Project", "New App". Sélectionnez la première "HelloWorld" puis saisissez un nom de projet dans "Projet Name" et validez. Indiquez un dossier sur votre disque dur où l'application sera générée.

Une fois votre application générée, vous pouvez ouvrir les fichiers à partir de l'éditeur de Firefox ou bien depuis votre éditeur favoris. Commencons d'abord par le fichier "manifest.webapp" qui est écrit en Json :

{
  "name": "myApp",
  "description": "A Hello World app",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icons/icon16x16.png",
    "48": "/icons/icon48x48.png",
    "60": "/icons/icon60x60.png",
    "128": "/icons/icon128x128.png"
  },
  "type": "privileged",
  "permissions": {}
}

Ce fichier n'est autre que le fichier de manifeste d'application. Il va servir à afficher les informations sur le marketplace de Firefox. C'est pour cela qu'il contient toutes les données relatives à notre application comme le nom ("name"), la description, le fichier de base ("launch_path") et les icones de différentes tailles au format PNG présents dans le dossier "icons". Quant aux deux dernières options, elle sont facultatives.

Ensuite, on passe au fichier "index.html" :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>Hello World</title>

    <style>
      body {
        border: 1px solid black;
      }
    </style>

    <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
         so we use a script file. -->
    <script src="app.js" defer></script>

  </head>

  <body>
    <!-- This code is in the public domain. Enjoy! -->
    <h1>Hello World</h1>
  </body>

</html>

C'est une page HTML qui nous affiche "Hello World". Elle charge également un fichier Javascript "app.js" :

window.addEventListener("load", function() {
  console.log("Hello World!");
});

Fini le tour du proprio, lancons le simulateur !

Toujours dans l'éditeur WebIDE, en haut à droite, cliquez sur "Selectionnez l'environnement" et sélectionnez un des simulateurs présent dans "Simulator".

Le simulateur est lancé mais l'application n'apparait pas et c'est normal. Cliquez sur l'icone play, au milieu dans l'éditeur.

Et le "console.log" dans tout ça ?
Sur WebIDE, cliquez sur l'icone réprésentant une clef à molette (ou F12) puis sur l'onglet "Console". Le message "Hello World !" apparait. Vous pouvez ainsi avec cet outil débugger votre application comme pour un site web.

Remarque : lorsque vous modifiez un fichier et que vous souhaitez voir le changement affecté par ce dernier, cliquez sur le logo de rechargement ou faites un CTRL-R depuis WebIDE pour recharger l'application sur le simulateur.

Il est possible de changer les informations de l'application suivant la langue du téléphone.
Dans votre fichier de manifeste :

{
  "name": "Rouge",
  "description": "Une application Hello World",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icons/icon16x16.png",
    "48": "/icons/icon48x48.png",
    "60": "/icons/icon60x60.png",
    "128": "/icons/icon128x128.png"
  },
  "type": "privileged",
  "permissions": {},
  "locales": {
    "en": {
      "name": "Red",
      "description": "An Hello World app"
    },
    "es": {
      "name": "Roja",
      "description": "Una aplicación Hello World"
    }
  },
  "default_locale": "fr"
}

Pour tester sur Firefox OS, il faut changer la langue du système. Allez dans "Paramètres", "Langues" et sélectionnez une des langues présente dans le manifeste.

Ionic

Vous vous êtes déja formé sur Ionic? Ça tombe bien car le framework carburant à Angular fonctionne également sur Firefox OS :)
Vous pouvez faire le test en lancant les commandes ci-dessous dans un terminal :

Lors de la commande de construction de l'application, Ionic a créé le dossier "firefoxos" dans "platforms". Dans le dossier "myIonicApp\platforms\firefoxos\www" se trouve le fichier de manifeste ainsi que l'application compilée pour Firefox OS.

Dans WebIDE, ajoutez le chemin de votre application. Pour cela, cliquez sur "Ouvrir une application" puis sur "Ouvrir une application empaquetée" et indiquez le répertoire de l'application (celui cité ci-dessus).

Conclusion

Développer une application mobile sur cette OS mobile est un jeu d'enfant pour développeur web. Et ce, malgré l'absence à l'heure actuelle de framework CSS pour la touche graphique propre à Firefox OS. De son coté, la fondation Mozilla recommande chaudement d'utiliser les frameworks front Javascript tels que Backbone, Ember et Angular. Mais rien ne vous empèche d'utiliser les API propres (ou non) à Firefox (Battery Status API, Geolocation API, Vibration API, etc...)

Aller plus loin