!

#FirefoxOS

Front In RECIFE !

Fábio Magnoni

@FabioMagnoni

#FirefoxOS

http://www.unrealengine.com/html5/

GECKO

GAIA

GONK

GONK

Infrastructure Layer (Gonk)

RILd

AccelGPSCamera

Power Mgt

Audio /

Video

Open GLES

Input / Touch

Open Source Libraries

Bluetooth USB

LEDs HW

Buttons

Vibrator

OEM Libs

Device’s Operationg System

Linux Kernel OEM Drivers OEM Modem Firmware

GECKO

Open Web Platform Interface

Contacts

Sensors GeoLocation

Battery Vibration

Camera Media

Storage WebRTC

Alarms System

Messages

System XHR

NFC Bluetooth

WebTelephony WebSMS/MMSSettings

Gecko Engine

Security

Web APIs

Open WebApps APIs

Network Connections

/ UICC

mozPay /Trusted

UI

WebActivities

HTML5 APIs

GAIA

JS Libraries For Developers

Core - Certified

Apps System

AppUtility

Libraries Building Blocks

GaiaHosted Apps

Trusted Packed Apps

Application Layer HTML5 / JS / CSS

Construindo Apps

Apps Web Aberta

A Web é a Plataforma

Mobile Internet Users Desktop

Plataformas !

A Web está ganhando!!!

{ "version": "1.0", "name": “Mozilla", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } }, "pt-BR": { "description": "Descrição da sua aplicação!", "developer": { "url": "http://pt-BR.mozillalabs.com/" } } }, "default_locale": "en" }

Verificador de Manifestohttp://appmanifest.org/

Empacotadas vs. Hospedadas

Segurança

Apps

Conteúdo Web

Conteúdos Web Padrão

Web Apps Privilegiadas

Mais acesso, mais responsabilidade

Web Apps Instaladas

Web App Normal

Web App Certificada

Apps Críticas ao dispositivo

Permissões

https://developer.mozilla.org/en-US/Apps/Developing/App_permissions

"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }

WEB APIs

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

WEB APIS (PRA GALERA)

API STATUS DA BATERIA

var battery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" : "not ", chargingTime = parseInt(battery.chargingTime / 60, 10, dischargingTime = parseInt(battery.dischargingTime / 60, 10); // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); }

NOTIFICAÇÃO

var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );

API ORIENTAÇÃO DE TELA

// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */

API VIRAÇÃO

// Vibrate for one second navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause,…] navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds navigator.vibrate(5000); // Turn off vibration navigator.vibrate(0);

API INFO DE REDE

var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;

PROXIMIDADE

window.addEventListener("deviceproximity", function (event) { // Current device proximity, in centimeters console.log(event.value); // The maximum sensing distance the sensor is // able to report, in centimeters console.log(event.max); // The minimum sensing distance the sensor is // able to report, in centimeters console.log(event.min); });

API EVENTOS ILUMINAÇÃO

window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux console.log(event.value); });

window.addEventListener("devicelight", function (event) { // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

WEB APIS (PRIVILEGIADAS)

DEVICE STORAGE

var deviceStorage = navigator.getDeviceStorage("videos");

// "external", "shared", or "default". deviceStorage.type; // Add a file - returns DOMRequest with file name deviceStorage.add(blob); // Same as .add, with provided name deviceStorage.addNamed(blob, name); // Returns DOMRequest/non-editable File object deviceStorage.get(name); // Returns editable FileHandle object deviceStorage.getEditable(name); // Returns DOMRequest with success or failure deviceStorage.delete(name); // Enumerates files deviceStorage.enumerate([directory]); // Enumerates files as FileHandles deviceStorage.enumerateEditable([directory]);

var storage = navigator.getDeviceStorage("videos"), cursor = storage.enumerate(); cursor.onerror = function() { console.error("Error in DeviceStorage.enumerate()", cursor.error.name); }; cursor.onsuccess = function() { if (!cursor.result) return; var file = cursor.result; // If this isn't a video, skip it if (file.type.substring(0, 6) !== "video/") { cursor.continue(); return; } // If it isn't playable, skip it var testplayer = document.createElement("video"); if (!testplayer.canPlayType(file.type)) { cursor.continue(); return; } };

API DE CONTATO

var addContact = document.querySelector("#add-contact"); if (addContact) { addContact.onclick = function () { var newContact = new MozActivity({ name: "new", // Possibly add-contact in future versions data: { type: "webcontacts/contact", params: { // Will possibly move to be direct properties under "data" giveName: "Fabio", familyName: "Magnoni", tel: "+5519988013586", email: "fabio@mozilla.com", address: "Campinas", note: “Se tiver cerveja envolvida, pode entrar em contato :)”, company: "Mozilla" } } }); } }

Apps Certificadas = Apps SO

Dialer !Contacts !Settings !SMS !Web browser !Gallery !Video Player !Music Player !E-mail (POP, IMAP) !Calendar

Alarm Clock !Camera !Notes !First Run Experience !Notifications !Home Screen !Mozilla Marketplace !System Updater !Localization Support

WEB ACTIVITIES

var activity = new MozActivity({ name: "view", data: { type: "image/png", url: ... } });

activity.onsuccess = function () { console.log("Showing the image!"); };activity.onerror = function () { console.log("Can't view the image!"); };

{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }

var register = navigator.mozRegisterActivityHandler({ name: "view", disposition: "inline", filters: { type: "image/png" } }); register.onerror = function () { console.log("Failed to register activity"); }

navigator.mozSetMessageHandler("activity", function (a) { var img = getImageObject(); img.src = a.source.url; // Call a.postResult() or a.postError() if // the activity should return a value });

Como instalar App da Web

var install app = navigator.mozApps.install(manifestURL); installapp.onsucess = function(data) { //App is installed };installapp.onerror = function() { //App wasn’t installed, info is in // installapp.error.name};

APIs Futuras

Resource lock API

UDP Datagram Socket API

Peer to Peer API

WebNFC

WebUSB

HTTP-cache API

Calendar API

Spellcheck API

LogAPI

Keyboard/IME API

WebRTC

FileHandle API

Sync API

https://github.com/mozilla-b2g/gaia/

https://marketplace.firefox.com/

\o/ Documentos e Ferramentas \o/

FIREFOX OS BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App

https://addons.mozilla.org/firefox/addon/firefox-os-simulator/

http://buildingfirefoxos.com/

https://developer.mozilla.org/en-US/docs/WebAPI

https://marketplace.firefox.com/developers/

https://hacks.mozilla.org/category/firefox-os/

Mozilla Developer Blog

http://mozilla.github.io/brick/docs.html

ComponentesAppbar !Calendar !Deck !Flipbox !Layout !Slideshow !Slider !Tabbar !Toggle !Tooltip

https://appmaker.mozillalabs.com/

App Maker

Pedindo Ajuda

https://lists.mozilla.org/listinfo/dev-webapps

irc://irc.mozilla.org/ #openwebapps

http://quotethattalk.tumblr.com/tagged/albert-einstein

Fábio Magnoni

fabio@mozilla.com

@FabioMagnoni

@mozhacks