0
Firefox OS
Code(Love) Hackathon
HTML5 pour le mobile
2014-05-28
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharpe...
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
Ce que vous méritez
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
§  7 opérateurs mobiles & 4 partenaires fabricants
§  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
...
Une application Firefox OS?
§  Une application “hosted” ou “packaged”
§  Utilisant
§  Vanilla HTML5
§  Librairies…
§ ...
HTML5 + manifest (JSON) = Firefox OS app
{	
"version": “42",	
"name": ”My amazing app",	
"launch_path": "/index.html",	
"d...
DÉMO App Manager + Emberjs todomvc
Web APIs
Web APIs – Regular
•  Alarm API
•  Ambient light sensor
•  Archive API
•  Battery Status API
•  Geolocation API
•  Indexed...
Ambient Light Sensor
Ambient Light Sensor
window.addEventListener("devicelight", function (event) {	
		
	// The level of the ambient light in l...
DÉMO Boilerplate – Ambient Light Sensor
Battery Status
Battery Status
var battery = navigator.battery;	
	
if (battery) {	
	var batteryLevel = Math.round(battery.level * 100) + "...
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...
Browser
addEventListener('mozbrowserloadstart', function(e) {	
	//Do stuff	
});	
	
/*	
Possible values:	
	"mozbrowserloads...
Web APIs – Certified
•  Camera API
•  Idle API
•  Mobile Connection API
•  Network Stats API
•  Permissions API
•  Power M...
Web Activities
Web Activities
•  browse
•  configure
•  costcontrol
•  dial
•  open
•  pick
•  record
•  save-bookmark
•  share
•  view
•...
Pick
var activity = new MozActivity({	
name: "pick",	
//Provide the data required	
//by the filter of the activity	
data: ...
Pick
activity.onsuccess = function () {	
var img = document.createElement("img");	
	
if (this.result.blob.type.indexOf("im...
Dial
var call = new MozActivity({	
name: "dial",	
data: {	
number: "+46777888999"	
}	
});
Web Activity Received Handler
"activities": {	
"pick": {	
"filters": {	
"type": ["image/jpeg", "image/png"]	
},	
"disposit...
N’oubliez pas de le gérer!
navigator.mozSetMessageHandler('activity', function(activityRequest) { 	
var option = activityR...
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
Free phone!
http://j.mp/mozPFA
Creative Commons: https://flic.kr/p/epEL3n
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
•...
Seulement 48h pour hacker!
Pensez au web en premier…
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Developer Network...
Vous planifiez
rendre votre
application
disponible sous
Firefox OS?
Faites-moi signe!
http://yuldev.ca
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Upcoming SlideShare
Loading in...5
×

Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28

243

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
243
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28"

  1. 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. 2. Creative Commons: http://j.mp/1hCZYIe
  3. 3. Creative Commons: http://j.mp/1ljZuJC
  4. 4. 38 milliards d’appareils connectés d’ici 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  5. 5. Creative Commons: http://j.mp/1gP4X4K
  6. 6. Ce que vous méritez
  7. 7. Construit avec le Web Utilisant HTML5, CSS3 et JavaScript avec un nombre d’API pour développer des applications.
  8. 8. C’est open source
  9. 9. 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
  10. 10. Une application Firefox OS? §  Une application “hosted” ou “packaged” §  Utilisant §  Vanilla HTML5 §  Librairies… §  Regular API §  Privileged API §  Certified API
  11. 11. 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" } } }
  12. 12. DÉMO App Manager + Emberjs todomvc
  13. 13. Web APIs
  14. 14. 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
  15. 15. Ambient Light Sensor
  16. 16. 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); });
  17. 17. DÉMO Boilerplate – Ambient Light Sensor
  18. 18. Battery Status
  19. 19. 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); }
  20. 20. DÉMO Boilerplate – Battery status
  21. 21. Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  22. 22. Browser
  23. 23. 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>
  24. 24. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  25. 25. 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
  26. 26. Web Activities
  27. 27. Web Activities •  browse •  configure •  costcontrol •  dial •  open •  pick •  record •  save-bookmark •  share •  view •  update •  new •  mail •  websms/sms •  webcontacts/contact
  28. 28. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  29. 29. 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 };
  30. 30. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  31. 31. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  32. 32. 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"); } } });
  33. 33. Creative Commons: http://j.mp/1iZHGAW
  34. 34. Comment débuter
  35. 35. Creative Commons: http://j.mp/1iquK8Q
  36. 36. Creative Commons: http://j.mp/Ilm7wx
  37. 37. Cordova & Phonegap
  38. 38. API implémentés •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  39. 39. Free phone! http://j.mp/mozPFA Creative Commons: https://flic.kr/p/epEL3n
  40. 40. Simple
  41. 41. Firefox Web Developer Tools
  42. 42. Creative Commons: http://j.mp/1gIdcPF Vers l'infini et plus loin encore…
  43. 43. 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
  44. 44. Seulement 48h pour hacker! Pensez au web en premier…
  45. 45. 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
  46. 46. Vous planifiez rendre votre application disponible sous Firefox OS? Faites-moi signe!
  47. 47. http://yuldev.ca
  48. 48. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×