View
139
Download
2
Category
Preview:
DESCRIPTION
Palestra sobre Open Web APIs + Firefox OS + Cordova
Citation preview
!
#FirefoxOS
Front In Fortaleza !
Fábio Magnoni
@FabioMagnoni
#FirefoxOS
Meidin Camelô…
38 bilhões de dispositivos !conectamos !
em 2020
ABI Research - 2013-05-09 - http://j.mp/38billion!
Você deveria começar com a web…
Mobile Internet Users Desktop
Plataformas !
A Web está ganhando!!!
A Web é a Plataforma
Vamos começar com o que você merece!
Feito com a Web
Usando HTML5, CSS3 e JavaScript!Com uma série de APIs!para desenvolver apps.!
É open source
GONK
Infrastructure Layer (Gonk)
RILd
AccelGPSCamera
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
GECKO
Open Web Platform Interface
Contacts
Sensors GeoLocation
Battery Vibration
Camera Media
Storage WebRTC
Alarms System
Messages
System XHR
NFC Bluetooth
WebTelephony WebSMS/MMSSettings
Gecko Engine
Security
Web APIs
Open WebApps APIs
Network Connections
/ UICC
mozPay /Trusted
UI
WebActivities
HTML5 APIs
GAIA
JS Libraries For Developers
Core - Certified
Apps System
AppUtility
Libraries Building Blocks
GaiaHosted Apps
Trusted Packed Apps
Application Layer HTML5 / JS / CSS
{ "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" }
Empacotadas vs. Hospedadas
Segurança
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
Permissões
https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
WEB APIs
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)
API STATUS DA BATERIA
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); }
NOTIFICAÇÃO
var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
API ORIENTAÇÃO DE TELA
// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
API VIRAÇÃO
// 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);
API INFO DE REDE
var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
API DE PROXIMIDADE
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); });
API EVENTOS ILUMINAÇÃO
window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux console.log(event.value); });
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); });
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
WEB APIS (PRIVILEGIADAS)
DEVICE STORAGE
var deviceStorage = navigator.getDeviceStorage("videos");
// "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]);
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; } };
API DE CONTATO
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" } } }); } }
Apps Certificadas = Apps SO
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
WEB ACTIVITIES
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!"); };
{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }
var register = navigator.mozRegisterActivityHandler({ name: "view", disposition: "inline", filters: { type: "image/png" } }); register.onerror = function () { console.log("Failed to register activity"); }
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 });
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};
Cordova & Phonegap
Implementação das APIs
• Câmera • Contatos • Dispositivo • Device-motion • Geolocation • Orientação • Vibração
Se preparando
$ sudo npm install -g cordova$ cordova create hello com.example.hello HelloWorld$ cd hello$ cordova platform add firefoxos$ cordova prepare firefoxos
API de Camera
$ cordova plugin add org.apache.cordova.camera!!//Cordova codenavigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1});!
Firefox OS App Manager + Simulador (1.2+)
Firefox Developer Tools
FIREFOX OS BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
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
ComponentesAppbar !Calendar !Deck !Flipbox !Layout !Slideshow !Slider !Tabbar !Toggle !Tooltip
https://lists.mozilla.org/listinfo/dev-webapps
irc://irc.mozilla.org/ #openwebapps
Recommended