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

1. !
WEB.BR 2013
#FirefoxOS
!

2. Fábio
Magnoni
@FabioMagnoni
#FirefoxOS

3. Construindo Apps

4. Open Web Apps

5. A Plataforma é a Web

6. Mobile Internet Users
Desktop

7. Plataformas

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. VERIFICADOR DE MANIFESTO
http://appmanifest.org/

10. Packaged vs. Hosted Apps

11. WebAPIs

12. Segurança

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. Permissões
https://developer.mozilla.org/en-US/Apps/Developing/App_permissions

15. "permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

16. WEB APIs

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. API STATUS DA
BATERIA

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. NOTIFICAÇÃO

21. var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);

22. API ORIENTAÇÃO
DE TELA

23. // Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/

24. VIBRATION API

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. VISIBILIDADE DA
PÁGINA

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

28. NETWORK INFO
API

29. var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;

30. PROXIMIDADE

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. AMBIENT LIGHT
EVENT

33. window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
console.log(event.value);
});

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. WEB APIS (APPS PRIVILEGIADAS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

36. DEVICE STORAGE

37. var deviceStorage = navigator.getDeviceStorage("videos");

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. 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. API DE CONTATOS

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. Apps Certificadas
=
DO SO

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. WEB ACTIVITIES

46. 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!");
};

47. {
"activities": {
"share": {
"filters": {
"type": ["image/png", "image/gif"]
}
"href": "sharing.html",
"disposition": "window"
}
}
}

48. var register = navigator.mozRegisterActivityHandler({
name: "view",
disposition: "inline",
filters: {
type: "image/png"
}
});
register.onerror = function () {
console.log("Failed to register activity");
}

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

51. 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
};

52. APIs Futuras

53. 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

54. https://marketplace.firefox.com/

55. o/ Docs e Ferramentas o/

56. FIREFOX OS
BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App

57. https://addons.mozilla.org/firefox/addon/firefox-ossimulator/

58. http://buildingfirefoxos.com/

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

60. Componentes
Appbar
!
Calendar
!
Deck
!
Flipbox
!
Layout
!
Slideshow
!
Slider
!
Tabbar
!
Toggle
!
Tooltip

61. Recursos

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

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

64. Mozilla Developer Blog
https://hacks.mozilla.org/category/firefox-os/

65. Precisa de ajuda?

67. https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/
#openwebapps

69. Fábio Magnoni
fabio@mozilla.com
@FabioMagnoni
@mozhacks