SlideShare a Scribd company logo
1 of 45
Download to read offline
Welcome Firefox OS
Mumbai Firefox OS Hackathon
to India with your app
2014-06-25
Frédéric Harper
Sr.Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
Firefox OS
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
Built with theWeb
Using HTML5, CSS3 and JavaScript
with a number of APIs
to build apps.
It’s open source
Some facts
 7 operator (17 committed) & 4 hardware partners
 ZTE Open, Alcatel OneTouch Fire, Geeksphone Keon,
Geeksphone Peak, LG FireWeb…
 More to come: Flame, HuaweiY300, ZTE Open C, Alcatel
OneTouche Fire C & E & S…
 Aimed at emerging markets/low end market
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
A Firefox OS app?
 Creating a hosted or packaged app
 Using
 Vanilla HTML5
 Librairies…
 Regular API
 PrivilegedAPI
 Certified API
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"
}
}
}
DEMO App Manager + Emberjs todomvc
Web APIs
Web APIs – Regular
• AlarmAPI
• Ambient light sensor
• Archive API
• Battery StatusAPI
• Geolocation API
• IndexedDB
• Network Information API
• NotificationsAPI
• Open WebApps
• Proximity sensor
• Push API
• Screen Orientation
• Vibration API
• Web Activities
• WebFM API
• WebPayment
packaged
hosted
Ambient Light Sensor
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);
});
DEMO Boilerplate – Ambient Light Sensor
Battery Status
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);
}
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-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘yoursite.com' id='browser'></iframe>
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/
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
Web Activities
Web Activities
• browse
• configure
• costcontrol
• dial
• Open
• new
• mail
• websms/sms
• webcontacts/contact
• pick
• record
• save-bookmark
• share
• view
• update
packaged
hosted
Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});
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
};
Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});
Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}
Don’t forget to handle it!
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");
}
}
});
Creative Commons: http://j.mp/1iZHGAW
How to start
The next presentations
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25
Creative Commons: http://j.mp/1gIdcPF
To infinity, and
beyond…
MoreWeb APIs & features
• Calendar API
• FileHandle API Sync API
• Keyboard/IME APIWebRTC
• HTTP-cache API
• Peer to Peer API
• Spellcheck API LogAPI
• Resource lock API
• UDP Datagram Socket API
• WebNFC
• WebUSB
Help get quality Indian apps
Help Firefox OS be the #1 platform in India!
Resources
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
Free phone!
http://j.mp/mozFlame
Creative Commons: https://flic.kr/p/epEL3n
etherpad.mozilla.org/m
umbaifxoshackathon
Need help with translation!
Hindi, Tamil & Bengali
Connect A2 Captain Rogers Drawl
http://mzl.la/howTransifex
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.org
http://outofcomfortzone.net

More Related Content

What's hot

BP-6 Repository Customization Best Practices
BP-6 Repository Customization Best PracticesBP-6 Repository Customization Best Practices
BP-6 Repository Customization Best PracticesAlfresco Software
 
Selenium WebDriver
Selenium WebDriverSelenium WebDriver
Selenium WebDriverRajathi-QA
 
Ruby MVC from scratch with Rack
Ruby MVC from scratch with RackRuby MVC from scratch with Rack
Ruby MVC from scratch with RackDonSchado
 
Super simple application security with Apache Shiro
Super simple application security with Apache ShiroSuper simple application security with Apache Shiro
Super simple application security with Apache ShiroMarakana Inc.
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on AzureMaarten Balliauw
 
Active scripting
Active scriptingActive scripting
Active scriptingMakoto Kato
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...David Kaneda
 
Phing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychPhing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychleafnode
 
Rails Girls: Programming, Web Applications and Ruby on Rails
Rails Girls: Programming, Web Applications and Ruby on RailsRails Girls: Programming, Web Applications and Ruby on Rails
Rails Girls: Programming, Web Applications and Ruby on RailsDonSchado
 
Build A Killer Client For Your REST+JSON API
Build A Killer Client For Your REST+JSON APIBuild A Killer Client For Your REST+JSON API
Build A Killer Client For Your REST+JSON APIStormpath
 
Building Secure User Interfaces With JWTs
Building Secure User Interfaces With JWTsBuilding Secure User Interfaces With JWTs
Building Secure User Interfaces With JWTsrobertjd
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesBrad Hill
 
JWT Authentication with AngularJS
JWT Authentication with AngularJSJWT Authentication with AngularJS
JWT Authentication with AngularJSrobertjd
 
WebRTC & Firefox OS - presentation at Google
WebRTC & Firefox OS - presentation at GoogleWebRTC & Firefox OS - presentation at Google
WebRTC & Firefox OS - presentation at GoogleRobert Nyman
 
Drupal, Android and iPhone
Drupal, Android and iPhoneDrupal, Android and iPhone
Drupal, Android and iPhoneAlexandru Badiu
 
Integration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + SeleniumIntegration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + Seleniumtka
 
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialCrossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann
 

What's hot (20)

BP-6 Repository Customization Best Practices
BP-6 Repository Customization Best PracticesBP-6 Repository Customization Best Practices
BP-6 Repository Customization Best Practices
 
Selenium WebDriver
Selenium WebDriverSelenium WebDriver
Selenium WebDriver
 
JCR and Sling Quick Dive
JCR and Sling Quick DiveJCR and Sling Quick Dive
JCR and Sling Quick Dive
 
Ruby MVC from scratch with Rack
Ruby MVC from scratch with RackRuby MVC from scratch with Rack
Ruby MVC from scratch with Rack
 
Super simple application security with Apache Shiro
Super simple application security with Apache ShiroSuper simple application security with Apache Shiro
Super simple application security with Apache Shiro
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on Azure
 
Firebase slide
Firebase slideFirebase slide
Firebase slide
 
Active scripting
Active scriptingActive scripting
Active scripting
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Phing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowychPhing i Fabric - Budowanie i deployment aplikacji webowych
Phing i Fabric - Budowanie i deployment aplikacji webowych
 
20100305
2010030520100305
20100305
 
Rails Girls: Programming, Web Applications and Ruby on Rails
Rails Girls: Programming, Web Applications and Ruby on RailsRails Girls: Programming, Web Applications and Ruby on Rails
Rails Girls: Programming, Web Applications and Ruby on Rails
 
Build A Killer Client For Your REST+JSON API
Build A Killer Client For Your REST+JSON APIBuild A Killer Client For Your REST+JSON API
Build A Killer Client For Your REST+JSON API
 
Building Secure User Interfaces With JWTs
Building Secure User Interfaces With JWTsBuilding Secure User Interfaces With JWTs
Building Secure User Interfaces With JWTs
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realities
 
JWT Authentication with AngularJS
JWT Authentication with AngularJSJWT Authentication with AngularJS
JWT Authentication with AngularJS
 
WebRTC & Firefox OS - presentation at Google
WebRTC & Firefox OS - presentation at GoogleWebRTC & Firefox OS - presentation at Google
WebRTC & Firefox OS - presentation at Google
 
Drupal, Android and iPhone
Drupal, Android and iPhoneDrupal, Android and iPhone
Drupal, Android and iPhone
 
Integration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + SeleniumIntegration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + Selenium
 
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocialCrossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
 

Similar to Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25

Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Frédéric Harper
 
HTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSHTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSAll Things Open
 
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28Frédéric Harper
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - MozillaRobert Nyman
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonRobert Nyman
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMartinSotirov
 
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, PortugalFirefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, PortugalRobert Nyman
 
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Anna Klepacka
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefoxNAVER D2
 
RoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRailwaymen
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaChristian Heilmann
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
 
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San FranciscoFirefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San FranciscoRobert Nyman
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceJen Looper
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5Roy Clarkson
 

Similar to Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25 (20)

Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
 
HTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSHTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OS
 
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, PortugalFirefox OS, the Open Web & WebAPIs - LXJS, Portugal
Firefox OS, the Open Web & WebAPIs - LXJS, Portugal
 
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
Workshop KrakYourNet2016 - Web applications hacking Ruby on Rails example
 
(Christian heilman) firefox
(Christian heilman) firefox(Christian heilman) firefox
(Christian heilman) firefox
 
RoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails exampleRoR Workshop - Web applications hacking - Ruby on Rails example
RoR Workshop - Web applications hacking - Ruby on Rails example
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
MesosCon - Be a microservices hero
MesosCon - Be a microservices heroMesosCon - Be a microservices hero
MesosCon - Be a microservices hero
 
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San FranciscoFirefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco
Firefox OS, the Open Web & WebAPIs - HTML5DevConf, San Francisco
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT Conference
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5
 

More from Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Frédéric Harper
 

More from Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

Recently uploaded

Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 

Recently uploaded (20)

Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 

Welcome Firefox OS in india with your app - Mumbai Firefox OS hackathon - 2014-06-25

  • 1. Welcome Firefox OS Mumbai Firefox OS Hackathon to India with your app 2014-06-25 Frédéric Harper Sr.Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net
  • 6. Built with theWeb Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  • 8. Some facts  7 operator (17 committed) & 4 hardware partners  ZTE Open, Alcatel OneTouch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb…  More to come: Flame, HuaweiY300, ZTE Open C, Alcatel OneTouche Fire C & E & S…  Aimed at emerging markets/low end market
  • 10. A Firefox OS app?  Creating a hosted or packaged app  Using  Vanilla HTML5  Librairies…  Regular API  PrivilegedAPI  Certified API
  • 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. DEMO App Manager + Emberjs todomvc
  • 14. Web APIs – Regular • AlarmAPI • Ambient light sensor • Archive API • Battery StatusAPI • Geolocation API • IndexedDB • Network Information API • NotificationsAPI • Open WebApps • Proximity sensor • Push API • Screen Orientation • Vibration API • Web Activities • WebFM API • WebPayment packaged hosted
  • 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. DEMO Boilerplate – Ambient Light Sensor
  • 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. DEMO Boilerplate – Battery status
  • 21. Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API packaged
  • 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. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  • 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
  • 27. Web Activities • browse • configure • costcontrol • dial • Open • new • mail • websms/sms • webcontacts/contact • pick • record • save-bookmark • share • view • update packaged hosted
  • 28. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  • 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. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  • 31. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  • 32. Don’t forget to handle it! 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"); } } });
  • 38. Creative Commons: http://j.mp/1gIdcPF To infinity, and beyond…
  • 39. MoreWeb APIs & features • Calendar API • FileHandle API Sync API • Keyboard/IME APIWebRTC • HTTP-cache API • Peer to Peer API • Spellcheck API LogAPI • Resource lock API • UDP Datagram Socket API • WebNFC • WebUSB
  • 40. Help get quality Indian apps Help Firefox OS be the #1 platform in India!
  • 41. Resources 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
  • 44. Need help with translation! Hindi, Tamil & Bengali Connect A2 Captain Rogers Drawl http://mzl.la/howTransifex

Editor's Notes

  1. START CAMTASIA START ZOOM IT – ALT Z for permanent zoom START TIMER This presentation is 30 minutes
  2. Mozilla will launch in India soon We already have many apps, and games in the marketplace We would like to have some locals one, the one that make sense for you The one missing in the Firefox OS marketplace
  3. Today we are going to show you how to port your application to the Firefox OS marketplace I’ll focus on what is Firefox OS, and the special API you get The rest of the team will talk about tools, and PhoneGap/Cordova integration These are two easy ways to port your application to Firefox OS
  4. Let’s start with what you deserve
  5. Firefox OS, Mozilla launched one year ago
  6. It’s built with the web, for the web, and with the web You use the technology you know, HTML5, CSS3, and JavaScript No need to learn a new language We added a number of APIs to make HTML5 even more awesome As you can see, it’s a UI familiar for smartphone users
  7. It’s Open Source You everybody can contribute Fix bug, add features or suggest them The repository is on GitHub
  8. In one year, we launched on 15 countries Worked with 7 operators & 4 hardware partners We have 5 phones Many will be added soon You need to keep in mind that those are for emergent market
  9. It’s doesn’t mean it’s a smartphone with compromise When we say smartphone, we say apps We also have a marketplace But since it’s an open ecosystem, we don’t force you to use it We also don’t charge you to use it (except a small amount for paid app) But we highly encourage you to do so, as it’s the place users will search first for app
  10. So what is a Firefox OS app It’s a web app, either hosted or packaged Hosted app are on your own server or places like github pages Packaged app are published in the marketplace, we host them You can either use what I call vanilla html, or use any libraries you want You can also use WebAPI if you want to have a better integration with the device
  11. So today, if you have a web application You already have a Firefox OS one Of course, you may have to adjust some part of it But if it’s running well in Firefox the desktop the browser And you use something like responsive web design The only thing to do is to add a manifest file It’s basically a JSON file to tell Firefox OS it’s an app You add all the details about your applications But also things like permissions It’s not because it’s web, that it’s not secure
  12. To show you how it’s easy I’ll take the TodoMVC code using ember.js I’ll create a Firefox OS app with it Open App Manager Explain App Manager
  13. So now you have a Firefox OS application But you want to have a better integration with the platform So we created what we called WebAPI They are API, using HTML, and JavaScript to empower developers We built them for Firefox OS But we work with the W3C, and standard buddy to make them part of the standard As our goal isn’t to have API only working on Firefox OS, we want the web to work And if tomorrow the standard change, we’ll make the change to reflect this on the OS
  14. I quickly shown you three level of API The first level, is the regular API You can use them on hosted or packaged app No need for us to certify your application Here are some of those APIs you can use
  15. Let’s start with the Ambien light API This API will give you the ability to get values about the ambient light Could be useful if you are building an reading app, and wants to change the color if it’s darker or not
  16. It’s quite simple, you need to add a listener on devicelight Your function will get call when the ambient light will change You’ll get a value in lux
  17. Open Droid@Screen Connect a real device to the laptop Open Firefox OS Boilerplate Click the Ambient Light button Show the value Put your hand in front of the device Show the new light value
  18. The next one is kind of obvious It will give you information on the battery Something you weren’t able to do with web technology Useful to save the data of your user or stop some effect in your game when the battery is too low
  19. You can get the battery level by getting the value of navigator.battery.level You can also do this for charging time, and discharging time Another way is to manage event listener on the levelchange, chargingchange, and chargingtimechange It’s not just useful for a battery information app, but you can take advantage of it
  20. Let’s use again Firefox OS Boilerplate App Open Droid@Screen Connect a real device to the laptop Open Firefox OS Boilerplate Click the battery button Show the information
  21. There is a second level of APIs This time they are the privileged APIs You can use those one only with packaged app In that case, no choice to submit your application to the marketplace So we’ll check if you aren’t doing something evil with your code
  22. The name of this API is pretty clear I remember many native applications on other platform that were just windows on HTML application Now since your application is HTML, the utility for this API would be to let the user navigate to an external website It 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
  23. You can add a browser iframe in your application, by adding some code Note that the important part is the mozbrowser attribute in the iframe element If you also want to have a kind of full browser experience, you can add the other elements with those IDs
  24. You can also add different listener for different action from the users, but also from the browser iframe In one application I’m building, I use this to grab the URL that the website return after the user sign-in In contain the key for me to access the API, and account of the users
  25. Last, but not least, the Certified API I won’t take too much time for those As only OEM, or OS applications can use them It’s good to know that they exists As they may move to the privileged or regular API in the future
  26. So how can you do stuff you would do with certified API We have something we called Web Activites
  27. Each of those activites give you more power to either interact with the users, the OS, or the hardware
  28. As an example The Pick Web Activities It give me the opportunity to pick something, in that case an image By using those lines of JavaScript The app will prompt the screen you see on the right The users will have the choice to either use a wallpaper a picture he already had on his phone Or use the camera to take a picture
  29. In that case, depending on what the user did An event will be triggered You’ll be able to use the image in your app Or handle the error in case of a problem, like if the user cancel the action
  30. Another one is the dial web activities It doesn’t give you the right to call someone But by adding those JavaScript lines The dialer app will open with the number The user will only have to press the green button to call
  31. It’s not just about managing activities from within your application You can also become an activity handler In that case, I register my application for a pick activity for JPEG, and PNG images When an application will call a pick web activities My application will be listed If the user select my application Index.html#pick will be called
  32. At that point, you need to be able to handle that call So you register yourself for an activity message handler And you can manage the call, do what you have to do, and serve the picture
  33. What is great is that your application can be installed on an Android device using our APK Factory If you have Firefox installed on your Android device You can install a web application, and our APK Factory will create an Android app from it It’s the same thing we are doing with the Desktop browser right now So, again, you can reach more people with again, one code base
  34. So the big question is how to start
  35. You know it’s easy to create a new Firefox OS application using the API Or to port actual HTML5 app to Firefox OS I will stop there as my friends will do presentation about the tools, and cordova/PhoneGap
  36. Since you don’t have to remember everything I shown you today And those are new APIs We have amazing documentation online It’s called the Mozilla Developer Network Everything from HTML, CSS, JavaScript To the WebAPI, and Web Activities There also documentation about the marketplace, and how to publish your application or add the manifest file Since it’s an open wiki, you can also help us improve the documentation
  37. If you need help with Firefox OS You can always email me But a more efficient way, would be to use StackOverflow It’s a forum for programmers By using it, you are building a F.A.Q. that may help other developers with the same question as you We actively monitor the forum, but it open your questions to a huge community that may answer quicker than if you send me an email
  38. So keep in mind, it’s only the beginning There is a lot more things coming Firefox OS already have a lot of traction It’s a new audience you may not be able to reach before
  39. Of course it’s only the beginning We are always improving the OS Some new APIs will be added like WebNFC or WebUSB
  40. So next time you have to build a mobile application Why not start with the web More reach, more visibility, and easier to do
  41. Some resources Again, don’t take notes You’ll only have one URL to remember, and I’ll tell you at the end of the presentation As I’ll upload my slides, and a recording of my presentation online
  42. If you can’t wait for the workshop And you are currently or planning to build a Firefox OS application, please let me know I’ll also be curios to see any other HTML5 application you actually have There are good opportunities with the platform, and I would like to help you to publish your application to the marketplace
  43. Feel free to follow me on Twitter or add me to LinkedIn If you want to read some amazing technical posts, again, don’t forget the hacks blog Last, but not least, you can check my personal blog: it’s all about gnomes, and unicorns It’s also where, probably tomorrow, I’ll publish my slides as the recording of my presentation So it’s the only link to remember Thanks a lot, any questions, comments, insults?