Mais conteúdo relacionado Semelhante a Firefox OS de la théorie à la pratique - OSDC (20) Mais de Christophe Villeneuve (20) Firefox OS de la théorie à la pratique - OSDC1. Firefox OS
de la théorie à la pratique
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
4. Firefox OS C'est
● Navigation par onglets
● Gestion mémoire
● Créer vos applications
personnalisées et
différencier UX
● Tout en application Web
7. 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)
8. ➢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
9. ➢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
14. Les langages du web
https://developer.mozilla.org/en-US/docs/Web/Tutorials
15. Outils
Editeur de texte
● Gedit
● Notepad++
● Eclipse
● Brackets
● ...
Navigateur
● Firefox ou autre
– Outils de Débug
– Firefox OS App
Manager
19. {
"version": "1.0",
"name": "Batterie",
"description": "Gestion de la batterie",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/osdc16.
png",
"32": "/img/icons/osdc32.
png",
"64": "/img/icons/osdc64.
png",
"128": "/img/icons/osdc128.
png",
"256": "/img/icons/osdc256.
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.triplea.fr/alchimie"
}
}
},
"default_locale": "en"
}
Manifest.webapp
21. Js/battery.js
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;
22. Js/battery.js (suite)
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;
}
}
} 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;
}
}
23. index.html
<!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>
25. Simulateur
● Firefox OS simulator
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/
● Lancer App Manager
(developpement/gestionnaire d'applications)
about:app-manager
ou
● Démarrer simulator
● Ajouter l'API
30. ✔ 100 % le contrôle
✔ Pas d'intermédiaire
✔ Chez vous
✔ Déporté
✔ Sur la market
Marketplace
36. Merci
Sources des slides :
Tristant Nitot
Loic Cuguen
https://developer.mozilla.org/fr/Apps/Quickstart