Firefox OS, le web de demain - Epita - 2014-06-06
-
date post
18-Oct-2014 -
Category
Technology
-
view
614 -
download
1
description
Transcript of Firefox OS, le web de demain - Epita - 2014-06-06
![Page 1: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/1.jpg)
Firefox OS
EPITA
le web de demain
2014-06-06
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Crea
tive
Com
mon
s: h
ttp:
//bi
t.ly/
1maO
Ujx
![Page 2: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/2.jpg)
Creative Commons: http://j.mp/1hCZYIe
![Page 3: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/3.jpg)
Creative Commons: http://j.mp/1ljZuJC
![Page 4: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/4.jpg)
![Page 5: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/5.jpg)
38 milliards d’appareils connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
![Page 6: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/6.jpg)
Creative Commons: http://j.mp/1gP4X4K
![Page 7: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/7.jpg)
![Page 8: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/8.jpg)
![Page 9: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/9.jpg)
![Page 10: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/10.jpg)
Le web de demain… aujourd’hui
![Page 11: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/11.jpg)
![Page 12: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/12.jpg)
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
![Page 13: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/13.jpg)
![Page 14: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/14.jpg)
![Page 15: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/15.jpg)
Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.
![Page 16: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/16.jpg)
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é
![Page 17: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/17.jpg)
C’est open source
![Page 18: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/18.jpg)
![Page 19: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/19.jpg)
![Page 20: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/20.jpg)
Architecture
![Page 21: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/21.jpg)
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" } }}
![Page 22: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/22.jpg)
DÉMO Firefox OS + App Manager + Emberjs todomvc
![Page 23: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/23.jpg)
Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant § Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI
![Page 24: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/24.jpg)
Web APIs
![Page 25: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/25.jpg)
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
![Page 26: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/26.jpg)
Ambient Light Sensor
![Page 27: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/27.jpg)
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);});
![Page 28: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/28.jpg)
DÉMO Boilerplate – Ambient Light Sensor
![Page 29: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/29.jpg)
Battery Status
![Page 30: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/30.jpg)
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);}
![Page 31: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/31.jpg)
DÉMO Boilerplate – Battery status
![Page 32: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/32.jpg)
Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API
packaged
![Page 33: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/33.jpg)
Browser
![Page 34: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/34.jpg)
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>
![Page 35: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/35.jpg)
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend""mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror""mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"*/
![Page 36: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/36.jpg)
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
![Page 37: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/37.jpg)
Web Activities
![Page 38: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/38.jpg)
Web Activities • browse • configure • costcontrol • dial • open • pick • record • save-bookmark
• share • view • update • new
• mail • websms/sms • webcontacts/contact
![Page 39: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/39.jpg)
Pick var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" }});
![Page 40: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/40.jpg)
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};
![Page 41: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/41.jpg)
Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" }});
![Page 42: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/42.jpg)
Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" }}
![Page 43: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/43.jpg)
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"); } }});
![Page 44: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/44.jpg)
Creative Commons: http://j.mp/1iZHGAW
![Page 45: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/45.jpg)
Comment débuter
![Page 46: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/46.jpg)
Creative Commons: http://j.mp/1iquK8Q
![Page 47: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/47.jpg)
Creative Commons: http://j.mp/Ilm7wx
![Page 48: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/48.jpg)
Cordova & Phonegap
![Page 49: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/49.jpg)
API implémentés • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
![Page 50: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/50.jpg)
Camera API $ cordova plugin add org.apache.cordova.camera//Cordova codenavigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1});
![Page 51: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/51.jpg)
Simple
![Page 52: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/52.jpg)
Firefox Web Developer Tools
![Page 53: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/53.jpg)
DÉMO Déboguer Firefox OS
![Page 54: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/54.jpg)
![Page 55: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/55.jpg)
![Page 56: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/56.jpg)
![Page 57: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/57.jpg)
![Page 58: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/58.jpg)
![Page 59: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/59.jpg)
![Page 60: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/60.jpg)
En bonus
![Page 61: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/61.jpg)
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.
![Page 62: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/62.jpg)
![Page 63: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/63.jpg)
![Page 64: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/64.jpg)
Creative Commons: http://j.mp/1gIdcPF
Vers l'infini et plus loin encore…
![Page 65: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/65.jpg)
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
![Page 66: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/66.jpg)
![Page 67: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/67.jpg)
Prochaine fois que vous développerez une application… Pensez au web en premier…
![Page 68: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/68.jpg)
Téléphone gratuit!
http://j.mp/mozFlame
Creative Commons: https://flic.kr/p/epEL3n
![Page 69: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/69.jpg)
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
![Page 70: Firefox OS, le web de demain - Epita - 2014-06-06](https://reader033.fdocuments.us/reader033/viewer/2022042813/5442cff5b1af9f410a8b478a/html5/thumbnails/70.jpg)
Vous planifiez rendre votre application
disponible sous Firefox OS?
Faites-moi signe!