firefox os, une plateforme à découvrir - io saglac - 2014-09-09
Post on 21-Oct-2014
196 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/1.jpg)
Firefox OS
IO Saglac
Une plateforme à découvrir
2014-09-09
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Crea
tive
Com
mon
s: h
ttp:
//j.m
p/1w
bA9G
Q
![Page 2: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/2.jpg)
![Page 3: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/3.jpg)
![Page 4: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/4.jpg)
38 milliards d’appareils connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
![Page 5: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/5.jpg)
Creative Commons: http://j.mp/1gP4X4K
![Page 6: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/6.jpg)
![Page 7: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/7.jpg)
Firefox OS
![Page 8: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/8.jpg)
![Page 9: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/9.jpg)
Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.
![Page 10: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/10.jpg)
C’est open source
![Page 11: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/11.jpg)
Quelques faits
• Disponible dans 26 pays
• Visant principalement les marchés
émergents
• D’autre pays sous peu
![Page 12: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/12.jpg)
Quelques faits
![Page 13: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/13.jpg)
![Page 14: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/14.jpg)
![Page 15: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/15.jpg)
![Page 16: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/16.jpg)
![Page 17: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/17.jpg)
![Page 18: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/18.jpg)
Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant § Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI
![Page 19: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/19.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 20: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/20.jpg)
DÉMO Firefox OS + App Manager + Emberjs todomvc
![Page 21: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/21.jpg)
Web APIs
![Page 22: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/22.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 23: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/23.jpg)
Ambient Light Sensor
![Page 24: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/24.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 25: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/25.jpg)
DÉMO Boilerplate – Ambient Light Sensor
![Page 26: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/26.jpg)
Battery Status
![Page 27: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/27.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 28: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/28.jpg)
Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API
packaged
![Page 29: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/29.jpg)
Browser
![Page 30: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/30.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 31: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/31.jpg)
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici
});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/
![Page 32: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/32.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 33: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/33.jpg)
Web Activities
![Page 34: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/34.jpg)
Web Activities • browse • configure • costcontrol • dial • open • pick • record • save-bookmark
• share • view • update • new
• mail • websms/sms • webcontacts/contact
![Page 35: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/35.jpg)
Pick var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});
![Page 36: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/36.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 37: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/37.jpg)
Dial var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});
![Page 38: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/38.jpg)
Web Activity Received Handler "activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}
![Page 39: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/39.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 40: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/40.jpg)
Creative Commons: http://j.mp/1iZHGAW
![Page 41: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/41.jpg)
Comment débuter
![Page 42: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/42.jpg)
Creative Commons: http://j.mp/1iquK8Q
![Page 43: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/43.jpg)
Creative Commons: http://j.mp/Ilm7wx
![Page 44: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/44.jpg)
Cordova & Phonegap
![Page 45: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/45.jpg)
API implémentés • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
![Page 46: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/46.jpg)
Simple
![Page 47: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/47.jpg)
Firefox Web Developer Tools
![Page 48: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/48.jpg)
![Page 49: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/49.jpg)
![Page 50: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/50.jpg)
Creative Commons: http://j.mp/1gIdcPF
Vers l'infini et plus loin encore…
![Page 51: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/51.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 52: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/52.jpg)
Téléphone gratuit!
http://j.mp/mozFlame
Creative Commons: https://flic.kr/p/epEL3n
![Page 53: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/53.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
![Page 54: Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09](https://reader031.vdocuments.mx/reader031/viewer/2022020717/544591beafaf9ff32a8b45b5/html5/thumbnails/54.jpg)
Vous planifiez rendre votre application
disponible sous Firefox OS?
Faites-moi signe!