Revisión de la actualización de datos en Google Sheets

Translator

 Esta lección será una revisión general del código, así que comenzamos creando un proyecto donde tenemos algunos datos dentro de una hoja de cálculo y queremos poder interactuar con esos datos dentro de nuestra aplicación web, es decir, en nuestro sitio web.  

Dentro de esta aplicación, tenemos una hoja de cálculo y el primer objetivo fue obtener todo el contenido de la hoja de cálculo y mostrarlo en la página web. Así podríamos cargar el contenido de manera ordenada en nuestra página. Todo esto proviene de los datos en vivo dentro de la hoja de cálculo. Creamos una aplicación web que utiliza `doGet`, conectándose para obtener el ID de la hoja de cálculo, usando el servicio de la aplicación de hojas de cálculo y seleccionando la hoja que queremos usar, obteniendo todos los valores, separando la información de los encabezados y también extrayendo todas las filas de información, ya sea preguntas, contenido o lo que queramos llamarle. Luego configuramos un contenedor básico al que podemos añadir datos mientras iteramos a través de todos los elementos que tenemos en la hoja, ya sean preguntas o lo que deseemos.  

Recorrimos los elementos, iteramos a través de ellos y también recorrimos los encabezados mientras avanzábamos, porque tenemos varios encabezados. El objetivo era hacerlo lo más dinámico posible. Así, incluso si actualizamos parte del contenido dentro de la hoja de cálculo, no se romperá nuestra aplicación ni tendremos que hacer nuevos despliegues. Funcionará de manera fluida e independiente.  

Luego construimos el objeto `Holder` y lo generamos como datos JSON. Lo convertimos en una cadena y luego mostramos el contenido en la página web. Este es el contenido aquí. Creó un punto final al que podemos conectarnos desde nuestra aplicación web y luego usar la información que obtuvimos en el JSON para construir lo que queremos representar en la página web.  

Luego entramos en el HTML. Creamos un contenedor básico para mostrar el contenido y también nos conectamos al archivo JavaScript. En el archivo JavaScript, tenemos nuestra URL, que es el punto final de nuestra aplicación web. Seleccionamos el contenedor. Tenemos una función que realiza la solicitud `fetch`, obtiene los datos y, al recorrerlos, hace una solicitud a la URL y devuelve los datos como JSON. Cuando recibimos los datos, iteramos a través de ellos, construimos el contenido del DOM HTML, los elementos, y también añadimos interacción a los botones de los elementos. Todo esto se hace con JavaScript creando una función que recoge cualquier elemento que se haya hecho clic y envía los datos al elemento.  

Por último, aquí tenemos otra función que crea datos de formulario, añade los datos de formulario recién creados que hemos enviado y los estructura para enviarlos al script de Google. Hacemos una solicitud `fetch` recogiendo los datos del formulario mediante POST. Obtenemos la respuesta del servidor y luego usamos la información de la respuesta para actualizar el contenido de la página.  

Volviendo al script de Google, creamos la función `doPost`, y la función `doPost` fue la que usamos para recibir las solicitudes `fetch` desde la aplicación web usando JavaScript. Seleccionamos el nuevo valor y lo pasamos para actualizar la hoja. La actualización de la hoja es simplemente el método que estábamos utilizando. Una de las razones para dividir las funciones es que será mucho más fácil de probar. Podríamos pasar algunos datos y simular el POST para hacer pruebas. Si necesitamos hacer alguna actualización, será mucho más fácil que tener que volver a implementar constantemente. Además, como vimos, hay varios errores de CORS que la aplicación web lanzará si hay algún problema estructural dentro de la aplicación. Es mucho más fácil depurarlo con funciones separadas.  

Creamos una función, obtenemos los datos y los pasamos como un objeto JavaScript porque vienen como una cadena. Luego obtenemos la idea de la hoja, seleccionamos la hoja que queremos actualizar y la siguiente parte es seleccionar la columna y la fila, lo que nos dará el rango en la hoja que queremos actualizar. Solo estamos mirando una celda. Así que buscamos una forma de seleccionar la celda de la hoja y solo necesitamos una fila y una columna para eso. Lo convertimos en un objeto de rango. Convertimos el valor actual en un número, lo incrementamos en uno y luego restablecemos el nuevo valor de ese elemento de rango y devolvemos el nuevo valor, que a su vez se devuelve al archivo web como un valor de cadena, utilizando JSON, devolviendo esa información a nuestra aplicación web y, en última instancia, actualizando con el nuevo valor.  

Vemos que se devuelve como un valor. Simplemente sobrescribe los datos existentes con el nuevo valor y eso también corresponde a los valores que tenemos dentro de la hoja.  

Si tienes alguna pregunta o comentario, siempre estaré encantado de escucharte. El código fuente está incluido, así que te sugiero que pruebes el código por ti mismo, crees tu propia versión de la aplicación y te diviertas con ella. También actualiza los datos de la hoja, desafíate con diferentes columnas, diferentes datos y la presentación del contenido según sea necesario en el lado del cliente de tu aplicación web.  

Gracias nuevamente por tomar el curso y esta sección.