En esta lección, queremos enviar los datos de vuelta al punto final para el script de Google Apps y luego configuraremos el método `doPost`, que es lo opuesto al `doGet`. Así que usaremos un método diferente, pero aún podemos usar el mismo punto final, la misma URL. Primero, construyamos los datos del formulario. Configuraremos un objeto para contener los datos del formulario que vamos a enviar usando JavaScript, creando un nuevo objeto `FormData`, y luego dentro de ese objeto `FormData`, agreguemos algo a él.
Para los datos del formulario, vamos a añadir nueva información al objeto, llamémoslo "data", y este puede contener la versión en formato JSON como una cadena del objeto que se pasó. Así que configurará y enviará el contenido del formulario. Usando `fetch` hacia la misma URL web, y dado que esto es un `POST`, agreguemos el método `POST`. Entonces, la propiedad será el método `POST`. Y dentro del cuerpo, queremos enviar los contenidos del objeto `FormData`. De nuevo, `fetch` está basado en promesas, así que también queremos recuperar cualquier respuesta que recibamos. Habrá algún contenido de respuesta que regresará, y luego ese contenido de respuesta lo devolveremos y usaremos el formato JSON para el contacto de la respuesta. Solo tenemos que asegurarnos de que lo estamos enviando de vuelta como JSON. Por último, podemos generar los datos de la respuesta como "data" y ponerlos en la consola. Voy a renombrarlo a "JSON" para evitar confusiones. Será el objeto JSON final, y esta información proviene del servidor. Aún necesitamos configurar eso.
Así que sigamos adelante. Primero, volvamos a nuestra aplicación y hagamos una actualización rápida. Ahora hará una solicitud POST, y en realidad no está obteniendo nada del servidor. Con Google Apps Script, cuando lanzas errores, verás esto: lanza un error porque no hay ningún `doPost`. Y a menudo, cuando tienes que depurarlo, la mejor manera es desglosar tu aplicación y simplificarla. Desde ahí, puedes hacer los retornos y las actualizaciones necesarias. Así es como voy a hacer la siguiente parte, donde usaremos `doPost` para recoger la información publicada.
Volviendo a nuestro proyecto, ahora, en lugar de la función `doGet`, hagamos una función `doPost` para poder recoger la solicitud POST y recoger los datos publicados dentro de `e`. Aquí haremos un retorno y simplemente devolveremos "success" por ahora, y luego crearemos la funcionalidad del script de la aplicación en la próxima lección. Así que adelante, hagamos un nuevo despliegue ya que estamos actualizando el ejecutable. Este ahora contendrá el POST; asegúrate de que cualquiera tenga acceso. La aplicación web está siendo ejecutada por el usuario actual. Volvamos aquí, limpiemos, y ahora, cada vez que hagamos nuestra solicitud, como no lo estamos generando como un servicio de contenido (lo mismo que hicimos aquí), tenemos que generarlo como un servicio de contenido y tenemos que convertir el objeto en una cadena.
Actualicemos eso y creemos un objeto llamado `output`, y dentro de este objeto tendremos un objeto de resultado, y devolverá "success" mientras espera que se retorne en formato JSON. De nuevo, nuevo despliegue con JSON. Giremos y despleguemos eso. Ahora tenemos la nueva versión. Volvamos a la hoja y probemos una vez más. Parece que ese error se está lanzando porque la salida JSON no se está generando correctamente. La razón es que no se está convirtiendo en una cadena, ya que JSON está intentando colocar un objeto y no lo ve como una salida adecuada para JSON. Asegúrate de convertirlo en una cadena. Esto suele ser una de las preguntas que me hacen con frecuencia los estudiantes: cuando intentan conectarse a la salida del script de Google Apps, se encuentran con problemas de CORS. Los problemas de CORS a menudo están relacionados con la salida del contenido dentro de la función. También puedes crear una función de prueba para ejecutar y registrar la salida, solo para asegurarte de que estás generando el contenido como se espera. Espera un valor de cadena JSON como salida. Ejecutando la función de prueba, podemos ver que está regresando como salida de texto y se está devolviendo como contenido JSON regular debido a la conversión de la salida en una cadena.
Así que adelante, hagamos un nuevo despliegue y lo llamaremos "POST funcional", con suerte está funcionando, y hagamos clic en "Listo". Luego volvamos a las hojas, hagamos una actualización allí, y ahora, cada vez que obtengamos una respuesta, recibiremos el resultado de vuelta. Ahora que sabemos que todo está funcionando, podemos agregar más funcionalidades complejas dentro del `doPost`. Voy a eliminar esa función de prueba. Es solo una sugerencia: si tienes problemas y quieres asegurarte de que estás enviando el contenido correctamente, puedes revisar y asegurarte de que las cosas se están añadiendo como se espera.
Otra cosa que podríamos agregar antes de pasar a la siguiente lección es escribir la función que actualizará el contenido de la hoja, ya que queremos asegurarnos de que estamos enviando los datos correctamente al lado del servidor. Esto estará contenido dentro del objeto `e`. Hay varias opciones que puedes hacer, y una de ellas que suelo hacer es devolver el contenido como datos porque ahora lo tenemos dentro de un objeto. Tenemos `e` y el contenido está llegando como parámetro de datos de `e`. Allí es donde se devolverá la cadena de contenido. Cada vez que hagas actualizaciones en los scripts de Google Maps, asegúrate de que se está actualizando y que lo estás volviendo a implementar. A menudo, una de las razones por las que algo no funciona correctamente es que no estamos recuperando los datos ni enviándolos correctamente, además de no hacer el redesarrollo. Volviendo, ahora que vemos que estamos pasando los datos. Este es el resultado para la fila tres. El resultado es abajo para la fila tres. Estamos recuperando la información correctamente en el lado del servidor. Eso significa que estamos listos para agregar y actualizar los datos. Tenemos la información cruda para usar y, en el script de Google Docs, seleccionaremos el rango y sabremos qué columna es, dependiendo de si es arriba o abajo, y sabremos qué columna actualizar dentro de la hoja de cálculo de Google.
Eso vendrá en la próxima lección. Adelante, actualiza tu código JavaScript del lado del cliente para asegurarte de que pueda publicar datos en el punto final del script de la aplicación de Google en la URL. No tenemos que cambiar la URL porque estamos usando GET para obtener la información de la URL, y eso es solo una solicitud de características regulares a la URL. También estamos usando POST para enviar datos al punto final. Por último, para finalizarlo, solo tendremos que actualizar y podemos ejecutar `getData` nuevamente y hacer una actualización completa. Una vez que devolvamos el objeto JSON y si tiene éxito, tomamos la salida, actualizamos el HTML interino para dejarlo en blanco, y luego haremos una solicitud y obtendremos los datos nuevamente. Esto reconstruirá la lista de elementos que tenemos disponibles en la página. Ahora hemos hecho eso y tenemos un resultado. Esto reconstruye los elementos y tiene que hacer una solicitud separada al servidor. También hay una forma de hacer esto sin hacer la actualización, donde puedes simplemente actualizar el valor que está contenido allí. Esto te ahorrará de hacer esa actualización. Por supuesto, no recogerá los datos en vivo, pero evitará que se refresque el código. O también puedes simplemente recorrer y reconstruir los indicadores. Eso viene a continuación mientras depuramos la aplicación.
Para los datos del formulario, vamos a añadir nueva información al objeto, llamémoslo "data", y este puede contener la versión en formato JSON como una cadena del objeto que se pasó. Así que configurará y enviará el contenido del formulario. Usando `fetch` hacia la misma URL web, y dado que esto es un `POST`, agreguemos el método `POST`. Entonces, la propiedad será el método `POST`. Y dentro del cuerpo, queremos enviar los contenidos del objeto `FormData`. De nuevo, `fetch` está basado en promesas, así que también queremos recuperar cualquier respuesta que recibamos. Habrá algún contenido de respuesta que regresará, y luego ese contenido de respuesta lo devolveremos y usaremos el formato JSON para el contacto de la respuesta. Solo tenemos que asegurarnos de que lo estamos enviando de vuelta como JSON. Por último, podemos generar los datos de la respuesta como "data" y ponerlos en la consola. Voy a renombrarlo a "JSON" para evitar confusiones. Será el objeto JSON final, y esta información proviene del servidor. Aún necesitamos configurar eso.
Así que sigamos adelante. Primero, volvamos a nuestra aplicación y hagamos una actualización rápida. Ahora hará una solicitud POST, y en realidad no está obteniendo nada del servidor. Con Google Apps Script, cuando lanzas errores, verás esto: lanza un error porque no hay ningún `doPost`. Y a menudo, cuando tienes que depurarlo, la mejor manera es desglosar tu aplicación y simplificarla. Desde ahí, puedes hacer los retornos y las actualizaciones necesarias. Así es como voy a hacer la siguiente parte, donde usaremos `doPost` para recoger la información publicada.
Volviendo a nuestro proyecto, ahora, en lugar de la función `doGet`, hagamos una función `doPost` para poder recoger la solicitud POST y recoger los datos publicados dentro de `e`. Aquí haremos un retorno y simplemente devolveremos "success" por ahora, y luego crearemos la funcionalidad del script de la aplicación en la próxima lección. Así que adelante, hagamos un nuevo despliegue ya que estamos actualizando el ejecutable. Este ahora contendrá el POST; asegúrate de que cualquiera tenga acceso. La aplicación web está siendo ejecutada por el usuario actual. Volvamos aquí, limpiemos, y ahora, cada vez que hagamos nuestra solicitud, como no lo estamos generando como un servicio de contenido (lo mismo que hicimos aquí), tenemos que generarlo como un servicio de contenido y tenemos que convertir el objeto en una cadena.
Actualicemos eso y creemos un objeto llamado `output`, y dentro de este objeto tendremos un objeto de resultado, y devolverá "success" mientras espera que se retorne en formato JSON. De nuevo, nuevo despliegue con JSON. Giremos y despleguemos eso. Ahora tenemos la nueva versión. Volvamos a la hoja y probemos una vez más. Parece que ese error se está lanzando porque la salida JSON no se está generando correctamente. La razón es que no se está convirtiendo en una cadena, ya que JSON está intentando colocar un objeto y no lo ve como una salida adecuada para JSON. Asegúrate de convertirlo en una cadena. Esto suele ser una de las preguntas que me hacen con frecuencia los estudiantes: cuando intentan conectarse a la salida del script de Google Apps, se encuentran con problemas de CORS. Los problemas de CORS a menudo están relacionados con la salida del contenido dentro de la función. También puedes crear una función de prueba para ejecutar y registrar la salida, solo para asegurarte de que estás generando el contenido como se espera. Espera un valor de cadena JSON como salida. Ejecutando la función de prueba, podemos ver que está regresando como salida de texto y se está devolviendo como contenido JSON regular debido a la conversión de la salida en una cadena.
Así que adelante, hagamos un nuevo despliegue y lo llamaremos "POST funcional", con suerte está funcionando, y hagamos clic en "Listo". Luego volvamos a las hojas, hagamos una actualización allí, y ahora, cada vez que obtengamos una respuesta, recibiremos el resultado de vuelta. Ahora que sabemos que todo está funcionando, podemos agregar más funcionalidades complejas dentro del `doPost`. Voy a eliminar esa función de prueba. Es solo una sugerencia: si tienes problemas y quieres asegurarte de que estás enviando el contenido correctamente, puedes revisar y asegurarte de que las cosas se están añadiendo como se espera.
Otra cosa que podríamos agregar antes de pasar a la siguiente lección es escribir la función que actualizará el contenido de la hoja, ya que queremos asegurarnos de que estamos enviando los datos correctamente al lado del servidor. Esto estará contenido dentro del objeto `e`. Hay varias opciones que puedes hacer, y una de ellas que suelo hacer es devolver el contenido como datos porque ahora lo tenemos dentro de un objeto. Tenemos `e` y el contenido está llegando como parámetro de datos de `e`. Allí es donde se devolverá la cadena de contenido. Cada vez que hagas actualizaciones en los scripts de Google Maps, asegúrate de que se está actualizando y que lo estás volviendo a implementar. A menudo, una de las razones por las que algo no funciona correctamente es que no estamos recuperando los datos ni enviándolos correctamente, además de no hacer el redesarrollo. Volviendo, ahora que vemos que estamos pasando los datos. Este es el resultado para la fila tres. El resultado es abajo para la fila tres. Estamos recuperando la información correctamente en el lado del servidor. Eso significa que estamos listos para agregar y actualizar los datos. Tenemos la información cruda para usar y, en el script de Google Docs, seleccionaremos el rango y sabremos qué columna es, dependiendo de si es arriba o abajo, y sabremos qué columna actualizar dentro de la hoja de cálculo de Google.
Eso vendrá en la próxima lección. Adelante, actualiza tu código JavaScript del lado del cliente para asegurarte de que pueda publicar datos en el punto final del script de la aplicación de Google en la URL. No tenemos que cambiar la URL porque estamos usando GET para obtener la información de la URL, y eso es solo una solicitud de características regulares a la URL. También estamos usando POST para enviar datos al punto final. Por último, para finalizarlo, solo tendremos que actualizar y podemos ejecutar `getData` nuevamente y hacer una actualización completa. Una vez que devolvamos el objeto JSON y si tiene éxito, tomamos la salida, actualizamos el HTML interino para dejarlo en blanco, y luego haremos una solicitud y obtendremos los datos nuevamente. Esto reconstruirá la lista de elementos que tenemos disponibles en la página. Ahora hemos hecho eso y tenemos un resultado. Esto reconstruye los elementos y tiene que hacer una solicitud separada al servidor. También hay una forma de hacer esto sin hacer la actualización, donde puedes simplemente actualizar el valor que está contenido allí. Esto te ahorrará de hacer esa actualización. Por supuesto, no recogerá los datos en vivo, pero evitará que se refresque el código. O también puedes simplemente recorrer y reconstruir los indicadores. Eso viene a continuación mientras depuramos la aplicación.
Comments
Post a Comment