Front In Fortaleza - WebAPIs
•
0 likes•311 views
This document discusses Firefox OS and web development for mobile devices. It highlights that the web is becoming the dominant mobile platform, and Firefox OS allows developers to build apps using HTML5, CSS3 and JavaScript. It describes the Gecko, Gaia and Gonk layers that make up Firefox OS and provides examples of various web APIs available to Firefox OS apps, including battery status, notifications, screen orientation, vibration and more. It also discusses app security, packaging and installation on Firefox OS devices.
More Related Content
Similar to Front In Fortaleza - WebAPIs
Similar to Front In Fortaleza - WebAPIs (20)
Recently uploaded
Recently uploaded (11)
Front In Fortaleza - WebAPIs
- 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" }
- 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
- 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)
- 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 );
- 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;
- 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); });
- 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 };
- 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+)
- 80. o/ Documentos e Ferramentas o/ developer.mozilla.org
- 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