Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hack On Firefox OS - PSES

749 views

Published on

Hack On Firefox OS - Présentation effectuée à Pas Sage En Seine 2015 par Christophe Villeneuve
[Podcast Video] : http://data.passageenseine.org/2015/mp4/PSES2015_hack-firefox-os.mp4

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hack On Firefox OS - PSES

  1. 1. Hack On Firefox OS Christophe Villeneuve @hellosct1
  2. 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. 3. Aujourd'hui ● La connaissance pour tous ● Vos besoins ● Mobile ? Le Quoi !!! ● La pratique
  4. 4. Avant (fin du 20ème siécle)
  5. 5. 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
  6. 6. Le mobile / les smartphones Apple Google Microsoft
  7. 7. Le Futur ● Un web sur smartphone
  8. 8. Au final
  9. 9. Plateforme ouverte mobile
  10. 10. Choisir le moyen de consommer Le market des smartphones Supermarché
  11. 11. Vos besoins ● Matériels ● Technique ● Logiciels ● Composants
  12. 12. Technique : les standards du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  13. 13. Logiciels ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Editeur de texte ● Firefox ou autre – Outils de Débug – Web IDE – Firefox OS App Manager Navigateur
  14. 14. 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
  15. 15. Appareils mobiles (2/2) Samsung Nexus 4 Samsung Galaxy Sony Etc...
  16. 16. Composants → Web apps
  17. 17. https://mdn.mozillademos.org/files/4605/FirefoxOS.png GONK ➢GECKO ➢GAIA
  18. 18. 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)
  19. 19. ➢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
  20. 20. ➢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
  21. 21. Architecture Firefox OSWeb
  22. 22. {   "version": "1.0",   "name": "Batterie",   "description": "Gestion de la batterie",   "launch_path": "/index.html",   "icons": {     "48": "/img/icons/api­48.png",     "128": "/img/icons/api­128.png",     "512": "/img/icons/api­512.png"   },   "developer": {     "name": "Christophe Villeneuve",     "url": "http://www.hello­design.fr"   },     "installs_allowed_from": [     "*"   ],   "appcache_path": "/cache.manifest",   "locales": {     "fr": {       "description": "Gestion de la batterie",       "developer": {         "url": "http://www.hello­design.fr"       }     }   },   "default_locale": "en" } Manifest.webapp https://developer.mozilla.org/en-US/Apps/Build/Manifest Options possibles : - Fullscreen - Permission - Orientation - Serveur - Etc.
  23. 23. CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html Manifest.appcache
  24. 24. 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
  25. 25. 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;     }   }
  26. 26. <!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
  27. 27. Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  28. 28. Simulateur ● Firefox OS simulator WEBIDE https://developer.mozilla.org/fr/docs/Outils/WebIDE
  29. 29. Web IDE
  30. 30. Résultat
  31. 31. Débug
  32. 32. https://marketplace.firefox.com/developers/
  33. 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. 34. https://marketplace.firefox.com/developers/validator Validateur
  35. 35. Déployer votre API https://marketplace.firefox.com/developers/submit/
  36. 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. 37. https://marketplace.firefox.com/ Marketplace
  38. 38. 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 ?
  39. 39. Merci Blog : http://firefoxos.mozfr.org

×