webapis + brick - webbr2013
DESCRIPTION
Palestra dada no WebBR2013 sobre WebAPIs, ferramentas para desenvolvimento e Web Components (Brick).TRANSCRIPT
![Page 1: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/1.jpg)
!
#FirefoxOS
WEB.BR 2013 !
![Page 2: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/2.jpg)
Fábio Magnoni
@FabioMagnoni
#FirefoxOS
![Page 3: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/3.jpg)
Construindo Apps
![Page 4: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/4.jpg)
Open Web Apps
![Page 5: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/5.jpg)
A Plataforma é a Web
![Page 6: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/6.jpg)
Mobile Internet Users Desktop
![Page 7: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/7.jpg)
Plataformas
![Page 8: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/8.jpg)
{ "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" }
![Page 10: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/10.jpg)
Packaged vs. Hosted Apps
![Page 11: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/11.jpg)
WebAPIs
![Page 12: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/12.jpg)
Segurança
![Page 13: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/13.jpg)
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)
![Page 14: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/14.jpg)
Permissões
https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
![Page 15: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/15.jpg)
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
![Page 16: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/16.jpg)
WEB APIs
![Page 17: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/17.jpg)
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)
![Page 18: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/18.jpg)
API STATUS DA BATERIA
![Page 19: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/19.jpg)
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); }
![Page 20: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/20.jpg)
NOTIFICAÇÃO
![Page 21: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/21.jpg)
var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
![Page 22: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/22.jpg)
API ORIENTAÇÃO DE TELA
![Page 23: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/23.jpg)
// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
![Page 24: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/24.jpg)
VIBRATION API
![Page 25: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/25.jpg)
// 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);
![Page 26: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/26.jpg)
VISIBILIDADE DA PÁGINA
![Page 27: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/27.jpg)
document.addEventListener("visibilitychange", function (event) { if (document.hidden) { console.log(event."App is hidden"); } else { console.log(event."App has focus"); } });
![Page 28: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/28.jpg)
NETWORK INFO API
![Page 29: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/29.jpg)
var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
![Page 30: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/30.jpg)
PROXIMIDADE
![Page 31: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/31.jpg)
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); });
![Page 32: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/32.jpg)
AMBIENT LIGHT EVENT
![Page 33: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/33.jpg)
window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux console.log(event.value); });
![Page 34: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/34.jpg)
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); });
![Page 35: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/35.jpg)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
WEB APIS (APPS PRIVILEGIADAS)
![Page 36: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/36.jpg)
DEVICE STORAGE
![Page 37: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/37.jpg)
var deviceStorage = navigator.getDeviceStorage("videos");
![Page 38: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/38.jpg)
// "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]);
![Page 39: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/39.jpg)
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; } };
![Page 40: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/40.jpg)
API DE CONTATOS
![Page 41: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/41.jpg)
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: "[email protected]", address: "Campinas", note: “Se tiver cerveja envolvida, pode entrar em contato :)”, company: "Mozilla" } } }); } }
![Page 42: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/42.jpg)
Apps Certificadas =
DO SO
![Page 43: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/43.jpg)
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
![Page 44: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/44.jpg)
WEB ACTIVITIES
![Page 45: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/45.jpg)
![Page 46: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/46.jpg)
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!"); };
![Page 47: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/47.jpg)
{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }
![Page 48: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/48.jpg)
var register = navigator.mozRegisterActivityHandler({ name: "view", disposition: "inline", filters: { type: "image/png" } }); register.onerror = function () { console.log("Failed to register activity"); }
![Page 49: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/49.jpg)
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 });
![Page 51: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/51.jpg)
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};
![Page 52: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/52.jpg)
APIs Futuras
![Page 53: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/53.jpg)
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
![Page 55: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/55.jpg)
\o/ Docs e Ferramentas \o/
![Page 56: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/56.jpg)
FIREFOX OS BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 57: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/57.jpg)
https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
![Page 60: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/60.jpg)
ComponentesAppbar !Calendar !Deck !Flipbox !Layout !Slideshow !Slider !Tabbar !Toggle !Tooltip
![Page 61: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/61.jpg)
Recursos
![Page 63: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/63.jpg)
https://marketplace.firefox.com/developers/
![Page 64: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/64.jpg)
https://hacks.mozilla.org/category/firefox-os/
Mozilla Developer Blog
![Page 65: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/65.jpg)
Precisa de ajuda?
![Page 66: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/66.jpg)
![Page 67: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/67.jpg)
https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/ #openwebapps
![Page 69: WebAPIs + Brick - WebBR2013](https://reader037.vdocuments.net/reader037/viewer/2022103016/55495bceb4c905e94e8b52f4/html5/thumbnails/69.jpg)
Fábio Magnoni
@FabioMagnoni
@mozhacks