Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22

728 views

Published on

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
728
On SlideShare
0
From Embeds
0
Number of Embeds
204
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22

  1. 1. Firefox OS: HTML5 sur les stéroïdes Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net HTML5mtl Montréal, Canada 2014-04-22
  2. 2. Creative Commons: http://j.mp/1ljZuJC
  3. 3. 38 milliards d’appareils connectés d’ici 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  4. 4. Creative Commons: http://j.mp/1gP4X4K
  5. 5. Ce que vous méritez: HTML5 sur les stéroïdes
  6. 6. Construit avec le Web Utilisant HTML5, CSS3 et JavaScript avec un nombre d’API pour développer des applications.
  7. 7. C’est open source
  8. 8. Architecture
  9. 9. Bénéfices d’HTML5 ü  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. 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
  11. 11. Une application Firefox OS? §  Une application “hosted” ou “packaged” §  Utilisant §  Vanilla HTML5 §  Librairies… §  Regular API §  Privileged API §  Certified API
  12. 12. HTML5 + manifest (JSON) = Firefox OS app { "version": “42", "name": ”My amazing app", "launch_path": "/index.html", "description": ”My super amazing app do super amazing things", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Get the long/lat of the user" } } }
  13. 13. DÉMO App Manager + Emberjs todomvc
  14. 14. Web APIs
  15. 15. 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
  16. 16. Ambient Light Sensor
  17. 17. Ambient Light Sensor window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });
  18. 18. DÉMO Boilerplate – Ambient Light Sensor
  19. 19. Battery Status
  20. 20. 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); }
  21. 21. DÉMO Boilerplate – Battery status
  22. 22. Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  23. 23. Browser
  24. 24. 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=‘yoursite.com' id='browser'></iframe>
  25. 25. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  26. 26. 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
  27. 27. Web Activities
  28. 28. Web Activities •  browse •  configure •  costcontrol •  dial •  open •  pick •  record •  save-bookmark •  share •  view •  update •  new •  mail •  websms/sms •  webcontacts/contact
  29. 29. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  30. 30. 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 };
  31. 31. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  32. 32. new webcontacts/contact var newContact = new MozActivity({ name: "new", data: { type: "webcontacts/contact", params: { givenName: "Frédéric", lastName: "Harper", email: ”fharper@mozilla.com", company: "Mozilla" } } });
  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("Unable to provide a picture"); } } });
  35. 35. Creative Commons: http://j.mp/1iZHGAW
  36. 36. Comment débuter
  37. 37. Creative Commons: http://j.mp/Ilm7wx
  38. 38. Cordova & Phonegap
  39. 39. API implémentés •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  40. 40. 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 });
  41. 41. Firefox OS App Manager + Simulator (1.2+)
  42. 42. Firefox Web Developer Tools
  43. 43. DÉMO Déboguer une application Firefox OS
  44. 44. En bonus
  45. 45. 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.
  46. 46. Creative Commons: http://j.mp/1gIdcPF Vers l'infini et plus loin encore…
  47. 47. 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
  48. 48. Prochaine fois que vous développerez une application… Pensez au web en premier…
  49. 49. Ressources Firefox OS Simulator http://j.mp/fxosSimulator Firefox OS App Manager http://j.mp/fxosAppManager 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 FireWatch https://github.com/digitarald/firewatch
  50. 50. Vous planifiez rendre votre application disponible sous Firefox OS ou en créer une nouvelle? Faites-moi signe!
  51. 51. http://yuldev.ca
  52. 52. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

×