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.

KXh0FGLaP81lH5oTyPfMdRLLLXf XodfB AgXYXRjhdgNveXeI 6LFhHalxebZ0A aZCEFuOsnR2uK6HhJ4VQHmY9dy MIlvcOx6I sBA6k6de871UgWFM3Ff6PEjB1vqn5xynEk - Hojas de cálculo en App Inventor
LLP6YwGjPQ1Bvg99NXly8ML aXmRxbBGxGJOtNT0Wjhly3QdtEWNHQNg0nDvaHmN0 HDzRlhQJ1rBfaWHrB6DHKe8VjgvgGAHkfqCsGcnPKqHhXVzF2PyxCAvdUD719E 4GM  m2 - Hojas de cálculo en App Inventor
u1P  9j71wsOjyjgzyA9dqelyfWNKaUVU5fWjw rirLx6U4XnE9MZQdhREKbdg0hM7RBorgEk0iEje1sX4l9eMaUVIKKhEHqZ07yQxoY5RFCbSo4XzAgR48qmcj73vZT8nKvmkxA - Hojas de cálculo en App Inventor
L JmbVZWd8mWF  nKeXzszJrD 4vmjib1M0C 2dKxhC aNi 8Gci3mJAkn8pwyODbLa3NVQCh9TKxdKOL0wFtWtE4jtBTBSWnio7PqcgUDAAvKYS8mKIlnnfpI0qSNj8oApAs1Xv - Hojas de cálculo en App Inventor
1pDhBYwMiY4BczD7iBpB bxRfyp9gEvWRISTtmbs2uPPEj0MIcnScPObl1g7T76lUYT6ah cY4jxK8OF8BAM 7 r07f7MXRGZUPOU6UXC3b0XsdH3a1OpoiON6r95 1k1Z9kw52b - Hojas de cálculo en App Inventor
qq5EjqZs8Ggdnx1mlwOSa3R1w2TQMpBGSVQtxjVq5R159vTjoG7V1HS0s67O2diLu HQgg KXcrr6 mmI8r34p 8JtrPBvm8CeabO82vClId3N90RHPiplQ7xe65PwC8LCGEDkgX - Hojas de cálculo en App Inventor

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 

YNrGoYtOHQDO8m9 lywdwuPv3bGcnzD7mXi4FtDUS0YdKxmO3yertnzdqr81FjfxNrgjdHw59ExsBkFch4bq1aBmRm1c7Sr8bPfhx862GDffdzLhRWFttvhtpOkqovkRMeyJ4obz - Hojas de cálculo en App Inventor

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 

RdLB4OmyivjUuSvdl0Yn32bLypP LyotI6HJiWZNAL3IrOdUZHlwyAXOewUmwX0pooJOJYjnQ2SDwYOM1vJBB8jztFFf83C 8tIrsY5SW03RRzOp3AHum7ejfBmz 65KNLdDPIa4 - Hojas de cálculo en App Inventor

y de las opciones que salen selecciona respuesta corta.

O21 bTGsqwh7uDtoOZ5ahv3iQ1heYIx 0E5lzfKwRC aOaI8xTFJ7YkCTLvqTCj1zbkczoL2YW4NVhbJpME k Pw5ijyhWpyR46l2B7 J4CorLzzd8G k0aN1ed8vZCQ282MhpGk - Hojas de cálculo en App Inventor

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.

ilbhP0ofXLuxTlnedbzDyrwxAJDL crTVVkgbDjh TNov7XYTsmLnwuY4 gzIaKqlvzZKxaHVWddGAII1auHa6VBOMz986fMAh12IzyV7lH0Mb4s0YN JHaBuvAkn8V vh TAQO4 - Hojas de cálculo en App Inventor

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.

2Nn5xZp0lstp8alvksHPp SmkWNbx2bA2GIv 8dWZ2coRVFV GVc6aGgKLRl y LISFuXIMygMtN7N8NdnXLNB vEVROdSfDXvuOu9hKhPsp3G9PpoeP5AIOOXQa8CWYMkO0fGMz - Hojas de cálculo en App Inventor

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. 

xUkyD q1J0LqPkW0xvNyjt Nf5VH5BZkCUSrEWQACSxX2DDvL78LO 9Eec7ZnxfvT8GE26bgnAldSK7gDDLPnJX88xlLrmZNm1hRta 5r0OSkDx3E8mHg8E2wL7BTkXBEhQEgXFw - Hojas de cálculo en App Inventor

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

EozbndQRtU2sKX4qTj5zpBsEa M0rw1pvhQFyGjfgSsSBhVf3LCbowp9rH9aVAZIjM3phphxV82nSO9IMoBOK88qp45oK5qXNWdQtciF92zr89xhV4kcqz7GaVicMjJ 5WsBjTLN - Hojas de cálculo en App Inventor

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

SDxyUNhk0ue0RVQsUDnZDqcLJBh0HO0TW7xXYDEvCVAAml7phMSRDFxT84ZyvoYLkMA6tUoJqyLjOlAAF uxb6BVs6FD0IHrMou B9 NCrAQwn4K2v6 cQSM5ToEU2QIoYGcdw   - Hojas de cálculo en App Inventor

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.

Yt0qHsScSN0Dd1iKfAUsXwIa9IlvC65Pr kNA1Yea7AfG6xGkPRjpRLmRTYUohfQ gSds3UosMeznKNof0H4AjCtlaxPLfzh3yNq ZLPo5PVSLSoqYgjy1yCtRleGuFW kQDsrtt - Hojas de cálculo en App Inventor

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.

qj3S6BAWrRWFNQY4gN tZHIJbvCkgpFEtCdq5BGVasbU8qbmuQXHDDxMt4vKrbhh6qC9 3B ztcUEFYSo4o 84A5jsGg8XRcwSv5S36uL29Rcsxo8KsUDmD3O5CMhTgWN2W6MAOb - Hojas de cálculo en App Inventor

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.

6tQbbKyBstfbAoWhyNVvaGLprGxjCMWpijqRhxrcP1HeMJ1NlEnDSxls7VkIbg0unOf8XLlFL6 FkluadCI61BOnxK R6dychJ tbctFpXXuIKC9fDOVHrXEGnLq9 KMUx83 KSM - Hojas de cálculo en App Inventor

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

KrnNx25xmrQwosbI29MjowATd7p3M99ay5V1  yY8YwHLTZJ7mrC45SDwiYqNpP8kcvReafdOGwor2E3p2L7AhEvQRZc0uFWnV RlrB6jSehEDzjtK8v9 vawJs2OnvXSiJjgoVE - Hojas de cálculo en App Inventor

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.

Ga7MLT5Vt8t 8bawbF1WFUEt8u ZzZtv9tUxXOXNllF7dSGUmXfT389Ia0yGTX2FQkbb iZTB5cZGrSaibEjqIf6YkRXlgq 17OYyJRu1DZ DkruGQTBwLM2je00ep9c7u 1qc8b - Hojas de cálculo en App Inventor

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.

qb6XJuYnoIeetCwA S2 7egxRpIDxI4RfwzRfuEwvpOTWAscM6XdxxwS4RDYIcbPAAOZJvMN5l6szj691FJXCca Rh3Ya4xItNk6 o1IqMvTWS7n06DIChzmryXP0yVTmOaf6It6 - Hojas de cálculo en App Inventor

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.

liGcZcGmDHIwI 4808QdbabudXuzS3kweF6cGdE8v6x2asr7CIZdyToL 304bIOPTOCBzuJYwpOZUW6Z5ESsKJSnnJ 8JdqWCFCNGjGw7EFD5xkyB45kvl3LHOAXPjCAUd42s0d9 - Hojas de cálculo en App Inventor

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.

BNFJ7Ng8zHCwjTeu5CTBPvh46XjXlCbl9nHFqMjeSFePgqtj2WAJrX60RM75esLehXaqIE28Eub6wSlS3TPYw nD802JPQgBEgCeCYxOLmc2IWfCrm3z7EKPvNX52fmlfE ddefj - Hojas de cálculo en App Inventor

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

I4CQ2yvmoKaZGPdTyjfrTpzdUAEsdV0WBX6Y37 ZZLb8tEtCaISUN1ozbZcGa 9DHPOESyUEHqUbe3guVfTUxHMTEcy5FHAoGiFJNe3FonZwlS1YWGyNJH14isuvdfoTHPQlGBx6 - Hojas de cálculo en App Inventor

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.

BMdM9r1Jvs08RPHhdj6tKFKAHSKV5 aQf5sa8OBEoaNLas82UMAA4N0vZqX xvrNQwF7MxO0qBDqPD9 YplikCu6YDzGORrfJUBDIz nj1L 3GZZSeUaycd9UT4y1fB4h7R7vode - Hojas de cálculo en App Inventor

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

U8jcMe8b52hEY yEYEOr302RKsabnEZRa7OuRpiwMveWKXxkVXKtFvmqtUI2UIseSn8XcDBNJqPmcKMiMXmL7JCGx nFhSRNXADRnl12hatIIkEay0VxCTq5NoUvfCp2HjVg Ajf - Hojas de cálculo en App Inventor

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

I1CbtnePh sQepLgz cCRurE7QI OXTZx6cgx 9a5ZHjSx5x0JizsH22ZAbREtLa7b 8XsI2X94DnwWz8pAtKECnT7Oe7iVfZdAjVZUlmgyEAWVJ3ZjGoWpk69O5AOHmVkHqYs7a - Hojas de cálculo en App Inventor

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

Si te ha gustado compartelo
facebook - Hojas de cálculo en App Inventor
Facebook
twitter - Hojas de cálculo en App Inventor
Twitter
linkedin - Hojas de cálculo en App Inventor
Linkedin
pinterest - Hojas de cálculo en App Inventor
Pinterest

11 comentarios en “Hojas de cálculo en App Inventor”

  1. Hola Amigo, De verdad que este programa me aclaro muchas dudas, yo soy nuevo en esto de programacion de App realmente lo comence por curiosidad. ahora bien me gustaria saber si hay una posibilidad de modificar un dato en particular en la lista. A ver si me explico.
    en su ejemplo tiene en la hoja de calculo 3 columnas (Codigo, Producto y precio) supongamos que ya agrego unos 20 productos pero quieres cambiarle el precio a un articulo en particular, como puedes hacer para buscar ese producto bien sea por el codigo o por la descripcion y una vez conseguido cambiarle el precio?
    Mucho sabria agradecer su respuesta.
    Saludos y muchas gracias por dedicarle tiempo a enseñarle a otros.

    Responder
  2. Hola buenas tardes!, excelente tutorial solo tengo dos dudas, podrias indicar donde se encuentra el mas en el excel no lo puedo encontrar estoy queriendo hacer la ultima pantalla, y la otra pregunta podrias poner nuevamente un print de pantalla de la segunda pantalla creo que hay algunos items que estan ocultos

    Gracias!!!

    Responder
    • Hola, es buenísimo este proyecto de hoja de calculo, pero no consigo que la pantalla 2, que es la que tiene que mandar el listado en pantalla, me aparezcan los productos, lo he revisado hasta la saciedad y no encuentro donde puede estar el error y me tiene frustrado. Es estupendo este curso,
      muchas gracias por todo

      Responder
      • Gracias por tu comentario.
        Parece que algunas personas teneis problemas a la hora de añadir y visualizar los productos. Lo he estado revisando y a mi me funciona a la perfección seguire intentando encontrar el problema.
        Un saludo.

        Responder
  3. Muchísimas gracias. Soy un ex-usuario de Google Fusion Tables y estaba bastante perdido buscando una alternativa. Está estupendamente bien explicado, es muy sencillo incluso para alguien tan poco experimentado como yo y ¡FUNCIONA!

    Responder
  4. Efectivamente Facundo, al menos que yo cuente hay una etiqueta de texto y un botón dentro de la disposición vertical 2, pero está comprimida y no se muestra.

    Responder
  5. Buen aporte, solo me aparece un error al momento de ejecutar el boton1 (Ver Productos), al ejecutar me aparece:
    Syntax Error: quote in unquoted cell
    Cannot parse text argument to «list from csv table» as a CSV-formatted table

    Alguien también le ocurrió lo mismo, como lo soluciono.
    En cuanto a la pagina 3 corre sin problemas.
    Atento a tus comentarios.

    Gracias.

    Responder
    • Hola Martín
      Creo que tu error cuando conviertes la hoja de cálculo en formato CSV. Vuelve a revisar bien el video y coloca los bloques exactamente igual. En ocasiones se colocan bloques parecidos, pero su utilidad es diferente.
      Un saludo

      Responder

Deja un comentario

error: Content is protected !!