!

#FirefoxOS

WEB.BR 2013 !

Fábio Magnoni

@FabioMagnoni

#FirefoxOS

Construindo Apps

Open Web Apps

A Plataforma é a Web

Mobile Internet Users Desktop

Plataformas

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

Packaged vs. Hosted Apps

WebAPIs

Segurança

Aplicações

Conteúdo Web

Conteúdo Web comum

Apps Web Privilegiadas

Mais acesso, mais responsabilidades

App Web Instalada

Uma App Web comum

App Web Certificada

Apps críticas aos aparelho (hardware)

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 (PARA TODOS)

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" */

VIBRATION API

// 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);

VISIBILIDADE DA PÁGINA

document.addEventListener("visibilitychange", function (event) { if (document.hidden) { console.log(event."App is hidden"); } else { console.log(event."App has focus"); } });

NETWORK INFO API

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); });

AMBIENT LIGHT EVENT

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 (APPS 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 CONTATOS

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 =

DO 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 });

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

Como Instalar pela 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://marketplace.firefox.com/

\o/ Docs 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/

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

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

Recursos

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

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

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

Mozilla Developer Blog

Precisa de 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