En esta lección, vamos a conectarnos a los puntos finales del punto de ejecución donde tenemos los datos en formato JSON que provienen de nuestra hoja de cálculo y usaremos JavaScript para conectarnos a ese punto final. El editor que estoy utilizando será Visual Studio Code, haciendo uso de la extensión Live Server para ejecutarlo en el protocolo HTTP en mi máquina local. Así que, si estás usando otro editor, asegúrate de tener la capacidad de ejecutarlo dentro del protocolo HTTP para no usar los archivos con el protocolo de archivo.
Vamos a hacer un breve recorrido por Visual Studio Code, así que puedes dirigirte a code.visualstudio.com y descargar la versión para tu sistema. Tienen versiones para Mac OS, Windows y Linux. Una vez instalado, abre Visual Studio Code. Este es el editor Visual Studio Code aquí, justo encima de la ventana del navegador. He creado una página índice, así que vamos a especificar esto y establecer el DOCTYPE y luego también el contenedor principal HTML. Dentro de este, configura el título en la sección `<head>` y lo llamaré "Sheet Data" (Datos de la Hoja). Y dentro de "Sheet Data", crea el cuerpo (`<body>`) y dentro del cuerpo:
Creemos un elemento con una clase llamada `output`. Este va a generar el contenido que proviene del punto final de datos de la hoja de cálculo. Y justo después de cargar el contenido DOM, configuraremos el script, estableciendo una fuente para el script y lo voy a llamar `app.js`, aunque podría ser cualquier nombre. Lo llamaré `app.js`.
Así que esto es lo que necesitamos para nuestro HTML básico. Y si no tienes instalado Live Server, puedes ir a Visual Studio Code bajo el menú Archivo, agregar la carpeta al espacio de trabajo o guardarla como un nuevo espacio de trabajo. De esta manera, este archivo será la raíz del espacio de trabajo que buscará un archivo índice como raíz del espacio de trabajo. Bajo "Code", ve a Preferencias y Extensiones. Esto mostrará todas las extensiones que tienes instaladas. La que estoy usando es Live Server. Actualmente, tengo instalada la versión 5.6.1, así que adelante e instálala o busca la extensión Live Server y haz clic en Instalar.
Lo que hará esto es permitirte lanzar un servidor local con un repositorio en vivo. Para obtener más información sobre cómo funciona: una vez que hayas configurado Live Server, asegúrate de que esté habilitado. Asegúrate de que, cuando vayas a tus extensiones, veas que Live Server está habilitado e instalado. Y una vez que lo tengas, puedes ir a cualquier parte de tu archivo y seleccionar "Abrir con Live Server". Esto lanzará la página dentro de la máquina local. Usando la dirección IP local en el puerto 5500, podemos ver que el título de la página está allí y hagamos una inspección. Estoy usando Chrome DevTools para inspeccionar, y en realidad nos falta uno de los archivos, el archivo `app.js`. Sabemos que está conectado y usa el correcto. Así que sigamos adelante y creemos un nuevo archivo. Este será donde irá nuestro código JavaScript, y guardemos este archivo como `app.js`. Dígase que dentro de la misma carpeta de trabajo. Ahora tenemos los objetos; también puedo hacer esto más grande para que sea más fácil de leer.
Lo que queremos hacer antes de concluir esta lección es usar el método `fetch` de JavaScript para hacer nuestra solicitud hacia el punto final. Así que volvamos primero a nuestro script y gestionemos los despliegues, seleccionemos la URL de la aplicación web y copiemos eso. Volvamos a nuestro archivo y creemos una variable, llamémosla `url` y peguemos esa larga URL de la aplicación web porque la necesitaremos para hacer la solicitud `fetch` a esa URL. Creemos una función y llamémosla `callToGetData`, y esta cargará los datos en la página. Aquí es donde realizaremos la solicitud `fetch`. Invocamos la función `getData`. Así que cuando la aplicación se ejecute, establece la URL a lo que sea, luego ejecuta la función `getData`. Y dentro de la función `getData`, por ahora, hacemos una solicitud `fetch` a la URL. Vamos al punto final, y dado que esto ya será datos JSON, podemos ejecutar una función que devuelva la información de respuesta. Y dentro de la respuesta, podemos devolver el contenido como datos JSON de respuesta. Está integrado en `fetch` que, siempre que tenga datos JSON, puede manejar esos datos JSON y convertirlos en un objeto JavaScript. Y en la siguiente promesa, vamos a recoger el contenido como un objeto de datos y simplemente lo imprimiremos en la consola por ahora. Asegurémonos de tener la conexión antes de intentar hacer algo con los datos.
Vamos a la aplicación web, a su URL, y ahí están nuestros datos. Y todo esto proviene de los datos en vivo de la hoja de cálculo, generando el contenido, el título, y también tenemos los botones de "up" y "down". Así que en las próximas lecciones, queremos hacer esto más interactivo y realmente enviar algunos datos de vuelta a la aplicación web. Todavía queda mucho por venir en las próximas lecciones. Así que sigue adelante, configura tu máquina local, haz la conexión al punto final y realiza una solicitud `fetch` para obtener los datos de la hoja de cálculo. Y estarás listo para pasar a la siguiente lección.
Translator
Comments
Post a Comment