Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09

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

38 milliards d’appareils connectés d’ici 2020

ABI Research - 2013-05-09 - http://j.mp/38billion

Creative Commons: http://j.mp/1gP4X4K

Firefox OS

Construit avec le Web

Utilisant HTML5, CSS3 et JavaScript

avec un nombre d’API

pour développer des applications.

C’est open source

Quelques faits

•  Disponible dans 26 pays

•  Visant principalement les marchés

émergents

•  D’autre pays sous peu

Quelques faits

Une application Firefox OS?

§  Une application “hosted” ou “packaged”

§  Utilisant §  Vanilla HTML5

§  Librairies…

§  Regular WebAPI

§  Privileged WebAPI

§  Certified WebAPI

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

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);

}

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

Simple

Firefox Web Developer Tools

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

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

Vous planifiez rendre votre application

disponible sous Firefox OS?

Faites-moi signe!

Frédéric Harper

fharper@mozilla.com

@fharper

http://hacks.mozilla.org

http://outofcomfortzone.net