Firefox OS & OpenWebApp Workshop

Il y a deux ans ...

Et puis ...

Et on a eu ça

Et finalement

Architecture & WebAPI

Trois couches

  1. Gonk

  2. Gecko

  3. Gaia

Gonk

  1. Linux Kernel

  2. Android fork

Gecko

  1. Implémente les standars du HTML

  2. Moteur de rendu HTML de Firefox

  3. Machine virtuelle JavaScript

  4. Implémente les WebAPIs

Gaia

  1. L'inferface utilisateur de FirefoxOS

  2. Lock screen

  3. Home screen

  4. Utilise les WebAPIs

  5. Écrit en HTML5 + CSS3 + JS

Pendant ce temps ...

Mozilla MarketPlace

Premiers partenaires

  • Devices :

    ZTE et TCL

  • Operateurs :

    Deutsche Telekom, Etisalet, Smart, Sprint, Telecom Italia, Telefonica et Telenor

Mobile World Congress 2013

Plus partenaires

23 partenaires

2 constructeurs

  • ZTE
  • Alcatel

ZTE Open

ZTE Open

Alcatel One Touch Fire

Alcatel One Touch Fire

Workshop Time ! :)

Environnement de travail

https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/

Hello World !

index.html


<body>
  <h3>Hello World ! :)</h3>
</body>

Hello World !

manifest.webapp


{
  "name":"Hello World",
  "description":"Hello world pour le workshop esprit",
  "launch_path":"/index.html",
  "developer": {
    "name":"rednaks",
    "url":"http://rednaks.tn"
  },
  "default_locale":"en"
}

Les WebAPIs

La batterie


var battery = navigator.battery;
battery.level;
battery.charging;
battery.chargingTime;
battery.dischargingTime;

Avec un EventListener 


battery.addEventListener("levelchange", myEventHandler, false);
battery.addEventListener("chargingchange", myEventHandler, false);
battery.addEventListener("chargintimechange", myEventHandler, false);
battery.addEventListener("dischargingtimechange", myEventHandler, false);

Vibration API


navigator.vibrate(100);
navigator.vibrate([100,50,200]);
navigator.vibrate(0);
navigator.vibrate([]);

Les Notifications


var myNotification = navigator.mozNotification.createNotification(
                    "Hello", 
                    "Juste pour dire salut :p", 
                    iconURL);
//myNotification.onclick = function () {}
//myNotification.onclose = function () {}

myNotification.show();

manifest


"permissions":{
  "desktop-notification":{
    "description":"Accès aux notification"
  }
}

Capteurs de proximité


window.addEventListener('deviceproximity', myEventHandler);
function myEventHandler(event){
  var val = event.value;
  var max = event.max;
  var min = event.min;
  //TODO
}

Permission :


"permissions":{
  "background-sensor":{
  }
}

Téléphonie


var tel = navigator.mozTelephony;
var muted = tel.muted; //modifiable
var speakers = tel.speackerEnabled; // modifiable
var unAppel = tel.dial("+21650123456");
unAppel.hangUp();
tel.onincoming = function(event){
  var appel = event.call;
  var num = appel.number;
  appel.anwser();
};

Permission


telephony

WebSMS


var sms = navigator.mozSMS;
sms.send("+21650123456", "Bonjour :)");
sms.onreveived = function (event){
  var msg = event.message;
};

Permission


sms

Et plein d'autres WebAPIS

  • WebBluetooth
  • Camera API
  • WebActivities
  • Contact API
  • DeviceStorage API
  • TCP Socket API
  • Ambiant Light Event
  • Geolocation API
  • Alarm API

API à venir

  • CalendarAPI
  • WebRTC
  • WebNFC
  • WebUSB
  • Sync API

Publier

Manifest checker

https://marketplace.mozilla.org/developers

Merci :)