Successfully reported this slideshow.

Front In Fortaleza - WebAPIs

268 views

Published on

Palestra sobre Open Web APIs + Firefox OS + Cordova

Published in: Internet, Technology
  • Be the first to comment

  • Be the first to like this

Front In Fortaleza - WebAPIs

  1. 1. ! #FirefoxOS Front In Fortaleza !
  2. 2. Fábio Magnoni @FabioMagnoni #FirefoxOS
  3. 3. http://www.unrealengine.com/html5/
  4. 4. Meidin Camelô…
  5. 5. 38 bilhões de dispositivos ! conectamos ! em 2020 ABI Research - 2013-05-09 - http://j.mp/38billion!
  6. 6. Você deveria começar com a web…
  7. 7. Mobile Internet Users Desktop
  8. 8. Plataformas !
  9. 9. A Web está ganhando!!!
  10. 10. A Web é a Plataforma
  11. 11. Vamos começar com o que você merece!
  12. 12. Feito com a Web Usando HTML5, CSS3 e JavaScript! Com uma série de APIs! para desenvolver apps.!
  13. 13. É open source
  14. 14. GONK
  15. 15. 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
  16. 16. GECKO
  17. 17. 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
  18. 18. GAIA
  19. 19. JS Libraries
 For Developers Core - Certified Apps
 System App
 Utility Libraries Building Blocks
 Gaia Hosted Apps
 Trusted Packed Apps
 Application Layer HTML5 / JS / CSS
  20. 20. {
 "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"
 }

  21. 21. Verificador de Manifesto http://appmanifest.org/
  22. 22. Empacotadas vs. Hospedadas
  23. 23. Segurança
  24. 24. 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
  25. 25. Permissões https://developer.mozilla.org/en-US/Apps/Developing/App_permissions
  26. 26. "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  27. 27. WEB APIs
  28. 28. 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)
  29. 29. API STATUS DA BATERIA
  30. 30. 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); }
  31. 31. NOTIFICAÇÃO
  32. 32. var notification = navigator.mozNotification;
 notification.createNotification(
 "See this", 
 "This is a notification", 
 iconURL
 );
  33. 33. API ORIENTAÇÃO DE TELA
  34. 34. // Portrait mode:
 screen.mozLockOrientation("portrait");
 
 /* 
 Possible values:
 "landscape" 
 "portrait"
 "landscape-primary"
 "landscape-secondary"
 "portrait-primary"
 "portrait-secondary"
 */
  35. 35. API VIRAÇÃO
  36. 36. // 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);
  37. 37. API INFO DE REDE
  38. 38. var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  39. 39. API DE PROXIMIDADE
  40. 40. 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);
 });
  41. 41. API EVENTOS ILUMINAÇÃO
  42. 42. window.addEventListener("devicelight", function (event) {
 // The level of the ambient light in lux
 console.log(event.value);
 });
  43. 43. 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);
 });
  44. 44. Device Storage API Browser API TCP Socket API Contacts API systemXHR WEB APIS (PRIVILEGIADAS)
  45. 45. DEVICE STORAGE
  46. 46. var deviceStorage = navigator.getDeviceStorage("videos");
  47. 47. // "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]);
  48. 48. 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;
 }
 };
  49. 49. API DE CONTATO
  50. 50. 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"
 }
 }
 });
 }
 }
  51. 51. Apps Certificadas = Apps SO
  52. 52. 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
  53. 53. WEB ACTIVITIES
  54. 54. 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!");
 };
  55. 55. {
 "activities": {
 "share": {
 "filters": {
 "type": ["image/png", "image/gif"]
 }
 "href": "sharing.html",
 "disposition": "window"
 }
 }
 }
  56. 56. var register = navigator.mozRegisterActivityHandler({
 name: "view", 
 disposition: "inline", 
 filters: {
 type: "image/png"
 }
 });
 
 register.onerror = function () {
 console.log("Failed to register activity");
 }
  57. 57. 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
 });
  58. 58. 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 };
  59. 59. Cordova & Phonegap
  60. 60. Implementação das APIs • Câmera • Contatos • Dispositivo • Device-motion • Geolocation • Orientação • Vibração
  61. 61. Se preparando $ sudo npm install -g cordova $ cordova create hello com.example.hello HelloWorld $ cd hello $ cordova platform add firefoxos $ cordova prepare firefoxos
  62. 62. 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 }); !
  63. 63. Firefox OS App Manager + Simulador (1.2+)
  64. 64. Firefox Developer Tools
  65. 65. o/ Documentos e Ferramentas o/ developer.mozilla.org
  66. 66. https://developer.mozilla.org/en-US/docs/WebAPI
  67. 67. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  68. 68. https://hacks.mozilla.org Mozilla Developer Blog
  69. 69. 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
  70. 70. http://buildingfirefoxos.com/
  71. 71. http://mozilla.github.io/brick/docs.html
  72. 72. Componentes Appbar ! Calendar ! Deck ! Flipbox ! Layout ! Slideshow ! Slider ! Tabbar ! Toggle ! Tooltip
  73. 73. https://marketplace.firefox.com/
  74. 74. https://appmaker.mozillalabs.com/ App Maker
  75. 75. https://lists.mozilla.org/listinfo/dev-webapps irc://irc.mozilla.org/ #openwebapps
  76. 76. Fábio Magnoni @FabioMagnoni @mozhacks

×