En esta lección, vamos a regresar al script y tomaremos el contenido que nos está siendo enviado para actualizar el contenido dentro de la hoja de cálculo. Esta es información que proviene del lado del cliente, desde la aplicación web. Estamos obteniendo un par de valores dentro de los datos. Así que tenemos "resultado abajo" y "fila tres". Esa es la información que se está enviando y que estamos recuperando. Vamos a simular esos mismos datos JSON que están siendo enviados y crear una pequeña aplicación de prueba antes de ponerla en producción. Esta aplicación va a actualizar el contenido de la hoja de cálculo.
Así que simplemente la llamaremos "test1" y necesitamos establecer la información de los datos que vamos a actualizar. Esto va a simular los datos que vienen del parámetro `e`. Solo démosle un nombre de "data" y esto puede ser simplemente un objeto de datos. Tenemos el "resultado abajo" y el número de fila tres. Entonces, podemos usar el número de fila tres para obtener la hoja de cálculo. Así que seleccionemos la hoja de cálculo. Tenemos el ID aquí y vamos a condensar esta fila para obtener también la información de la hoja. Usaremos `getSheetByName` y la hoja que queremos obtener será "data". Actualicemos esto para que sea "sheet". Queremos usar el contenido de los datos que llegaron y estamos simulando esto nuevamente antes de implementarlo en vivo. Estamos obteniendo la información de la hoja y la columna que queremos actualizar depende del valor del resultado. Podemos registrar el contenido de los datos solo para asegurarnos de que se está generando correctamente en formato de objeto. Tenemos la fila tres y el resultado es "abajo".
Para hacer una actualización en una hoja de Google, necesitamos seleccionar el objeto de la hoja. También necesitamos obtener el rango que queremos actualizar. Así que seleccionemos el rango de esa hoja que queremos actualizar usando el objeto de la hoja `getRange`, y el rango requerirá algunos parámetros. Necesitamos tener un valor real y lo tenemos dentro de los datos de la fila, separado por comas según el valor de la columna. Hay varias formas de configurar la columna; podemos verificar si el valor del resultado es "arriba". Y si no es "arriba", entonces será "abajo". Eso es donde podemos especificar la columna. Configurémosla de esa manera: usaremos el operador ternario para verificar el resultado de los datos y, si es igual a "abajo", sabemos que vamos a usar la columna número tres, y si es "arriba", usaremos la columna número cuatro. Entonces este valor será tres o será cuatro. Fila y columna. Para limpiar esto, también podemos especificar el valor real aquí y usar el valor de fila y columna dentro del rango y dentro del registro. Hagamos el rango y obtengamos los valores que están contenidos actualmente en el rango. Estamos generando esa información en el registro.
Ejecutemos la prueba, así que tenemos un valor de uno. Permítanme actualizar esto a algo más distinto, deberíamos poder obtener el valor de 55 dentro del arreglo si hacemos `getValues` o simplemente obtener el valor único porque solo estamos mirando un valor que devolverá el valor de 55. Este es el valor que queremos actualizar. Así que verifiquemos y asegurémonos de que estamos actualizando en la fila número tres y el resultado "abajo". En realidad, esto es incorrecto porque estamos actualizando y seleccionándolo para "arriba". Así que, en realidad, debería ser: si es "arriba", entonces será tres; de lo contrario, será cuatro. Ejecutemos eso una vez más y asegurémonos, y deberíamos tener un valor de uno nuevamente. Todo se ve bien. Podemos obtener el rango, y eso significa que también podemos establecer el rango. Tenemos el rango, tenemos el valor actual, y actualicemos ese valor. Tomemos el valor y coloquémoslo en una variable llamada `Val`, y luego tomemos `Val`. Dependiendo de si es "arriba" o "abajo", vamos a incrementarlo o disminuirlo. Si usamos el resultado aquí nuevamente como condición, si es "arriba", siempre estamos incrementando el valor. Así que simplemente tomaremos `Val` e incrementaremos su valor en uno. También queremos asegurarnos de que sea un número, no una cadena. Por eso estamos forzando ese valor subyacente. Asegúrate de que lo estás forzando a ser un número, ya que por defecto viene como una cadena. Asegúrate de que sea un número antes de intentar incrementarlo. De lo contrario, simplemente concatenarás números juntos.
Ahora lo que necesitamos hacer es que tenemos el rango, obtenemos el valor y podemos usar el rango y establecer el valor. Así que establezcamos el valor. El valor que queremos establecer será el valor de `Val`. Ahora, cuando lo ejecutemos, debería incrementarse en uno, lo cual hizo. Ejecutémoslo una vez más para incrementarlo en uno. Si este valor es "arriba", guardemos y ejecutemos. Entonces, 55 debería convertirse en 56. Así que pasó a 56. Funciona, y eso significa que estamos listos para enviar esos datos y hacer la actualización. Podemos actualizar la hoja y simplemente recoger el objeto de datos. Hacer las actualizaciones de esa manera y actualizar la hoja con lo que tengamos para el parámetro `e`, y ahora deberíamos estar actualizando el contenido de la hoja que proviene de la aplicación web.
Hagamos un repaso rápido: estamos creando una aplicación de prueba donde estamos usando algunos datos de prueba solo para asegurarnos de que todo funcionaba correctamente una vez que obtuvimos el resultado que queríamos. Necesitamos seleccionar la hoja que queremos actualizar. Y usando la hoja que queremos actualizar, obtenemos el valor del resultado. Si es "arriba", entonces estamos usando la columna número tres; de lo contrario, estamos usando la columna número cuatro como la columna. Tenemos la fila de los datos que llegaron y eso viene nuevamente de la aplicación web. Necesitamos seleccionar un rango que queremos manipular de la hoja de cálculo, y será solo ese valor, así que podemos obtener el valor y simplemente obtener el valor de la celda y aumentar el valor de la celda. Y finalmente estamos estableciendo el valor de la celda y también podemos hacer un retorno del valor. De esa manera podemos usar ese nuevo valor y simplemente asegurarnos de que fue actualizado. Así que, antes de definir la salida, pasemos esa información de vuelta también. Esto será equivalente al nuevo valor.
Una vez que tengas todo listo, puedes hacer un nuevo despliegue y darle un nombre según lo que hará esta función. Ahora deberíamos poder conectarnos a la aplicación web y hacer una actualización. ¡Oh! Parece que hemos encontrado otro error de CORS. Así que hagamos una depuración rápida. El problema es que, debido a que lo estamos enviando al parámetro `e` y enviando los datos como una cadena, también se está recogiendo dentro del script de Google Apps como una cadena. Así que necesitamos tomar los datos y convertirlos en un objeto. Usando `JSON.parse`, pasemos los datos y ahora debería poder obtener el resultado y la fila de los datos en lugar de ser una cadena. Hagamos otro despliegue y simplemente llamémoslo "V2" para mantenerlo simple, hecho, y limpiemos eso. Ahora deberíamos poder trabajar y hacer las actualizaciones como se espera, así que también podemos hacer actualizaciones al contenido que estamos obteniendo, el nuevo valor que se devuelve. Eso debería permitirnos actualizar el código de la página web para que no tengamos que hacer una recarga y reconstrucción de todo el contenido y obtener ese espacio en blanco en el medio.
Así que, cada vez que se haga clic, entonces se actualizará el valor, pero solo queremos que recargue el valor del botón actual que invocó eso. Eso viene a continuación. Vamos a hacer que funcione mejor. Hagamos algo de depuración. La parte difícil ya está hecha, que es hacer el POST y poder recoger la información del POST desde la aplicación web en el lado del servidor. Y si te encuentras con errores de CORS y problemas relacionados, crea algunas funciones más pequeñas, haz algo de depuración y asegúrate de que todo funciona como se espera antes de volver a implementarlo. Una vez que hayas hecho las actualizaciones, asegúrate de volver a implementarlas para que el código propague la nueva versión a la versión ejecutable de la aplicación web.
Translator
Comments
Post a Comment