!

#FirefoxOS

Front In Fortaleza !

Fábio Magnoni

@FabioMagnoni

#FirefoxOS

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

Meidin Camelô…

38 bilhões de dispositivos !conectamos !

em 2020

ABI Research - 2013-05-09 - http://j.mp/38billion!

Você deveria começar com a web…

Mobile Internet Users Desktop

Plataformas !

A Web está ganhando!!!

A Web é a Plataforma

Vamos começar com o que você merece!

Feito com a Web

Usando HTML5, CSS3 e JavaScript!Com uma série de APIs!para desenvolver apps.!

É open source

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

{ "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;

API DE 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};

Cordova & Phonegap

Implementação das APIs

• Câmera • Contatos • Dispositivo • Device-motion • Geolocation • Orientação • Vibração

Se preparando

$ sudo npm install -g cordova$ cordova create hello com.example.hello HelloWorld$ cd hello$ cordova platform add firefoxos$ cordova prepare firefoxos

API de Camera

$ cordova plugin add org.apache.cordova.camera!!//Cordova codenavigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1});!

Firefox OS App Manager + Simulador (1.2+)

Firefox Developer Tools

\o/ Documentos e Ferramentas \o/

developer.mozilla.org

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

FIREFOX OS BOILERPLATE APP

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

https://hacks.mozilla.org

Mozilla Developer Blog

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

Prototipe com JSFiddle• Insira /webapp.manifest

para instalar o app no simulador do Firefox OS

!

• Insira /fxos.html para ter uma página de instalação como um app Firefox OS hospedado

http://buildingfirefoxos.com/

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

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

https://marketplace.firefox.com/

https://appmaker.mozillalabs.com/

App Maker

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

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

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

Fábio Magnoni

@FabioMagnoni

@mozhacks