Your SlideShare is downloading. ×
0
!
WEB.BR 2013 	


#FirefoxOS
!
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": "/i...
VERIFICADOR DE MANIFESTO
http://appmanifest.org/
Packaged vs. Hosted Apps
WebAPIs
Segurança
Aplicações
Conteúdo Web

Apps Web Privilegiadas

Conteúdo Web comum

Mais acesso, mais
responsabilidades

App Web Instalad...
Permissões

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

"contacts": {

"description": "Required for autocompletion in the share screen",

"access": "readcreate"...
WEB APIs
WEB APIS (PARA TODOS)
Vibration API (W3C)

Web Activities

Screen Orientation

Push Notifications API

Geolocation API

Web...
API STATUS DA
BATERIA
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + "%",

charging = (b...
NOTIFICAÇÃO
var notification = navigator.mozNotification;

notification.createNotification(

"See this", 

"This is a notification", 
...
API ORIENTAÇÃO
DE TELA
// Portrait mode:

screen.mozLockOrientation("portrait");



/* 

Possible values:

"landscape" 

"portrait"

"landscape-p...
VIBRATION API
// Vibrate for one second

navigator.vibrate(1000);



// Vibration pattern [vibrationTime, pause,…]

navigator.vibrate([2...
VISIBILIDADE DA
PÁGINA
document.addEventListener("visibilitychange", function (event) {

	
if (document.hidden) {
	
	
	
console.log(event."App is...
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(ev...
AMBIENT LIGHT
EVENT
window.addEventListener("devicelight", function (event) {

// The level of the ambient light in lux

console.log(event.val...
window.addEventListener("devicelight", function (event) {

// The lux values for "dim" typically begin below 50,

// and t...
WEB APIS (APPS PRIVILEGIADAS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
DEVICE STORAGE
var deviceStorage = navigator.getDeviceStorage("videos");
// "external", "shared", or "default".

deviceStorage.type;



// Add a file - returns DOMRequest with file name

deviceSt...
var storage = navigator.getDeviceStorage("videos"),

cursor = storage.enumerate();



cursor.onerror = function() {

conso...
API DE CONTATOS
var addContact = document.querySelector("#add-contact");

if (addContact) { 

addContact.onclick = function () {

var newC...
Apps Certificadas
=
DO SO
Dialer
!
Contacts
!
Settings
!
SMS
!
Web browser
!
Gallery
!
Video Player
!
Music Player
!
E-mail (POP, IMAP)
!
Calendar

...
WEB ACTIVITIES
var activity = new MozActivity({

name: "view", 

data: {

type: "image/png", 

url: ... 

}

});

activity.onsuccess = fu...
{

"activities": {

"share": {

"filters": {

"type": ["image/png", "image/gif"]

}

"href": "sharing.html",

"disposition...
var register = navigator.mozRegisterActivityHandler({

name: "view", 

disposition: "inline", 

filters: {

type: "image/p...
navigator.mozSetMessageHandler("activity", function (a) {

var img = getImageObject();

img.src = a.source.url;

// Call a...
Como Instalar pela WEB

var install app = navigator.mozApps.install(manifestURL);

installapp.onsucess = function(data) {	...
APIs Futuras
Resource lock API

Spellcheck API

UDP Datagram Socket API

LogAPI

Peer to Peer API

Keyboard/IME API

WebNFC

WebRTC

We...
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-ossimulator/
http://buildingfirefoxos.com/
http://mozilla.github.io/brick/docs.html
Componentes
Appbar
!
Calendar
!
Deck
!
Flipbox
!
Layout
!
Slideshow
!
Slider
!
Tabbar
!
Toggle
!
Tooltip
Recursos
https://developer.mozilla.org/en-US/docs/WebAPI
https://marketplace.firefox.com/developers/
Mozilla Developer Blog

https://hacks.mozilla.org/category/firefox-os/
Precisa de ajuda?
https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/
#openwebapps
Fábio Magnoni

fabio@mozilla.com

@FabioMagnoni
@mozhacks
WebAPIs + Brick - WebBR2013
WebAPIs + Brick - WebBR2013
WebAPIs + Brick - WebBR2013
WebAPIs + Brick - WebBR2013
Upcoming SlideShare
Loading in...5
×

WebAPIs + Brick - WebBR2013

880

Published on

Palestra dada no WebBR2013 sobre WebAPIs, ferramentas para desenvolvimento e Web Components (Brick).

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
880
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "WebAPIs + Brick - WebBR2013"

  1. 1. ! WEB.BR 2013 #FirefoxOS !
  2. 2. Fábio Magnoni @FabioMagnoni #FirefoxOS
  3. 3. Construindo Apps
  4. 4. Open Web Apps
  5. 5. A Plataforma é a Web
  6. 6. Mobile Internet Users Desktop
  7. 7. Plataformas
  8. 8. {
 "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"
 }

  9. 9. VERIFICADOR DE MANIFESTO http://appmanifest.org/
  10. 10. Packaged vs. Hosted Apps
  11. 11. WebAPIs
  12. 12. Segurança
  13. 13. Aplicações Conteúdo Web Apps Web Privilegiadas Conteúdo Web comum Mais acesso, mais responsabilidades App Web Instalada App Web Certificada Uma App Web comum Apps críticas aos aparelho (hardware)
  14. 14. Permissões https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
  15. 15. "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  16. 16. WEB APIs
  17. 17. WEB APIS (PARA TODOS) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM API Mouse Lock API (W3C) WebPayment Open WebApps IndexedDB (W3C) Network Information API (W3C) Ambient light sensor Battery Status API (W3C) Proximity sensor Alarm API Notification
  18. 18. API STATUS DA BATERIA
  19. 19. 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); }
  20. 20. NOTIFICAÇÃO
  21. 21. var notification = navigator.mozNotification;
 notification.createNotification(
 "See this", 
 "This is a notification", 
 iconURL
 );
  22. 22. API ORIENTAÇÃO DE TELA
  23. 23. // Portrait mode:
 screen.mozLockOrientation("portrait");
 
 /* 
 Possible values:
 "landscape" 
 "portrait"
 "landscape-primary"
 "landscape-secondary"
 "portrait-primary"
 "portrait-secondary"
 */
  24. 24. VIBRATION API
  25. 25. // 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);
  26. 26. VISIBILIDADE DA PÁGINA
  27. 27. document.addEventListener("visibilitychange", function (event) {
 if (document.hidden) { console.log(event."App is hidden"); } else { console.log(event."App has focus"); }
 });
  28. 28. NETWORK INFO API
  29. 29. var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  30. 30. PROXIMIDADE
  31. 31. 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);
 });
  32. 32. AMBIENT LIGHT EVENT
  33. 33. window.addEventListener("devicelight", function (event) {
 // The level of the ambient light in lux
 console.log(event.value);
 });
  34. 34. 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);
 });
  35. 35. WEB APIS (APPS PRIVILEGIADAS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  36. 36. DEVICE STORAGE
  37. 37. var deviceStorage = navigator.getDeviceStorage("videos");
  38. 38. // "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]);
  39. 39. 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;
 }
 };
  40. 40. API DE CONTATOS
  41. 41. 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"
 }
 }
 });
 }
 }
  42. 42. Apps Certificadas = DO SO
  43. 43. 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
  44. 44. WEB ACTIVITIES
  45. 45. 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!");
 };
  46. 46. {
 "activities": {
 "share": {
 "filters": {
 "type": ["image/png", "image/gif"]
 }
 "href": "sharing.html",
 "disposition": "window"
 }
 }
 }
  47. 47. var register = navigator.mozRegisterActivityHandler({
 name: "view", 
 disposition: "inline", 
 filters: {
 type: "image/png"
 }
 });
 
 register.onerror = function () {
 console.log("Failed to register activity");
 }
  48. 48. 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
 });
  49. 49. 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 };
  50. 50. APIs Futuras
  51. 51. Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
  52. 52. https://marketplace.firefox.com/
  53. 53. o/ Docs e Ferramentas o/
  54. 54. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  55. 55. https://addons.mozilla.org/firefox/addon/firefox-ossimulator/
  56. 56. http://buildingfirefoxos.com/
  57. 57. http://mozilla.github.io/brick/docs.html
  58. 58. Componentes Appbar ! Calendar ! Deck ! Flipbox ! Layout ! Slideshow ! Slider ! Tabbar ! Toggle ! Tooltip
  59. 59. Recursos
  60. 60. https://developer.mozilla.org/en-US/docs/WebAPI
  61. 61. https://marketplace.firefox.com/developers/
  62. 62. Mozilla Developer Blog https://hacks.mozilla.org/category/firefox-os/
  63. 63. Precisa de ajuda?
  64. 64. https://lists.mozilla.org/listinfo/dev-webapps irc://irc.mozilla.org/ #openwebapps
  65. 65. Fábio Magnoni fabio@mozilla.com @FabioMagnoni @mozhacks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×