Palestra sobre Open Web APIs + Firefox OS + Cordova

1. !
#FirefoxOS
Front In Fortaleza
!

2. Fábio
Magnoni
@FabioMagnoni
#FirefoxOS

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

12. Meidin Camelô…

13. 38 bilhões de dispositivos !
conectamos !
em 2020
ABI Research - 2013-05-09 - http://j.mp/38billion!

14. Você deveria começar com a web…

17. Mobile Internet Users Desktop

18. Plataformas
!

19. A Web está ganhando!!!

20. A Web é a Plataforma

21. Vamos começar com o
que você merece!

23. Feito com a Web
Usando HTML5, CSS3 e JavaScript!
Com uma série de APIs!
para desenvolver apps.!

25. É open source

27. GONK

28. Infrastructure Layer (Gonk)
RILd
Accel
GPS
Camera
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

29. GECKO

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

31. GAIA

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

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

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

35. Empacotadas vs. Hospedadas

36. Segurança

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

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

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

41. WEB APIs

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

43. API STATUS DA
BATERIA

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

45. NOTIFICAÇÃO

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

47. API ORIENTAÇÃO
DE TELA

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

49. API VIRAÇÃO

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

51. API INFO DE REDE

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

53. API DE
PROXIMIDADE

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

55. API EVENTOS
ILUMINAÇÃO

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

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

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

59. DEVICE STORAGE

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

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

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

63. API DE CONTATO

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

65. Apps Certificadas = Apps SO

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

67. WEB ACTIVITIES

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

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

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

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

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

74. Cordova & Phonegap

75. Implementação das APIs
• Câmera
• Contatos
• Dispositivo
• Device-motion
• Geolocation
• Orientação
• Vibração

76. Se preparando
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

77. API de Camera
$ cordova plugin add org.apache.cordova.camera
!
!
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});
!

78. Firefox OS App Manager + Simulador (1.2+)

79. Firefox Developer Tools

80. o/ Documentos e Ferramentas o/
developer.mozilla.org

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

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

83. https://hacks.mozilla.org
Mozilla Developer Blog

85. Prototipe com JSFiddle
• Insira /webapp.manifest
para instalar o app no
simulador do Firefox OS
!
• Insira /fxos.html para ter
uma página de instalação
como um app Firefox OS
hospedado

86. http://buildingfirefoxos.com/

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

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

89. https://marketplace.firefox.com/

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

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

97. Fábio Magnoni
@FabioMagnoni
@mozhacks