Firefox OS dans le web - Journée du libre 2015 Lille

AEI - Journée du libre - 19 Septembre 2015

Firefox OS dans le webChristophe Villeneuve@hellosct1


Qui... est Christophe Villeneuve ?

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

Consultant IT


Aujourd'hui

● Le début du commencement● Vos besoins● Mobile ? Le Quoi !!!● La pratique


Le Web

● Principes simples– URL/HTTP/HTML

● Standards ouverts● Pas de Kit de Dév.● Pas d'autorisation● Disponible en Doc● ...

● 1ère génération

● 2ème génération


Le Futur

● Un web sur...

Smartphone

Tablette

TV OS – exemple : Panasonic


Quelques dates

● 1.0 – Décembre 2012 (Gecko 18)● 1.1 – Mars 2013● 1.2 – Septembre 2013 (Gecko 23)● 1.3 – Janvier 2014 (Gecko 28)● 1.4 – Avril 2014 (Gecko 30)● 2.0 – Juillet 2014 (Gecko 32)● 2.1 – Octobre 2014 (Gecko 34)● 2.2 – Avril 2015 (Gecko 36)● 2.5 - Prévision Fin 2015 (Gecko...)

Plateforme ouverte mobile


Vos besoins

● Technique● Logiciels● Matériels● Composants


Technique : les standards du web

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


Logiciels

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

Editeur de texte● Firefox ou autre

– Outils de Débug

– Web IDE

– Firefox OS App Manager

Navigateur


Appareils mobiles (1/2)

Alcatel One TouchFlame

ZTE Open C

GeeksPhone Intex Cloud FX

Et beaucoup d'autres disponibles : https://www.mozilla.org/fr/firefox/os/devices/

LG Fx0 KLIFOpen L Pixi 3


Appareils mobiles (2/2)

Samsung Nexus

Samsung Galaxy

Sony

Etc... Voir : - B2G-Installer en Add-on- Builds communautaires



Contrôle APPs- Multitouch- WebTelephony- WebSMS- Geolocalisation- Battery API- WebNFC- WebVibration

- WebContacts- FullScreen API- Settings API- WebUSB- Camera- WebBluetooth- WebGL

AEI - Journée du libre - 19 Septembre 2015https://mdn.mozillademos.org/files/4605/FirefoxOS.png

GONK

➢GECKO

➢GAIA

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


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✔ 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

➢GECKO


➢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



Architecture

Firefox OSWeb


Icônes

Ex : Firefox OS 2.x Pour nous

● icone-16.png

● icone-32.png

● icone-48.png

● icone-64.png

● icone-128.png

● icone-512.png


{

"version": "1.0",

"name": "Batterie",

"description": "Gestion de la batterie",

"launch_path": "/index.html",

"icons": {

"16": "/img/icons/rmll16.png",





},

"developer": {

"name": "Hello / Sector One",

"url": "http://www.hellodesign.fr"

},

"installs_allowed_from": ["*"],

"appcache_path": "/manifest.appcache",

"locales": {

"fr": {

"name" : "Batterie",

"description": "gestion de la batterie",

"developer": {

"url": "http://www.rmll.info"

}

}

},

"default_locale": "en"

}

Manifest.webapp

Options possibles : - Fullscreen- Permission- Orientation- Serveur- Etc.

https://developer.mozilla.org/en-US/Apps/Build/Manifest


CACHE MANIFEST

# Version 1.0

CACHE:

/css/all.css

/js/lib/all.js

/js/all.js

/index.html

NETWORK:

*

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('batterycharge');

var batteryTop = document.getElementById('batterytop');

var chargeIcon = document.getElementById('batterycharging');

// 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="utf8" />

<title>Battery example</title>

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

<meta content="width=devicewidth, initialscale=1.0" name="viewport" />

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




<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 simulator WEBIDEhttps://developer.mozilla.org/fr/docs/Outils/WebIDE


Web IDE


Résultat


Débug


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


Choisir le moyen de consommer

Le market des smartphones

Supermarché


✔ 100 % le contrôle✔ Pas d'intermédiaire

✔ Chez vous✔ Déporté✔ Sur la market

✔ N'importe qui peut en développer une

✔ Toutes les Apps ne sont pas libres

Market... Marketplace


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

Validateur


Déployer votre API

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


Catégorie

- Informations- Pays / Langue- Média- Détails- Assistance- Info techniques- Catégories

- Informations- Pays / Langue- Média- Détails- Assistance- Info techniques- Catégories


API Marketplace

API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html


https://marketplace.firefox.com/

Marketplace


http://marketplace.mozilla.org

http://www.mozilla.org/firefoxos

https://developer.mozilla.org/fr/Firefox_OS/Developing_Gaia

https://developer.mozilla.org/fr/Firefox_OS

http://hacks.mozilla.org

URL ?

http://marketplace.mozilla.org/

http://www.mozilla.org/firefoxos


Merci

Blog : http://firefoxos.mozfr.org

Technology

Firefox OS dans le web - Journée du libre 2015 Lille