Hojas de cálculo en App Inventor

Este tutorial está motivado por el anuncio por parte de Google del cierre de Fusión Tablets.

Sois muchos los usuarios que estáis preguntando qué alternativas tenemos al usar App Inventor 2. Este tutorial muestra una alternativa, que no la única, al uso de Fusión Tablets, utilizando una hojas de cálculo de Google en App Inventor 2.

En este ejemplo crearemos una aplicación en la que podremos ver en forma de lista los datos de nuestras hojas de cálculo. En la que podremos modificar desde el mismo App Inventor.

Nuestro ejemplo será de un almacén de ropa y complementos, donde los datos estarán registrados en una tabla excel de hojas de cálculo de Google. Desde la App podremos consultar datos de esa misma tabla y tambien añadir al final de la misma nuevos productos.

Diseño de la App, para modificar hojas de cálculo

El diseño de nuestra app consta de tres pantallas, la principal, que mostrará al usuario un par de botones. El primero con el texto “Ver producto” dará acceso a la segunda pantalla, el segundo botón con el texto “ Añadir producto”  dará acceso a la tercera pantalla.

La segunda pantalla mostrará un ListWiev que contendrá todos los datos de nuestra hoja de cálculo de Google en App Inventor 2. Al pulsar cualquiera de los registros, podremos ver un resumen más detallado del producto seleccionado. La tercera pantalla, tendremos la opción de añadir productos. Rellenando los campos requeridos podremos añadir más productos a nuestra hoja de cálculo de Google. Para todo esto nos ayudaremos de el componente no visible Web.

Como siempre, podréis descargar el diseño de la aplicación al final de estas líneas. Con el fin de que solo estés centrado en seguir los pasos de este tutorial con más claridad. Posteriormente recomiendo que se estudie el diseño para mejoras o la comprensión del mismo.

descarga proyecto AIA

Creando una hoja excel para App Inventor 2

Lo que vamos hacer es crear una nueva hoja de cálculo de Google, para ello nos dirigimos a la siguiente dirección: https://www.google.es/intl/es/sheets/about/.  Ingresa con tu cuenta de gmail, y una vez en la página ponle nombre a la hoja, pero no modifiques ninguna celda de la misma. En la barra de herramientas superior pulsa en Herramientas → crear formulario, se abrirá una nueva página donde podrás crear nuevas preguntas a modo de formulario. Las utilizarás más adelante en este tutorial para añadir artículos a tu hoja de cálculo.

Una vez situado en esta página el proceso para crear pregunta es sencillo modifica el título de la pregunta como muestro en la imagen 

en mi caso le pondré Id para hacer referencia a un código identificador de cada uno de  mis productos, seguido pulsa donde dice selección múltiple 

y de las opciones que salen selecciona respuesta corta.

Dependiendo del nombre que le pongamos a la pregunta, automáticamente el formulario nos detecta si la respuesta tiene que ser un nombre o un número. Si queremos que todo sea texto tendremos que cambiar las opciones que aparecen más abajo.

Para añadir más preguntas, pulsa en el signo más de la pequeña barra lateral. Yo en mi ejemplo voy a añadir dos más, una es el nombre del artículo y otro para el precio.

Si volvemos a nuestra hoja de cálculo, podrás observar que se han creado cuatro columnas y que estas coinciden con el nombre de cada pregunta creada anteriormente en el formulario, “Id, articulo y precio”, menos la primera que contiene el nombre de marca temporal, que contendrá la fecha y hora de la última  modificación de la pregunta.

bien de momento dejamos esto, sin cerrar ninguna ventana de de nuestro navegador ya que más adelante necesitaremos volver para consultar una serie de datos. 

Programando las pantallas para App Inventor y hojas de cálculo de google

Lo primero que vamos hacer es programar los botones de nuestra primera pantalla. Al pulsar el primero “Ver producto” nos mandara a la segunda pantalla y si pulsamos el segundo “ Añadir producto” nos mandara a la tercera pantalla. 

Ahora vas a programar la pantalla2, antes tenemos que recoger de nuestra excel un dato que nos servirá para mostrar la tabla en nuestra aplicación. Dirígete a tu hoja de cálculo  para conseguir el enlace. Para compartir, toca el botón de la parte superior derecha de la pantalla . En la ventana que se abre pulsa en copiar enlace para compartir. Copiala en una nueva ventana de tu navegador y sustituye la parte remarcada en rojo de la imagen por el siguiente texto, “export?format=csv”.

la nueva dirección quedará de la siguiente manera.

esto lo que hará es convertir tu hoja de cálculo en un archivo en formato csv.

Dirígete a App inventor, pulsa en el botón diseñador de la pantalla 2 y selecciona el componente no visible Web. Introduce la dirección web anteriormente copiada y modificada en la casilla de Url.

Pulsa el botón de bloques, y vamos a comenzar a programar la pantalla2. En primer lugar vamos a necesitar dos variables globales que inicializará como una lista vacía, a la primera la llamamos TablaProductos y la segunda ListaProductos.

Seguido le vas a decir que cuando inicie la pantalla haga una llamada HTTP utilizando la dirección web con la que configuraste tu componente no visible web. Para ello te ayudaras del bloque llamar web1.Obtener, quedará de la siguiente manera.

La llamada devolverá un texto que obtendrás con el bloque cuando Web1. ObtuvoTexto. De las cuatro variables que te ofrece este bloque escoge contenidoDerespuesta que contendrá nuestra hoja de cálculo en formato CSV. Esta variable se la asignamos a la variable global TablaProductos ayudándote con el bloque Lista desde tabla CSV texto, quedará de la siguiente manera.

Pulsa para saber más sobre las listas en App Inventor 2

Ahora va ser necesario construir un procedimiento que construirá una lista descartando los elementos que no vamos a necesitar. Como la fecha en la que se creó y el código Id que le hemos asignado. Entonces por cada elemento de la lista TablaProductos que creamos anteriormente, añadiremos a la lista ListadoProductos los índices que nos interesan, la descripción el artículo y su precio. Por tanto escogeremos el índice 3 y 4 para construir la nueva lista, quedando de la siguiente manera.

Este procedimiento lo vamos a llamar cada vez que obtengamos el texto de la llamada a la web. Por tanto lo colocaremos en el bloque que anteriormente utilizamos, y añadiendo a nuestro visor de listas, el contenido de nuestra variable global ListadoProductos. Quedando dela siguiente manera.

Antes de ver los resultados de nuestra aplicación vamos a otorgarle una nueva funcionalidad. Vamos hacer que cuando el usuario pulse un elemento de nuestra lista, la pantalla muestre una pequeña descripción del elemento seleccionado. Ya que el diseño de la aplicación consta de dos disposiciones, una a la vista del usuario y otra oculta al mismo, vamos a cambiar entre ellas después de la selección. y al texto que contiene la segunda disposición vertical, le asignaremos un elemento de ListadoProductos, cuyo índice será el elemento seleccionado en el visor de listas. Quedará de la siguiente manera.

Una vez en esta segunda disposición vertical, para que el usuario sea capaz de volver a la anterior. Cuando pulse al botón le vuelva a mostrar la disposición vertical que contenía nuestra lista de elementos. Tiene que quedar de la siguiente manera.

Si ejecutas la aplicación verás que la segunda pantalla muestra un registro que coincide con la primera fila de datos de tu hoja de cálculo. En este caso sería el nombre de cada columna nombre, id y precio.

“Por favor abstente de modificar manualmente la hoja de cálculo, ya que alteraría los resultados de este tutorial”

Ahora vamos a programar la tercera pantalla de nuestra aplicación. Esta pantalla tiene unas cajas de texto donde el usuario introducirá los datos, y al pulsar el botón, éstos se insertarán en nuestra hoja de cálculo. Para ello nos valdremos de nuestro formulario, es decir, cuando pulsemos el botón se mandará a la dirección web del formulario los registros de las cajas de texto. Para conseguir esto tendremos que mandar desde nuestra aplicación una serie de datos a la página web, y para ello necesitamos construir la dirección web donde se mandaran con los datos requeridos. Nos dirigimos a nuestro formulario de la hoja de cálculo y pulsamos en “Más” y del desplegable seleccionamos “Obtener enlace previamente rellenado”.

Se abrirá una nueva ventana con nuestro formulario donde copiaremos la dirección web sustituyendo la parte final ”prefill” por “formResponse”. Quedando de la siguiente manera: https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse. Vamos a copiarlo en un lugar para mas tarde poder usarlo.

Ahora necesitamos un par de datos más, y para ello tendremos que rellenar previamente nuestro formulario, antes de solicitar el enlace que nos hace falta, no importa que introduzcas en las respuestas, como te muestro en la siguiente imagen yo voy a poner letras para conseguir el enlace.

Pulsamos en generar enlace y lo copiamos en el portapapeles. Ahora abre una nueva pestaña en el navegador y inserta en la barra de direcciones el enlace copiado, en mi caso es este:

https://docs.google.com/forms/d/e/1FAIpQLSfaFDSRO64zTwVI3lucHETEWvYygO3CGNdMMfjMhuYoSHiTsw/viewform?usp=pp_url&entry.510338503=a&entry.1148147912=b&entry.1297137201=c

Ahora con el enlace que tenemos vamos a construir una dirección web que insertará los datos de cada una de las cajas de texto. 

En primer lugar necesitamos descomponer la dirección web que te muestro arriba. Para ello cuando pulsemos el botón1, haremos una llamada a una dirección web que será, la dirección web que copiamos y modificamos. «https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse«.

 Añade «&entry.510338503=a» sustituiremos la “a” por el contenido de la caja de texto1.

Seguido añade «&entry.1148147912=b» sustituiremos la “b” por el contenido de la caja de texto2.

Y por último «&entry.1297137201=c» sustituiremos la “c” por el contenido de la caja de texto3.

Sustituye el carácter “ampersand &” de la primera entrada por un signo de interrogación. Y codificaremos el texto de todas las entradas por si se insertan caracteres especiales.

Quedará de la siguiente manera

Una vez construida nuestra dirección web solo tendremos que llamarla y esta insertará una nueva línea en nuestra hoja de cálculo

Bien ahora solo tienes que ejecutar la aplicación que has construido en este artículo y si todo ha ido bien funcionara a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo. No olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo