Download - GDG DevFest Lighting Talks México
![Page 1: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/1.jpg)
Google Developer GroupsLATAMGDG organizers and experts
Argentine, Peru y Mexico, Uruguay
![Page 2: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/2.jpg)
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 Cloud Endpoints Gabriel Kouyoumdijan (Uruguay)
![Page 3: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/3.jpg)
Conociendo el API Maps JavascriptJuan José RodríguezPerú
![Page 4: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/4.jpg)
¿Cuál es la misión de Google?
![Page 5: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/5.jpg)
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…
![Page 6: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/6.jpg)
Google Maps
![Page 7: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/7.jpg)
API MAPS V3
Versión basado en JS API
● Rendimiento optimizado.● Diseñado para móviles.● Estructura MVC.
![Page 8: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/8.jpg)
La nueva era
![Page 9: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/9.jpg)
Google Maps para móviles
![Page 10: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/10.jpg)
Google Maps para móviles
![Page 11: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/11.jpg)
API MAPS V3
Desarrollo para móviles
Nativo VS Web
![Page 12: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/12.jpg)
Nativo
Desarrollador Usuario
+1 +1
Aplicaciones muy potentes con uso del hardware del dispositivo.
Uso del hardware del dispositivo.
-1 -1
Más costoso de desarrollo/mantenimiento Actualizaciones manuales
Actualizaciones se limitan a las versiones
API MAPS V3
![Page 13: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/13.jpg)
Web
Desarrollador Usuario
+1 +1
Un desarrollo y podría ser compatible con la mayoria de dispositivos mediante navegadores.
Actualizaciones automáticas
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
API MAPS V3
![Page 14: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/14.jpg)
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 Maps JavaScript API tanto para escritorio y web móvil.
Adrian Graham
+ =
![Page 15: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/15.jpg)
API MAPS V3
Android
Iphone
API Maps
Desarrollador
Esquema general
URL
WebView
UIWebView
![Page 16: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/16.jpg)
API MAPS V3
Demo
1. Crear el mapa con JavaScript2.Crear el WebView - Android3.Crear el UIWebView en Iphone
![Page 17: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/17.jpg)
API MAPS V3
Diseñ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
![Page 18: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/18.jpg)
API MAPS V3
¿Qué camino tomar?
![Page 19: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/19.jpg)
API MAPS V3
Proyecto USMP Mobile
●Ampliar los canales de servicios para alumnos y docentes.
●Aprovechar todo el potencial de los dispositivos móviles.
●Mejorar la experiencia de nuestros usuarios.
![Page 20: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/20.jpg)
API MAPS V3Proyecto USMP Mobile
![Page 21: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/21.jpg)
API MAPS V3
Proyecto USMP Mobile
●Geolocalización de facultades
LatitudLongitud
CMSWebView
![Page 22: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/22.jpg)
API MAPS V3Implementado
En procesoIPHONE
WEB
CMS
![Page 23: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/23.jpg)
API MAPS V3
Proyecto USMP Mobile
“Reutilizamos el desarrollo y lo hacemos compatible para diversas plataformas en base a nuestra
necesidad”
![Page 24: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/24.jpg)
HTML 5Pablo MoyanoArgentina
![Page 25: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/25.jpg)
![Page 26: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/26.jpg)
![Page 27: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/27.jpg)
![Page 28: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/28.jpg)
![Page 29: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/29.jpg)
Domotica Móvil Federico CastoldiArgentina
![Page 30: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/30.jpg)
![Page 31: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/31.jpg)
![Page 32: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/32.jpg)
![Page 33: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/33.jpg)
![Page 34: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/34.jpg)
![Page 35: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/35.jpg)
![Page 36: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/36.jpg)
![Page 37: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/37.jpg)
![Page 38: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/38.jpg)
![Page 39: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/39.jpg)
![Page 40: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/40.jpg)
![Page 41: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/41.jpg)
![Page 42: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/42.jpg)
![Page 43: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/43.jpg)
![Page 44: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/44.jpg)
![Page 45: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/45.jpg)
![Page 46: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/46.jpg)
![Page 47: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/47.jpg)
![Page 48: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/48.jpg)
![Page 49: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/49.jpg)
![Page 50: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/50.jpg)
![Page 51: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/51.jpg)
![Page 52: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/52.jpg)
TítuloEnrique DiazMéxico
![Page 53: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/53.jpg)
● 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
Presentation Bullet Slide Layout
![Page 54: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/54.jpg)
LocalStorage en HTML5Cristian RinaldiArgentina
![Page 55: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/55.jpg)
Demo
Presentación Web
![Page 56: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/56.jpg)
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
![Page 57: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/57.jpg)
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);
![Page 58: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/58.jpg)
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'; }}
![Page 59: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/59.jpg)
File API - FileReader
FileReader.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 datadata:[<MIME-type>][;charset=<encoding>][;base64],<data>
FileReader.readAsArrayBuffer(Blob|File) La propiedad result contendra el contenido del Blob o File como un ArrayBuffer
![Page 60: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/60.jpg)
FileSystem API (Asynchronous API) - Directory and System
El API de File System, simula un file system local que las aplicaciones web pueden navegar e interactuar. Utilizando esta podrá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 API agrega funcionalidades particulares
LocalFileSystem Tiene dos métodos globales para el acceso al FileSystem: requestFileSystem() y resolveLocalFileSystemURL()
FileSystem Representa el FileSystem
Entry Representa una entrada del FileSystem
DirectoryEntry La propiedad result contendra el contenido del Blob o File como un ArrayBuffer
DirectoryReader Por medio de éste podremos listar los archivos y directorios de un directorio
FileError Este objeto es el que contedrá el error en el caso que exista uno en el procesamiento de los método asincrónicos
![Page 61: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/61.jpg)
void getMetada (in MetadataCallback successCallback, in optional ErrorCallback errorCallback);
void moveTo (in DirectoryEntry parent, optional DOMString newName, in optional EntryCallback successCallback, in optional ErrorCallback errorCallback);
void copyTo (in DirectoryEntry parent, in optional DOMString newName, in optional EntryCallback successCallback, in optional ErrorCallback 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);
FileSystem API (Asynchronous API) - Entry Métodos
![Page 62: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/62.jpg)
window.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);
FileSystem API (Asynchronous API) - Apertura FS
![Page 63: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/63.jpg)
function onFs(fs){ fs.root.getDirectory( 'Documents', {create:true}, function(directoryEntry){ //directoryEntry.isFile === false //directoryEntry.isDirectory === true //directoryEntry.name === 'Documents' //directoryEntry.fullPath === '/Documents' }, errorHandler); }
FileSystem API (Asynchronous API) - Creando Directorios
![Page 64: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/64.jpg)
function 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);}
FileSystem API (Asynchronous API) - Creando Archivos
![Page 65: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/65.jpg)
<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);
});}
FileSystem API (Asynchronous API) - Importando directorios
![Page 66: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/66.jpg)
function 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); } }}
FileSystem API (Asynchronous API) - Drag and Drop Directorios
![Page 67: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/67.jpg)
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);...
![Page 68: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/68.jpg)
Google Cloud StorageyGoogle Prediction APIMatias MolinasArgentina
![Page 69: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/69.jpg)
● Es un servicio REST
● En la infraestructura de Google
● Para almacenar datos ilimitados
Qué es Google Cloud Storage?
![Page 70: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/70.jpg)
● Puede guardar objetos de hasta 5T
● Se organizan en buckets
● El usuario les asigna una key unica
Qué es Google Cloud Storage?
![Page 71: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/71.jpg)
● Interoperabilidad: con Amazon S3 y Eucalyptus
● Consistencia: uploads atomicos
● Control de Acceso: access control list (ACLs)
Google Cloud Storage
![Page 72: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/72.jpg)
● Herramientas:
● Google Storage Manager (un explorer.. )https://storage.cloud.google.com
● gsutil (linea de comandos)http://code.google.com/p/gsutil/
Google Cloud Storage
![Page 73: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/73.jpg)
● Como activarlo?
● Crear un proyecto en la consola de APIs de Googlehttps://code.google.com/apis/console/
● Activar el servicio en ese proyecto
Google Cloud Storage
![Page 74: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/74.jpg)
● Lo podemos utilizar desde:
● Las aplicaciones de Google
● Mensajes XML o JSON
● Desde APIs que encapsulan la mensajeria
Google Cloud Storage
![Page 75: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/75.jpg)
● Casos de éxito:
● Ubisoft, los utiliza para guardar datos de niveles de juegos de Chrome
Google Cloud Storage
![Page 76: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/76.jpg)
Google Cloud Storage
![Page 77: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/77.jpg)
Google Cloud Storage - Ejemplo
![Page 78: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/78.jpg)
● Otras APIs que trabajan con Cloud Storage:
● Google Prediction API
● BigQuery
Google Cloud Storage
![Page 79: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/79.jpg)
● Qué es Google Prediction API?
● Es un servicio en la nube de "Aprendizaje automático"
Google Prediction API
![Page 80: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/80.jpg)
● Para qué sirve?
● Análisis de sentimientos del cliente
● Detección de spam
● Ruteo de mensajes inteligente
● Clasificacion de documentos y correos electrónicos
Google Prediction API
![Page 81: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/81.jpg)
● 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
Google Prediction API
![Page 82: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/82.jpg)
● Para qué sirve?
● Diagnostico médico
● Identificación de actividad sospechosa
● Mucho más ...
Google Prediction API
![Page 83: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/83.jpg)
● 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.
Google Prediction API
![Page 84: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/84.jpg)
● Que nos simplifica Prediction API?
● Selecciona el algoritmo más adecuado en forma automatica
● Escala
● Simplemente consumimos un servicio REST
Google Prediction API
![Page 85: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/85.jpg)
● 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
Google Prediction API
![Page 86: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/86.jpg)
● 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
Google Prediction API
![Page 87: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/87.jpg)
● 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
Google Prediction API
![Page 88: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/88.jpg)
● Pero, que es una predicción??
● Dado un item, predecir un valor numerico
● Dado un item, predecir una categoría
Google Prediction API
![Page 89: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/89.jpg)
● Ejemplo, valores numéricos:
● Set de datos: Temperatura, Dia del año, Ciudad, Clima
● Podemos predecir la temperatura (numérico)
● (Modelo de regresión)
Google Prediction API
![Page 90: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/90.jpg)
● Ejemplo, categorías:
● Set de datos: Tipo de Email (Spam/Normal), Motivo
● Podemos predecir si es Spam (categoría)
● (Modelo de categorización)
Google Prediction API
![Page 91: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/91.jpg)
● Entrenamiento:
● El set de datos de entrenamiento lo debemos subir a Google Cloud Storage
● Formato: Un archivo CSV (datos separados por coma)
Google Prediction API
![Page 92: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/92.jpg)
● Entrenamiento:
● Podemos utilizar el API desde una librería
● Podemos utilizarla desde el Google APIs Explorer
Google Prediction API
![Page 93: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/93.jpg)
● Entrenamiento via Google APIs Explorer:
● invocamos el método trainedmodels.insert()
● como parámetro pasamos la ruta a nuestro archivo en el cloud storage
Google Prediction API
![Page 94: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/94.jpg)
● Entrenamiento via Google APIs Explorer:
● invocamos el método trainedmodels.insert()
● como parámetro pasamos la ruta a nuestro archivo en el cloud storage
Google Prediction API
![Page 95: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/95.jpg)
● 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
Google Prediction API
![Page 96: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/96.jpg)
Preguntas?
Google Prediction API
![Page 97: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/97.jpg)
Construyendo REST APIs sobre Google App EngineGabriel KouyoumdijanUruguay
![Page 98: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/98.jpg)
Objetivos
Beneficios de usar AppEngine como backend
Introducción a Google Cloud Endpoints
![Page 99: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/99.jpg)
Escenario
![Page 100: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/100.jpg)
Arquitectura
Web AppDB
iOS App
Android App
Backend Clients
API
Business logic
Otros servicios
JavaScript API wrapper
Java API wrapper
Obj. CAPI wrapper
Seguridad?Autenticación y autorización
![Page 101: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/101.jpg)
Antes de salir a producción...
■ Estimar la carga
■ Comprar y configurar servidores
■ Configurar balanceador de cargas
![Page 102: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/102.jpg)
Luego...
■ Tirar a la basura las estimaciones previas
■ Comprar y configurar más servidores
■ Reconfigurar balanceador de cargas
![Page 103: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/103.jpg)
Además
■ Mantener el middleware
■ Ajustar balanceador de carga
Poco tiempo para:
■ Agregar nuevas features
■ Mejorar UI
■ Analizar estrategias de monetización
![Page 104: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/104.jpg)
Google App Engine
■ Escala automatico
■ Facil comenzar a usarlo
■ Facil de mantener
■ Simple configuración y deployment
■ Pago por lo que uso
![Page 105: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/105.jpg)
Usando App Engine como backend
Web AppDatastore
iOS App
Android App
Clients
API
Business logic
AppEngine Services
JavaScript API wrapper
Java API wrapper
Obj. CAPI wrapper
![Page 106: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/106.jpg)
Google Cloud Endpoints
![Page 107: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/107.jpg)
Google Cloud Endpoints
Necesitamos:
■ SDK App Engine http://goo.gl/BVr5g
■ Endpoint trusted tester program http://goo.gl/VJmpP
■ Google Plugin for Eclipse http://goo.gl/CL1HE
Luego:1. Escribir nuestro código
2. Anotar métodos
3. Generar client libraries
![Page 108: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/108.jpg)
Google Cloud Endpoints
Anotaciones:
■ @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
![Page 109: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/109.jpg)
Google Cloud Endpoints
Ejemplo:
@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; }}
![Page 110: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/110.jpg)
Muchas Gracias!
+Gabriel Kouyoumdjian
@gabrielkou
gkcodelog.blogspot.com
+GDG Uruguay
![Page 111: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/111.jpg)
● 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
Presentation Bullet Slide La
![Page 112: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/112.jpg)
Liquid GalaxyJosue Basurto y Ricardo RosalesTijuana, México
![Page 113: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/113.jpg)
¿Qué es?
![Page 114: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/114.jpg)
; 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
Lo importante (Google Earth Home Folder/drivers.ini)
![Page 115: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/115.jpg)
Veamos
![Page 116: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/116.jpg)
Veamos
![Page 117: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/117.jpg)
<Thank You!>developers.google.com
{ solsona | nickbortolotti } @google.com@ { solsona | nickbortolotti }
![Page 118: GDG DevFest Lighting Talks México](https://reader035.vdocuments.us/reader035/viewer/2022081720/5496d3b7b479593d4d8b5050/html5/thumbnails/118.jpg)