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.

1. Firefox OS
Code(Love) Hackathon
HTML5 pour le mobile
2014-05-28
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
CreativeCommons:http://j.mp/1mD8erV

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

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

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

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

10. Ce que vous méritez

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

13. C’est open source

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

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

19. HTML5 + manifest (JSON) = Firefox OS app
{
"version": “42",
"name": ”My amazing app",
"launch_path": "/index.html",
"description": ”My super amazing app do super amazing things",
"icons": {
"16": "/images/logo16.png”,},
"developer": {
"name": ”Frédéric Harper",
"url": "http://outofcomfortzone.net",
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": ”Get the long/lat of the user"
}
}
}

20. DÉMO App Manager + Emberjs todomvc

21. Web APIs

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

23. Ambient Light Sensor

24. Ambient Light Sensor
window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
// The lux values for "dim" typically begin below 50,
// and the values for "bright" begin above 10000
console.log(event.value);
});

25. DÉMO Boilerplate – Ambient Light Sensor

26. Battery Status

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

28. DÉMO Boilerplate – Battery status

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

30. Browser

31. 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=‘yoursite.com' id='browser'></iframe>

32. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

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

34. Web Activities

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

36. Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});

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

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

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

40. 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("Unable to provide a picture");
}
}
});

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

42. Comment débuter

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

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

45. Cordova & Phonegap

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

47. Free phone!
http://j.mp/mozPFA
Creative Commons: https://flic.kr/p/epEL3n

48. Simple

49. Firefox Web Developer Tools

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

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

55. Seulement 48h pour hacker!
Pensez au web en premier…

56. Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Developer Network
https://developer.mozilla.org
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate
Ressources

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

58. http://yuldev.ca

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