En esta masterclass, aprenderemos cómo construir una cadena de tipo seguro desde la API hasta el cliente con herramientas generadas en TypeScript. Crear un entorno de desarrollo tipo seguro reduce la cantidad de errores que se envían a producción, pero también permite un desarrollo de características más rápido una vez que se establece la base.
Esta será una masterclass de ritmo rápido que cubrirá una pila de características con una opinión, pero al final, tendrás un marco de trabajo funcional para un desarrollo elegante y tipo seguro.
Tabla de contenidos
- Comenzaremos creando una API de GraphQL en Hasura Cloud y definiremos algunos controles de acceso y acciones básicas. - Luego crearemos un marco de trabajo listo para TypeScript con NextJs. - Con el marco de trabajo y la API en su lugar, generaremos un SDK utilizando GraphQL Zeus. - Por último, generaremos algunos envoltorios de gestión de estado tipo seguro con easy-peasy para implementar un flujo básico de inicio de sesión y autenticación.
This workshop has been presented at React Advanced Conference 2021, check out the latest edition of this React Conference.
FAQ
Hazura es un proveedor de cloud que ofrece diversos servicios, incluyendo la creación de una capa de GraphQL y la generación de un SDK que proporciona seguridad de tipos para el desarrollo de aplicaciones front-end. Hazura facilita la integración con bases de datos como Postgres a través de Heroku y permite la configuración de proyectos en la nube.
Para comenzar a usar Hazura, puedes registrarte y crear una cuenta en su plataforma en línea. Después, necesitarás configurar un proyecto en la nube accediendo a la URL cloud.hazura.io/proyectos y seguir las instrucciones para conectar una base de datos de Postgres utilizando Heroku.
GraphQL es un lenguaje de consulta para APIs que permite a los desarrolladores solicitar y recibir exactamente lo que necesitan, nada más. Hazura utiliza GraphQL para generar una capa que facilita la interacción con los datos, optimizando las consultas y mejorando el rendimiento de las aplicaciones.
La seguridad de tipos en el contexto de Hazura y TypeScript significa que el sistema ayuda a verificar y asegurar que los datos utilizados en las aplicaciones sean del tipo correcto, lo que minimiza los errores de programación y mejora la calidad del código en producción.
Para integrar una base de datos Postgres con Hazura, puedes utilizar Heroku como plataforma de hosting. Hazura ofrece integración de primer nivel con Heroku, lo que facilita la conexión y configuración de la base de datos directamente desde el panel de control de Hazura.
El nivel gratuito de Hazura ofrece varias ventajas, como un paso de datos de un gigabyte y 60 solicitudes por minuto. Es ideal para proyectos a nivel de hobby y producción pequeña, y incluye características como almacenamiento en caché incorporado, lo que lo hace adecuado para muchas aplicaciones sin coste adicional.
Esta masterclass explora la seguridad de tipo de back to front en la construcción de aplicaciones front-end utilizando TypeScript y Next.js. Cubre la configuración de un proyecto en la nube con Hazura, la creación de acciones de inicio de sesión y registro, el manejo de puntos finales de API con una aplicación Next.js, y la consulta y visualización de datos de usuario utilizando Apollo Client. La masterclass también incluye la configuración de la gestión de estado con easy peasy y la depuración de problemas de autenticación y gestión de estado. En general, proporciona ideas sobre cómo construir aplicaciones futuras, estables y seguras utilizando estas herramientas y tecnologías.
1. Introducción a la Seguridad de Tipos de Atrás hacia Adelante
Short description:
En este masterclass, exploraremos la seguridad de tipos de atrás hacia adelante. Generaremos una capa de GraphQL para la seguridad de tipos en la construcción de aplicaciones front-end utilizando TypeScript y Next.js. TypeScript ayuda a reducir los errores en el código de producción. Aprendamos cómo construir aplicaciones más futuras, estables y seguras utilizando estas herramientas y tecnologías.
Mi nombre es Jesse. Voy a liderar y trabajar contigo hoy en este masterclass. Y soy una persona de divulgación para desarrolladores de Hazura. Hazura es un proveedor de cloud y un proveedor de capa beta que hace todo tipo de cosas increíbles. Si no estás familiarizado con nosotros, definitivamente échale un vistazo. Hoy veremos algunas de las cosas que hace. Y este es el masterclass de seguridad de tipos de atrás hacia adelante. ¿Qué significa eso? Significa que comenzaremos con el concepto de generar una capa de GraphQL que será nuestro punto de partida para los tipos. Y utilizaremos eso para generar un SDK que esencialmente nos dará seguridad de tipos para construir aplicaciones front-end utilizando una aplicación de TypeScript para Next.js.
Ahora, aquí hay algunas piezas críticas que debes saber sobre ese proceso. Una es que no soy un gurú de TypeScript. Así que, estoy en el punto óptimo de lo que TypeScript realmente debería resolver. Y tal vez muchos de ustedes también lo estén. TypeScript en realidad nos ayuda a producir menos errores en nuestro código que enviamos a producción. Entonces, habrá casos en los que tal vez muchos de ustedes sepan la respuesta mejor si surge un error de TypeScript. Y en ese caso, me encantaría que me lo hagas saber. No soy orgulloso. No pretenderé ser la persona de TypeScript. Soy una persona de GraphQL. Soy una persona de modelado de datos. Entonces, estoy feliz de ayudar con preguntas sobre eso. Pero esto es básicamente todos nosotros aprendiendo cómo construir aplicaciones de una manera más futura, más estable, más segura utilizando algunas herramientas y tecnologías que realmente han proporcionado mucha estabilidad y sí, una huella de seguridad de tipos para la comunidad en su conjunto. Entonces, esa es básicamente la premisa.
2. Introducción y Pautas del Masterclass
Short description:
Vamos a empezar desde cero y construir esto juntos. Siéntete libre de encender tus cámaras, hacer preguntas y programar junto conmigo. Hagamos de esto una experiencia colaborativa.
Lo que tengo, si ves el repositorio de GitHub, vamos a empezar desde cero. Y a medida que avanzamos, estaré pegando código dentro de la ventana. Vamos a construir esto juntos. Y luego haré la mayor parte de ese código disponible a través del repositorio. Y lo que me pregunto, porque en este momento, nadie más está encendiendo sus cámaras. Entonces, puede que solo sea, ya sabes, un poco de verme programar hoy por lo que parece. ¡Oye, tengo a alguien! Lo que podemos hacer es empezar a desarrollar este repositorio a medida que avanzamos y luego podremos seguir avanzando. Así que realmente aprecio que la primera cámara esté encendida. Este es un masterclass informal. No es un aquí están mis diapositivas y por favor no me hagan preguntas. Se permite que todos enciendan sus cámaras. Puedes interrumpir, levantar la mano, hacer una pregunta. Tenemos salas de grupos disponibles. Si hay un momento en el que digamos, vamos a tomar cinco minutos y dividirnos en grupos más pequeños para entender lo que estamos haciendo. Pero hoy se trata de que todos puedan programar juntos. Entonces, ¿suena bien? ¿Hay alguna pregunta antes de que empiece? Estoy mirando Zoom. Estoy mirando Discord.
3. Configuración de un Proyecto en la Nube con Hazura
Short description:
Para empezar, configura un proyecto en la nube con Hazura navegando a cloud.hazura.io/projects. Regístrate para obtener una cuenta y, si aún no tienes una, configura una cuenta de Heroku para una conexión de base de datos más rápida. Echa un vistazo a la página de precios para ver el nivel gratuito, que ofrece un paso de datos de un gigabyte y 60 solicitudes por minuto. A continuación, configura los resolutores de API accesibles en la nube utilizando ng-rock u otros servicios como Versal o Heroku. El masterclass proporciona un repositorio Git con una división entre una carpeta backend para la integración continua con Hazura y una aplicación Next.js para el front-end. Configura las variables de entorno, incluyendo una URL basada en acciones, un rol no autorizado de GraphQL de Hazura y un secreto JWT. Asegúrate de tener una forma de agregar una base de datos, preferiblemente una cuenta de Heroku, y tener configurado tu proyecto de Hazura. Procedamos utilizando el nivel gratuito y dando un nombre al proyecto. Después de configurar el panel de control, prueba ng-rock para ver si puede abrir un puerto antes de tener un puerto activo escuchando. Copia la dirección reenviada y mantén la sesión activa. Configura las variables de entorno inicializándolas con los valores apropiados del archivo readme en el repositorio Git.
Muy bien. Entonces, vamos a empezar. Para empezar, lo que vamos a necesitar hacer es configurar un proyecto en la nube con Hazura. Para hacer eso, puedes ir a cloud.hazura.io/proyectos. Ahora, ya estoy autenticado. Así que eso es en lo que estamos. Así que les voy a dar a todos unos dos o tres minutos para que se registren y obtengan una cuenta antes de que sigamos adelante. Y voy a presionar el botón de nuevo proyecto aquí y lo dejaré en esa pantalla mientras esperamos. Y estamos configurando nuestras provisiones de SaaS en este momento. Así que, de nuevo, si aún no tienes una, te recomiendo encarecidamente que configures una cuenta de Heroku también, porque esa será la forma más rápida de conectar una base de datos de Postgres a Hazura, ya que tenemos esa integración de nivel superior. Pero siéntete libre de usar tu propia base de datos. Mientras hacen eso, echemos un vistazo rápido a la página de precios. Así que cuando veas el nivel gratuito aquí, que es el que usaremos hoy, siempre me gusta saber qué significa realmente este `gratis` aquí. ¿Se apaga en 30 días? No, es gratis para siempre. Tienes un paso de datos de un gigabyte y 60 solicitudes por minuto. Eso está bastante bien para los niveles gratuitos de los desarrolladores. Así que definitivamente te permitirá hacer un proyecto a nivel de hobby en producción, especialmente porque tenemos almacenamiento en caché incorporado y otras cosas. Así que siéntete libre de usar esto y no te preocupes de que se apague en tus proyectos personales. Mientras eso sucede, y si no captaste el nombre del proveedor de la base de datos, ese será Heroku. De nuevo, ya estoy autenticado, pero puedes crear fácilmente una cuenta, seguir adelante y usarla para crear una cuenta gratuita. Y todo lo que necesitas hacer es tener una cuenta. El resto se automatizará para nosotros. Solo tener la cuenta existente será útil en este caso. Así que, dediquemos otros dos o tres minutos a esto porque esta es la parte lenta. La tercera cosa que será útil en algún momento es que vamos a necesitar tener resolutores de API accesibles en la nube, que he mencionado un par de veces en este punto. Voy a usar ng-rock, que es este servicio aquí. Y lo que hace es crear túneles en la nube directamente a tu computadora. Esto ha existido durante mucho tiempo, así que no es como una solución ultra hacky. Pero tienen un servicio gratuito muy básico aquí. Este será el que usaré hoy. Puedes usar Versal. Puedes usar otra aplicación de Heroku para implementar tu próxima aplicación. Yo elegí esto porque el repositorio en el que nos basamos hoy, y les daré una descripción del código, y luego creo que todos deberían estar al día con sus cosas. Así que lo que tenemos aquí en el nivel superior es una división entre una carpeta backend aquí, que tiene las estructuras de metadatos que necesitarías para configurar una integración continua con Hazura. Eso es un servicio beta en este momento, y esta mañana no me daba confianza de que fuera a ser una buena idea lanzar a los 30 de nosotros al mismo tiempo. Así que voy a guiarnos a través de la utilización de otras formas de configurar un proyecto de Hazura, lo cual no es un problema en absoluto. Si quieres tomar este repositorio, y lo iré completando cada vez más en el próximo día para poner todas las cosas que vamos a hacer hoy. Esta es la primera vez que enseño este masterclass, así que también hay mucho descubrimiento. Así que estoy aprovechando ese aprendizaje y haré que este repositorio esté limpio. Pondremos todo el código allí. Así que podrías usar esto para configurar el backend para una estrategia de implementación continua, y luego la aplicación de front-end es simplemente donde almacenaba la aplicación web que estaba conectada. Esta es una aplicación Next.js. De nuevo, vamos a hacer este paso juntos, así que no te preocupes. Vamos a hacer esto juntos, así que está todo bien. Muy bien, así que espero que en este punto tengas una forma de agregar pronto una base de datos, idealmente una cuenta de Heroku, y luego tienes configurado tu proyecto de Hazura. Idealmente, estás viendo una pantalla similar a la que tengo configurada. Si alguien está atascado, avísame en las preguntas y lo revisamos, pero no veo a nadie en pánico en el chat, así que vamos a seguir adelante. Muy bien, así que vamos a hacer clic en el nivel gratuito aquí. En realidad, antes de hacer eso, vamos a darle un nombre al proyecto, porque los nombres de proyecto son todo, ¿verdad? Así que voy a llamar a este RA Workshop Live. Eso es para React Advanced, para aquellos de ustedes que todavía se están despertando esta mañana. Error al crear el proyecto, el nombre del inquilino no está disponible. Alguien más tomó mi nombre de proyecto. Muy bien, voy a quitar los guiones en el mío, y vamos a llamar a esto RA-Jesse Workshop. Veamos si eso nos da algo. Muy bien, ahora lo que tenemos aquí es nuestro panel de control básico que vamos a utilizar para configurar muchas de las piezas aquí en adelante. Así que en este punto, voy a hacer una prueba rápida aquí que no hice antes. Así que voy a abrir Terminal aquí, porque usar ng-rock va... Y si estoy diciendo mal este nombre, si alguien lo sabe, siéntete libre de corregirme, porque nos va a enojar a todos para cuando terminemos hoy si lo digo mal una y otra vez. Así que voy a probar esto para ver si ng-rock me permite abrir un puerto antes de tener un puerto activo escuchando en este lado. Así que vamos a probar esto aquí rápidamente. Y el comando para eso... Vamos a aumentar el tamaño de fuente. Puedes ver mis errores aquí. Eso es divertido para todos ustedes. Vamos a hacer esto ng-rock HTTP 3000, porque lo que quiere hacer es reenviar una dirección de servidor público al puerto 3000 en mi máquina aquí localmente. Y mi pregunta es, ¿funcionará si no tengo nada escuchando? Parece que sí. Así que esto es lo que vamos a hacer. Vamos a copiar esta dirección reenviada. El HTTP aquí está totalmente bien. Y vamos a necesitar mantener esta sesión activa. De lo contrario, tendrás que cambiar algunas configuraciones aquí en un momento. Y te diré por qué es eso. Porque ahora, en nuestro panel de control, vamos a configurar algunas variables de entorno que nos serán útiles a lo largo del resto de nuestro proyecto. Ahora, si estás siguiendo el repositorio Git... Y déjame poner eso en la pantalla aquí. Ve al readme al principio aquí. Así que lo que necesitamos hacer es inicializar algunas de nuestras variables de entorno. Parece que mi formato está un poco desordenado ahí. Lo siento. Vamos a agregar una URL basada en acciones. Esa es la que acabamos de copiar aquí. Tenemos un rol no autorizado de GraphQL de Hazura. Eso es lo que nos dará acceso abierto a nuestro punto final de GraphQL. De lo contrario, está completamente bloqueado. Y luego vamos a necesitar agregar un secreto JWT, que supongo que todos tienen
4. Configuración de URL basada en acciones y Rol Anónimo
Short description:
Comenzaremos configurando la URL basada en acciones y el rol anónimo como variables de entorno.
Probablemente vayamos a tener el mismo secreto hoy. Mala práctica. Pero no importa. Seguiremos adelante. Así que vamos a empezar configurando nuestra URL basada en acciones. Volviendo al proyecto del masterclass aquí, voy a crear una nueva variable de entorno. Y el nombre que queremos darle será la URL basada en acciones. Así que simplemente la llamaremos así. Y ese es el nombre clave. Intentémoslo de nuevo. URL basada en acciones. Bien. Ahora voy a pegar el valor. Ese es el repositorio de GitHub. Bien. Esa es mi base. Así que la tuya debería ser diferente si usas la mía. Te decepcionarás. Muy bien. Hemos agregado la URL basada en acciones. El siguiente entorno
5. Configuración de Permisos y Variables de Entorno
Short description:
Hazura tiene un conjunto muy elocuente de permisos y cómo podemos configurar nuestra capa de datos y acceso. Estamos identificando un rol especial que es el rol que puedo usar en el resto de mis verificaciones de permisos. Definimos el rol no autorizado de GraphQL de Hazura como 'anónimo' y agregamos el secreto JWT de GraphQL de Hazura. El verificador JWT nos permite establecer el tipo de cifrado y definir un nombre específico para una cookie dentro del encabezado. Configuramos el resto de nuestras variables de entorno manualmente. Lanzamos la consola y exploramos las diferentes partes de la plataforma de Hazura, incluyendo el Explorador de API, el explorador gráfico, las acciones, los esquemas remotos, los eventos y el monitoreo. Finalmente, nos movemos a la pestaña de datos.
La variable que queremos agregar es ese rol anónimo. Así que Hazura tiene un conjunto muy elocuente de permisos y cómo podemos configurar nuestra capa de data y acceso. Lo que estamos haciendo en este caso es identificar un rol especial que es este es el rol que puedo usar en el resto de mis verificaciones de permisos. Y esto tendrá sentido en un minuto. Pero este es el nombre del rol que podré usar en todo lo demás y decir, como, permisos para seleccionar cosas, para actualizar cosas, a lo cual no deberías dar ningún rol de actualización a usuario anónimo. Pero vamos a definirlo aquí ahora. Así que si solo busco escribiendo más o menos no autorizado, veré la variable de entorno predeterminada aquí. Eso es el rol no autorizado de GraphQL de Hazura. Y le daré el nombre anónimo a la mía. Esa es una buena práctica con muchas de las demos y cosas que hacemos en Hazura. Así que si quieres copiar código, es posible que prefieras elegir ese nombre en lugar de otro. Pero está bien si quieres tener un nombre diferente. Y con eso definido, vamos a agregar el último aquí, que será el secreto JWT de GraphQL de Hazura. Veamos qué está pasando aquí. Aquí está lo que está sucediendo. Este es el verificador JWT. La clave, nuevamente, esta es una clave que no deberías usar. Yo lo haré, pero tú no deberías. Deberías usar una clave segura aquí que solo tú y el servidor conozcan. Y luego establecemos el tipo de cifrado para verificarlo realmente. Y luego aquí está la parte crítica que es un poco nueva si ya estás familiarizado con algunas cosas de Hazura. Podemos dar un nombre específico a una cookie dentro del encabezado para permitirle verificar las cookies de los servidores o HTTPS. Anteriormente siempre lo enviábamos desde el cliente. Puedes enviar JWT desde el cliente. Eso está bien. Hay mucha conversación sobre si almacenar JWT y cosas como el almacenamiento local o cookies no protegidas no es técnicamente bueno porque, ya sabes, cualquier cosa puede acceder a ello incluso aunque sea un token cifrado. Con las cookies HTTPS, que ahora admitimos, puedes definir cualquier cookie que quieras llamar así y pasarla. Y en ese caso, luego podemos restablecer esa cookie en nuestra aplicación hoy. Eso nos dará una forma muy protegida de autenticarnos contra nuestro servidor. Así que buenas cosas. Vamos a copiar todo esto. Y vamos a buscar el secreto JWT de GraphQL de Hazura. Así que voy a mover esto un poco a un lado, me pregunto. No creo que lo veas tal vez, pero yo lo veo y me molesta. Creo que puedo moverlo aquí probablemente. Sí, eso funciona. Deberías seguir viendo mi pantalla bien. Vamos a volver a la consola. Vamos a eliminar esa página porque no la necesitamos. Y voy a ir aquí ahora, agregando la siguiente variable de entorno. Así que simplemente vamos a buscar JWT aquí. Nuevamente, obtenemos una sugerencia para la que necesitamos. Y vamos a pegar ese valor tal cual. Vamos a agregar eso. Si no elegiste una clave lo suficientemente larga, te lo dirá. Así que definitivamente asegúrate de que sea un carácter de 32 bits. Y a partir de ahí, vemos nuestros pasos para lo que necesitábamos aquí. Se crearon nuestras variables de entorno. Así que aquí tenemos el siguiente paso. Si estás usando CID, lo cual no estamos haciendo, lo omitiremos. Si estás usando, y puedo mostrarte dónde estará. Así que es bastante sencillo. Irías a implementación de git. Identificarías el repositorio del que has bifurcado este, y luego podrías conectarlo a ese repositorio y darle la ruta a la carpeta backend o como quieras llamarla. Y encontrará el archivo config.yaml, que luego apunta a los archivos de metadatos que necesitas. Así que eso no es lo que necesitamos para este caso. Vamos a omitir eso. Lo que vamos a hacer es configurar el resto de las nuestras manualmente aquí. Así que nuevamente, recomendaría usar el repositorio de GitHub para seguir aquí, porque vas a querer hacer algo de copiar y pegar aquí. Tenemos una declaración SQL que vamos a poder usar en, en solo un minuto, para nuestras tablas para obtener un modelo de usuario que esté definido de la manera que queremos que esté definido. Así que volvamos a nuestro proyecto. En este punto, podemos ir y lanzar nuestra consola. Dale un segundo para que se inicie. Y aquí tenemos un sistema en funcionamiento. Probablemente hayas visto que en el nivel gratuito, solo tenías acceso al mercado de EE. UU. Si estabas usando el nivel de pago, obviamente podrías instalar esta implementación en la nube donde quieras. Así que desde aquí, si no estás familiarizado con la plataforma de Hazura, podemos hacer un recorrido rápido, ver las partes. Aquí tenemos el Explorador de API. Esto te permite hacer cosas como verificar tus parámetros de seguridad para el acceso global. Tenemos cosas como configurar puntos finales REST para resolutores. Voy a pasar rápidamente por esto, porque lo veremos más adelante si tenemos tiempo. Tenemos el explorador gráfico. Así que si eres nuevo en GraphQL, este será tu mejor amigo, porque nos permite explorar GraphQL localmente. Lo haremos a medida que avancemos. Así que no voy a dedicar mucho tiempo a esto. Estoy omitiendo data por ahora, porque ahí es donde terminaremos. Acciones es donde vamos a definir mutaciones personalizadas para nuestro servicio, lo cual también haremos aquí muy pronto. Los esquemas remotos es donde agregarás cualquier tipo de fuente de datos remota de data. Si tienes otra API de GraphQL que quieres fusionar. Fuera del alcance de este caso, hay muchos recursos para este taller, pero tenemos muchos recursos para eso si es algo que te interesa. Eventos es para activar eventos de database que podrías escuchar. Así que puedes hacer una programación funcional reactiva agradable aquí, donde podrías decir cuando se actualiza un usuario, alertar a los medios, lo que quieras hacer. Y así es un buen sistema, pero no nos preocuparemos por eso hoy. Monitoreo, solo echaremos un vistazo muy breve por ahora. Esto nos permite ver algunas comprobaciones de salud generales, operaciones, y comportamientos de nuestro servicio. No es algo que vayamos a hacer ahora mismo. Probablemente ni siquiera lo hagamos hoy en absoluto. Veremos qué permite el tiempo. Pero esta es probablemente la mayor ventaja de cloud, el almacenamiento en caché incorporado, la observabilidad incorporada que te permite ver métricas de GraphQL que a veces es difícil de implementar por ti mismo. Así que a la pestaña de
6. Configuración de la base de datos y la API de GraphQL
Short description:
Para configurar la base de datos, puedes conectar tu propia base de datos o crear una usando la pestaña de Heroku. Hazura te permite realizar un seguimiento manual de las tablas o realizar un seguimiento de todas ellas para obtener una API de GraphQL inmediata. Construiremos un sistema básico de autenticación de usuarios con acciones de inicio de sesión y registro. El token de autenticación se almacenará en una cookie protegida para las solicitudes del cliente. Si el tiempo lo permite, utilizaremos la biblioteca easy peasy para la gestión del estado.
paso que necesitamos. Muy bien. Lo que haremos aquí es si tienes tu propia, si tienes tu propia, no GraphQL base de datos, si tienes tu propia base de datos, puedes conectarla aquí con los parámetros que necesitas. Si quieres hacerlo rápido, vamos a ir a la pestaña de Heroku y simplemente crear la base de datos. Probablemente, para la mayoría de ustedes, solicitará que se autentiquen con su cuenta de Heroku. Y una vez que te hayas autenticado, te permitirá crear una base de datos con solo presionar un botón, como estoy haciendo aquí, utilizando el nivel de hobby de la base de datos de Heroku. Hay algunas limitaciones en el nivel de hobby de Heroku, la mayoría de las cuales para cosas a nivel de hobby, nunca las notarás. Pero vale la pena mencionar que no creo que puedas cambiar de nivel con Heroku, si recuerdo bien. No es como si supieras que eventualmente quieres tener una base de datos de nivel superior con más características avanzadas, no creo que puedas simplemente hacer clic en actualizar. Creo que debes comenzar con el correcto desde el principio. Creo, no me cites en eso. Heroku, no te enfades conmigo. Así que tenemos nuestra base de datos configurada. A partir de aquí, tenemos un par de opciones sobre cómo podríamos crear nuestro modelo de datos. Nuevamente, soy la persona de la nube. Me gusta hacer estas cosas en la nube. A muchas otras personas les gusta hacerlo de diferentes maneras. Una forma de hacerlo es ingresar al esquema público actual de tu base de datos. Voy a ocultar estas pequeñas ventanas emergentes aquí. Voy a decir, crear una tabla. Luego puedo ingresar aquí y nombrar las cosas. Y puedo proporcionar columnas personalizadas y otras cosas que quiera hacer. Cosas típicas de modelado de base de datos, a través de una interfaz gráfica. En este caso, voy a ahorrar algo de tiempo en este punto porque tenemos bastantes puntos por recorrer. Entonces, en ese repositorio de GitHub, el fragmento de código que copiamos, que es esta declaración SQL, lo que hará es crear una función de marca de tiempo especial que utilizaremos para nuestras capacidades de actualización y creación para que podamos recibir una notificación si hay un comportamiento de actualización cada vez que algo suceda. Tenemos una tabla aquí que simplemente creará un ID único, que es un entero incremental. No hagas esto en producción. Utiliza la funcionalidad de UID incorporada que tenemos o algo que sería un enfoque mejor. Pero para una demostración y un taller, mantendremos esto bastante simple hoy. Podemos ver aquí las columnas totales que tenemos. Tenemos una columna de contraseña. Tenemos una columna de correo electrónico. Tenemos una columna de nombre, creada en, actualizada en y luego el ID. Cosas bastante estándar. No necesitas entender lo que está haciendo para poder pegarlo aquí. Y vamos a seguir adelante y creo que necesito alejar para deshacerme de esa ventana emergente de base de datos. Lo que sea. Vamos a ejecutar eso. Y hemos ejecutado correctamente la declaración SQL. Ahora deberíamos tener, si vamos arriba aquí, si hacemos clic de nuevo en nuestro esquema público, veremos que tenemos una tabla o vista no rastreada. En este caso, vamos a seguir adelante y hacer clic en rastrear o rastrear todo. Y aquí es donde Hazura brilla, porque puedes traer una base de datos de otro lugar con muchas tablas y puedes venir aquí y rastrear manualmente esas tablas o puedes rastrearlas todas y obtendrás una API de GraphQL inmediata sobre tus datos. Vemos estas columnas aquí, nombre, contraseña y lo que sea. Si vamos a la API, solo para verificar que todo funciona aquí, podemos ingresar una consulta y decir algo como usuario y nombre, y pudimos hacer esa consulta. Ahora, está vacío. Así que no será particularmente interesante observarlo en este momento, pero así es como funciona. Haré una breve pausa aquí. Hemos estado trabajando durante unos 30 minutos. ¿Alguien necesita un momento para ponerse al día? ¿Todos entienden lo que estamos haciendo? ¿Alguien está atascado? Estoy revisando todos los chats. Soy la última persona que ha escrito en ambos chats. Parece que todos van bien. Muy bien. Creo que es un poco rápido, dice alguien. Está bien para mí. Pero queremos trabajar con lo que todos puedan seguir. Ahora, esto es lo que puedo decir. Atrasado con ng-rock. De acuerdo. Leah, ¿necesitas el código? ¿O cuál es el problema? Puedo proporcionar el fragmento de código si eso ayuda. Puedo hacer eso. Así que déjame tomar... En realidad, recuerdo lo que era de memoria, lo cual no sucede con la mayoría del código. Así que será bastante sencillo con ng-rock, seguido del protocolo en el que deseas conectarte, seguido del puerto en el que deseas escuchar. Así que aquí viene en el chat. Básicamente, es ese comando ahí. Y si estás en una máquina con Windows, no tengo idea de qué hacer para solucionarlo. Pero también puede ser algo en lo que más adelante haremos, que es conectarlo a algo como Versal o algo similar y luego ni siquiera hacerlo como un puerto en tu máquina. Así que hay soluciones si esto sigue siendo un problema. Pero avísame si tienes problemas allí. Lo que probablemente haremos, porque tenemos salas de grupos, probablemente a los 45 minutos, haremos una breve sala de grupos, como cinco minutos más o menos. Y luego permitiremos que todos puedan ver lo que está sucediendo. Tal vez todos puedan ayudarse mutuamente durante unos minutos para ponerse al día. Y luego haremos una pausa de 10 minutos. Faltan 15 minutos para eso. Ahora, la persona que dijo que va un poco rápido, ¿es porque hablo demasiado rápido? ¿O es porque la progresión es demasiado rápida? Porque ambos problemas son posibles. Pero voy a asumir que tal vez sea un poco de ambos y tratar de ir más despacio. Bien. Todos estamos al día. Muy bien. Muy bien. Vamos a seguir adelante con el siguiente paso, que ahora será desarrollar nuestra API de GraphQL para que nos brinde puntos finales de resolución. Creo que omití explicar lo que estamos construyendo. Estamos comenzando con un sistema básico de autenticación de usuarios. Creo que mencioné esto en la descripción del taller, pero es un sistema de autenticación de usuarios básico. Tenemos una tabla con usuarios y luego tendremos una acción de inicio de sesión y registro en esa API. Y luego eso nos dará un token de autenticación que almacenaremos en una cookie protegida. Y en esa cookie protegida, podremos enviarla para autenticar nuestras solicitudes desde nuestro cliente. Y con suerte, si el tiempo lo permite y me siento bastante bien al respecto, lo envolveremos todo dentro de un easy peasy, que es una biblioteca, una utilidad de gancho de fácil uso que nos permitirá tener un mecanismo de estado de usuario persistente. Ahora, esto no es todo el código
7. Creación de acciones de inicio de sesión y registro
Short description:
Un compañero llamado Gavin Ray me ayudó a revolucionar la forma en que construyo aplicaciones. Hazuric Cloud es genial para las Mac M1. Ahora continuemos con las acciones. Definimos un nuevo campo de nivel superior para la acción de inicio de sesión, especificando los tipos de entrada y salida. También definimos un controlador para resolver la acción. La URL del controlador se basa en la URL base de la acción y la estructura de archivos del proyecto. Creamos la acción de inicio de sesión y procedemos a crear la acción de registro.
que se me ocurrió. Un gran agradecimiento a un compañero mío llamado Gavin Ray, quien me ayudó mucho con esto, y lo he dividido en partes más pequeñas. Pero esto es algo que creo que ha revolucionado la forma en que construyo aplicaciones. Así que muy bien, muy bien. Bueno, sigamos adelante y ngrok no sugiere automáticamente el binario correcto. Sí, también en una Mac M1. Sí, sí, eso es una experiencia de desarrollo divertida. Otra razón por la que Hazuric Cloud es increíble, porque el Rust y Haskell que ejecuta el motor de Hazura no funcionan tan bien con las Mac M1. Así que si te gusta Hazura, Cloud es una excelente manera de trabajar en una Mac M1. Solo quería mencionarlo. Muy bien, sigamos adelante con las acciones. Vamos a pasar a la pestaña de acciones. Echemos un vistazo rápido a lo que tenemos aquí. Tenemos las tablas creadas y nuestros usuarios creados. Ahora vamos a crear las acciones. Y tenemos agregar acciones de inicio de sesión. Así que código GraphQL, que es lo que debemos hacer aquí. Comenzaremos con nuestra acción de inicio de sesión. Así que voy a volver a cerrar esta pestaña. Ya no necesitamos estar aquí. Vamos a ir a la pestaña de acciones aquí en la parte superior de la consola de Hazura. Y vamos a hacer clic en crear. También he estado promocionando mucho Hazuric Cloud, porque me gusta mucho. Pero todo este código es de código abierto. Todo esto es código abierto, también. Así que si quieres ejecutarlo en Docker en tu máquina o en tu propia infraestructura, adelante. Este es el mismo producto, excepto por el monitoreo y algunas optimizaciones a nivel de servidor. Esta consola, la configuración, la interfaz, todo es parte del producto de código abierto también. Así que si eso es lo que te gusta, haz lo que te haga feliz. Aquí, lo que vamos a hacer es definir un nuevo campo de nivel superior en nuestra mutación que será una acción de inicio de sesión. Ya he escrito ese código para que podamos copiarlo y pegarlo. Pero es bastante sencillo. No es algo demasiado difícil de entender. Pero si lo pegamos aquí, tenemos el tipo de mutación de nivel superior, hay dos tipos de nivel superior o tres tipos de nivel superior dentro del ecosistema de GraphQL. Tienes suscripción, mutaciones y consultas. Las mutaciones son tus operaciones CRUD que no son de lectura. Así que crear, actualizar, eliminar. Y luego tenemos el inicio de sesión, que es el nombre que estamos agregando aquí. Ahora, lo que vamos a hacer, y el primer problema que me acabo de dar cuenta que también tengo que solucionar, es que no debemos llamar a esto input. Porque el ejemplo de código que he escrito en otro lugar espera que se llame params. Así que haremos params de inicio de sesión. Y luego tenemos esta entrada de inicio de sesión y una salida JWT de este SDL de GraphQL aquí. Ahora, vamos a copiar eso porque también lo he escrito aquí. Y simplemente lo pegaremos y explicaremos qué hacen. Lo que estamos haciendo es decirle a GraphQL aquí que tenemos estas definiciones de tipo personalizadas. Este tipo de entrada de inicio de sesión esperará un inicio de sesión. ¿Estoy haciendo inicio de sesión o registro? Estamos haciendo inicio de sesión. Vale. Así que el tipo de entrada de inicio de sesión toma el correo electrónico y la contraseña del usuario. Y luego va a devolver un JWT, que será un ID, un nombre, un correo electrónico y será el propio token. Ahora, para poder obtener esos datos y averiguar cómo o cómo debe ser esos datos, necesitamos tener un controlador que realmente funcione con este contenido para nosotros. Y ahí es donde lo definimos aquí en la parte inferior. Y aquí es donde todo este rollo de ng-rock ha sido un problema porque necesitamos poder definir dónde se encuentra este controlador, dónde se resuelve esta acción. Así que en mi caso, voy a robar el código de nuevo de GitHub. Y lo tengo justo aquí para la acción de inicio de sesión. Y lo vamos a pegar justo aquí en el área del controlador. Y lo que tenemos aquí es una interpolación de cadena parametrizada. Esta es la URL base de la acción que definimos al principio, la variable. La razón por la que tuvimos que hacer eso al principio es que si le das un nombre que no existe aquí, no se guardará porque necesita saber qué darle. Incluso si le das un valor ficticio, necesita saber que la variable de entorno existe, de lo contrario, no funcionará. Muy bien. Así que tenemos el controlador base de la acción, y luego tenemos la API barra API barra acciones barra inicio de sesión. Eso es simplemente cómo he estructurado el código para mi proyecto de Next.js. Si no estás familiarizado con Next.js, nuevamente, lo veremos aquí muy pronto. Tienes debajo de la ruta de páginas, por lo que cualquier archivo bajo la ruta de páginas se convierte en una ruta real para tu aplicación. Cualquier cosa debajo de la carpeta API se convierte en una ruta del servidor. Por lo tanto, solo se ejecuta en el servidor. No es accesible desde el cliente. Y luego, a partir de ahí, tienes libertad de elección. Porque estas son acciones en Hazura, para una nomenclatura, he decidido que barra acciones y almacenar todo lo que estoy mapeando a una acción de Hazura por limpieza y claridad del código, lo he puesto en un subdirectorio llamado acciones, y luego esto en particular lo llamo inicio de sesión porque la acción se llama inicio de sesión. Así que no me rompo la cabeza con la creatividad aquí, pero a veces como desarrollador, me atasco en este tipo de cosas. Y pienso, oh, esto es como una cadena mágica. ¿Hay una razón por la que se llama de esta manera? ¿Se romperá si cambio las cosas? No, solo tienes que hacer coincidir dónde colocas el archivo con dónde está esta ruta. Así que esto es simplemente por qué lo he llamado de esta manera. Y tal vez soy el único que se atasca en esas cosas, pero ahí lo tienes. Hemos identificado el controlador. Y nuevamente, no se está ejecutando nada aquí. No se está ejecutando ningún código allí. No hará ninguna verificación. Simplemente está diciendo que llamará a esa URL cuando alguien llame a esta acción de inicio de sesión. Haz clic en crear. Hemos creado el primer inicio de sesión. Muy bien. Ahora vamos a crear una nueva acción aquí. Y vamos a hacer que sea la acción de registro. Vamos a volver a copiar nuestro código. Así que vamos a hacer lo mismo aquí, el registro. Y quiero usar la magia del portapapeles aquí para hacer varias cosas a la vez. Y voy a volver a espero que no estés viendo esto de Zoom compartiendo la pantalla todo el tiempo.
8. Manejo de acciones de registro e inicio de sesión
Short description:
Para manejar las acciones de registro e inicio de sesión, debemos cambiar el nombre de la entrada a params. Podemos omitir la declaración de JWT ya que ya está en el sistema. También podemos reenviar los encabezados del cliente y definir un encabezado personalizado para la seguridad. Después de crear las acciones, debemos abrir los permisos para usuarios anónimos. Una vez establecidos los permisos, podemos probar la acción de registro en el Explorador de API. Sin embargo, aún debemos abordar el problema de no tener un punto final en ejecución en el resolvedor. Continuaremos creando salas de discusión para continuar con la siguiente etapa, que implica configurar el manejo de los puntos finales de la API utilizando una aplicación Next.js.
Qué molesto. Voy a pegarlo en esta nueva acción aquí, que en mi caso es el tipo de mutación registro. Nuevamente, debemos cambiar eso de entrada a params. Y nuevamente, eso se debe a que el código existente espera params. Podrías llamar a esto como quieras. Nuevamente, no es una cadena mágica aquí. Y voy a pegar la entrada de registro. Ahora voy a omitir el JWT porque cualquier tipo que crees es global. Y sé que ya tengo un tipo de JWT creado. Podría inspeccionarlo en la pestaña de tipos personalizados aquí también. Pero como sé que ya lo tengo, no tengo que declararlo aquí. De hecho, obtendría un error si lo hiciera. Así que voy a omitir la declaración de JWT. Porque ya lo tengo en mi sistema. Y tendré la entrada de registro declarada aquí en el punto final de params. Y simplemente pegaremos el controlador de registro justo allí. Así que guardo. Una breve conversación sobre qué es esto. Sincrónico significa que es una E/S de bloqueo. Se ejecutará la tarea, se espera que regrese, se establece un tiempo de espera si es necesario. La otra opción sería si fuera asíncrono, devolvería un ID de proceso. Y luego puedo suscribirme a ese ID cuando se complete. Para el registro, no nos preocuparemos por eso. Nos quedaremos con lo básico hoy. Por eso lo estamos haciendo así. Podrías reenviar los encabezados del cliente si quisieras. Podrías decir básicamente cualquier cosa que mi cliente esté pasando. Tal vez tengo una acción personalizada autenticada con un CDN o mi CMS u otra utilidad. Y quiero poder obtener credenciales data que mi cliente está autenticado contra Fitbit, por ejemplo, como una aplicación web. Y necesito enviar ese token junto con esta solicitud del resolvedor para poder obtener algunos data protegidos de mi controlador, si es posible. Podría reenviar eso junto con la solicitud aquí cambiando el reenvío de encabezados del cliente a webhook. Y luego también podría definir un encabezado personalizado aquí. Si tengo una clave especial que necesito proporcionar. No es una mala forma de realizar un apretón de manos de seguridad básico entre esta acción y tu resolvedor. Dándole un encabezado especial aquí para decir algo como, sabes, la clave secreta es 1234. Y luego en el controlador de acción poder verificar, hey, solo mi acción debería poder solicitar esto, ¿verdad? Así que eso no es un mal enfoque. Son desarrolladores inteligentes. Así que vamos a crear esto aquí. Y lo que tenemos en este punto es que hemos creado ambas soluciones. El último paso que voy a hacer aquí, y luego voy a cambiar esto a una rápida sala de discusión durante 10 minutos, porque solo quiero darles un poco de espacio, es abrir los permisos en estas dos acciones, porque deben ser puntos finales no protegidos, ¿verdad? No he iniciado sesión, si estoy intentando iniciar sesión. Y no he iniciado sesión si estoy intentando registrarme. Así que deben ser accesibles para nuestro rol anónimo que creamos. Comenzando con el registro, vamos a ir a permisos. Solo tendré que escribirlo una vez aquí. Nuevamente, es una cadena mágica que coincide con el nombre del rol anónimo que creamos al principio. Y ahora sabemos que esto es accesible para un usuario anónimo. Luego vamos a iniciar sesión aquí, y veremos que la pestaña de permisos ya no tiene a anónimo en mi tabla de roles. Solo tengo que actualizar esto uno. Y ahora esto también está disponible. Pero volvamos a mi API ahora al Explorador de API, veremos que si estuviera haciendo una mutación, y hago algo como buscar un registro, ahora veo que realmente tengo estas acciones de registro en el nivel superior de mi API. Así que tenemos el nombre, podemos poner yada. Y luego pondremos el correo electrónico. Y haremos algo como yada en YOLO.io. Así que estoy seguro de que debe haber un YOLO.io. Disculpas a ellos. Y luego pasaremos la contraseña, que sería como 123. Y luego con GraphQL, tengo que darle un tipo de retorno, que quiero obtener solo el ID y el token. Ahora, obviamente, si ejecutamos esto, obtendremos un error, porque en realidad no tenemos un punto final en ejecución en ese resolvedor. Eso será lo que abordaremos a continuación. Voy a dividir esto en salas de discusión durante cinco minutos, porque creo que todos deberían estar bastante actualizados. Pero lo haremos. Y veremos cómo funciona. Primero tengo que averiguar cómo hacer las salas de discusión. Y vi el botón antes. Primero tenemos que dejar de compartir. Así que dejaré de compartir. Hay un botón de salas de discusión. Así que vamos a probarlo, a ver qué hace aquí. Así que voy a lanzar aleatoriamente a algunas personas. Listo. Bien. Creo que todos han vuelto. Me gustaría saber en el chat si eso fue realmente útil o no. Avísenme. Porque no tengo que poner a la gente en salas de discusión. Pero tal vez fue útil. Así que vamos a pasar a la siguiente etapa ahora, donde lo dejamos. Creo que tengo que compartir mi pantalla nuevamente aquí. Donde lo dejamos fue obtener que las acciones aparezcan dentro de la API. Ahora debemos proceder con la configuración del manejo de esos puntos finales de la API. Para hacer eso, vamos a crear una Next.js
9. Configuración del proyecto Next.js y dependencias
Short description:
Ahora, creemos el proyecto Next.js ejecutando el comando NPX create next app. También instalaremos un conjunto de dependencias, incluyendo bcrypt, next connect, Apollo Client, cookie, easy peasy, env command, GraphQL, JSON web token, JWT decode, React JWT, subscription y subscription transport web socket. Además, agregaremos la biblioteca GraphQL Zeus, que genera tipos y un SDK local para puntos finales de GraphQL. GraphQL Zeus proporciona una forma estructurada y predecible de consultar contenido y crea un acoplamiento estrecho entre el servidor GraphQL y el código del front-end. Aunque GraphQL Zeus tiene algunas desventajas, como enseñar una nueva forma de escribir consultas y la falta de documentación, su naturaleza tipada ayuda a acelerar el desarrollo. Procedamos con la configuración del proyecto y la instalación de dependencias.
La aplicación que manejará este código. Ahora, estoy tratando de pensar cuál es el mejor lugar para pegar grandes porciones de código. La primera, la primera fase aquí. Sí, lo haremos de esta manera. Así que asegúrate de tener acceso a ese repositorio de GitHub. Y la primera, las primeras partes del código estarán allí. Y a medida que avancemos, lo pegaré una vez dentro del proyecto y lo subiré. Y luego, lo pegaré en el proyecto real que estamos creando juntos. Aquel que estamos haciendo desde cero siguiendo el tutorial aquí. Así que la mayoría del código ya existe en el repositorio de GitHub. Pero lo haremos juntos aquí. Lo primero que haremos ahora, después de agregar nuestros controladores y agregar la capa de permisos, es crear el proyecto de tipo Next.js. Para ello, necesitarás el comando NPX create next app seguido del nombre del proyecto, que puede ser el que desees. NPX ejecuta este comando desde la biblioteca NPM sin instalar nada. Es una utilidad global muy útil. La opción latest asegura que todo esté actualizado. Y la opción --TS hace que sea un proyecto TypeScript. Así que vamos a empezar. Voy a abrir una terminal aquí. Y si tengo mi terminal, tengo una terminal aquí. Así que vamos a seguir adelante, voy a navegar hasta mi directorio de desarrollo aquí. Bien, y dentro de Azura, vamos a entrar en mis talleres. Y voy a crear un nuevo proyecto aquí. Así que este NPX create, y voy a llamarlo RA-Jesse-workshop. Y eso me preguntará algunas cosas aquí, creo. Normalmente, tal vez ya he aceptado cosas en el pasado. Así que ahora deberíamos tener, si entramos en ese directorio, deberíamos poder entrar en el taller de RA. Así que si hacemos un LS rápido, vamos a hacer esto un poco más grande para poder verlo mejor. Solo trato de estar pendiente del chat rápidamente. La ventana de chat se me escapa en este momento. ¿Dónde está la ventana de chat? ¿Está en algún lugar? Creo que he perdido la ventana de chat. Bienvenidos a 2021. Ahí está el chat. Veo una pequeña burbuja roja. Sí, gracias por agregar un poco de color allí. No sé por qué esa ventana desapareció, pero ahí está. Muy bien. Lo que tenemos aquí es el proyecto básico en el que vamos a instalar un montón de dependencias para empezar. Así que si vas al proyecto de Git y te desplazas hacia abajo justo después del comando, verás las dependencias, y voy a copiarlas aquí, y luego las pegaré y las explicaré dentro del editor aquí. Así que déjame hacer zoom aquí de nuevo. Lo que tenemos aquí es que necesitamos la biblioteca bcrypt. Necesitamos la biblioteca next connect, que maneja los typings para las rutas de API de Next.js. Vamos a usar Apollo Client más adelante. La biblioteca cookie, que nos ayudará a trabajar con las cookies de manera muy sencilla. Easy peasy para la gestión del estado. El comando env nos permite ejecutar scripts de credenciales en el archivo package.json. GraphQL, que es una utilidad general en la que se basa Apollo. JSON web token. ¿Puedo desplazarme hacia abajo? Aquí puedo. Así que JSON web token, que será otra utilidad que nos permitirá leer valores de los tokens web JSON. JWT decode, lo mismo. React JWT, lo mismo. Subscription. No puedo desplazarme. Lo haré de esta manera aquí. Subscription transport web socket. Si tengo tiempo, en realidad usaremos el nuevo protocolo GraphQL WS en su lugar. Si incluso llegamos a agregar suscripciones a nuestro sistema en general, porque esta es técnicamente una biblioteca obsoleta. Es lo que encontrarás en la mayoría de los ejemplos. GraphQL-WS es el nuevo, que es prácticamente un reemplazo directo con algunos ajustes muy menores. Pero lo veremos. Y esas son nuestras dependencias que necesitaremos para este proyecto. Así que déjame abrir la terminal. Vamos a ejecutar este primer grupo de dependencias aquí. El segundo paso será agregar las dependencias de desarrollo. Así que dejaremos que termine de ejecutarse aquí. Y vamos a seguir adelante y eliminar eso, que será solo un soporte básico de tipos para la biblioteca de tipos GraphQL. El más importante de todos, que en realidad no es parte de la biblioteca de tipos, o no es una dependencia de desarrollo de tipos, es la biblioteca GraphQL Zeus. Ahora, si no te lo advertí antes, esta es una forma muy opinada de construir aplicaciones. La advertencia está llegando. ¿Qué es ahora? Hemos estado aquí durante aproximadamente una hora, y ahora llegamos a la advertencia de que esta es una estructura opinada. GraphQL Zeus es una biblioteca muy interesante que hace varias cosas. Una de las cosas muy específicas que hace es tomar un punto final de GraphQL y generar tipos y un SDK local para esos puntos finales que te permite consultar tu contenido de una manera muy estructurada y predecible. Y esto crea el acoplamiento o el apretón de manos entre tu servidor GraphQL y el código del front-end. Algunas desventajas de GraphQL Zeus que la gente ha mencionado es que te enseña una nueva forma de escribir consultas. Y sí, GraphQL ya es nuevo para mucha gente. Así que lo veremos y veremos a qué se refieren con eso. Otra, esta es mi queja personal, encuentro que la documentación es un poco escasa. Así que no me quejaré mucho de eso. Es una herramienta de código abierto, así que puedo solucionarlo, tú puedes solucionarlo. Así que no me quejaré mucho de eso. Solo requiere un poco de prueba y error, pero afortunadamente es una biblioteca tipada. Así que muchas veces puedes hacer que las cosas funcionen más rápido sin conocer la forma correcta técnicamente, porque los tipos te dicen qué hacer. Dicho esto, volvamos a nuestro proyecto ahora. Así que lo que tenemos aquí es el proyecto básico en el que vamos a instalar un montón de dependencias para empezar. Así que si vas al proyecto de Git y te desplazas hacia abajo justo después del comando, verás las dependencias, y voy a copiarlas aquí, y luego las pegaré y las explicaré dentro del editor aquí.
10. Configuración de secretos de la API y creación de rutas de la API
Short description:
En esta parte, abrimos una nueva ventana de terminal y continuamos con el taller de RA-GSC. Configuramos Visual Studio Code y comenzamos a agregar nuestros secretos de la API. Creamos un nuevo archivo llamado dot local y lo completamos con la información necesaria de nuestro proyecto Hazura. Obtenemos el secreto JWT y el secreto de administrador. Nuestro entorno ahora está configurado y pasamos al siguiente paso de crear las rutas de la API real y el subdirectorio llamado acciones.
Volvamos a la terminal que acabo de cerrar, lo cual es menos útil. Quiero decir, abramos una nueva ventana de terminal y volvamos a ese proyecto. Y ese es el taller de RA-GSC. Muy bien. Así que tenemos el producto, tenemos las dependencias. Vamos a abrir Visual Studio Code, usa el que prefieras. Me gusta Visual Studio Code porque hace muchas cosas por mí y no tengo que preocuparme por eso. Así que elige tu IDE preferido, pero yo usaré este. Y desde aquí, lo que vamos a hacer es agregar, y voy a abrir esto en una ventana lateral aquí. Así que lo que vamos a hacer es mover esto aquí. Voy a estar alternando entre estos proyectos. Y sí, eso es lo que vamos a hacer. Si alguien tiene algún problema con eso en términos de reducción de movimiento y cosas así, por favor avísenme y cambiaré a una opción de movimiento más sutil. Pero lo voy a intentar por ahora. Si eso te molesta, avísame. No quiero causar convulsiones a nadie. Vamos a empezar agregando nuestros secretos de la API. Así que vamos a copiar el código de las variables de entorno desde aquí, y vamos a ir al proyecto aquí. Y voy a crear un nuevo archivo llamado dot local. Y vamos a completarlo aquí. Así que vamos a volver a nuestro proyecto Hazura. Y podemos obtener esto en un par de lugares. También podemos obtenerlo desde aquí. Vamos a copiar el punto final de la API GraphQL aquí, que es este. Y lo vamos a pegar aquí debajo del punto final de Hazura, porque verás que es el que tiene el sufijo v1 GraphQL. Así que vamos a usar la dirección GraphQL completa allí. Ahora vamos a copiar la parte hasta app para la siguiente URL pública de Hazura. La razón por la que hacemos esto es que este código está diseñado de tal manera que podrías tener un entorno de desarrollo y un entorno de producción. Y así puedes pasar algunas URL diferentes aquí. He reducido todo eso para los propósitos de este taller para que sea más fácil y directo de entender. Pero el código está ahí. Y puedes adaptarlo fácilmente a esa necesidad que tenemos material al respecto en cierta medida. Puedes ver la superaplicación de Hazura como ejemplo. Es un gran monorepo de comercio electrónico. Como ejemplo, referencia de arquitectura, gran parte de este código proviene de allí, solo que está más limpio. Pero esa es la razón por la que lo tenemos de esta manera. Pero en el código base, verás algunos lugares donde las cosas parecen redundantes. Eso se debe a que se pretendía que pudieras hacer cosas como entornos de desarrollo. Muy bien. Así que aquí tenemos el secreto de administrador de Hazura. Necesitamos obtener eso a continuación. En realidad, lo completaré al final, porque pasaré menos tiempo exponiéndolo. Lo que vamos a hacer es obtener el secreto JWT, que si recuerdas, lo obtuvimos del archivo readme del repositorio de GitHub. Así que será exactamente esta cadena de aquí arriba, porque esto es lo que necesita verificar el servidor de Hazura desde el frente y desde el servidor. Vamos a obtener esto aquí y luego vamos a llamarlo el secreto JWT aquí. Y luego, para el secreto de administrador, volvemos a la consola. Ojalá supiera cómo quitar esa cosa de mi camino. ¿Hay alguna forma de acoplarla al costado? No. No sé. Claro. Lo que sea. No. Bien. Si alguien quiere transcripciones, creo que puedo activar las transcripciones. Solo avísame. Eso sería útil. Luego me recuerdas dónde estoy. De acuerdo. Así que tenemos eso. Y ahora necesito obtener el secreto de administrador. Ahí vamos. Poniéndome al día. Aquí está un poco más tarde. Soy mayor. Está bien. Secreto de administrador. Vamos a copiar eso desde aquí. Y lo vamos a pegar aquí. Y cerramos esa ventana. Así que nuestro entorno, nuestro.env.local está creado con los valores que necesitamos ingresar. Y creo que son bastante autoexplicativos. Pero puedes echar un vistazo. Quemaré ese token más tarde de todos modos. Así que si necesitas verlo, avísame. No sabré quién arruinó el taller. Ese es el problema. Esa es la única parte triste. Muy bien. Ahora tenemos todo configurado. Vamos a ver qué nos dice el archivo readme que hagamos a continuación. El archivo readme está aquí. Así que vamos a ir al archivo readme. Y hemos definido nuestros secretos de entorno. Ahora estamos creando las rutas de la API reales. Y ahora estamos llegando a los bits reales de Next JS, los bits de TypeScript que son un poco más específicos. Verás la estructura aquí que debemos seguir dentro de la ruta de páginas. Y voy a ver esto en un momento. Dentro de la ruta de páginas, vamos a necesitar una subruta de API que exista con este andamiaje que ya creaste. Y luego vamos a agregar
11. Configuración de la Ruta de Inicio de Sesión y Código
Short description:
Vamos a comenzar con la ruta de inicio de sesión. Te mostraré dónde encontrar el código dentro del repositorio de GitHub. Dentro de la carpeta front end complete, ve a la ruta de páginas, luego a las acciones de la API y dentro del archivo de inicio de sesión encontrarás el código. Copia y pega este código en el archivo login.ts dentro de la carpeta de acciones. Discutamos qué está sucediendo en este código y abordemos cualquier problema.
Otro subdirectorio llamado acciones. Y luego vamos a darle los resolvedores reales que necesitamos hacer. Entonces, lo que vamos a hacer es comenzar con el registro y el inicio de sesión al mismo tiempo. Y vamos a eliminar el falso que nos han dado por defecto. Así que debajo de la ruta de páginas aquí, vamos a ir debajo de la carpeta API. Vamos a eliminar esta versión aquí, este hello.ts. Es un código útil, pero tengo algo de código escrito para nosotros que vamos a ver. Así que solo vamos a saberlo por ahora. Voy a crear una carpeta aquí llamada acciones. Y dentro de acciones, vamos a obtener nuestro primero, que se llamará login.ts. Muy bien, lo que vamos a hacer aquí es mostrarte dónde encontrar el código dentro del repositorio de GitHub. Y luego voy a volver y quiero hacerlo desde lo que tengo aquí localmente. Así que dentro del repositorio, si vas a la carpeta front end complete, eso será completo. Y vas a la ruta de páginas y bajas a las acciones de la API, y entras en el inicio de sesión. Aquí está el código, ¿verdad? Así que esto es lo que vas a copiar y pegar directamente en las diferentes acciones que tienen el nombre que tienen. Voy a tomar el mío de aquí, porque tengo lo mismo abierto localmente. Y aquí es donde voy a pegar el contenido y publicarlo a medida que avanzamos, una vez que lleguemos a las partes que tengo que copiar y pegar desde otro lugar que no está disponible actualmente. Así que vamos a trabajar con esa estructura. Tengo las páginas, tengo la API, tengo el inicio de sesión. Y vamos a comenzar con una ruta de inicio de sesión. Así que voy a copiar esto y luego vamos a hablar un poco sobre lo que está sucediendo aquí. Y vamos a ver muchos problemas. Así que vamos a ver qué está pasando.
12. Creando Comportamiento de Inicio de Sesión y Utilidades de Cookies
Short description:
La biblioteca vCrypt es una biblioteca de encriptación utilizada en este comportamiento de inicio de sesión. Los controladores de API NextConnect nos permiten mapear los tipos de solicitud y respuesta de NextAPI. La función handler.post maneja las solicitudes POST a la ruta de inicio de sesión. Consultamos los usuarios basados en el correo electrónico y devolvemos el ID, nombre, correo electrónico y contraseña. Si el usuario no existe o la contraseña es inválida, se envían mensajes de error apropiados. Si el inicio de sesión es válido, se genera un JWT y se establece como una cookie. El token, ID, nombre y correo electrónico se envían de vuelta a través de Hazura. El front-end se comunica con Hazura a través de rutas y acciones de API. Se proporciona el código para el comportamiento de inicio de sesión. A continuación, agregaremos los archivos necesarios y probaremos el controlador de registro.
Aquí en este punto. Muy bien. Entonces, la biblioteca vCrypt, es una biblioteca de encriptación. Esta no es una conversación sobre encriptación. Así que no me hagas muchas preguntas al respecto. Veremos cómo se invoca, pero no vamos a profundizar en ello. Tenemos los controladores de API NextConnect. Esto nos permite mapear los tipos de solicitud y respuesta de NextAPI, lo cual es realmente útil para poder usar el middleware de estilo Connect.Entonces, tenemos esta idea de handler.post, que se encargará de manejar las solicitudes POST a la ruta de inicio de sesión. Hay otras formas de hacer esto. No tienes que escribirlo de esta manera. Esta es simplemente la forma que resulta útil porque muchas personas están acostumbradas a esta lógica de enrutador de estilo Connect. Entonces, lo que sucede es que llega la solicitud. Hacemos un poco de registro en la consola porque somos desarrolladores profesionales y así es como hacemos la depuración. Y luego tenemos el correo electrónico y la contraseña que estamos leyendo de la ruta de inicio de sesión, de los parámetros de entrada de inicio de sesión. Entonces, la entrada es lo que Hazura llama todo lo que recibe como tipo de entrada. Y luego esos parámetros son esa clave que teníamos al declarar nuestro tipo personalizado para el inicio de sesión. Así que cuando cambiamos todo de entrada a parámetros, es por eso que hicimos eso porque tuve un pequeño error mental. La entrada es lo que envía Hazura. Lo que se pase como entrada a partir de ese punto es lo que se va a leer de la solicitud real. Así que es la entrada y luego los parámetros o como queríamos llamarlo, podemos llamarlo así. Estamos obteniendo los parámetros de entrada del correo electrónico y la contraseña. Y aquí estamos usando un cliente, que crearemos en un momento, que realizará una consulta. Y esta es la consulta de GraphQL, pero aquí es donde se pone un poco complicado, ¿verdad? Vamos a consultar los usuarios donde el correo electrónico sea igual al correo electrónico que pasamos aquí. Y luego vamos a devolver la propiedad ID, el nombre, el correo electrónico y la contraseña de nuestro usuario. Y lo que haremos a partir de ahí es decir, bueno, si el usuario no existe, simplemente lo rechazamos. Y luego vamos a comparar la contraseña que obtenemos del intento de inicio de sesión con la contraseña que tenemos almacenada. Estas son contraseñas encriptadas. Entonces, lo que hace esta comparación de bcrypt es tomar el valor de cadena más el valor encriptado y luego toma lo que sabe que es el valor encriptado y los compara para ver si este es realmente un inicio de sesión válido. Si no lo es, también enviará de vuelta un mensaje de error. Aquí es donde puedes personalizar tus mensajes de error si quieres. Si el usuario llega hasta aquí, significa que existe y su contraseña es válida, entonces vamos a generar un JWT para ellos o les daremos un rol predeterminado de usuario. Esta allowedRoles es un tema de seguridad donde básicamente puedes decir que los roles solo pueden ser uno de los definidos aquí dentro de los allowedRoles. Y luego se establecerá el XHazuraUserID. Este JWT se establece como una cookie, el token de usuario de Hazura. Este es ese objeto JWT que colocamos dentro de nuestra variable de entorno. Entonces, al decir que esta cookie se enviará de vuelta, será solo HTTP, lo que significa que no se puede leer desde el cliente. Y luego se enviará de vuelta de forma segura, se le dará un tiempo de vida y se establecerán algunos parámetros diversos. Estas son todas invocaciones mágicas que nadie realmente entiende lo que realmente significan. Pero esto funciona. Así que de nada. Las cookies son un arte oscuro extraño. Así que sí, eso fue divertido para depurar un poco. De todos modos, luego tenemos el retorno de la respuesta que vuelve al controlador de acción de Hazura. Entonces, estamos enviando de vuelta el token, el ID, el nombre y el correo electrónico. Así que si recuerdas el tipo que identificamos como el tipo JWT, este es el tipo JWT. Tiene un token, tiene el ID, tiene el nombre, tiene el correo electrónico. Eso se envía de vuelta a través de Hazura. Es un poco confuso mentalmente saber que nuestro front-end no está realmente hablando con nuestras rutas de API en términos de, bueno, estás co-localizando la lógica. Así que tienes una página aquí. Lo que realmente está sucediendo es que una solicitud desde esa página va a Hazura. Puedes acercarte a la cámara aquí. Subiendo a Hazura, golpeando una acción, volviendo a bajar a la ruta de API, volviendo a subir a través de Hazura y de vuelta al usuario. Y esto es solo una forma de tener una capa autenticada porque este cliente podría estar, nuestros controladores podrían estar en otro lugar. Podríamos hacer una solución de bajo código. Podríamos hacer un Lambda en algún lugar. El hecho de que estemos haciendo nuestro código aquí dentro de las rutas de API para nuestros controladores de acción es totalmente neutral. No importa en absoluto en términos de lo que realmente estamos tratando de lograr. Así que, solo para que lo sepas, eso es más o menos lo que está sucediendo aquí es que son propósitos técnicamente separados. Así que no te preocupes demasiado por eso. De todos modos, eso es más o menos lo que está sucediendo aquí. Y el resto del código aquí es básicamente hacer que esto funcione, decirle que debe analizar el cuerpo. Y este es el controlador. Así que este es el comportamiento de inicio de sesión. Ahora, notarás que estamos obteniendo varios errores aquí. Y vamos a agregar cada uno de estos archivos uno por uno y hablar sobre qué hacen esas piezas. Y luego vamos a agregar nuestro controlador de registro. Y una vez que hayamos hecho eso, vamos a probar que funcione. Y eso es en lo que estamos. De acuerdo. Vamos a pasar a crear estos archivos en orden de arriba a abajo. Así que vamos a crear las utilidades de cookies. Nuevamente, esto está en el repositorio de GitHub. Así que deberías poder encontrarlo sin problemas. Voy a ir debajo de una carpeta que aún no existe que voy a crear en el nivel superior aquí llamada utils. Y dentro de utils, voy a crear un archivo llamado cookies.ts. Y en ese cookies.ts, voy a copiarlo nuevamente desde aquí. Y vamos a hablar sobre qué está haciendo esto. Estos son solo dos métodos muy simples aquí. Donde va a darnos una declaración de cookie serializada. Las cookies deben seguir un formato muy específico con la serialización y todo. Es útil tenerlo en un envoltorio. Porque la concatenación de cadenas no siempre es divertida. Así que vamos a agregar esto aquí. Tenemos este método setCookie que vamos a poder usar para crear un encabezado de cookie válido que enviaremos de vuelta desde el objeto de solicitud. No hay nada muy sofisticado aquí. Esto es simplemente lo que estamos haciendo. Así que estamos pasando
13. Configuración de Cookies, Utilidades del Cliente y Generación de JWT
Short description:
Estamos configurando un encabezado en el objeto de respuesta con una cadena de cookie válida. Luego, tenemos una función para destruir cookies que maneja la destrucción de cookies durante el cierre de sesión. El archivo de utilidades del cliente maneja las llamadas en el lado del servidor y del cliente, pasando los encabezados apropiados. La función de generación de JWT es un envoltorio para la utilidad JWT, creando un token JWT válido. Estas son abstracciones sobre tecnologías web básicas como configurar cookies y generar JWT. A continuación, solucionamos un problema con el archivo del cliente y agregamos una cadena mágica a la biblioteca.
Estamos configurando un encabezado en el objeto de respuesta, el de Next.js. Estamos configurando un encabezado en ese objeto de respuesta con una cadena de cookie válida con los parámetros que queremos que tenga. Es, nuevamente, un poco de arte oscuro. Así que no te preocupes demasiado por esto. Esta es simplemente una forma de escribir esta lógica de configuración de cookies. Eso es todo lo que es. Es un configurador de cookies. A partir de ahí, más adelante, tenemos, lo cual usaremos, es una función para destruir cookies. Esto nos permite tener un enfoque unificado para manejar la destrucción de cookies cuando ocurre un comportamiento de cierre de sesión. Porque la gente hace eso. Cierran la sesión de las aplicaciones. Así que vamos a seguir adelante y también lo vamos a admitir. De acuerdo. Las cookies están creadas. Vamos a seguir adelante y guardar eso. Vamos a seguir adelante y cerrar este archivo. Hemos visto las cookies. Ahora necesitamos un cliente de utilidades. Y en este archivo de cliente, este es un poco extraño. Y eso se debe a que esto fue diseñado para esa capacidad de hacerlo protegido. Es un poco tramposo. Y tengo una nota. Estaba haciendo trampa en hacer trampa aquí. Así que tengo un TS sin comprobación en esto, lo cual me ayuda a poder sortear algunos problemas. Porque aún no he podido depurar esto. Pero el comportamiento aquí es decir, si estoy llamando a este cliente desde el servidor, adelante y pasa mi secreto de administrador de Hazura. Solo como una generalidad, todas mis llamadas en el lado del servidor se pueden hacer con el secreto de administrador XHazura. Porque sé que es una ejecución protegida. Si no estoy en el servidor, porque Next.js tiene ese paradigma de ejecución dual donde puedo hacer cosas en el cliente o en el servidor. Si no estoy en el servidor, no pases ese encabezado. Y eso es básicamente lo que está sucediendo aquí. También tiene esta idea de un cliente y un cliente abierto. Y con el cliente abierto, estaría diciendo, si tuviera potencialmente dos API diferentes o tuviera dos versiones diferentes de mi API que nunca quisiera que esto fuera con credenciales, en realidad ni siquiera creo que esta demostración use el cliente abierto en ningún lugar. Lo he dejado ahí. Pero es solo una forma, si tuvieras muchos entornos de desarrollo u otras formas, diferentes tipos de envoltorios de API para producción versus desarrollo versus cualquier otra cosa, estos métodos te ayudarían a poder admitir eso. Es código de plantilla. Probablemente podrías evitar necesitarlo en la mayoría de los casos, porque todas nuestras llamadas están autenticadas. Las únicas dos que no están autenticadas son aquellas en las que estamos llamando al cliente desde estas áreas de registro e inicio de sesión. Podrías pasar directamente el secreto de administrador allí y ni siquiera necesitar esta utilidad. Es solo una utilidad útil como patrón. Así que eso es más o menos todo lo que hay que decir sobre este archivo de cliente. Si tienes alguna pregunta al respecto, avísame en el chat y definitivamente podré explicarlo más detalladamente. Solo estoy pasando por alto las partes que creo que son menos interesantes para simplemente explicar lo que están haciendo, porque no son ni aquí ni allá en términos de funcionalidad. Es solo un patrón que puedes usar que podrías usar cualquier cosa. Generar JWT. Esta será la última ayuda que estamos obteniendo antes de necesitar acceso a nuestro SDK real. Así que lo que vamos a hacer aquí es debajo de esta utilidad, vamos a crear una nueva carpeta aquí llamada off. Y eso es solo porque si quisiéramos seguir algunos otros paradigmas además de JWT, tal vez podríamos hacerlo. Pero en nuestro caso, solo estamos haciendo JWT. Nuevamente, este código está dentro de esa ruta. Así que voy a seguir adelante y ver el ejemplo completo. En realidad, lo voy a copiar desde aquí. Off JWT. Veamos qué hace esto aquí. De acuerdo. Lo que hace esto es crear el... Sí, es un envoltorio para la utilidad JWT que simplemente crea un token JWT válido. Si tuviera otros parámetros que necesitara pasar, podría hacerlo. La mayor parte de esto son envoltorios de TypeScript alrededor de la utilidad JWT. Tiene un valor predeterminado aquí en caso de que alguien no esté pasando un secreto como debería. Coincide con el mismo secreto que estoy usando. Pero esto es solo un valor predeterminado en caso de que alguien lo haya omitido de la configuración del entorno. Así que nos brinda un poco de seguridad aquí, así como las configuraciones predeterminadas. Y puedo eliminar esto. Esto es... En realidad no es nada. Fue un intento de debug de Git anteriormente. Y luego tengo la interfaz de lo que deberían hacer los parámetros de generación de JWT. Y luego la función real de generación de JWT. Así que son abstracciones para conceptos web básicos que podrías incluir totalmente en tu código o podrías trabajar con abstracciones como esta para que si necesitabas incorporar esto en una biblioteca o configurar algo, podrías hacerlo. Estas son... Eso es todo lo que son. Son solo abstracciones sobre tecnologías web básicas, como configurar cookies, generar una forma válida de JWT, cosas así. Eso es todo lo que son. Así que no les des más espacio en tu mente que eso. Sé que para la mayoría del equipo que hace demostraciones y cosas así, estos fragmentos de código han migrado de proyecto en proyecto porque simplemente han funcionado y los han tomado. Así que sí, no es una forma extremadamente delicada y dependiente de trabajar. De acuerdo. Eso nos lleva básicamente a la parte más importante de todas. Si vamos a cliente aquí, notaremos que aquí tenemos el problema por el momento. Verás que no hay un archivo generado aquí. Así que vamos a seguir adelante y solucionarlo ahora. Si volvemos al repositorio de GitHub y echamos un vistazo a los siguientes fragmentos de código en el README. Voy a volver aquí al README. Lo que tenemos aquí ahora es que hemos creado la primera ruta de API. Aún no hemos creado el registro. Tenemos el inicio de sesión funcionando en este momento, hemos eliminado el hola y no nos vamos a preocupar por el cierre de sesión. Tal vez hagamos el cierre de sesión en un segundo momento. Pero lo que necesitamos hacer para que esto siga siendo válido es agregar este fragmento de cadena mágica aquí a nuestra biblioteca. Y te lo explicaré con mucho cuidado
14. Uso de la CLI de Zeus para obtener datos de la API
Short description:
La CLI de Zeus se utiliza para obtener datos de la API, proporcionando tanto los tipos de Apollo como las utilidades de TypeScript. El archivo .env se utiliza para configurar el punto final y otros parámetros. La carpeta generada contiene la carpeta Zeus, que incluye un archivo index.ts. El archivo index.ts contiene los tipos para la API de GraphQL, lo que permite realizar consultas y acceder a los datos disponibles de la API de forma sencilla. Esto proporciona una forma de conocer la estructura de la API sin ejecutar ningún código. Se generan errores si se realizan cambios en el proyecto en la nube de Hazura. Se abordan los problemas con el archivo .env y la nomenclatura del punto final, y se instalan las dependencias. Se proporciona una solución alternativa para las máquinas con Windows. Se vuelve a ejecutar el SDK y se crea la carpeta generada con la carpeta Zeus y su contenido. El archivo index.ts contiene los tipos de la API y los envoltorios del cliente para obtener datos basados en esos tipos. El IDE es consciente de la estructura de la API, lo que proporciona funciones útiles y verificación de errores. Se depuran posibles problemas con el archivo .env y la nomenclatura del punto final. Se sugiere eliminar el comando nth como una solución rápida para las máquinas con Windows.
Vamos a ver qué hace esto. No es sofisticado. Simplemente es largo. Así que vamos a echar un vistazo. Lo que hace es llamar a la CLI de Zeus para obtener los datos que necesitamos de nuestra API, completamente autenticados, por lo que tiene acceso completo, y nos devuelve tanto los tipos de Apollo como los generales de TypeScript. Quiero TypeScript y quiero las utilidades para Apollo. El comando env obtiene el archivo .env y en realidad estoy pensando que puede haber un error con eso. Lo averiguaremos porque no creo que al comando env le guste .env.local como convención de nombres para mi archivo .env. Tendré que comprobarlo en un segundo si se queja. Pero toma eso, adelante y realiza interpolación de cadenas en lo que sigue. En este caso, será el comando Zeus pasando el punto final que necesito renombrar aquí. Así que asegúrate de captar esta parte. Deberás hacer hazura endpoint. Porque lo renombré en mi archivo .env. Punto final de Hazura y luego tenemos las utilidades. Tenemos las utilidades generadas como la carpeta en la que quiero que vaya. Y luego pasa lo que quiero extraer de ella. Así que Zeus en mi punto final de Hazura. Pasa todo lo que vas a crear en la carpeta generada y luego utiliza Apollo para generar los hooks y controladores con soporte de TypeScript. Aquí tienes el encabezado que necesitarás. Mi secreto de administrador de Hazura. Aquí tienes un valor de credencial. Así que obtiene todo eso. Y este es mi SDK de GraphQL. Este es el apretón de manos que lo mantiene todo unido. Vamos a probar esto. En realidad, creo que puede fallar debido a .env.local. Vamos a probarlo rápidamente aquí. Tenemos un fallo. Y supongo que es por .env.local. Déjame solo sí, no se pudo encontrar el archivo .env. Así que vamos a cambiarle el nombre rápidamente a .env. Y cuando hagamos eso, también tendremos que cambiarle el nombre porque este es un proyecto de Next.js. Tenemos que hacer que Git ignore sepa que en realidad tenemos un archivo .env que no queremos incluir, porque de lo contrario incluye .env de forma predeterminada. Si usas esos como globales importantes para el servidor que puedes comprobar en el repositorio, pero los locales y demás son aquellos que no quieres. Tienen toda una teoría detrás. Bueno para ellos. De acuerdo. Vamos a terminar este proceso. Y voy a ejecutar ese comando de nuevo. Tengo esta combinación de teclas extraña aquí que le gusta pelear conmigo. Voy a volver a package.json. De acuerdo. Vamos a ejecutar ese script. Y veremos que en realidad funcionó. Así que ahora tenemos la carpeta generada creada. Si entramos en generated, lo que tenemos es la carpeta Zeus. Y dentro de la carpeta Zeus, tenemos un archivo index.ts. Tenemos una constante. Tenemos un Apollo. Ahora voy a abrir el archivo index.ts solo para que puedas verlo. Y si ves el minimapa aquí al lado, me alegra no tener que escribir esto a mano. Es un montón de tipos y tipos extraños. Así que vamos a hablar de las diferentes partes aquí para que las entendamos. Index, estos son los tipos de mi API de GraphQL. Así que está descargando todo. El modelo de usuario que he creado, todas estas piezas diferentes las está descargando y me está dando algunos envoltorios de cliente útiles que me permiten obtener datos basados en ellos. Y eso me da cosas como tipos. Si voy a mi controlador de inicio de sesión aquí y no quiero, como no tengo una contraseña, ya sabes, como respuesta aquí, puedo hacer los tipos y poder ver, oh, tengo la contraseña aquí como una disponibilidad en mi API aquí. Y eso es genial. Como ahora tengo la capacidad de saber todo lo que mi API de GraphQL tiene disponible. Y no estoy ejecutando ningún código en este momento. Esto es literalmente solo en mi IDE. Es consciente de cómo se ve mi API. Y si hago cambios en mi proyecto en la nube de Hazura, vuelvo aquí, vuelvo a ejecutar el SDK, mi producto es completamente consciente y lanzará errores si he cambiado algo. Sí, hiciste sí, tu problema es, Ktorik, es que copiaste mi código y mi código está mal. Necesitas hacer que sea hazura_endpoint porque necesitaba arreglar eso. Es este. Si vuelvo a mostrar package.json, verás que lo cambié aquí hace un momento. Vamos a seguir adelante y capturar esto para las generaciones futuras. Y voy a arreglar eso mientras avanzamos aquí. Así que, simplemente lo haremos aquí. Y luego también tuve ese error con la palabra input que también vamos a corregir a rams. Así que, sí. Bien. Lo siento por eso. Error. Punto final de Hazura ahora. ¿Lo hiciste? De acuerdo. ¿Instalaste las dependencias? Porque necesitabas el comando nth para asegurarte de que lo hiciera bien. ¿Tienes el punto final de Hazura en tu archivo .nth? Por supuesto. ¿Estás en una máquina con Windows? Sí, estás por tu cuenta. Hay un problema con eso. Creo. Vamos a depurar esto rápidamente. Porque es posible que no estés solo aquí. Déjame abrir esto. Porque había una opción. La solución alternativa, la solución rápida, es simplemente eliminar el comando nth. Así que, donde tengo package.json. Literalmente podrías simplemente como déjame mostrar un ejemplo de cómo se vería.
15. Creación de rutas de registro y cierre de sesión
Short description:
Para crear la ruta de registro, agrega un nuevo archivo llamado 'registro' en la carpeta de acciones. Copia el código de registro y pégalo en el nuevo archivo. Cambia el nombre del archivo a 'cerrar sesión' y actualiza el código en consecuencia. Sube los cambios al repositorio. Verifica que el código se haya agregado correctamente. Agrega la ruta 'cerrar sesión' creando un nuevo archivo llamado 'cerrar sesión.ts'. Copia el código de la ruta 'cerrar sesión' y pégalo en el nuevo archivo. Cambia el nombre de la función de utilidad de 'set cookie' a 'delete cookie'. Asegúrate de que la ruta sea correcta. Verifica que los cambios se apliquen correctamente.
Lo llamaré la versión insegura. Elimina el comando nth dash X. Déjalo como Zeus. Adelante y pega el punto final HTTP, blah blah. Supongo que ese es tu punto final, ¿verdad? Y luego en lugar de esto aquí, simplemente lo eliminarías. Y dirías, ya sabes, super secreto contraseña. Así que podrías poner en línea lo que sea que sea tu punto final. Podrías ponerlo en línea aquí mismo. Y tu contraseña aquí mismo. Y simplemente reemplaza toda la interpolación de cadenas también. Esa sería la forma más rápida. Estoy haciendo una comprobación rápida para ver si hay una solución. Así que, comando nth. Haz una búsqueda aquí para ver si hay un problema con las máquinas con Windows. El que conozco es cross nth, creo que está destinado a intentar solucionar algunos problemas en cuanto a la compatibilidad entre navegadores. Debería tener eso como una alternativa aquí en la documentación para aquellos que están en máquinas con Windows. De acuerdo. Sí, investigaré un poco más para ver si puedo encontrar una solución más elegante para eso. Pero sí, ten en cuenta que si lo subes al control de versiones, haz que sea un repositorio privado, eso es lo único que debes tener en cuenta. De acuerdo. Bien. Y por eso no usé cross nth. Todavía se está ejecutando. Pero el comando nth fue bueno. De acuerdo. Bien. ¿Alguien más tiene alguna duda? Podemos seguir adelante por ahora. Así que voy a eliminar esto por ahora. De acuerdo. Lo dejaremos ahí. Así que si volvemos ahora a nuestro archivo de inicio de sesión, todo aquí debería estar bien. Si vamos al cliente, veremos ahora si quitamos esta comprobación de nodo aquí. Esto es lo que estaba teniendo problemas, estos son los parámetros de entrada aquí. Solo necesitaba entrar y debug el TypeScript. Así que, abre el repositorio, siéntete libre de corregir mi mal TypeScript. Esta fue la solución más fácil para el beneficio de esta parte particular del código. Pero ahora ha encontrado, verás la importación real de la cadena. Así que, lo dejaremos ahí por ahora. De acuerdo. Así que tenemos la generada, vamos a ver qué hace esto aquí. Así que el índice son todos los tipos, lo cual es realmente genial. Y luego lo que hace el Apollo es crear un montón de estos genéricos, básicamente, para los hooks de Apollo. Así que si estás acostumbrado a trabajar con Apollo en GraphQL donde tienes use type, use lazy query, use mutation, use subscription, si estás acostumbrado a esos hooks, esto te ha dado un envoltorio tipado para ellos, lo cual es genial. Así que ahora tienes use type subscription, use typed lazy query, use typed query, use type mutation. Esta es una utilidad que lee todos esos tipos del índice, y nos da ahora una versión de eso en forma de hook, lo cual es mágico. Vamos a echar un vistazo a eso. Así que eso es realmente genial. Eso nos lleva entonces a la constante, que son solo algunas utilidades útiles para ellas. Básicamente, valores de cadena y cosas, enumeraciones y demás. Esto debería ser suficiente para poder seguir adelante y crear la ruta de registro, que básicamente será simplemente agregar una nueva ruta aquí. Así que vamos a las acciones, nuevo archivo. Haremos registro. Robaremos el código de registro. Me sorprende un poco lo mucho que se está dañando mi voz en este momento. Y así, tenemos eso. Y ahora lo que tenemos, voy a seguir adelante y agregar la ruta de cierre de sesión también muy rápido. Cerrar sesión.ts. Solo para tenerlo aquí. Y eso es la primera parte que no he agregado. Así que voy a copiarlo de mi código de respaldo muy rápido. Eso va a estar aquí. Déjame copiarlo y pasarlo. Así que tenemos el y en realidad lo llamo cerrar sesión. Así que voy a cambiarle el nombre a cerrar sesión. Y antes de pegarlo, lo pegaré aquí para que todos ustedes tengan acceso a él recién salido del horno. Y lo vamos a pegar y simplemente subir eso. Lo cual puede que tenga que subirlo en la cadena, pero creo que lo encontró bien. Sí, creo que lo encontró bien. Así que echemos un vistazo rápido para asegurarnos de que todos tengan acceso a esto aquí. Si voy a la carpeta de frontend completa. Parece que llegó bien. Bien. Así que, ahora lo pego en mi ejemplo de código. Está buscando la función de utilidad 'set cookie'. Que es algo que había eliminado. En realidad no necesitamos esto. Voy a corregir esto aquí. No, no es set. Sí, no es set cookie. Lo que quiero es delete cookie, creo. ¿Por qué la escritura allí no es correcta? Oh, porque probablemente tengo un tipo ahí. Así que vamos aquí a las cookies, lo que estoy buscando es destroy cookie. De acuerdo. Así que vamos a volver aquí. Y simplemente lo vamos a llamar destroy cookie. Y ahí vamos. Y no está contento porque tal vez mi ruta está mal aquí.
16. Prueba de la API e Inserción de Datos
Short description:
La escritura no funcionó, pero lo arreglaremos más tarde. Parchéalo rápidamente. Gracias a Adam Turner por la solución. El archivo de cierre de sesión estaba en el lugar equivocado. Ahora podemos probar nuestra API localmente. El proyecto se está ejecutando correctamente. Obtuvimos un token del servidor. Se insertaron datos en nuestra base de datos.
Eso podría ser por qué la escritura no funcionó. Sí. Parece que eso está bien. Y vamos a necesitar poner un no TS check allí porque es el mismo problema. Entonces, vamos a seguir adelante y poner TS. No check. Y lo arreglaré después de depurar un poco más tarde.
De acuerdo. Entonces, si estás vamos a seguir adelante y parchear eso rápidamente a algo con lo que también puedas trabajar. Muy bien. Y eso está en camino para todos ustedes. Entonces, si volvemos ahora al archivo readme, veamos qué tenemos aquí. Solo estoy revisando los diferentes chats. Parece que todo debería estar bien hasta ahora. De acuerdo. Entonces, aquí hay algunos problemas. De acuerdo. Entonces, Jesse, elimina el delete de los parámetros. Alguien tiene un consejo útil aquí. De acuerdo. De acuerdo. Entonces, alguien tiene una sugerencia aquí. Tal vez este sea el problema. Esto podría ser porque estaba intentando resolverlo porque creo que estaba depurando o resolviendo esto de una manera diferente anteriormente. Oh, ahí lo tienes. Así que todos agradecen a Adam Turner. De acuerdo. Gracias, Adam, por la solución allí. Entonces, vamos a seguir adelante e ingresar. La razón por la que eso había llegado allí era porque estaba depurando eso de varias maneras para intentar destruir una cookie, lo cual no es tan sencillo como podrías pensar. Y supongo que el código funcional que tenía se borró o algo así. Pero bueno. De acuerdo. Busquen el agradecimiento en el commit de Adam por el código funcional allí. Pero también necesito, ¿no es divertido verme programar en vivo? ¿No lo disfruta todo el mundo? Aprecio el voto de confianza. De acuerdo. Así que aquí vamos. Tenemos todo en teoría funcionando. Me pregunto por qué creo que es porque sí, el problema es que puse el archivo de cierre de sesión en el lugar correcto para todos ustedes. Lo puse en el lugar equivocado para mí. Entonces, no quería que estuviera en la carpeta de acciones porque no está mapeando una acción en Hazura. De acuerdo. En este punto, si bajamos aquí, deberíamos ver que tenemos el SDK generado. Tenemos los diferentes archivos creados. Ahora podemos probar nuestra API. Entonces, lo que vamos a hacer ahora es abrir la terminal. Y tengo que descubrir mi teclado raro aquí. Tengo este teclado mecánico. Y he mapeado la tecla de escape con una tilde. Pero como, tiene como cuatro teclas de función. No sé. Sí, estoy, sí. Entonces, tenemos esto ahora donde vamos a seguir adelante y tratar de ejecutar este proyecto localmente. Vamos a seguir adelante y decir yarn dev en esto. Y si todo funciona correctamente, lo que deberíamos obtener es un ejemplo en ejecución en localhost 3000, lo cual tenemos. Ahora para probar esto. Entonces, ng rock teóricamente todavía está funcionando para nosotros con nuestros puertos. Y esos puertos están siendo mapeados públicamente. Así que necesito encontrar la sesión de la terminal que lo está ejecutando aquí. Creo que probablemente está ahí, ahí está. De acuerdo. Creo que alguien intentó hacer una solicitud a eso. Alguien tomó la dirección IP. Son chicos divertidos. De acuerdo. Entonces, vamos a seguir adelante y probarlo ahora y esperar que nadie haya eliminado algo importante. Entonces, vamos a ir a la consola de Hasura ahora. Vamos a probar esto ahora que nuestro proyecto está en ejecución. Veré si alguien está metiendo mano. No, está bien. De acuerdo. Entonces, voy a entrar aquí en el Explorador de API. Este es uno diferente. Entonces, aquí está el taller de RHSC. Voy a ir y abrir la consola de nuevo. Supongo que lo escribí antes. Así que probablemente sea el mismo correcto. De acuerdo. Aquí dentro del Explorador de API, vamos a ir a la pestaña de historial. Y voy a sacar esta mutación que probamos. Y vamos a intentar ejecutarla y ver si obtenemos data. Mira eso. Obtenemos un token. Así que aquí tenemos el token real que vuelve del servidor. Así que estamos un poco pasados. Casi... tengo que tratar de recordar a qué hora comenzamos. Pero estamos
17. Creación de Apollo Client y Configuración del Esqueleto
Short description:
Tenemos una aplicación funcional con una API funcional y la aplicación Next.js configurada. Vamos a crear nuestro cliente Apollo y configurar nuestro esqueleto para usar contenido protegido. Antes de eso, crearemos reglas de autenticación para nuestro usuario. El usuario anónimo tendrá permisos de selección para ver el nombre de todos. Los usuarios autenticados verán su propio nombre y dirección de correo electrónico. Crearemos permisos para operaciones de selección, inserción y actualización. Los usuarios no podrán eliminarse a sí mismos. También crearemos un usuario para fines de prueba. En teoría, deberíamos tener acceso a todo en el Explorador, pero necesitaremos ajustar el token de usuario. Probaremos la consulta de usuario y verificaremos si el correo electrónico es accesible. Se utilizará el rol de usuario Xsera en lugar del token de usuario Xsera.
vamos bien aquí. Entonces, hemos insertado los data en nuestra base de datos. Max, tienes un error. De acuerdo. Voy a mostrar esta parte aquí. Y luego vamos a hacer una sala de grupos. Y voy a ir a cada una de las salas y verificar si alguien tiene algún problema. Entonces, vamos a ver los data aquí desde mi lado. Y luego haremos las salas de grupos. Y veremos que tenemos a Yala, que se agregó. Y una contraseña muy bien encriptada. De acuerdo. Parece que todos lo están haciendo bien hasta ahora. Muy bien. Estamos a punto de comenzar a ver cómo se unen las cosas realmente geniales. Entonces, donde estamos en este momento es que tenemos una aplicación funcional. Tenemos nuestra API funcional. Y tenemos la aplicación Next.js configurada. Entonces, lo que vamos a hacer ahora es crear nuestro cliente Apollo y configurar nuestro esqueleto para que podamos usar contenido protegido. Antes de hacer eso, vamos a crear algunas reglas de autenticación para nuestro usuario para que nuestro usuario anónimo pueda acceder al nombre de todos. Y vamos a permitirles ver el nombre de todos. Pero luego, un usuario autenticado podrá ver su propio nombre y dirección de correo electrónico también. Obviamente, puedes abstraer ese modelo de data tanto como quieras. Tal vez veamos más adelante cómo crear algunas relaciones y algunas piezas interesantes en torno a eso. Veremos a dónde nos lleva. Nos quedan aproximadamente una hora de la masterclass. Así que vamos avanzando aquí. Entonces, si comparto mi pantalla nuevamente, voy a compartir hasta allí. Vamos a crear algunos permisos para el modelo de usuario. Y eso nos ayudará a verificar quién está autenticado, quién no está autenticado y probar eso y asegurarnos de que todo funcione como esperamos. Desde aquí, voy a abrir el chat y asegurarme de que siga visible aquí. Tengo la pestaña de monitoreo. En mi tabla de usuarios, voy a ir a la pestaña de permisos. Y en estos permisos, lo que quiero decir es que si soy el usuario anónimo, tendré permisos de selección sin ninguna restricción. Estará completamente abierto. Pero lo limitaré a solo ver el nombre de todos. Y voy a limitar eso a obtener solo 100 o 25 usuarios a la vez. Y vamos a guardar eso para que estén limitados. Ahora, en el propio usuario, queremos darles más controles. Entonces, para el usuario, les daremos la capacidad de seleccionar, podrán seleccionar con una comprobación personalizada en la situación en la que el ID de la columna o la fila de la tabla que desean seleccionar, el ID debe ser igual al parámetro que llega de ese ID de usuario de Hazura. Entonces, el JWT que llega que tiene el ID de usuario XHazura. Y si ese ID coincide con esta fila, se les permitirá comprobar o seleccionar eso sin ninguna restricción. Y no vamos a limitar eso en absoluto. Y también les permitiremos realizar consultas agregadas. Vamos a guardar los permisos. Y vamos a decir en la inserción que les permitiremos hacer lo mismo. Entonces, lo que vamos a hacer es volver a la selección y vamos a clonar este permiso en la declaración de inserción de la regla de usuario. Por lo tanto, tomará el mismo concepto para la inserción. Y solo necesitamos decir qué columnas se les permite obtener. Y luego, en la actualización, haremos lo mismo. Así que voy a volver aquí y hacer la clonación una vez más. El usuario tiene en la actualización y vamos a decir que sí. Ahora, voy a ser ese desarrollador de aplicaciones que no permite a los usuarios eliminarse a sí mismos. Porque a todos les encanta tener que enviar un correo electrónico a alguien, ya sabes, para pedirles que eliminen tu cuenta. Entonces, vamos a ir y actualizar las columnas. No se les permitirá actualizar su propio ID, sin embargo. Y no se les permitirá actualizar la fecha de creación. Esos serán valores inmutables solo para los administradores. Y vamos a guardar eso. Y eliminar. Sí, lo dejaremos por ahora. Pero eso es lo que vamos a hacer por el momento. Muy bien. Ahora vamos a volver a mis usuarios, mis APIs. Vamos a hacer un usuario al que pueda hacer referencia fácilmente aquí. Voy a decir que este soy yo en realidad. Y este es mi correo electrónico de trabajo real. Entonces, si tienes alguna pregunta, definitivamente puedes contactarme. Y esa será mi contraseña. Pero eso no es la contraseña de mi cuenta de trabajo, solo para que lo sepas. Es la contraseña de mi equipaje. Entonces, vamos a hacer eso. Ahora, en teoría, y este es uno en el que realmente no he hecho muchas pruebas. En teoría, lo que podemos hacer aquí ahora es ir al Explorador. Veremos que tenemos acceso a todo aquí, ¿verdad? Tenemos acceso a todo lo que queremos muy bien. Ahora, si desactivo el authentication del secreto de administrador de Xsera, y digo el token de usuario de Hasura, paso ese token aquí. Y quiero obtener el usuario. Le daré un nombre aquí. Veremos que puedo obtener los usuarios. Pero si pido el correo electrónico, es posible que tenga que volver a generar ese token de usuario aquí, porque déjame iniciar sesión y obtener un nuevo token aquí rápidamente. Haré una mutación. Lo sacaré un poco de mi camino para poder ver mejor mi teclado. Entonces, el correo electrónico era jesse.hasura.io y la contraseña es 123. Y queremos el token de vuelta en eso. De acuerdo. Así que voy a ejecutar eso. Y creo que sé cuál es el problema, por qué esto no está funcionando como espero, porque creo que el problema está relacionado con el hecho de que el cliente aquí, voy a la pestaña de historial y lo veo. Sí, la pestaña de historial aquí no me permite desestructurar estos encabezados por mí. Entonces, no voy a hacer Xsera user token. Voy a
18. Comprobación de JWT y Creación de Apollo Client
Short description:
Vamos a revisar el código base en el JWT que estamos creando para el inicio de sesión. Crearemos el cliente Apollo, que estará en la carpeta utils. El cliente Apollo tiene sus propias peculiaridades. Tenemos la utilidad get main definition para determinar si estamos intentando una suscripción, mutación o consulta. También tenemos la función get hazard URL y un archivo de constantes. El archivo de constantes contiene las URL del lado del servidor y del lado del cliente. El cliente Apollo se crea utilizando los enlaces HTTP y WebSocket, dependiendo del entorno. Hay una comprobación de nodo TS que necesita depuración. Si alguien es un experto en TS, se agradecería su ayuda.
Vamos a revisar el código base en el JWT que estamos creando para el inicio de sesión. Estamos estableciendo este valor y también en el ayudante de JWT, estamos estableciendo el rol predeterminado de Xsera. Bien, ahora voy a volver aquí. Voy a pasar esto. Necesito obtener ese ID en este punto. Probablemente sea ID3. Creo que he creado solo dos cuentas. Y el rol predeterminado de Xsera es usuario. Y vamos a ver el explorador en eso. Es posible que tenga que pasar el where. Puede que tenga que volver a depurar esto en un momento, porque debería darme el valor que espero. Vamos a asegurarnos de que mi ID de usuario sea correcto. Sí, es el número dos. Así que vuelvo aquí. El ID de usuario de Xsera es dos. Xsera predeterminado, doble guion ahí. Creo que sí. No debería tener un problema con las mayúsculas. Creo que están normalizadas. Vamos a corregir esta consulta aquí. Extraño. Lo que vamos a hacer, noté este error hace un momento. Tal vez haya un problema en este momento con la forma en que se pasan los valores, porque técnicamente debería poder seleccionar mi propio correo electrónico con la validación. Ahora, si ejecuto esto desde externo, haremos una prueba. Ejecutaremos esto externamente desde el cliente, y ese será nuestro cliente. Y luego ejecutaremos esto externamente desde el cliente, y esa será nuestra prueba final para ver si funciona como esperamos o no. Porque debería hacerlo, pero creo que hay un problema con que provenga de una cookie. Así que no voy a perder mucho más tiempo en esto por ahora. Así que lo desactivaremos por ahora. Y volveremos al cliente por el momento. Pero para un usuario completamente no autorizado, obtenemos solo los nombres, porque eso es lo que hemos indicado. Solo revisaré a menos que haya hecho algo realmente estúpido. ¿Invertí los permisos? Eso sería divertido. Vamos a verificar eso rápidamente. Tengo el secreto de administrador activado. Por supuesto, puedo ver esa contraseña. Sí. Ahí lo tenemos. Muy bien. Vamos a omitir eso por ahora. Lo siento por esa pequeña distracción. Vamos a echar un vistazo ahora al cliente Apollo. Así que vamos a volver aquí. Y la siguiente parte que necesitamos, y tengo que hacer referencia a este código que ahora está fuera de línea aquí, es crear el cliente Apollo, que estará en la carpeta utils. Ahora, el cliente Apollo con NextJS tiene sus propias peculiaridades. Entonces, ¿qué está sucediendo aquí? Lo que tenemos son importaciones generales de Apollo, el enlace WebSocket para suscripciones más adelante. Y luego tenemos la función get main definition, que es la predeterminada. Y luego tenemos la función get main definition, que es la predeterminada. Y luego tenemos la función get main definition, que es la predeterminada. Y luego tenemos la función get main definition, que le dice a Apollo si estamos intentando hacer una suscripción, mutación o consulta. Es una utilidad para determinarlo. Luego importamos nuestra función get hazard URL. Voy a desactivar la comprobación de nodo TS aquí, porque esa constante en realidad no está creada. Ni siquiera sé si la estoy usando. Lo estoy usando en algunos lugares, pero podemos omitir eso, porque no... Crearé un archivo de constantes. Está bien. Esto es parte de la refactorización en la que he estado trabajando para eliminar esto. Pero lo he dejado en esta versión. Así que voy a agregar esto ahora. Voy a agregar un nuevo archivo de constantes. Y te mostraré cómo se ve el código aquí. Ese archivo de constantes no es la cosa más sofisticada del mundo. ¿Dónde está el archivo de constantes? ¿Cambié de lado? Ahí vamos. Aquí está el archivo de constantes. Es exactamente lo mismo de lo que hablamos anteriormente, donde tenemos la URL del lado del servidor versus la del lado del cliente. Ahora, en este momento, si recuerdo correctamente, he refactorizado eso, que solo uso la URL de Hazura. Así que incluso lo he refactorizado por completo. Lo cual quería usar la... sí, la versión de la aplicación. De acuerdo. Así que simplemente eliminando eso por completo. Voy a pegar esto aquí para que tengas acceso a él. Así que el archivo de constantes debajo de utils. Así que ahí va. Así que con este archivo de constantes, y ahora se está importando dentro de la función de URL de Hazura, lo que sucede aquí es que obtenemos la URL real de Hazura. Así que solo estaba haciendo una comprobación del servidor para decir, ¿ok, tengo una versión especial de mi punto final de API para el servidor versus para los entornos de ejecución no servidor? Y luego estamos iniciando un... tenemos una comprobación booleana aquí para ver si es el servidor y también una para ver si es el navegador. Tenemos esta utilidad aquí para hacer una cosa si es una suscripción. Tenemos otra función aquí que es una utilidad de enlace que básicamente dice aquí está el enlace HTTP. Así que usa la URL de Hazura, el punto final de GraphQL, incluye credenciales, haz lo mismo para un enlace de WebSocket si es una cosa de WebSocket. Y luego en este enlace de Apollo, estamos diciendo que si es un navegador, adelante y envía, o si es una suscripción, adelante y usa el enlace WS. Ahora, tengo la comprobación de nodo TS aquí porque este método tiene un problema con el comportamiento de pasar estos dos valores. Y, de nuevo, no he tenido la oportunidad de depurar eso, pero por eso vamos a bloquearlo por ahora. Pero de nuevo, si alguien aquí es un experto en TS, siéntase libre de echar un vistazo a eso.
19. Configuración de Apollo Client y Obtención de Usuarios
Short description:
Hemos configurado el cliente Apollo y lo hemos inicializado en el entorno App.js. También hemos creado una forma de obtener usuarios utilizando los Apollo Hooks. A continuación, intentaremos incluir los elementos de easy peasy si el tiempo lo permite. Hasta ahora, hemos configurado con éxito el proyecto Hazura, generado el SDK de tipos utilizando GraphQL Zeus y configurado el cliente Apollo para que funcione con nuestro punto final de GraphQL. Ahora estamos listos para obtener contenido dentro de nuestros componentes React.
Porque eso causará un problema para las implementaciones. Solo asegurándome de que todavía estoy monitoreando el chat aquí. Así que bien. Muy bien. Entonces, lo que tenemos aquí es el cliente Apollo. Y lo que necesitamos hacer ahora es poder tomar esto, así que terminemos de hablar sobre lo que hace el código aquí. Entonces, nos está dando el enlace correcto si es un navegador. Luego, aquí se está creando el cliente Apollo real. Nos está dando una memoria incorporada. Nos está diciendo que incluyamos credenciales. Eso será lo que hace la magia de enviar la cookie HTTP junto con todas nuestras solicitudes. Y luego tenemos esta utilidad de inicialización de Apollo aquí que nos permite hacer la hidratación del lado del servidor. Si quisiéramos hacerlo, el equipo de Apollo escribió esto. No lo escribí yo. Es más inteligente que lo que hago. Así que tienen un código actualizado sobre eso si quieres echarle un vistazo. Básicamente, todo lo que hace es realizar algunos comportamientos de hidratación si estás en el servidor, no en el servidor. Eso es muy específico del entorno Next.js. Si todos están siguiendo eso. A partir de ahí, vamos a seguir adelante y dirigirnos a nuestro entorno App.js aquí. Este es el envoltorio predeterminado aquí. Y lo que vamos a hacer es utilizar nuestro, vamos a seguir adelante y agregar nuestro proveedor del cliente Apollo. Así que aquí es donde empezamos a entrar en las partes donde tengo que pegar realmente piezas. Así que lo que vamos a hacer es pegar esto aquí. Y voy a pegar este código una vez que esté finalizado. Lo estoy pegando desde mi otra copia. Lo estoy pegando aquí. Lo pegaré para ustedes. Y todos obtienen un pegado. Así que vamos a pegar el cliente Apollo, que necesitamos. Y luego necesitamos el tipo de props de la aplicación. Oh, en realidad, estamos importando ese. Y creo que necesito el cliente. Sí. Y las otras partes son de nuestro state management. Así que no nos preocuparemos por eso por ahora. Quiero mostrarte, estamos quedando sin tiempo. Quiero mostrarte al menos la parte de la consulta. Tendremos que ver los elementos de easy peasy. Me aseguraré de que estén incluidos en el repositorio. Pero es posible que no lleguemos a los elementos de easy peasy hoy, dependiendo del tiempo. Es posible que no lleguemos a los elementos de easy peasy hoy, dependiendo del tiempo. Así que echemos un vistazo rápido aquí. Básicamente, con eso en su lugar, lo que necesitamos hacer es inicializar nuestro cliente. Y con nuestro cliente inicializado, vamos a seguir adelante y envolver el proveedor Apollo alrededor de nuestra aplicación. La mayoría de ustedes deberían estar familiarizados con el envoltorio de componentes. Esto no es lo que yo calificaría como React avanzado. Pero ahí vamos. A veces se ve un poco extraño con las cosas de TypeScript, sin embargo. Así que tenemos esta cosa básica. Oh, Dios mío, estoy poniendo importaciones relativas arriba. Eso no va a funcionar. Vamos a hacerlo un poco más bonito. De acuerdo. Vamos a tomar esto, y quiero pegarlo aquí dentro del archivo app.js. Que es... Solo voy a usar esto. Aquí vamos. Y voy a hacer esto a partir de ahora. Voy a poner esto dentro de mi historial de pegado, comando git all, git commit, y llamarlo un commit seguro. Y vamos a hacer que sea una sola línea. Si todo está bien. Oh, lo sé. Me olvidé de un ampersand ahí. Intentemos eso. Así que esa será nuestra utilidad de sincronización a partir de ahora. Y parece que todavía tenemos alrededor de tres o cuatro personas aquí. Así que les agradezco que se queden aquí. Muy bien. Así que tenemos eso en su lugar para nuestro cliente. Lo que vamos a hacer ahora es crear una capacidad para obtener nuestros usuarios desde dentro de la aplicación, solo para mostrar cómo se unen las cosas de los Apollo Hooks. Y vamos a hacer eso utilizando una función llamada fetch. Y vamos a usar eso para obtener nuestros usuarios desde dentro de la aplicación, solo para mostrar cómo se unen las cosas de los Apollo Hooks, básicamente. Y luego vamos a intentar incluir los elementos de easy peasy en el último momento. Así que hasta ahora, hemos configurado el proyecto Hazura. Hemos generado un SDK de tipos a partir de ahí utilizando GraphQL Zeus en nuestro proyecto, que siempre podemos actualizar con ese único comando. Bastante genial. Sencillo. Hemos configurado el cliente Apollo para que funcione con nuestro punto final de GraphQL para que podamos usar los Apollo Hooks SDK dentro de nuestra aplicación real para obtener contenido, lo cual vamos a demostrar ahora. Dentro de nuestros componentes React. Ahí es donde estamos. Vamos a ejecutar eso ahora desde un... Lo haremos desde el archivo de índice aquí. Así que lo que queremos hacer ahora es vamos a abrir un... Lo haré aquí porque de lo contrario no lo veré. Voy a abrir mis páginas de índice, y vamos a tener esto aquí deslizándose por comparación. Así que lo que vamos a hacer, vamos a eliminar esta parte aquí, y vamos a enumerar una IU y una IU de nuestros usuarios. Eso es lo de la documentación.
20. Consulta y Visualización de Datos de Usuario
Short description:
Importamos la biblioteca generada y utilizamos los hooks de Apollo para consultar una lista de usuarios con filtros de entrada. Podemos especificar los campos que queremos y activar/desactivar ciertas propiedades. El resultado es una forma poderosa de consultar contenido sin escribir múltiples consultas. Los datos obtenidos se pueden mostrar en la interfaz de usuario. El código de plantilla puede llevar tiempo escribirlo, pero proporciona una base sólida para el desarrollo futuro. La introspección nos permite ver todas las opciones de filtrado en la API de GraphQL. También podemos crear mutaciones, como un sistema de inicio de sesión, para gestionar el estado del usuario. Aunque el código se proporcionará en el repositorio de GitHub, se dará una explicación más rápida para cubrir los conceptos principales. Esta parte se completará en los próximos 30 minutos de la masterclass.
Entonces, vamos a seguir adelante y simplemente ir aquí. Y creo que son todas estas partes internas aquí. Puedo... Salí muy rápido. Creo que esas son las partes. Sí. Muy bien. Entonces, lo que queremos hacer aquí es simplemente dejar esto en una UL. Tal vez. Siempre me inscribo en estas clases largas y luego siempre pienso, oh, sí, estaré bien. Al final, solo estoy escribiendo basura. De acuerdo. Así que podemos confirmar que esta parte funciona aquí. Así que vamos a importar nuestra biblioteca ahora para ayudarnos a trabajar con esto. Vamos a importar desde... Wow. Tal vez estaba mejor cuando estaba de pie en lugar de... Desde nuestra biblioteca generada aquí. Así que vamos a ir a nuestras utilidades, y vamos a entrar en nuestro repositorio generado, y vamos a entrar en Zeus, y queremos los hooks de Apollo. Y lo que queremos hacer es usar la consulta tipada. Y a partir de aquí, vamos a hacer una consulta real de data. Tengo que recordar que con el uso de la consulta tipada aquí, podría ser totalmente... Podría ser el operador de propagación. Desafortunadamente, no es... Es el operador de propagación. De acuerdo. Así que vamos a propagar estos valores aquí. Así que es data y error y loading son valores posibles aquí. Usamos la consulta tipada. Y a partir de aquí, vamos a obtener una lista de nuestros usuarios. Y debido a que tenemos filtros de entrada, aquí es donde la gente se molesta un poco con los filtros de entrada de GraphQL. Y puede que sea justo, pero creo que una vez que lo aprendes, lo aprendes. Así que está bien. Tu consulta es en realidad un array con tus filtros de entrada como el primer objeto. Así que aquí podríamos hacer cosas como where... Y verás estas sugerencias de tipos que aparecen, ¿verdad? Donde es como, muy bien. Quiero decir, puedes simplemente profundizar aquí y decir un nombre, es igual a Jesse, por ejemplo. Así que obtienes sugerencias de tipos, lo cual es fantástico. Voy a dejar esto en blanco porque quiero a todos, pero aún así necesito pasar el primer objeto. Y luego lo que hago aquí es simplemente profundizar en las propiedades. Y quiero el nombre, que es el único que realmente tengo disponible en este contexto. Y digo true en el campo. Así que obtengo este tipo de cosas. Así que obtengo estos pares clave-valor que se asignan a los campos reales de la consulta. Y digo cuáles quiero. Ahora puedo hacer cosas como, ya sabes, contraseña, o puedo hacer cosas como un correo electrónico aquí y decir false. Y si estuviera en un entorno con credenciales, podría acceder a eso. No puedo acceder a eso. Así que no podré acceder a eso aquí. Lo siento, así. Así que puedo dejar esto como false, y ni siquiera estaría solicitando eso. Pero podría hacer algo como si dijera, ya sabes, es administrador, entonces hacer esto realmente lo estás solicitando, y si no, false. Esa es la verdadera potencia aquí en esta forma de consulta. Porque en lugar de escribir muchas consultas, dame una consulta de tipo administrador, o dame una consulta de tipo usuario, un usuario autorizado, o una consulta de usuario, puedo pasar propiedades booleanas para activar y desactivar los campos que estoy solicitando, en lugar de hacer algo como interpolación de cadenas para decir que quiero esta parte de data de mi servidor cuando soy esta persona. Y eso me gusta mucho, porque eso mapea el caso de uso ideal de un GraphQL, que es una sintaxis súper sencilla para consultar este contenido y ejecutar estos resolutores, pero sin tener que escribir un montón de tipos de cadenas diferentes. Así que, en este caso, no tengo acceso a eso, no cómo, por ahora. Así que voy a pasar esto así. Así que tengo esta consulta de tipo usuario, tengo esta consulta de GraphQL, y lo que vamos a hacer es simplemente bajar aquí a nuestra UL que teníamos, y vamos a hacerlo de una manera muy rápida y decir, de acuerdo, data, y data.map, y luego vamos a obtener el usuario y el índice, y vamos a devolver los LIs donde tenemos la clave igual al índice aquí, y vamos a pasar el usuario.nombre. Y se queja de que mapeo, porque data.usuario.map. Así que lo que vamos a hacer es data.usuario. Esto es potencialmente indefinido. Así que tenemos este contexto. Vamos a comprobar si obtuvimos lo que queríamos. Espera un segundo para que haga la consulta. Y tenemos nuestros usuarios devueltos desde la cadena. Así que es una cantidad considerable de código de plantilla, y lleva mucho tiempo escribirlo, pero una vez que lo tienes, lo tienes. Y luego puedes usar esta cáscara, este envoltorio, y de nuevo, estoy subiendo todo esto al servidor para que lo tengas, y puedes simplemente clonar este repositorio y estar listo para empezar. Pero una vez que la plantilla está en su lugar, es una forma realmente buena de hacerlo. Así que si quisiéramos tener algo como ver todas las opciones que tienen las consultas de filtrado de Hazura para mí, esa API de GraphQL generada, puedo hacer todo eso de introspección aquí directamente dentro de mi IDE. Y eso es realmente genial, ¿sabes? Puedes hacer cosas como esa. Y luego también puedes hacer cosas como, ya sabes, como, puedes hacer cosas como, ya sabes, eso es realmente genial, ¿sabes? Puedes hacer cosas como eso. y luego también puedes hacer cosas como, ya sabes, como, puedes hacer cosas como, ya sabes, eso es realmente genial, ¿sabes? Puedes hacer cosas como es como y pasar cualquier filtros y cosas así. Así que eso es lo básico del filtrado. Ahora, vamos a intentar crear una mutación. Vamos a intentar crear un sistema de inicio de sesión aquí que nos permita crear un sí, crear un estado de usuario. Así que vamos a intentarlo en los ¿qué es eso? No sé. ¿Quedan 30 minutos? Son aproximadamente 30 minutos. 15 o 30. 30. Así que creo que tenemos tiempo. Así que suponiendo que a nadie le importe, voy a ir un poco más rápido aquí con algunas de las partes del código que voy a pegar para que tengas acceso a ellas. Y realmente voy a decir aproximadamente lo que hace el código sin tanto recorrido. Y veremos si podemos realmente hacer que esta parte se ejecute en 30 minutos. Así que espero que esté bien. Vas a obtener la versión aproximada del GitHub hoy. También lo voy a envolver para ti con un lazo. Así que eso se limpiará esperemos mañana. Y eso será algo que también estará bien documentado. Así que vamos a ir
21. Creación de Almacenamiento y Modelo para el Estado del Usuario
Short description:
Voy a crear un almacenamiento y un modelo para almacenar el estado del usuario. El modelo contiene acciones para comportamientos relacionados con el usuario. El modelo también incluye acciones de registro, inicio de sesión y cierre de sesión. La acción de registro restablece cualquier error de inicio de sesión, realiza una mutación de registro y establece el usuario y el comportamiento de autenticación en función de la respuesta. La acción de inicio de sesión tiene un comportamiento similar. La acción de cierre de sesión establece el usuario como nulo y realiza una solicitud simple para eliminar la cookie y redirigir a la página principal. Este es el modelo para la gestión del estado en el mundo de PipeScript.
Vamos a seguir adelante e intentarlo. Nadie dice que no a esa idea. Así que aquí vamos. Voy a empezar por crear un almacenamiento aquí, que es donde voy a almacenar todo el estado del usuario que estoy obteniendo. Y dentro de ese almacenamiento, voy a tener que crear y voy a tener que subir esto aquí en solo un par de minutos. Voy a seguir adelante y crear mi modelo. No voy a explicar demasiado los detalles internos de EZPZ, pero básicamente creas estos modelos y luego puedes crear estas acciones para los modelos y luego obtienes las piezas. Voy a seguir adelante y cerrar esta terminal. Así que tenemos espacio. Déjame actualizar rápidamente esta parte del modelo para ti. Así que voy a pegarlo rápidamente. Y luego tal vez tenga que corregirlo a medida que avanzamos. Voy a subir esto por el momento. Y ahora necesito mi archivo de índice. Echemos un vistazo al modelo aquí y veamos qué está pasando. Lo que tenemos aquí son varios tipos que ya no necesitamos debido a la forma en que estoy trabajando esto. Así que todas mis importaciones están alineadas, lo cual es bueno. Entonces, los tipos de almacenamiento, tenemos una interfaz tal vez para nuestro usuario. Así que el usuario es el almacenamiento real para el usuario dentro de la gestión del estado. Entonces, tenemos un usuario. Tenemos un estado de autenticación que puede ser `logueado` o puede ser un error. Y luego tenemos una acción que va a establecer el usuario como una respuesta exitosa del servidor. Y tenemos una acción de `logueado`, una de registro y una de cierre de sesión. Estas son acciones en mi estado. Esto es la gestión del estado en el mundo de PipeScript. Entonces, sí, nuevamente, el doble de código, pero esperemos que sea correcto de una vez. Apollo, en realidad no lo usamos aquí. Así que podemos eliminar esto. Vi un mensaje en Discord o escuché un mensaje en Discord. ¿Es para mí? No es para mí. Así que lo voy a ignorar. Y vamos a seguir adelante aquí. Lo que tenemos es la definición del almacenamiento en sí, usuario, autenticación `logueada` y error. Así que tenemos esta interfaz. Lo siento, la interfaz. Y luego el almacenamiento en sí está declarando qué es el almacenamiento real. Así que todas las acciones. La acción aquí es almacenamiento.usuario igual a carga útil. Entonces, lo que envío a la acción de establecer usuario, lo establezco en el modelo de usuario del almacenamiento. Entonces, en la acción de establecer usuario, lo establezco en el usuario. En la acción de establecer error de inicio de sesión, nuevamente, cualquier error que reciba se asigna a los estados. Esto no es una clase de gestión del estado. Easy peasy. Está bastante bien documentado. Así que inténtalo. Registro, comportamiento asíncrono. Eso es lo que es un thunk. Así que no te preocupes por esa terminología. La acción de registro, lo que hace es decir que el almacenamiento establece el error de inicio de sesión en falso. Así que restablece cualquier error. Y luego dice const resultados esperar cliente.mutación. Entonces, este cliente, ya lo hemos definido. Este es el cliente Zeus que está utilizando la versión de servidor o no servidor de nuestro punto final. Está haciendo una mutación de registro. Y aquí es donde necesito corregir esto, porque ya no estoy devolviendo roles y usuarios. Así que puedo omitir esa parte. Luego tenemos la carga útil. Sí, la carga útil está llegando, y luego el nombre y el ID y el nombre de la operación. Esto es, lo siento, esta es la sintaxis de variables para GraphQL Zeus. Así que este signo de dólar proviene de la biblioteca GraphQL Zeus. Y lo obtiene del objeto de variables. La carga útil es lo que se envía como carga útil en esta acción de registro. Entonces, se envía un nombre y un ID en esta carga útil cuando se llama. Y eso es lo que se está enviando en esta consulta, que es el resultado de esta mutación de registro. Y esa mutación de registro luego verifica si hay errores. Si hay errores, establece el error de inicio de sesión en verdadero. Si hay un usuario en la respuesta, va a establecer el comportamiento de autenticación. Así que estoy `logueado` en verdadero, y va a establecer el usuario como el resultado. Así que vamos a registrarnos. El inicio de sesión tiene el mismo comportamiento. Tenemos el inicio de sesión. Tenemos esencialmente las mismas cosas. Voy a seguir adelante y eliminar estas dos partes del modelo, porque no estoy usando un avatar ni roles en este modelo en particular. Nuevamente, mutación del cliente, comportamiento de inicio de sesión, las cargas útiles se asignan valores. Y le doy un nombre de operación en ambos casos. Nuevamente, algo que GraphQL Zeus expone, porque quiero ver eso en mis métricas de observabilidad, porque estoy usando la nube, y así puedo saber qué está sucediendo. Estableciendo usuarios, si todo está bien, todo está bien. En el cierre de sesión, estableciendo el usuario como nulo, establece el almacenamiento en `logueado`. Y estoy haciendo una solicitud muy simple a mi ruta de API de cierre de sesión, que simplemente elimina mi cookie y redirige mi ruta con el enrutador de Next.js a la página principal, para limpiar todo. Bien. Ese es el modelo. Vamos a corregir eso rápidamente para ti. Y luego en el índice, ¿todo está bien? No pegué el índice para
22. Configuración del Proveedor de Almacenamiento y Creación del Formulario de Inicio de Sesión
Short description:
Configuramos el proveedor de almacenamiento dentro del envoltorio de Apollo y creamos un formulario de inicio de sesión usando React y easy peasy. El formulario incluye campos de entrada para el correo electrónico y la contraseña, y un botón para manejar el registro. La función de manejo de registro activa la acción de inicio de sesión, que persiste al usuario y la cookie. El gancho use store state se utiliza para acceder al estado de easy peasy.
todavía. Así que déjame seguir adelante y obtener eso. Pero debería estar bien, porque no hay nada complicado ahí. Esto simplemente expone todo. Easy peasy tiene una biblioteca de ganchos tipados que básicamente toma todos estos comportamientos y nos proporciona cosas como un uso de acción de almacenamiento, uso de despacho de almacenamiento, ganchos de estado de almacenamiento que nos permiten acceder a nuestros comportamientos de almacenamiento de una manera maravillosa. Bien. Eso es todo lo que necesitamos para eso. Muy bien. Lo que necesitamos hacer ahora es colocar nuestro proveedor en la ruta de nuestra aplicación. Así que más código copiado. Si esto les está volviendo locos al verlo, avísenme. Pero estoy emocionado por cómo funciona esto, porque creo que es una forma realmente genial de construir. Y tan pronto como tengas el esqueleto en su lugar, y no estés copiando y pegando en muchos lugares, en realidad es muy divertido construir de esta manera. Así que eso debería ser todo lo que necesito. Vamos a volver al archivo de la aplicación, ¿en qué producto estoy? Estoy en este. Vamos a ir a la aplicación. Y voy a pegar las bibliotecas que quería. Así que lo que tengo aquí es el proveedor de almacenamiento. Y luego tengo el archivo de índice del almacenamiento. Así que el proveedor de almacenamiento se encuentra dentro del envoltorio de Apollo, que será el proveedor de almacenamiento. Creo que lo copié. Lo copié. Sí. Bien. Y luego podemos cerrar eso con el proveedor de almacenamiento. ¿Alguien sabe un atajo para ese comportamiento? Eso sería genial. Muy bien. Así que tenemos todo configurado. Ahora vamos a crear un formulario de inicio de sesión muy sencillo en nuestro formulario de React. Así que vamos a ir a la página de índice aquí. Vamos a copiar esto. Y ahora lo haremos aquí mismo. Muy bien. Todo está bien. Voy a hacer esto desde aquí. Así que vamos a ir y ya tengo un formulario de inicio de sesión creado. Así que voy a tomar algunas partes aquí. Así que vamos a movernos un poco rápido. Vamos a empezar a desglosar esto. Esto no es genial. No lo vamos a hacer de la forma correcta. Pero está bien. Vamos a poner esto aquí dentro. ¿De acuerdo? Vamos. Muy bien. ¿Qué tenemos aquí? Tenemos un React use state para la dirección de correo electrónico y la contraseña. Este será nuestro formulario de registro. Luego tenemos las acciones de uso de almacenamiento, que es nuestro comportamiento de inicio de sesión. Así que lo que tenemos que hacer es importar rápidamente React. Muy bien. Y tenemos el correo electrónico, la contraseña, yada, yada, yada. Así que vamos a hacer un formulario aquí en el comportamiento. Entonces, inicio de sesión, lo que hace es simplemente darme la acción de inicio de sesión, que es una función que proviene de actions.login. Esa es la acción de inicio de sesión en el objeto actions de usar acciones de almacenamiento. ¿De acuerdo? ¿Todos lo tienen claro? Desde la aplicación, vamos a poner esto justo aquí dentro del vamos a poner un pequeño bloque aquí. Aquí es donde vivirá nuestro formulario. Y vamos a poner dos campos de entrada. Y eso será el nombre o el correo electrónico del estado. El tipo es texto. Vamos a poner el evento de cambio directamente ahí. Así que, echemos un vistazo a nuestro brillante formulario de inicio de sesión aquí. Bonito. Muy bien. Ahora necesitamos un botón. Así que vamos a manejar el registro en este caso. ¿Podríamos obtener el comportamiento que estamos buscando solo con el registro y sin manejar el inicio y cierre de sesión? Así que esto sería capaz de ejecutar algo. Entonces, ese botón que vamos a hacer es decir en el clic. Vamos a manejar el registro. Muy bien. Vamos a llevar esa lógica aquí arriba para poder ver esto un poco mejor. Déjame enviarte rápidamente la aplicación cliente de easy peasy. Y así, en este comportamiento de registro, todo lo que tenemos que hacer es pasar la carga del correo electrónico y la contraseña. Que en realidad creo que es solo esto. Ni siquiera necesito una carga útil. Así que es solo ese objeto. Y asegurémonos de que esté todo configurado correctamente. Siempre soy un poco paranoico con estas cosas. Así que solo voy a hacer esto. No creo que el botón envíe el comportamiento. Pero he escuchado que hay algunas discrepancias entre los navegadores cuando está dentro de un componente de formulario. Así que voy a hacer esto por ahora. Investigaría eso. Puede que no sea necesario. Entonces, manejar el registro va a hacer la acción de inicio de sesión. Y esa acción de inicio de sesión va a persistir a mi usuario. También va a persistir mi cookie. Así que estaré conectado. Y para replicar ese comportamiento, vamos a obtener el estado de easy peasy.
23. Depuración del Formulario de Registro
Short description:
Estamos utilizando comprobaciones condicionales para ocultar el formulario de registro si el usuario no ha iniciado sesión. Si el usuario ha iniciado sesión, mostramos el nombre del usuario. Tenemos valores predeterminados de usuario y una contraseña de referencia. Necesitamos agregar el campo de nombre al formulario de registro. Después de registrarse, esperamos haber iniciado sesión, ocultar el formulario y configurar todo. Inspeccionamos las conexiones de red y verificamos la consola en busca de errores. Depuramos la mutación de registro y verificamos la carga útil. Verificamos que el formulario esté pasando correctamente el nombre, el correo electrónico y la contraseña. El proceso de registro llega al punto esperado. Verificamos las acciones de uso de almacenamiento y confirmamos el comportamiento correcto. Continuamos depurando y analizando la lógica del formulario de registro.
Entonces, vamos a obtener el estado de uso de almacenamiento. Y voy a obtener el usuario. Y acabo de chocar algo. No importa. No solo voy a obtener el usuario. Voy a obtener la condición de autenticación actual también. Está iniciada la sesión. Y voy a hacer eso como state.auth.isloggedin. Muy bien. Entonces, ahora estamos utilizando estas condiciones. Esta será mi comprobación condicional aquí en la parte superior. Si estoy, simplemente vamos a ocultar el formulario de registro. Si no estoy iniciado sesión. Y luego, si estoy iniciado sesión, estamos llegando al final de esto. Si estoy iniciado sesión, vamos a mostrar user.name. Creo que eso funciona. Entonces, lo que tenemos aquí. Tenemos los valores predeterminados de los usuarios que se pasan en user-dash-one en fake.said. Y tenemos la contraseña 123 en caso de que necesitemos hacer referencia a eso más adelante. Lo que va a suceder es que, toma los valores predeterminados del formulario. Cuando presiono registrarme, lo que quiero asegurarme es de usar el comportamiento correcto, usé inicio de sesión. Entonces, eso ya me habría hecho una persona triste. Así que vamos a ir y registrarnos aquí. Entonces, el comportamiento de registro me permitirá registrarme con estos usuarios. Necesito un nombre allí. Entonces, lo que podemos hacer aquí es ¿qué estás buscando? No se puede asignar el tipo buscado, correo electrónico, contraseña. Falta la propiedad nombre. Entonces, sí, necesitas el nombre. Muy bien. Vamos a ponerlo aquí rápidamente. Tenemos nombre, establecer nombre, fakeyzed. De acuerdo. Entonces, vamos a obtener ese comportamiento aquí abajo. Simplemente vamos a pasar ese valor. En realidad, no es necesario, supongo, porque vamos a poder pasarlo de todos modos. Pero, ya sabes, hagámoslo correctamente aquí. Y tenemos el establecer nombre allí. Verifiquemos. Fakeyzed. Muy bien. Todo debería estar bien. Lo que esperamos que suceda es que cuando ejecute ese registro, espero iniciar sesión. Espero ocultar el formulario. Y espero poder configurar todo. Entonces, vamos a probarlo. Vamos a intentarlo. Está haciendo el comportamiento. Veremos en un segundo. Puedo inspeccionar las conexiones de red. Entonces, tal vez hubo un problema. Volvamos atrás y veamos la consola. Sin errores en la consola. Entonces, ¿por qué se queja la consola? Vamos a poner esta consola en su propia ventana aquí para poder depurar rápidamente. Así que vamos a la pestaña de red. Vamos a intentar hacer eso de nuevo. ¿Y qué obtenemos? Entonces, el comportamiento de búsqueda indefinido. Entonces, lo que podemos hacer es verificar qué está sucediendo debajo de esa mutación de registro. Que está debajo del modelo. Entonces, el registro está obteniendo esta carga útil. Vamos a inspeccionar esa carga útil a medida que llega aquí. Y luego la mutación del cliente aquí de registro. Creo que necesitamos obtener el nombre, el correo electrónico. Entonces, vamos a ver si estamos viendo las cosas que necesitamos ver. Así que vamos a intentar registrarnos de nuevo. ¿Vemos esa carga útil incluso llegando aquí? Entonces, parece que tal vez en realidad mi formulario está roto porque ni siquiera llega aquí. Así que echemos un vistazo rápido al formulario aquí. Entonces, volvamos a la página de índice. Correcto. Página de índice. Entonces, en ese clic del botón, vamos a echar un vistazo rápido aquí y ver que, de hecho, estamos obteniendo el nombre, el correo electrónico, la contraseña. Así que lo estamos obteniendo llamado. Y de hecho, parece que lo estamos obteniendo también dentro del modelo. Entonces, la ruta para el registro, no sé por qué está intentando llamar eso. Tal vez me registro, me registro. De acuerdo. Entonces, está funcionando. Está llegando al punto donde esperamos que llegue. Las acciones de uso de almacenamiento, actions.signup. Ni siquiera estoy hablando al micrófono ya. De acuerdo. Actions.signup. Entonces, vamos a echar un vistazo rápido aquí para ver qué está sucediendo. Acciones de uso de almacenamiento, uso de almacenamiento. Sí, sí, sí. Solo verifiquemos mi otra lógica aquí en el formulario de registro. Asegurémonos de no haber introducido algo estúpido por accidente. No. Ese debería ser el comportamiento correcto. Entonces, queremos la página de índice.
24. Depuración de la Mutación de Registro
Short description:
Nos encontramos con un error al intentar la mutación de registro. Parece que la mutación de registro está llamando a localhost, lo que resulta en un error 400. Intentamos solucionar el problema y revisamos la pestaña de monitoreo, pero no encontramos ninguna operación. También intentamos un registro incorrecto para depurar aún más. Ahora estamos explorando el uso de un enfoque de mutación diferente. Estamos pasando los parámetros directamente e intentando una llamada de red para registrar a un usuario. La llamada de red es exitosa y el usuario se registra con la respuesta esperada de la cookie. Sin embargo, todavía necesitamos solucionar el error en la mutación de registro original. Sospechamos que puede haber un error relacionado con la variable helper. Continuaremos depurando para identificar y resolver el problema.
Muy bien. Vamos a ir al modelo aquí de nuevo muy rápido y echar un vistazo al modelo. Entonces, registro. Esto se está ejecutando. De acuerdo. Pero aquí es donde estamos teniendo el problema. Entonces, podemos intentar esto. No ahí. Vamos a intentar esto. ¿Por qué se queja de esto? Estamos casi sin tiempo aquí. Pero tengo tiempo para intentar diagnosticar este evento en particular, así que adelante y totalicen para la línea de pregunta, eso es cosa de ustedes. No tenía la intención de hacer eso, pero definitivamente estamos obteniendo un error en este intento aquí de hacer la mutación. Así que me dice que esta mutación de registro aquí es bueno, lo que podemos hacer es echar un vistazo rápido aquí. ¿Qué está pasando aquí? Entonces, el cliente, me pregunto si necesito reiniciar esto después de haber trabajado con las variables de entorno aquí. Si alguno de ustedes tiene alguna idea, siéntanse libres de unirse. Podemos debug esto juntos ahora que estamos justo en el final aquí. El registro teóricamente funciona muy bien. Correo electrónico. Bueno, creo que sé cuál es el problema. Creo que estoy estoy. Necesita asegurarse de ver una contraseña en la carga útil, correo electrónico, nombre y contraseña. Bien. Entonces está llamando a localhost, lo cual es algo extraño aquí. A partir del 400. Bueno, podemos intentar aquí. Esto es un poco de un estiramiento. Vamos a echar un vistazo rápido a la pestaña de monitoreo y ver si vemos las operaciones. No. Así que tenemos la acción de registro aquí. Contraseña, nombre, correo electrónico, entrada de registro. Verificamos que pudimos hacer un registro desde la API. Y verificamos eso. Intentémoslo de esta manera. Vamos a hacer un registro incorrecto. Esto está evitando el uso de almacenamiento fácil. Pero si volvemos a nuestra página de índice. Asegurémonos de que realmente estoy llamando a este tipo aquí. Crear correo electrónico, nombre, contraseña. Siento que estoy exportando la cosa equivocada aquí. Entonces, lo que voy a hacer es para la última prueba aquí, si todos ustedes quieren darme un rápido signo de vida en el chat para asegurarse de que todavía están viendo o interesados en esto. Si estoy hablando con mi gente. Hay un lo siento, hay un chat que no vi. Registro, thunk, error, no se puede resolver, mutación, registro, harams. ¿Ya lo resolviste, Nathaniel? Genial. De acuerdo. Así que déjame ver. Voy a intentar esto. Intentemos evitar esto. Así que tenemos el tenemos el uso de tipo de mutación aquí. Vamos a ir directamente a la fuente aquí. La razón por la que no podemos usar esto allá es porque es un gancho y está dentro de una llamada funcional. Así que tenemos el uso de tipo de mutación aquí. Y en esa uso de tipo de mutación, vamos a hacer esto aquí abajo. Y solo veamos si eso funciona. Entonces, uso de tipo de mutación, vamos a hacer. Uso de tipo de mutación igual. No, poniendo eso al revés aquí. Así que llamaremos a esto registro o mover registro. Data error llamado. Y eso va a ser uso de mutación, uso de tipo de mutación. Sí, un segundo. Sí. Bueno, no nos vamos a preocupar por llamarlo realmente por ahora. Lo que queríamos hacer es una mutación de registro. Que nos da parámetros de oh, me pregunto. Me pregunto, me pregunto, me pregunto. De acuerdo. Vamos a pasar estos parámetros aquí directamente, ni siquiera vamos a ir por la ruta de la variable. Vamos a ir nombre, correo electrónico, contraseña. Entonces eso es como lo esperaríamos aquí. Y luego queremos el objeto de retorno en eso. ID true. Y tengo un pequeño error en mi código ahí. Así que vamos a intentar llamar esto solo por sí mismo, lo que en teoría debería darnos una llamada de red exitosa. Y registrando a ese usuario. Así que vamos a intentarlo aquí. Voy a darte un usuario diferente porque no quiero tener un problema al intentarlo más tarde. Entonces, si intentamos esto, me aseguraré de que el inspector de red siga funcionando aquí. Así que lo ejecutamos. Vamos a verificar la solicitud de GraphQL. Así que se envió. Obviamente no está escuchando las respuestas, pero así que eso, quiero decir que está funcionando. Eso está funcionando como esperábamos, ya sabes, estamos obteniendo la cookie de vuelta en los encabezados de respuesta para el token de usuario de Hazura. Así que todo eso es una mutación con la forma correcta. Entonces me dice que el error, Voy a eliminar todo ese fragmento aquí ahora. Porque no me ayuda en absoluto con los comportamientos aquí. Así que voy a seguir adelante y tener el mismo comportamiento. Ahora quiero verificar si tenía un error tonto. ¿Estoy llamando al variable helper? No creo que lo esté haciendo. Debajo de models.
25. Comprobando el Cliente y la Ruta
Short description:
Vamos a verificar qué piensa el cliente y ver si la carga útil tiene la forma correcta. Parece que hay un problema con la ruta, lo que está causando una solicitud no definida al localhost. Necesitamos investigar más a fondo.
Y lo estoy, lo estoy llamando. De acuerdo. Así que vamos a verificar qué piensa el cliente que es. Veamos qué piensa el cliente que es aquí. Cuando intenta hacerlo de la manera correcta. Así que vamos a la consola aquí. Por supuesto, sí, consulta. Bueno, ahora, lo que podemos hacer es esto porque técnicamente, técnicamente eso debería estar bien ahí. Porque esa carga útil tiene la forma que debe tener. Se llama, se llama una solicitud de envío a local también, lo cual no, una solicitud no definida a POCAL, a POCAL host, a localhost. Entonces la ruta, se llama una ruta extraña. Tal vez tener que.
26. Probando la Autenticación de Usuario y Permisos
Short description:
Bypassamos el código y actualizamos la página para probar si el usuario autenticado solo puede ver sus propios detalles. Es posible que el cliente no nos esté proporcionando la URL correcta. Eliminamos la parte del modelo para tener un código funcional. Probamos la consulta de datos de usuario y nos encontramos con un problema de permisos. Regeneramos el SDK de GraphQL y verificamos el encabezado de la solicitud, que no está pasando la cookie. Intentamos volver a autenticar al usuario.
Vamos a, vamos a, vamos a seguir la cadena aquí. De acuerdo, así que tenemos process.env, el punto cero del endpoint, que va a hacer eso en el. Así que solo me va a dar exactamente lo que espero aquí. Si miro el .env aquí. Asegurémonos de que sea, el punto cero del endpoint, debería ser exactamente lo que estoy buscando. Correcto, así que el punto cero del endpoint, oh, tal vez. No. Así que me está dando el operador de cadena, que es lo que quiero. Ahora, lo que puedo hacer aquí. Puedo omitir porque en el, en el, en el GraphQL Zeus. Me da su propio cliente. Permíteme quitar esa comprobación de cliente rápidamente. Todavía estoy mirando esto. Me da su propio cliente. Así que si voy a modelo aquí. Y debajo de Zeus. Voy a agregar su propia copia del cliente, que es un generado. Y solo voy a ir al cliente aquí. O no es clientes, algo más no. Esto es el último GQL es lo que quería decir. De acuerdo, así que si, si vengo aquí y solo tomo GQL. Y uso GQL en lugar de esa complicada comprobación de cliente para estos thunks, porque de todos modos no están autenticados, en todos los casos. Así que este es el comportamiento de registro, así que puedo hacer esto y. Y eso debería funcionar bien para mí. Porque lo que quiero hacer es hacer esto aquí. Así que voy a omitir el código complicado que estamos escribiendo. Y simplemente actualicemos la página para poder medirlo, voy a seguir adelante y algo interesante y me pregunto si alguien eliminó mi data. Oh, no, ya sé. Eso es gracioso. De acuerdo, sí. Bastante gracioso. Cuando hicimos la mutación exitosa y obtuvimos la respuesta porque es una cookie HTTP. Tengo la cookie falsa de Eddie en mi historial aquí. Y como solo tiene permiso de selección para sí mismo. Él, lo obtengo en la respuesta en este momento, aunque no lo haya autenticado porque no pasé por mi state management. Así que sí, bastante tonto. Es interesante mostrar que esa parte está funcionando. Entonces, puedes ver que está volviendo si voy aquí ahora a la aplicación. Y tengo que ver si realmente puedo ver el sí, voy a eliminar esta cookie aquí. Y actualizo la página y volveré a ser un usuario no autenticado, haciendo esa consulta. Y literalmente solo está pasando, pasando la cookie HTTP, si existe. Y si está ahí, eso lo ve, le da ese usuario. No hay estado local del que esté obteniendo, solo está pasando esa cookie. Cuando se le permite. Entonces, es realmente genial que al menos hayas podido ver esa parte funcionando. Sin embargo, incluso obtener el estado aquí para que funcione realmente. Así que probemos esto ahora. Y veamos, porque va a ser realmente interesante ver aquí. ¿Fue esto el registro? Así que esta es la mutación de registro. Ahora, así que tenemos una mutación de registro exitosa. Técnicamente, así que funcionó. Funcionó. Solo voy a apagarlo ahora mismo. Y, y lo que estás viendo ahora es que tenemos a fake EZ en la cuenta ahora porque ya hice la solicitud. La teoría aquí ahora es que si actualizo esta página, solo veré a fake EZ, porque la siguiente solicitud al servidor Hazura estará autenticada y solo tendrá acceso para ver sus propios detalles. Así que, actualicemos esta página y veamos si se cumple esa teoría, lo cual no sucede. Podría ser porque en realidad estoy obteniendo de la caché aquí. Debido a Apollo ahora. Puede que tenga que darle suficiente tiempo para borrar la caché. Pero lo que tenemos aquí es a fake EZ, y lo que podemos intentar aquí es ver en base a esto es lo último que probaremos aquí, así que hubo un problema con el cliente aquí que en realidad no sé en este momento, pero hubo un problema aquí con el cliente que no nos estaba devolviendo la URL correcta. Probablemente. Supongo que podría estar relacionado con ser una llamada de punto n en el lado del cliente y no es y no comenzar local, pero tendría que verificar eso, así que en realidad no estoy seguro. El hecho es que esa es la parte que escribimos que fue mala, esa parte funcionó. Así que voy a seguir adelante y eliminar la parte del modelo aquí para que tengas un código funcional con el que puedas jugar antes de que me ocupe de arreglarlo. Y luego vamos a hacer una última prueba antes de terminar aquí. Y es ver si podemos en la página de índice donde estamos consultando nuestros datos de usuario data. Debería poder obtener el, el correo electrónico. Estoy conectado. Y no preocuparme por eso. Si no estoy conectado. Así que probemos eso. Y lo que podría ver. Entonces, no me está dejando porque estoy solicitando data a la que no tengo acceso. Así que hay un problema de permisos que he creado donde en mi capa de data, que está evitando que consulte esos data y necesito arreglarlo. Si le doy un comportamiento de fuerza bruta aquí, si voy a enfoque de fuerza bruta, iría a usuario y voy a permisos y en el campo de selección. Si digo permisos de selección de fila sin ninguna comprobación, puedo seleccionar todas las columnas. Teóricamente, teóricamente, debería poder ver eso. Veamos si obtenemos una consulta exitosa al. Así que necesito, necesito ver cuál es el Necesito averiguar cuál es el problema técnico detrás de mi capa de permisos que claramente he configurado algo raro, probablemente relacionado con el JWT que se está configurando. Y revisa eso una vez más, pero creo que eso es probablemente Supongo que ese es el problema que tengo, pero eso puede ser hasta donde llego en esto. Entonces, el usuario tiene permiso. Vamos a intentar regenerar el SDK de GraphQL. Y el podemos echar un vistazo a la solicitud real que se hizo. Voy a seguir adelante y ejecutar esto de nuevo aquí. Entonces, la solicitud está pasando, ¿está pasando la cookie real y eso podría ser lo que hay que verificar en el encabezado de la solicitud? Así que en realidad no está pasando la cookie, que puede que no se haya configurado en la respuesta. En este caso, y esto es algo que hay algunos problemas con las cookies HTTP, donde si has intentado eliminar la cookie en realidad, se pone un poco molesto contigo. Así que voy a eliminar esto del almacenamiento para easy peasy, para poder intentar volver a autenticar al usuario. Entonces, la razón fue que los usuarios no están autenticados aquí. De acuerdo, voy a seguir adelante e intentarlo.
27. Depuración de Autenticación y Gestión de Estado
Short description:
Entonces, deberías seguir obteniendo usuarios porque en realidad no estás solicitando ese campo. Veamos si podemos hacer que ese usuario se autentique nuevamente con un registro correcto. Parece haber un pequeño problema con mi gestión de estado en cuanto a lo que se está verificando. Lo observamos funcionando una vez, pero no estoy seguro de por qué ya no está configurando la cookie. Actualizaré y corregiré el código para asegurarme de que sea infalible. Proporcionaré actualizaciones por correo electrónico, Discord y Twitter.
Entonces, está conectado. Obtén el correo electrónico, si no, devuelve falso. Entonces, deberías seguir obteniendo usuarios porque en realidad no estás solicitando ese campo. Pero lo estás. Algo me dice que deberíamos hacerlo de esta manera. Entonces, enfoque de fuerza bruta, a veces tienes que intentarlo. Entonces, en ese, en ese correo electrónico. Si es falso. No intentes solicitarlo. Oh, De acuerdo, probablemente dejaré de perder el tiempo aquí. Veamos si podemos hacer que ese usuario se autentique nuevamente con un registro correcto. Sí, como lo logras de inmediato. Voy a intentar autenticar a otro usuario aquí. Usuario tres. Dale un segundo para procesarlo. También puede ser que esté trabajando con algunas respuestas lentas aquí. Esto fue el registro y la respuesta está configurando la cookie, lo cual también puede que no esté contento con el hecho de que lo esté enviando. Lo estoy enviando a través de HTTP. Respuesta. Entonces, el usuario se crea, pero ¿por qué no se está configurando ahora? Pequeño problema con mi gestión de estado en cuanto a lo que se está verificando, pero luego si fue enviada esa última solicitud. Echemos un vistazo. Esta es una solicitud para el usuario, y ¿dónde se envía la cookie? Sí. De acuerdo. Está. Permíteme hacer una última prueba aquí, donde si entro en un navegador diferente. Correcto, no he tocado las cookies, solo estoy un poco desesperado. Probémoslo rápido. Y luego tendré que darle fin. Dame una sesión de navegador. Lo que sea. Aquí vamos. Veamos qué sucede si hacemos una solicitud para asegurarnos de que estoy viendo la pestaña de estado de la red aquí. Haz una solicitud aquí con el usuario cinco. Y luego la solicitud se envía bien, así que viste que funcionó rápidamente y de manera efectiva. Este es uno de los problemas con Chrome en este momento, si estás jugando con los navegadores, y no estoy seguro de por qué es así. Pero eso es. Configuremos la cookie nuevamente, veamos si realmente se configura la cookie. Entonces, me dijo que debería. Aquí es donde empieza a entrar en un mundo en el que tienes que depurar como loco para el NG rock podría estar causando un problema aquí, que es un puerto HTTP y así sucesivamente. Entonces, tal vez eso sea todo por ahora. Solo por curiosidad. Última pequeña prueba aquí, qué tan rápido puedo implementar esto en Russell. Y luego darle la actualizar la URL, así que tal vez cierre la brecha del error. De acuerdo. De acuerdo. De acuerdo. De acuerdo. De acuerdo. Implementar índice. De acuerdo. De acuerdo. De acuerdo. Ahora solo necesito variables de entorno. Hay un atajo para esto. De acuerdo. De acuerdo. De acuerdo. Desde que agregué lo bueno. No creo que vayan a funcionar. Puedes visitar la página de todos modos. Ahora los usuarios. Supongo que eso solicitud para eso. De acuerdo. De acuerdo. De acuerdo. De acuerdo. De acuerdo. Tienes el código. Este patrón funciona. Lo tengo en un par de aplicaciones en producción. Y necesito averiguar dónde está fallando aquí. Estoy viendo que lo observamos funcionando una vez. No estoy seguro de por qué ya no está enviando la por qué ya no está configurando la cookie. Eso es algo que tendré que depurar un poco más. Actualizaré el repositorio para que tengas acceso a eso. Desafortunadamente, eso es un poco deprimente, pero es el patrón de tener esa conexión de TypeScript a tu servidor y poder usar los hooks y poder tener los tipos dentro del ID. Ahí es donde está la magia. Así que el patrón de autenticación. Es agradable cuando funciona. Tengo que averiguar dónde está el error en mi código. Seguro que está en algún lugar tonto, como realmente tonto. Actualizaré, corregiré y solucionaré para asegurarme de que esto sea infalible. Creo que tendré acceso a los correos electrónicos para notificar, así como en el canal de Discord. Actualizaré cuando tenga noticias.
28. Reflexiones Finales sobre la Masterclass y Conclusión
Short description:
Entonces, averigüemos eso. Funciona para las partes no autenticadas, lo cual es genial. Hoy hice algo en el archivo de cookies. Esa es una solicitud de red en esa cookie, ¿cuál era la edad máxima? Gracias por ver y unirse. Espero que hayan podido obtener algún valor de eso. GraphQL y las cookies pueden hacernos. Que les vaya bien. Nos vemos en otras conferencias.
Entonces, averigüemos eso. También lo publicaré en Twitter. Cuando el esqueleto esté listo, pueden encontrarme allí. Sí, funciona para las partes no autenticadas, lo cual es genial. Tengo que decirlo, porque cuando todas las cookies están, puedes configurarlas más oscuras, y puede ser cuando estaba tocando algo en el archivo de cookies hoy que eso se movió algo que no debería haberse movido. Esto también es parcialmente por qué no se debe poner TS no check en las cosas, para detectar problemas.
No, sé que cambié esta parte. Me pregunto, solo por curiosidad. Esa es una solicitud de red en esa cookie, ¿cuál era la edad máxima, la edad máxima debería ser suficiente. No lo sé. No lo sé. Eso es todo. Es como después de ti. Entonces, gracias por ver. Gracias por unirse. Espero que hayan podido obtener algún valor de eso, y GraphQL y las cookies pueden hacernos. De hecho, de hecho. Muy bien, que les vaya bien. Gracias por ver y sí, nos vemos en otras conferencias. Adiós.
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.
Tabla de contenidos: - Inicio e introducción a Svelte - Inicializar el proyecto frontend - Recorrido por el proyecto esqueleto de SvelteKit - Configurar el proyecto backend - Consultar datos con GraphQL - Recuperación de datos en el frontend con GraphQL - Estilización - Directivas de Svelte - Enrutamiento en SvelteKit - Endpoints en SvelteKit - Despliegue en Netlify - Navegación - Mutaciones en GraphCMS - Envío de mutaciones GraphQL a través de SvelteKit - Preguntas y respuestas
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React. Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Comments