Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27

1,569 views

Published on

The presentation I did about Firefox OS at the Athens App Days.

Published in: Technology, News & Politics
  • Be the first to comment

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27

  1. 1. Firefox OS the platform you deserve Frédéric Harper Senior Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net Athens Apps Day Athens, Greece 2013-11-27
  2. 2. Συγνώμη, δεν μιλούν ελληνικά Thanks Google translate…
  3. 3. What you deserve
  4. 4. Firefox OS Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  5. 5. It’s open source
  6. 6. Architecture
  7. 7. Benefits of HTML5  In-built distribution – the Web  Simple technologies used by a lot of developers  Evolution of existing practices  Open, independent, and standardised
  8. 8. Some facts  Released in Spain, Poland, Venezuela, Hungary, Colombia, Uruguay, Mexico, Brazil, and Greece  18 mobile operator, and 6 hardware partners  Hardware options: ZTE Open, Alcatel One Touch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb…  Aimed at emerging markets/low end market
  9. 9. HTML5 + manifest (JSON) = Firefox OS app { "version": "1", "name": "Firefox OS Boilerplate App", "launch_path": "/index.html", "description": "Boilerplate Firefox OS app with example use cases to get started", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": "Robert Nyman", "url": http://robertnyman.com }, "default_locale": "en", "permissions": { "geolocation": { "description": "Marking out user location" } } }
  10. 10. A Firefox OS app?  Creating a hosted or packaged app  Using  Vanilla HTML5  Regular API  Privileged API  Certified API
  11. 11. Web APIs
  12. 12. 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
  13. 13. Ambient Light Sensor
  14. 14. 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); });
  15. 15. Battery Status
  16. 16. 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); }
  17. 17. Web APIs – Privileged • • • • • Browser API Contacts API Device Storage API systemXHR TCP Socket API packaged
  18. 18. Browser
  19. 19. 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>
  20. 20. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ */ "mozbrowserloadend" "mozbrowserclose"
  21. 21. Contacts
  22. 22. Contacts var contact = new mozContact(); contact.init({name: "Tom"}); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { console.log("Success"); }; request.onerror = function() { console.log("Error") };
  23. 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
  24. 24. Web Activities
  25. 25. Web Activities • • • • • • • • browse configure costcontrol dial open pick record save-bookmark • • • • share view update new • • • mail websms/sms webcontacts/contact
  26. 26. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  27. 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. 28. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  29. 29. new webcontacts/contact var newContact = new MozActivity({ name: "new", data: { type: "webcontacts/contact", params: { givenName: "Frédéric", lastName: "Harper", email: ”fharper@mozilla.com", company: "Mozilla" } } });
  30. 30. Web Activity Received Handler 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"); } } });
  31. 31. Don’t forget the manifest "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  32. 32. How to start
  33. 33. Creative Commons: http://j.mp/Ilm7wx
  34. 34. Phonegap
  35. 35. Firefox OS Simulator
  36. 36. Firefox OS App Manager
  37. 37. Firefox Web Developer Tools
  38. 38. Some candies
  39. 39. Prototyping with JSFiddle • Append /webapp.manifest to install the app in the Firefox OS simulator • Append /fxos.html to get an install page like a Firefox OS hosted app.
  40. 40. What’s next
  41. 41. More Web APIs & features • Calendar API • Spellcheck API LogAPI • FileHandle API Sync API • Resource lock API • Keyboard/IME API WebRTC • UDP Datagram Socket API • HTTP-cache API • WebNFC • Peer to Peer API • WebUSB
  42. 42. To infinity, and beyond… it’s only the beginning! Creative Commons: http://j.mp/1gIdcPF
  43. 43. Resources Firefox OS Simulator http://j.mp/fxosSimulator Firefox OS App Manager http://j.mp/fxosAppManager Mozilla Developer Network https://developer.mozilla.org Firefox OS WebAPI & Web Activities http://j.mp/fxosWebAPI
  44. 44. Resources 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
  45. 45. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

×