Crear una aplicación GraphQL con React

Rate this content
Bookmark

En este masterclass, construiremos una aplicación React desde cero utilizando una API GraphQL de Nhost.

Tabla de contenidos:
- Registrarse en Nhost y crear una aplicación Nhost
- Crear tabla de base de datos
- Configurar la aplicación React
- Instalar las dependencias de Nhost y GraphQL
- Mostrar datos en la aplicación React
- Permitir que los usuarios inicien sesión
- Agregar permisos de API GraphQL

98 min
08 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

En este masterclass, los participantes aprendieron cómo construir una aplicación React con GraphQL y TypeScript utilizando NHost como backend sin servidor. Configuraron la aplicación, exploraron las características de NHost, crearon una base de datos Postgres con una API GraphQL, implementaron la autenticación y protegieron el panel de control. También se demostró la sincronización de datos en tiempo real y los participantes aprendieron cómo habilitar métodos de inicio de sesión de terceros. En general, el masterclass cubrió una variedad de temas y proporcionó una visión general completa de la construcción de una aplicación full-stack.

Available in English

1. Construyendo una aplicación de React con GraphQL y TypeScript

Short description:

Vamos a comenzar a construir una aplicación de React con GraphQL y TypeScript. Para seguir, ve a app.beta.io, crea una cuenta y elige Frankfurt, Alemania como ubicación. No se requieren detalles de tarjeta. Si tienes alguna pregunta o encuentras algún problema, por favor avísame.

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

2. Seguir y Configurar

Short description:

Si solo quieres seguir y ver lo que hago, está bien. Pero si quieres seguir, configuración en progreso. Pulgar arriba. Tenemos uno. Un pulgar arriba. Eso es bueno. Así que si te acabas de unir, puedes ir a app.beta.nos.IO. 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, 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?

en mi opinión. De acuerdo. No veo ningún pulgar arriba en el chat. ¿Significa eso que solo quieres seguir y ver lo que hago o tienes algún problema? Está bien. Si solo quieres seguir y ver lo que hago, está bien también. Pero si quieres seguir, configuración en progreso. Pulgar arriba. Tenemos uno. Un pulgar arriba. Eso es bueno.

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.

3. Configuración de la aplicación y descripción general

Short description:

La mayoría de ustedes verán su aplicación funcionando con algún contenido de ejemplo. Hay plantillas de frontend disponibles y tienen algunas opciones para elegir. En la barra de menú superior, encontrarán pestañas para datos, Hazura y usuarios. Hazura es un motor GraphQL que genera una API de GraphQL para ustedes. Pueden administrar sus usuarios y realizar acciones como agregarlos y eliminarlos.

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.

4. Introducción a NHost y sus características

Short description:

NHost es un backend sin servidor para aplicaciones web y móviles. Proporciona una base de datos con GraphQL y capacita a los desarrolladores para construir aplicaciones que los usuarios adorarán.

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.

5. Características del backend de NHost

Short description:

Tenemos sincronización en tiempo real, permisos, almacenamiento de archivos, transformación de imágenes, autenticación y funciones en la nube. También tenemos productos emocionantes que se lanzarán pronto, incluyendo una integración con Stripe y correos electrónicos transaccionales. Nuestro backend proporciona una experiencia de primera clase con una base de datos, una API de GraphQL y todas las características esenciales que necesitas. El frontend es donde construyes tu aplicación React, mientras que el backend se encarga del almacenamiento de datos, la gestión de la base de datos y la autenticación de usuarios.

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.

6. Introducción al Masterclass y Nhost

Short description:

Nos encargamos de toda la configuración en la nube, seguridad, escalabilidad, rendimiento, actualizaciones, etc. Nuestro objetivo es que te enfoques en tu aplicación y usuarios. En el masterclass de hoy construiremos un CRM de MicroSaaS. Cubriremos el uso de la base de datos, la API de GraphQL y la autenticación en una aplicación React utilizando Create-React app. ¡Suena genial! Nuno, el CTO y cofundador de Nhost, confirma que todas las aplicaciones fueron creadas.

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.

7. Configuración del Masterclass y Repositorio

Short description:

Ayer, realicé el mismo masterclass por mi cuenta. Ahora, con ustedes siguiendo, haré lo mejor que pueda. Primero, ve a github.com/nhost/nhost y marca nuestro repositorio para apoyarnos. Luego, clona el repositorio en tu carpeta de descargas. A continuación, ingresa al repositorio clonado.

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.

8. Templates and Installation

Short description:

Voy a ir a las plantillas en el repositorio de nhost y encontrar la plantilla de React Apollo. La copiaré en una carpeta separada llamada GraphQL Galaxy 2021. Cerraré la ventana original y abriré una nueva. Luego, ejecutaré yarn install o npm install para instalar todas las dependencias.

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.

9. Running the App and Checking Progress

Short description:

Después de instalar todas las dependencias, ejecuta 'npm start' para ver la vista de React. Por favor, confirma en el chat si ves el ícono giratorio. Si solo estás siguiendo, avísanos. Algunos participantes ya lo tienen funcionando.

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.

10. Continuando con la Aplicación React y Secretos de Administrador

Short description:

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. Tendremos esta aplicación React ejecutándose en segundo plano y volveremos a la aplicación que creaste en NHost. Así que vuelve a tu aplicación en NHost. Iremos a la sección de datos y copiaremos los secretos de administrador haciendo clic en el ícono aquí y luego en 'Abrir Hasura'.

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.

11. Instancia de Hasura y Gestión de Usuarios

Short description:

Ahora estás en tu propia instancia de Hasura. Hasura tiene una consola de interfaz de usuario web para gestionar datos y una API de GraphQL. Bajo el esquema público predeterminado, hay dos esquemas disponibles: auth y storage. Estos esquemas se encargan de la gestión de usuarios. Puedes agregar usuarios en la aplicación Nhost y verlos en la consola de Hasura. Los datos de usuario se sincronizan entre los dos.

¿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í.

12. Creación de Tabla de Clientes y Realización de una Petición GraphQL

Short description:

En la sección de autenticación y almacenamiento, las tablas ya están proporcionadas para ti. En el esquema público, crea una tabla llamada clientes. Agrega columnas de uso frecuente como ID, create, nombre y es privado. También puedes agregar claves foráneas y realizar otras operaciones de Postgres. Una vez que hayas agregado la tabla, regresa a la API y realiza tu primera petición GraphQL para obtener el ID y el nombre de un cliente.

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.

13. Creación de la Tabla de Clientes y Primera Petición GraphQL

Short description:

Obtenemos un array vacío porque aún no hay clientes en nuestra base de datos. Si pudiste crear la tabla de clientes y hacer tu primera petición GraphQL, da un pulgar arriba. Thomas, ¿qué pasó? Permíteme mostrarte la tabla nuevamente. Hago clic en modificar y creo la tabla de clientes con las columnas ID, create, nombre y es privado. Pero si la tabla ya existe, no puedo crearla nuevamente.

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.

14. Creación de la tabla de clientes y consulta de datos

Short description:

Hemos creado con éxito la tabla de clientes y hemos realizado una consulta simple para recuperar datos. Muchos participantes han podido consultar correctamente la API de GraphQL. Si encuentras algún problema o necesitas más tiempo, por favor avísame.

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í.

15. Insertando Clientes y Agregando Columnas

Short description:

Vamos a insertar algunos clientes y ver si funciona. He insertado Spotify e Ikea como ejemplos. La tabla tiene las columnas ID, creado, nombre y esPrivado. Solo se necesita insertar el nombre y el ID se genera automáticamente. La columna creado en se agrega con un valor de marca de tiempo predeterminado.

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.

16. Configuración de permisos para usuarios no registrados

Short description:

Podemos controlar la visibilidad de los datos para los usuarios que no están registrados configurando permisos. Al definir el rol público y especificar permisos de selección con una verificación personalizada, podemos permitir que los usuarios no registrados vean los datos donde isPrivate es falso. Esto asegura que los datos no se expongan de forma predeterminada. Para configurar estos permisos, ve a Datos, Clientes y Permisos, y especifica la configuración necesaria.

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.

17. Configuración de permisos y visualización de datos

Short description:

Si no has iniciado sesión, se te permite ver clientes, pero solo si IsPrivate es falso. Le hemos indicado a nuestra API de GraphQL que si no has iniciado sesión, se te permite ver datos donde IsPrivate es falso. He editado un cliente para que sea privado y ahora solo puedo ver clientes no privados. ¡Dale un pulgar arriba si estás siguiendo el proceso!

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.

18. Escribiendo código de React y proveedores

Short description:

Vamos a escribir algo de código de React ahora. La plantilla viene preparada con Apollo client como cliente GraphQL y algunos paquetes de NHost. También tenemos gemas de código GraphQL. Si no lo has usado antes, te explicaré cómo funciona. Envolvemos la aplicación con el proveedor NhostAuth y el proveedor NhostApollo para acceder al estado de autenticación.

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.

19. Conectando Apollo y Nhost

Short description:

Queremos hacer solicitudes de GraphQL en cualquier parte de nuestra aplicación utilizando Apollo. Tenemos una variable llamada nhost que pasamos a los proveedores. El objeto nhost está conectado a nuestra propia URL de backend.

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.

20. Explorando las Funcionalidades de Nhost

Short description:

Entonces, ¿qué podemos hacer con Nhost? Podemos realizar autenticación, almacenamiento, solicitudes de GraphQL y funciones sin servidor.

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.

21. Configurando CodeGen y AdminSecret

Short description:

Para configurar el archivo codegen.yaml, copia la URL del esquema de GraphQL y agrega '/v1/GraphQL' al final. Luego, copia el AdminSecret de la sección Data y pégalo debajo de 'XHasura AdminSecret'. Guarda el archivo.

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í.

22. Creando Customers.GraphQL y ejecutando Code Gems

Short description:

En la carpeta GraphQL, crea un archivo llamado Customers.GraphQL y agrega la misma consulta que usamos antes. Copia el código y pégalo en tu archivo GraphQL. Si puedes ejecutarlo correctamente, da un pulgar hacia arriba. Luego, ejecuta los code gems de GraphQL ejecutando 'yarn code-gem'.

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.

23. Usando el Archivo de Código Generado Automáticamente

Short description:

Deberías poder ver el archivo de código generado automáticamente graphql.ts, que proporciona tipos de TypeScript para toda tu API de GraphQL. Esto garantiza la seguridad de tipos desde Postgres hasta GraphQL y tu aplicación de React en el front-end.

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.

24. Creando el Componente de Clientes y Recuperando Datos

Short description:

Creemos una nueva carpeta llamada componentes y agreguemos un componente React simple llamado clientes. Importa y renderiza el componente clientes en app.tsx. Queremos recuperar datos usando código GraphQL. Utiliza el gancho de consulta useCustomers para obtener los datos. Si está cargando, devuelve cargando. Si hay un error, devuelve error. Muestra los datos una vez que se hayan recuperado. El gancho proviene del archivo GraphQL generado automáticamente.

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.

25. React Hook y CodeGen

Short description:

CodeGen creó automáticamente un gancho de React llamado useCustomersQuery para nosotros. Podemos cambiar el nombre a getCustomersQuery. Después de volver a ejecutar npm codegen, usamos useGetCustomersQuery. El nombre del gancho corresponde al nombre de la consulta. Cuando recargamos la aplicación, vemos que los datos se están cargando y luego se vuelven falsos. Tenemos algunos datos.

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.

QnA

Recuperación de datos y pregunta

Short description:

Pudimos crear con éxito la aplicación de React, hacer una solicitud de GraphQL a nuestra propia API de GraphQL y recuperar datos para hacerlos disponibles en nuestra aplicación de React. Ahora, hagamos una pausa por un momento y abordemos una pregunta. ¿Por qué solo vemos al cliente de Spotify? Tengo más clientes en la base de datos, como Ikea. Permíteme tomar un breve descanso y luego continuaremos.

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í.

Preguntas de los participantes y acceso de usuarios no registrados

Short description:

Algunos participantes encontraron errores de sintaxis y otros problemas mientras seguían el proceso. Se planteó la pregunta de por qué solo se estaban recuperando datos de Spotify. La respuesta es que la solicitud se realizó como un usuario no registrado, utilizando el rol público, que solo permite el acceso a datos de clientes no privados.

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.

Mostrando Usuarios en la Aplicación React

Short description:

Eventualmente agregaremos autenticación, pero por ahora esto está bien. Continuemos con nuestra aplicación React y mostremos a los usuarios. TypeScript sabe exactamente lo que se me permite hacer y no hacer aquí, por eso es tan inteligente. Obtengamos los corchetes y todo. Puedo hacer data.

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?

Consultando Datos y Agregando createdAt

Short description:

Y no puedo hacer esto porque esto no existe. ESDA todavía no existe, solo quiero asegurarme de que los clientes existan. Así que podemos echar un vistazo, veamos si encontramos clientes. Sí, tenemos exportar tipo clientes. Automáticamente tenemos tipos. Entonces nuestro código es seguro en cuanto a tipos. ¿Por qué solo tenemos ID y nombre y no esPrivado y no createdAt? ¿Alguien en el chat tiene una idea? Sí, exactamente. Así que solo consultamos ID y nombre. Así que agreguemos createdAt también.

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.

Actualización de la Consulta GraphQL y Generación de Código

Short description:

Voy a volver a la consulta GraphQL y volver a ejecutar la generación de código. Ahora, el código generado de GraphQL está pendiente de los cambios en nuestros archivos de GraphQL. Agreguemos el campo 'isPrivate' y veamos los objetos actualizados.

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í.

Agregando Autenticación y React Router

Short description:

Creamos una tabla de clientes en Postgres y agregamos tres columnas. Esto nos dio automáticamente una API de GraphQL funcional. Con GraphQL code gens y TypeScript, podemos acceder fácilmente a los datos de la tabla. ¿Pudiste listar todos los clientes y ver Spotify? Agregamos Google como un nuevo cliente. Sin embargo, nuestra aplicación carece de autenticación. Necesitamos instalar el paquete npm react-router-dom.

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.

Instalación de React Router y Compartir Código

Short description:

Instalé el paquete react-router-dom y creé un nuevo archivo llamado router.tsx en la carpeta de componentes. Ya escribí el código y lo pegaré en Discord. Si estás en el servidor de Discord de Git Nation, puedes encontrar el código allí.

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.

Agregando el Componente Authgate

Short description:

Vamos a copiar el código y pegarlo dentro de router.tsx. Este código configura un enrutador simple con rutas de inicio de sesión y de la aplicación. También incluye un componente Authgate, que garantiza que el usuario haya iniciado sesión antes de acceder a ciertas rutas. Crearemos un nuevo componente llamado Authgate.tsx y copiaremos el código allí. Authgate es un componente envolvente que proporciona funcionalidad de autenticación. Damos un tiempo a todos para copiar el código y luego lo discutiremos más a fondo.

¿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.

Autenticación y Panel de Control de la Aplicación React

Short description:

En nuestra aplicación React, utilizamos el gancho 'useNhostAuth' del paquete 'nhost-react-auth' para verificar si el usuario está autenticado o cargando. El gancho vuelve a renderizar los componentes cada vez que el usuario cierra sesión. Si el usuario no está autenticado, se redirigirá a la página de inicio de sesión. Tenemos una puerta de autenticación en nuestro enrutador para asegurarnos de que solo los usuarios autenticados puedan acceder al panel de control y otros componentes.

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.

Arreglando Authgate y Router

Short description:

Me encontré con un problema al importar 'authgate' y 'router'. Creé un componente de inicio de sesión y lo agregué al panel de control. Luego, volví a cargar la aplicación y realicé los cambios necesarios en el enrutador. Ahora estoy en el punto final de inicio de sesión.

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.

Redireccionando a la página de inicio de sesión y creando el componente de inicio de sesión

Short description:

Para asegurarse de que la redirección automática a la página de inicio de sesión funcione para todos, el presentador pide a la audiencia que confirme si experimentan el mismo comportamiento. Explican que el comportamiento esperado es ser redirigido a la página de inicio de sesión al intentar acceder al panel de control sin iniciar sesión. El presentador menciona que algunos participantes han protegido con éxito sus aplicaciones de React y anima a otros a pedir ayuda si es necesario. También mencionan que la masterclass está grabada y se puede seguir en otro momento. Luego, el presentador introduce el próximo tema, que es crear un componente de inicio de sesión simple.

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í.

Formulario de inicio de sesión y código

Short description:

Vamos a ver si se me permite copiar y pegar código nuevamente en Discord. Este es login.tsx. Si has usado React antes, te resultará familiar. Es similar a JavaScript. Tenemos variables para el correo electrónico y la contraseña, un controlador de envío y un formulario de inicio de sesión simple. Nada fuera de lo común.

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.

Formulario de inicio de sesión y funcionalidad

Short description:

Así es como se ve el formulario de inicio de sesión. Utiliza NOSAuth para iniciar sesión y redirige al usuario a una aplicación específica. Puedes agregar usuarios y probar la funcionalidad de inicio de sesión. Si el correo electrónico y la contraseña son incorrectos, se devuelve un error 401. Si son correctos, la solicitud de red es exitosa.

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.

Inicio de sesión exitoso y visualización de clientes

Short description:

Obtuve una respuesta 200. Me redirigieron correctamente al panel de control. Si recibes un error de correo electrónico no verificado, puedes ir a Hasura, navegar a Auth, Usuarios y editar tu usuario para establecer el correo electrónico como verificado. Una vez que guardes los cambios, puedes intentar iniciar sesión nuevamente. Esto permitirá al usuario iniciar sesión. Ahora procederemos al panel de control e importaremos el componente de cliente para mostrar la lista de clientes.

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.

Error al recuperar los datos del cliente

Short description:

Agregué el componente de clientes al panel de control, pero encontré un error al intentar recuperar los datos del cliente. El mensaje de error indicaba que no se encontró el campo 'clientes'. Tras una investigación más detallada, se descubrió que el error estaba relacionado con los permisos de usuario. Solo los administradores y el rol público tenían acceso a los datos de los clientes.

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.

Configuración de permisos para el rol de usuario

Short description:

Pudimos iniciar sesión correctamente y ver el panel de control, pero encontramos un error al intentar recuperar los datos del cliente. El problema se debía a la falta de permisos para nuestro usuario. Para resolver esto, agregamos un permiso de selección para el rol de usuario, lo que les permite ver todo en la tabla de clientes. Después de guardar el permiso y recargar la página, pudimos ver nuevamente a los clientes.

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.

Resumen de Logros

Short description:

En menos de 90 minutos, pudiste crear un backend completo con seguridad, una base de datos Postgres, una API de GraphQL y gestión de usuarios y almacenamiento. También creaste una tabla de clientes con permisos, construiste una aplicación React con TypeScript e implementaste la autenticación para proteger el panel de control. ¡Esto es un logro increíble!

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.

Agregando la Función de Cierre de Sesión

Short description:

Voy a agregar una función de cierre de sesión al panel de control. Crearé un div y un botón con una función onclick para cerrar la sesión del usuario. Al importar nhost y usar .auth.signout, podemos cerrar fácilmente la sesión del usuario. Cuando el usuario hace clic en el botón de cierre de sesión, se cerrará la sesión y se redirigirá a la pantalla de inicio de sesión.

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?

Explorando la Gestión de Usuarios y la Sincronización de Datos en Tiempo Real

Short description:

No podemos acceder al panel de control sin iniciar sesión. Sin embargo, podemos iniciar sesión nuevamente y ver a los clientes. Hemos configurado con éxito una base de datos, una API de GraphQL, usuarios y una aplicación React. También podemos cerrar sesión de los usuarios. Vamos a explorar cómo agregar usuarios y sincronizar datos en tiempo real.

De acuerdo. Entonces veamos si podemos, como, ¿podemos hackear esto o, como, ¿podemos ir al panel de control sin iniciar sesión? No, no podemos. ¿Verdad? No podemos. No hemos iniciado sesión. No se nos permite. Así que intentemos iniciar sesión nuevamente. ¿Quieres empezar tú? Haz clic en. Oh, tal vez fui demasiado rápido allí. ¡Ah! Pude iniciar sesión nuevamente y ver a los clientes nuevamente. Oh, veo cosas increíbles en el chat. Sí. Esto es increíble. Tenemos una database, tenemos una API de GraphQL. Tenemos usuarios, tenemos una aplicación react, tenemos todo configurado aquí. Y también podemos cerrar sesión de los usuarios. Es perfecto. Sí. ¿Quieren ver cómo podemos agregar algunos usuarios? Tal vez podamos agregar, como, podemos leer usuarios allí. ¿Deberíamos poder agregar usuarios también? ¿Qué opinan? ¿Tenemos tiempo para eso? Ya llevamos una hora y media. Sí, deberíamos hacer la sincronización de datos en tiempo real. Sí, estoy totalmente de acuerdo.

Habilitando Datos en Tiempo Real con Subscripciones

Short description:

Para habilitar datos en tiempo real, necesitamos modificar la consulta de GraphQL a una subscripción. La renombramos como 'getCustomersSub' para asegurar su unicidad. Con Codegen en ejecución, podemos usar la consulta actualizada en nuestro componente de clientes. En lugar de 'useGetCustomersQuery', utilizamos 'useGetCustomers' para obtener datos en tiempo real. Recuerda guardar los cambios y revisar el componente 'customer'.

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.

Sincronización de Datos en Tiempo Real y Actualizaciones Automáticas

Short description:

Ahora, estoy utilizando subscripciones en lugar de consultas, lo que permite la sincronización de datos en tiempo real. Cuando se inserta un nuevo cliente, aparece automáticamente en la lista de clientes a la izquierda. Esta función permite actualizaciones en tiempo real sin problemas y asegura que los datos estén siempre actualizados.

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.

Sincronización de Datos en Tiempo Real y Latencia

Short description:

Los datos se sincronizan en tiempo real al agregar, editar o eliminar datos en la base de datos. Los servidores se encuentran actualmente en Alemania, por lo que puede haber cierta latencia dependiendo de tu ubicación. La sincronización de datos en tiempo real se demostró con éxito, mostrando actualizaciones en cuestión de minutos.

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.

Sincronización de Datos en Tiempo Real y WebSockets

Short description:

Ahora tenemos sincronización de datos en tiempo real. Podemos cambiar los datos directamente en la base de datos y ver los cambios en tiempo real. Ya sea que cambies los datos a través de GraphQL o directamente en la base de datos, los datos en tiempo real siempre están ahí. Se utiliza WebSockets para la sincronización de datos en tiempo real. Me detendré aquí y estaré disponible para cualquier pregunta adicional.

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.

Explorando Métodos de Inicio de Sesión de Terceros

Short description:

Hemos cubierto los conceptos básicos de lectura de datos con GraphQL, pero también puedes insertar, actualizar y eliminar datos. Si tienes una cuenta de GitHub, ve a github.com/nhost/nhost. Admitimos métodos de inicio de sesión de terceros como Google, GitHub, LinkedIn y Facebook. Agregar GitHub como método de inicio de sesión es rápido y fácil. Ve a la configuración de desarrollador y crea una nueva aplicación OAuth de GitHub llamada GraphQL Galaxy.

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.

Habilitando el Inicio de Sesión con GitHub

Short description:

Voy a habilitar GitHub como método de inicio de sesión y generar un nuevo cliente secreto. Agregar un proveedor como este es rápido y fácil. Después de guardar los cambios, podemos registrar al usuario y agregar un botón 'Iniciar sesión con GitHub' en la página de inicio de sesión.

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.

Iniciar sesión con GitHub e Información del Usuario

Short description:

Voy a mostrarte cómo iniciar sesión con GitHub usando NHost. Vamos a echar un vistazo a la base de datos y ver la información del usuario obtenida de GitHub. Al iniciar sesión con GitHub, obtenemos el nombre, correo electrónico y URL del avatar. No se requiere contraseña.

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.

Final Remarks and Q&A

Short description:

No es necesario verificar el correo electrónico porque confiamos en la verificación de correo electrónico realizada por GitHub o Google. Configuramos automáticamente el correo electrónico como verificado. Tenemos un usuario en la base de datos. Dejaré de compartir mi pantalla y abriré la galería para ver a todos. Si alguien tiene preguntas o comentarios, siéntase libre de desactivar el silencio y preguntar. Tomemos un descanso y volvamos más tarde para seguir construyendo. Esperamos que hayan aprendido algo nuevo y estén emocionados de construir con nosotros. Gracias por asistir a la masterclass.

¿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.

Watch more workshops on topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.