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.

Embarquer le web dans un smartphone Firefox OS - RMLL 2015

2,150 views

Published on

Présentation effectuée par Christophe Villeneuve (@hellosct1) au RMLL 2015

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Embarquer le web dans un smartphone Firefox OS - RMLL 2015

  1. 1. Embarquer le web Dans un smartphone Firefox OS Christophe Villeneuve @hellosct1
  2. 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. 3. Aujourd'hui ● Le début du commencement ● Vos besoins ● Mobile ? Le Quoi !!! ● La pratique
  4. 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. 5. Le Futur ● Un web sur smartphone
  6. 6. Plateforme ouverte mobile
  7. 7. Vos besoins ● Technique ● Logiciels ● Matériels ● Composants
  8. 8. Technique : les standards du web https://developer.mozilla.org/en-US/docs/Web/Tutorials
  9. 9. Logiciels ● Gedit ● Notepad++ ● Eclipse ● Brackets ● ... Editeur de texte ● Firefox ou autre – Outils de Débug – Web IDE – Firefox OS App Manager Navigateur
  10. 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. 11. Appareils mobiles (2/2) Samsung Nexus 4 Samsung Galaxy Sony Etc...
  12. 12. Contrôle APPs - Multitouch - WebTelephony - WebSMS - Geolocalisation - Battery API - WebNFC - WebVibration - WebContacts - FullScreen API - Settings API - WebUSB - Camera - WebBluetooth - WebGL
  13. 13. https://mdn.mozillademos.org/files/4605/FirefoxOS.png GONK ➢GECKO ➢GAIA
  14. 14. 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)
  15. 15. ➢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
  16. 16. ➢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
  17. 17. Architecture Firefox OSWeb
  18. 18. 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
  19. 19. {   "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
  20. 20. CACHE MANIFEST # Version 1.0 CACHE: /css/all.css /js/lib/all.js /js/all.js /index.html Manifest.appcache
  21. 21. 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
  22. 22. 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;     }   }
  23. 23. <!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
  24. 24. Tester l'application Navigateur Mobile http://mdn.github.io/battery-quickstart-finished-example/
  25. 25. Simulateur ● Firefox OS simulator WEBIDE https://developer.mozilla.org/fr/docs/Outils/WebIDE
  26. 26. Web IDE
  27. 27. Résultat
  28. 28. Débug
  29. 29. https://marketplace.firefox.com/developers/
  30. 30. Choisir le moyen de consommer Le market des smartphones Supermarché
  31. 31. ✔ 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
  32. 32. https://marketplace.firefox.com/developers/validator Validateur
  33. 33. Déployer votre API https://marketplace.firefox.com/developers/submit/
  34. 34. 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
  35. 35. API Marketplace API : http://firefox-marketplace-api.readthedocs.org/en/latest/index.html
  36. 36. https://marketplace.firefox.com/ Marketplace
  37. 37. 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 ?
  38. 38. Merci Blog : http://firefoxos.mozfr.org

×