Your SlideShare is downloading. ×
0
Firefox OS
a startup opportunity
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net

Mobil...
The startup business model
Creative Commons: http://j.mp/13UsL5W
Which platform should I start with?
You should start with the web…
38 billion devices
connected in 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
What you deserve
Built with the Web
Using HTML5, CSS3 and JavaScript

with a number of APIs
to build apps.
It’s open source
Architecture
Benefits of HTML5
 In-built distribution – the Web
 Simple technologies used by a lot of developers
 Evolution of exist...
Some facts
 Released in
Spain, Poland, Venezuela, Hungary, Colombia, Uruguay, Mexico, Bra
zil, and Greece

 18 mobile op...
A Firefox OS app?
 Creating a hosted or packaged app

 Using


Vanilla HTML5



Regular API



Privileged API



Cer...
HTML5 + manifest (JSON) = Firefox OS app
{
"version": "1",
"name": "Firefox OS Boilerplate App",

"launch_path": "/index.h...
Web APIs
Web APIs – Regular
•
•
•
•
•
•
•
•

Alarm API
Ambient light sensor
Archive API
Battery Status API
Geolocation API
IndexedD...
Ambient Light Sensor
Ambient Light Sensor
window.addEventListener("devicelight", function (event) {

// The level of the ambient light in lux
/...
DEMO

Boilerplate – Ambient Light Sensor
Battery Status
Battery Status
var battery = navigator.battery;

if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
...
DEMO

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-stat...
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff

});

/*
Possible values:

"mozbrowserloadstart“
...
Contacts
Contacts
var contact = new mozContact();
contact.init({name: "Tom"});

var request = navigator.mozContacts.save(contact);
...
Web APIs – Certified
•
•
•
•
•
•
•
•

Camera API
Idle API
Mobile Connection API
Network Stats API
Permissions API
Power Ma...
Web Activities
Web Activities
•
•
•
•
•
•
•
•

browse
configure
costcontrol
dial
open
pick
record
save-bookmark

•
•
•
•

share
view
upda...
Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
ty...
Pick
activity.onsuccess = function () {
var img = document.createElement("img");

if (this.result.blob.type.indexOf("image...
Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});
new webcontacts/contact
var newContact = new MozActivity({
name: "new",
data: {
type: "webcontacts/contact",
params: {
giv...
Web Activity Received Handler
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var option = activity...
Don’t forget the manifest
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "in...
How to start
Creative Commons: http://j.mp/Ilm7wx
Phonegap
Firefox OS Simulator (1.1 – no Maverick)
Firefox OS App Manager + Simulator
(1.2+)
Firefox Web Developer Tools
DEMO

How to debug a Firefox OS app
Some candies
Prototyping with JSFiddle
• Append /webapp.manifest to

install the app in the Firefox
OS simulator

• Append /fxos.html t...
What’s next
More Web APIs & features
• Calendar API

• Spellcheck API LogAPI

• FileHandle API Sync API

• Resource lock API

• Keyboa...
To infinity, and
beyond… it’s only
the beginning!

Creative Commons: http://j.mp/1gIdcPF
While building your startup
Why not port your web app to Firefox OS? You’ll reach a new audience…
Resources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Develop...
Resources
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate
Firefox OS ...
If you plan to
or are building
a Firefox OS app…
Please let me know!
Attribution

ShareAlike
http://creativecommons.org/licenses/by-sa/4.0/
Frédéric Harper
fharper@mozilla.com

@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08
Upcoming SlideShare
Loading in...5
×

Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08

1,275

Published on

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,275
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • START CAMTASIASTART ZOOM ITThis presentation is 30 minutesHi, my name is Frédéric HarperI’m a Senior Technical Evangelist at Mozilla focussing on the Open Web with Firefox OSFeel free to tweet about the presentation by adding my Twitter handle @fharper.Good or bad things, I won’t be upset!You can also go, after the presentation, to my personal blog at outofcomfortzone.net or for the lazy one, occz.netYou don’t have to take notes from what you see on the slides, as the slides will be made available on my site soon after the event
  • Let’s start with the Ambien light APIThis API will give you the ability to get values about the ambient light
  • It’s quite simple, you need to add a listener on devicelightYour function will get call when the ambient light will changeYou’ll get a value in lux
  • Open Droid@ScreenConnect a real device to the laptopOpen Firefox OS BoilerplateClick the Ambient Light buttonShow the valuePut your hand in front of the deviceShow the new light value
  • The next one is kind of obviousIt will give you information on the battery
  • You can get the battery level by getting the value of navigator.battery.levelYou can also do this for charging time, and discharging timeAnother way is to manage event listener on the levelchange, chargingchange, and chargingtimechangeIt’s not just useful for a battery information app, but you can take advantage of it
  • Let’s use again Firefox OS Boilerplate AppOpen Droid@ScreenConnect a real device to the laptopOpen Firefox OS BoilerplateClick the battery buttonShow the information
  • The name of this API is pretty clearI remember many native applications on other platform that were just windows on HTML applicationNow since your application is HTML, the utility for this API would be to let the user navigate to an external websiteIt could be helpful if you have to made the user log in into a third party services, and approve a key for your application, as an example
  • You can add a browser iframe in your application, by adding some codeNote that the important part is the mozbrowser attribute in the iframe elementIf you also want to have a kind of full browser experience, you can add the other elements with those IDs
  • You can also add different listener for different action from the users, but also from the browser iframe
  • Another nice privileged API give you access to the contact list
  • You can get add, modify, and delete a contact to the listYou can also find, and select all contactsThis code example show you how to add a contact to the address book of the user’s phone
  • You can just port your actual web application to Firefox OSYou’ll see, it’s like running an unicornA developer I’m working with porter one of his game in 30 minutes!
  • Firefox OS UI component
  • If you are currently or planning to build a Firefox OS application, please let me knowI’ll also be curios to see any other HTML5 application you actually haveThere are good opportunities with the platform, and I would like to help you to publish your application to the marketplace
  • Feel free to follow me on Twitter or add me to LinkedInIf you want to read some amazing technical posts on Firefox, Firefox OS, Developer Tool, and the Open Web, please check our hacks blogLast, but not least, you can check my personal blog: it’s all about gnomes, and unicorns
  • Transcript of "Firefox OS, a startup opportunity - Mobile Startups Toronto & HTML Toronto meetup - 2014-01-08"

    1. 1. Firefox OS a startup opportunity Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net Mobile Startups Toronto & HTML5 Toronto meetup Toronto, Canada 2014-01-08
    2. 2. The startup business model
    3. 3. Creative Commons: http://j.mp/13UsL5W
    4. 4. Which platform should I start with?
    5. 5. You should start with the web…
    6. 6. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
    7. 7. What you deserve
    8. 8. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
    9. 9. It’s open source
    10. 10. Architecture
    11. 11. Benefits of HTML5  In-built distribution – the Web  Simple technologies used by a lot of developers  Evolution of existing practices  Open, independent, and standardised
    12. 12. Some facts  Released in Spain, Poland, Venezuela, Hungary, Colombia, Uruguay, Mexico, Bra zil, and Greece  18 mobile operator, and 6 hardware partners  Hardware options: ZTE Open, Alcatel One Touch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb…
    13. 13. A Firefox OS app?  Creating a hosted or packaged app  Using  Vanilla HTML5  Regular API  Privileged API  Certified API
    14. 14. 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" } } }
    15. 15. Web APIs
    16. 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. 17. Ambient Light Sensor
    18. 18. 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); });
    19. 19. DEMO Boilerplate – Ambient Light Sensor
    20. 20. Battery Status
    21. 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. 22. DEMO Boilerplate – Battery status
    23. 23. Web APIs – Privileged • • • • • Browser API Contacts API Device Storage API systemXHR TCP Socket API packaged
    24. 24. Browser
    25. 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=‘yoursite.com' id='browser'></iframe>
    26. 26. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ */ "mozbrowserloadend" "mozbrowserclose"
    27. 27. Contacts
    28. 28. 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") };
    29. 29. 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
    30. 30. Web Activities
    31. 31. Web Activities • • • • • • • • browse configure costcontrol dial open pick record save-bookmark • • • • share view update new • • • mail websms/sms webcontacts/contact
    32. 32. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
    33. 33. 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 };
    34. 34. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
    35. 35. 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" } } });
    36. 36. 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"); } } });
    37. 37. Don’t forget the manifest "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
    38. 38. How to start
    39. 39. Creative Commons: http://j.mp/Ilm7wx
    40. 40. Phonegap
    41. 41. Firefox OS Simulator (1.1 – no Maverick)
    42. 42. Firefox OS App Manager + Simulator (1.2+)
    43. 43. Firefox Web Developer Tools
    44. 44. DEMO How to debug a Firefox OS app
    45. 45. Some candies
    46. 46. 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.
    47. 47. What’s next
    48. 48. 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
    49. 49. To infinity, and beyond… it’s only the beginning! Creative Commons: http://j.mp/1gIdcPF
    50. 50. While building your startup Why not port your web app to Firefox OS? You’ll reach a new audience…
    51. 51. 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
    52. 52. 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
    53. 53. If you plan to or are building a Firefox OS app… Please let me know!
    54. 54. Attribution ShareAlike http://creativecommons.org/licenses/by-sa/4.0/
    55. 55. 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.

    ×