Le document présente Firefox OS, un système d'exploitation mobile basé sur des standards web ouverts, ainsi que les technologies et outils nécessaires à son développement. Il décrit l'architecture de Firefox OS, comprenant les couches Gonk, Gecko et Gaia, ainsi que des exemples d'applications et de manifestes pour le développement. Des ressources pour tester et déployer des applications sur la marketplace Firefox OS sont également fournies.

1. Embarquer le web
Dans un smartphone
Firefox OS
Christophe Villeneuve
@hellosct1

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

3. Aujourd'hui
● Le début du commencement
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique

4. 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. Le Futur
● Un web sur smartphone

6. Plateforme ouverte mobile

7. Vos besoins
● Technique
● Logiciels
● Matériels
● Composants

8. Technique : les standards du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials

9. Logiciels
● Gedit
● Notepad++
● Eclipse
● Brackets
● ...
Editeur de texte
● Firefox ou autre
– Outils de Débug
– Web IDE
– Firefox OS App
Manager
Navigateur

10. 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

11. Appareils mobiles (2/2)
Samsung
Nexus 4
Samsung
Galaxy
Sony
Etc...

12. Contrôle APPs
- Multitouch
- WebTelephony
- WebSMS
- Geolocalisation
- Battery API
- WebNFC
- WebVibration
- WebContacts
- FullScreen API
- Settings API
- WebUSB
- Camera
- WebBluetooth
- WebGL

14. https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA

15. 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)

16. ➢GONK
➢GECKO
✔
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

17. ➢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

19. Architecture
Firefox OSWeb

20. 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

21. {
"version": "1.0",
"name": "Batterie",
"description": "Gestion de la batterie",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/rmll­16.png",
"32": "/img/icons/rmll­32.png",
"64": "/img/icons/rmll­64.png",
"128": "/img/icons/rmll­128.png",
"256": "/img/icons/rmll­256.png",
},
"developer": {
"name": "Hello / Sector One",
"url": "http://www.hello­design.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

22. CACHE MANIFEST
# Version 1.0
CACHE:
/css/all.css
/js/lib/all.js
/js/all.js
/index.html
Manifest.appcache

23. 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('battery­charge');
var batteryTop = document.getElementById('battery­top');
var chargeIcon = document.getElementById('battery­charging');
// Position indicateur
// 0 Initialisation, 1 batterie chargé, 2 batterie non chargé
var chargingState = 0;
Js/battery.js

24. 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;
}
}

25. <!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
<head>
<meta charset="utf­8" />
<title>Battery example</title>
<meta content="Gestion battery" name="description" />
<meta content="width=device­width, initial­scale=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

26. Tester l'application
Navigateur
Mobile
http://mdn.github.io/battery-quickstart-finished-example/

27. Simulateur
● Firefox OS simulator WEBIDE
https://developer.mozilla.org/fr/docs/Outils/WebIDE

28. Web IDE

29. Résultat

30. Débug

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

32. Choisir le moyen de consommer
Le market des
smartphones
Supermarché

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

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

35. Déployer votre API
https://marketplace.firefox.com/developers/submit/

36. 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

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

38. https://marketplace.firefox.com/
Marketplace

39. 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 ?

40. Merci
Blog : http://firefoxos.mozfr.org