Firefox OS de la théorie à la pratique

Christophe Villeneuve@hellosct1

Qui... est Christophe Villeneuve ?

<<

afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant

Aujourd'hui

● La théorie● La pratique● Autre utilisation

Firefox OS C'est● Navigation par onglets

● Gestion mémoire

● Créer vos applications personnalisées et différencier UX

● Tout en application Web

https://mdn.mozillademos.org/files/4605/FirefoxOS.png

GONK

➢GECKO

➢GAIA

GONK✔ Couche basse

✔ Kernel Linux + Matériels

✔ Hardware 

✔ libre ou propriétaire✔ Abstraction Layer (HAL)

✔ Pas exposé le JS  ✔ Isolé de Gaia 

✔ Communication par Gecko

Architecture (1/3)

➢GONK

➢GECKO

✔ Moteur de rendu HTML5✔ Gestion des API

✔ De plus en plus complet

✔ Exécution des applications (runtime)

✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript

Architecture

➢GONK

➢GECKO➢GAIA

✔ Interface utilisateur (IHM)✔ Construction API Full Web✔ HTML 5 + open Web✔ Communique avec Gecko via des Web API✔ Les Apps sont exécutés en mode sandbox✔ Offline

✔ LocalStorage, appCache

Architecture

Composants → Web apps

Gestion des demandes par Gonk

Système de communication

Les compétences

Les compétences

Les langages du web

https://developer.mozilla.org/en-US/docs/Web/Tutorials

Outils

● Gedit● Notepad++● Eclipse● Brackets● ...

Editeur de texte● Firefox ou autre

– Outils de Débug

– Firefox OS App Manager

Navigateur

Appareils mobiles (Quelques modèles)

Alcatel One TouchFlame

ZTE Open C

GeeksPhone

Intex Cloud FX

Architecture

Index.html

Img=images

Css= feuilles de styles

js=javascripts

Firefox OS Web

{

  "version": "1.0",

  "name": "Batterie",

  "description": "Gestion de la batterie",

  "launch_path": "/index.html",

  "icons": {

    "16": "/img/icons/osdc­16.png",

    "32": "/img/icons/osdc­32.png",

    "64": "/img/icons/osdc­64.png",

    "128": "/img/icons/osdc­128.png",

    "256": "/img/icons/osdc­256.png",

  },

  "developer": {

    "name": "Hello / Sector One",

    "url": "http://www.hello­design.fr"

  },

  "installs_allowed_from": ["*"],

  "appcache_path": "/manifest.appcache",

  "locales": {

    "fr": {

      "name" : "Batterie",         

      "description": "gestion de la batterie",

      "developer": {

        "url": "http://www.triplea.fr/alchimie"

      }

    }

  },

  "default_locale": "en"

}

Manifest.webapp

CACHE MANIFEST

# Version 1.0

CACHE:

/css/all.css

/js/lib/all.js

/js/all.js

/index.html

Manifest.appcache

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

// définir les éléments

var indicator1 = document.getElementById('indicator1');

var indicator2 = document.getElementById('indicator2');

var batteryCharge = document.getElementById('battery­charge');

var batteryTop = document.getElementById('battery­top');

var chargeIcon = document.getElementById('battery­charging');

// Position indicateur

// 0 Initialisation, 1 batterie chargé, 2 batterie non chargé

var chargingState = 0;

Js/battery.js

if(battery.charging) {

  // batterie chargé

    if(chargingState == 1 || chargingState == 0) {

 

      batteryTop.style.backgroundColor = 'gold';

      batteryCharge.style.backgroundColor = 'gold';

      indicator2.innerHTML = "Battery is charging";

      chargeIcon.style.visibility = 'visible';

      createNotification("batterie chargé");

      // flip the chargingState flag to 2

      chargingState = 2;

    }

  } 

Js/battery.js (suite)

  } else if(!battery.charging) {

  // Batterie non chargé

    if(chargingState == 2 || chargingState == 0) {

   

      batteryTop.style.backgroundColor = 'yellow';

      batteryCharge.style.backgroundColor = 'yellow';

      indicator2.innerHTML = "Battery not charging";

      chargeIcon.style.visibility = 'hidden';

     

      createNotification("batterie non chargé");

      // flip the chargingState flag to 1

      chargingState = 1;

    }

  }

<!DOCTYPE html>

<html lang="en" manifest="manifest.appcache">

  <head>

    <meta charset="utf­8" />

    <title>Battery example</title>

    <meta content="Gestion battery" name="description" />

    <meta content="width=device­width, initial­scale=1.0" name="viewport" />

    <link href="/images/32.png" rel="icon" size="32x32" />

    <link href="/images/64.png" rel="icon" size="64x64" />

    <link href="/images/128.png" rel="icon" size="128x128" />

    <link href="/images/256.png" rel="icon" size="256x256" />

    <link href="/css/all.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

    // Votre code

    <script src="/javascripts/all.js" type="text/javascript"></script>

   <button id="install">Install app on device</button>

  </body>

</html>

index.html

Tester l'application

Navigateur

Mobile

http://mdn.github.io/battery-quickstart-finished-example/

Simulateur

● Firefox OS simulatorhttps://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/

● Lancer App Manager (developpement/gestionnaire d'applications)

about:app-manager

● Démarrer simulator● Ajouter l'API

ou

App Manager

Résultat

Débug

https://marketplace.firefox.com/developers/

✔ 100 % le contrôle✔ Pas d'intermédiaire✔ Chez vous✔ Déporté✔ Sur la market

Marketplace

https://marketplace.firefox.com/developers/validator

Validateur

https://marketplace.firefox.com/

Marketplace

Autre Utilisation

Industriels utilisant Firefox OS

Kickstarter sur une clé HDMI

http://marketplace.mozilla.org

http://www.mozilla.org/firefoxos

http://wiki.mozilla.org/Gaia/Hacking

https://developer.mozilla.org/en­US/docs/Mozilla/Firefox_OS

URL ?

Sources des slides : Tristant NitotLoic Cuguenhttps://developer.mozilla.org/fr/Apps/Quickstart

Merci