GDG DevFest Lighting Talks México

Google Developer Groups
LATAM
GDG organizers and experts

Argentine, Peru y Mexico, Uruguay

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

Conociendo el API Maps Javascript
Juan José Rodríguez
Perú

¿Cuál es la misión de Google?

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…

API MAPS V3
Versión basado en JS API

● Rendimiento optimizado.
● Diseñado para móviles.
● Estructura MVC.

API MAPS V3
Desarrollo para móviles

Nativo VS Web

API MAPS V3
Nativo
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

API MAPS V3
Web

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

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 Maps
JavaScript API tanto para escritorio y web móvil.

API MAPS V3
WebView
Android
API Maps

URL

Iphone
Desarrollador
UIWebView

Esquema general

API MAPS V3

Demo
1.Crear el mapa con JavaScript
2.Crear el WebView - Android

3.Crear el UIWebView en Iphone

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

API MAPS V3

¿Qué camino tomar?

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.

API MAPS V3

API MAPS V3
Geolocalización de facultades
●

WebView CMS

Latitud
Longitud

API MAPS V3
Implementado

CMS En proceso
IPHONE

WEB

API MAPS V3

“Reutilizamos el desarrollo y lo hacemos compatible
para diversas plataformas en base a nuestra
necesidad”

Domotica Móvil
Federico Castoldi
Argentina

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

LocalStorage en HTML5
Cristian Rinaldi
Argentina

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

File API - Recuperando Archivos
<input type="file" id="files" name="files[]" multiple
/>

//Existe soporte de File API
if (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);

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';
}
}

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 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

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

FileSystem API (Asynchronous API) - Entry Métodos

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) - Apertura FS

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) - Creando Directorios

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 Archivos

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) - 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);

});
}

FileSystem API (Asynchronous API) - Drag and Drop
Directorios

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 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);
...

Google Cloud Storage
y
Google Prediction API
Matias Molinas
Argentina

Qué es Google Cloud Storage?

● Es un servicio REST

● En la infraestructura de Google

● Para almacenar datos ilimitados

Qué es Google Cloud Storage?

● Puede guardar objetos de hasta 5T

● Se organizan en buckets

● El usuario les asigna una key unica


● Interoperabilidad: con Amazon S3 y Eucalyptus

● Consistencia: uploads atomicos

● Control de Acceso: access control list (ACLs)


● Herramientas:

● Google Storage Manager (un explorer.. )
https://storage.cloud.google.com

● gsutil (linea de comandos)
http://code.google.com/p/gsutil/


● Como activarlo?

● Crear un proyecto en la consola de APIs de Google
https://code.google.com/apis/console/

● Activar el servicio en ese proyecto


● Lo podemos utilizar desde:

● Las aplicaciones de Google

● Mensajes XML o JSON

● Desde APIs que encapsulan la mensajeria


● Casos de éxito:

● Ubisoft, los utiliza para guardar datos de niveles de juegos de Chrome

Google Cloud Storage - Ejemplo


● Otras APIs que trabajan con Cloud Storage:

● Google Prediction API

● BigQuery


● Qué es Google Prediction API?

● Es un servicio en la nube de "Aprendizaje automático"


● Para qué sirve?

● Análisis de sentimientos del cliente

● Detección de spam

● Ruteo de mensajes inteligente

● Clasificacion de documentos y correos electrónicos



● 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



● Diagnostico médico

● Identificación de actividad sospechosa

● Mucho más ...


● 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.


● Que nos simplifica Prediction API?

● Selecciona el algoritmo más adecuado en forma automatica

● Escala

● Simplemente consumimos un servicio REST


● 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


● 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


● 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


● Pero, que es una predicción??

● Dado un item, predecir un valor numerico

● Dado un item, predecir una categoría


● Ejemplo, valores numéricos:

● Set de datos:
Temperatura, Dia del año, Ciudad, Clima

● Podemos predecir la temperatura (numérico)

● (Modelo de regresión)


● Ejemplo, categorías:

● Set de datos:
Tipo de Email (Spam/Normal), Motivo

● Podemos predecir si es Spam (categoría)

● (Modelo de categorización)


● Entrenamiento:

● El set de datos de entrenamiento lo debemos subir a Google Cloud Storage

● Formato: Un archivo CSV (datos separados por coma)


● Entrenamiento:

● Podemos utilizar el API desde una librería

● Podemos utilizarla desde el Google APIs Explorer


● Entrenamiento via Google APIs Explorer:

● invocamos el método trainedmodels.insert()

● como parámetro pasamos la ruta a nuestro archivo en el cloud storage


● 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


Preguntas?

Construyendo REST APIs sobre
Google App Engine
Gabriel Kouyoumdijan
Uruguay

Objetivos

Beneficios de usar AppEngine como backend

Introducción a Google Cloud Endpoints

Arquitectura

Backend 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

Antes de salir a producción...

■ Estimar la carga

■ Comprar y configurar servidores

■ Configurar balanceador de cargas

Luego...

■ Tirar a la basura las estimaciones previas

■ Comprar y configurar más servidores

■ Reconfigurar balanceador de cargas

Además

■ Mantener el middleware

■ Ajustar balanceador de carga

Poco tiempo para:

■ Agregar nuevas features

■ Mejorar UI

■ Analizar estrategias de monetización

Google App Engine

■ Escala automatico

■ Facil comenzar a usarlo

■ Facil de mantener

■ Simple configuración y deployment

■ Pago por lo que uso

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

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


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

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;
}
}

Muchas Gracias!

+Gabriel Kouyoumdjian

@gabrielkou

gabriel.kb@gdgroups.org

gkcodelog.blogspot.com

+GDG Uruguay

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

Liquid Galaxy
Josue Basurto y Ricardo Rosales
Tijuana, México

Lo importante (Google Earth Home Folder/drivers.ini)

; ViewSync settings
ViewSync/send = true
ViewSync/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_HERE
ViewSync/port = 21567

; For video caves, we typically want the slave screens to look to the
; left or right (yawOffset) of where the master is looking
ViewSync/yawOffset = 0
ViewSync/pitchOffset = 0.0
ViewSync/rollOffset = 0.0
ViewSync/horizFov = 36.5

<Thank You!>
developers.google.com

{ solsona | nickbortolotti } @google.com
@ { solsona | nickbortolotti }

GDG DevFest Lighting Talks México

GDG DevFest Lighting Talks México

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Similaire à GDG DevFest Lighting Talks México

Similaire à GDG DevFest Lighting Talks México (20)

Plus de Juan José Rodriguez MsC.

Plus de Juan José Rodriguez MsC. (13)

Dernier

Dernier (20)

GDG DevFest Lighting Talks México