Firefox OS dans le web - Journée du libre 2015 Lille
1. AEI - Journée du libre - 19 Septembre 2015
Firefox OS dans le web
Christophe Villeneuve
@hellosct1
AEI - Journée du libre - 19 Septembre 2015
2. 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
3. AEI - Journée du libre - 19 Septembre 2015
Aujourd'hui
● Le début du commencement
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique
4. 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
5. AEI - Journée du libre - 19 Septembre 2015
Le Futur
● Un web sur...
Smartphone
Tablette
TV OS – exemple : Panasonic
6. 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...)
8. AEI - Journée du libre - 19 Septembre 2015
Vos besoins
● Technique
● Logiciels
● Matériels
● Composants
9. AEI - Journée du libre - 19 Septembre 2015
Technique : les standards du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials
10. 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
11. AEI - Journée du libre - 19 Septembre 2015
Appareils mobiles (1/2)
Alcatel One Touch
Flame
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
12. 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
14. 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
15. AEI - Journée du libre - 19 Septembre 2015
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
16. 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)
17. 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
18. 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
20. AEI - Journée du libre - 19 Septembre 2015
Architecture
Firefox OSWeb
21. 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
23. 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
24. 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
25. 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;
}
}
32. AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/
33. AEI - Journée du libre - 19 Septembre 2015
Choisir le moyen de consommer
Le market des
smartphones
Supermarché
34. 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
35. AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/developers/validator
Validateur
36. AEI - Journée du libre - 19 Septembre 2015
Déployer votre API
https://marketplace.firefox.com/developers/submit/
37. 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
38. AEI - Journée du libre - 19 Septembre 2015
API Marketplace
API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
39. AEI - Journée du libre - 19 Septembre 2015
https://marketplace.firefox.com/
Marketplace
40. 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 ?
41. AEI - Journée du libre - 19 Septembre 2015
Merci
Blog : http://firefoxos.mozfr.org