View
2.053
Download
0
Category
Preview:
Citation preview
AEI - Journée du libre - 19 Septembre 2015
Firefox OS dans le webChristophe Villeneuve@hellosct1
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
Aujourd'hui
● Le début du commencement● Vos besoins● Mobile ? Le Quoi !!!● La pratique
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
Le Futur
● Un web sur...
Smartphone
Tablette
TV OS – exemple : Panasonic
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
Vos besoins
● Technique● Logiciels● Matériels● Composants
AEI - Journée du libre - 19 Septembre 2015
Technique : les standards du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials
AEI - Journée du libre - 19 Septembre 2015
Logiciels
● Gedit● Notepad++● Eclipse● Brackets● ...
Editeur de texte● Firefox ou autre
– Outils de Débug
– Web IDE
– Firefox OS App Manager
Navigateur
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
Appareils mobiles (2/2)
Samsung Nexus
Samsung Galaxy
Sony
Etc... Voir : - B2G-Installer en Add-on- Builds communautaires
AEI - Journée du libre - 19 Septembre 2015
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
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)
AEI - Journée du libre - 19 Septembre 2015
➢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
AEI - Journée du libre - 19 Septembre 2015
➢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
AEI - Journée du libre - 19 Septembre 2015
AEI - Journée du libre - 19 Septembre 2015
Architecture
Firefox OSWeb
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
{
"version": "1.0",
"name": "Batterie",
"description": "Gestion de la batterie",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/rmll16.png",
"32": "/img/icons/rmll32.png",
"64": "/img/icons/rmll64.png",
"128": "/img/icons/rmll128.png",
"256": "/img/icons/rmll256.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
AEI - Journée du libre - 19 Septembre 2015
CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
NETWORK:
*
Manifest.appcache
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
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;
}
}
AEI - Journée du libre - 19 Septembre 2015
<!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="/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
AEI - Journée du libre - 19 Septembre 2015
Tester l'application
Navigateur
Mobile
http://mdn.github.io/battery-quickstart-finished-example/
AEI - Journée du libre - 19 Septembre 2015
Simulateur
● Firefox OS simulator WEBIDEhttps://developer.mozilla.org/fr/docs/Outils/WebIDE
AEI - Journée du libre - 19 Septembre 2015
Web IDE
AEI - Journée du libre - 19 Septembre 2015
Résultat
AEI - Journée du libre - 19 Septembre 2015
Débug
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/
AEI - Journée du libre - 19 Septembre 2015
Choisir le moyen de consommer
Le market des smartphones
Supermarché
AEI - Journée du libre - 19 Septembre 2015
✔ 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
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/validator
Validateur
AEI - Journée du libre - 19 Septembre 2015
Déployer votre API
https://marketplace.firefox.com/developers/submit/
AEI - Journée du libre - 19 Septembre 2015
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
AEI - Journée du libre - 19 Septembre 2015
API Marketplace
API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/
Marketplace
AEI - Journée du libre - 19 Septembre 2015
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 ?
AEI - Journée du libre - 19 Septembre 2015
Merci
Blog : http://firefoxos.mozfr.org
Recommended