Firefox OS, le web de demain - Epita - 2014-06-06

947 views

Published on

HTML5 est un pas de géant dans la bonne direction: il apporte plusieurs fonctionnalités dont les développeurs avaient besoin pour créer plus facilement de meilleures expériences web. Il a aussi fait naitre un débat sans fin: applications natives ou applications web! Lors de cette présentation, Frédéric Harper vous montrera comment le web ouvert peut vous aider à créer des applications mobiles de qualités. Vous en apprendrez plus sur des technologies telles que les WebAPIs, ainsi que les outils qui vous permettront de viser un nouveau marché avec Firefox OS et le web d’aujourd'hui.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
947
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox OS, le web de demain - Epita - 2014-06-06

  1. 1. Firefox OS EPITA le web de demain 2014-06-06 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net CreativeCommons:http://bit.ly/1maOUjx
  2. 2. Creative Commons: http://j.mp/1hCZYIe
  3. 3. Creative Commons: http://j.mp/1ljZuJC
  4. 4. 38 milliards d’appareils connectés d’ici 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  5. 5. Creative Commons: http://j.mp/1gP4X4K
  6. 6. Le web de demain… aujourd’hui
  7. 7. Quelques faits §  7 opérateurs mobiles & 4 partenaires fabricants §  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb… §  D’autres à venir: Huawei Y300, ZTE Open C, Alcatel One Touche Fire C & E & S… §  Vise les marchés émergents
  8. 8. Construit avec le Web Utilisant HTML5, CSS3 et JavaScript avec un nombre d’API pour développer des applications.
  9. 9. Bénéfices d’HTML ü  Distribution intégrée – le Web ü  Technologies simples utilisées par plusieurs développeurs ü  Une évolution des pratiques existantes ü  Ouvert, indépendant, et standardisé
  10. 10. C’est open source
  11. 11. Architecture
  12. 12. HTML5 + manifest = une app Firefox OS { "version": “42", "name": ”Mon application", "launch_path": "/index.html", "description": ”Ma super application qui fait des choses fantastiques", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Obtenir le long/lat de l’utilisateur" } } }
  13. 13. DÉMO Firefox OS + App Manager + Emberjs todomvc
  14. 14. Une application Firefox OS? §  Une application “hosted” ou “packaged” §  Utilisant §  Vanilla HTML5 §  Librairies… §  Regular WebAPI §  Privileged WebAPI §  Certified WebAPI
  15. 15. Web APIs
  16. 16. Web APIs – Regular •  Alarm API •  Ambient light sensor •  Archive API •  Battery Status API •  Geolocation API •  IndexedDB •  Network Information API •  Notifications API •  Open WebApps •  Proximity sensor •  Push API •  Screen Orientation •  Vibration API •  Web Activities •  WebFM API •  WebPayment packaged hosted
  17. 17. Ambient Light Sensor
  18. 18. Ambient Light Sensor window.addEventListener("devicelight", function (event) { // Le niveau de la lumière ambiante en lux // Une lumière ambiante peu lumineuse est habituellement de 50 et moins, // et la valeur pour très lumineux commence aux alentours de 10000 console.log(event.value); });
  19. 19. DÉMO Boilerplate – Ambient Light Sensor
  20. 20. Battery Status
  21. 21. Battery Status var battery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%",   charging = (battery.charging)? “yes" : "no", chargingTime = parseInt(battery.chargingTime / 60, 10, dischargingTime = parseInt(battery.dischargingTime / 60, 10);   battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); }
  22. 22. DÉMO Boilerplate – Battery status
  23. 23. Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  24. 24. Browser
  25. 25. Browser <div> <span id='location-bar'></span> <button onclick='go_button_clicked()'>Go</button> </div> <div id='load-status'></div> <div id='security-status'></div> <img id='favicon'> <div id='title'></div> <iframe mozbrowser src=‘votresite.com' id='browser'></iframe>
  26. 26. Browser addEventListener('mozbrowserloadstart', function(e) { //Ajouter actions ici }); /* Valeurs possibles: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  27. 27. Web APIs – Certified •  Camera API •  Idle API •  Mobile Connection API •  Network Stats API •  Permissions API •  Power Management API •  Settings API •  Time/Clock API •  Voicemail •  WebBluetooth •  WebSMS •  WebTelephony •  WiFi Information API OS/OEM
  28. 28. Web Activities
  29. 29. Web Activities •  browse •  configure •  costcontrol •  dial •  open •  pick •  record •  save-bookmark •  share •  view •  update •  new •  mail •  websms/sms •  webcontacts/contact
  30. 30. Pick var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } });
  31. 31. Pick activity.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; activity.onerror = function () { //error };
  32. 32. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  33. 33. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  34. 34. N’oubliez pas de le gérer! navigator.mozSetMessageHandler('activity', function(activityRequest) { var option = activityRequest.source; if (activityRequest.source.name === "pick") { // Do something to handle the activity if (picture) { activityRequest.postResult(picture); } else { activityRequest.postError(”Impossible de fournir une image"); } } });
  35. 35. Creative Commons: http://j.mp/1iZHGAW
  36. 36. Comment débuter
  37. 37. Creative Commons: http://j.mp/1iquK8Q
  38. 38. Creative Commons: http://j.mp/Ilm7wx
  39. 39. Cordova & Phonegap
  40. 40. API implémentés •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  41. 41. Camera API $ cordova plugin add org.apache.cordova.camera //Cordova code navigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1 });
  42. 42. Simple
  43. 43. Firefox Web Developer Tools
  44. 44. DÉMO Déboguer Firefox OS
  45. 45. En bonus
  46. 46. Prototypé avec JSFiddle •  Ajouté /webapp.manifest pour installer une application dans le Firefox OS simulator •  Ajouté /fxos.html pour obtenir une page d’installation telle une application Firefox OS hosted.
  47. 47. Creative Commons: http://j.mp/1gIdcPF Vers l'infini et plus loin encore…
  48. 48. Plus d’API Web & fonctionnalités •  Calendar API •  FileHandle API Sync API •  Keyboard/IME API WebRTC •  HTTP-cache API •  Peer to Peer API •  Spellcheck API LogAPI •  Resource lock API •  UDP Datagram Socket API •  WebNFC •  WebUSB
  49. 49. Prochaine fois que vous développerez une application… Pensez au web en premier…
  50. 50. Téléphone gratuit! http://j.mp/mozFlame Creative Commons: https://flic.kr/p/epEL3n
  51. 51. Resources Firefox OS App Manager http://j.mp/fxosAppManager Firefox OS Simulators http://j.mp/FxOSSimulators Firefox OS with Cordova/PhoneGap https://mozilla-cordova.github.io/ Mozilla Developer Network https://developer.mozilla.org StackOverflow forum http://j.mp/fxosStackOverflow Firefox OS Boilerplate http://j.mp/fxosBoilerplate Firefox OS UI Component http://buildingfirefoxos.com/ Mozilla Brick http://j.mp/mozBrick
  52. 52. Vous planifiez rendre votre application disponible sous Firefox OS? Faites-moi signe!
  53. 53. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

×