1. Front In! RECIFE
#FirefoxOS
!

2. Fábio
Magnoni
@FabioMagnoni
#FirefoxOS

6. http://www.unrealengine.com/html5/

8. GONK
GECKO
GAIA

9. GONK

10. Infrastructure Layer (Gonk)
Open Source Libraries
RILd
GPS
Input /
Touch
Audio
/
Video
Open
GLES
Accel
Power
Mgt
Bluetooth
LEDs
HW
Buttons
Vibrator
USB
Camera
Device’s Operationg System
Linux Kernel
OEM Drivers
OEM Modem
Firmware
OEM Libs

11. GECKO

12. Open Web Platform Interface
Web APIs
Contacts
Security
Camera
Media
Storage
WebRTC
Settings
WebTelephony
WebSMS/MMS
Sensors
GeoLocation
Battery
Vibration
Open Web
Apps APIs
NFC
Bluetooth
Network
Connections
/ UICC
Gecko Engine
System
XHR
mozPay /
Trusted
UI
Alarms
System
Messages
Web
Activities
HTML5
APIs

13. GAIA

14. Application Layer HTML5 / JS / CSS
Gaia
JS Libraries
For Developers
Core Certified
Apps
Hosted Apps
System
App
Utility
Libraries
Building
Blocks
Trusted Packed
Apps

15. Construindo Apps

16. Apps Web Aberta

17. A Web é a Plataforma

18. Mobile Internet Users
Desktop

19. Plataformas
!

20. A Web está ganhando!!!

21. {
"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"
}

22. Verificador de Manifesto
http://appmanifest.org/

23. Empacotadas vs. Hospedadas

24. Segurança

25. Apps
Conteúdo Web
Web Apps Privilegiadas
Conteúdos Web Padrão
Mais acesso, mais
responsabilidade
Web Apps Instaladas
Web App Certificada
Web App Normal
Apps Críticas ao
dispositivo

26. Permissões
https://developer.mozilla.org/en-US/Apps/Developing/App_permissions

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

29. WEB APIs

30. WEB APIS (PRA GALERA)
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

31. API STATUS DA
BATERIA

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

33. NOTIFICAÇÃO

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

35. API ORIENTAÇÃO
DE TELA

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

37. API VIRAÇÃO

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

39. API INFO DE REDE

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

41. PROXIMIDADE

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

43. API EVENTOS
ILUMINAÇÃO

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

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

46. WEB APIS (PRIVILEGIADAS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

47. DEVICE STORAGE

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

49. // "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]);

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

51. API DE CONTATO

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

53. Apps Certificadas = Apps SO

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

55. WEB ACTIVITIES

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

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

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

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

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

62. APIs Futuras

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

65. https://marketplace.firefox.com/

66. o/ Documentos e Ferramentas o/

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

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

69. http://buildingfirefoxos.com/

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

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

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

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

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

75. App Maker
https://appmaker.mozillalabs.com/

76. Pedindo Ajuda

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

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