Una de las cosas interesantes a la hora de hacer programas educativos mediante IA mediante la técnica del vibe coding es el poder llevar algún tipo de registro y guardar datos suministrados por los usuarios o recopilados por el propio programa en un medio que estamos acostumbrados a usar como las hojas de cálculo de Google. También nos puede interesar leer datos de una hoja de cálculo para hacer estadísticas, etc.

Haremos un ejemplo pidiéndole a Gemini que nos ayude a configurar la hoja de cálculo y que después nos haga un programa, que en este caso será una pequeña encuesta. No es necesario en absoluto utilizar Gemini y podemos usar nuestra IA preferida.

Prompt inicial

Con este prompt le describimos a la IA la aplicación que queremos hacer y los datos que queremos que se guarden en nuestra hoja de cálculo. Es importante que la descripción de los datos que necesitamos guardar en la hoja de cálculo sea precisa o deberíamos repetir su configuración.

Quiero hacer una aplicación HTML donde el usuario responda 3 preguntas: su nombre, sugerencias y una escala de valoración que responderá a la pregunta «¿Te ha sido útil esta información?», que va de 0 (nada) a 4 (mucho) y el resultado lo añada a una hoja de cálculo de Google mediante Apps Scripts. Guíame paso a paso para preparar la hoja de cálculo y luego haremos el programa en HTML.

En este prompt podemos indicar con detalle cómo deberá ser nuestra aplicación. En nuestro caso, es solo un formulario que podrás responder al final.

Ya sea leer o escribir en la hoja de cálculo, los pasos a seguir serán los mismos, solo cambiará el script que nos dará la IA y el propio programa en sí.

Preparación de la hoja de cálculo

El resultado ha sido este:

Así es como ha quedado la hoja de cálculo:

Creación del script

Le pedimos que continúe y nos proporciona las siguientes instrucciones con el script (instrucciones) que deberemos copiar. Más abajo tenemos las capturas de pantalla con todos los pasos.

Una cosa muy importante de la que a veces nos avisa, pero no otras, es el nombre de la pestaña de la hoja. Si no coincide el nombre que tenga con el del código que nos ha dado, la aplicación no funcionará. Por lo tanto, si no nos informa de este nombre, deberemos pedírselo:

Así pues, dado que el nombre es «Respuestas del formulario» deberemos renombrar la hoja. Hay que ser cuidadosos en poner el nombre exactamente tal como nos lo ha escrito, vigilando que no haya espacios en blanco extra:

A continuación seguiremos todos los pasos que nos ha dicho:

Borramos lo que aparece al abrir, en su lugar pegamos el código que nos ha proporcionado y le ponemos el nombre que nos ha sugerido:

Seleccionamos: Nueva implementación

Rellenamos la ventana tal como nos ha indicado:

Ahora aparecerán algunas ventanas de Google pidiéndonos permisos (no las hemos incluido todas), debemos dar permiso:

Creación del programa final

Una vez lleguemos a la pantalla anterior, debemos copiar la URL que nos proporciona y se la daremos a la IA para que haga el programa:

Este programa lo podremos copiar y pegar donde queramos, para empezar aconsejamos Google Sites, pero para un segundo nivel es preferible un sistema dedicado a páginas web como Github (véase el artículo Dónde publicar las aplicaciones).

Responde al formulario

!Expresa tu opinión sobre este articulo¡

Aquí tienes las respuestas dadas hasta el momento.

Pódcast creado por NotebookLM

FAQ (creado por NotebookLM)

¿Cuál es el objetivo principal de integrar una aplicación con una hoja de cálculo de Google?

El objetivo principal es poder registrar y guardar datos proporcionados por los usuarios o recopilados por la propia aplicación en un formato familiar y fácil de usar como las hojas de cálculo de Google. Esto es especialmente útil para programas educativos o encuestas.

¿Qué herramienta de IA se utiliza como ejemplo en el proceso, pero no es estrictamente necesaria?

En el ejemplo proporcionado, se utiliza Gemini para guiar el proceso. Sin embargo, se aclara que no es necesario usar Gemini y se puede emplear cualquier otra IA de preferencia.

¿Qué información precisa es crucial proporcionar a la IA al describir los datos que se desean guardar en la hoja de cálculo?

Es fundamental describir con precisión los datos que se necesitan guardar. Si esta descripción no es exacta, es posible que se deba repetir la configuración de la hoja de cálculo.

¿Cuál es la primera etapa del proceso con la ayuda de la IA?

La primera etapa es describir a la IA la aplicación que se quiere crear y detallar los datos específicos que se desean guardar en la hoja de cálculo mediante un «prompt» inicial.

¿Qué paso importante se destaca respecto al nombre de la pestaña en la hoja de cálculo y el código del script?

Se enfatiza la importancia de que el nombre de la pestaña de la hoja de cálculo coincida exactamente con el nombre especificado en el código del script proporcionado por la IA. Si no coinciden, la aplicación no funcionará.

¿Qué se debe hacer con el código del script proporcionado por la IA una vez que se obtiene?

Se debe borrar el contenido existente al abrir el editor de scripts de la hoja de cálculo y pegar el código proporcionado por la IA en su lugar. También se debe dar al script el nombre sugerido por la IA.

¿Qué paso sigue después de crear y nombrar el script en la hoja de cálculo?

El siguiente paso es seleccionar la opción «Nueva implementación» y configurar la ventana emergente según las indicaciones proporcionadas.

Una vez completada la implementación del script y obtenidos los permisos necesarios, ¿qué se hace con la URL proporcionada?

Se debe copiar la URL que se obtiene al finalizar la implementación del script y proporcionársela a la IA para que genere el código de la aplicación HTML que permitirá la interacción con la hoja de cálculo.

Nota: Este artículo tiene nivel 0 en el Marco para la integración de la IA generativa en las tareas educativas. Excepto el pódcast y las FAQ que han sido creadas íntegramente por NotebookLM (nivel 5).