Post on 06-May-2015
transcript
!
#FirefoxOS
Front In RECIFE !
Fábio Magnoni
@FabioMagnoni
#FirefoxOS
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" }
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
\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/
https://marketplace.firefox.com/developers/
https://hacks.mozilla.org/category/firefox-os/
Mozilla Developer Blog
ComponentesAppbar !Calendar !Deck !Flipbox !Layout !Slideshow !Slider !Tabbar !Toggle !Tooltip
Pedindo Ajuda
https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/ #openwebapps
Fábio Magnoni
fabio@mozilla.com
@FabioMagnoni
@mozhacks