Crear una aplicación GraphQL con React

Y vamos a comenzar a construir una aplicación de React con GraphQL y TypeScript. Entonces, en realidad lo que voy a pedir a todos los que ya se han unido, esta es mi idea aquí es hacer un masterclass y podrás seguirlo.

Y lo que te voy a pedir es que vayas a ver si puedo hacer que esto funcione. Podemos ir a beta. Voy a obtener la app.beta.io y crear una cuenta. La forma más fácil es simplemente iniciar sesión con GitHub si quieres seguirlo. Así que déjame hacer esto un poco más pequeño, y así puedes cerrar sesión e iniciar sesión con GitHub, y eso debería abrir esta vista y deberías tener un espacio de trabajo predeterminado creado para ti. Así que solo tienes que hacer clic en un espacio de trabajo y hacer clic en nueva aplicación o hacer clic en nueva aplicación aquí y crear una nueva aplicación, y tenemos un nivel gratuito, así que no necesitas ingresar ningún detalle de tarjeta ni nada. Así que si quieres seguir este masterclass, ve a app.beata.nls.io, crea una cuenta, se creará automáticamente un espacio de trabajo para ti, y puedes continuar y crear una nueva aplicación aquí. Puedes elegir una ubicación que esté cerca de ti, pero solo puedes elegir Frankfurt en Alemania por ahora. Es posible que agreguemos soporte multi-regional más adelante esta semana, así que vamos a agregar algunos centros de datos más, pero por ahora, la ilusión de elección, puedes elegir Frankfurt, Alemania. Así que solo voy a pedir a todos los que si tienes alguna pregunta... Porque no veo ningún comentario aquí. Así que si creaste una cuenta y tuviste éxito al hacerlo, simplemente haz un pulgar hacia arriba en el chat de Zoom. Así puedo ver algunos comentarios si está funcionando. Tal vez el equipo de infraestructura de NHOS esté sudando en este momento. No lo sé. ¿Cómo hago un pulgar hacia arriba? ¿Por qué no puedo hacerlo? Sí, tenemos el Discord

Así que si te acabas de unir. Sí. Totalmente bien. Así que si te acabas de unir, puedes ir a app.beta.nos.IO. Voy a enviar el enlace en el chat de Zoom. Puedes ver que algunas personas ahora pueden crear cuentas y aplicaciones. Eso es perfecto. Así que todos los que acaban de dar un pulgar arriba, pudieron crear una cuenta aquí y una nueva aplicación. Ahora tienen su propia base de datos de Postgres. Ahora tienen una API de GraphQL y autenticación y almacenamiento listos. Voy a explicarte cómo puedes usar eso en solo un segundo. ¿Correcto, no estoy seguro de cómo lo hago? De acuerdo, vi algunos pulgares arriba, estamos listos para continuar. ¿Deberíamos estar listos para continuar? Entonces, lo que puedes hacer ahora es, veamos, tengo algunas notas.

Tengo algunas notas preparadas. Movamos algunas ventanas de Zoom aquí. Eso es bueno. Muy bien. Entonces, la mayoría de ustedes verán algo como esto ahora. Así que tienen su aplicación funcionando y pueden ver su nombre. Pueden ver algunos ejemplos para comenzar.

Aquí hay algunas plantillas de frontend. No vamos a hablar demasiado de eso en este momento. Pero también pueden ver que tienen algunas opciones aquí. Por ejemplo, la región desde donde lanzan su aplicación, etc.

También tenemos esta pestaña en la barra de menú superior. Así que tenemos data y tenemos Hazura. Si están familiarizados con Hazura o si no están familiarizados con Hazura, Hazura es un motor GraphQL que se encuentra sobre Postgres para generar automáticamente una API de GraphQL para ustedes. Vamos a ingresar a Hazura en un momento. Pero solo quiero mencionarlo en este momento. También tenemos usuarios, donde pueden administrar sus usuarios. Pueden agregar nuevos usuarios. Pueden administrar cada usuario. Y voy a eliminar este, porque es uno que quedó de la masterclass de ayer.

Y variables. Aquí es donde gestionas las variables de entorno. Estas variables de entorno se almacenan tanto en Hasura como en funciones serverless, que es algo que también hacemos nosotros. Pero antes de adentrarnos más en nuestro propio producto, o el producto de EndHost, solo quiero hacer una introducción muy rápida de EndHost y lo que hacemos aquí.

Tenemos este lema, construir aplicaciones que los usuarios adoren. Eso es todo lo que somos. Queremos capacitar a desarrolladores como tú que tal vez no tengan tiempo para aprender cómo operar el backend completo, o que ya sepan cómo operar el backend. Pero solo quieren seguir adelante y lidiar con ello. Solo queremos capacitar a los desarrolladores para construir aplicaciones que a tus usuarios les encantarán. En este masterclass, vamos a hablar sobre cómo hacer eso con React, GraphQL y TypeScript.

Y específicamente, ¿qué es NHost? NHost es un backend sin servidor para aplicaciones web y móviles. Así es como puedes pensar en lo que es NHost. Tienes tu frontend, y la mayoría de ustedes probablemente estén familiarizados con Netlify y Vercel. Netlify y Vercel hacen el frontend. Ahí es donde alojas tu aplicación web. Pero necesitas algún lugar para almacenar todos los datos. Entonces necesitas una base de datos, una API, usuarios, almacenamiento para que tus usuarios suban imágenes graciosas de gatos o archivos, documentos, lo que sea. Ahí es donde entra NHost. Hacemos por el backend lo que Netlify y Vercel hacen por el frontend. Más específicamente, ¿qué proporcionamos? Proporcionamos una base de datos con GraphQL.

Esta es la base de datos Postgres que mencioné y esto es Hasura, que genera automáticamente una API de GraphQL para ti basada en tu base de datos. Tenemos sincronización en tiempo real. Por lo tanto, puedes usar suscripciones para sincronizar datos en tiempo real entre la base de datos y tu aplicación React, y te mostraré cómo hacerlo más adelante en este masterclass.

Tenemos permisos integrados en Hasura, para que puedas gestionar los permisos. También te mostraré eso. Tenemos almacenamiento de archivos, para que puedas subir y descargar... permitir a los usuarios subir imágenes, documentos y archivos, etc., videos. Tenemos transformación de imágenes, para que puedas redimensionar automáticamente las imágenes al vuelo. Tenemos autenticación, para que puedas almacenar a todos tus usuarios en NHost. Tenemos funciones en la nube, o funciones sin servidor para aquellos que están acostumbrados, por ejemplo, a Next.js con su carpeta de API o a Netlify, que también tiene una función sin servidor. Ofrecemos lo mismo de forma nativa y está integrado estrechamente con todas las demás partes del stack de NHost.

Tenemos algunos productos emocionantes que lanzaremos muy pronto. Tenemos una integración con Stripe para facilitar la conexión de tus datos en tu base de datos con Stripe para que puedas leer información de Stripe y correos electrónicos transaccionales que es algo que casi todas las aplicaciones necesitan. En resumen, esto es el backend. Obtienes la base de datos. Obtienes la API de GraphQL. Todo es de primera clase con todo lo que puedes esperar de un backend moderno con sincronización en tiempo real, permisos, archivos, autenticación, funciones, todo lo que necesitas. Esta es solo otra imagen que explica lo que hacemos. Por lo tanto, el frontend, la mayoría de ustedes probablemente ya saben que el frontend es donde usas React, construyes tu bonita aplicación, el backend es donde almacenamos los datos, la base de datos, el almacenamiento, la autenticación de usuarios, etc. Esto es lo que hace entonces.

Y nos encargamos de eso por ti, y también nos encargamos de toda la configuración en la nube, seguridad, escalabilidad, rendimiento, actualizaciones, etc. Nuestro objetivo es que tú, como cliente, te enfoques en tu aplicación y en tus usuarios. No debes preocuparte por la infraestructura en absoluto, ninguna infraestructura. Nosotros nos encargamos de eso.

Entonces, para el masterclass de hoy, lo que construiremos. Construiremos un MicroSaaS. Lo llamo así. Es un CRM, un sistema de gestión de relaciones con los clientes. Y aquí hay algunos de los temas que vamos a cubrir. Vamos a cubrir cómo usar la database, cómo podemos usar la API de GraphQL, y vamos a incluir cómo usar la autenticación con todo esto. Y tendremos todo en una aplicación React. Utilizaremos la aplicación estándar Create-React, y podremos obtener data con GraphQL desde allí y tener la autenticación lista para nosotros. ¿Está bien? ¿Está bien? ¿Todos en el chat, está bien? Mientras tanto, haré algunas modificaciones en la configuración de mi pantalla. Porque quiero tener el modo de pantalla múltiple. ¿Puedo hacer eso? MacBook Pro, do, do, do, principal, sí. Y esto no debe ser un espejo. Porque tengo un poco de código aquí que quiero poder copiar. Bien, ¿cómo vuelvo a? Suena genial, suena genial. Genial. Y también veo a Nuno, quien es el CTO y cofundador de Nhost, todas tus aplicaciones se crearon correctamente.

Entonces, creo que eso es muy bueno. Muy bien, veamos. ¿Por qué es, cómo lo hago? ¿Qué está pasando aquí? Disculpen el... Esto es casi un requisito cuando haces una presentación, y especialmente si eres técnico necesitas tener algún tipo de problemas técnicos. Así que quiero tener esto aquí para poder deslizarlo rápidamente. Sí, genial.

Muy bien, volvamos al masterclass. Ayer realicé el mismo masterclass, pero lo hice solo. Así que nadie estaba siguiendo. Así que trataré de hacer lo mejor posible aquí con ustedes siguiendo. Primero les pediré que... Veamos. ¿Qué hacemos? Vamos a... Entonces vamos a github.com/nhost/nhost, y compartiré el enlace en el chat. Y mientras estás aquí, este es nuestro repositorio principal. Así que si sientes que quieres apoyarnos, por favor presiona el botón de estrella. Eso nos ayudará mucho. Después de marcar nuestro repositorio, si quieres clonar este repositorio, yo simplemente clonaré mi repositorio en mi propia carpeta de descargas porque voy a copiar algunas cosas aquí. Así que voy a clonar el repositorio nhost/nhost. Ingresaré a él.

Y voy a ir a las plantillas. Así que estoy en las plantillas del repositorio de nhost, y voy a ir a la carpeta web. Y aquí hay dos plantillas que tenemos disponibles, que vamos a usar. Así que vamos a usar la plantilla de React Apollo. Así que voy a copiar esta plantilla de React Apollo en otra carpeta solo para tenerla separada. Y tengo mi otra carpeta aquí. Así que la tengo en la carpeta GraphQL Galaxy 2021. Así que simplemente lo haré así. Así que abriré dos buscadores y simplemente haré un clásico comando C, comando V. Y esta fue la primera que hice ayer. Así que haremos una completamente nueva, y tengo React Apollo aquí. Y lo voy a cerrar y cerrar. Y ahora tengo la plantilla de React Apollo copiada en una carpeta separada, y todo el código debería estar disponible allí. Así que ya no vamos a usar el final del repositorio. Así que simplemente cerraré esa ventana y dividiré la pantalla para poder abrir una nueva aquí.

Lo primero que podemos hacer es simplemente hacer yarn install, yarn install, npm install. Tenemos un... Oh, en realidad es un package lock. Así que voy a hacer... Sí, así que npm install, e instalar todas las dependencias.

Y después de instalar todas las dependencias, eso fue rápido, voy a hacer npm... ¿Qué es? Ejecutar start. Y debería poder ver la vista clásica de React aquí, como editar el archivo app.tsx para guardar y guardar para recargar.

Así que voy a hacer una pausa aquí y voy a esperar algunos pulgares arriba en el chat para asegurarme de que todos estén siguiendo hasta ahora. Si ves el mismo ícono giratorio que yo, por favor da un pulgar arriba en el chat, así sé que estás en el camino correcto y puedes ver lo mismo que yo.

Lo que hice fue ir al repositorio de ns-ns, lo cloné y copié el directorio bajo plantillas, Web, React, Apollo, y ejecuté un npm install y npm run start. Así que si eso funciona y puedes ver el ícono giratorio, por favor danos un pulgar arriba en el chat para que podamos ver que todo está funcionando.

Así que Marken lo logró. Mar-ken, no sé si lo pronuncié correctamente. Tenemos una persona que ve el ícono giratorio. Si solo estás siguiendo, tal vez sería bueno solo ver que escribas que estás siguiendo para asegurarme de que no estamos esperando a alguien a quien no deberíamos estar esperando. Seguir en el sentido de que solo estás viéndome hacerlo. Muy bien. Thomas y Osamah lo lograron. Ayer, tal vez fui un poco rápido. Intentaré ser un poco más lento. Solo siguiendo, eso es perfecto. Bueno saberlo. Teniendo problemas para clonar el repositorio. Poniéndome al día un poco.

Genial. Kyle, lamento ver que tienes problemas para clonar el repositorio. Solo esperaré unos segundos más. Si lo has logrado, eso es perfecto. Si no, siéntete libre de disfrutar del stream y mirar, y puedes fingir que lo estás haciendo, pero lo haré por ti.

Bien, continuaremos. ¿Con qué continuamos? Hmm. Oh dios mío, estoy mirando mis notas aquí y me estoy adelantando un poco.

De acuerdo, lo que haremos, lo que haremos, es tener esta aplicación React ejecutándose aquí en segundo plano y volveremos a la aplicación que creaste en NHost. Así que vuelve a tu aplicación en NHost. Debería estar en app.biata.enos.io, la que acabas de crear. Iremos a data y copiaremos estos secretos de administrador haciendo clic en el ícono aquí y luego en 'Abrir Hasura'. Y se abrirá una nueva pestaña para mí. Y déjame mostrarte cómo, como probablemente, probablemente verás, ¿cómo cierro sesión? Cerrar sesión. Esto es probablemente lo que verás, abrirás Hasura, verás los secretos de administrador. Necesitas ingresar los secretos de administrador. El secreto de administrador es este. Así que acabo de copiar este y pegarlo aquí y presionar 'Enter' y podré iniciar sesión en mi instancia de Hasura. Oh, y ya tengo este de ayer. Déjame eliminar esto.

¿Puedo hacer esto tal vez? De acuerdo, ahora estás en tu propia instancia de Hasura y puedes ver que esto está bajo tu propio nombre de dominio. Así que tienes un subdominio aleatorio.annos.run slash console. Esto es Hasura. Solo para explicar. Hasura es un motor GraphQL y tiene dos partes. La primera es esta consola de interfaz de usuario web que estábamos viendo ahora mismo donde puedes gestionar tus datos y probar e interactuar con Hasura y gestionar tu base de datos, etc. Y la segunda parte es Hasura creará automáticamente una API de GraphQL para ti. Vamos a ver cómo funciona eso. Y lo haremos yendo a la pestaña datos y bajo el esquema público predeterminado, voy a hacer una pausa aquí en realidad. Entonces lo que voy a decir aquí es hay dos esquemas disponibles. Así que ves el esquema de autenticación y almacenamiento y estos son dos esquemas con tablas que hemos preparado automáticamente para ti. Así que aquí es donde, puedes adivinar qué es, ¿verdad? Aquí es donde todos tus usuarios terminarán y en realidad podemos probar esto. Entonces lo que puedes hacer es volver a tu aplicación Ennost aquí y hacer clic en usuarios y agregar un usuario. Y simplemente me agregaré a mí mismo aquí. Agregaré mi correo electrónico como contraseña aleatoria y puedo ver mis usuarios aquí y obviamente puedo gestionar los usuarios aquí. Puedo hacer lo que quiera con el usuario. Pero como puedes ver o imaginar, el usuario también está disponible en el usuario. Entonces si simplemente recargo la página aquí. Al hacer clic en ese usuario nuevamente, veo el usuario que acabo de crear. Así que este es el mismo usuario que acabo de crear aquí.

Todos tus usuarios se almacenan en tu aplicación o más bien en tu database y están disponibles para ti. Puedo hacer el hash de la contraseña o verificar si el correo electrónico está verificado, etc. Así que no deberías, como ya están hechos para ti. Así que en la sección de autenticación y almacenamiento, no toques las tablas aquí, puedes leer los datos y, pero están ahí para ti y básicamente no necesitas hacer nada aquí en este punto del tiempo.

Entonces lo que haremos aquí es, iremos al esquema público y crearemos la tabla y la llamaremos clientes. Y en lugar de crear manualmente columnas allí al principio, agregaremos columnas de uso frecuente porque somos perezosos, ¿verdad? Agregaremos ID, agregaremos create a eso y agregaremos nombre y lo haremos de tipo texto. Entonces lo que estamos haciendo aquí es definir nuestra tabla que se va a insertar en Postgres. Tenemos nombre. Y vamos a agregar una columna más y la llamaremos es privado. Eso será un booleano, booleano y voy a establecer el valor predeterminado en falso.

Entonces la tabla, el nombre es clientes. Usé columnas de uso frecuente aquí para crear el ID y el create y agregué manualmente nombre y es privado. Aquí hay un montón de cosas que, si tienes experiencia con bases de datos y demás, tal vez reconozcas algunas de las palabras aquí, no las vamos a tocar por ahora pero solo quiero decir que puedes agregar claves foráneas y todo lo demás que puedes hacer en Postgres también puedes hacerlo aquí. Pero vamos a seguir adelante y agregar la tabla aquí. Lo que te pediré que hagas, si has agregado la tabla correctamente, deberías ver la tabla aquí a la izquierda. Y ahora lo que quiero que hagas es regresar a la API y vamos a hacer nuestra primera petición GraphQL. Voy a eliminar todos los comentarios aquí y voy a hacer una consulta y voy a hacer clientes. También puedes ver que se completa automáticamente y esta es la tabla de clientes que acabas de crear. Y quiero obtener el ID y el nombre, por ejemplo, de un cliente y luego presiono play aquí. Así que quiero, y a la derecha vemos los datos que recibimos de la API GraphQL.

Obtenemos un array vacío y eso es lo esperado porque no tenemos ningún cliente. Aún no tenemos ningún cliente en nuestra base de datos. Así que obtendremos un array vacío porque aún no hay clientes.

Así que solo quiero hacer una pausa aquí. Así que un pulgar arriba en el chat si pudiste crear la tabla de clientes y pudiste hacer exitosamente tu primera petición GraphQL. Oh Thomas, eso está muy cerca. Es un pulgar abajo, ¿qué pasó? Muy bien, permíteme mostrar la tabla nuevamente. Sí, volvamos atrás. Y simplemente voy a hacer clic en modificar para que puedas ver así que tenemos ID, hemos creado eso, nombre, simplemente lo haré nuevamente para que lo veas. Entonces voy a Crear Tabla, la voy a llamar clientes. No voy a hacer esto, pero solo voy a mostrarte clientes, en plural, y estoy usando esta columna de uso frecuente y voy a hacer clic en ID y seleccionaré UUID. Puedes seleccionar cualquier ID aquí, pero me gusta trabajar con UUIDs. Así que hago clic en UUID, se agrega automáticamente la columna UUID. Hago clic en columnas de uso frecuente nuevamente porque tengo algunas buenas sugerencias para mí. Entonces creo create at, eso agregará una marca de tiempo y automáticamente la marca de tiempo cada vez que se crea un cliente, y luego tendremos nombre con texto. Y por último, tenemos es privado. Será un booleano y se establecerá en falso por defecto. Y luego simplemente presiono, presiono agregar tabla. Y si intento hacerlo ahora, ya tengo la tabla de clientes. Así que no puedo hacerlo, porque ya tengo la tabla.

Así que hemos creado la columna ID, nombre y es privado. Tal vez obtengamos más pulgares arriba en el chat después de que hayas podido crear la tabla de clientes. Oh, así que encuentras Hasura en tu aplicación aquí en el host final. Y haces clic en data y copias los secretos de administrador y haces clic en abrir Hasura. Luego agregamos la tabla de clientes y volvimos a la API y realizamos una consulta muy simple. Ahora tenemos muchos, muchos pulgares arriba aquí. ¿Obtienes los data? Y ahora tenemos muchos, muchos pulgares arriba aquí. Así que veremos si Thomas puede ponerse al día, pero creo que Sama pudo consultar correctamente la API gráfica. Es genial cuando menciono estos pulgares arriba o lo que sea. Si estás atascado, escribe dónde te encuentras atascado de inmediato. O si solo necesitas un poco más de tiempo, también escríbelo. Así puedo ver si estoy llevando el ritmo adecuado. Sí.

De acuerdo. Así que quiero decir, obtener clientes vacíos de vuelta, eso es un poco aburrido. Entonces, vamos a crear algunos, vamos a insertar algunos clientes y ver si eso funciona mejor para nosotros. Así que, voy a ir a clientes y aquí arriba, voy a hacer clic en insertar fila. Y solo necesito insertar el nombre porque puedo usar valores predeterminados para todo lo demás. Así que solo voy a insertar Spotify. Así que pude insertar data y volveré a mi API y volveré a hacer clic en reproducir. Y como puedes ver, puedo consultar con éxito mi database a través de la API de Grackle. Y espero que tú también puedas hacerlo.

Así que, sí, pulgares arriba. Bien. Eso es perfecto. Agreguemos más, intentemos insertar más data. Quiero decir, podría tener otra empresa, llamémosla Ikea. Volvemos a la API, le damos a reproducir de nuevo y podemos agregarla con éxito. Entonces, y la tabla, si te lo perdiste, tenemos ID y creado, usamos columnas frecuentemente utilizadas para esos dos. Y tenemos nombre y esPrivado, Booleano y lo establecimos en falso por defecto. Y como puedes ver, solo he creado, solo he insertado el nombre, ¿verdad? Así que podemos ver que el ID se genera automáticamente. ¿Y qué pasa con creado en? ¿Qué pasa con esta columna aquí? Voy a agregar creado en y voy a hacer la solicitud de nuevo. Y puedes ver que ya está definido porque teníamos el valor predeterminado de, bueno, Hasura insertará automáticamente la marca de tiempo cuando se crea.

Lo mismo ocurre con isPrivate, dijimos que se establecería en falso de forma predeterminada, así que obviamente se establece en falso aquí. De acuerdo, la razón por la que podemos obtener los data aquí es porque, bueno, lo que sucede es que tenemos la URL de GraphQL aquí, y estamos haciendo la solicitud a esta URL de GraphQL, y la estamos utilizando con estas dos cabeceras. Y puedes ver, tenemos una cabecera llamada XHasura Admin Secret, y este es el Admin Secret aquí. Y eso significa que si usamos el Admin Secret, estamos haciendo la solicitud como administrador, ¡así que podemos leer todos los data ¿verdad? ¿Qué sucede si eliminamos este secreto, y ahora somos simplemente cualquier persona haciendo una solicitud aquí? Intenta desactivarlo, así solo tienes habilitado el tipo de contenido, y haz la solicitud nuevamente. Y deberías poder ver que el campo clientes no se encuentra en el tipo de ruta de consulta. La razón por la que obtienes este error es porque si no estás registrado, no se te permite ver los data en la database. De forma predeterminada, los data no se exponen. Así que intentemos hacer que los usuarios que no están registrados puedan ver algunos data. Así que vamos a configurar algunos permisos aquí. Voy a ir a Datos, Clientes y Permisos. En Permisos, puedes ver que tenemos el rol de administrador y hay muchas cosas, como el administrador puede insertar data, seleccionar data, actualizar data y eliminar data, ¿verdad? Tenemos este rol especial si un usuario no está registrado llamado público. Así que podemos definir público como un rol, y podemos elegir seleccionar. Podemos especificar algunos permisos de selección aquí, y vamos a hacer uno especial con, vamos a decir, con una verificación personalizada. Entonces, para poner esto en español, si el usuario no está registrado, ¿qué tipo de permisos queremos? Bueno, si el usuario no está registrado, isPrivate debe ser igual a falso. Porque si no es privado, los usuarios no registrados pueden verlo. Hacemos este permiso aquí. Y luego necesitamos alternar, como, luego definimos qué columnas deben poder ver los usuarios no registrados, y eso simplemente permitirá todo aquí. Y voy a guardar el permiso aquí. Así que solo para repetir, estoy usando el rol público. Ese es un rol que se utiliza si el usuario no está registrado.

Estoy diciendo, como, okay, si no has iniciado sesión, se te permite ver clientes, pero solo si IsPrivate es igual a falso, y se te permite ver todas las columnas. Y volvamos aquí a la API de GraphQL, asegurémonos de que el acceso a nuestro secreto de administrador no esté activado, no marcado aquí, y hagamos la misma solicitud. Ahora podemos ver, obtendremos los data nuevamente. Porque ahora, le hemos indicado a nuestra API de GraphQL básicamente que si no has iniciado sesión, bueno, se te permite ver algunos data, pero solo los data donde IsPrivate es igual a falso.

Y, entonces, asegurémonos de que esto funcione. Voy a ir a un cliente aquí. Voy a hacer clic en este icono para editar el cliente. Voy a hacer clic en editar en Ikea, y voy a decir que esta es una empresa o cliente privado, cliente privado. Lo guardo, vuelvo a la API, y haré la misma solicitud nuevamente. Y como puedes ver, ahora solo puedo ver Spotify porque Ikea es privado. Y hemos definido el permiso diciendo que el rol público, lo que significa que el usuario no ha iniciado sesión, no tiene permitido ver clientes privados. Así que, nuevamente, dale un pulgar arriba si estás siguiendo el proceso, si tiene sentido. Y espero que lo tenga.

Muy bien, genial. Avísame si quieres que aumente el ritmo o si el ritmo actual está bien o si debo ralentizarlo. Pronto volveremos a la aplicación de React. Todos están esperando para escribir algo de código de React. Llegaremos pronto. Muy bien, simplemente volveré a activar este secreto de administrador porque es bueno poder ver todo. Puede ser útil si quieres probar los permisos.

Entonces, es como un inicio de sesión de usuario, puedes alternar esto pero generalmente mantengo el secreto de administrador activado para probar cosas aquí.

De acuerdo, vamos a escribir algo de código de React ahora. Así que voy a volver aquí y voy a abrir mi editor de código para la carpeta React Apollo con mi aplicación React. Esta es la aplicación React donde acabo de ejecutar NHost, perdón, ejecuté npm run start antes y vamos a echar un vistazo aquí. Así que sí, puedes seguir aquí.

La plantilla viene preparada con algunos paquetes básicamente. Tenemos el cliente Apollo. Vamos a usar el cliente Apollo como cliente GraphQL y tenemos algunos paquetes de NHost aquí. Ya tenemos GraphQL instalado. Veamos qué más tenemos, TypeScript y aquí abajo tenemos gemas de código GraphQL y sería interesante ver eso. ¿Alguien en el chat ha usado gemas de código GraphQL antes o es nuevo para ti? Sería interesante saberlo. Veamos, si es nuevo para ti te explicaré cómo trabajar con ello y te sorprenderás. Dirás, bueno, he estado montando en bicicleta. ¿Por qué no he conducido un Ferrari todo este tiempo? Lo he usado, genial. Nuevo para mí, vale, genial.

Continuemos viendo lo que tenemos aquí. Entonces, index.js, no hay nada aquí, sin editar. App.tsx, aquí están sucediendo algunas cosas. Primero que nada, envolvemos toda la aplicación con el proveedor NhostAuth y el proveedor NhostApollo. Y hacemos esto porque queremos asegurarnos de que podemos obtener el estado de autenticación del usuario en cualquier parte de la aplicación.

Y también con Apollo, queremos asegurarnos de que podemos hacer solicitudes de GraphQL en cualquier parte de nuestra aplicación. También puedes ver aquí que tenemos algunas, como una variable llamada nhost aquí. Estamos pasando esta variable nhost a estos dos proveedores. Así que echemos un vistazo a lo que realmente es esto. Así que voy a ir a source utils, Nhost. Y puedes ver que este es el JavaScript SDK para Nhost. Y puedes ver que tenemos una URL de backend y actualmente está apuntando a localhost 1337. Y lo que quiero que hagas es copiar tu propia URL de backend. Puedes encontrar tu URL de backend en la sección de resumen, y aquí está tu URL de backend. Así que voy a copiar esto y lo voy a pegar aquí. De esta manera, tenemos nuestro objeto nhost conectado a nuestro propio backend.

Entonces, ¿qué podemos hacer con Nhost? Solo voy a mostrarte algunas cosas aquí. Solo escribo nhost. Y solo quiero mostrarte que aquí es donde haces autenticación, aquí es donde haces almacenamiento como subir archivos. La autenticación es, ya sabes, iniciar sesión de usuarios, etc. ¿Qué más tenemos? Tenemos un GraphQL. Aquí es donde puedes hacer una solicitud de GraphQL. Vamos a usar Apollo para esto, pero también puedes hacer una solicitud de GraphQL a través de nhost. Y al menos las funciones, aquí es donde haces una llamada a funciones sin servidor directamente, puede ser útil. No lo vamos a cubrir en esta masterclass, pero solo para que lo sepas.

Muy bien, eso es básicamente todo. Y ahora, les hablé sobre Codegems antes. Entonces, todos pueden abrir el archivo codegen.yaml. Y vamos a comenzar configurando esto, y eso será lo mismo. Entonces, tenemos un esquema aquí, necesitamos... Esto apunta a nuestro esquema de GraphQL, ¿verdad? Entonces, lo que puedes hacer es simplemente copiar esto nuevamente en la URL, y agregar slash v1 slash GraphQL. Y eso es todo el esquema. Eso es para asegurarte de que estás apuntando a tu propio punto final de GraphQL.

Y debajo de XHasura AdminSecret, aquí es donde copiamos el AdminSecret. ¿Y dónde encontramos el AdminSecret? Podemos ir a Data y copiar el AdminSecret aquí. Así que lo estoy copiando aquí. Sí, y solo guardando el archivo así. Muy bien. Entonces, hay... Ahora actualizamos el CodeGen. Archivo CodeGen.yml actualizado con el esquema. Asegúrate de tener slash v1 slash GraphQL al final de tu URL. Y encontraste el AdminSecret yendo a Data y debajo de AdminSecret, simplemente lo copiaste aquí. Y lo acabo de pegar aquí. Pegado aquí.

Ahora lo que vamos a hacer es crear una nueva carpeta aquí y la llamaremos GraphQL. Y en la carpeta GraphQL, vamos a crear un nuevo archivo y lo llamaremos Customers.GraphQL. Y en Customers.GraphQL, voy a hacer la misma consulta que hicimos antes. Así que lo llamaré, consulta. Voy a llamar a la consulta, Customers. Y aquí voy a hacer clientes e ID nombre. Y puedes... Podemos comenzar con esto. Así que consulta, clientes, clientes, IDNombre. Esta es la misma consulta o una consulta muy similar, al menos, a la que hicimos aquí. Así que consulta, Clientes, clientes. Podemos copiar este código y pegarlo en el GraphQL aquí y ejecutarlo para asegurarnos de que funcione y obtengamos data de vuelta. Así podemos asegurarnos de tener la consulta correcta en nuestro archivo GraphQL, Customers.GraphQL.

Muy bien, si puedes copiar esto correctamente en tu propio GraphQL y ejecutarlo, eso es perfecto. Por favor, da un pulgar hacia arriba, para que sepa que vas por buen camino. Y mientras busco para asegurarme de que vas por buen camino, volveré a la terminal aquí y ejecutaré los code gems de GraphQL que mencioné antes. Porque si vamos a package.json, vemos que bajo scripts, tenemos el inicio normal, construir, probar, rechazar, pero también tenemos code gem. Y esto es de nuestra plantilla, ¿verdad? Así que lo ejecutaremos y veremos qué sucede. Así que voy a hacer yarn code-gem. Muy bien, eso se hizo correctamente.

Deberías poder ver que se ha completado. Y solo toma uno o dos segundos. Y lo que haremos es volver a nuestro editor de código y vamos a buscar en source utils generated GraphQL. Y antes de continuar, recuerdo que tuvimos muchos pulgares arriba antes, tal vez dos o tres más. ¿Estás atascado o necesitas más tiempo o simplemente estás viendo el stream?

De acuerdo. Sí, así que code gen, acabamos de ejecutar code gen. Eso es todo. Acabamos de ejecutar un script. Así que tengo, esto es... También puedes ejecutar run code gen, ¿verdad? Npm run code gen. Y después de que se ejecute esto, deberías poder ir a source utils, generated y graphql.ts. Y deberías poder ver un archivo de código generado automáticamente aquí. ¿Y qué es esto? Bueno, estos son tipos de TypeScript para toda tu API de GraphQL. Esto es así, básicamente ahora tenemos seguridad de tipos desde Postgres hasta GraphQL hasta tu aplicación de React en el front-end. Te mostraré cómo en un segundo.

Entonces, Osamah, ¿pudiste ejecutar con éxito el script de cogen, y si alguien más también pudo hacerlo con éxito? Muy bien, si tienes problemas, ve a cogen.yaml, asegúrate de tener el esquema correcto aquí, y es tu URL de backend, y es slash b1 slash graphql. Genial, eso es perfecto. Y, bien, ahora estamos listos. De acuerdo, eso es perfecto. Ahora, vamos a usarlo.

Ahora vamos a app. Bueno, lo que podemos hacer es en realidad, creemos una nueva, ¿qué hicimos? Entonces, podemos crear una nueva carpeta y la llamaremos componentes. Y dentro de esta carpeta de componentes, crearé un nuevo archivo llamado clientes. Y simplemente haré un componente React muy simple. Lo llamaré clientes. Y en app.tsx, simplemente importaré esto, simplemente renderizaré este componente clientes. Así que voy a eliminar todo lo demás. Y ahora tengo todos los clientes aquí. Y me aseguraré de importar el componente clientes que tengo a la derecha y guardar todo. Así que ahora, lo único que debería ver es solo clientes, solo clientes aquí, ¿verdad? Eso es todo lo que hace mi aplicación ahora.

Y lo que queremos hacer es, obviamente, poder obtener algunos data aquí, ¿verdad? Y aquí es donde entra en juego el código médico de GraphQL. Entonces vamos a hacer const y abrir llaves nuevas y vamos a hacer data, loading y error. Y luego vamos a usar la consulta useCustomers, así. Y vamos a hacer si está cargando, devuelve cargando. Si hay un error, devuelve error. Y si obtenemos algunos data de vuelta, lo mostraremos en un segundo. Antes de hacerlo, solo haré console log, en realidad, console log de estas tres variables.

¿Qué sucedió aquí en realidad? Tenemos este gancho que usamos. Y puedes ver que el gancho proviene del archivo utils generado por GraphQL. Entonces este es un archivo generado automáticamente que generamos automáticamente usando npm run code gems.

Entonces, lo que sucedió fue que CodeGen estaba revisando todos nuestros archivos de GraphQL y puedes ver que tenemos una consulta de clientes aquí. Y automáticamente creó un gancho de React con Apollo para nosotros. Por eso tenemos useCustomersQuery. Y la razón por la que se llama clientes aquí es porque lo llamamos clientes aquí. Podemos cambiarlo, tal vez podemos cambiarlo. Solo cambiaré el nombre aquí para asegurarme de que sigas el razonamiento. Lo llamaré obtenerClientes y guardaré los cambios. Luego volveré a mi terminal y volveré a ejecutar npm codegen. Esto regenerará automáticamente todos los code gems. Ahora puedes ver que esto ya no es válido. En su lugar, vamos a usar useGetCustomers. Clientes. Esto es solo para mostrarte cómo se usa el nombre de esta consulta en el gancho que los code gems están generando para nosotros. Muy bien, guardemos esto y recarguemos todo. Tenemos los últimos datos aquí y vamos a la consola. Quiero decir, obviamente solo vemos clientes. No vemos ningún dato, pero al menos podemos ver qué está sucediendo aquí. Como puedes ver, tenemos datos aquí, bueno, primero se está cargando y luego la carga es falsa y tenemos algunos datos.

Entonces, ¿qué es la data que tenemos aquí? Bueno, hicimos esta solicitud de lectura de GraphQL. Ahora tenemos data de GraphQL aquí y puedes ver que tenemos al cliente de Spotify que creamos inicialmente. Entonces, sí, pudimos crear con éxito la aplicación de React aquí y simplemente hacer una solicitud de GraphQL a nuestra propia API de GraphQL con nuestra propia base de datos y las tablas que acabamos de crear. Y pudimos obtener los datos con éxito, sí, hacerlos disponibles en nuestra aplicación de React.

De acuerdo, una pregunta para... Así que me detendré aquí y haré una pausa por un segundo. Quiero asegurarme de que todos estén en el camino correcto para ver si pueden obtener los clientes aquí en el registro de la consola. Y les haré una pregunta. Y esa es, ¿por qué solo podemos ver a Spotify? ¿O por qué solo puedo ver a Spotify? Tengo más clientes aquí. Así que tengo a Spotify e Ikea, ¿verdad? Entonces, así que intentaré, tal vez pueda hacer esto? No. Permíteme reorganizar esto. Haremos esto y haré, de acuerdo. Debería ser así, así es como lo tenemos. Y tomaré un descanso de dos minutos porque mi nariz, no sé lo que estás diciendo, no está bien. Así que tomaré un descanso de uno o dos minutos. Esto es lo que tienes. Deberías poder escribir la consulta gráfica. Ejecuta graph, después de haber escrito la consulta aquí, hice npm run CodeYan. Y estaba, eso me permitió usar este gancho de React que se generó para mí. Y pude, puedo obtener algunos datos aquí.

Así que tenemos algunas personas con pulgares arriba en, bueno, un poco antes. Tenemos a Susanne, tenemos a Abhi Marken. ¿Estabas atascado en algo específico o qué sucedió? Oh. Error de sintaxis. ¿Dónde hay algún otro mensaje de error o algo más, en qué línea o algo así? ¿Tienes lo correcto? De acuerdo. He estado siguiendo el proceso. Bien. Muy bien. Summer está en el punto. Perfecto. Marketing tiene algunos problemas. Tal vez si quieres compartir algunos mensajes de error más que tengas ahí, tal vez podamos intentar debugarlo. Pero, sí, exactamente. Te pregunté, ¿por qué obtenemos solo Spotify? Así que esta es una pregunta para ti. ¿Alguien en el chat sabe? ¿Por qué obtenemos solo Spotify? Tenemos a Ikea y Spotify aquí. ¿Por qué obtenemos solo Spotify? Al hacer la solicitud desde la aplicación React, creo que Sussan, ella está, eso está en el punto. La razón por la que obtenemos solo Spotify es porque estamos haciendo la solicitud como un, no estamos registrados, ¿verdad? Solo estamos haciendo la solicitud de inmediato, y eso va a ser exactamente. Luego estamos utilizando automáticamente el rol público, y solo se nos permite ver, bueno, sí, clientes que no son privados básicamente. ¿Está bien, Abhi? ¿Estabas siguiendo el proceso, recientemente? Entonces estamos haciendo la solicitud como un usuario final no registrado, básicamente. Incluso podemos ver la solicitud de red.

Como podemos ver aquí, no hay autenticaciones ni encabezados de autorización. Es solo una solicitud de GraphQL simple y obtendremos al cliente. Eventualmente agregaremos autenticación. Nos aseguraremos de que funcione. Pero por ahora esto está bien.

De acuerdo, genial. Tal vez pueda tener la pestaña de red aquí. De acuerdo, continuemos con nuestra aplicación React. Así que vamos a mostrar a los usuarios. Entonces vamos a hacer un return. Solo voy a hacer un div, tal vez h1 clientes y puedo hacer un div y puedo hacer data punto, bueno, en realidad puedo hacer lo que puedo hacer. Sí, hagámoslo así. Entonces puedes ver que ahora tengo autocompletado aquí. Así que obtengo los clientes de data, TypeScript sabe exactamente lo que se me permite hacer y no hacer aquí. ¿Y por qué TypeScript es tan inteligente aquí? Así que hacemos cliente, eso haría el return. Tal vez hagamos, oh Dios mío. Solo voy a hacer dpair. Obtengamos los corchetes y todo. De acuerdo, así que hacemos, creo que está bien. Sí, ¿por qué estoy? ¿Viste eso, como puedo hacer data?

Y no puedo hacer esto porque esto no existe. ESDA todavía no existe, solo quiero asegurarme de que los clientes existan. Y quiero decir, esto es porque los generadores de código GraphQL, como todos los tipos que se generaron cuando ejecutamos estos comandos de generación de código GraphQL.

Así que podemos echar un vistazo, como vamos a utils, generador y GraphQL. No necesitas hacer esto tú mismo. Solo puedes seguir y ver esto. Así puedes ver todo lo que se está creando allí. Y podemos ver si encontramos clientes. Sí, tenemos exportar tipo clientes. Puedes ver que tenemos ID, hemos creado eso. Tenemos esPrivado, luego tenemos nombre. Y sí, aquí hay muchas otras cosas relacionadas con eso. Así que automáticamente tenemos tipos. Entonces nuestro código es seguro en cuanto a tipos, básicamente seguridad de tipos aquí.

Y podemos hacer como dentro de aquí, tenemos cliente, podemos hacer cliente. Puedes ver que tenemos ID y nombre, ¿verdad? Entonces, ¿por qué solo tenemos ID y nombre y no esPrivado y no createdAt? ¿Por qué solo podemos ver ID y nombre aquí? ¿Alguien en el chat tiene una idea? ¿Por qué... Sí, exactamente. Así que solo consultamos ID y nombre. Así que agreguemos createdAt también. Así que creémoslo.

De acuerdo, voy a volver aquí y voy a intentar hacer customer.IDName. Todavía solo obtengo ID y nombre. La razón por la que solo obtengo ID y nombre es porque necesitamos, cada vez que cambiamos la consulta GraphQL aquí, necesitamos volver a ejecutar el código aún. Exactamente. Así que voy a volver a ejecutar esto. Vamos a reducirlo. Veamos qué tenemos ahora. Customer.youSee, ID nombre createdAt, ¿no es increíble? ¿No es mágico? Y si quieres ser muy perezoso, y quiero decir, podemos hacer algo como npm run code-gen dash dash, espacio W, bueno, dash W, que es watch. Ahora el código generado de GraphQL está pendiente de los cambios. Solo voy a enviar esto en el chat para que puedas escribirlo correctamente. Ahora el código generado de GraphQL está pendiente de los cambios en nuestros archivos de GraphQL. Así que veamos. Agreguemos también isPrivate. Voy a guardar este. Solo voy a volver y ver qué sucede allí. Verás, parecía que se recargó. No necesité volver a ejecutarlo. Y veamos qué tipo de objetos hay aquí ahora. Así que hago customer. Verás, ahora tengo id creado en isPrivate, nombre. Ahora tengo todo aquí.

Entonces puedo hacer esto rápidamente, tal vez no necesito esto y esperar un momento y luego, ya sabes, cliente. Y ahora solo tengo id nombre y creado. Sí, solo para resumir un poco aquí, solo quiero resumir dónde estamos. Creamos una tabla de clientes. Esa tabla se agregó a Postgres. Agregamos tres columnas a nuestra tabla de Postgres y automáticamente teníamos una API de GraphQL funcionando para nosotros. Luego agregamos GraphQL code gens dentro de nuestra aplicación React, y junto con TypeScript, podemos obtener automáticamente solo su nombre y los tipos y todo para cada tabla disponible para nosotros aquí.

Muy bien, ¿tuvieron tiempo de escribir el código aquí para enumerar o listar a todos los clientes? ¿Y pueden ver a Customer Spotify aquí? Pulgar arriba, perfecto. Voy a eliminar los console log, no los necesitamos. Perfecto, bien, muy bien. Probemos un poco aquí. Voy a insertar otra empresa y la voy a llamar Google. La voy a poner en falso para que podamos guardarla y volver a nuestra aplicación React y recargar y asegurarnos de que también veamos a Google. Eso es perfecto. Entonces tenemos, tenemos tres clientes en nuestro sistema CRM en este momento. Tenemos Spotify, tenemos Google, tenemos Ikea pero solo se nos permite ver según nuestros permisos, Spotify y Google.

De acuerdo, pero quiero decir esta no es una aplicación muy segura, ¿verdad? Necesitamos algo de autenticación. Necesitamos que el usuario pueda iniciar sesión y solo queremos asegurarnos de que, ya sabes, los usuarios que inician sesión puedan ver, digamos que pueden ver tanto empresas privadas como no privadas en nuestra base de datos. Así que voy a abrir una nueva terminal aquí para poder instalar un nuevo paquete npm. Y ese paquete npm será npm install react-router-dom.

Entonces esto es, probablemente ya lo hayas usado. Es un paquete de react-router para manejar el enrutamiento básicamente. Y si te preguntas por qué estoy mirando aquí, hacia la izquierda, a veces tengo, algunos códigos ya preparados, por eso. Así que acabo de instalar el react-router-dom. Y voy a volver a mi editor de código. Y voy a abrir este menú a la izquierda. Y dentro de la carpeta de componentes, voy a crear un nuevo archivo llamado router.tsx. Y ahora habrá algo de código que necesitamos escribir. Pero como ya lo escribí, podré copiarlo así. Y estoy tratando de, me pregunto si todos están en Discord. Tal vez debería simplemente pegar este código en Discord o si tenemos algunos mecanógrafos rápidos aquí, pueden simplemente escribir lo que ven en la pantalla. Pero básicamente lo que tenemos aquí, así que voy a explicar qué es mientras tanto. Así que router.tsx o algo de Discord. Tal vez pueda, veamos si puedo hacer que esto funcione. Pegaré el código en Discord, también. Perfecto, bien. Entonces en Discord, Git Nation, ¿estás en el servidor de Discord de Git Nation? GraphQL? Para hacer, hola a todos. Sí, solo voy a decir hola, uno, dos, tres. Entonces, si vas a, déjame ver, ¿puedo crear una invitación desde aquí directamente? No, no puedo. De acuerdo, bien, hemos estado aquí, perfecto. Y tal vez tengamos algunas personas más.

¿Sabes qué? Voy a copiar el código aquí. Pa, pa, pa, pa, pa, pa. ¿De acuerdo, qué tal eso? Y puedes pegar el código dentro de router.tsx. Y básicamente, esto hace, ve a, gracias, perfecto, sí. Tenemos dos componentes. Entonces, router es el primer componente, router es el primer componente, y esto es como un enrutador muy simple, ¿verdad? Tenemos la ruta de inicio de sesión y como barra diagonal. Y luego tenemos un enrutador de la aplicación. Y aquí tenemos una cosa adicional, que es Authgate. Y Authgate es un componente envolvente que se asegura de que el usuario haya iniciado sesión antes de permitir el acceso a través de este componente. Entonces, básicamente, vamos a escribir este Authgate aquí en un segundo, tenemos tres componentes que necesitamos escribir aquí. Ves Authgate dashboard logging. Y así que vamos a hacerlo, ¿verdad? Así que vamos a crear un nuevo componente aquí, lo llamaremos Authgate.tsx. Y eso será otro fragmento de código que debemos copiar. Y voy a hacer lo mismo aquí. Bam. Y lo voy a copiar yo mismo. Y ese es Authgate.tsx. Voy a esperar un poco para asegurarme de que todos tengan tiempo para copiarlo. Y luego explicaré qué hace este componente con un poco más de detalle. De acuerdo, aquí puedes ver Authgate.

Si echamos un vistazo aquí, hacemos, como aquí hay un gancho de react llamado useNhostAuth. Esto proviene de la biblioteca de soporte que tenemos. Entonces, nhost react auth. Esto es lo mismo, como la razón por la que podemos usar esto y obtener si el usuario está autenticado o si se está cargando, lo que significa que el usuario, como estamos tratando de averiguar si se está cargando o si no lo está, si se está entregando. Significa que estamos tratando de averiguar si el usuario está autenticado o no, como estamos enviando una solicitud para asegurarnos si el usuario está autenticado o no. Y durante ese tiempo se está cargando. Tan pronto como sepamos si el usuario está autenticado o no, como vamos a tener verdadero o falso aquí. La razón por la que podemos hacer esto, es porque en app.tsx, si recuerdas, teníamos un proveedor llamado nhostAuthProvider. Puedes decir que esto es de la misma biblioteca, este paquete, y host react auth. Y tenemos este gancho que podemos usar en react para ver si el usuario ha iniciado sesión o no. Y esto es un gancho, por lo que cada vez que, digamos que el usuario cierra sesión por alguna razón, este gancho se volverá a activar y volverá a renderizar los componentes. Entonces, ¿qué sucede aquí? Bueno, si loading es verdadero, simplemente mostraremos la carga. Si authenticated no es verdadero, simplemente, como, simplemente renderizaremos esta navegación a la página de inicio de sesión, lo que significa que si el usuario viene aquí e intenta acceder a slash y pasa por la puerta de autenticación, y el usuario no está autenticado, será redirigido de nuevo a la página de inicio de sesión. ¿Tiene sentido? Entonces tengo este enrutador, tenemos una puerta de autenticación para asegurarnos de que, quiero decir, para ver el panel de control y otros componentes, debes estar autenticado. Eso es lo que estamos diciendo aquí, básicamente.

De acuerdo, hagamos el panel de control. El panel de control es simple. Podemos hacer un dashboard.tsx, solo voy a hacer un panel de control muy simple. No necesito pegar esto, solo exporta la función dashboard, devuelve el panel de control. Volveremos a esto un poco más tarde.

De acuerdo, ¿por qué está authgate... ¿Lo escribí mal o algo así? ¿Por qué no puedo importar authgate aquí? De acuerdo, fue solo... Usamos código. De acuerdo, último componente, inicio de sesión. Y aquí es donde... Solo para simplificar, voy a crear un nuevo archivo, llamarlo inicio de sesión. Inicio de sesión. Inicio de sesión. Dos segundos. Lo mismo aquí, voy a crear un componente de inicio de sesión y guardarlo así. Ahora tenemos un panel de control, inicio de sesión, solo para tener algo en estos dos componentes. Y luego tenemos un enrutador y tenemos Authgate. Los dos más importantes son el enrutador y el Authgate y deberían estar disponibles para ti en el canal de Discord.

De acuerdo, volvamos y recarguemos esta aplicación y veamos qué está pasando. Bueno, vale, vemos clientes y eso probablemente porque necesitamos volver a la aplicación aquí. Y en lugar de usar clientes aquí, necesitamos usar el enrutador. De acuerdo, esto es como nuestro punto de entrada, ¿verdad? Entonces tenemos la aplicación, tenemos dos proveedores y luego simplemente agregamos directamente el enrutador, el enrutador que acabamos de crear. Entonces sí, importar enrutador, componentes, enrutador. Y volveré atrás y recargaré la página. Y puedes ver que ya estoy en el punto final de inicio de sesión.

Incluso si intento ir al panel de control con un botón de inicio de sesión ligeramente diferente, solo para la computadora, sin iniciar sesión, solo la barra diagonal y presiono Enter, se me redirige automáticamente a la página de inicio de sesión. Y quiero asegurarme de que eso también suceda en su caso. Entonces, si tienen el mismo comportamiento aquí, como intentar acceder al panel de control pero ser redirigido automáticamente a la página de inicio de sesión, nos encantaría escucharlos en el chat para asegurarnos de que también les funcione en su computadora y en su caso. Y luego simplemente pausaremos aquí y esperaremos un poco para ver si estamos en el punto correcto.

Entonces tuve que agregar el enrutador, el Auth gate, una aplicación, así que solo agregué el enrutador aquí para que usemos el enrutador, lo primero que sucede. Y nos encantaría ver algunos pulgares arriba o si encontraron algún problema, por favor avísenme también. Lo que debería suceder es, deberían poder ver el inicio de sesión aquí. Y si van solo a la barra diagonal, básicamente no debería funcionar. Bueno, debería redirigirlos, debería llevarlos a la página de inicio de sesión. Eso es lo que debería suceder.

Oh, alguien lo logró. Ha protegido con éxito su aplicación de React. Y Appi también lo logró. Voy a esperar a Kevin y veamos si estamos esperando a alguien más. Creo que estas son las personas que están siguiendo o siguiendo las instrucciones aquí. Y Kevin, si estás aquí... Vale, necesitas comer algo, sí. Prioridades, definitivamente. No te preocupes, continuaremos con la masterclass. Y como siempre, esta masterclass está grabada para que puedas verla más tarde y si la estás viendo más tarde, puedes seguirla como ya lo haces, tal vez, posiblemente. De acuerdo, tenemos el Auth gate, así que ahora... Quiero decir, queremos poder iniciar sesión, ¿verdad? Así que simplemente voy a crear un componente de inicio de sesión simple aquí.

Vamos a ver si se me permite... se me permite copiar... Voy a pegar código nuevamente en Discord. Oh, funcionó, perfecto. Entonces, este es login.tsx. Bien, un par de... Voy a copiarlo aquí también. Y si alguna vez has usado React antes, probablemente verás muchas cosas que ya te resultan familiares. Sería bueno saber, Osama o Abin, o Kevin, ¿has usado TypeScript antes o es la primera vez que usas TypeScript también? Si es tu primera vez, tal vez como este tipo de evento, formulario de React, blah, blah, blah. Ok, Abin lo ha usado antes, eso es bueno. Pero sí, ok, entendido, sí. Es muy similar a JavaScript tal como está ahora. Entonces, si simplemente vamos desde arriba, ¿verdad? Tenemos Navigate. Esto es como uno especial de React Property. No estoy seguro, ¿por qué está React Router aquí y Router.dong en otro lugar, no lo sé. Tal vez funcione de ambas formas. Pero sé que esto funcionó ayer, así que voy a volver a como lo tenía. Y luego tenemos dos variables aquí, Email, Password, Estates. Tenemos un controlador de envío. Y luego es un formulario de inicio de sesión muy simple, ¿verdad? Entonces tenemos inicio de sesión, formulario, enviar, controlador de envío, Email, Password y un botón, ¿verdad? Nada demasiado fuera de lo común.

Y puedes ver, así es como se ve. Entonces, no es que quizás queramos contratar a un diseñador en el futuro, pero por ahora, esto es lo que tenemos.

Bien, ¿qué sucede aquí? Entonces, si hago clic en manejar, enviar, y como, enviar este formulario, puedes ver que estoy usando NOSAuth para iniciar sesión, y luego simplemente redirijo al usuario a una aplicación específica. Entonces puedo hacer clic en iniciar sesión, y podemos verificar el cliente. También podrías hacerlo basado en encabezados, que es un inicio de sesión personalizado. Y cuando quieras hacerlo principalmente basado en encabezados. Solo puedes seleccionar la aplicación a la que deseas iniciar sesión. Y si puedes ver, después de hacer clic en esto, puedes ver python, donde tenemos este plan de complemento, puedes hacer clic en usuarios y agregar un usuario aquí. Y puedes simplemente agregarte a ti mismo aquí. Ya lo hice. Así que voy a, solo para probar, voy a probar con un usuario que no funciona. Y solo quiero mostrarte cómo se ve. Entonces puedes ver aquí en la pestaña de solicitud de red. Recibo un 401 contraseña incorrecta. Y puedes ver que esta solicitud se envía a mi backend aquí, ¿verdad? Entonces, este es un backend y trata de iniciar sesión en el usuario, no funciona porque usé el correo electrónico y la contraseña incorrectos. Voy a usar uno correcto ahora. Veamos cómo va eso. Estoy tratando de hacer clic en iniciar sesión. Así como así. Puedes ver que el correo electrónico, la solicitud de red fue exitosa.

Obtuve una respuesta 200. Puedes ver, obtengo algunos tokens de acceso y cosas y todo parece funcionar. Y también fui redirigido correctamente al panel de control. Tal vez algunos de ustedes vean otro mensaje de error a saber, que el correo electrónico no está verificado o haré esto. ¿Cómo les va a Abby y Osama? Y a Kevin también, si aún sigues el proceso ¿Puedes iniciar sesión correctamente y qué ves en la pestaña de red aquí? Sí, correo electrónico no verificado. Entonces, lo que puedes hacer, si recibes un correo electrónico no verificado puedes ir a Hasura y puedes ir a Auth, Usuarios y puedes hacer clic en Editar tu usuario y solo por simplicidad podemos seleccionar correo electrónico verificado como verdadero. Correcto, ahora modificamos el usuario de inmediato y dijimos que el correo electrónico está verificado. Voy a desplazarme hacia abajo. Voy a guardar esto y puedes intentar iniciar sesión nuevamente. Solo estaba yendo a Hasura, la pestaña de data aquí a Usuarios Modifiqué mi usuario, me desplacé un poco hacia abajo hasta el correo electrónico verificado justo debajo del hash de contraseña y simplemente establecí esto como verdadero. Perfecto, y funciona. Ahora simplemente verificamos el correo electrónico como administradores básicamente y ahora el usuario puede iniciar sesión. Curioso por ver cómo le va a Abby también. Entonces, ¿deberías poder ver el panel de control aquí, verdad? Sí, lo logré, lo logré, perfecto. De acuerdo, ¿sabes qué vamos a hacer ahora? Vamos a... En nuestro panel de control, vamos a hacer lo siguiente. Solo voy a crear un nuevo div aquí y simplemente voy a... El componente de cliente que usamos anteriormente. Importemos esto aquí nuevamente para listar a los clientes. Entonces, en el panel de control, voy a hacer esto un poco más claro.

Entonces voy a hacer de este un panel de control y luego tendremos clientes. Clientes es este otro componente que hicimos al principio. Oh, aquí hay un código no utilizado, podemos eliminarlo. Así que simplemente importé el componente de clientes que usamos anteriormente y lo agregué al panel de control. Y luego volveremos y... Esto es lo que obtenemos, un error. Obtenemos un error, intentaré recargar el error y preguntaré en el chat si alguien tiene alguna idea ¿por qué obtenemos un error aquí? ¿Por qué obtenemos un error? Así que bajo la solicitud de GraphQL, veamos el error. Tenemos este campo 'clientes' no encontrado. ¿Alguien sabe? ¿Por qué obtenemos un error aquí? Echemos un vistazo a la solicitud. La solicitud parece correcta, ¿verdad? Esta es la misma solicitud que hicimos anteriormente. Intentamos obtener algunos clientes. Estamos haciendo una solicitud a la API de GraphQL. Todo parece correcto, pero obtenemos un error específico. Ahora, ¿por qué obtenemos eso? ¿Por qué obtenemos un error específico? Sí, tiene algo que ver con los usuarios, ¿verdad? Ahora, hemos iniciado sesión como usuario. Sí, exactamente. Sin acceso para usuarios registrados. Ahora, hemos iniciado sesión como este usuario, y estamos haciendo la solicitud nuevamente, como la solicitud de GraphQL. Sin embargo, echemos un vistazo a los permisos que tenemos en los permisos públicos de los clientes. ¿Qué roles tienen permitido ver a los clientes? Bueno, solo los administradores y el público. Básicamente, solo los administradores y el público tienen acceso.

Por ejemplo, admin, esto es lo que usamos en Hasura para el administrador. Público es cuando el usuario no ha iniciado sesión. Pero, ¿ahora hemos iniciado sesión, verdad? Con el usuario, pudimos iniciar sesión correctamente. Vemos el panel de control, deberíamos poder ver algunos clientes aquí, pero vemos un error. La razón de esto es que no tenemos permisos para el usuario, para nuestro usuario.

Entonces, tengo permisos para el usuario, para el rol de usuario. Ahora vamos a tener admin, vamos a tener público, vamos a tener usuario. Voy a crear un permiso de selección. Y lo voy a hacer sin ninguna verificación, lo que significa que estos usuarios pueden ver todo en la tabla de clientes. Y voy a activar todo aquí, y voy a guardar el permiso. Entonces voy a seleccionar usuario, el rol de usuario, voy a seleccionar, porque quiero seleccionar los datos. Quiero seleccionar clientes. No voy a tener ninguna verificación. Y voy a decir, bueno, los usuarios, bien, los usuarios pueden ver todo aquí. Así que voy a guardar este permiso. Ahora, voy a volver y simplemente hacer una recarga simple. Solo una recarga simple, haciendo la solicitud nuevamente. Ahora puedo hacerlo, ahora puedo ver a mis clientes nuevamente.

Entonces, ¿pudiste seguir eso? ¿Pudiste configurar los permisos? ¿Y ahora puedes ver los datos nuevamente? Perfecto. Muy bien.

Entonces, detengámonos aquí por un segundo y veamos lo que pudimos hacer en menos de una hora y media. Menos de 90 minutos, pudiste crear un backend completo, tener toda la seguridad resuelta para ti. Tenías tu propia base de datos Postgres, tenías tu propia API de GraphQL, tenías tu propia gestión de usuarios y almacenamiento. Pudiste crear una tabla de clientes con múltiples permisos, tanto para usuarios registrados como para usuarios no registrados. Pudiste crear una aplicación React con TypeScript que puede consultar con éxito tu API de GraphQL y tus datos en tu base de datos como usuario registrado. Pudiste proteger este panel de control para permitir solo a los usuarios registrados verlo, ¿verdad? En menos de 90 minutos. Eso es bastante asombroso. Eso es realmente fantástico.

Voy a agregar una función más a mi panel de control y es una función muy sencilla. Quiero permitir que los usuarios cierren sesión. Simplemente voy a crear, en el panel de control, voy a crear un div y un botón, cerrar sesión. Y aquí voy a agregar un onclick. Y esto va a ser una función aquí. Y voy a hacer una pausa aquí y te voy a dejar terminar esta parte del código. Los Co-Pilots no hicieron un buen trabajo aquí sugiriendo. Entonces, ¿qué crees que va a ir dentro de aquí? Tenemos un cierre de sesión. Queremos cerrar la sesión del usuario. Si echamos un vistazo a la pantalla de inicio de sesión probablemente podamos obtener algunas ideas. Y si aún no lo has hecho, es lo mismo. Importamos nhost. Hacemos .auth.signout, ¿verdad? ¡Bam, eso es todo! Cerrar la sesión del usuario. Volvamos. Veamos qué sucede si hacemos clic en cerrar sesión. Bueno, el usuario cerró la sesión. El componente AuthGate que creamos anteriormente desencadenó un nuevo renderizado porque ahora el usuario no ha iniciado sesión. Ahora el usuario no está autenticado. Y si el usuario no está autenticado simplemente te mostraremos la pantalla de inicio de sesión nuevamente, ¿verdad?

Comencemos por eso primero. Te prometo datos en tiempo real data y voy a cumplir mi promesa. Y así es como lo hacemos. Vamos a los clientes de GraphQL.graphql. Voy a copiar esto y voy a hacer solo una copia de ello. En lugar de consulta, voy a hacer una subscripción y voy a renombrarla como get customers. Solo voy a agregar, get customers sub como SUB porque los nombres en azul aquí deben ser únicos. Por eso no puedo usar el mismo get users dos veces. Solo voy a agregar un sub aquí. Entonces tengo una subscripción, get sub, ¿verdad? Eso es todo. ¿Tenemos Codegenics en ejecución? Sí, ¿verdad? Así que solo tenía Codegenics en ejecución. Así que probablemente ya puedo usar esto. Veamos si puedo. Así que voy a mi tabla de clientes componente de clientes. Voy a cerrar un par de cosas aquí. Y bien. ¿Qué tenemos aquí? Tendremos get customer sub. Así que en lugar de use get customers query, vamos a usar use get customers, Ooh, pensé que podía, veamos aquí. Ah, necesito guardar esto, ¿lo guardé? Bien, veamos. Cliente, ahí lo tenemos.

Usa la subscripción get customers SUB. Usa la subscripción get customers SUB. Eso es todo lo que necesito hacer. Y ahora no estoy usando más consultas. Estoy utilizando subscripciones. Esto es en tiempo real, una sincronización de datos en tiempo real. Y si no me crees, te lo voy a mostrar, solo recarguemos aquí. Así que todo está actualizado y bonito. Sí. Así que Spotify, Ikea, Google, déjame hacerlo así. Déjame hacer esto. Déjame dividir mis ventanas aquí y tener los clientes aquí. Y simplemente insertemos un cliente. De acuerdo. Solo voy a insertar Apple. Voy a guardarlo. ¿Ves lo que sucedió a la izquierda aquí en los clientes? Apple apareció automáticamente. ¿Qué otra compañía? Volvo? Insertar. ¿Qué otra buena compañía? Nhost. Nhost es una buena compañía.

Como puedes ver, los datos se sincronizan en tiempo real. Cada vez que agrego algo a la base de datos, se sincroniza. ¿Qué sucede si edito algo aquí? Guardar. Sincronización en tiempo real. De acuerdo. ¿Y si elimino algunos datos? Probablemente ya lo hayas adivinado. Los datos se sincronizan en tiempo real. Los servidores se encuentran actualmente en Alemania. Por lo tanto, es posible que si tienes problemas de latencia, no sea tan rápido como el flujo, me refiero a Estocolmo. Aproximadamente 25 milisegundos desde aquí. Pero los datos se sincronizan en tiempo real. ¿Pudiste lograr que funcionara? Mira cuando yo... Sí. ¿Puedes mostrar cómo funciona la sincronización de datos en tiempo real? Publicaste eso en 1929. Ahora, tres minutos después, te mostré la sincronización de datos en tiempo real. De acuerdo. Tres minutos después, tenemos una sincronización de datos en tiempo real. Genial. De acuerdo. Es bastante impresionante.

Eso es bastante impresionante, diría yo. Es increíble. Oh Dios mío. Es bastante genial, ¿verdad? Ahora tenemos sincronización de datos en tiempo real. Y lo bueno es que los datos que se están editando, como cambiando, podemos cambiar los datos directamente en la base de datos y las cosas sucederán aquí. Conozco algunas soluciones por ahí, es como, si editas datos a través de la API de GraphQL, obtendrás datos en tiempo real, pero este no es el caso. Podemos hacerlo así, podemos hacerlo, quiero decir, podemos hacer esto, eliminar todo de los clientes públicos. Vamos a ejecutar esto en la base de datos. Eliminar de los clientes, tal vez mis habilidades de SQL no sean perfectas allí. Sí, se utiliza WebSockets para la sincronización de datos en tiempo real. Eliminar de esta manera, eliminar de, okay. Así que acabo de ejecutar un delete SQL directamente en la base de datos. Puedes ver que los datos se sincronizan en tiempo real. Así que no importa desde dónde estés cambiando tus datos, no tiene que ser a través de GraphQL, pero los datos en tiempo real de GraphQL siempre están ahí. No sé, necesito, ¿y si creo un...

Y sí, podemos echar un vistazo, quiero decir, es, sí, pero se utiliza WebSockets, se utiliza WebSockets. Entonces, tal vez, quiero decir, creo que me detendré ahí. Hemos estado en esto, durante más de una hora y media ahora. Solo estaré aquí si tienes más preguntas en el chat.

Bueno, sabes qué, hagamos esto, sí, hagámoslo así. Entonces, si tienes más preguntas relacionadas con lo que hemos estado haciendo, ¿verdad, con la aplicación, siéntete libre de preguntarlo en el chat. Si quieres que muestre algunas cosas pequeñas, pero creo que hemos cubierto los conceptos básicos. También podemos hacer actualizaciones y todo lo demás con GraphQL también, pero por ahora solo te mostré cómo leer data, pero también puedes insertar, actualizar y eliminar data.

Entonces, sí, te lo preguntaré una vez más, si tienes una cuenta de GitHub, siéntete libre de ir a github.com slash end host slash end host. Pegaré el enlace en el chat.

Ah, buena pregunta. ¿Admiten métodos de inicio de sesión de terceros? Sí, lo hacemos. Sí, lo hacemos. Sí, puedes agregar, puedes agregar, admitimos Google, GitHub, LinkedIn y Facebook por ahora. Tenemos más en camino. En realidad, tenemos más compatibles. Simplemente no hemos tenido tiempo de agregarlos a la interfaz aquí. Y en realidad, es casi, es tan rápido, mira esto. De acuerdo, solo haré esto. Solo te mostraré cómo, digamos que queremos agregar GitHub como método de inicio de sesión. ¿Cómo lo hacemos? Si quieres seguir, esto será muy rápido. Configuración de desarrollador, veamos si lo hago bien. Nueva aplicación OAuth de GitHub, GraphQL Galaxy. En realidad, creo que este no es muy necesario.

Esto es lo que sea. URL de devolución de llamada, veamos aquí. GitHub, voy a habilitar esto, voy a copiar el enlace de devolución de llamada de vuelta a GitHub. Registrar esta aplicación. Tengo un ID de cliente. Tengo un cliente secreto. Voy a generar un nuevo cliente secreto. Solo quiero mostrarte qué tan rápido. Solo quiero mostrarte qué tan rápido y fácil es agregar un proveedor como este. Voy a guardar este. Y sé que lleva algo de tiempo para que nuestra infraestructura y backend recarguen esto y esperemos que funcione. Pero veamos, usuarios del taller de GraphQL, configuración de inicio de sesión. ¡Oh, ¿no lo guardé? Tal vez estoy tratando de hacer demasiado para guardar. Tal vez tengamos un error aquí. Tal vez esto vaya a ser un informe de error. No, está bien, ahora está habilitado. No sé qué pasó antes. Y lo que podemos hacer, registremos al usuario y solo... Esto va a ser un poco más rápido. No necesitas seguirme, pero voy a poner en inicio de sesión, digamos que hacemos un div iniciar sesión con GitHub.

Y simplemente voy a hacer clic en el inicio de sesión de Nhost, no Google, sino GitHub. Veamos si esto funciona, muy bien. Boom, clientes autorizados, inicio de sesión, atrás. Estoy conectado. Muy bien. Así es como iniciamos sesión con GitHub usando Nhost.

Y echemos un vistazo a la database. Así que voy a ir a usuarios. Ahora puedes ver por qué tengo dos usuarios aquí, ¿verdad? Este es mi usuario de GitHub, GitHub. Puedes ver, este es en realidad mi avatar en GitHub. Entonces, oh, no puedo dejarte saber, tal vez pueda esperarlo. Y este es mi correo electrónico de GitHub. Puedes ver avatares. Este es mi, directamente de GitHub. Si volvemos a la database nuevamente, dentro de nuestra tabla de usuarios, usuarios, okay, tenemos dos usuarios. Puedes ver que cuando inicias sesión con GitHub, automáticamente obtenemos el nombre, el correo electrónico y la URL del avatar. Y obviamente, como, no tenemos una contraseña aquí porque iniciamos sesión con GitHub.

Muy bien. Sí, creo que me detendré aquí, me detendré aquí. Muy bien, Susan, es un placer tenerte aquí escuchando.

¿Necesitamos verificar incluso, no, no lo hacemos. Eso es algo bueno. Podemos echar un vistazo a este usuario que acabo de crear. Este era un usuario de GitHub, con el que acabo de iniciar sesión, y puedes ver que el correo electrónico verificado es verdadero porque simplemente confiamos en que el correo electrónico está probablemente verificado en GitHub o Google o cualquier otro servicio que estés usando. Así que simplemente vamos a establecer el correo electrónico verificado como verdadero automáticamente. Y aquí podemos ver cuántos usuarios tenemos. Sí, ahora tenemos un usuario aquí, perfecto. Muy bien, dejaré de compartir mi pantalla y veré la galería para poder ver a todos. Y si alguien quiere desactivar el silencio y activar su cámara web y hacer preguntas o dar cualquier comentario sobre la masterclass o cualquier cosa, intentaré desactivar el silencio y estaré muy feliz de responder cualquier pregunta aquí. Muy bien, creo que hemos agotado todo por ahora. Creo que necesitamos tomar un descanso y hacer algo más por un rato y luego podemos volver y construir más cosas. No lo haremos en esta masterclass, pero espero que todos hayan aprendido algo nuevo aquí hoy. Y espero que esto los haya emocionado para construir una nueva aplicación o construir algo nuevo con nosotros. Me encantaría ver qué están construyendo. Y esto es lo que estamos tratando de hacer. Estamos tratando de capacitar a desarrolladores como ustedes para construir sin tener que preocuparse por la infraestructura y el respaldo. Sabemos que hay muchos desarrolladores de react talentosos y otros ingenieros de front-end por ahí y solo poder enfocarse en el front-end y hacer un poco aquí y allá en el backend. Eso es lo que queremos capacitar. Muy bien, muchas gracias por esta masterclass. Voy a cerrar la llamada aquí y nos vemos en la próxima, adiós.