Le document présente Firefox OS et aborde la programmation d'applications web mobiles. Il décrit l'architecture de Firefox OS, les composants techniques, ainsi que des exemples de code pour gérer la batterie à travers le développement d'applications. Il fournit également des liens vers des outils de développement, des simulateurs et des ressources pour les développeurs intéressés par Firefox OS.

1. Firefox OS
pratiquer le web mobile
Christophe Villeneuve
@hellosct1

2. Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant

3. Aujourd'hui
● Vos besoins
● Mobile ? Le Quoi !!!
● La pratique

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

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

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

7. Appareils mobiles (Quelques modèles)
Alcatel One Touch
Flame
ZTE
Open C
GeeksPhone Intex
Cloud FX
Et beaucoup d'autres disponibles :
https://www.mozilla.org/fr/firefox/os/1.3/

8. Composants → Web apps

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

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

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

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

15. Architecture
Firefox OSWeb

16. {
"version": "1.0",
"name": "Batterie",
"description": "Gestion de la batterie",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/osdc­16.png",
"32": "/img/icons/osdc­32.png",
"64": "/img/icons/osdc­64.png",
"128": "/img/icons/osdc­128.png",
"256": "/img/icons/osdc­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.jdll.org"
}
}
},
"default_locale": "en"
}
Manifest.webapp

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

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

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

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

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

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

23. Web IDE

24. Résultat

25. Débug

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

27. ✔
100 % le contrôle
✔
Pas d'intermédiaire
✔
Chez vous
✔
Déporté
✔
Sur la market
Marketplace

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

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

30. http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki.mozilla.org/Gaia/Hacking
https://developer.mozilla.org/en­US/docs/Mozilla/Firefox_OS
URL ?

31. Merci