GDG DevFest Lighting Talks México

637 views
543 views

Published on

Presentación de organizadores y expertos regionales - Latin America GDG Summit 2012 - México

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
637
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GDG DevFest Lighting Talks México

  1. 1. Google Developer GroupsLATAMGDG organizers and expertsArgentine, Peru y Mexico, Uruguay
  2. 2. Conociendo el API Google Maps JavaScript Juan José Rodríguez (Peru)Intro to HTML5 Pablo Moyano (Arg)Aplicación domótica Federico Castoldi (Arg)How Android APIs Evolved: ViewFlipper vs. ViewPager Enrique Díaz (Mex) Local Storage en HTML5 (FileSystem API - IndexedDB) Cristian Rinaldi (Arg) Google Cloud Storage y Google Prediction API Matias Molinas (Arg) Construyendo REST APIs sobre App Engine usando Google Gabriel Kouyoumdijan (Uruguay)Cloud Endpoints
  3. 3. Conociendo el API Maps JavascriptJuan José RodríguezPerú
  4. 4. ¿Cuál es la misión de Google?
  5. 5. Google Maps ●Mapas e imágenes ●Vistas en panorámicas y en 3D. ●Vistas panorámicas del mundo. ●Vista y exploración en tiempo real de calles. ●Vistas de los lugares específicos. ●Obtención de ruta. ●Ruta basado en medio de transporte. ●Obtención de la distancias. ●Y mucho más…
  6. 6. Google Maps
  7. 7. API MAPS V3Versión basado en JS API● Rendimiento optimizado.● Diseñado para móviles.● Estructura MVC.
  8. 8. La nueva era
  9. 9. Google Maps para móviles
  10. 10. Google Maps para móviles
  11. 11. API MAPS V3Desarrollo para móviles Nativo VS Web
  12. 12. API MAPS V3Nativo Desarrollador Usuario +1 +1 Aplicaciones muy potentes con uso del hardware Uso del hardware del dispositivo. del dispositivo. -1 -1 Más costoso de desarrollo/mantenimiento Actualizaciones manuales Actualizaciones se limitan a las versiones
  13. 13. API MAPS V3Web Desarrollador Usuario +1 +1 Un desarrollo y podría ser compatible con la Actualizaciones automáticas mayoria de dispositivos mediante navegadores. Resulta menos costoso de desarrollar y mantener. Facil uso Ejecución de funciones tales como hacer clic, ampliar, arrastrar, obtener ubicación actual, buscar un lugar, ejecutar check-in, entre -1 -1 Limitaciones con uso de hardware Limitaciones con uso de hardware
  14. 14. Adrian Graham + = API Google Maps + HTML5 = Una nueva era de aplicaciones móviles+Almacenamiento local, almacenamiento en caché de aplicación, y la geolocalización de Google MapsJavaScript API tanto para escritorio y web móvil.
  15. 15. API MAPS V3 WebView Android API Maps URL Iphone Desarrollador UIWebViewEsquema general
  16. 16. API MAPS V3Demo1.Crear el mapa con JavaScript2.Crear el WebView - Android3.Crear el UIWebView en Iphone
  17. 17. API MAPS V3Diseño basado en Web con compatibilidad para móviles ●Propiedad navidator.userAgent function detectBrowser() { var useragent = navigador.userAgent; var mapdiv = document.getElementById(“map_canvas”); if (useragent.indexOf(‘iphone’ != -1 || useragent.indexOf(‘Android’) !=-1) { mapdiv.style.width = ‘100%’; mapdiv.styleheight = ‘100%’; }else{ mapdiv.style.width = ‘600px’; mapdiv.styleheight = ‘800px’; } }// Fin de método detectBrowser
  18. 18. API MAPS V3 ¿Qué camino tomar?
  19. 19. API MAPS V3Proyecto USMP Mobile●Ampliar los canales de servicios para alumnos ydocentes.Aprovechar todo el potencial de los dispositivos●móviles.●Mejorar la experiencia de nuestros usuarios.
  20. 20. API MAPS V3Proyecto USMP Mobile
  21. 21. API MAPS V3Proyecto USMP MobileGeolocalización de facultades● WebView CMS Latitud Longitud
  22. 22. API MAPS V3 Implementado CMS En proceso IPHONE WEB
  23. 23. API MAPS V3Proyecto USMP Mobile “Reutilizamos el desarrollo y lo hacemos compatible para diversas plataformas en base a nuestra necesidad”
  24. 24. HTML 5Pablo MoyanoArgentina
  25. 25. Domotica MóvilFederico CastoldiArgentina
  26. 26. TítuloEnrique DiazMéxico
  27. 27. Presentation Bullet Slide Layout● Titles are formatted as Open Sans with bold applied and font size is set at 30pts ● Vertical position for title is .3” ● Vertical position for bullet text is 1.54”● Title capitalization is title case● Subtitle capitalization is title case● Titles and subtitles should never have a period at the end
  28. 28. LocalStorage en HTML5Cristian RinaldiArgentina
  29. 29. DemoPresentación Web
  30. 30. File API File El objeto File provee información sobre el Archivo, este Objeto generalmente es obtenido desde el FileList, DataTransfer o creado con el FileSystem API FileList Este objeto es obtenido desde la propiedad files del elemento input Blob Este objeto representa información binaria inmutable y permite acceso a rangos de bytes dentro del Blob, pero en Blobs separados FileReader Provee métodos para la lectura de File y Blob Uri schene Se utilizan datos binarios como archivos, por lo que puden ser referenciados desde la app web. Por ejemplo: blob:550e8400-e29b-41d4-a716-446655440000#aboutABBA, puede ser utilizado en el atributo src del elemento img
  31. 31. File API - Recuperando Archivos<input type="file" id="files" name="files[]" multiple/>//Existe soporte de File APIif (window.File && window. FileReader && window. FileList && window. Blob) { // Success!!} else { alert(File API no esta soportada por el navegador );}function onChange(evt) { var files = evt.target.files; // Objeto FileList var output = []; for (var i = 0, f; f = files[i]; i++) { output.push( <li><strong> , escape(f.name), </strong> ( , f.type || n/a, ) - , f.size, bytes, last modified: , f.lastModifiedDate.toLocaleDateString(), </li>); } document.getElementById( list).innerHTML = <ul> + output.join( ) + </ul>; } document.getElementById( files).addEventListener( change, onChange, false);
  32. 32. File API - Drag & Drop<div id="drop_zone" >Drop files here </div><output id="list"></output>function onDrop(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // Objecto FileList var output = []; for (var i = 0, f; f = files[i]; i++) { //TODO f.name, f.size, f.lastModifiedDate, f.type } document.getElementById( list).innerHTML = <ul> + output.join( ) + </ul>; } function onDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = copy; }}
  33. 33. File API - FileReaderFileReader.readAsBinaryString(Blob|File) La propiedad result contendra la informacon del File o Blob como un String binario.FileReader.readAsText(Blob|File, opt_encoding) La propiedad result contendra la informacon del File o Blob como un string de texto, por defecto el string es codificado en UTF-8.FileReader.readAsDataURL(Blob|File) La propiedad result contendra el contenido del Blob o File codificado como una URL data data:[<MIME-type>][;charset=<encoding>][;base64],<data>FileReader.readAsArrayBuffer(Blob|File) La propiedad result contendra el contenido del Blob o File como un ArrayBuffer
  34. 34. FileSystem API (Asynchronous API) - Directory and SystemEl API de File System, simula un file system local que las aplicaciones web pueden navegar e interactuar. Utilizando estapodrán hacer aplicaciones que lean, escriban, creen archivos y directorios en el Sistema de Archivos virtual.Este API interactúa con otras APIs relacionadas, por ejemplo File Writer API que esta construida sobre File API, cada APIagrega funcionalidades particularesLocalFileSystem Tiene dos métodos globales para el acceso al FileSystem: requestFileSystem() y resolveLocalFileSystemURL()FileSystem Representa el FileSystemEntry Representa una entrada del FileSystemDirectoryEntry La propiedad result contendra el contenido del Blob o File como un ArrayBufferDirectoryReader Por medio de éste podremos listar los archivos y directorios de un directorioFileError Este objeto es el que contedrá el error en el caso que exista uno en el procesamiento de los método asincrónicos
  35. 35. FileSystem API (Asynchronous API) - Entry Métodosvoid getMetada (in MetadataCallback successCallback, in optional ErrorCallback errorCallback);void moveTo (in DirectoryEntry parent, optional DOMString newName, in optional EntryCallback successCallback, in optionalErrorCallback errorCallback);void copyTo (in DirectoryEntry parent, in optional DOMString newName, in optional EntryCallback successCallback, in optionalErrorCallback errorCallback);void toURL (in optional DOMString mimeType);void remove (in VoidCallback successCallback, in optional ErrorCallback errorCallback);void getParent (in EntryCallback successCallback, in optional ErrorCallback errorCallback);
  36. 36. FileSystem API (Asynchronous API) - Apertura FSwindow.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function( filesystem) { fs = filesystem; loadFs();}, errorHandler);window.webkitStorageInfo.requestQuota(PERSISTENT, 15 * 1024 * 1024, function(grantedBytes) { window.requestFileSystem(PERSISTENT, grantedBytes, function( filesystem) { fs = filesystem; actualDirectory = fs.root; loadFs(); }, errorHandler); }, errorHandler);
  37. 37. FileSystem API (Asynchronous API) - Creando Directoriosfunction onFs(fs){ fs.root.getDirectory( Documents , {create: true}, function(directoryEntry){ //directoryEntry.isFile === false //directoryEntry.isDirectory === true //directoryEntry.name === Documents //directoryEntry.fullPath === /Documents }, errorHandler); }
  38. 38. FileSystem API (Asynchronous API) - Creando Archivosfunction onInitFs(fs) { fs.root.getFile( log.txt, {create: true}, function(fileEntry) { // Crea un Objeto FileWriter fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { console.log( Write completed. ); }; fileWriter.onerror = function(e) { console.log( Write failed: + e.toString()); }; var blob = new Blob([ Creamos nuestro File!!!!!!! ], { type : text/plain }); fileWriter.write(blob); }, errorHandler); }, errorHandler);}
  39. 39. FileSystem API (Asynchronous API) - Importando directorios<input type="file" multiple webkitdirectory ="" mozdirectory ="" directory="">function onChange(e) { e.stopPropagation(); e.preventDefault(); var entries = e.target.webkitEntries; // Tenemos todas como Entradas (Entry). [].forEach.call(entries, function(entry) { // Copia la entrada al FS entry.copyTo(fs.root, null, function(copiedEntry) { //TODO }, onError); });}
  40. 40. FileSystem API (Asynchronous API) - Drag and DropDirectoriosfunction onDrop(e) { e.preventDefault(); e.stopPropagation(); var items = e.dataTransfer.items; for (var i = 0, item; item = items[i]; ++i) { var entry = item.webkitGetAsEntry(); // Si es un directorio copia la Entrada al FS if (entry.isDirectory) { entry.copyTo(fs.root, null, function(copiedEntry) { // TODO }, errorHandler); } }}
  41. 41. FileSystem URL// filesystem:http://<origin>/<temporary|persistent>/<resource.png...case image/jpeg : var img = document.createElement( img); img.src = fileEntry.toURL(); meta.appendChild(img); break;...window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL;...window.resolveLocalFileSystemURL(fileSystemPath + path, function(dirEntry) { var dirReader = dirEntry.createReader(); var dirs = []; dirReader.readEntries( function(dirs) { //TODO }, errorHandler); }, errorHandler);...
  42. 42. Google Cloud StorageyGoogle Prediction APIMatias MolinasArgentina
  43. 43. Qué es Google Cloud Storage?● Es un servicio REST● En la infraestructura de Google● Para almacenar datos ilimitados
  44. 44. Qué es Google Cloud Storage?● Puede guardar objetos de hasta 5T● Se organizan en buckets● El usuario les asigna una key unica
  45. 45. Google Cloud Storage● Interoperabilidad: con Amazon S3 y Eucalyptus● Consistencia: uploads atomicos● Control de Acceso: access control list (ACLs)
  46. 46. Google Cloud Storage● Herramientas:● Google Storage Manager (un explorer.. ) https://storage.cloud.google.com● gsutil (linea de comandos) http://code.google.com/p/gsutil/
  47. 47. Google Cloud Storage● Como activarlo?● Crear un proyecto en la consola de APIs de Google https://code.google.com/apis/console/● Activar el servicio en ese proyecto
  48. 48. Google Cloud Storage● Lo podemos utilizar desde:● Las aplicaciones de Google● Mensajes XML o JSON● Desde APIs que encapsulan la mensajeria
  49. 49. Google Cloud Storage● Casos de éxito:● Ubisoft, los utiliza para guardar datos de niveles de juegos de Chrome
  50. 50. Google Cloud Storage
  51. 51. Google Cloud Storage - Ejemplo
  52. 52. Google Cloud Storage● Otras APIs que trabajan con Cloud Storage:● Google Prediction API● BigQuery
  53. 53. Google Prediction API● Qué es Google Prediction API?● Es un servicio en la nube de "Aprendizaje automático"
  54. 54. Google Prediction API● Para qué sirve?● Análisis de sentimientos del cliente● Detección de spam● Ruteo de mensajes inteligente● Clasificacion de documentos y correos electrónicos
  55. 55. Google Prediction API● Para qué sirve?● Identificación de consumidores que pueden dejar de utilizar su servicio o producto● Recomendaciones● inducir al cliente a comprar productos más caros, actualizaciones u otros add- ons
  56. 56. Google Prediction API● Para qué sirve?● Diagnostico médico● Identificación de actividad sospechosa● Mucho más ...
  57. 57. Google Prediction API● Que es Machine Learning?● El Aprendizaje Automático es una rama de la Inteligencia Artificial cuyo objetivo es desarrollar técnicas que permitan a las computadoras aprender.
  58. 58. Google Prediction API● Que nos simplifica Prediction API?● Selecciona el algoritmo más adecuado en forma automatica● Escala● Simplemente consumimos un servicio REST
  59. 59. Google Prediction API● Como lo podemos utilizar?● Tenemos que crear un set de datos● Tiene que ser representativo!● Tiene que responder lo que esperamos que resuelva el servicio!● Es el paso más critico
  60. 60. Google Prediction API● Ejemplo:● "French", "«Eh! votre dépense», v● "Spanish", " Esto es una prueba● "English", "He took me for his h●● "Spanish", "YO, EL REY."●● "English", "Well, perhaps you ha
  61. 61. Google Prediction API● Lo dos más importantes :● La formulación correcta de la pregunta que va a responder el servicio● Contar con un set de datos que provee ejemplos suficientes para entrenar el servicio
  62. 62. Google Prediction API● Pero, que es una predicción??● Dado un item, predecir un valor numerico● Dado un item, predecir una categoría
  63. 63. Google Prediction API● Ejemplo, valores numéricos:● Set de datos: Temperatura, Dia del año, Ciudad, Clima● Podemos predecir la temperatura (numérico)● (Modelo de regresión)
  64. 64. Google Prediction API● Ejemplo, categorías:● Set de datos: Tipo de Email (Spam/Normal), Motivo● Podemos predecir si es Spam (categoría)● (Modelo de categorización)
  65. 65. Google Prediction API● Entrenamiento:● El set de datos de entrenamiento lo debemos subir a Google Cloud Storage● Formato: Un archivo CSV (datos separados por coma)
  66. 66. Google Prediction API● Entrenamiento:● Podemos utilizar el API desde una librería● Podemos utilizarla desde el Google APIs Explorer
  67. 67. Google Prediction API● Entrenamiento via Google APIs Explorer:● invocamos el método trainedmodels.insert()● como parámetro pasamos la ruta a nuestro archivo en el cloud storage
  68. 68. Google Prediction API● Entrenamiento via Google APIs Explorer:● invocamos el método trainedmodels.insert()● como parámetro pasamos la ruta a nuestro archivo en el cloud storage
  69. 69. Google Prediction API● El mismo Casos de Exito, Ford:● Se utiliza para optimizar el uso de combustible y energia en automóviles híbridos● El automóvil aprende de los trayectos que normalmente realiza el conductor la estrategia para el ahorro de energía
  70. 70. Google Prediction API Preguntas?
  71. 71. Construyendo REST APIs sobreGoogle App EngineGabriel KouyoumdijanUruguay
  72. 72. ObjetivosBeneficios de usar AppEngine como backendIntroducción a Google Cloud Endpoints
  73. 73. Escenario
  74. 74. ArquitecturaBackend Clients Seguridad? Autenticación y autorización JavaScript Web App DB API wrapper API Business Java Android App logic API wrapper Otros Obj. C iOS App servicios API wrapper
  75. 75. Antes de salir a producción...■ Estimar la carga■ Comprar y configurar servidores■ Configurar balanceador de cargas
  76. 76. Luego...■ Tirar a la basura las estimaciones previas■ Comprar y configurar más servidores■ Reconfigurar balanceador de cargas
  77. 77. Además■ Mantener el middleware■ Ajustar balanceador de cargaPoco tiempo para:■ Agregar nuevas features■ Mejorar UI■ Analizar estrategias de monetización
  78. 78. Google App Engine■ Escala automatico■ Facil comenzar a usarlo■ Facil de mantener■ Simple configuración y deployment■ Pago por lo que uso
  79. 79. Usando App Engine como backend Clients JavaScript Web App Datasto API wrapper re API Java Android App Business logic API wrapper AppEngine Obj. C iOS App Services API wrapper
  80. 80. Google Cloud Endpoints
  81. 81. Google Cloud EndpointsNecesitamos:■ SDK App Engine http://goo.gl/BVr5g■ Endpoint trusted tester program http://goo.gl/VJmpP■ Google Plugin for Eclipse http://goo.gl/CL1HELuego:1. Escribir nuestro código2. Anotar métodos3. Generar client libraries
  82. 82. Google Cloud EndpointsAnotaciones:■ @Api indica que la clase es una API■ @ApiMethod indica que el método es un método de la API■ @Named indica que un argumento es un parámetro en un request
  83. 83. Google Cloud EndpointsEjemplo:@Api (name = "tasklist")public class Task{ @ApiMethod (name = "task.get") public Task get(@Named("id") String id){ PersistenceManager pm = getPersistenceManager(); Task task = pm.getObjectById (Task.class, id); return task; }}
  84. 84. Muchas Gracias! +Gabriel Kouyoumdjian @gabrielkou gabriel.kb@gdgroups.org gkcodelog.blogspot.com+GDG Uruguay
  85. 85. Presentation Bullet Slide La● Titles are formatted as Open Sans with bold applied and font size is set at 30pts ● Vertical position for title is .3” ● Vertical position for bullet text is 1.54”● Title capitalization is title case● Subtitle capitalization is title case● Titles and subtitles should never have a period at the end
  86. 86. Liquid GalaxyJosue Basurto y Ricardo RosalesTijuana, México
  87. 87. ¿Qué es?
  88. 88. Lo importante (Google Earth Home Folder/drivers.ini); ViewSync settingsViewSync/send = trueViewSync/receive = false; If send == true, sets the IP where the datagrams are sent; Can be a broadcast address (e.g. 192.168.1.254 sometimes)ViewSync/hostname = SLAVE_IP_GOES_HEREViewSync/port = 21567; For video caves, we typically want the slave screens to look to the; left or right (yawOffset) of where the master is lookingViewSync/yawOffset = 0ViewSync/pitchOffset = 0.0ViewSync/rollOffset = 0.0ViewSync/horizFov = 36.5
  89. 89. Veamos
  90. 90. Veamos
  91. 91. <Thank You!>developers.google.com{ solsona | nickbortolotti } @google.com@ { solsona | nickbortolotti }

×