Palestra sobre WebAPIs no evento Alagoas Dev Day

1. !
#FirefoxOS
Alagoas Dev Day
!

2. Fábio
Magnoni
@FabioMagnoni
#FirefoxOS

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

12. Meidin Camelô…

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

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

18. Mobile Internet Users Desktop

19. Plataformas
!

20. A Web está ganhando!!!

21. A Web é a Plataforma

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

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

26. É open source

28. GONK

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

30. GECKO

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

32. GAIA

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

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

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

36. Empacotadas vs. Hospedadas

37. Segurança

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

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

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

42. WEB APIs

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

44. API STATUS DA
BATERIA

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

46. NOTIFICAÇÃO

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

48. API ORIENTAÇÃO
DE TELA

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

50. API VIRAÇÃO

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

52. API INFO DE REDE

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

54. API DE
PROXIMIDADE

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

56. API EVENTOS
ILUMINAÇÃO

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

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

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

60. DEVICE STORAGE

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

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

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

64. API DE CONTATO

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

66. Apps Certificadas = Apps SO

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

68. WEB ACTIVITIES

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

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

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

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

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

75. Cordova & Phonegap

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

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

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

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

80. Firefox Developer Tools

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

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

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

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

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

87. http://buildingfirefoxos.com/

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

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

90. https://marketplace.firefox.com/

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

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

98. Fábio Magnoni
@FabioMagnoni
@mozhacks