04. Explicando el código
Seguimos en nuestro curso de desarrollo de Web Apps con Google Apps Script y HTML/CSS/JS.
En esta lección 04 vamos a explicar el código base de nuestra primera versión de la web app. Entenderemos cómo funciona la estructura de una web app con su parte de servidor en Google Apps Script y el cliente que corre en el navegador. Además, revisaremos cómo se conecta con Google Sheets para traer datos y cómo se maneja la interfaz con HTML, CSS y JavaScript.
Veremos en detalle la función doGet que es la puerta de entrada de la app, la función getWords que obtiene las palabras desde la hoja de cálculo, y cómo el script del lado cliente muestra y controla las tarjetas con las palabras para que el usuario pueda interactuar con ellas.
Si quieres ver el video, descargar los materiales, obtener soporte y mucho más, suscríbete a JuanSGuzman aquí.
Como vimos, la función doGet es esencial para servir la interfaz HTML y tiene configuraciones importantes para evitar avisos de Google y permitir que la app se pueda embeber en otras webs. La función getWords conecta con la hoja «Palabras» de Google Sheets, obtiene 50 fichas con inglés y español, y las mezcla aleatoriamente para que la experiencia sea variada. Además, el código incluye manejo básico de errores para evitar problemas si la hoja no existe.
Del lado cliente, el archivo HTML tiene tres partes: los estilos CSS que definen la apariencia, el marcado HTML con el título, contenedor de tarjetas y controles, y el script JavaScript que inicializa la app, muestra las tarjetas, permite voltearlas y avanzar a la siguiente. Todo esto hace que la app sea interactiva y fácil de usar.
En próximas lecciones optimizaremos el código, parametrizaremos la cantidad de fichas y mejoraremos la interacción. También integraremos la interacción con un modelo de lenguaje (LLM) para enriquecer la experiencia y continuar el desarrollo de la app.
Te invito a seguir practicando con este código base y a prepararte para los siguientes pasos donde haremos la app más robusta e inteligente.
Si ya eres miembro, no olvides terminar esta lección y prepararte para la siguiente, donde empezaremos a integrar el LLM para que la app tenga respuestas dinámicas. Si tienes dudas o quieres proponer nuevos temas, puedes contactarme directamente.