1.
Firefox OS
EPITA
le web de demain
2014-06-06
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
CreativeCommons:http://bit.ly/1maOUjx

2.
Creative Commons: http://j.mp/1hCZYIe

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

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

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

6.
Le web de demain…
aujourd’hui

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

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

9.
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é

10.
C’est open source

11.
Architecture

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

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

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

15.
Web APIs

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

17.
Ambient Light Sensor

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

19.
DÉMO Boilerplate – Ambient Light Sensor

20.
Battery Status

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

22.
DÉMO Boilerplate – Battery status

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

24.
Browser

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

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

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

28.
Web Activities

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

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

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

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

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

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

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

36.
Comment débuter

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

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

39.
Cordova & Phonegap

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

41.
Camera API
$ cordova plugin add org.apache.cordova.camera
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});

42.
Simple

43.
Firefox Web Developer Tools

44.
DÉMO Déboguer Firefox OS

45.
En bonus

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

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

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

49.
Prochaine fois que vous
développerez une application…
Pensez au web en premier…

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

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

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

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