1.
Firefox OS
Une plateforme à découvrir
IO Saglac
2014-09-09
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Creative Commons: http://j.mp/1wbA9GQ

2.
38 milliards d’appareils
connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

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

4.
Firefox OS

5.
Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.

6.
C’est open source

7.
Quelques faits
• Disponible dans 26 pays
• Visant principalement les marchés
émergents
• D’autre pays sous peu

8.
Quelques faits

9.
Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant
§ Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI

10.
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"
}
}
}

11.
DÉMO Firefox OS + App Manager
+ Emberjs todomvc

12.
Web APIs

13.
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

14.
Ambient Light Sensor

15.
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);
});

16.
DÉMO Boilerplate – Ambient Light Sensor

17.
Battery Status

18.
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);
}

19.
Web APIs – Privileged
• Browser API
• Contacts API
• Device Storage API
• systemXHR
• TCP Socket API
packaged

20.
Browser

21.
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>

22.
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici
});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

23.
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

24.
Web Activities

25.
Web Activities
• browse
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update
• new
• mail
• websms/sms
• webcontacts/contact

26.
Pick
var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});

27.
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
};

28.
Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

29.
Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

30.
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");
}
}
});

31.
Creative Commons: http://j.mp/1iZHGAW

32.
Comment débuter

33.
Creative Commons: http://j.mp/1iquK8Q

34.
Creative Commons: http://j.mp/Ilm7wx

35.
Cordova & Phonegap

36.
API implémentés
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

37.
Simple

38.
Firefox Web Developer Tools

39.
Vers l'infini et plus
loin encore…
Creative Commons: http://j.mp/1gIdcPF

40.
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

41.
Téléphone gratuit!
http://j.mp/mozFlame
Creative Commons: https://flic.kr/p/epEL3n

42.
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

43.
Vous planifiez
rendre votre
application
disponible sous
Firefox OS?
Faites-moi signe!

44.
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.org
http://outofcomfortzone.net