Firefox OS

3,112
-1

Published on

Introductory Slides on Firefox OS.

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

No Downloads
Views
Total Views
3,112
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
382
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Firefox OS

  1. 1. INTRODUCING FIREFOX OS Sayak Sarkar (@sayak_sarkar) http://sayak.in
  2. 2. What is Firefox OS? Firefox OS is an open platform for mobile Devices, built entirely using HTML5 and other open Web standards which is free from the rules and restrictions of existing proprietary platforms.
  3. 3. WHY USE HTML5? In-built distribution - the web Simple technologies used by lots of developers Evolution of existing practices Open, independent, standardized
  4. 4. PROMISES OF HTML5
  5. 5. firefox OS
  6. 6. How Real is it? Released in four countries: Spain, Poland, Venezuela and Columbia (more to come very soon) 18 mobile operator partners, 6 hardware partners Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak… Aimed at emerging markets/low end market Aimed to be an alternative to feature phones and unavailable closed environments. Open source - it is all on GitHub
  7. 7. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  8. 8. ARCHITECTURE Third Party HTML5 Apps Third Party HTML5 Apps GAIA GAIA Web APIs / Web Actitivies Web APIs / Web Actitivies Gecko rendering engine Gecko rendering engine Linux/Gonk (ADB enabled) Linux/Gonk (ADB enabled)
  9. 9. - + =
  10. 10. PREDICTABLE HTML5 SUPPORT
  11. 11. SECURITY
  12. 12. APPLICATION MANIFEST { { "version": "1.0", "version": "1.0", "name": "MozillaBall", "name": "MozillaBall", "description": "Exciting Open Web development action!", "description": "Exciting Open Web development action!", "icons": { "icons": { "16": "/img/icon-16.png", "16": "/img/icon-16.png", "48": "/img/icon-48.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" "128": "/img/icon-128.png" }, }, "developer": { "developer": { "name": "Mozilla Labs", "name": "Mozilla Labs", "url": "http://mozillalabs.com" "url": "http://mozillalabs.com" }, }, "installs_allowed_from": ["*"], "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "appcache_path": "/cache.manifest", "locales": { "locales": { "es": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "developer": { "url": "http://es.mozillalabs.com/" "url": "http://es.mozillalabs.com/" } } } } }, }, "default_locale": "en" "default_locale": "en" } }
  13. 13. APPLICATIONS Web Content Web Content Regular web content Regular web content Installed Web App Installed Web App A regular web app A regular web app Privileged Web App Privileged Web App More access, more More access, more responsibility responsibility Certified Web App Certified Web App Device-critical Device-critical applications applications
  14. 14. APPLICATIONS
  15. 15. PERMISSIONS "permissions": { "permissions": { "contacts": { "contacts": { "description": "Required for autocompletion in the share screen", "description": "Required for autocompletion in the share screen", "access": "readcreate" "access": "readcreate" }, }, "alarms": { "alarms": { "description": "Required to schedule notifications" "description": "Required to schedule notifications" } } } }
  16. 16. WEB APIS
  17. 17. WEB APIS (FOR ALL Vibration API (W3C) Screen Orientation Geolocation API Mouse Lock API (W3C) Open WebApps Network Information API (W3C) Battery Status API (W3C) Alarm API Web Activities Push Notifications API WebFM API WebPayment IndexedDB (W3C) Ambient light sensor Proximity sensor Notification
  18. 18. BATTERY STATUS API
  19. 19. BATTERY STATUS API var battery = navigator.battery; var battery = navigator.battery; if (battery) { if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" :: "not ", charging = (battery.charging)? "" "not ", chargingTime = parseInt(battery.chargingTime // 60, 10), chargingTime = parseInt(battery.chargingTime 60, 10), dischargingTime = parseInt(battery.dischargingTime // 60, 10); dischargingTime = parseInt(battery.dischargingTime 60, 10); } } // Set events // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false);
  20. 20. SCREEN ORIENTATION API
  21. 21. SCREEN ORIENTATION API // Portrait mode: // Portrait mode: screen.mozLockOrientation("portrait"); screen.mozLockOrientation("portrait"); /* /* */ */ Possible values: Possible values: "landscape" "landscape" "portrait" "portrait" "landscape-primary" "landscape-primary" "landscape-secondary" "landscape-secondary" "portrait-primary" "portrait-primary" "portrait-secondary" "portrait-secondary"
  22. 22. VIBRATION API
  23. 23. VIBRATION API // Vibrate for one second // Vibrate for one second navigator.vibrate(1000); navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause,…] // Vibration pattern [vibrationTime, pause,…] navigator.vibrate([200, 100, 200, 100]); navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds // Vibrate for 5 seconds navigator.vibrate(5000); navigator.vibrate(5000); // Turn off vibration // Turn off vibration navigator.vibrate(0); navigator.vibrate(0);
  24. 24. NETWORK INFORMATION API
  25. 25. NETWORK INFORMATION API var connection = window.navigator.mozConnection, var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, online = connection.bandwidth > 0, metered = connection.metered; metered = connection.metered;
  26. 26. ☼ AMBIENT LIGHT EVENTS
  27. 27. AMBIENT LIGHT EVENTS window.addEventListener("devicelight", function (event) { window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 // and the values for "bright" begin above 10000 console.log(event.value); console.log(event.value); }); });
  28. 28. PAGE VISIBILITY
  29. 29. PAGE VISIBILITY document.addEventListener("visibilitychange", function () { document.addEventListener("visibilitychange", function () { if (document.hidden) { if (document.hidden) { console.log("App is hidden"); console.log("App is hidden"); } } else { else { console.log("App has focus"); console.log("App has focus"); } } }); });
  30. 30. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  31. 31. CONTACTS API
  32. 32. CONTACTS API var contact = new mozContact(); var contact = new mozContact(); contact.init({name: "Tom"}); contact.init({name: "Tom"}); var request = navigator.mozContacts.save(contact); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { request.onsuccess = function() { console.log("Success"); console.log("Success"); }; }; request.onerror = function() { request.onerror = function() { console.log("Error") console.log("Error") }; };
  33. 33. WEB APIS (CERTIFIED APPS) WebTelephony WebBluetooth WebSMS Permissions API Idle API Network Stats API Settings API Camera API Power Management API Time/Clock API Mobile Connection API Attention screen WiFi Information API Voicemail
  34. 34. CERTIFIED APPS = THE OS 
  35. 35. CERTIFIED APPS Dialer Alarm Clock Contacts Camera Settings Notes SMS First Run Experience Web browser Notifications Gallery Home Screen Video Player Mozilla Marketplace Music Player System Updater E-mail (POP, IMAP) Localization Support Calendar
  36. 36. WEB ACTIVITIES
  37. 37. GET A PHOTO? var getphoto = new MozActivity({ var getphoto = new MozActivity({ name: "pick", name: "pick", data: { data: { type: ["image/png", "image/jpeg"], "image/jpg"] type: ["image/png", "image/jpeg"], "image/jpg"] } } }); }); getphoto.onsuccess = function () { getphoto.onsuccess = function () { var img = document.createElement("img"); var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); img.src = window.URL.createObjectURL(this.result.blob); } } }; }; getphoto.onerror = function () { // error getphoto.onerror = function () { // error }; };
  38. 38. FIREFOX OS + ANDROID!
  39. 39. APP DISTRIBUTION
  40. 40. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  41. 41. INSTALL FROM THE WEB… var installapp = navigator.mozApps.install(manifestURL); installapp.onsuccess = function(data) { // App is installed }; installapp.onerror = function() { // App wasn't installed, info is in // installapp.error.name };
  42. 42. DYNAMIC APP WEB SEARCH
  43. 43. DEVELOPMENT ENVIRONMENT
  44. 44. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  45. 45. FIREFOX OS SIMULATOR https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  46. 46. PROTOTYPING WITH JSFIDDLE 1.Write your code as a JSFiddle 2.Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app 3.Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
  47. 47. BUILDING BLOCKS?
  48. 48. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  49. 49. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  50. 50. MOZILLA BRICK http://mozilla.github.io/brick/
  51. 51. WHAT’S COOKING?
  52. 52. MORE WEB APIS Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
  53. 53. APPMAKER Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME API WebRTC FileHandle API Sync API
  54. 54. RESOURCES
  55. 55. DEVELOPER HUB https://marketplace.firefox.com/developers/
  56. 56. MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/
  57. 57. FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/
  58. 58. FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
  59. 59. THANKS! SAYAK SARKAR @sayak_sarkar http://sayak.in/

×