firefox os, le web de demain - epita - 2014-06-06
Post on 18-Oct-2014
614 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
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
Creative Commons: http://j.mp/1hCZYIe
Creative Commons: http://j.mp/1ljZuJC
38 milliards d’appareils connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
Creative Commons: http://j.mp/1gP4X4K
Le web de demain… aujourd’hui
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
Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.
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é
C’est open source
Architecture
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" } }}
DÉMO Firefox OS + App Manager + Emberjs todomvc
Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant § Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI
Web APIs
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
Ambient Light Sensor
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);});
DÉMO Boilerplate – Ambient Light Sensor
Battery Status
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);}
DÉMO Boilerplate – Battery status
Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API
packaged
Browser
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>
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend""mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror""mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"*/
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
Web Activities
Web Activities • browse • configure • costcontrol • dial • open • pick • record • save-bookmark
• share • view • update • new
• mail • websms/sms • webcontacts/contact
Pick var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" }});
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};
Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" }});
Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" }}
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"); } }});
Creative Commons: http://j.mp/1iZHGAW
Comment débuter
Creative Commons: http://j.mp/1iquK8Q
Creative Commons: http://j.mp/Ilm7wx
Cordova & Phonegap
API implémentés • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
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});
Simple
Firefox Web Developer Tools
DÉMO Déboguer Firefox OS
En bonus
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.
Creative Commons: http://j.mp/1gIdcPF
Vers l'infini et plus loin encore…
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
Prochaine fois que vous développerez une application… Pensez au web en premier…
Téléphone gratuit!
http://j.mp/mozFlame
Creative Commons: https://flic.kr/p/epEL3n
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
Vous planifiez rendre votre application
disponible sous Firefox OS?
Faites-moi signe!