Firefox OS & OpenWebApp Workshop – Il y a deux ans ... – Architecture & WebAPI

View Github Repository Open presentation in a new window

moztn

See all presentation from moztn

Firefox OS & OpenWebApp Workshop – Il y a deux ans ... – Architecture & WebAPI

2 0

firefoxOS-prez

[PRESENTATION] Firefox ox universal presentation

On Github moztn / firefoxOS-prez

Firefox OS & OpenWebApp Workshop

Il y a deux ans ...

Et puis ...

Et on a eu ça

Et finalement

Architecture & WebAPI

Trois couches

Gonk

Gecko

Gaia

Gonk

Linux Kernel

Android fork

Gecko

Implémente les standars du HTML

Moteur de rendu HTML de Firefox

Machine virtuelle JavaScript

Implémente les WebAPIs

Gaia

L'inferface utilisateur de FirefoxOS

Lock screen

Home screen

Utilise les WebAPIs

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