Construyendo un backend serverless nativo de GraphQL con Fauna

Gracias por unirse a nosotros. Y ahora comencemos. Gracias por unirse a nosotros hoy. Hemos estado esperando para comenzar. Mi nombre es Rob. Soy una de las personas que los guiará a través del masterclass hoy. Quiero asegurarme de que todos estén en el servidor de Discord con nosotros. Voy a dejar el enlace a las diapositivas que usaré allí ahora, y también les daremos un enlace al masterclass más tarde. para que puedan volver y hacer esto, ya sea ustedes mismos, revisarlo ustedes mismos o llevarlo a sus equipos para que lo hagan y puedan seguirlo con ustedes.

Entonces, sin más preámbulos, voy a sumergirme directamente en el masterclass. Así que voy a pasarle la palabra a Rob para que les dé un pequeño recorrido por el espacio de descubrimiento. Y luego les dará algunos recursos, y luego Shadid los guiará a través del masterclass.

Cuando hablamos de serverless, hablamos de cuatro cosas clave. Estas son típicamente las mismas para todos los diferentes proveedores de serverless. Primero, no hay preocupaciones de infraestructura, por lo que no es necesario aprovisionar clústeres, servidores, parchear sistemas operativos, todas esas cosas. No tienes que preocuparte por eso. El proveedor se encarga de eso por ti. Y el acceso se proporciona simplemente a través de una API o como un servicio. En segundo lugar, se escala automáticamente, por lo que no es necesario pensar en la aprovisionamiento. Si no tienes usuarios, debería escalar a cero y no deberías pagar por ningún cálculo. Si tienes un aumento repentino de tráfico, debería escalar inmediatamente. Y no deberías tener que preocuparte por nada de eso. Y eso es lo que Fonda te ofrece para tu database, similar a lo que los proveedores de funciones como servicio te ofrecen para tu cálculo. En tercer lugar, debería ser altamente disponible y seguro. Y estas no son cosas de las que debas preocuparte. Correcto. Si hay una interrupción en algún lugar, el proveedor debería encargarse de mantenerte en funcionamiento y darte acceso a tus data. Y eso es lo que hacemos en Fonda. Y finalmente, debería pagarse por valor. Si no tienes acceso a tu database, no deberías pagar por el acceso durante ese período. Si almacenas, por ejemplo, 10 gigas, eso debería ser 10 veces más caro que almacenar un giga. Correcto. Y, por supuesto, tenemos un nivel gratuito que te ofrecemos para ayudarte con eso. Pero el principio es que solo pagas por el acceso real. No pagas por horas de ejecución de Fonda ni nada parecido. Si tienes mucho acceso y esas lecturas y escrituras aumentan, si no tienes acceso, se reduce a cero. Y ese concepto de escalar a cero es realmente importante en serverless. Algunos de los beneficios rápidos de usar un serverless como Fonda, realmente deberías poder lograr cero tiempo de inactividad, al menos en términos de tu database. Y esto te ayuda, como ayer, hubo un gran corte de energía del que todos saben. Si tu arquitectura estaba en una sola región y resultó ser la que se cayó, entonces adiós. Correcto. No hay forma de evitarlo. Pero Fonda se ha extendido por encima de estas regiones de tal manera que todo nuestro tráfico se transfirió a las otras regiones sin que tu aplicación tuviera que hacer nada. Hasta donde yo sé, no tuvimos ningún caso reportado de pérdida de data ayer. Así que esta es una gran ventaja para ti como desarrollador front-end que solo quiere almacenar y recuperar tus data. Todas estas cosas de las que no tienes que preocuparte. Esto también puede ayudarte a cumplir con los requisitos de cumplimiento. Esto es con grupos de regiones que ofrecemos, y no vamos a entrar en esto hoy porque el objetivo de hoy es construir. Puede ayudarte a reducir la latencia con Fonda porque tus usuarios acceden al punto final más cercano. Llegaremos a eso más tarde. Y es un aumento mínimo en el gasto tener toda esa redundancia. No estás ejecutando dos copias de tu database, ¿verdad? Estás ejecutando tu tráfico distribuido, que es el mismo costo total en lugar de duplicar o triplicar el costo de tenerlo en múltiples ubicaciones. También hacemos esto sin el problema que se ve en el lado de la consistencia eventual, porque Fauna tiene transacciones sólidas. Entonces, en lugar de encontrarte en una situación en la que tienes que verificar y asegurarte de tener los datos más recientes o usar bloqueos o algo así, simplemente escribes en un solo punto final y tus usuarios leen desde el punto final más cercano porque todo es una transacción sólida. Siempre tendrás los datos más recientes allí. Otras bases de datos serverless no te ofrecen esta garantía. Mencioné antes que también es rápido. Correcto. Estos son los números de performance reales. Puedes confirmarlos por ti mismo yendo a status.fauna.com. Estamos hablando de lecturas de un solo dígito en milisegundos y escrituras transaccionales consistentes en dos dígitos en milisegundos. Así que es realmente eficiente para tus aplicaciones, lo cual es importante cuando estás creando experiencias front-end. Correcto. Fauna funciona muy bien con proveedores de serverless de próxima generación. No vamos a entrar en la implementación hoy, pero si ya estás ejecutando tu aplicación en algo como CloudFlare pages o en Purcell, es perfecto y tenemos mucho material para ayudarte a integrarte con eso. Y nuevamente, esto es forms una capa de API inteligente sobre Fauna. El servicio GraphQL hace lo mismo por ti. Así que no tienes que preocuparte por dónde dirigir tu tráfico.

Acabas de acceder a graphql.db.fauna.com, como verás en el masterclass de hoy. Y nos encargamos de esa ruta por ti. Y lo que vas a construir hoy es un modelo que llamamos cliente serverless, donde no tienes toda esta otra infraestructura en el medio. Solo tienes tu front-end y te comunicas directamente con Fauna. Y eso es lo que gestionas. Y eso es en lo que te preocupas.

Este masterclass se deriva de algo que llamamos el Zen de Fauna. No vamos a cubrir todo esto hoy. El masterclass cubre principalmente los dos primeros. Siempre utilizando funciones definidas por el usuario, que son implementaciones de tus resolutores en tu esquema de GraphQL. Hablaremos sobre por qué. Y hay una parte de seguridad que te enseñaremos sobre cómo poner solo las claves en tu cliente que pueden iniciar sesión y nada más. Correcto. Así es como proteger el acceso a tus datos.

Entonces, cuando termines el masterclass de hoy, tendrás un modelo listo para producción para autenticar usuarios y ampliar tus consultas de GraphQL. Este masterclass se desarrolla de manera bastante fluida. ¿Cuál era el objetivo donde intentamos introducir solo una cosa nueva a la vez para ti? Pero aún así te llevamos desde no saber nada sobre Fauna hasta tener esta configuración lista para producción que puedes usar en las próximas tres horas. Entonces hablamos de que las funciones definidas por el usuario están en todas partes. Y la razón por la que hacemos esto es porque te permite sacar la lógica de negocio de tu código front-end y almacenarla en otro lugar. Correcto. Para consultas y mutaciones básicas en GraphQL, eso ya te lo proporcionará Fauna. Cuando creas un tipo, te damos un find type by ID, update type, read type, delete type. Lo siento, create type, delete type. Pero para casos más complejos como los que cubriremos en el masterclass, encapsularás esa lógica en una UDF. Puedes probarlo, pero también hace que tus consultas y mutaciones sean más simples. Y luego, por supuesto, hablamos de este principio de privilegio mínimo, el principio de privilegio mínimo, aquí con las claves de inicio de sesión. Te mostraremos cómo generar tokens temporales para los usuarios cuando inician sesión y cómo se utilizan esos tokens para autorizar el acceso a los recursos en tu base de datos. Quiero volver atrás rápidamente. La otra cosa importante a tener en cuenta es que se niega cualquier otro permiso. En el masterclass, puedes registrar un usuario, puedes iniciar sesión como usuario, pero no puedes hacer nada más. Porque tienes que enviar estas claves con tus clientes, ¿verdad? No hay forma de sacarlo a través del navegador de tus usuarios sin exponerlo. Quieres asegurarte de que una vez expuesto no pueda hacer nada más. Te mostraremos cómo hacerlo en este masterclass.

No sé por qué esa diapositiva está ahí. Antes de comenzar, quiero que tengas nuestra información de contacto. A continuación, se la entregaré a Shadeed. También pondré esta información en Discord. Tenemos nuestro propio Discord, no te unas hasta después del masterclass. No estamos tratando de alejarte de GraphQL Galaxy, pero a medida que construyas con Fauna, es el lugar al que debes acudir para obtener respuestas a tus preguntas. También tenemos Fauna Labs, que es una colección de herramientas, aplicaciones de muestra, repositorios, mucho código para ayudarte a construir con Fauna. Y siempre puedes seguir a Fauna en Twitter o hacernos preguntas en Twitter o por correo electrónico, y nuestra información está en las diapositivas aquí. Nuevamente, estas diapositivas ya se compartieron en el canal del masterclass, en Discord, por lo que deberías tener un enlace a ellas. También voy a agregar esta información individualmente allí. Y también voy a agregar un enlace al masterclass, al que puedes acceder visitando fauna.link.gqlworkshop y en este punto voy a pasarle la palabra a Shadeed para que te guíe a través de ese masterclass y te ponga en marcha. Así que gracias por unirte a nosotros, a todos. Bienvenidos a todos.

Hoy estamos construyendo con Fauna. Vamos a construir una aplicación serverless lista para producción. Muy bien, déjame compartir mi pantalla. Avísame si puedes verla. ¿Puedes ver la pantalla? Genial. Yo la veo. Muy bien, empecemos. Puedes acceder a todo este masterclass después de que terminemos, y puedes hacerlo por ti mismo. Vamos a mantener esto actualizado, esta guía completa del masterclass. Así que empecemos.

Lo primero que necesitarás es tener un poco de entendimiento de cómo funciona GraphQL. El otro requisito es tener una cuenta de Fauna. Si aún no la tienes, simplemente créala. Voy a ir a dashboard.fauna.com y aquí ya estoy conectado. Puedes crear una cuenta nueva, si aún no lo has hecho. Puedes registrarte para obtener una cuenta gratuita. No necesitas realmente una tarjeta de crédito ni nada por el estilo.

Muy bien, el primer paso es crear una database. Así que vamos a crear una database. Y aquí la voy a llamar database Shade Workshop, GQL Workshop. Muy bien. Y voy a seleccionar un grupo de región. Para este caso, voy a seleccionar classic. Puedes aprender más sobre los grupos de región y lo que representan en el sitio de documentación de Fauna. Por ahora, simplemente voy a seleccionar classic y crear nuestra database. Ok, déjame volver a esta página del masterclass y básicamente vamos a seguir esto. Así que, Capítulo 1, requisito: registrarse para obtener una cuenta de Fauna. Y si eres completamente nuevo en GraphQL, visita la introducción a GraphQL para aprender un poco sobre GraphQL. Así que necesitas tener un entendimiento básico de GraphQL para seguir este masterclass. Muy bien, muy bien.

Entonces, primero creamos nuestra database. Ahora, vamos a crear un esquema y te mostraré lo fácil que es comenzar con Fauna. Muy bien, aquí estoy en mi terminal. Vamos a abrirlo. Haz touch. Muy bien, aquí, vamos a traerlo aquí. Muy bien. Así que tengo un esquema simple. Voy a copiar esto. Esquema para una tienda. Tenemos un nombre de tienda, correo electrónico, métodos de pago, que es un array de stream y categorías. Así que todo lo que tienes que hacer es, nuevamente, este es un esquema muy básico con solo un modelo que se convertirá en una colección, básicamente una tabla. Así que todo lo que hacemos es guardar esto y volver aquí y vamos a GraphQL y nuestro dashboard de Fauna. Aquí lo único que tengo que hacer es importar este esquema. Así que puedo ir a escritorio, workshop, esquema. Ahí lo tienes. Fauna detectó todo a partir de ese esquema simple y creó muchas cosas para nosotros. Creó las consultas, las mutaciones, también creó las tablas. Por ejemplo, si voy aquí a la colección, verás que ahora tengo una colección de tiendas. También creó las consultas y las mutaciones por defecto. Puedo encontrar la tienda por ID y aquí desde el playground, puedo ejecutar esas consultas y encontrar una tienda por ID, puedo crear una tienda, actualizar una tienda, eliminar una tienda. Vamos a hacer eso. Voy a crear una nueva tienda. Muy bien, adelante y crea una nueva tienda. Y ahí lo tienes. Ahora, si vuelvo a la colección. Verás que se ha creado esa nueva tienda. Ahora, una de las cosas importantes a recordar aquí es que Fauna no es un servidor de aplicaciones. No es algo como Apsync o Hasura. Fauna es primero una database. Es una database que te proporciona nativamente una API de GraphQL. Así que puedes usar la API de GraphQL para comunicarte nativamente con la database. Más adelante en el masterclass, vamos a ver cómo funcionan los resolvers en Fauna. Así que si tienes un entendimiento básico de GraphQL, sabrás que toda la lógica de negocio es básicamente un resolver en cada operación de GraphQL. Así que vamos a ver cómo funcionan los resolvers en Fauna y cómo funcionan las funciones definidas por el usuario. También vamos a sumergirnos en FQL, que es el lenguaje de consulta de Fauna, que es el lenguaje propio para interactuar con Fauna y escribir algunas cosas más avanzadas en Fauna. Así que voy a volver a la página del masterclass. En menos de cinco minutos, básicamente creamos un backend de GraphQL. Ahí lo tienes.

En este momento, puedes llamar al backend, como llamar, ya sabes, crear tienda, actualizar tienda, eliminar tienda, encontrar la tienda por ID, Puedes hacer todas estas operaciones desde tus aplicaciones cliente en este punto. Eso es bastante genial.

De acuerdo, hagamos una consulta. Así que aquí, encontrar la tienda por ID, Así que voy a usar este ID. Así que si tienen alguna pregunta, por favor no duden en preguntar en Discord o en el chat.

De acuerdo, pasemos a la siguiente parte. En esta sección, ya aprendimos cómo puedes cargar un esquema, cómo Fauna genera consultas y mutaciones, así que pasemos a la siguiente parte. De acuerdo, veamos los patrones de acceso a datos en Fauna y cómo funcionan en realidad.

De acuerdo, primero que nada, este es el tipo de aplicación que estamos tratando de construir en esta masterclass. Va a ser una aplicación realmente simple. Bueno, es una aplicación realmente simple. Es algo así como un comercio electrónico similar a Shopify. Entonces, el modelo de datos que vamos a utilizar, será similar a Shopify donde tienes un propietario de una tienda. En Shopify, simplemente puedes registrarte, puedes crear una tienda, y Shopify es este proveedor de servicios SaaS que tiene múltiples tiendas. Entonces, el modelo de datos va a tener un propietario y un propietario puede tener múltiples tiendas. Como puedes ver, esto va a ser nuestro esquema de datos, modelo de datos. Así que tienes un propietario, propietarios, maneja, tiendas principales.

Muy bien, veamos el esquema de GraphQL nuevamente. Nuevamente, estamos introduciendo un modelo y el propietario tiene nombre, correo electrónico, que será único porque queremos tener correos electrónicos únicos para cada persona que se registre en la aplicación. Y luego, los propietarios tienen muchas tiendas y esto se define a través de nuestra relación. Y solo porque tenemos esta tienda dentro de un array Fauna sabe que esto va a ser una relación de muchos a muchos. Va a copiar eso. Volvamos aquí. Volvamos a nuestro playground en Fauna. Y aquí, lo que voy a hacer, voy a reemplazar el esquema. Vamos, reemplacémoslo. Se ha actualizado correctamente. Y ahora, lo que puedo hacer aquí es, bien, puedo abrir las consultas y podemos ver que la nueva mutación, la actualización del propietario, encontrar propietario por ID. Las nuevas consultas y mutaciones ya están generadas. Esto te brinda la capacidad de, por lo tanto, te brinda la capacidad de no solo generar automáticamente estas consultas y mutaciones, sino que también te brinda la capacidad de crear las tuyas propias. Y eso es lo que vamos a ver más adelante, cómo puedes crear tus propias consultas y mutaciones y cosas así. a través de la creación de tus propios resolutores y UDF y otras cosas. Así que sigamos adelante y volvamos a nuestras diapositivas de la masterclass. Veamos. Esto te brinda un poco más de información sobre cómo puedes actualizar tu esquema. Esto es lo que acabamos de...

De acuerdo, muy bien. Ahora echemos un vistazo a los índices, ¿de acuerdo? Así que veamos los índices. Los índices son el patrón de acceso a data para acceder a data de una colección de Fauna. Por ejemplo, nuestro esquema se generó automáticamente. Si miras nuestro esquema nuevamente, nuestro esquema se generó automáticamente a índices. Ahora podemos obtener el propietario y todas las tiendas que pertenecen al propietario mediante este índice. Y también podemos obtener un propietario único por su correo electrónico. Simplemente porque definimos esta palabra clave única. Ahora se han creado esos dos índices. Ahora puedes crear más índices. Digamos, si tienes algo como, no sé, tal vez dirección de casa, algo así. Y solo, o código postal, y quieres encontrar al usuario por código postal, puedes crear un índice. Y puedes crear un índice sin volver a cargar tu esquema. Puedes crear, digamos que tus esquemas ya tienen esa clave, puedes crear un índice directamente desde el panel de control. Simplemente selecciona 'nuevo índice', esa es solo una opción.

Muy bien. De acuerdo. Muy bien, entonces creemos un nuevo propietario. Copiemos esto, volvamos a nuestro GraphQL playground. Quiero ser propietario, de acuerdo, así que mutación. Voy a ser propietario, pasar el índice verdadero. De acuerdo, ahora vamos a crear una tienda y asociar esta tienda con el propietario que acabamos de crear. De acuerdo, hagámoslo. Aquí, puedes ver crear tienda. Le dimos un nombre, correo electrónico, método de pago, categorías. Ahora, aquí en el campo de propietario, puedes decir conecta y esta es tu unión externa prácticamente en tu tabla. Así que si vienes de un fondo de SQL, MySQL, tienes restricciones de clave externa. Así que prácticamente esta es la relación. Aquí es donde ocurre la conexión. Así que tomemos este ID y se conecta a través de aquí. Y ahí lo tienes. Se ha creado la tienda y está, así que se asoció con este propietario. Podemos ver, podríamos tener simplemente un botón que muestre la información del propietario aquí también. Creemos otra aplicación, así que yo, esta y esta vez también para que los usuarios aquí vean la información del propietario también se está devolviendo aquí. Muy bien, genial. Muy bien, aquí solo te mostramos cómo puedes encontrar al propietario por ID. Prácticamente similar, es prácticamente esta consulta donde solo pasas el ID del propietario. Así que aquí, simplemente, este ID se va a agregar a eso también. Este ID. Y ahí lo tienes. Así que muy bien, genial. Encontrar al propietario por correo electrónico, ya hemos hablado de eso. De acuerdo, así que bien, ahora creemos otra consulta. Y esta vez vamos a crear una consulta personalizada y vamos a encontrar al propietario por su dirección de correo electrónico. De acuerdo, para hacerlo, vamos a tener una consulta definida en nuestro esquema. Así que volvamos a nuestro esquema. Crearemos una consulta. Tengo una consulta, vamos a llamar a esta consulta encontrar propietario por correo electrónico. Va a recibir una cadena de correo electrónico y va a devolver un objeto número. De acuerdo, guardemos eso, tenemos que subirlo. Así que vamos a hacerlo. Y, aquí, ahora, vemos que se ha generado una nueva consulta, encontrar propietario por correo electrónico. De acuerdo, ahora analicemos esto un poco. Si vuelvo a mis índices, veré que se ha creado un nuevo índice y tiene el mismo nombre que esta consulta. De acuerdo, y esto va a apuntar al campo de correo electrónico. Así que cada vez que ejecutemos esta consulta, ahora podemos encontrar al propietario por su correo electrónico y Fauna lo genera automáticamente para ti bajo el capó. Así que todo lo que tuvimos que hacer fue definirlo en nuestra consulta y se encargó de ello. Muy bien, así que vamos a abrir una pestaña aquí, así que voy a cerrar algunas de estas. Solo tengo una consulta allí abajo. Entendido. Muy bien, de acuerdo, también puedes definir un índice con la directiva de índice. Así que digamos que realmente no quiero nombrar eso, no quiero tener el nombre de esa clave encontrar propietario por correo electrónico. Digamos que quiero nombrarlo por correo electrónico o algo así. Así que solo puedes usar la directiva de índice y hacerlo de esa manera también. Así que esa es solo una opción para que los índices tengan un nombre diferente. Eso es todo.

Muy bien, veamos cómo podemos obtener todos los propietarios. Volvamos a la herramienta Raft, ¿de acuerdo? Aquí vemos que tenemos diferentes tipos de consultas, pero ¿qué pasa si queremos obtener la lista de todos los propietarios, o obtener una lista de todas las tiendas? Y tiendas en una tabla específica o en una colección específica. ¿Cómo lo hacemos? Muy bien, sigamos adelante y veamos cómo podemos hacerlo. El primer paso es definir una nueva consulta. Aquí, la consulta se llama 'list owners', y devuelve un array de propietarios. Muy bien, sigamos adelante y terminemos. De acuerdo, una vez más, ya están familiarizados con la regla. Guardamos el esquema y lo reemplazamos. Muy bien, puedes ver que la lista de propietarios acaba de aparecer. Solo quítala. Debería tener data, correo electrónico. Falta ahí. También podemos obtener las tiendas. Simplemente crearemos una nueva regla, y la pasaremos aquí, y el elemento de información que se conecta a la imagen. Hay data, De acuerdo, está intentando obtener todos los propietarios. Aquí obtenemos todos los propietarios. Bueno, solo tenemos uno, así que tal vez deberíamos crear otro. Estamos agregando delegación. Devolvamos el ID, devolvamos el correo electrónico. $new $email. cambiando a $original. De acuerdo, correo electrónico una vez. De acuerdo. Árbol de fuego luego correo electrónico tiendas. Eso no es un árbol de fuego. Tal vez, hagamos el nombre. $neel más ahora la piedra no es Mamá. Lo era también. Así que tenemos uno aquí que tiene una tienda otro en el concentrado y que no tiene una tienda. De acuerdo. Bueno, muy bien. Así que aquí. Es lo mismo. Solo demuéstralo. Así que bastante simple y gratuito. Muy bien. A continuación, veamos cómo crear resolutores personalizados. De acuerdo. Antes de entrar en personalizado, hasta ahora lo que hicimos fue hacer cambios en nuestro esquema y Fauna y se generaron automáticamente estos índices se generaron automáticamente los patrones de acceso a los data. Según nuestros esquemas hasta ahora. Todo lo que hicimos fue hacer todo en nuestro esquema y y eso eso eso eso es genial. Pero aún queremos tener um un mejor control sobre nuestros data un mejor control sobre nuestros patrones de acceso a los data. ¿Verdad? Entonces Sí, entonces lo que queremos hacer es crear resolutores personalizados para tener un control detallado sobre cómo consultamos data. Y a continuación vamos a ver eso. Así que volvamos y repasemos todo lo que hicimos primero. Hasta ahora, aprendimos cómo, ya sabes, cómo podemos crear un esquema y más o menos aprendiste cómo funciona el panel de Fauna. También aprendimos que hay un playground de GraphQL dentro de Fauna y aprendimos que Fauna es una base de datos y no un servidor de aplicaciones una base de datos que admite nativamente GraphQL por lo que puedes conectar fácilmente Fauna con cualquier fuente de aplicación. Así que ese es uno de los grandes beneficios que tenemos. Entonces, si tienes una aplicación Java y no hay un controlador de Java o algo así, simplemente puedes usar GraphQL e interactuar con tu con tu backend. Digamos que estás construyendo una aplicación móvil con Flutter o algo así, simplemente puedes simplemente llamar a esa API de GraphQL y muchas veces simplemente estás construyendo una aplicación con operaciones CRUD simples y Fauna puede hacer eso simplemente creando esquemas y subiéndolos. En Fauna, simplemente subes el esquema y creará esos patrones de acceso a los data y es tan fácil como eso. Muy bien, entonces a continuación vamos a ver cómo crear resolutores personalizados. De acuerdo. Entonces, aquí se explica un poco y nuevamente vamos a hacer este enlace público y puedes ver las cosas de las que hablé. Entonces, básicamente, cómo, qué es la capa de resolutores de GraphQL en GraphQL y cómo se maneja la lógica empresarial en el resolutor.

Así que está descrito aquí con más detalle. Si quieres seguir adelante, también puedes echarle un vistazo.

Muy bien, creemos nuestra primera función definida por el usuario. Ok, entonces... Muy bien, vamos a empezar con algo muy sencillo. Así que vamos a crear un resolutor que cuente cuántas tiendas tenemos en nuestra colección de tiendas.

Ok, por defecto, Por defecto, eso no se genera. Así que necesitamos crear un resolutor personalizado para crear eso. Así que vamos a hacerlo. Primero, lo que hacemos... Vamos a funciones aquí. Hacemos clic en Nueva Función. Así que le ponemos nombre, getStoreCount. Y este es el código que tenemos que escribir en el cuerpo de la función. Así que déjame repasarlo rápidamente.

Básicamente en Fauna usamos un lenguaje propietario llamado FQL y puedes aprender más sobre FQL, así que tienes que ir a Fauna, FQL, y puedes aprender más sobre el lenguaje de consulta de Fauna. Y es muy similar a JavaScript. Lugares favoritos para aquí, FQL Cheat Sheet, y puedes repasar el concepto de FQL y cómo funciona. Así que si has usado algo como Mongoose u otros controladores de base de datos NoSQL, FQL es similar a eso. Es un paradigma funcional, está escrito en un paradigma funcional. Así que si estás familiarizado con JavaScript o Scala u otro lenguaje funcional, lo encontrarás Sí, lo encontrarás. Sí, te recomiendo encarecidamente que eches un vistazo a algunas cosas de FQL si quieres hacer cosas más avanzadas. Sí, y los fans de Clojure también se sentirán cómodos con él. Genial.

Aquí estamos definiendo una nueva función en FQL. Así que con las palabras clave query y lambda, definimos una nueva función. Muy bien, puedo echarle un vistazo a query. La documentación, puedo ver cómo se usa el tres. Ok, veamos, muestra el ejemplo. Así que hay una pequeña descripción de cómo se usa query. Así que básicamente query es, query es la palabra clave para envolver una llamada a función. Y una función se define con la palabra clave lambda. También puedes escribir JavaScript directamente, perdón. También puedes escribir SQL directamente en tu JavaScript usando el controlador de fontor. No vamos a entrar en eso hoy. Pero es otra opción que está ahí. Muy bien, básicamente, con la palabra clave query y la palabra clave lambda, definimos una función. Y luego con la palabra clave count, decimos, ok, contar los documentos de la colección store. Así que tenemos una colección llamada store. Ya lo sabes. Así que vamos a contar todos los documentos en la colección store y los documentos de la colección y los conteos. También puedes encontrarlos aquí. Si quieres explorar la documentación. Así que esas son funciones proporcionadas de todos modos. Muy bien, vamos a guardar esto. Y se ha creado nuestra nueva función definida por el usuario. Ahora, volvamos aquí. Y creemos una consulta de nuevo para conectar esa función con una consulta de GraphQL. Muy bien, aquí vamos. Guardar eso, muy bien. Así que aquí estamos diciendo que vamos a devolver un entero y con la palabra clave resolver, estamos diciendo que esto va a ser un resolutor personalizado. Y para ejecutar este resolutor personalizado, la función es getStoreCount. Y esa es la función que acabamos de crear, por cierto. Así que si volvemos aquí, esta es la función que acabamos de crear. Muy bien. Así que para reiterar, primero creamos la función. Vamos a Fauna, panel de control. Y seleccionamos funciones, creamos la función. Guardamos la función y volvemos a nuestro esquema, definimos una consulta y definimos un resolutor. Así que con la palabra clave resolutor, le decimos al esquema, ok, qué función ejecutar en esta consulta también. Muy bien. Ahora vamos a volver al RASQL. Ok, vamos a jugar con este esquema de nuevo. Está bien, está bien. Ok. Está ahí. Nunca se sabe. Tiendas.

Vale. Todavía está retornando. Hagamos esto. Sí. Así que contando todas las tiendas. Y la colección de tiendas. Muy bien, así es como creamos un resolutor personalizado. Y ahora, puedes ver eso. Ahora, puedes entender el poder detrás de esto, ¿verdad? Fauna te permite escribir lógica de aplicación complicada o lógica de acceso a data complicada en tu capa de database. Puedes crear, por ejemplo, con funciones definidas por el usuario, puedes tener una relación realmente complicada. Así que digamos que quieres seleccionar, digamos que tienes una aplicación a gran escala y tienes tiendas que están categorizadas como tiendas de música, y quieres obtener todas las tiendas de música que tienen un cierto tipo de venta de discos antiguos, y todos están en oferta. Así que puedes combinar toda esa lógica y empaquetarla en una función definida por el usuario y luego simplemente tenerla como una consulta o una mutación, y puedes obtener esos datos complicados. Y puedes hacer ese cálculo en tu capa de data. Esa es la flexibilidad que te brinda Fauna. Y nuevamente, si quieres usar una capa de aplicación, simplemente puedes crear una capa de aplicación separada y ni siquiera tienes que cambiar nada en Fauna. Tu capa de aplicación puede comunicarse con Fauna, obtener todo y luego servirlo a otras cosas. Como aplicaciones de cliente en el front-end, o realmente no necesitas mover tus datos. Puedes usar el controlador de Fauna si decides migrar. Entonces sí, esas son todas las otras cosas que puedes hacer. Es extremadamente poderoso cuando se trata de la manipulación de data y la escritura de lógica de negocio basada en datos en tu capa de database.

Muy bien, de acuerdo. Así que aprendimos sobre GraphQL, aprendimos cómo puedes crear esquemas y subirlos a Fonar y cómo creará una capa de GraphQL para ti. Sabes, en aproximadamente cinco minutos, puedes empezar a trabajar con backends personalizados de GraphQL con Fonar. Aprendimos cómo puedes crear resolutores personalizados, cómo puedes crear un resolutor personalizado y tener tu propia lógica de negocio y consultar data de la forma que desees. Ahora, en la siguiente parte, vamos a aprender sobre la autenticación de usuarios. Y Fonar te permite hacer la autenticación de usuarios con Auth0, con Okta y otros servicios. Pero también puedes hacer autenticaciones muy sencillas como la autenticación de correo electrónico y contraseña directamente en Fonar. Solo porque es una base de datos, puedes guardar tus datos, sí, puedes guardar tus datos y puedes hacer autenticación de correo electrónico y contraseña y Fonar ni siquiera guardará la contraseña en texto plano. Así que estará encriptada y guardada de forma segura. Vamos a echarle un vistazo a eso. Así que, sí, esa es la siguiente sección.

Muy bien, así que vamos a adentrarnos en la autenticación de usuarios. Muy bien. De acuerdo, primero hablemos de registrar un nuevo usuario. De acuerdo, hasta ahora todo lo que hicimos fue no dejar nuestro esquema y simplemente creamos una función de resolutor personalizada. Ahora, veamos cómo podemos crear un resolutor personalizado en FQL que nos permita registrar usuarios. De acuerdo, esta función es una función que toma un correo electrónico, contraseña y nombre de usuario y luego guarda la información del usuario en Flutter. Aquí, verás que hay un campo de credencial. Al decir que esta contraseña es una credencial, Fauna sabe que es una contraseña y no debe revelarse, ¿de acuerdo? Esto es muy importante porque no quieres que tus contraseñas se revelen, ¿verdad?

De acuerdo, registrar un nuevo usuario, así que vamos a crear una nueva función y llamarla registerUser. Entonces vamos a una función, desde aquí creamos una nueva función, la llamamos registerUser, tenemos que hacer esto, copiamos esto. De acuerdo, lo colocamos aquí. De acuerdo, consulta y Lambda, estas dos palabras clave se utilizan para definir la función. Y aquí tienes una matriz de argumentos. De acuerdo, correo electrónico, contraseña y nombre, estos son los tres argumentos que se pasan en esta función Lambda. Crea, así que la palabra clave create, estamos definiendo eso, de acuerdo, queremos crear algo nuevo, vamos a crear un documento. Colección, qué colección, queremos crear un documento en la colección de propietarios. Credencial, entonces, y luego este corchete, en esta parte, simplemente estamos definiendo, de acuerdo, cómo vamos a almacenar los datos. Entonces, con la palabra clave de credencial, estamos diciendo, de acuerdo, contraseña, hay un campo de contraseña, trátalo como una credencial, y luego el resto de esto es data, así que trátalo como una variable, variable de correo electrónico y una nueva variable. De acuerdo, déjame echar un vistazo aquí. De acuerdo, muy bien, vamos a guardar eso. De acuerdo, ahora, te voy a mostrar algo llamado Fonachelle. Así que creamos esta función de usuario, función de registro de usuario. Ahora, podemos seguir adelante y crear una mutación y agregar la mutación y llamar a nuestro GraphQL pero es un poco molesto subir la función cada vez. Solo quiero probar mi función de inicio de sesión, básicamente. ¿Cómo lo hago? Así que puedo ir a la consola aquí. Vamos a la consola. Y aquí, puedo llamar a esa función, de acuerdo. De acuerdo, así que puedo hacerlo con Paul y luego el nombre de la función. Y creo que teníamos, así que correo electrónico, contraseña y nombre. Voy a hacer trampa un poco. Y pasar la matriz, así que esto es, de acuerdo, esta matriz se asigna a estas partes. Ahora podemos hacer esa conexión ahora. De acuerdo, bien. Y ahora, ejecutémoslo. Se guardó correctamente, así que verifiquemos. Estos son nuestros data. Y como puedes ver, no verás el campo de contraseña. Así que solo porque definimos que la contraseña es un tipo de credencial, aunque puedas ver la contraseña, esa es la contraseña 123456. Solo porque definimos el tipo de credencial de contraseña, no se guarda explícitamente en la base de datos. Así que si no fuera lo suficientemente inteligente como para saber eso, de acuerdo, esto es una credencial, entonces la expondría. De acuerdo, genial. De acuerdo, si tenemos eso, y por cierto, todo de lo que estoy hablando en este taller estará en nuestro sitio web del taller de GraphQL, y estaremos actualizándolo y refinándolo continuamente. Así que siéntete libre de consultarlo después del taller, todo está ahí. Incluso les dimos la posibilidad de descargar estos esquemas por separado si lo desean. Por ejemplo, esto solo descargará el esquema hasta este punto. De acuerdo. De acuerdo, así que... De acuerdo, ya saben cómo funciona, así que vamos a crear, vamos a hacer algunos cambios en nuestro esquema nuevamente y conectar esa función definida por el usuario a una mutación. De acuerdo, solo copia y pega. De acuerdo, disculpa. De acuerdo, así que lo llamaremos register owner. Le daremos un correo electrónico, que es de tipo cadena, contraseña también de tipo cadena y un nombre. De acuerdo, y devolverá un tipo de propietario. Y tenemos la palabra clave resolver, como antes. Y luego el nombre, estamos diciendo, este resolutor se va a asignar a la función de usuario registrada. Y así es como funciona. Así es como hacemos la conexión. De acuerdo, vamos a guardar eso. De acuerdo. Volvamos al GraphQL. Reemplazamos esto por eso de nuevo. Ahí está. Genial. Ahora, ahí lo tienes. Tienes el registro del propietario. Dos términos del tipo de propietario. De acuerdo, voy a cerrar algunos de estos. Espera un momento. De acuerdo. Entonces, agregamos la nueva mutación. Listamos el propietario.

¿Puedes ver esto? Sí, puedo. Según mi palabra, ¿qué es? Desde. E, de acuerdo. Experimento. Oh, genial. El nuevo retorno es esa selección. D. Vamos a devolver eso, sí. Ahí lo tienes. De acuerdo, así que ahora simplemente registramos al usuario en nuestra mutación gráfica, ¿verdad? Así que en este punto, puedes ver el patrón que está utilizando Fauna en el backend, ¿verdad? Y sí, es muy simple, muy intuitivo. Sí, prácticamente puedes comenzar y ejecutar una base de datos de producción en poco tiempo. Y todo lo que hicimos fue simplemente crear, hacer modificaciones en nuestro esquema y construir sobre eso, ¿verdad? Entonces, de acuerdo, ahora sigamos adelante y, veamos, de acuerdo, así que registrar usuario. De acuerdo, ahora, veamos, vimos cómo podemos registrar a un usuario. Ahora, ¿cómo inicia sesión nuestro usuario? Podemos crear otra, crear otra función, función de inicio de sesión de usuario y crear otra mutación. Y esta mutación permitirá al usuario iniciar sesión. De acuerdo, así que podemos seguir adelante y hacer eso. Así que vamos aquí. De acuerdo, creemos una nueva función de inicio de sesión de usuario. Solo asegurándome de que mi computadora no se sobrecaliente. Bien, de acuerdo, estamos de vuelta. De acuerdo, creemos una nueva función. Una nueva función definida por el usuario que nos permitirá iniciar sesión en un usuario. De acuerdo, así que sigamos adelante y hagámoslo. Aquí, de acuerdo, déjame repasar el cuerpo de la función aquí. En realidad, déjame volver a funciones, agregar una nueva función de nuevo. Y llamarla login user. Así que sigamos adelante y hagamos que esta función sea login user. Así que obtenemos esto y ahora, como la sintaxis se ve mejor aquí, veamos esta función. De acuerdo, nuevamente, query y lambda. Así es como definimos nuestras funciones. Y con el arraying, simplemente definimos, de acuerdo, ¿qué argumentos estamos pasando en esta función? En este caso, solo vamos a pasar correo electrónico y contraseña. De acuerdo, y luego tenemos la palabra clave let. La palabra clave let es como, es similar a seleccionar un objeto. Así que veamos esto en la documentación. Está ahí. Así que tienes una buena descripción de cómo funciona let y tienes buenos ejemplos de cómo puedes usarlo en JavaScript. utilizando la consulta de fauna, el controlador de fauna o cualquier otro lenguaje como Scala, shell, y Go, pero vamos a quedarnos con shell. Te muestra cómo funciona la función let. De acuerdo, básicamente, lo que let te permite hacer desde un objeto es darte la capacidad de definir o construir una estructura tipo cosa. Piensa en objetos en JavaScript o en estructuras en Rust o C++. Es como si te permitiera crear ese tipo de estructura. De acuerdo, volvamos aquí. De acuerdo, en let, en let tienes la palabra clave credential y dentro de la palabra clave credential, pensemos en esto como un mapeador de objetos. Y lo que sea que se ejecute en, lo que sea que sea el resultado en esta línea se almacenará en esta variable credential. De acuerdo, primero vamos a ejecutar la función de inicio de sesión, pero la función de inicio de sesión, así que primero hacemos coincidir nuestro índice. Así que primero obtenemos este correo electrónico, obtenemos los argumentos de correo electrónico, lo definimos aquí y luego decimos, de acuerdo, encuentra al propietario por correo electrónico y cualquier cosa que encuentres, como cualquier referencia que encuentres en la base de datos. Entonces, si encuentras un usuario por correo electrónico que pase un argumento que se pasa en el argumento de correo electrónico, luego ejecuta la función de inicio de sesión en eso usando la contraseña que se pasa. De acuerdo. Esto es como una composición funcional anidada. Nuevamente, si estás familiarizado con la composición de funciones en JavaScript, crear función, redox, esto sería como, es probable que estés familiarizado con la sintaxis, cierre o Scala. También estás familiarizado con la sintaxis. Ahora, si vienes de un fondo puramente orientado a objetos como Java, Python, esto puede parecer un poco intimidante al principio, pero sí, te acostumbras. Y nuevamente, tenemos toneladas de recursos disponibles para aprender FQL y estamos trabajando continuamente para hacer que FQL sea cada vez más fácil de usar. Y continuamente estamos agregando toneladas de características al lenguaje de Font-A-Cory, ¿verdad? Así que aquí, volviendo a la función. Así que aquí tenemos la función de inicio de sesión que se ejecuta en el índice coincidente y luego pasamos la contraseña. Y luego la función de inicio de sesión realmente te da una credencial. Entonces, y te permite definir, durante cuánto tiempo esta credencial será válida. Así que aquí con TTL, estamos diciendo, de acuerdo, hazlo válido durante 1.800 segundos. Así que como 10 minutos, creo, 30 minutos, 10 minutos. De todos modos, será válido durante esa cantidad de tiempo. Y todo eso se almacenará en la credencial. Y luego en el let, puedes seleccionar el secreto de esa credencial y devolverlo. Así que puedes seleccionar qué información quieres devolver. Entonces, este objeto es el tipo de retorno de la función. Y nuevamente, hay toneladas de ejemplos para esto. Y te animo a que eches un vistazo a la documentación para comprender estas cosas. Si eres completamente nuevo en el paradigma de la programación funcional. De acuerdo. Así que sigamos adelante y el cuerpo de la función, guárdalo. De acuerdo. Ahora,

Al igual que antes. Entonces vamos a probarlo con el usuario que registramos previamente, sí, usando el usuario que registramos previamente, limpiar esta consola. Ejecutamos esto y puedes ver que generó un secreto. Generó, bueno, te dio como cuánto tiempo el secreto va a ser válido, y te devolvió tu dirección de correo electrónico. Eso se usó para iniciar sesión.

Ahora, en Fauna, podemos crear roles y podemos, tenemos esta idea de ABAC. Así que control de acceso basado en atributos. Eso permite que el usuario tenga un acceso detallado sobre tus datos, como sobre sus datos. Entonces, usando esto, podemos aplicar ciertas reglas a este secreto. Entonces, este usuario solo puede acceder a ciertos datos, por ejemplo, sus propios datos. De acuerdo, así que vamos a ver eso en un momento. Entonces, para eso es el secreto. Entonces, si estás construyendo una aplicación del lado del cliente, como una aplicación Next.js o una aplicación React o Svelte, puedes almacenar el secreto en tus cookies o como parámetro de sesión. Y luego puedes usar eso para comunicarte, puedes usar eso para comunicarte, comunicarte con Fauna a través de GraphQL, y luego puedes obtener recursos. Y vamos a ver cómo podemos aplicar ciertos roles, ciertos roles de control de acceso para hacerlo lo más detallado posible. Así que solo para darte un ejemplo, digamos que creo cinco tiendas y John viene aquí y crea otras dos tiendas. No debería poder editar las tiendas de John o viceversa. Entonces, una vez que apliquemos esas reglas, apliquemos los roles, si vemos que un usuario con cierto acceso puede cambiar ciertos datos, y vamos a profundizar en eso una vez que comencemos a crear nuestra aplicación Next.js. ¿De acuerdo? Muy bien, eso es eso. ¿De acuerdo, ahora veamos cómo podemos iniciar sesión con GraphQL? Entonces, nuevamente, vamos a crear una nueva mutación. Así que la llamaremos mutación de inicio de sesión. Y el resolver, llamémoslo inicio de sesión de usuario. Definimos el tipo, qué tipo de objeto está devolviendo. Y en este caso, es un tipo de objeto personalizado, un tipo de objeto incrustado. Así que, solo voy a copiar eso. Ahí lo tienes. Y elige TTL secrets. De acuerdo. Muy bien, genial. Ahora puedo guardarlo. Volver aquí, reemplazar este esquema. Reemplazo de esquema. Deberíamos tener una función de inicio de sesión aquí. Creemos una nueva aplicación. Inicio de sesión. Inicio de sesión. Obviamente. Solo vamos a usar esta. Tal vez, esta. Oops. Carguemos. Y. Eso es todo. ¿De acuerdo? Ahí lo tienes. Ahora estoy conectado. Mi secreto se devuelve. Entonces, el inicio de sesión es solo esta llamada de mutación, y una vez que el usuario haya iniciado sesión correctamente, se genera un secreto, y usando ese secreto, puedes llamar a otros recursos en Fauna. Y vamos a bloquear todos los demás recursos en Fauna para usuarios no autenticados. Y cuando el usuario esté autenticado, puedes darles acceso a ciertos recursos. Y luego vamos a seguir construyendo sobre eso. Algunos usuarios tienen cierto acceso. Otros usuarios no tendrán cierto acceso. Entonces, sí. Muy bien. Así que eso es bueno. ¿De acuerdo? Ahí lo tienes. Entonces, sigamos adelante y revisemos lo que hemos hecho hasta ahora. Todavía estamos trabajando en nuestro backend. Y en este punto, tenemos una base sólida. Tenemos una base bastante buena para nuestro backend. Tenemos tiendas, las tiendas pertenecen a un propietario. Tenemos diferentes tipos de consultas. Hemos visto cómo podemos listar propietarios, contar tiendas, encontrar propietario por correo electrónico, cómo funciona todo este ecosistema de Fauna con UDF y cosas así.

Vimos cómo puedes crear funcionalidad de inicio de sesión sin usar ninguna biblioteca. Sí, así que ya es un verdadero usuario, un usuario que inicia sesión, vio algunas cosas de FQL. Y en la próxima sección, vamos a comenzar a crear nuestra aplicación front-end y es cuando vamos a conectar este backend de GraphQL a nuestra aplicación front-end. Así que vamos a seguir adelante y comenzar a hacer eso.

Entonces. Voy a volver aquí. Capítulo dos. Muy bien, así que vamos a crear una aplicación cliente. De acuerdo. Entonces, vamos a usar Next.js para esta demostración. Puedes usar React o cualquier otro framework. Estos pasos deberían ser bastante similares, ¿verdad? Voy a crear una nueva aplicación Next. Así que esperemos a que termine. ¡Ups! Genial. Ya está. Así que vamos a... Permíteme cambiar el nombre a... Muy bien. Vamos a instalar. No estoy seguro de por qué sigue... Muy bien, entonces vamos a... Es una aplicación Next.js nueva. Vamos a ejecutarla. Veamos si todo funciona como se espera. Vamos a iniciar esto. De acuerdo, todo funciona como se espera. Muy bien, vamos a instalar Apollo Client para GraphQL. Guardar. Si has trabajado con Apollo GraphQL Client, esto te resultará bastante familiar. No es experimental, es bastante fácil. Muy bien, entonces. Mientras hace eso, voy a ir aquí y crear un nuevo archivo. Lo voy a llamar Apollo Client.js. Y aquí vamos a definir una configuración de Apollo. Solo vamos a repasar cómo se ve el código. Estamos importando Apollo Client, importando create-http-link-runway-cache y todas esas cosas. Aquí, en la URI, es donde se pone interesante. Nuestra base de datos de FAUNA está en la Región Clásica, por eso la definimos como refql-fauna.com slash refql. Si estuviera en los Estados Unidos, se usaría la palabra clave US,.us. Para la UE, tenemos que usar EU si estás en la región europea. Muy bien, eso es todo, y aquí estamos haciendo algunas configuraciones en el encabezado de autorización, pasando el encabezado de autorización y cosas así. ¿De acuerdo? Muy bien, siguiente.

Autenticación en el front-end. De acuerdo, primero que nada, ahora, toda esta parte de autenticación entra en juego. Primero que nada, tenemos que crear un nuevo token público para que nuestra aplicación pueda comunicarse con PhonographQL, ¿verdad? Así que vamos a crear un Phonathesecret público, y nuevamente, este secreto tendrá un acceso muy limitado. Idealmente, solo puede hacer dos cosas. Autenticar a tu usuario o registrar un nuevo usuario. ¿De acuerdo? Eso es lo que vamos a hacer. Así que vamos a seguir adelante y crear este nuevo rol, ¿de acuerdo? Vamos a ir, vamos a volver al archivo. Seleccionar roles, crear nuevo rol personalizado. Y vamos a ver. De acuerdo. Rol del front-end. Muy bien. Rol del front-end. De acuerdo. Así que aquí, vamos a cerrar estas pestañas. Aquí en las funciones, vamos a dar acceso a la llamada, acceso al registro. Vamos a darle a este rol la capacidad de iniciar sesión de usuario. Puede llamar a la función de inicio de sesión en Fauna y registrar usuario. Puede llamar a la función de registro de usuario en Fauna. Y nuevamente, si observas el esquema de GraphQL, usando esa clave, solo puedes llamar a estas dos mutaciones y no deberías poder hacer nada más. Eso es lo que estamos definiendo para este rol. ¿De acuerdo? Voy a guardarlo. Ahora vamos a crear. Ahora tenemos que crear una clave para eso. Así que vamos a ir aquí y guardar esto. Vamos a crear un archivo.env.local para almacenar nuestras variables de entorno de desarrollo local. Y ahora, basándonos en el rol que acabamos de crear, necesitamos crear una clave.

Así que vamos a darle un front-end. Y eso está ahí. Y genera una clave para nosotros. Y nuevamente, usando esta clave, solo podemos hacer dos mutaciones, que es iniciar sesión. Y lo está apagando. Muy bien. Guarda eso. Volvamos aquí. De acuerdo. Mientras hacemos eso, voy a definirlo. De acuerdo. Creando roles para tus UDFs. De acuerdo. Volvamos a nuestra aplicación. Vamos a crear un rol para nuestra UDF. Usando esta clave, solo podemos llamar a esa UDF. Registro e inicio de sesión. Así que vamos a crear un nuevo rol. UDF de registro de usuario. UDF de registro de usuario. Los privilegios. Tenemos OMA. El CDF puede ser. Oh, no, no, no. Este registro solo puedes crearlo. Iniciar sesión, solo puedes. Permíteme asegurarme de que lo estoy haciendo bien. Veamos, guardemos eso. Ahora, volvamos a nuestra función, registro de usuario. Entonces, en el rol, ahora podemos asignarlo al rol que creamos. Entonces, aquí, estamos ajustando la security, para que, ya sabes, no queremos un usuario autenticado o no queremos que esta clave se use aparte de llamar a la UDF de registro de usuario y la UDF de inicio de sesión, ¿de acuerdo? Eso es lo que estamos haciendo aquí, así que aquí, esto se define como eso. De acuerdo, esto se va a asignar estrictamente a este rol, esta es la UDF de registro de usuario, ¿de acuerdo? Ahora, guardémoslo. De acuerdo, ahora, lo que podemos hacer, solo para asegurarnos de que esto realmente funcione y lo configuramos correctamente, podemos ir a la consola de Fauna nuevamente, y aquí, intentar registrar otro usuario, sin embargo, esta vez, lo ejecutaremos como, seleccionaremos el rol de front-end, ¿de acuerdo? Rol de front-end, vamos a intentar ejecutarlo como rol de front-end, por lo tanto, se adherirá a esta clave, de acuerdo, así que, lo tenemos, así que funcionó, eso significa que está listo para funcionar. Y si intento ejecutar cualquier otra cosa con el rol de front-end, no funcionará. Así que, vamos a...

De acuerdo, así que vamos a seguir adelante y hacer lo mismo para el usuario de inicio de sesión, así que, para el rol de UDF de inicio de sesión, así que, vamos a seguir adelante y hacer lo mismo, así que vamos a volver a nuestros roles de security, crear un nuevo rol, llamarlo usuario de inicio de sesión UDF, nuevamente, estamos ajustando la security, así que, como usar esa clave, y luego solo podemos llamar a estas funciones y nada más. Y este, solo tiene acceso de lectura a owner production, porque esto es inicio de sesión y para iniciar sesión solo necesitas tener acceso de lectura, no necesitas tener nada más. Sí, siempre seguimos el principio de privilegio mínimo por motivos de security, así que sí.

Muy bien, entonces, muy bien. Aquí, también necesitamos dar acceso a la función find owner by email, porque nuestro UDS, si puedes recordar, en realidad la utiliza para hacer coincidir, utiliza esta función para hacer coincidir al usuario por su dirección de correo electrónico. Los índices, voy a verificar esto nuevamente. Siempre me confundo. Sí, y los índices find owner by email, encontré mi correo electrónico, y solo quiero acceso de lectura. Lo tengo, solo quiero acceso de lectura. Y guardemos eso, así que esa es tu función, así que voy a, ups, volver a mis funciones.

Aquí, inicio de sesión de usuario, solo quiero que el UDF de inicio de sesión se asocie a ese rol. De acuerdo, guardemos. Ahora todo debería estar bien. Así que probemos eso también. También, así que volvamos a la terminal, volvamos a la terminal. Probemos esto, solo el rol de front-end. Sí, eso es todo, eso significa que ahora la clave de front-end solo puede realizar esta operación. Eso es exactamente lo que quieres. Nuevamente, esto se expondrá a, se expondrá a la web, porque es una clave pública. Así que quiero tener el menor privilegio posible para ese rol. Muy bien, de acuerdo, esto solo nos muestra cómo crear la clave. Ya lo hicimos. Colóquelo en el entorno local. Muy bien, eso es todo. De acuerdo, ahora ejecutemos nuestra aplicación. Solo tenemos que crear el proveedor Apollo y envolver nuestros componentes de React con el proveedor. Así que sigamos adelante y hagámoslo. Asegurémonos de que todo funcione primero. De acuerdo, está funcionando. Volvamos a mi código, vamos a agregar ese archivo JS. Muy bien, así que, solo importamos el proveedor Apollo y la biblioteca del cliente Apollo. Importamos el cliente. Bureau. Y, Apollo Client, y luego importamos CSS, desde CSS aquí. Eso es todo. ¿Hemos creado el cliente? Oh, sí, lo hemos hecho. Pero este es el cliente, vamos a almacenarlo. De acuerdo, algo está mal. Por supuesto, esto está en el directorio equivocado. De acuerdo, eso es algo estúpido. Muy bien. Permíteme borrar esto. Entonces, entramos en la carpeta pages, porque. Ahora, si lo encuentro. Sí, no puedo encontrarlo. No puedo encontrar la palabra que estaba buscando. Así que eso es, de acuerdo, genial. Muy bien, excelente. Ahora estamos listos. Veamos si nuestra aplicación se está ejecutando. De acuerdo, se está ejecutando como se esperaba. De acuerdo, reemplaza el contenido de Gx.js con esto. Muy bien, aquí solo tenemos una mutación de inicio de sesión ficticia. Y, ya sabes, cuando llegas a la página, simplemente inicias sesión con este correo electrónico y contraseña codificados solo para ver si todo funciona. Así que copiemos esto y de todos modos lo vamos a reemplazar. Así que traigamos nuestra página de inicio aquí. Vamos a reemplazar todo eso. Todo esto. Entonces aquí, tenemos un botón, onClick, simplemente hacemos inicio de sesión, y aquí estoy usando la seguridad de los usuarios que creamos anteriormente en la contraseña, solo para probar todo. Así que sigamos adelante, sí. Ahí vamos. Y como puedes ver, la mutación de inicio de sesión se ejecutó. Hagamos eso, de acuerdo. Y aquí puedes ver que realmente hicimos un registro de GraphQL. Así que hay una consulta GraphQL a FAUNA mucho de este inicio de sesión del propietario, mutación, esto, de acuerdo. Hasta ahora nuestra aplicación de front-end no está conectada a FAUNA. Genial. De acuerdo. Muy bien, eso es todo para la parte de configuración del cliente. Sigamos donde lo dejamos. De acuerdo, así que tenemos el inicio de sesión funcionando bien el inicio de sesión funcionando bien, porque aún no tenemos ninguna entrada ni nada por el estilo. Pero sí, la configuración del cliente está lista. Así que a continuación, procedamos con la autenticación adecuada.

Muy bien. Entonces aquí voy a usar, así que puedes usar UIKit o Tailwind o cualquier CSS que desees usar. Voy a usar UIKit. Sin embargo, no voy a usar el módulo NPM. Realmente no necesito ninguno de los componentes o JavaScript o cualquier cosa. Así que voy a hacerlo a la antigua. Muy bien, vamos a ir a app.js aquí. Pegar un poco de este estilo CSS. Y vamos a traer el encabezado de Nexthead. Y desactivemos NextLint por ahora, para el archivo de ataque por ahora. Muy bien, ahí lo tienes. De acuerdo, nuestra aplicación se está ejecutando. Volvamos aquí. Actualicemos esto. Oh. Todavía no tengo nada más ahí, pero está bien. Creemos nuestra página de registro de usuarios a continuación y aquí. De acuerdo, tengo los estilos definidos aquí como ejemplo, así que esto debería estar bien. Muy bien, creemos nuestra página de registro de usuarios y si estás familiarizado con React o Next.js, esto debería ser muy familiar. Entonces, primero que nada, vamos a crear una nueva carpeta de componentes. Así que vamos a crear una carpeta y crear una carpeta para componentes, directorio, vamos a crear una carpeta para componentes. Escribamos components, podemos crear un componente de registro. Vamos a seguir adelante y crear un nuevo archivo, signup.js, signup.js, ups, ahí vamos. Signup.js, simplemente vamos a traer esto aquí.

De acuerdo, vamos a revisar el código rápidamente. Muy bien, aquí tenemos un componente de registro. Este es un componente de formulario simple con entradas, registro, nombres de usuario, contraseña, correo electrónico, y un formulario simple y un estado para manejar los estados del formulario. Eso es prácticamente todo para el componente de formulario de registro. Luego vamos a crear una página de registro, así que vamos a crear, así que vamos a ir aquí y pages, y crear un nuevo archivo. Lo llamaremos signup.js. Todavía está aquí, vamos a traer el componente de registro del componente de formulario de registro. Ahora guardamos eso. Ahora si vuelvo aquí, obtengamos el registro. Lo tengo, así que funciona bien. Creo que había, tenía algún estilo global, solo para que se vea más presentable. Así que lo voy a poner aquí. Y luego todo esto se incluirá en el repositorio de ejemplo o puedes optar por no hacerlo. O en el CSS, solo para, sí, ahí vamos. Muy bien, componente de registro, está listo.

Muy bien, veamos. De acuerdo, ahora veamos la mutación de registro. Esta es la mutación de GraphQL que estábamos haciendo para registrar al usuario, registro del propietario. También registrar, registrar propietario, como hemos visto en nuestro GraphQL, ¿verdad? Entonces, registrar propietario, este es el que queremos ejecutar desde nuestro front-end. De acuerdo, desde aquí, y al enviar el formulario, tenemos que ejecutar esta función de registrar propietario, de acuerdo. Así que vamos a hacer eso. Entonces aquí podemos, es solo, de acuerdo. Muy bien, voy a revisar rápidamente el código. Muy bien, aquí tenemos la función de registrar propietario. La definimos como un GQL, y nuevamente, estamos usando el cliente gráfico. Y luego, lo que estamos haciendo es en useEffects. Estamos buscando los data. Básicamente, cuando, enviamos el formulario, hace el hacer, llama a la función de registro. Y luego intenta registrar al usuario, intenta registrar al usuario llamando a la función de registro de usuario. Y está utilizando la intuición del usuario de FQL, de la cuenta de Apollo, de acuerdo. Y el archivo completo, el archivo completo se verá algo así. Así que vamos a repasar de nuevo. Básicamente, primero, vamos a traer la documentación de borrador. Así que es como, justo aquí. Y luego, definimos el GQL. Y luego, simplemente hacemos un useEffect. Y luego. Puntuación. Y luego, hacemos un useEffect. Y aquí puedes ver, qué hay fuera del objeto. Y luego, si no está cargando. Entonces, registro. Tiene un estado, así que si hay un error, simplemente muestra algo así. Oh, tenemos que encontrar la ubicación aquí. Así que aquí mismo. No aquí.

Vamos a registrar un nuevo usuario. error. Muy bien, eso es todo. Entonces, tiene algunos, bien. Ahí está la asignación a las cinco. Muy bien, así que vamos a cerrar esto. Ahora necesitamos un usuario probablemente. Así que vamos a intentar registrar un nuevo usuario, así. Cuatro. Oh, genial. Ahora se ha creado un nuevo usuario. Ahora, si vuelvo a la colección, archivo C, CE 4, eso está aquí. Muy bien, eso es todo para nuestro formulario de registro. Muy bien, ahora creemos un formulario de inicio de sesión. Y lo vamos a usar en un patrón, más o menos. Así que vamos a tener otra página de inicio de sesión y vamos a tener un formulario de inicio de sesión. Y luego, ya sabes, llamar a la función de inicio de sesión desde el front-end. Muy bien, creemos un nuevo archivo para iniciar sesión. Carpeta, aquí vamos. Y de nuevo, tenemos algo similar a useEffect usando location y aquí solo estamos usando la función de inicio de sesión de la mutación de inicio de sesión de nuestro esquema de GraphQL. Muy bien. Y eso es todo. Y tenemos una mutación de usuario similar data loading, algunos estados para controlar el estado del formulario. Aquí tenemos una sola sesión para hacer. Así que volveremos a eso más tarde. Una vez que obtengamos los secretos, queremos guardarlos en nuestras cookies de sesión. Así que vamos a ver eso en un momento. Entonces, do login, simplemente ejecuta esa función. Esa es la mutación usando el cliente gráfico de Apollo. Muy bien. Muy bien, eso es todo. También necesitamos un archivo Login.js en nuestras páginas. Así que en las páginas, vamos a Login.js, y allí simplemente traemos el componente Login.js. Así que está hecho. Ahora podemos ir a / Puedes hacer / así, y luego simplemente hacemos aparecer la página de inicio de sesión. Justo aquí. Página emergente de Login.js. Muy bien, y lo que podemos hacer aquí es... Oh. Voy a intentar iniciar sesión. Mensaje y revisar la pestaña de red. Verás que estoy aquí, es inicio de sesión. Vamos a, okay, vamos a visitar el data real. Muy bien, estamos obteniendo el secreto, estamos obteniendo TTL, todas esas cosas buenas. Así que creo que también podemos volver al correo electrónico. Vamos a intentarlo. Así que vamos a volver a sogregs. Correo electrónico. Algo, de todos modos. Ahí lo tienes. Así es como lo obtienes, sí. Entonces, este secreto es lo que tenemos que guardar en nuestras cookies o como quieras manejar la sesión. En la siguiente sección, vamos a ver cómo puedes guardar esto en tu cookie, como una sesión de cookie y usarlo para interactuar con otros recursos de Fauna. Así que vamos a seguir adelante y ver eso. Muy bien, eso es prácticamente todo para esta sección, como autenticación, creamos los formularios y ahora podemos llamar a las mutaciones de GraphQL y ahora podemos iniciar sesión en nuestro usuario y registrar nuevos usuarios utilizando la clave pública que creamos. Ahora, la clave pública no tiene ningún otro acceso, así que no podemos obtener las tiendas o ejecutar esas otras consultas o mutaciones utilizando la clave pública. Muy bien, ahora voy a ir a la gestión de sesiones. Veamos cómo funciona la gestión de sesiones. Vamos a usar just cookie, así que vamos a instalar las dependencias para eso. Así que vamos a usar just cookie para gestionar nuestra sesión. Muy bien, componentes. Muy bien, vamos a hacer algunos cambios en nuestro archivo login.js. Así que aquí, en esa parte de to-do, vamos a establecer la cookie y llamarla FANA session. JSON es para verificar todos los datos de esa cookie y hacer que expire en función del TTL, el parámetro de tiempo de vida que establecimos en FANA. Así que vamos a hacer eso. Después de hacer los cambios, así es como se verá tu archivo. Básicamente, todo lo que hicimos fue actualizar el useEffect y sí, eso es prácticamente todo. Así que voy a copiar todo esto.

Nuevamente, este es solo código del front-end, así que lo copiaré, lo revisaré rápidamente. Copiaré todo esto. Aquí, en la sección de tareas pendientes, ahora estamos estableciendo la cookie de sesión de Fauna. Estableciendo el tiempo. Y una vez que todo esté configurado, simplemente redirigimos al usuario de vuelta al directorio raíz, ¿de acuerdo? Eso es todo. Muy bien, creemos un nuevo componente. Ahora mismo, si vas a nuestro directorio raíz, hay un botón de inicio de sesión allí. No está funcionando. Así que no queremos eso. Queremos tener un componente de panel de control. Así que no queremos tener eso allí. Creemos un nuevo componente llamado panel de control. Aquí, componente, panel de control, vamos a copiar eso. Aquí, simplemente tenemos un simple useEffect React router next y simplemente traemos la cookie. Y aquí estamos recuperando la cookie, la cookie de sesión de nuestros cookies. Y si no se encuentra ninguna cookie, eso significa que el usuario no ha iniciado sesión. Simplemente los redirigimos de vuelta a la página de inicio de sesión. Y simplemente devolvemos el paso y usamos ese panel de control. Muy bien, guardemos eso. Volvamos aquí. Actualicemos esto. Oh, no lo conectamos, no lo conectamos a nuestra carpeta raíz. Así que vayamos a index.js. Vayamos aquí, y queremos eliminar todo eso. Solo vamos a tener esto como genial. Así que todo lo que estamos haciendo es simplemente eliminar ese componente de panel de control en nuestro archivo index.js. Cierremos todo lo demás, volvamos a index.js. Solo porque no he iniciado sesión, me devolvieron. Movamos la carpeta de inicio de sesión, que es exactamente lo que queremos. Así que eso está bien. Entonces, nuevamente, algunos cambios más en el front-end. Después de que el usuario se registra, y esto es solo lo mismo, así que después, oh, esto es solo registrarse manualmente. Cuando el usuario se registra, simplemente agréguelos manualmente, inicie sesión justo después de que el usuario se registre. No voy a hacer eso, simplemente voy a omitir esa parte. Sí, podemos simplemente registrar al usuario y luego iniciar sesión manualmente. Así que sigamos adelante e intentemos hacer eso primero. De acuerdo, así que volvamos a desplazarnos hacia arriba. Aquí es donde lo dejamos. De acuerdo, volvamos aquí. De acuerdo, ahí lo tienes. Ahora estamos de vuelta en el panel de control y ahora, si vamos a la aplicación, la cookie, verás que hay una sesión de Fauna justo ahí. Y verás que el secreto se está guardando aquí. De acuerdo, si el secreto no está presente o la cookie ha expirado, entonces seremos redirigidos de vuelta. El usuario será redirigido a la página de inicio de sesión. De acuerdo. Eso es lo que hicimos allí. Ahora aquí también hay más código del front-end que escribí anteriormente. Así que cuando el usuario se registra, puedes iniciar sesión automáticamente. Creo que para este taller, definitivamente siéntete libre de intentarlo una vez que tengas el enlace. Una vez que lo repases por ti mismo, definitivamente intenta hacer eso, pero creo que podemos omitir esa parte, esa parte del front-end por ahora. Así que omitamos eso y sigamos adelante y creemos... Ya hicimos esto, sigamos adelante y... De acuerdo, ya hicimos esto. Sí, creo que eso es todo para la gestión de sesiones. Así que creamos un inicio de sesión, guardamos las credenciales del usuario autenticado en el almacenamiento de sesión y las cookies, cookies de sesión y también las hemos recuperado también las hemos recuperado en nuestro componente de panel de control. Entonces... Sí, también las hemos recuperado en nuestro componente de panel de control porque si no está ahí entonces no podemos permanecer en la página del panel de control. Es solo un clic.

De acuerdo, vamos a tener que crear un nuevo rol y lo llamaremos rol de autenticación. Así que cuando un usuario está autenticado, se le asigna el rol de autenticación. Así que vamos a crear este nuevo rol. Voy a ir aquí, crear nuevo rol. Voy a llamar a este rol rol de autenticación. Y aquí puedo cerrar eso. De acuerdo, aquí en nuestro rol de autenticación, vamos a dar permiso de lectura a las colecciones de tiendas y propietarios para el rol de autenticación. Así que vamos a hacer eso. Agregamos tienda y propietario, les damos a ambos permiso de lectura. Y también queremos que el usuario autenticado pueda encontrar a un usuario por su propio correo electrónico. Por ejemplo, si estás tratando de encontrarte a ti mismo por tu dirección de correo electrónico y obtener toda la información, deberías poder hacerlo. Así que damos acceso de lectura a eso. Y también deberías poder encontrar las tiendas que te pertenecen. Así que, esta es la restricción de relación. También damos acceso de lectura a eso. Y luego, cambiamos a la pestaña de membresía. Aquí es donde las cosas se ponen interesantes. Pestaña de membresía y agregamos propietario. Esto le dice a Fauna que cuando un usuario es propietario, cuando un usuario es propietario, y cuando estás aplicando esa función de inicio de sesión, dale a todos los usuarios con sesión iniciada este rol de autenticación, y a todos los usuarios con sesión iniciada, bueno, dale a todos los usuarios con sesión iniciada el privilegio de llamar, estas cosas para leer tienda, leer colección de propietarios y usar estos índices, ¿verdad? Así es lo que está sucediendo aquí, así que vamos a guardar eso, guardar esto, y se ha generado nuestro nuevo rol de autenticación, y ahora, esta clave que creamos cuando iniciamos sesión en un usuario, el secreto tiene todos los privilegios de este rol de autenticación, solo porque, recuerda, el rol de autenticación es un miembro de propietario, así que cada vez que ejecutamos ese propietario, inicio de sesión de propietario y obtenemos eso, recuperamos esa clave, esa clave obtiene todos los privilegios de estos privilegios definidos. Por ejemplo, justo aquí, mira como eso, leer roles y todas esas cosas. Muy bien, espero que eso esté claro. De acuerdo. Si no, como indiqué aquí en el taller cómo se relacionan. De acuerdo, sigamos adelante y hagamos algunos cambios en nuestro componente del panel de control nuevamente. Así que en nuestro componente del panel de control. Ahora, cuando un usuario ha iniciado sesión, queremos encontrar a ese propietario o usuario por su correo electrónico. Luego queremos obtener la información del usuario nombre, correo electrónico y también todas las tiendas asociadas a ese usuario. De acuerdo, eso es lo que vamos a hacer. Así que creamos una nueva consulta. Y luego ejecutamos esta consulta si se encuentra una sesión. Así que digamos que si no se encuentra la sesión de la cookie, expulsemos al usuario. Pero si la cookie no está vacía, eso significa que la sesión está ahí, intenta obtener el correo electrónico del usuario de la sesión de la cookie. Solo un console log con fines de depuración, no es importante, y luego obtenemos el usuario actual. Y para obtener el usuario actual, en realidad vamos a ejecutar esta consulta. Y una vez que tengamos eso, vamos a tener los data de vuelta. Una vez que tengamos los data de vuelta, simplemente podemos llenar la información del usuario nombre, tienda del usuario, todas esas cosas aquí en el panel de control. Así que, muy bien, aquí tengo algunas claves de objeto y tienda que están mapeando para recorrer todos los objetos. Así que si el propietario o el usuario tienen varias tiendas, se recorrerán todas ellas y las mostraremos en nuestro panel de control. Así que eso es básicamente lo que está sucediendo aquí. Solo voy a copiar esto de nuevo. Y solo por la limitación de tiempo, no voy a escribir todo desde cero en estos paneles de control. Así que, simplemente copiemos y peguemos. Así que, y hay un error en algún lugar. De acuerdo. De acuerdo, muy bien. Muy bien, así que ahora, una vez que hagamos eso, ejecutemos... Trabajemos. De acuerdo.

Vale, ahora funciona. Es un poco extraño. De acuerdo, no sé. Probablemente tuvimos que reiniciar. Sí, probablemente tuvimos que reiniciar el servidor. Sí, entonces, sí, probablemente revisaría el almacenamiento en caché de Apollo. Probablemente haya algo mal con el almacenamiento en caché. Pero sí, ahora estamos obteniendo al usuario y también todos los demás datos y la tienda asociada al usuario. Y la información del usuario, también la estamos obteniendo. Entonces, sí, eso es prácticamente el ciclo completo. Como completar el círculo completo. Entonces, aprendiste cómo se utiliza el ABAC o el token secreto para llamar al usuario, para llamar y obtener acceso al usuario. Entonces, sí, prácticamente volviendo al punto de partida, iniciamos sesión en el usuario y luego obtuvimos un token secreto y luego, utilizando el token secreto, solo utilizando el token secreto, podemos llamar a los otros recursos en Fauna. De acuerdo, y así es como se configuran todos nuestros roles y nuestra membresía está aquí. Entonces, en función de la membresía, Fauna sabe qué tipo de token secreto va a generar y en función de eso, sabe qué tipo de acceso tiene y a qué recursos puede consultar. Entonces, en función de estos privilegios, verás que puede consultar los datos del propietario. De acuerdo, muy bien. Y no estoy seguro de por qué ambos clientes almacenaron en caché esos datos, pero sí, eso es prácticamente todo el ciclo de un back y cómo puedes hacer diferentes cosas con él. Muy bien, también tenemos. También tenemos una refactorización rápida del front-end, para que puedas mejorar la apariencia de estos Así que haremos que el panel de control se vea un poco mejor. Te animo a que lo revises si quieres darle estilo a tu aplicación de cierta manera. Y finalmente, también tenemos una sección para resolutores personalizados. Y aquí hablamos más sobre los resolutores y cómo puedes usar todos estos resolutores para utilizar InfoNAP, y así sucesivamente. Antes de irme. Así que, solo quiero verificar una cosa. De acuerdo, eso es todo. Muy bien, eso es prácticamente todo para la masterclass. Si no hay preguntas, entonces está bien. Eso está perfectamente bien. Te animo a que pruebes Fauna. Te animo a que revises esta masterclass que hemos preparado. Todo el código de esta sesión estará disponible en nuestro repositorio de GitHub. También tenemos Fauna Labs. Lo abrimos rápidamente aquí. GitHub, Fauna, Fauna. Así que puedes encontrar muchos más ejemplos. Tenemos toneladas de repositorios de ejemplos para que puedas comenzar. Así que siéntete libre, por ejemplo, este es el bot, siéntete libre de probarlo. Siéntete libre de probar esa arquitectura Cliente-Sin-Servidor. Y sí. Síguenos en Twitter. Si tienes alguna pregunta, puedes preguntarnos en el chat o puedes preguntarnos en Discord y también puedes preguntarnos en nuestro canal de Discord de Fauna. Así que sí, eso es todo. ¿Verdad? Con eso, creo que vamos a terminar la sesión. Y si hay alguna pregunta, por favor, házmelo saber. Oh, estoy mirando la pantalla equivocada. Muy bien. Gracias por unirse a nosotros, a todos. Excelente trabajo, Shadeed. Gracias por guiarnos en esto. A todos los que se unieron, muchas gracias. Si estás viendo esta grabación después, aún podrás encontrarnos en Discord. Todos los enlaces se publicaron al comienzo de esta grabación. Así que, una vez más, muchas gracias, Shadeed, por dirigir esto y gracias a todos los que se unieron.