Cómo agregar un Mapa y una Base de Datos a tu aplicación App Inventor

¡Hola! Como saben, desde Chicas en Tecnología trabajamos con chicas de entre 13 a 16 años en Programando un Mundo Mejor para que ellas identifiquen un problema social en sus comunidades y programen una aplicación para celulares que ayude a resolverlo.

Los proyectos de las chicas están buenísimos, eligen ayudar a resolver problemas como Bulimia y Anorexia, Acoso Callejero, Bullying, Ecología y muchos más: mirá acá los 25 proyectos hasta el momento.

Luego de #PUMM las acompañamos para que sigan desarrollando sus proyectos y aprendiendo para, en un futuro, tener en cuenta la tecnología como una opción de carrera mediante encuentros periódicos de la Comunidad Chicas en Tecnología.

¡Hoy es uno de estos encuentros! Y hoy vamos aprender a conectar CartoDB a las aplicaciones desde App Inventor, la plataforma que usan las chicas para programar sus apps.

Qué se necesita

• Una cuenta en Carto.db: https://carto.com/. Para las egresadas de #PUMM y los Clubes CET: El equipo de Carto nos ofreció la posibilidad de darles cuentas full gratis 🎉❤! Solamente escríbanos diciendo que la necesitan y pásenos el mail con el que se registraron a Carto y las agregamos.
• Una app en App Inventor con el formulario para recopilar los datos que queremos grabar en Carto. Pueden hacer una copia de esta aplicación para seguir este tutorial: http://ai2.appinventor.mit.edu/?galleryId=6356464548184064

Empecemos!

La app que les mencioné arriba y con la que vamos a trabajar ya tiene los siguientes componentes:

• Campo de texto para nombre
• Campo de fecha para la fecha
• Un campo para ingresar una dirección y obtener la latitud y longitud

La parte de obtener la latitud y longitud se hace con el componente no visible SensorDeUbicación y el código que hace que el botón funcione se encuentra en la app que nos descargamos y que copio acá. Por las dudas, un tutorial que habla en detalle se puede encontrar acá (en inglés) https://docs.google.com/document/d/1V1Zm5cYoa12KVb_cTlfelSfyUkW7IH2WPHUoTa02XaY/pub

Tenemos dos variables: latitud y longitud. Cada vez que hacemos click en el botón Geolocalizar, llamamos a la función para obtener latitud y longitud de la dirección que ingresó el usuario en el CampoDeTexto “Dirección” (y lo unimos a “Buenos Aires, Argentina” para que no nos mande a cualquier lado del mundo con el mismo nombre de calle. Guardamos este resultado en las variables y actualizamos el valor de la etiqueta para poder confirmar que esté todo bien. Abajo hay otra forma de hacerlo: que cada vez que nos movamos se actualicen los valores de las variables (para tomar el valor ACTUAL de lat y long y no el de una dirección en particular). También pongo como el texto del componente de seleccion de fechas el valor seleccionado por el usuario, para que vea lo que seleccionó.

Qué datos vamos a guardar en la base de datos?

CartoDB nos permite insertar mapas con puntos a nuestra aplicación, y esos datos se guardan una base de datos. Antes de comenzar, debemos saber qué info vamos a querer guardar. En el ejemplo de nuestra aplicación vamos a querer guardar:

• Nombre
• Fecha
• Dirección (el valor ingresado por el usuario en el campo dirección)
• Latitud (guardado en la variable global latitud)
• Longitud (guardado en la variable global longitud)

Creando la Tabla para guardar esta info en Carto.db

Para crear la tabla en la base de datos (que se llama Dataset en Carto) tenemos que entrar en nuestra cuenta e ir a la siguiente dirección (). https://carocet.carto.com/dashboard/datasets

Vamos a encontrar esta pantalla que lista todos nuestros datasets y nos permite crear uno nuevo:

Una vez allí vamos a elegir la opción “Create empty dataset” para crear uno nuevo.

Un Dataset es un conjunto de datos, es una palabra muy usada en el mundo de los Datos Abiertos. Hay un montón de archivos de datos que las instituciones (Gobiernos, Empresas, Instituciones) comparten con la ciudadanía en general para que podamos analizarlos, controlarlos y usarlos para lo que queramos. Si quieren, investiguen sobre qué datos abiertos están disponibles sobre los temas que les interesen, pueden hacer mapas o visualizaciones sobre los temas que quieran, o incluso sumarlos a sus proyectos!

En nuestra base de datos las columnas serán aquellas cosas que queramos guardar y en cada fila vamos a ir agregando desde nuestra app cada uno de los puntos.

Editen el dataset que creaste para que tenga estos nombres (o los que tu app necesite guardar, esto es sólo un ejemplo!).

Para editar los nombres de las columnas hacé doble click sobre los nombres y usá el botón Add Column para agregar nuevas. Acordate de ponerle un nombre al dataset (en este caso ubicaciones). No borres las columnas cartodb_id ni the_geom, porque CartoDB las necesita.

Ahora vamos a cambiar el tipo de dato de las columnas lat y lon ya que no son String (texto) sino números. Las latitudes y longitudes son números positivos o negativos y es necesario indicar esto en esta parte para que luego el mapa sepa cómo mostrarlos.

También necesitamos cambiar la privacidad de nuestra tabla a Público haciendo click en el botón rojo que dice “Private” abajo del título. Tiene que quedar en verde y decir PUBLIC. Para que podamos acceder a los valores desde cualquier lugar (en este caso desde los celus de la gente que use nuestra app). Si lo dejáramos privado la gente necesitaría inciar sesión para poder verlos.

El resultado final tiene que ser así:

Pueden agregar una fila (botón +add row) con valores para tener su primer punto en el mapa y así probar si todo anda bien. Este ejemplo son datos de la casa rosada, pero pueden agregar los valores que quieran!

¡Listo! Apretá el botón “Create map” abajo de todo para seguir!

Creando el Mapa

Crear el mapa es muy divertido, lo único que necesitamos hacer es decirle al mapa qué columnas va interpretar como latitud y longitud para poder marcar los puntos. Adivinaron! Las columnas que va a usar para eso son justamente lat y lon, obviamente.

Para hacer eso, hagan click en donde dice “ubicaciones” (o el nombre que le hayan puesto a su dataset).

Les va a aparecer un cartelito como este:

Lo que nos está diciendo Carto es que no sabe cuál es lat y cuál es lon para poder marcar los puntos, para decírselo tenemos que apretar “Georeference” y en la opción “Parameters” (parámetros) seleccionar cual de sus columnas en su dataset será la latitud y cuál la longitud.

Les tiene que quedar así:

Una vez que terminen aprieten APPLY para aplicar los cambios.

¡Ya está!

Lo único que necesitan ahora es elegir de qué color/tamaño etc van a ser sus puntos. Fíjense que el punto que cargaron en el dataset debería aparecer ahora en el mapa. Exploren la parte de “Style” para elegir de qué manera se va a ver su mapa. Por ejemplo puede quedar así: (pero eligan los colores, formas y tamaños que quieran!)

También, si quieren, puede configurar la parte de Pop-Up, para que cuando un usuario haga click en cualquier punto de su mapa les aparezca más información:

Pueden seguir configurando el mapa todo lo que quieran, pero con esto ya estamos listas para seguir! Lo único que falta es que cuando un usuario llene todos los datos en nuestra aplicación aparezca un nuevo punto en el dataset y en nuestro mapa de Carto.db. Ya estamos muy cerca! :-).

Incluir el mapa en nuestra app

Para que desde nuestra app podamos ver lo mismo que en el mapa en la web se utiliza el componente Visor Web de app inventor. Su funcionamiento es muy simple: permite incluir contenido de una página web cualquiera dentro de nuestra app. Esto se llama en el mundo de la programación “embeber” una página dentro de otra, la palabra viene del inglés “embed”.

El componente que muestra el mundo y está resaltado es el Visor Web agregado a la app.

Para que el Visor Web sepa qué contenido mostrar, lo único que hay que hacer es agregar la url de nuesto mapa:

Para eso hay que apretar el botón PUBLIC de nuestro mapa y luego PUBLISH y tomar la url de esta página:

y ponerla en la propiedad URLInicial del Visor Web. Eso quiere decir que ni bien se abra nuestra app el visor web va mostrar el contenido de la página que está configurada en URL Inicial. En este caso, sólo utilizamos la propiedad URL Inicial, pero podés explorar sobre qué significa cada una acá.

Ya pueden probar esto en sus celus! :-). Van a ver que ni bien abren la app pueden ver el mapa que crearon en sus celus. Prueben agregar puntos al mapa (agregando otro ejemplo como hicimos antes) y ver cómo aparecen en la app.

El Visor web les deja “embeber” cualquier página en su app, no solamente mapas. Puede ser cualquier página que accedamos desde internet, como nuestros mails, facebook, nuestro blog favorito, un juego o lo que queramos. Incluso se puede usar los Visores Web de app inventor para crear “Accesos directos” a las páginas que más usemos y tenerlas en nuestros celus como si fueran apps.

Programando la integración entre App Inventor y Carto.db

Lo único que nos falta es que nuestra app en App Inventor le “avise” a nuestro dataset/mapa en Carto cada vez que un usuario aprieta el botón Guardar en nuestra app.

¡Vamos a Hacerlo!

Para que App Inventor y Carto se puedan “Comunicar” se utiliza una API, la descripción de los mensajes que (en nuestro caso) Carto puede recibir para permitirnos agregar puntos a los mapas. A través de APIs, por ejemplo, podemos postear fotos en Facebook y en Twitter desde nuestra cuenta de Instagram o que podamos compartir por Whatsapp una foto que sacamos desde nuestro teléfono sin abrir la aplicación, sino solamente usando el botón compartir de las fotos del teléfono.

Para esto, tenemos que agregar un componente no visible nuevo a nuestra app, se llama WEB y está en la parte de “Conectividad”.

Para hacer la comunicación entre los dos sistemas se utilizan lo que se llama HTTP Requests. Las “palabras” o “verbos” más usados en este lenguaje de las APIs son 3: GET, POST, PUT. Y el componente Web de App Inventor nos deja usar cualquiera de ellas.

Hoy vamos a usar el verbo “GET” que en App Inventor en español se llama “Obtener”.

Lo que vamos a hacer es construir una dirección con un mensaje en el que le indiquemos a Carto que tiene que ingresar un nuevo punto.

Para eso tenemos que ir a la parte de Usuario>My APIs

Example Write nos muestra un ejemplo de cómo “escribir” (o agregar) un punto en nuestro mapa.

Esto es solo un ejemplo de dirección y mensaje, y hay que cambiar los valores con los que queremos (los que hagan referencia a nuestro dataset y a nuestros puntos):

Por ejemplo:

https://carocet.carto.com/api/v2/sql?q=INSERT INTO nosotras (nombre, fecha, direccion,lat,lon) VALUES ('caro', '5/4/2017', 'Sucre 3073', '-34.44', '-58.88') &api_key=a3a2ddddf9f466f32b683a0257efe3b04480f886

Si tratamos de leer esta url vemos que al principio está la dirección de nuestro usuario en carto (en mi caso caroCET), luego dice que va a usar el lenguaje “API”, versión 2 y luego dice qué mensaje vamos a mandar usando este lenguaje. En este caso se usa un lenguaje de tipo SQL, que es el lenguaje que hablan las Bases de Datos. Usando este lenguaje y cambiando lo que va después de q= en el ejemplo de arriba podemos hacer cualquier cosa con los puntos de nuestro mapa: agregar uno, borrarlos, cambiarlos, agregar muchos.

Hoy sólo vamos a agregar uno nuevo pero pueden leer sobre SQL y probar hacer cualquier cosa después.

En nuestro ejemplo, lo que viene después de q= es

INSERT INTO ubicaciones (nombre, fecha, direccion,lat,lon) VALUES (‘caro’, ‘5/4/2017’, ‘Sucre 3073’, ‘-34.44’, ‘-58.88’) &api_key=a3a2ddddf9f466f32b683a0257efe3b04480f886

Vamos a analizarlo parte por parte para entenderlo bien:

INSERT INTO ubicaciones = “insertar un nuevo punto en el dataset “ubicaciones” (acá habría que cambiarlo al nombre que le hayan puesto)”.

(nombre, fecha, direccion, lat, lon) = estos son los nombres de las columnas en las que queremos agregar info. De esta forma se decide dónde va la info.

VALUES = esta palabra indica que hay que poner todo lo que sigue en las columnas que mencionamos arriba (el orden es importante y las comas “,” es lo que separa lo que va en cada columna.

(‘caro’, ‘5/4/2017’, ‘Sucre 3073’, ‘-34.44’, ‘-58.88’) = estos son los valores que se van a insertar en las columnas de arriba. En este caso:

• nombre → ‘caro’
• fecha → ‘5/4/2017’
• dirección → ‘Sucre 3073’
• lat → ‘-34.44’
• lon → ‘-58.88

Al final de todo hay algo que se llama “api key” que es algo que cartoDB agrega para que solo desde la app se puedan ingresar puntos y no desde cualquier lado.

Ahora que entendemos qué significa el mensaje que vamos a enviar, ¡vamos a enviarlo!

Como dijimos vamos a usar el componente WEB para que cada vez que el usuario haga click en guardar se envíe este mensaje para insertar un nuevo punto.

Un último comentario es que los espacios de lo que escribimos (INSERT -espacio- INTO -espacio- ubicaciones por ejemplo) hay que codificarlos de manera de que el componente web entienda la frase como un todo. Porque un espacio cortaría el mensaje. Miren la url en esta búsqueda:

En la web las urls los espacios se reemplazan por %20 (o +) pero vamos a usar %20

Para armar el request a la API tenemos que cambiar los valores de ejemplo que pusimos arriba por los valores que ingresa el usuario en sus campos y armar un texto grande que tenga todo esto:

En este ejemplo parto la URL original para ir agregando datos. Entre dato y dato agrego una coma “,”. La funcion CodificaciónUri sirve para sacar los espacios de las direcciones.

Notar que el primer bloque debe estar reemplazados los espacios por %20. La mejor forma de hacerlo es directamente copiar y pegar el contenido del primer bloque rosa en un navegador (con espacios) y los espacios van a transformarse al apretar enter en %20.

El resultado final debería quedar así:

https://carocet.carto.com/api/v2/sql?q=INSERT%20INTO%20nosotras%20(nombre,%20fecha,%20direccion,lat,lon)%20VALUES%20('caro','24/2/2344','direccion','-34.33','-68.00')&api_key=a3a2ddddf9f466f32b683a0257efe3b04480f886

Reemplazando obviamente los valores como ‘caro’, la fecha, la dirección por los contenidos de los bloques.

Lo que acabamos de hacer es poner el texto que armamos dentro de la propiedad URL del componente WEB y luego llamamos al método “obtener” o “GET” que mencionamos más arriba.

El método GET u OBTENER es el mismo que usamos cada vez que ponemos una dirección en nuestro navegador y apretamos ENTER o hacemos click en “Ir”. Si no llamamos a obtener es lo mismo que si pusiéramos una url en nuestro navegador pero nunca ingresáramos.

De hecho podemos poner la misma dirección web que armamos arriba en el ejemplo en un navegador y apretar enter y también va a funcionar: podemos probar agregar puntos desde nuestro celu, o desde el navegador o desde una web que programemos nosotras más adelante :-) y hacer que se puedan agregar puntos desde cualquier lado!

Lo último que puse (Visor Web. ir al inicio) es sólo una forma de “recargar” el mapa que embebimos para que muestre el punto que ingresamos.

YA ESTÁ!!!!

Para terminar:

siempre conviene hacer también un manejo de errores, y poder mostrar si hubo algún problema:

En estos bloques de abajo lo que dice es que después de mandarle el mensaje a App Inventor, veamos la respuesta y si no fue error (codigorespuesta = 200 quiere decir que estuvo todo bien), diga que está ok y que si no indique cuál fue el error.

Esto de los números (como 200) que significan cosas distintas es súper interesante. Esos números se llaman “Codigos de Respuesta” y cada código significa algo distinto. Por ejemplo:

404 significa que la página no existe. Los programadores ponen a veces cósas graciosas en las páginas, cuando el usuario trata de entrar a una página que no existe. Por ejemplo: http://www.creativebloq.com/web-design/best-404-pages-812505

Podés probar las páginas que usas todos los días para ver si tienen mensajes graciosos. Por ejemplo Youtube muestra un buscador si ponemos cualquier cosa en la url: https://www.youtube.com/dfsfsfhdsjhjdshjfdjhfdskjhfdsksf y wikipedia solamente nos dice que no existe: https://es.wikipedia.org/sfddfskdsfhjsdfhjfdhfds.

Todas esas páginas son páginas de “404” de “página que no existe”.

Hay muchos otros códigos raros que significan toda clase de cosas, podés leer acá si te interesa (incluso algunos son chistes): https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP

Acá van los bloques:

Y.. listooooo!

:-)

A probarlo!!

La app completa y terminada la pueden encontrar acá:

http://ai2.appinventor.mit.edu/?galleryId=6027810295250944

❤

Esperamos que les haya gustado, cualquier pregunta nos avisan!