La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

Gracias por unirte a nosotros hoy. Hoy, hablaremos sobre pasar de una perspectiva de desarrollador de front-end a más de una perspectiva de desarrollador de full-stack. Estaremos viendo RedwoodJS, donde soy un mantenedor principal. Fui presentado a Redwood hace poco más de un año. Co-presento un podcast llamado Compressed FM. De hecho, puede que haya sido hace dos años. De todos modos, co-presento un podcast llamado Compressed FM con James Q. Quick. Puedes echarle un vistazo si estás interesado. Hablamos sobre diseño web y desarrollo. Luego nos quedamos con un poco de entusiasmo. pero tuvimos como invitado destacado a David Price aquí en el episodio 54 y él es uno de los cofundadores de Redwood y vino al programa y empezó a hablar sobre Redwood y realmente me vendió todo el concepto de Redwood y solo sus opiniones y cómo han puesto el marco juntos, así que pasé algún tiempo revisando el tutorial en su sitio web y todavía está allí Entonces, si vas a redwoodjs.com slash docs, e incluiré un enlace en el chat, hay un tutorial aquí en el que puedes trabajar que repasa todo el contenido.

Así que pasé el fin de semana revisando eso y quedé totalmente convencido. Así que una de las cosas que realmente aprecio de Redwood es que hace storybook y solo JavaScript testing library. Toma Prisma, GraphQL, React, y hace que todos esos sean ciudadanos de primera clase y ofrece soporte de inmediato. Y así verás cuando comencemos que han agrupado todas estas cosas juntas, y lo hace realmente fácil. Así que no estás tratando de lidiar con configuraciones o tratando de averiguar ajustes y soporte, así que cada vez que se actualizan cualquiera de esas piezas, nosotros manejamos todas esas actualizaciones para ti, así que solo ejecutas un script de actualización. No tienes que hacer eso tú mismo. No tienes que averiguar, okay, ¿por qué se rompió mi aplicación y luego tienes que buscar en toda la documentation para estaremos usando esto. Si estás mirando esto y te gusta, okay, esta pila es interesante pero tal vez yo solo quiero enfocarme en React, todavía es React. Es un marco de React de full-stack y lo bueno de esto es que tiene una capa de front-end y back-end distintas. Así que estaremos trabajando en todo eso.

Entonces, el proyecto real en el que estaremos trabajando se llama Brazilian Nut News. Y puedo incluir un enlace a este repositorio en particular. Todo lo que tiene es un leeme. Tiene la agenda de cómo trabajaremos el contenido. En lo que nos centraremos. Hay algunos enlaces rápidos y comandos que puedes usar. Y voy a tratar de hacer uso de las salas de desglose y tener algunos ejercicios para que espero que no vaya demasiado rápido para ti, pero las cosas no son demasiado lentas. Quiero asegurarme de que es interesante. Así que por favor haz uso del chat y trataré de mantener mi ojo en él. La aplicación que mencioné es Brazilian Nut News. Y el nombre es solo un nombre divertido para esto porque las nueces brasileñas suben automáticamente a la parte superior en un frasco de nueces. Y así es como funciona Hacker News, ¿verdad? Así que puedes enviar un enlace, puedes votar en el enlace, y luego lo mejor, supuestamente los mejores enlaces suben a la parte superior. Así que esto es en lo que vamos a trabajar. Este es el repositorio completo. Y hay un enlace a esto dentro del leeme. Y puedes interactuar con esto. Esto está desplegado en Vercel. La database en sí está con Supabase. Y así te mostraré cómo usar todo eso. Pero la página principal aquí es nuestra página de feeds. Y luego puedes ver cuando te desplazas hacia abajo, tienes acceso a la navegación. Pero también puedes mirar el feed más reciente. Así que esta página en particular está ordenada por puntos. Así que por ejemplo, cuando no puedo votar ahora mismo, porque no estoy conectado, pero si me conecto, diremos Amy en Redwood js.com. Y me conecto con mi contraseña. Puedes ver ahora que puedo votar. Y si voto a favor, digamos en Google, entonces esta página se reordenará y pondrá a Google al frente porque ahora tiene un punto pero fue también añadido creo que más recientemente que digamos Apple en este artículo aquí así que si hago clic en lo último esto se basa todo en el tiempo por lo que el enlace de los documentos de Redwood JS fue añadido más recientemente hace 13 horas y por eso aparece en la parte superior también puedes enviar un enlace una vez que estás conectado así que podría enviar uno para React Summit y agarrar el enlace para eso y entonces deberías ver eso aparecer en la lista así que ahora si voy a lo último React Summit está en la parte superior de la lista también puedo ir a mi perfil y así puedes ver los enlaces que he compartido y también tengo una cuenta configurada bajo solo Amy así que si escribo eso como Amy no he compartido ningún enlace así que eso está actualmente vacío pero entonces también puedes ir a comentarios y ver todos los comentarios que he hecho en enlaces. Puedes ver cualquier enlace que he marcado como favorito y luego puedes editar tu perfil. Así que no te sientas demasiado abrumado. Solo desglosaremos partes de esto y no vamos a construir toda la aplicación pero sí tengo un enlace al repositorio completo si quieres echarle un vistazo. Esperemos que como parte de esta masterclass trabajemos en algunas cosas y tendrás la capacidad de crear piezas y partes de ella y luego si quieres revisar el contenido, habrá mucho allí que puedes usar esto como un repositorio de ejemplo para seguir construyendo e incorporando características. Así que quiero asegurarme, ¿todos están bien? Nos aseguraremos de que no tengamos ninguna pregunta antes de empezar la carne del contenido.

Bueno, voy a seguir adelante, pero de nuevo, por favor usa el chat y seguiré revisándolo durante la masterclass. Vale. Así que este repositorio en particular, y de nuevo, he compartido un enlace a esto dentro del chat. Lo primero que ya hemos hablado de lo que vamos a construir. Así que echemos un vistazo a los documentos de Redwood y pondremos en marcha un proyecto. Oh, gracias, Isa. O creo que así es como se pronuncia tu nombre. Realmente pido disculpas si, si destrozo tu nombre. Voy a hacer mi mejor esfuerzo. Parece que puede haber habido algunos problemas. Creo que todavía tenemos algo de apoyo de React Summit en la sala. Parece que hubo un problema con el enlace de Zoom. Sé que esto se está grabando. Y así la gente podrá verlo después del hecho. Genial. Así que aquí está el sitio web de React. Quiero decir, lo siento, el sitio web de Redwood.js. Y puedes hacer clic en este enlace de Docs y venir a Quick Start. Así que por defecto, se requiere tener la versión 18 de Node y luego una versión de yarn mayor que 1.15. Así que estoy feliz de apoyar si necesitan un poco de ayuda para instalar esos en su máquina para poner en marcha Redwood. Si no, también he incluido un enlace en el repositorio para Gitpod y te mostraré cómo funciona esto. Así que este es un repositorio de inicio y si miras esto parece bastante delgado pero si haces clic en puedes hacer fork a este repositorio para abrirlo o simplemente puedes decir abrir en Gitpod. Y así Gitpod es bastante genial. Te permite trabajar dentro de VS Code dentro de tu navegador. También puedes sincronizarlo con la versión de VS Code en tu máquina. Así que ya tengo una cuenta. Te animo a que crees una cuenta con GitHub si vas a ir por este camino. Pero puedes hacer clic en – puedes simplemente – puedes empezar desde cero. Así que también te mostraré cómo ejecutar esto en la terminal. Solo quiero mostrarte esto en caso de que tengas algún problema con Node o Yarn. Esta es probablemente la forma más fácil de ponerse en marcha simplemente porque no tienes que preocuparte por instalar esas dependencias. Pero si te sientes cómodo instalando Node y Yarn, o si ya los tienes, no tienes que preocuparte por este paso en particular. Pero solo quería mostrarte que una vez que abres esto, puedes ver que crea un proyecto Redwood y puedes trabajar directamente dentro del navegador. Así que todavía está instalando todas esas dependencias con Yarn. A medida que avanza el flujo, también añadirá algunos plugins que hemos recomendado para trabajar con Redwood que simplemente lo hacen un poco más fácil. Y trataré de señalarlos a medida que nos encontramos con ellos.

Voy a salir de esto porque no voy a trabajar en VS Code. Si tú, quiero decir, en GetPod, estaré trabajando en VS Code. Pero si quieres sincronizar esto, te lo mostraré. Una vez que aparezca, de hecho, me estoy adelantando. Hay una pestaña de Puertos aquí. Y una vez que esté arriba, puedes cargar el puerto 8910 y 8911, que estaremos mirando. Así que voy a salir. Solo voy a detener el espacio de trabajo aquí. Y voy a seguir adelante y simplemente eliminar esto por ahora. Bueno, lo que voy a hacer ya que ya tengo node, en realidad estoy ejecutando node 20 y luego yarn. Voy a copiar esta línea de código. Voy a abrir mi terminal. Esta terminal en particular es warp. Es warp.dev. Es una terminal gratuita, pero también puedes usar la terminal en VS Code o Hyper, iTerm2 que son todos geniales para trabajar con proyectos. Así que voy a pegar esta línea. Y lo que esto está diciendo es que voy a crear un proyecto Redwood usando yarn. Y este es el nombre de mi proyecto, mi proyecto Redwood. Voy a cambiar esto y voy a llamar a esto React Summit solo porque ya tengo un proyecto en mi máquina llamado Brazilian Nut News. Tal vez quieras llamar al tuyo Brazilian Nut News. Pero voy a decir que quiero crear un proyecto llamado React Summit. Y esto cargará todo. Y puedes ver que está diciendo, hey, tienes una versión mayor que Node 18. Puedes sobrescribir esto y continuar trabajando con Redwood o puedes ajustarlo. Así que si quieres cambiar la versión en tu máquina, realmente te animo a usar MBM. Puedes ver un enlace aquí sobre cómo hacerlo. Así que voy a seguir adelante y decir sobrescribir y continuar instalando. Voy a usar TypeScript. Si no estás familiarizado con TypeScript, está perfectamente bien. Te guiaré a través de algunas de las sutilezas de eso. No te sientas abrumado por eso. También puedes inicializar tu repositorio si quieres. Voy a decir no por ahora. Y ahora parece que estamos en marcha. Así que voy a cd en mi directorio. Y luego voy a ejecutar yarn install. y eso puede tomar un minuto mientras intenta poner todo en marcha perdí mi ahí está la ventana perfecto así que ahora he ejecutado yarn install y así para poner en marcha un proyecto Redwood todo lo que tienes que hacer ahora es decir yarn RW, que es Redwood para abreviar. Y voy a decir Redwood dev. Y desde aquí, se abrirá en mi navegador, lo abrirá en una ventana diferente, mi página de inicio de Redwood. Así que puedes ver aquí, hay un comando para generar páginas y ese tipo de cosas. Así que la primera parte de la masterclass de hoy, avísame si tienes algún problema en el chat, porque quiero asegurarme de que ustedes puedan ponerse en marcha porque de lo contrario tengo miedo de que te pierdas. No quiero que te pierdas durante toda la masterclass. Eso sería terrible. Voy a seguir adelante. Creo que hay

Ahora, parecía que muchas personas en el chat no necesariamente tenían experiencia con Redwood. Así que voy a dar una visión general de alto nivel de la estructura de las carpetas. Si eso parece un poco abrumador, no te preocupes. Lo tomaremos paso a paso. Y creo que las carpetas empezarán a tener sentido a medida que trabajes en ellas. Pero no quiero que te pierdas completamente dentro del proyecto.

Así que aquí arriba tenemos algunos archivos de configuración con Yarn y PS code y Redwood. No necesitas preocuparte realmente por eso. Pero como mencioné, Redwood es una aplicación completa de React. Así que hay un front end distinto. Tenemos una carpeta web y un back end distinto llamado API. También tenemos nuestros módulos de nodo modules donde se están incorporando todas nuestras dependencias del proyecto. No necesitas realmente hurgar en eso. Y luego tenemos una carpeta de scripts. Así que esto es perfecto para si quieres, por ejemplo, sembrar tu database. También lo he usado para, como, ejecutar un script para crear un icono, como usando un SVG sprite. Así que incluiré ese script aquí.

Pero aparte de eso, las dos cosas principales en las que nos centraremos son la carpeta API y la carpeta web. Dentro de la carpeta API, tenemos una carpeta para nuestra database. Así que estaremos hurgando en este archivo de esquema punto Prisma. También tenemos una carpeta de disco. No necesitas preocuparte realmente por eso ya que esa es la carpeta que se compila. Tenemos nuestra carpeta de origen. Así que esto es para directivas. como si quieres requerir autenticación o saltarte la autenticación. También puedes crear tus propias directivas personalizadas. Tienes funciones para trabajar con GraphQL. También puedes crear funciones personalizadas para decir que tratas con un correo, si quieres hacer eso. También tienes GraphQL. Así que estaremos trabajando dentro de esa carpeta, generaremos algo de GraphQL. Y de nuevo, si no tienes experiencia con GraphQL, lo explicaremos. Te daré una visión general de lo que es GraphQL. Tenemos una biblioteca aquí para tratar con la autenticación y nuestra database y un registrador. y luego si tenemos algún servicio. Así que tendremos algunos servicios que vamos a crear mientras trabajamos con nuestra database. Y luego esto es para tipos si estás usando TypeScript. También tenemos algunas configuraciones para trabajar con Jest. Tenemos un archivo package.json. Así que notarás que estamos haciendo uso de los espacios de trabajo de Yarn. Así que en realidad hay tres archivos package.json en el proyecto. Hay uno para nuestro directorio API. Hay uno para nuestro directorio web cuando llegamos aquí. Y luego también hay uno para todo nuestro proyecto. proyecto. Así que eso es algo a tener en cuenta. Dentro de nuestro directorio web aquí, tenemos nuestra configuración. Así notarás que ahí es donde se metió nuestra configuración de Tailwind. Tenemos nuestros módulos de nodo específicamente para nuestro directorio web. Tenemos una carpeta pública. Así que cualquier cosa que se ponga dentro de la carpeta pública automáticamente se incluye cuando te preparas para trabajar con tu aplicación. Así que por ejemplo, si añadiera una carpeta aquí llamada imágenes, y luego pudiera meter cualquier imagen dentro de esta carpeta que yo quiera poder usar en el sitio. Así que entonces simplemente hago referencia a eso diciendo slash imágenes, digamos myimage.ping o lo que sea que esa imagen termine siendo dentro de esa carpeta en particular. Dentro del directorio de origen, esto es algo así como la carne, al menos del front end. Así que tenemos un directorio de componentes donde tendremos nuestros componentes de proyecto. Tenemos componentes de diseño. Tenemos componentes de página. Y luego tenemos nuestra aplicación. Normalmente no, tienes que tener estos en orden para que Redwood funcione, pero normalmente no me meto con la aplicación o el cliente de entrada. Creo que tiene que ver con Vite. Y luego tenemos nuestro archivo CSS. Así que ya lo vimos. Cuando añadimos ese script de Tailwind, añadió este código para configurar Tailwind. Normalmente no modifico el index.html porque necesitas esa pieza para que funcione la aplicación. Pero el archivo de rutas es muy importante. Así que muchos de los otros frameworks, digamos como Next o Remix o incluso SvelteKit, todos ellos son rutas basadas en archivos o carpetas. Así que tan pronto como creas un archivo o una carpeta, digamos una carpeta llamada About, entonces de repente tienes una ruta lista para slash About. Y eso parece realmente fácil. Es agradable trabajar con ello, pero si alguna vez quieres cambiar tu sistema de rutas, si alguna vez quieres cambiar las rutas de los archivos, estás moviendo archivos y carpetas. Y así con este archivo de rutas, puedes cambiar el nombre sin tener que reconfigurar o reorganizar tus archivos de proyecto, lo cual es realmente agradable. Así que también trabajaremos en esa carpeta. Y luego también tenemos algunos archivos de configuración adicionales. Así que voy a volver a la agenda aquí para asegurarme de que tipo de nos mantenemos en la pista. Lo primero que queremos hacer es queremos poner en marcha Storybook. Y voy a caminar a través de Storybook y mostrar cómo los beneficios de usarlo y por qué eso es tan genial. Así que es un primero. Oh, genial. Cómo no lo expresaste. Así que lo primero que queremos hacer es voy a decir yarn redwood Storybook. Y puedes ver que Storybook se incluye con redwood de serie. Así que tan pronto como ejecutes yarn redwood Storybook, esta es la primera vez que lo ejecuto. Así que va a instalar algunas dependencias adicionales para que yo pueda usar Storybook en mi proyecto. pero irá mucho más rápido después de eso, pero notarás que tan pronto como termine, me dará un puerto. Creo que es como 7910 que puedo usar. Ahí vamos. Lo abrió en una ventana diferente. Ahí vamos. Así que ahora tengo storybook en marcha. Así que no sé tú, pero esa es la configuración de storybook más fácil que he tenido. Ahora mismo no tenemos ningún componente dentro de nuestro storybook. Por eso nos está dando un error.

Así que vamos a crear un componente.. Así que en el repositorio que compartí, ¿dónde está eso? Varias ventanas diferentes aquí. Aquí vamos. Hay un enlace al design en Figma. Si tú quieres abrirlo, si no tienes Figma, deberías poder ver el archivo ya sea que lo tengas o no. Creo que puedes ver la versión web de él pero también es gratis crear una cuenta en Figma así que aquí está la aplicación y el design que estaremos construyendo así que solo vamos a crear algunos componentes aquí, de acuerdo, voy a hacer eso, podemos crear algunos componentes y ver cómo se ven dentro de storybook, no vamos a crear componentes para todo, pero solo quiero darte una idea de cómo funciona storybook porque de nuevo, en esta primera hora nos estaremos enfocando

Lo que vamos a hacer, voy a abrir otro panel de terminal aquí y voy a crear este componente. Simplemente voy a decir Yarn Redwood Generate y los generadores que Redwood tiene son realmente una de sus características clave, creo, solo por hacer que sea fácil poder prototipar cosas rápidamente y poder crear tu aplicación. Así que puedo decir generar un componente y quiero generar un componente de enlace compartido. Así que voy a presionar enter. Y entonces notarás que hay algunos atajos allí para RW en lugar de Redwood y G en lugar de genera, pero ahora creó este componente para mí. Así que si vuelvo a VS code, podemos echar un vistazo dentro de ese directorio de componentes que acabamos de ver. Ahora hay una carpeta de enlace compartido, y hay tres archivos que se generan automáticamente cuando creas un componente. Así que tengo el componente en sí, y puedes ver que hay algún código de plantilla. Tenemos un archivo de testing, que es bastante genial, y luego también tenemos un archivo de storybook. Así que si vuelvo a mi storybook dentro de mi navegador, por aquí, debería poder ver, sí, ahí está mi componente de enlace compartido, y puedes ver que hay contenido dentro. Así que storybook es bastante genial, porque te permite desarrollar componentes de forma aislada. Así que si estás trabajando con un equipo de desarrollo, no necesariamente tienes que crear, digamos, como código ficticio que va a vivir en una página falsa, y luego decir, una vez que esto se implemente, borra esta página. Porque con storybook, puedes crear ese componente en aislamiento y luego poder entregarlo. Y también te mostraré, básicamente creará documentation para ti. Así que voy a entrar en mi componente de enlace compartido aquí. Y si esto es lo que estamos construyendo, este componente aquí que tiene el icono de votación, tenemos el título y una línea de autor aquí y una flecha. Así que lo que voy a hacer es que voy a construir esto. Así que tenemos, voy a crear un contenedor para mis enlaces de votación. Y por ahora, ya que no tengo las imágenes reales aquí. Simplemente voy a decir arriba y abajo. Y tendré otro div y esto tendrá nuestro título. Vamos a envolver eso en un H2. Y tengo algunos metadatos aquí. Así que lo pondré dentro de un div. Y así que déjame copiar este texto. Simplemente lo pegaré. Y verás, tenemos la cantidad de puntos, la persona que lo envió, y luego algunos comentarios. Y luego tenemos un enlace aquí en la parte derecha así que voy a poner esto como una flecha para salir así que ahora ya que tenemos acceso a Tailwind puedo decir nombre de clase y simplemente voy a usar flexbox para conseguir que nuestro icono de votación aquí y nuestro título y nuestra flecha estén todos en línea horizontalmente así que ahora voy a asegurarme de que esto abarque tanto espacio como pueda decir nombre de clase igual a flex uno y darle un guardar. Y ahora si revisamos esto dentro de storybook, puedes ver que ahí están mis enlaces de arriba abajo, tenemos el título y nuestros metadatos y luego la flecha aquí a la derecha. Así que lo que podemos hacer aquí, vamos a añadir un nombre de clase, hagamos esto flex, quiero que estos estén apilados uno encima del otro. Y luego quiero que también estén centrados creo que digo artículo centro sí así que esos están apilados en la parte superior vamos a añadir sólo un poco de espacio aquí así que diré brecha vamos a decir brecha cuatro en realidad podríamos ser precisos y ver lo que esto necesita ser así que en figma si digo seleccionar esta flecha y mantengo pulsada la tecla alt mostrará me cuáles son las dimensiones cuánto espacio y píxeles están en medio así que ahora voy a venir de vuelta aquí en realidad podemos cambiar esto a cinco así que puedes ver cómo podemos simplemente desarrollar directamente dentro de storybook para nuestros componentes de front end um no configuramos ninguna de nuestras fuentes personalizadas um voy a simplemente puedo parar puedo hacer eso si ustedes están interesados en ver eso pero yo simplemente voy a seguir moviéndome de esa manera podemos también llegar a la pieza de back end de trabajar con Redwood. Así que tengo mayúsculas, texto, y lo pondré en quizás 4XL. Ahora si volvemos, puedes ver que ahí está nuestro texto. Hagamos esto en negrita. Genial, y luego tenemos un enlace aquí, que quiero volver y manejar nuestros enlaces más tarde, pero vamos a pasar algunas props aquí. Así que notarás que estamos trabajando dentro de React aquí. Podemos decir que tenemos nuestros puntos. tal vez tenemos el autor y hagamos esto para el autor tal vez queremos el apodo del autor y tal vez queremos el primer nombre en realidad podemos hacer solo autor aquí como esto y especificar esos detalles con TypeScript así que tal vez queremos el recuento de comentarios queremos el título del enlace Y el enlace real. Así que ahora puedes ver que está, bien, está diciendo que necesito usar realmente estas cosas que he introducido. Así que hagamos eso. Voy a introducir al autor. Así que tal vez sea el primer nombre, autor.punto apellido. Y la ventana de zoom está en el camino. Ahí vamos. Ahora tenemos nuestro recuento de comentarios. Hagamos esto el título. y tal vez queremos que esto enlace aquí. Así que esto será el enlace. Bueno, tenemos los cimientos de nuestro componente. Ahora, si volvemos a Storybook, notarás, hey, nuestro componente ya no funciona. Y eso es porque estamos pasando estas props dinámicas que no sabe cómo mostrarlas. Así que si volvemos a Storybook, Esto está usando el formato de historia de componente C de Storybook, creo que se llama. Y, sí, hay una pregunta aquí para el repositorio. Déjame compartir eso muy rápido. Ahí tienes. Esto tiene la agenda y algunos de estos enlaces clave con los que estamos trabajando. Vale. así que aquí tenemos nuestro archivo de storybook, y esto está usando su versión actual de formato de historia. Y lo bueno de este formato en particular es que realmente se centra en, como, estás pasando tus props como un conjunto de argumentos. Y te mostraré por qué esto es bueno, pero podemos seguir adelante y copiar nuestras props aquí y pasarlas a nuestros componentes de historia. Así que digamos que tal vez tiene 100 puntos el autor, digamos nombre, apellido, y el recuento de comentarios aquí. Tal vez esto es 10. Eso es bueno. Haremos RedwoodJS y luego el enlace podemos disparar al sitio web de RedwoodJS. Necesita un comentario. Perfecto. Así que ahora que he pasado esas props y vengo a nuestra historia libro aquí, puedes ver que nuestro componente está funcionando. Y lo bueno es que mira esto. Hay un panel de controles aquí abajo así que puedo cambiar estos controles y puedes ver mi componente siendo actualizado en vivo aquí dentro de la parte superior. Así que si quieres ver, bien, esto se ve bien como Redwood JS, pero ¿qué pasa si tengo un título realmente largo? Generemos un poco de lorem ipsum. Digamos que tengo un título realmente largo aquí. ¿Cómo afecta eso a mi título entonces? No le gusta algo que escribí. Pero puedes empezar a ver, bien, ¿dónde se rompe el componente y qué necesito incluir? Veamos. Es gracioso que eso fuera. Oh, porque esperaba una cadena JSON. Veamos si eso. Ahí vamos. Así que es como, vaya, tal vez no es así como queremos estilizar nuestro título si es tan largo. o tal vez queremos poner en alguna validation allí para decir que un título sólo puede tener tantos caracteres o tantas palabras. También puedes cambiar el recuento de cómics. Y lo otro genial de Storybook es que puedes, si hubiera algún botón, puedes comprobar las acciones para asegurarte de que esas están siendo activadas correctamente aquí en el panel de acciones. Y luego bajo accessibility, también automáticamente ejecutará controles de accessibility para ti. Así que puedes decir, ¿están los encabezados no vacíos? ¿funcionan los colores y si hay alguna violación allí storybook también tiene algunas otras características que señalaré así que puedes ver mencioné accessibility pero también puedes cambiar como qué es lo que alguien con visión borrosa ve o alguien que tiene daltonismo así que es en escala de grises qué ven así que eso también es realmente útil cuando estás haciendo testing También puedes delinear todos estos divs así que puedes ver exactamente con qué estás trabajando.

Y eso es realmente una cadena para que podamos decir, OK, ¿qué estamos testing? Así que puedes ver aquí arriba que eso es de donde viene. Entonces estoy testing mi enlace compartido. Esto describe el bloque de pruebas que estoy escribiendo. De hecho, puedes tener varios bloques de descripción. Así que podría poner algo aquí si quisiera describir algo más. Pero no siempre lo hago simplemente porque eso a veces, dependiendo del componente, puede que no sea necesario. Entonces estoy diciendo que, y luego esto se lee como una frase. Quiero decir que se renderiza con éxito. Así que el primer parámetro que toma es una cadena. Y luego el segundo parámetro que toma es un objeto. Y ese objeto es lo que realmente ejecuta tu prueba. Así que cuando estás escribiendo pruebas, tienes que configurar la prueba y luego hacer una afirmación basada en eso. Así que esto está haciendo todo en una línea. Podría ser más fácil si escribimos otra prueba y hablamos un poco más de ello. Así que cuando estás escribiendo pruebas, intenta pensar en términos de lo que el usuario está viendo y qué deberían esperar que suceda. Así que en este caso, espero que el usuario vea el título de mi enlace compartido. Espero que vean los puntos. Espero que vean quién es el autor. Espero que vean cuántos comentarios hay. Y luego espero que puedan hacer clic en este enlace de arriba y abajo. Y espero que esta flecha enlace al sitio correcto que pasamos como el enlace. Así que eso es bastante pruebas. Um, así que cuando estoy pensando en esto, normalmente diré porque tenemos nuestro bloque de it. Y luego también puedes decir skip. Así que saltará esa prueba en particular. Y luego sólo escribiré qué es esta prueba. Así que esa es la estructura básica con la que estás trabajando. Pero saltaré esta prueba. Sólo haré esto como mi lista de tareas pendientes. Escribiré todas las pruebas que voy a incluir. Así que, debería, debería mostrar el título correcto. luego um en realidad podríamos o podríamos cambiar esto muestra el título correcto muestra el número de puntos muestra el autor muestra el total de comentarios déjame deletrear eso correctamente es um maneja el voto positivo y maneja el voto negativo, y luego enlaza al enlace correcto o URL que pasamos. Bueno, estas son todas las tareas que necesitamos ejecutar. Ahora, si vuelvo a warp, verás que todas tienen círculos abiertos. Así que, saltó todas estas pruebas y sólo está pasando la que completamos aquí. Así que ahora podemos usar esto como nuestra lista de tareas pendientes y pasar por esto uno por uno. Así que espero que muestre el título correcto. Así que, la primera cosa que necesitamos hacer es que necesitamos configurar nuestra prueba. Así que para configurarla, necesitamos renderizar ese componente y en realidad voy a porque vamos a estar cambiando algunas de estas cosas aquí voy a deshacerme de esto voy a tirar de estas como props que es probablemente lo que debería haber hecho en primer lugar pero esto está bien así que voy a hacer puntos va a ser 10 podemos ver si este fue el problema o si había otro problema el autor pasamos esto como un objeto tenemos nuestro comentario cuenta que vamos a pasar como un número, necesita ser un igual entonces tenemos nuestro título, así que va a ser igual estamos pasando en el enlace real y creo que eso está bien sí, simplemente no le gustó eso argumento de propagación así que ahora sólo voy a copiar todo esto bloque de renderizado Así que render, creo que eso viene de la biblioteca de testing de JavaScript. Y de hecho Kent, a quien mencioné antes, es el creador detrás de la biblioteca. Y lo que hace es que simplemente facilita la prueba de los componentes de JavaScript fácilmente. Así que funciona con SvelteKit y Vue también. Así que hemos renderizado el componente que creamos. Lo pasamos. Y luego queremos afirmar algo. Así que puedo decir, queremos hacer nuestra afirmación. y verás a Copilot ayudándome. Voy a intentar pasar por esto un poco más despacio. De hecho, déjame borrar esto. Así que lo primero que quieres hacer es que quieres agarrar los elementos aquí. Tenemos que agarrar el título si eso es lo que vamos a comprobar. Así que voy a agarrarlo. Así que diré título, y sólo diré pantalla es lo que me permite agarrar ese componente de la pantalla. Y aquí es donde IntelliSense es realmente útil para poder decir ¿qué propiedades tengo disponibles para mí? Así que quiero obtener un elemento por el texto y voy a agarrar el título de Redwood JS. Así que una vez que lo tengo, creo que sólo está diciendo porque no he hecho nada con él todavía, entonces quiero establecer nuestra expectativa. Esto todavía está configurando las cosas. Así que espero que el título esté en el documento. Curioso por qué. y ver qué está pasando. Voy a comprobar warp. Bueno, así que tengo una prueba fallida. Esto es bueno, porque entonces ves cómo se ve una prueba fallida. Así que el problema es que screen.getByTest no es una función. Así que no creo que lo haya escrito correctamente. Estoy tratando de recordar cuál es la sintaxis. Ha bajado, déjame comentar esto, comenta esto. Normalmente lo hago todo de una vez. Pantalla, ahí vamos. Ahí vamos, es una función, no una propiedad. Lo siento por eso. Oh, pensé que era. Déjame ver qué, sólo un segundo. Déjame revisar mis notas aquí. Saquemos esto. um probablemente algo un error tonto que tengo Creo que sólo necesitas esperar oh lo siento nunca importa estás bien uh de vuelta a la pantalla a ver si eso Eso es raro. Oh, ya sé lo que es. No importamos la pantalla. Tienes que importarlo para que sepa qué está pasando. No es de extrañar que mi sintaxis no estuviera funcionando. Ahí vamos. A ver si eso, estaría en el documento. Ahí vamos. Ahora se aclara. Así que mi sintaxis estaba bien, sólo necesitaba importarlo. Genial. Lo aprecio. Veamos qué. Perfecto. Así que ahora si volvemos a warp, debería decir que ambas pruebas están pasando. Bastante genial.

Vale. Así que, ahora vamos al siguiente. Y muchas veces las pruebas van a parecer un copiar y pegar con esto. Pero tanto como puedas, getByText es tu amigo. Si estás tratando con imágenes, getByAltText también es tu amigo. Y puedes ver que debería tener un mejor IntelliSense ahora que mi paquete está importado correctamente. Así que, si digo expect screen dot. Y muchas veces usaré esto. Sí, esta lista se ve mejor. Usaré esta lista para averiguar lo que estoy buscando, así como getByRole, que es tu salida de emergencia cuando estás tratando de encontrar cómo capturar un elemento con las pruebas. Es este getByTestId, cuanto más puedas usar otras cosas es mejor porque eso es lo que los usuarios van a buscar, están buscando el texto que ves o si estás tratando con la accesibilidad, vas a usar esa pieza de texto alternativo aquí. Pero a veces es difícil capturar cosas. Y entonces puedes usar el ID de prueba. Y la razón por la que no es tan bueno es porque, como mencioné, los usuarios no ven eso, pero también hace que la prueba sea un poco más frágil. Así que si el ID de prueba cambia, entonces tu prueba también se romperá. Así que déjame darte un ejemplo de cómo se ve esto en realidad. Si quisiera capturar este botón de arriba, podría decir data-test ID y darle un valor. Y ahora puedo referenciar ese elemento particular dentro de mi prueba usando el data-test ID que acabamos de crear. Así que tienes que asegurarte de que esos valores coinciden. Genial. Así que voy a, sólo escribiré un par de pruebas más y luego os dejaré un ejercicio para que podáis escribir pruebas por vosotros mismos. Así que hagamos una para los puntos. Y luego puedes intentar hacer algunas de estas otras pruebas que acabo de escribir. Así que sólo voy a copiar y pegar este bloque entero. Ahora recuerda, tienes que quitar este skip. Así que hemos hablado de skip. También podrías decir only. Así que sólo va a ejecutar esa prueba, esa única prueba que hemos creado. Voy a quitar el skip. Y así que ahora lo que estoy haciendo es que estoy probando los puntos. Y aquí, quiero asegurarme de que mis puntos son 100, y espero que eso esté en el documento, así que si vuelvo a warp, puedes ver que no, hice algo mal, capaz de encontrar un elemento con el texto de 100, probablemente porque está buscando algo diferente, dame sólo un segundo, así que lo bueno de esto es que te dice, como, ahí está, está llegando, sólo que no lo está encontrando de la manera correcta todavía. Mira aquí. El texto está roto por varios elementos. Así que eso es probablemente lo que está pasando aquí porque tenemos una ruptura en lo que estamos mirando. Así que vamos a demostrar lo que estaba hablando con el data-test ID. Lo que podríamos hacer es envolver esto con un span y decir data-test ID. Son puntos. Y ahora si volvemos a nuestra prueba, puedo decirlo por test ID y queremos capturarlo por puntos. Ahí vamos. Veamos. Los puntos no están definidos. Veremos qué pasa. Vale. Así que ahora mira eso. Nuestra prueba está pasando. Genial. Así que voy a hacer una pausa. Si has estado siguiendo, hay cinco pruebas más que puedes intentar escribir. No tienes que hacer el clic, puedo mostrarte cómo funciona pero esas son un poco más complicadas, en realidad no hemos escrito el código para nuestro botón pero si quieres hacer el autor, el total de comentarios y la URL correcta, voy a abrir las salas de descanso de nuevo y de nuevo puedes trabajar solo o unirte a una sala de descanso. Vale Natasha, vi tu pregunta, ¿cuál es el mejor escenario para usar Redwood para construir un sitio web como un blog o un sitio web de varias cuentas? Esa es una pregunta fantástica, probablemente el lugar donde Redwood brilla más es si estás haciendo una SPA, una aplicación de una sola página y construyendo una aplicación web que hace todas las operaciones CRUD, así que estamos hablando de crear, leer, actualizar y eliminar funcionalidades, pero puedes

Bueno, ahora vamos a votar por el usuario aquí. Tenemos nuestro ID de nuevo, porque necesitamos ese campo ID. Así que voy a hacer esto una cadena. Luego, en realidad, podemos hacer esto un entero. Tenemos un ID de enlace que va a enlazar con nuestro ID aquí en nuestra tabla de enlaces y luego tendremos una dirección, así que un usuario puede votar hacia arriba o hacia abajo. Ahora esto es un poco complicado, estábamos hablando de cómo no queremos contenido duplicado dentro de nuestra database y así que si tenemos varios entradas que dicen arriba, varias entradas que dicen abajo, ese podría ser un lugar donde podríamos introducir un bug fácilmente. Así que vamos a crear, no voy a crear una tabla. Voy a crear un enum para esto. Y lo que esto hace es que nos permite especificar un tipo de, el tipo de información y bloquear eso. Así que vamos a decir que esto podría ser arriba o podría ser abajo. Nota que realmente no necesitamos, no necesitamos un ID para esto porque estamos, estamos forzando esto a ser el valor que el usuario está usando, así que aquí el tipo va a ser dirección de voto bien y luego creo que eso se ve bien, oh necesitamos al usuario, tenemos que asignar al usuario que realmente hizo ese voto, así que eso será un entero. Así que vamos a establecer nuestras relaciones Tenemos nuestro ID de usuario que apunta al ID en la tabla de usuarios. Y tenemos nuestra dirección aquí. Así que esto va a estar relacionado con nuestro enum. Y vamos a conseguir esta flecha. Ahí vamos. Y luego tenemos nuestro ID de enlace. Así que esto va a estar relacionado con nuestra tabla aquí. Voy a... Estas líneas parecen que están empezando a fusionarse un poco. Ahí vamos. Un poco de cruce. Bueno. Ahora para nuestro enlace favorito del usuario, esto va a ser muy similar a nuestro enlace de voto del usuario, excepto que no necesitamos la dirección. Podemos decir simplemente ID tipo de int. Queremos darle a esto un ID de enlace de una cadena y un ID de usuario de un entero. Así que ahora si decimos que esto va a apuntar al ID en nuestro enlace, enlace de la tabla y luego también tenemos nuestro ID de usuario aquí va a apuntar a nuestro ID en nuestra tabla de usuarios eso se ve bien aquí se está poniendo raro bien y ahora tenemos nuestro comentario oh sí eso es una pregunta es esto uno a muchos o muchos a muchos um y así que lo que haremos es que usaremos prisma y hablaré de prisma si no estás familiarizado Pero Prisma es un ORM, que significa Gestor de Relaciones de Objetos. Y eso maneja todas las relaciones dentro de tu database. Y crea casi una capa de API entre tú y tu database. Así que no tienes que hacer llamadas directas a la database. Se encargará de todo eso por ti y se vuelve mucho más fácil de interactuar. Así que Prisma está usando JavaScript. Así que estamos hablando de front-end a back-end. Estamos haciendo todo en JavaScript, lo cual es genial. Solo tienes que conocer un lenguaje. Esto aquí va a, solo mostrando cómo funcionan esas relaciones con todas las tablas. Y así cuando estemos listos para escribir nuestro esquema, y en realidad te daré un adelanto. Esto es en la aplicación terminada cómo se ve esto. Así que vamos a listar todos los campos y sus tipos juntos. Así, y luego ejecutaremos una migración. Así que podemos hablar de todas esas cosas. Así que con los comentarios, hagamos, este es el último que necesitamos. Tenemos un ID y esto va a ser una cadena. Oops, ahí vamos. Y luego el otro campo va a ser un cuerpo, esto es una cadena. Y luego tendremos nuestro ID de enlace, que será una cadena. Así que eso está en esa relación. Tenemos el ID del autor, que es un entero. Luego tendremos el tiempo creado, que es una fecha y hora. Tendremos la actualización en, si tengo la ortografía correcta, que es una fecha y hora. Y luego tendremos, tal vez si hacemos comentarios anidados, podrías tener un comentario anidado. Así que diré ID de comentario padre, así que esto será una cadena. Ahora este es un poco interesante porque cuando empezamos a hablar de relaciones, el ID del padre realmente aparece. Oh hey, fue todo el camino alrededor. Pero estás haciendo referencia al ID en el, como un ID de comentario diferente. Si eso tiene sentido. Así que es como si estuviera apuntando de nuevo a sí mismo. Ahí vamos. Eso se ve mejor. Así que aquí voy a tomar el ID de enlace que apunta a nuestra tabla de enlaces. Y luego tenemos nuestro ID de autor. Y eso va a estar en nuestra tabla de usuarios. Estas líneas se están volviendo un poco retorcidas. OK. Y luego tenemos, creo que eso es todo. Así que esas son todas nuestras relaciones. Ahora, si quieres profundizar un poco más en esto, si miras el leeme que tiene la agenda de esta masterclass, creo que eso está abajo al final. Veamos. Database. Incluí un enlace a un diagrama whimsical terminado. Ahí vamos. Bajo referencia, está el whimsical terminado diagrama. Los errores pueden parecer un poco diferentes porque recreé lo que ya había hecho. Bueno, podemos usar esto como referencia ahora, y luego supongo que para volver a esto, esto es grabado, así que puedes referenciar esto más tarde si te confundes o si te pierdes algo. Estás preguntando sobre el uno a muchos, así que tienes un usuario que podría tener muchos enlaces, y un usuario va a tener muchos votos, y también van a tener muchos comentarios o favoritos y van a tener muchos comentarios. Uno, un comentario solo puede tener un usuario. Un enlace solo puede tener un usuario. Un voto solo puede tener un usuario y un enlace y un favorito solo puede tener un usuario y un enlace. Bueno. Así que vamos a traducir esto en código. Este diagrama es genial, pero en realidad necesitamos que haga algo por nosotros. Así que voy a volver a VS Code donde tenemos nuestro proyecto que empezamos y hemos estado principalmente en nuestra carpeta web aquí pero vamos a nuestra directorio de API así que aquí bajo nuestra carpeta DB hay un esquema.prisma archivo y aún no hemos configurado una database por defecto tienes SQLite podríamos simplemente podríamos probablemente usar eso de la caja así que SQLite solo te da un archivo que puedes usar como database normalmente me inclino hacia Postgres soy un gran fan de Postgres, y cuando hago esto, puedes conseguir que Postgres funcione localmente en tu ordenador y crear una database, o muchas veces recurro a Supabase. Así que puedes usar, Supabase tiene su propia capa de API donde puedes usar sus APIs para hacer llamadas a la database, o puedes simplemente usarlo como una pura database Postgres. Así que si querías usar Postgres, simplemente cambias este proveedor a ser Postgres en lugar de SQLite. Creo, veamos si esto realmente funciona, creo que puedo usar esto como SQLite y todo seguirá funcionando de la caja. Y puedes cambiarlo más tarde. Así que eso es lo bueno de Prisma. Una de las cosas que te da es que va a escribir todas las llamadas a la database por nosotros. Va a construir nuestras tablas por nosotros. Así que no tienes que hacer nada de eso tú mismo. Por defecto, tenemos este modelo de usuario que es un ejemplo. Así que dice, por favor, elimina el siguiente ejemplo.

Entonces podemos seguir adelante y eliminar eso. Voy a colapsar mi barra lateral y subir esto a la mitad de mi pantalla. Y luego sacaré nuestro diagrama whimsical en la otra mitad. Así que ahora podemos traducir esto en llamadas de Prisma. Así que tenemos nuestro ID, que es un entero. Y puedes ver que hay algunas cosas extra que hemos definido aquí. Hemos dicho que este es el campo ID. Así que esto tiene que ser único. Y así es como vamos a identificar a este usuario en particular. Y por defecto, queremos que se auto incremente. Así que no tenemos que preocuparnos por cuál fue la última entrada. Ahora añadimos dos, ahora vamos a añadir tres, se encargará de todo eso por nosotros. Luego tenemos el correo electrónico, así que ya lo hemos configurado como una cadena, y hemos dicho que tiene que ser único, así que no puedes tener un usuario con la misma dirección de correo electrónico y en el guardado. Así que eso es lo que están usando para iniciar sesión. Luego tenemos un nombre, así que podemos dejarlo como nombre o puedes dividir esto en primer nombre y luego decir apellido. hemos creado un apodo. Y así podemos hacer eso una cadena. Y hagamos eso en realidad digamos que es opcional por ahora. Así que si es una propiedad opcional, añades una pregunta al final. Pero quiero asegurarme de que nuestro apodo es único. Bueno, ahora vamos al siguiente. Tenemos Twitter. Y eso es una cadena. Tenemos Facebook. Y eso es una cadena. Tenemos YouTube, y eso es una cadena, tienes LinkedIn, y eso es una cadena. Y luego tenemos GitHub, y eso es una cadena. Ahora, una de las cosas que es genial de Prisma es que tienen un fantástico complemento de VS Code. Así que incluso lo incluí dentro de las notas de la masterclass en el readme si quieres descargar e instalar eso. Y así como empezamos a construir las relaciones, tienen un autocompletado y un intellisense que hace que sea mucho más fácil de crear. Así que aquí, básicamente las tablas y los modelos son sinónimos el uno del otro. Así que vamos a crear un modelo para nuestra tabla de enlaces. Y aquí tenemos un ID con un entero. Tenemos un título, que va a ser una cadena. Queremos que eso sea obligatorio. Tenemos nuestro enlace, que va a ser una cadena. Tenemos nuestro ID de quien lo envió. Ahora es cuando empezamos a entrar en las relaciones. Voy a volver a eso. Tenemos nuestro creado en, que es una fecha y hora y nuestro actualizado en, que es también una fecha y hora. Bueno, dije que volvería a esto. Volvamos a ello ahora. Estamos hablando de esta relación. Tenemos el ID de quien lo envió. Y lo que tenemos que hacer es que tenemos que especificar a qué ID se refiere. Así que si estás familiarizado con el lenguaje de database, eso es una clave foránea. así que lo que queremos hacer es que el id del usuario es un entero pero también necesitamos una forma de enlazar los dos aquí así que yo también voy a decir enviado por y solo para hacerle saber que esto se refiere a la tabla de usuarios voy a establecer una relación aquí déjame hacer esto a pantalla completa para que sea un poco más fácil de leer estamos estableciendo una relación aquí donde el campo al que nos referimos es nuestro ID de quien lo envió y va a hacer referencia al ID. Estamos hablando del usuario. Así que aquí está el ID. A esto es a lo que nos referimos. Así que esta sintaxis puede parecer un poco rara. Esto viene de Prisma y su API. Porque recuerda que estamos trabajando dentro de un archivo schema dot prisma. Así que solo para repasar de nuevo, sentí que fue un poco rápido y quiero asegurarme de que sigues. Creamos este ID de quien lo envió que dice que esto es un entero porque nuestro ID aquí es un entero. A eso es a lo que nos referimos. Y luego tenemos que establecer cómo se ve esa relación. Así que estamos diciendo que enviado por se refiere al tipo de usuario porque tenemos un usuario modelo aquí arriba. Estamos usando estamos creando una relación que se basa en la columna de ID de quien lo envió. Y luego está haciendo referencia al ID aquí arriba. Así que tenemos algunas relaciones más que podemos seguir trabajando. Tenemos varios más relaciones que tenemos que construir. Tenemos nuestro, vamos a sacar esto en un lado. Tenemos nuestro comentario. Vamos a encargarnos de eso. Así que tenemos nuestro modelo de comentario. ahí vamos y tenemos nuestro id que va a ser un tipo de entero es un id queremos decir que por defecto va a auto incrementar tenemos nuestro cuerpo que es una cadena tenemos un id de enlace oh mira lo hizo por mí intentaré ralentizarlo tenemos nuestro cuerpo que es una cadena y luego Y también tenemos nuestro creado en, que es una fecha y hora. Tenemos nuestro actualizado en, que es una fecha y hora. Y luego queremos establecer un enlace aquí para qué comentario es, qué enlace es el comentario asociado con y quién es el autor del comentario. Genial, eso es muy bueno de oír, Priscilla. Así que aquí, vamos a decir que tenemos nuestro ID de enlace y eso es un entero. Y luego ahora tenemos que configurar cómo es esa relación. Así que vamos a decir que tenemos nuestro enlace aquí es un tipo de enlace. Y algo de esto es copiloto, pero algo de esto es también Prisma, como dije, su IntelliSense es realmente genial. Así que esto está configurando la relación. Nos referimos a la columna de ID de enlace aquí y está haciendo referencia al ID en nuestro modelo, nuestro modelo de enlace aquí. Ahora de nuevo, está diciendo que hay un error validando porque tenemos que establecer la relación yendo en la otra dirección. Así que aquí tenemos enlaces para configurar, oh lo siento, comentarios, para configurar en nuestra tabla de enlaces aquí. Está haciendo referencia a un array de comentarios. Va en ambas direcciones. Todavía tenemos, creo que con nuestro comentario, que todavía necesitamos configurar usuarios porque tenemos que tener un autor aquí. Así que podemos decir que el ID del autor es un entero.

Permíteme abrir esto. Y ahora vamos a configurar esa relación así que tenemos el autor que hace referencia al modelo de usuario. Y luego estamos creando una relación donde estamos haciendo referencia al ID del autor en ese campo. Está haciendo referencia al ID en nuestro campo de usuario. Así que de nuevo estamos obteniendo rojo porque necesitamos hacer eso también en la otra dirección.

Así que si bajamos aquí Y decimos que tenemos varios comentarios y eso va a ser un array de comentarios. Bastante genial. Vale. Así que hemos sacado de en medio las tablas fáciles. Estas son un poco más complicadas porque estás estableciendo relaciones entre dos, pero aún así está utilizando el mismo concepto exacto. Y creo que podríamos incluso... Así que si estás mirando el repositorio final, estos nombres se acercan más a lo que utilicé en el repositorio final. Y de nuevo, utilicé link user para mostrar que estas eran las dos tablas que estoy enlazando entre sí. Pero, si quieres hacerlo, creo que en este caso, lo que podríamos hacer es incluso decir modelo favorito, que podría ser más fácil de referir y pensar. Así que tenemos nuestro ID, porque cada tabla necesita un ID. Y vamos a darle un ID. Establecer el valor por defecto para auto incrementar. Luego queremos configurar ese ID de enlace, Que es un entero. Y mientras estamos configurando esa relación diremos que se refiere al modelo de enlace, estamos configurando la relación de modo que está apuntando a eso, disculpa, apuntando a esta columna, y luego está haciendo referencia al ID en nuestra tabla de enlaces. Así que ahora tenemos que hacer que esto vaya en la otra dirección. Así que podemos decir favoritos. Eso va a ser un array de favoritos aquí. Ahora tenemos que configurar esto para el usuario porque tenemos que averiguar qué usuario lo hizo favorito. Así que podemos decir que el ID de usuario es un entero. Y luego el usuario aquí, nos referimos al modelo de usuario en la columna de ID de usuario aquí. Y estamos haciendo referencia al ID en ese modelo de usuario. Ahora si subimos aquí, y decimos favoritos, y eso va a hacer referencia a nuestro modelo favorito. Genial. Vale, así que ahora, creo que este es el último que tenemos es nuestra dirección de voto. Casi lo hemos logrado. Vale, así que si tenemos nuestro modelo y lo llamaremos Voto, configuramos nuestro ID, porque cada tabla necesita un ID. Y luego tenemos nuestro ID de enlace, que es un entero. Y así vamos a hacer referencia a nuestro modelo de enlace aquí. Voy a seguir adelante y subir aquí y configurar nuestro, esto era voto. Así que tenemos votos, que es un array, Y luego necesitamos hacer lo mismo aquí para el usuario para decir qué usuario votó. Así que solo voy a decir que el ID de usuario es un entero. Y vamos a hacer referencia al modelo de usuario, la columna de ID de usuario, y el ID en ese modelo de usuario. Así que ahora si subimos aquí, podemos decir que tenemos votos con un array de voto. Ahora, lo único que tenemos que incluir es ese enum, estábamos hablando de la dirección del voto. Así que esto va a ser algo así como su propio tipo. Lo que podemos decir es que en lugar de modelo, decimos enum y le estoy dando dos opciones para votar hacia arriba o votar hacia abajo. ¿Y qué no le gustó? Ah, vale, esto es interesante. Estoy obteniendo un error porque estoy usando SQLite ahora mismo y SQLite no soporta enums. Así que, los enums son específicamente una cosa de Postgres. Así que, solo por facilidad de uso para hoy, no me voy a preocupar por eso entonces, y simplemente haremos esto una cadena. Podríamos establecer un valor por defecto. Bueno, lo dejaré así. Perfecto. Genial, así que tenemos nuestra estructura de database construida, y eso es realmente todo lo que tienes que hacer cuando estás construyendo tu database. Es solo un archivo de texto que dice cuáles son todas las columnas y cuáles son esas relaciones. Así que ahora tenemos que hacer algo con esto. Así que voy a abrir la terminal. Y voy a cerrar esto porque no estamos usando Storybook o Jess testing ahora mismo. Abriré otro panel. Y vamos a ejecutar una migración. Así que si no estás familiarizado con las migraciones, creo que es más popular en, digamos, con Python si estás usando Django o si estás usando Ruby y Rails. Pero tienen este concepto llamado migraciones. Y la idea es si yo digo que ambos estamos trabajando desde la misma base de datos de Supa y yo voy a Supa base y digo que veo tu pregunta. Volveré a ello. Vas a Supa base y hago ese cambio. Bueno, ambos estamos trabajando en el mismo proyecto que podría potencialmente romper tu código porque estás haciendo un cambio en Supa base. Estoy haciendo un cambio en Supa base. Y así que ahora tenemos un problema. O si tienes Supa base como tu producción database y luego tengo una database local y haces cambios en producción, entonces de repente mi producción database y mi database local están desincronizadas. Así que se vuelve realmente difícil cuando estás trabajando con un equipo de personas o estás haciendo cambios y tienes producción data y datos de staging. Así que lo que hace la migración es que crea un archivo para decir, oye, estos son los cambios que hicimos en la database. Así que de esa manera puedes mantener todo sincronizado. Y si yo hago un commit de código y luego tú tienes tu propio código, puede mirar el archivo de migración y ver qué no se alineó. ¿Cuál es la diferencia y cómo lo arreglo? Así que para crear una migración con Redwood es realmente fácil. Solo puedes decir yarn Redwood migrar DB dev. Y así que ahora cuando presione Enter, lo que hará, veo, usé el comando equivocado. Tenía que decir Prisma, creo. Creo que es Prisma. A ver si eso funciona. Vaya. ¿Qué estoy teniendo un momento de cerebro? Uh, dame solo un segundo. Ese, lo hice bien. Yarn, Redwood, Prisma. Oh, metí DB ahí. Vale. Así que dije que es Yarn, Redwood, Prisma, MigrateDev. Y puede que haya puesto el comando equivocado en las notas. Así que volveré a comprobar. Pero sí, veo lo que hice. Así que lo que está pidiendo ahora es cuál es la migración? Así que solo voy a decir configuración inicial y puedes crear tantas migraciones como quieras. Así que si creas esta migración y te das cuenta, oh hombre, me equivoqué. No deberíamos haber llamado a esta columna así o necesitamos cambiar esto. Eso está totalmente bien. Solo ve y cambia el archivo Prisma, luego vuelve y vuelve a ejecutar la migración. Así que no te preocupes si tienes una migración, no te preocupes si tienes 20 migraciones, no importa.

El punto es que veas esos cambios iterativos. Así que ahora ha creado nuestra database para nosotros. Bastante genial. Así que, como estamos usando Prisma, porque todo eso viene con Redwood, puedes también decir yarn Redwood Prisma Studio. Y presiono enter. Entonces Prisma Studio viene con Redwood y con Prisma. Y ahora puedo ver que estos son todos los modelos que configuramos. Estas son todas nuestras tablas. Así que podría potencialmente entrar. No voy a configurar. Oh, podría configurar un usuario de esta manera. Ahora puedo agregar un registro y puedo simplemente escribir mi código de esta manera para decir Amy en Redwood, JS, Redwood, mi primer nombre Amy, apellido Dutton, y luego guardar cambio. Así que ahora tenemos nuestra database creada y ya he añadido data. Lo siento, Priscilla, te prometí que volvería a tu pregunta. Así que estás diciendo que si el enlace, esta es una gran pregunta. Entonces, si el ID del enlace es un entero, ¿por qué hay un tipo de cadena para, vale, probablemente me equivoqué en eso. Pero hay algunos casos en los que utilicé una cadena para un ID y utilicé un entero para un ID Y puedo hablar de eso en un segundo. Déjame ver, en realidad, creo que habría aclarado El ID del enlace está aquí. Creo que habría lanzado un error si hice el tipo incorrecto Ves el ID del agradecimiento Piensa Entonces todos esos son parece que están configurados tal vez me estoy perdiendo el aire Me equivoqué en Figma. Mis disculpas. Sí, puedo volver y arreglar esa pieza caprichosa y actualizar. Mi genial. Tomando nota. Así que lo empujaré después de la masterclass. Pero puedo hablar de eso. Entonces, por ejemplo, un ID aquí en el usuario es un entero. Eso probablemente habría sido mejor, honestamente, como una cadena. um entonces con un id simplemente va a auto incrementar así que será uno dos tres cuatro cinco subiendo sin embargo mucho que necesites para el comentario aquí estaba probando el comentario el enlace creo que hice eso Lo hice como un id aquí um lo que estaba haciendo en el proyecto en vivo si vas a ver eso es una cadena y si lo haces como una cadena va a generar un uuid único que algunas personas discutirán es um y si haces esto tienes que cambiar esto puedes ver que es creo que eso es espera qué es el oh espera tengo el en lugar de auto incrementar esto es uuid um y lo que esto hace es que crea esta cadena aleatoria de contenido um así que alguien no puede entrar y adivinar así que podría adivinar qué si mi id de usuario es 3, entonces puedo adivinar, oh, tal vez exista un 4. Así que puedo probar el 4. O si soy 3, tal vez el 4 no exista, pero el 5 sí. Así que puedo hackear un poco tu sistema si solo estás usando IDs simples. Pero si estás usando una cadena, es este código generado realmente extraño, lo que hace que sea más difícil de hackear. Entonces, por ejemplo, si yo déjame mostrarte, sé que tengo esto en vivo, que es probablemente por lo que lo viste en Whimsical. Aquí, cuando se cargue todo el contenido, verás que, si hago clic en Google, este ID que se está cargando en la URL, ese es el UUID. No hay forma de que alguien pueda adivinar qué es eso. Así que a veces la gente piensa o considera que es un poco más seguro. Lo que utilicé cuando estaba creando la aplicación fue, bien, ¿este ID va a estar expuesto al usuario de una manera en que podrían adivinarlo? Y si lo era, entonces estaba, si está expuesto, estaba usando una cadena. Si no está expuesto o no importa, estaba usando un entero. Pero quiero decir, puedes elegir. Entonces, si quisiera, porque cambié eso a una cadena, entonces tendría que volver y cambiar este campo aquí para que nuestro ID de enlace esté referenciando una cadena en todos los lugares. No voy a hacer eso ahora mismo. Solo voy a deshacer esto. Pero si lo hiciera, entonces podrías ejecutar una nueva migración y actualizaría tu database para ti. Ahora, podría pedirte que restablezcas tu database porque estás cambiando esa columna de ID, pero podrías ejecutar el comando para restablecer tu database. Pero como dije, Prisma se encarga de todo eso por ti. Bueno, tenemos nuestro esquema. Tenemos nuestra migración. Y en realidad, déjame mostrarte qué es esta migración. Sí, te mostraré qué es el gancho para acceder a esto en el frente. Así que aquí tenemos este archivo de migraciones. Cuando ejecutamos ese código de migración, creó esta carpeta llamada migración, con esta extraña marca de tiempo, y luego tomó el nombre que le dimos configuración inicial y añadió guiones bajos. Y luego creó este archivo migration.sql. Así que cuantas más migraciones tengas, más largo será ese directorio, o más grande será ese directorio. Pero puedes ver que creó todo el código SQL para nuestra database y no tuviste que escribir nada de eso, lo cual es genial. Soy fan. He escrito SQL antes, y no siempre es divertido. Bueno, ahora tenemos nuestras migraciones escritas. Te mostré Prisma Studio donde podríamos añadir contenido a nuestra database aquí. Ahora necesitamos una forma de acceder a ella. Así que Priscilla, estás en línea con la dirección en la que estoy yendo. Creo, déjame ver. Déjame revisar mi agenda y asegurarme de que ustedes están. Entonces, creo que moví esa pestaña. Dame solo un segundo. Agarra, perfecto. Vamos a fijar esto. Vale. Vale. Entonces, creamos nuestra migración. Y luego lo bueno también. Sí, quería hablar de esto. Lo bueno también es que Redwood generará todos los tipos que necesites. Así que si estás usando TypeScript o algo así, entonces lo genera para ti. Y a medida que haces actualizaciones a tu código, a medida que entramos en ello, puedes ejecutar este comando para generar los cambios que haces con los tipos. Pero de nuevo, volveremos a eso. Bueno, hablemos de GraphQL porque estabas preguntando sobre el gancho ¿cómo haces que el front end vea la database? ¿Cómo sacas todo eso? Y así con Redwood, usamos GraphQL. Y si echaste un vistazo a la agenda, hablaremos un poco sobre el futuro de Redwood y los React Server Components. Así que ahora mismo, Redwood está casado. Si estás usando el sitio web y el lado de la API, estás casado con GraphQL. y no necesariamente siempre será así. A medida que avanzamos hacia los React Server components, podrías usar, por ejemplo, la API de Supabase, o si te gusta Zeta, podrías usar la API de Zeta. No necesariamente tienes que usar... O una API completamente diferente. No necesariamente tienes que usar GraphQL, pero ahora mismo estamos usando GraphQL.

Así que aquí, déjame abrir warp. Hemos ejecutado nuestra migración. Tenemos el estudio en funcionamiento. Vamos a revisar nuestro playground. Así que al principio de esta masterclass, cuando ejecuté YarnRedwoodDev, después de instalar todo aquí arriba, ejecutamos YarnRedwoodDev, abrió el front end que vimos en el puerto 8910. Y también abrió si vienes por aquí el puerto 8911. Así que voy a hacer clic en esto, y esto abre el, este es en realidad el lado de la API de nuestra aplicación. Así que si vas a, si tienes Redwood en funcionamiento, y vas al 8911 y abres slash GraphQL, esto abrirá el playground de GraphQL. Así que ahora que tenemos nuestra database en funcionamiento, tenemos una línea de data ingresada como usuario. Ahora podemos jugar con esa data dentro de nuestro playground de GraphQL. Así que lo genial, esto está incluido automáticamente. Puedes hacer clic en esto para ver los documentos y ver que tenemos consultas. Y si vienes por aquí, puedes ver algunas cosas que ya hemos generado. Ahora, puedes ver el usuario actual y Prisma. Estas son solo cosas básicas, pero tenemos que generar el lado GraphQL para que todo aparezca. Así que voy a volver a Warp, y vamos a usar esos generadores de Redwood que estábamos usando antes. Así que aquí, voy a decir Yarn Redwood genera. Puedes hacer Scaffold. Scaffold es interesante porque creará tus archivos GraphQL. Creará páginas para ti. Creará forms y puedes ver todos tus data directamente en el sitio. Así que si solo quieres estilizar cosas como hacer que Redwood las genere y luego simplemente entras y cambias los estilos, Scaffold es genial. Scaffold, en mi opinión, también puede ser un poco abrumador a veces porque crea un montón de archivos para ti. De hecho, vamos a crear uno. Haré Scaffold Link. Te mostraré de qué estoy hablando. Así que hará todas esas cosas. Creo que al final mostrará una advertencia. Sí, hay un error de compilación porque parte del problema es que no puede, no hemos generado todo lo que necesita. Pero puedes ver que generó una celda, de la que hablaremos. Estamos hablando de traer la información. Generó una nueva página de enlace. Generó nuestras pruebas, creó una página de edición, una página de enlace, todas las cosas. Así que tengo curiosidad, déjame ver qué, dejó que hiciera localhost 8910 porque este era nuestro front end sí sí se encontró con un par de errores allí así que como dije normalmente no ejecuto todo eso porque genera un montón de cosas para ti así que si entras en componentes uh eso fue lo que ya creamos veamos las páginas parece que fue solo un error de compilación así que no lo hizo bien genial eso es bueno porque quería hacer esto paso a paso bien entonces voy a decir yarn redwood genera vamos a decir SDL porque eso es lo que estamos generando en el fondo generando un archivo SDL y necesitamos uno para cada uno de nuestros modelos así que hasta donde yo sé tienes que escribir esta línea para cada modelo que tienes así que dice que hay un error y básicamente eso es porque hemos creado relaciones parece que tienes un modelo de enlace en tu esquema de prisma para una relación, pero aún no tenemos un archivo SDL para tu enlace. Así que tenemos que hacer eso para los enlaces. Si ves un error allí, no te preocupes hasta que hayas escrito todo. Así que puedes, debería decirte más o menos lo que tienes que escribir. Podemos, sí, parece que tienes un modelo de comentario en tu esquema de Prisma. Así que aún no tenemos un SDL para nuestro comentario. Así que vamos a escribir eso para nuestro modelo de comentario luego veamos qué más necesita una vez un modelo favorito ups así que ahora lo hará para favorito y luego está diciendo que tenemos votos aún no lo hemos hecho para votar perfecto así que ahora he pasado por todos mis modelos así que verás que no hay errores. Así que si, como dije, si empiezas a ver todas esas cosas cuando estás generando archivos SDL, no te preocupes. Simplemente sigue las flechas, los errores, y te guiará a través de todas las cosas que necesitas. Y verás que mis problemas aquí a la izquierda con mi servidor también se solucionaron. Así que ahora que tenemos esos creados, te mostraré qué archivos se crearon. Todavía estamos en el directorio de la API. Esto está dentro de nuestra fuente. Tenemos un carpeta GraphQL. Y esto creó todos estos archivos SDL. Y si miras esto, esto es muy similar al Prisma, el esquema que vimos. Pero la principal diferencia, señalaré esto es que nuestro archivo schema.prisma, cada vez que teníamos un parámetro opcional, usábamos un signo de interrogación. El GraphQL usa lo contrario. Y así cada vez que es un campo requerido, usa una explicación punto. Así que a veces eso puede ser un poco confuso yendo entre los dos porque están haciendo referencia a lo contrario. Creamos un archivo SDL dentro de nuestra carpeta GraphQL para todos nuestros modelos. Y luego bajo servicios, ahora tenemos una carpeta para cada, básicamente para cada archivo SDL. Así que si abres esto, esto tiene escenarios donde si querías simular data y usar eso para testing, creó un archivo de prueba para nosotros y luego también tienes tus servicios y esto es uh si no estás familiarizado con con uh GraphQL lo que hace es que estableces tus tipos así que estoy diciendo estos son mis tipos para mis usuarios estos son las consultas que quiero ejecutar así que quiero ser capaz de agarrar a todos mis usuarios y quiero ser capaz de agarrar a un usuario individual y luego estas son mis mutaciones eso es para todas las definiciones de usuario. Así que si estás pensando, oh, te saltaste estas, esto es solo una forma de decir cuando creo un usuario, estos son los campos que quiero recoger. Y eso Create User Inputs se pasa aquí para que no tengas que volver a escribir todo esto cada vez, puedes usar un atajo. Así es donde se hace referencia. Así que lo diré de nuevo y lo repasaré un poco más despacio. Pero con GraphQL, estás definiendo los tipos que necesitas. campos que un usuario tendrá. Y tenemos, estos so

Sé que no profundizamos demasiado en Prisma aparte del hecho de que creamos nuestro archivo de esquema.prisma. Pero esta es una llamada de Prisma. Esto es parte de la API de Prisma. Así que si miras su documentación, verás que así es como están creando un usuario. Estás llamando a la base de datos. Estás llamando al usuario, a esa tabla, a ese modelo. Y estás creando un usuario. Y en este objeto de datos, estás pasando todos los datos para crear ese usuario. Y vamos a desglosar esto un poco más si esto es un poco abrumador para mostrarte cómo con ese playground de GraphQL que empezamos a mirar, te ayudará a escribir esas consultas en tu front end. Así que en realidad, vamos a saltar allí ahora. Así que si vengo a Chrome, sacamos nuestro playground. Ahora recuerda, cada vez que ejecutas yarn redwood dev, va a sacar esto. Así que tenemos, tan pronto como ejecutamos yarn redwood dev, tenemos el puerto 8910 que muestra el front end y luego tenemos el puerto 8911 slash GraphQL que muestra nuestro playground de GraphQL. Ahora, si actualizo, notarás que solo tengo información general sobre Redwood. Si actualizo y ahora voy a nuestra carpeta, verás que tengo todos nuestros modelos que creamos aquí a la izquierda, lo cual es realmente útil. Así que digamos que quiero agarrar a todos mis usuarios. Así que voy a expandir esto, y notarás que a medida que hago clic en esto, este código cambia para mí. Así que voy a agarrar el ID. Voy a agarrar el apellido y el nombre, y voy a presionar play. Y verás que agarró todos mis datos. Y lo bueno de GraphQL que realmente aprecio es que ya está en un formato parecido a JSON. Creo que eso es JSON lo que está devolviendo. Así que no tienes que hacer nada para reformatearlo. Se vuelve realmente fácil de trabajar. Lo otro bueno de trabajar con GraphQL sobre decir como una API REST es que puedes especificar qué datos quieres agarrar. No estoy como llamando a una API REST donde me va a dar cada cosa que necesito. Solo tienes que pedir las partes que quieres para ese componente en particular. Así que cuando estoy trabajando en un front end ahora, esta es mi llamada de GraphQL. Que luego puedo copiar y pegar en el front end. Bastante genial. Así que volvamos al front end. Sé que creamos. Veamos preguntas. Así que usas JavaScript en todos los componentes, pero usas GraphQL para la creación de base de datos. Así que estás usando, en realidad, déjame sacar esto. Esto sigue siendo JavaScript aquí. Este es un código de JavaScript de Prisma. Así que incluso puedo configurar cosas aquí. Como digamos que, no sé qué querría hacer aquí, pero podría hacer console.log de cosas. Si haces console.log, eso va a ir al terminal y no al navegador, porque estamos en la API, en el lado de la API. Así que, pero veamos, schema.prisma. Esto es, supongo, sintaxis de Prisma para poder generar el GraphQL para nosotros. El archivo SDL aquí, bueno, este es un, todavía es un archivo de TypeScript, pero puedes ver aquí que está escribiendo GraphQL. Así es como sabes que es GraphQL. Es GQL y esa comilla invertida. Y luego, hasta que he estado hablando por un tiempo, el archivo correspondiente, este es un archivo de JavaScript. Así que puedes ver users.ts Y la llamada de Prisma que estás haciendo aquí es JavaScript. Así que vamos, vamos a conectar algunos de los puntos aquí. Así que nos enfocamos en el front end, construimos un componente. Tenemos nuestros usuarios o nuestro backend aquí. Sé que añadimos datos para un usuario, pero déjame venir y crear dentro de nuestro estudio aquí. Voy a crear un enlace para que podamos usar ese componente de enlace que creamos. Así que voy a añadir un registro aquí. No tengo que añadir auto increment porque se encargará de eso por mí. Y digamos redwood.js, Hetps, redwood.js. Sí, seguro, Mohammed. Así que tengo, este es el repositorio de referencia. Ojalá pudiera como, no sé si hay una manera de anclar eso al chat. Déjame ver, nope. Bueno, seguiré moviéndome. Sí. Así que con Redwood, si es tu, sí, perfecto. Cómo usar Redwood JS y VS Code. Así que VS Code es solo un editor de texto para escribir código. Podrías escribir estándar HTML, CSS. Podrías escribir, podrías usar Sublime o incluso usar text edit para editar tus archivos de texto. Lo bueno de usar VS Code es que tienes el resaltado y con algunas de las extensiones, lo hace un poco más fácil en términos de IntelliSense porque probablemente has visto, como cuando empiezo a escribir, a veces se autocompleta para mí. Y solo para que no me equivoque mientras estoy demostrando, esa es una de las razones por las que he estado, quiero decir, lo uso generalmente cuando estoy escribiendo código, pero también he estado apoyándome en él. Bueno, veamos, vamos a crear en nuestro Chrome aquí. Oh, ¿cómo descargas Redwood? Oh, te entiendo. Así que si descargas VS code, es gratis. Es un producto de Microsoft. Y luego todo lo que tienes que hacer para realmente conseguir que tu proyecto esté en funcionamiento es solo aquí. Puedes ver aquí todos mis proyectos paralelos. Puedo simplemente agarrar la carpeta Redwood aquí en mi icono de VS Code. Déjame ver si incluso, puede que incluso haya una opción dentro de VS Code para decir como abrir, sí, abrir carpeta, para hacer abrir carpeta y simplemente agarras toda esa carpeta Redwood

Genial. Co-pilot. Estás preguntando acerca de los plugins. Co-pilot también es realmente útil, pero tienes que pagar por un co-pilot. Creo que son $10 al mes. Vale, entonces voy a volver y añadir esos data para mi enlace. Así que tengo mi enlace listo. Está enviado por ahora. Esto es lo bueno. Sí, claro. Esto es lo bueno de trabajar con Prisma Studio. En lugar de tener que ir a ver cuál es el ID de ese usuario, puedo simplemente hacer clic en esto, y comprobar que este es este usuario, y ahora está relacionado. No tenemos ningún comentario ni favoritos, así que ahora voy a guardar ese cambio, y solo voy a añadir uno más. Diremos RedwoodJS. De hecho, hagamos React Summit para que parezca completamente diferente. Creo que tengo el enlace. O reacciona a la cumbre. Sí, guardado en mi portapapeles y luego esto es enviado por mí Y automáticamente llena la tripulación. Esa no es la fecha correcta de creación. Eso es interesante Puedes establecer las fechas de creación y actualización por defecto. No creo que lo hiciera parece que se estableció en 1970, bien, así que vamos a venir y voy a actualizar mi consulta aquí para que esté sacando enlaces Así que podrías simplemente agarrarlo por un enlace específico si conocías el ID real. Voy a hacerlo de esta manera. OK, así que aquí están todos los enlaces que tengo en mi database. Ahora, voy a volver a Yes Code donde tengo mi front end aquí. Tengo mi componente de enlace compartido. Y voy a ejecutar un nuevo comando en la terminal. Y este lo voy a llamar. No tenemos ninguna página. Me doy cuenta de que no tenemos ninguna página en nuestra aplicación. Así que vamos a crear una página primero. Así que podemos generar eso y decir yarn redwood genera una página. Lo siento. Sí. Generar página y la llamaré página de enlaces.

Vale. Así que tienes una pregunta. Si los usuarios desactivan sus cuentas, ¿también se reflejaría en la database? Tendrías que escribir código para eliminar al usuario. Y lo haré, en realidad no sé si tendremos tiempo para llegar a esto porque intenté sobrecargar. Preferiría tener más contenido que muy poco contenido. Pero si vas a redwoodjs.com slash docs y buscas authentication, si tenemos tiempo, hablaré de esto. Pero hay una sección aquí bajo auto-alojado. Y lo que esto hace es que puedes ejecutar este comando de generación y configurará todas tus páginas de inicio de sesión para ti. Configurará tus páginas de restablecimiento de contraseña para ti. Configurará tus páginas de registro para ti. y luego maneja la mayoría de esas cosas para ti. Así que, genial. Así que déjame volver. Tenemos nuestros enlaces. Generamos nuestra página. Así que cuando genera la página, no hemos hablado de esto. Es muy similar a generar un componente. Dentro de mi directorio web, tengo una carpeta de páginas. Y sí, Priscilla, gracias. Soy un fan. Así que en las páginas, tenemos una página de enlaces ahora con algún contenido ficticio. Y si vamos al front end, así que si miro el local host 8910, dice, hey, aquí está una lista de páginas que has creado. Podemos hacer clic en la página de enlaces y ahí está el componente. Ahora, mencioné antes que Redwood tiene un archivo de rutas. Déjame sacarlo. cuando ejecuté ese comando de generación, creó básicamente un componente de ruta diciendo cuál es el camino. Así que puedes llegar a eso diciendo slash links. Y luego está diciendo qué componente deberíamos referenciar? Así que estoy referenciando el componente de la página de enlaces. Voy a llamar a esta ruta enlaces. Y eso es útil para cuando estás intentando enlazar páginas juntas. Así que por ejemplo, si vuelvo al terminal, vamos a generar otra página, excepto que esta vez, tal vez llamo a esta página, mi último feed. Lo haremos de esa manera. Perfecto. Así que ahora cuando vuelvo a VS Code, tengo una carpeta de página más reciente con mi página más reciente que creamos. Y luego dentro de mi enrutador, tengo lo último y los enlaces. Así que la parte genial es lo que puedo hacer es que puedo enlazar los dos juntos. Así que digamos que en la página más reciente, quiero crear un enlace aquí a esa página de enlaces. Bueno, tengo un componente de enlace dentro de Redwood. Puedo sacar eso y luego puedes usar para y luego le pasas rutas y luego el nombre. Así que si miro eso y dice enlaces, verás que esto está pasando aquí. Va a enlaces y el enlace se va a llamar enlaces. Estoy llamando a esta función llamada rutas para configurar ese enlace. Creo que es solo un componente. Así que ahora si vuelvo a mi página aquí y estamos mirando nuestra página más reciente así que déjame ir a mi enlace de página más reciente y quiero ir a la página de enlaces puedo hacer clic ahora esto es donde la ruta archivo es muy útil um digamos que quiero cambiar la ruta en esto quiero que la página de enlaces sea mi casa página bien así que ahora cuando golpeo guardar si voy a donde tenía mi esto era localhost c 8910 esto es el página de inicio, no tuve que hacer nada. No está cargando la página de inicio más porque tengo una página de inicio. Y no tuve que cambiar mi página más reciente, no tuve que cambiar este enlace porque ahora está usando un enlace nombrado y actualizará los enlaces automáticamente. Lo cual es realmente agradable si empiezas a intentar cambiar la estructura de la URL, mover cosas alrededor, no estás teniendo que mover archivos y carpetas alrededor. Tu enrutador está manejando todo eso por ti. Así que ahora que tengo un lugar para que esos enlaces vivan, Necesitamos obtener ese contenido. Necesitamos obtener ese contenido de GraphQL en esa página. Bueno, Redwood tiene un concepto llamado, Volveré a tu pregunta, Priscilla. Redwood tiene un concepto llamado celdas. Así que voy a generar una celda, maldita Redwood genera celda y la llamaré enlaces. Así que notarás que cuando generas páginas, Redwood añade página. Bueno, ahora que generé una celda, añadió celda al final.

Entonces puedes, esto es útil si tienes una página de enlaces, digamos un diseño de Lynx, una celda de Lynx, un componente de Lynx. De esa manera, no van a entrar en conflicto entre sí. Entonces, si miras la celda que creó, tiene varios estados diferentes. Y así, cada vez que tienes que tomar data de, digamos, una database o alguna otra fuente y llevar eso a, digamos, un componente de React, tienes que tener en cuenta cuál es el estado de esa cosa. ¿Está cargando? ¿Estoy mostrando un spinner? ¿Está vacío? ¿No hubo resultados? ¿Hubo un fallo como si hubiera un problema o hubo un estado de éxito, así que tienes que crear condicionales para todas esas cosas y verificar cuál es el estado actual, bueno, eso es mucho código que tienes que escribir, especialmente si estás trabajando con varios componentes, tienes que escribir esas cosas varias veces, así que lo bueno de una celda de redwood y de nuevo esto es algo único para redwood es que puedes crear la celda y la celda entregará lo que necesita en ese momento. Entonces, por ejemplo, sabe si está cargando, así que va a mostrar la carga. Puede saber si está vacío. Así que no tengo que hacer eso. Se encarga de todo eso por mí. Entonces, lo que pasa con una celda es que una celda tiene que hacer cuando estás tratando de consultar data, cuando estoy tratando de tomar data de la database. Así que va a manejar todos esos estados. Bueno, hey, mira eso. Hay algo de GraphQL aquí arriba porque tenemos este comando de GraphQL. Entonces, ¿qué pasa si tomamos nuestro GraphQL de nuestro Playground. Voy a volver aquí y simplemente voy a copiar esta consulta y voy a volver a VS code y voy a pegar esto. Ahora voy a usar su nombre, Query, aquí. Y parece que, creo que está bien, sí. No cambies el nombre Query porque eso es importante para la celda. Esa es parte de cómo funciona el cableado, pero la consulta aquí le da el nombre que estamos llamando. Y estoy diciendo, hey, toma todos los enlaces para mí. Entonces, y puedes ver, mira, dentro de nuestro componente de éxito, va a sacar los enlaces, porque estamos llamando a los enlaces aquí. Va a sacar todos los enlaces y pasarlos a nuestro componente de éxito. Y luego va a, este es el código de plantilla, podemos cambiar esto para ser cualquier componente que queramos. Pero va a mapear todo eso. Entonces, voy a darle a guardar. Ahora vamos a nuestro front end. Oh, necesito poner este componente en la página. Entonces, vamos a pegar esto en nuestra página de enlaces aquí. Simplemente voy a cambiar todo esto y voy a poner en mi celda de enlaces. Y aquí en la parte superior, necesito importar esa celda de enlaces desde los componentes de origen de la celda de enlaces. Y luego puedo deshacerme de esto porque ya no lo tengo. Bueno, ahora si estoy mirando en el front end, ahí vamos. esta es nuestra página de inicio, y estos son nuestros data que estamos obteniendo de GraphQL de nuestra capa API. Algo genial. Entonces hagamos esto. Vamos a saltar a, de vuelta a VS Code dentro de nuestra celda de enlaces aquí. Lo que podríamos hacer es que podríamos decir, en lugar de devolver un elemento de lista, en realidad quiere que empuje a tirar en eso es un componente de enlace compartido que creamos antes Y porque esto es TypeScript, puedo presionar el comando punto y hacer clic en agregar faltante atributos y llenará todas las propiedades que necesita. Así que necesita puntos. No sacamos nuestros puntos así que podríamos añadir eso aquí arriba. La información del autor veamos, déjame actualizar esta consulta para ser exactamente lo que necesitamos que sea. Eso probablemente sería lo más fácil. Así que también queremos sacar en enviado por así que notarás que crea esa relación para nosotros. Cuando obtengo el ID del usuario, su primer nombre, Apellido. Veamos qué más necesitamos. Queremos, no me voy a preocupar por el recuento de comentarios ahora mismo. Título, veamos, eso está aquí abajo y luego tenemos nuestro enlace. Creo que eso es todo. Bueno, genial. Entonces, voy a agarrar este código que generó para nosotros y puedes incluso probar eso si quieres solo para asegurarte de que está funcionando. Entonces, sé que para mí eso es realmente útil a veces cuando estoy como, ¿por qué esta consulta no está funcionando? Puedes probar solo la consulta en la parte de atrás para ver si está funcionando. Así que puedes saber, bien, ¿esto es un desglose en el lado de la API o el frente lado final? Así que voy a volver a VS Code y vamos a actualizar estos enlaces aquí para que estemos agarrando todas las cosas y pasando en enlaces, enlaces item. Aquí podemos decir item.submitted por dot first name ahora notarás que está diciendo hey este tipo no existe y así es uno de las cosas que dice que necesita una propiedad clave para esto es uno de los lugares donde es útil con redwood es que puedes generar los tipos si sí no se actualiza automáticamente así que si vuelvo a el terminal y digo yarn redwood genera tipos va a generar automáticamente los tipos ahora basado en los cambios que he hecho aquí arriba. Así que los tipos que devuelve serán correctos. Aquí vamos. Es posible que tengas que reiniciar tu, o reiniciar, lo siento, tu servidor de TypeScript. Déjame asegurarme de que lo hice bien. Dame solo un segundo. Quería revisar el playground. Puede que no lo haya hecho bien. Vale. Enlaces enviados por nombre, apellido. enlaces item enviado por ahí vamos estaba perdiendo un artículo de capital que es enviado por apellido pero ahora estoy obteniendo la intellisense porque generó esos tipos así que puedes decir item.title y item.link así que ahora si vuelvo al front end mira eso ahí están los componentes que creamos al principio y está sacando eso información dinámicamente de la database. Bastante genial. Priscila, preguntaste sobre el CSS cosas que pusimos o puse tailwind en esto proyecto, para mí, esa es una de las formas más fáciles de empezar con él. Pero cuando generas un nuevo proyecto, tienes un index.css archivo aquí mismo que puedes agregar código a. Así que si tú haces esto, y estás familiarizado con el tipo, lo siento, con tailwind, puedes agregar tus capas aquí para en capa base, en capa componentes y en capa utilidades, que es donde iría eso. Vale. Perfecto. Creo que lo otro que quería tocar realment

Aquí, necesito mi enlace, mi título. Voy a codificar esto por ahora ya que no tenemos autenticación funcionando, pero creo que eso es todo lo que necesitamos, enviado por ID. Vale, aquí está mi formulario. Solo necesita un botón de enviar. Digamos guardar. Vale, así que si queremos comprobar esto en el front end, voy a venir aquí, tengo este campo de formulario aquí, y luego aquí está mi consulta. Y entonces, si queremos añadir data, un formulario tiene una función aquí llamada onSubmit. Y quiero ejecutar una función llamada handleSubmit que se ejecutará cuando se envíe ese formulario. Así que esto es solo código regular de React. Vaya, metí eso. Y voy a, lo que automáticamente se pasa es un objeto de data. entonces echemos un vistazo a los data que estoy recibiendo así que ahora echemos un vistazo a esto vamos a enviar un enlace voy a decir google oh lo hice al revés htps google.com y voy a guardar ese título así que ahora puedes ver aquí están mis data hacer esto más grande puedes ver que ese objeto de data que está llegando a ese formulario de envío tiene mi enlace y la razón por la que se llama enlace es porque le di a ese campo un nombre de enlace. Y luego tengo mi título, que tiene un nombre de Google. Así que ahora puedo hacer algo. Queremos mutar los data y enviarlos a la database. Así que empecemos con nuestro playground porque creo que probablemente es la forma más fácil de escribir consultas y mutaciones de GraphQL. Así que aquí está una consulta. Vamos a colapsar esto. Vamos a añadir una mutación. Y quiero crear un enlace. Así que voy a rellenar esto aquí abajo para que puedas tener una idea de cómo funciona esto. Pero digamos que tenemos nuestro redwoodjs.com, el enviado por ID, solo voy a decir uno por ahora. El título, esto puede ser RedwoodJS. Y luego no necesitamos incluir actualizado en. Así que ahora, y esto sigue siendo rojo porque tienes que devolver algo. Así que estamos introduciendo esto, pero tienes que devolver algo para asegurarte de que está funcionando. Así que a veces si realmente no necesito mucho, solo añadiré el ID. Pero en este caso, Así que solo añadamos el título y el enlace. Parece que tengo un error de tipeo ahí. Así que en ese caso, arreglaría mi archivo Prisma.schema y luego ejecutaría la migración de nuevo. Así que está diciendo, oh, sí quiere actualizarlo, que está mal escrito. Creo que tengo un, es un extraño, disparar, ¿cuál es el nombre? Es un formato específico. Ah, ahí está. Perfecto. Lo tenía guardado en mi portapapeles en algún lugar. Vale, así que si le doy al play, me va a preguntar, ¿quieres ejecutar tu consulta Redwood o quieres ejecutar mi mutación quiero ejecutar mi mutación así que cuando hago esto vale algo fue mal ¿qué salió mal? así que puedes leer aquí y ver que podría no haberle gustado ese tiempo de fecha um te diré qué hagamos esto si el tiempo de la fecha es el problema um voy a volver sobre mi archivo prisma.schema y con nuestro enlace aquí sí parece que muchos de los sí Todos estos campos son obligatorios. Así que, hagamos esto fácil. Y podemos hacerlos opcionales. En realidad, no creo que eso sea bueno. Así que, ahora déjame ver si ejecuto R y Redwood. Prisma mi gran dev. Hizo campos opcionales. ahora mi database debería haber arreglado ese texto sí lo dejaré por ahora vale um así que ahora si volvemos vamos a ver si esto va a oh así que esto es interesante me alegro de que hayamos llegado a esto uh ahora mi uh veamos esos son mis enlaces ahora mis archivos.sdl y mis servicios están desincronizados porque actualicé eso. Pero ya he generado este archivo. Así que hay dos formas de manejar esto. Porque no hemos personalizado este archivo en absoluto, podría simplemente eliminar esto. O puedes hacer las actualizaciones manualmente si has hecho personalizaciones. Así que voy a eliminar nuestros servicios y nuestro archivo STL. Y voy a volver aquí y decir Yarn Redwood genera STL link. Y eso regenerará ese archivo para nosotros. Así que ahora todo está sincronizado con la database. Vale, así que déjame volver a Chrome. Tenemos nuestro playground. Le damos a refrescar. Veamos. Perfecto. Así que ahora nuestra mutación está funcionando. Así que es solo cuestión de un campo opcional o requerido. Ahora, a veces cuando estás haciendo esto, puedes obtener un, no tienes acceso a esto. Y si te encuentras con ese problema, si miras dentro de tu, sí, tu archivo SDL, hay estas directivas que son, digamos, require auth en todo, lo cual es realmente útil si tienes authentication y estás conectado y no quieres que el usuario, como cualquiera, simplemente pueda acceder a esos data. Así que muchas veces cuando estoy en la etapa de desarrollo, si estoy escribiendo, construyendo una aplicación, cambiaré todos esos a skip auth. Y luego al final, después de haber añadido la authentication y tener todo configurado, volveré a añadir require us. Vale, así que voy a conectar esto a mi, mi formulario. Así que voy a copiar esta mi mutación, Voy a volver a VS Code. Y tenemos nuestra página de enlaces donde tenemos nuestro formulario que hemos creado. Sí, sí, Priscila, es mucho más fácil. Vale, así que tengo mi formulario donde tenemos nuestro handle submits y aquí tenemos nuestra función de envío donde estamos obteniendo todos esos data. Lo hemos visto. Así que ahora tenemos que incluir nuestra mutación. Así que voy a decir cont y normalmente cuando estoy escribiendo estas mutaciones, usaré todo en mayúsculas. Así que diré como añadir enlace y luego normalmente adjunto en mutación solo para que sepa que es una mutación. Y esto es útil a veces cuando tienes que importar y exportar consultas y mutaciones a diferentes archivos. pero algo de eso es solo una preferencia personal definitivamente no es obligatorio así que ahora puedo pasar esto y quiero que el nombre de mi mutación aquí coincida con el nombre aquí que estoy usando así que estoy creando un enlace aquí y esa es la mutación volveré y hablaré sobre cómo hacerlo dinámico. Así que ahora Redwood también usa Apollo. Y todo lo que hace Apollo es que te da un bonito gancho llamado use query, que normalmente no tienes que usar porque tenemos nuestras celdas. Pero tenemos también otro llamado use mutation que queremos usar aquí porque estamos usando mutación. Así que esto es quizás la única parte complicada de trabajar con GraphQL y Redwood es que hay un par de pasos diferentes que tienes que hacer. Así que hemos escrito nuestra mutación. Tenemos eso. Estamos bien

O si hay un error en error, entonces quiero que console.error muestre mi error para que pueda verlo en la consola. La única razón por la que estoy obteniendo rojo ahora es porque he creado estas cosas, pero no las he usado. Y solo como un rápido repaso, create es la función que es cómo vamos a crear esa cosa. Y está volviendo de use mutation. Este es el nombre de la mutación que creamos aquí arriba, y luego estamos obteniendo un objeto de carga y un objeto de error, y luego podemos pasar esto a través del segundo parámetro o algo que queremos que suceda al completarse o en caso de error. Entonces ahora digamos en nuestro handle, veamos, nuestra función de envío aquí, queremos crear, porque vamos a usar esa función y vamos a pasar las variables que obtuvimos de nuestros data. Ahora, en este momento no es dinámico. Recuerda, estamos codificando todos estos. Entonces, en realidad, tengo curiosidad si simplemente ejecutamos esto. Creo que esto debería funcionar donde simplemente va a crear ese enlace para nosotros. Así que ya tenemos un enlace Redwood. No importa lo que estamos añadiendo ahora mismo porque hemos codificado esos valores. Pero si hago clic en enviar, dice, gracias por tu envío. Genial. Y si hacemos clic en actualizar, ahí está nuestro enlace Redwood.js que codificamos. Así que hagamos esto dinámico. Para pasar variables aquí, voy a añadir algunos paréntesis aquí, un poco como una función. Y quiero pasar un título. Así que notarás que estoy usando un signo de dólar. Oh, mi cámara se apagó. Espera solo un segundo. Vale, se agotó el tiempo o se sobrecalentó. Déjame hacer esto. Vale, voy a cambiar de cámara. No será de tan buena calidad, pero perfecto. Vale, así que no estábamos perdiendo el tiempo. Así que aquí tiene que tener un signo de dólar al frente. Y voy a decir que esto es una cadena y es requerido. Así que notarás que esto se parece un poco al código con el que hemos estado trabajando. Vamos a pasar un enlace y eso es una cadena y eso debería ser requerido. Y luego también quiero pasar un submitted by ID. Y eso va a ser un entero. Recuerda, necesitamos ese signo de dólar al frente. Y luego tenemos, no me voy a preocupar por updated. Lo mantendré codificado. Así que ahora está diciendo, OK, esto es genial, pero no lo estás usando. Así que vamos a establecer el título a título. Vamos a establecer el enlace a enlace. Vamos a establecer submitted by ID a submitted by ID. Así que ahora si hago clic en guardar, estas son nuestras variables que vamos a pasar aquí abajo. Así que estamos diciendo crear, usar estas variables, y queremos pasar nuestro título, así que eso va a ser data.title. estamos pasando oh no date data ahí vamos queremos pasar nuestro data.link y luego queremos pasar nuestra fecha y luego si tuvieras un id simplemente voy a codificar esto ahora mismo vale digamos oh necesitamos nuestras comas porque esto es un objeto así que ahora volvamos a chrome y voy a decir google oh tengo estos al revés hdps google.com estamos pasando google ahora cuando yo haga clic en guardar gracias por tu envío si hago clic en actualizar ahí está google bastante genial ahora um una cosa que quiero mostrarte es que te estás dando cuenta de que probablemente tuve que hacer clic en actualizar después de que fue enviado eso no es ideal quieres que aparezca automáticamente así que la forma en que puedes trabajar alrededor de eso es que estamos pasando variables aquí podríamos decir aquí uncompleted o no, lo siento, esto es otra cosa. Decimos en ¿qué es? No, eso no es. Dame solo un segundo. Añade momentos. Oh sí. Oh, está aquí. Así que después de ejecutar nuestra mutación así que tenemos nuestra mutación aquí. Configuramos nuestro create. Oh, esa es nuestra función Vale, vale, vale. Aquí abajo tenemos uncompleted, onError. Digamos que después de que se ejecute eso, después de que se ejecute nuestra mutación, queremos que vuelva a buscar nuestras consultas y queremos pasar, digamos esa consulta de enlaces que estábamos haciendo. Bueno, ahora tenemos que importar eso. Así que si subimos a la parte superior y esa consulta de enlaces está en nuestra celda de enlace, pero no se llama consulta de enlaces, se llama consulta. Así que vamos a tener que importar la consulta Así que, voy a usar consulta de enlaces, porque acabo de inventar el nombre de consulta de enlaces. Realmente se llama consulta, pero lo voy a referenciar como consulta de enlaces, desde, y va a venir de nuestras celdas. Así que ahora si vuelvo a nuestro proyecto aquí, digamos Apple. Ah, lo hago al revés cada vez. Apple.com, y vamos a poner en un título de Apple, ahora cuando hagamos clic en guardar, vale, obtenemos la alerta. Pero luego debería, veamos, debería haberse actualizado, ahí está Apple. Veamos, creo. Eso puede haberse detenido para, déjame ver si quito esto. Asegúrate de que esto esté funcionando bien. ¿Qué es otro? React.dev. Haz clic en guardar. Debería actualizar. Parece que va, ahí va, dos veces. Genial. Te darás cuenta de que fue dos veces cuando hice clic en él porque estaba como, oh, esto no está funcionando. Y hice clic dos veces. Así que recuerda, obtenemos este estado de carga y este estado de error de nuestra mutación. Así que una cosa que podemos hacer es que podemos bajar y aquí en nuestro formulario, este es un pequeño truco que me gusta usar. Si envuelvo todo el contenido de mi formulario con un field set, puedo decir de una sola vez que si la carga es verdadera, deshabilita el formulario. Así que ahora si está atascado en ese estado intermedio aquí, va a deshabilitar ese formulario hasta que haya podido resolver. Así que no puedes tener una situación en la que alguien está como clic, clic, clic, clic. ¿Por qué esto no está funcionando? Genial. Así que cubrimos un montón de terreno con en esta masterclass. Así que hablamos de. Sí. Así que Redwood es esto. Lo que puedes pensar, preguntaste si Redwood es lo mismo que React. Redwood es un marco de trabajo de React. Eso significa que estás escribiendo todo este código de React aquí. Estos son aquí abajo. Estos son React components que estamos creando. Todo esto es React. Pero lo ha agrupado en un marco de trabajo.

Por lo tanto, te proporciona esos generadores. Te proporciona esa herramienta de línea de comandos. Te proporciona un front-end y un back-end. Así que estás trabajando con GraphQL. Tienes las pruebas. Tienes Storybook todo incluido, lo cual es bastante genial. um so it yeah it wraps all that stuff i would say the things that make redwood redwood que lo diferencian de otros marcos de trabajo es este concepto de celda, el hecho de que te lo proporciona de serie y luego cómo maneja el enrutamiento, así que mucho de lo que hace que un marco de trabajo sea un marco de trabajo es que maneja el enrutamiento y las urls y la redirección de páginas y todo eso. Entonces, um, veamos, estamos muy cerca del tiempo. Um, hay un par de cosas que quiero señalar. Así que si te gusta todo esto, uh, y quieres más, estoy dirigiendo el advent of JS y el advent of CSS el próximo mes. Y puedes, Redwood está patrocinando este proyecto. Y estaremos trabajando en una aplicación de Redwood. Así que sé que nos movimos rápido en tres horas. Si quieres moverte un poco más despacio y centrarte en componente por componente y obtener algo más de experiencia práctica, este es un buen lugar para empezar. Y lo bueno es que es gratis. Así que puedes echarle un vistazo. Y si no tienes tiempo durante diciembre, está bien. Tendrás acceso de por vida y puedes volver cuando tengas tiempo. La otra cosa que quiero señalar es que Tom y David son dos de los cofundadores de Redwood. y Tom dio una conferencia magistral en la conferencia de Redwood JS. Incluimos su conferencia magistral aquí que tiene mucha información sobre el futuro de Redwood. Algunas de las características geniales que están añadiendo y tiene información sobre los Componentes del Servidor React. También puedes unirte a nuestro boletín de noticias aquí e incluiré un enlace a esto. En realidad, está en el repositorio, pero lo pondré en el chat. Veamos, redwoodjs.com slash React Summit. pero estos también están en ese repositorio si bajas hasta el final hay redwood.js en react summit así que esa es esa página que acabo de abrir que tiene algo del futuro de redwood pero entonces yo también tengo el advent of js y el advent of css pero puedes unirte a nuestro boletín de noticias así que um ya sabes a veces pienso oh hombre recibo tantos boletines de noticias pero el boletín de noticias es útil incluimos información de lanzamiento así que a medida que hacemos actualizaciones a redwood decimos hey esto es lo que hemos actualizado solo para que estés informado a menudo. Intentamos ser muy conscientes de cualquier cambio que hagamos. Y luego, sí, gracias por incluir ese repositorio de nuevo. Y luego, eso es hoy, ahí es donde están ustedes, felicitaciones. Y luego tenemos este proyecto aquí, el Redwood JS en tiempo real muestra cómo estamos usando GraphQL de algunas maneras que son realmente interesantes que no cubrimos hoy. Así que por ejemplo, hemos creado proyectos de demostración Estamos trabajando con un chat. Estamos haciendo una subasta. Un temporizador de cuenta atrás. Tenemos IA involucrada. Lo cual es realmente interesante. Tenemos la aplicación de insignias que mencioné antes. Y luego está la pieza de los Componentes del Servidor React. Así que algunas de las demostraciones que estamos creando alrededor de los Componentes del Servidor React. Así que si quieres involucrarte. Y luego hay más información. Genial. Muchas gracias por ser parte de la masterclass. Diré que sé que estamos en tiempo. Así que si quieres salir, está totalmente bien. Pero también reconozco que no tuve la oportunidad de cubrir los Componentes del Servidor React y el futuro de Redwood y hacia dónde vamos con él. Así que me tomaré unos minutos y cubriré algunas de esas demostraciones. De nuevo, si estás apurado, todo esto está cubierto en la conferencia magistral. Así que no te vas a perder ninguna información. Y puedes ver lo que Tom ha estado haciendo allí. Pero quería cubrir los Componentes del Servidor React porque siento que se mencionó en la descripción de la masterclass. Quiero asegurarme de que realmente entrego esa parte de la descripción. Así que de todos modos, mostraré algunas demostraciones. Jasmine, no sé cuándo Get Nation hará disponible la grabación. Supongo que recibirías un correo electrónico, pero no estoy seguro. Sé que si vas a YouTube, RedwoodJS en YouTube, si vas a YouTube, si vas a RedwoodJS en YouTube, estoy seguro de que enlazaremos a él o podrás encontrarlo allí en YouTube cuando lo hagamos disponible. Así que, bien, seguiré. Pero de nuevo, mis sentimientos no se verán afectados si te vas. Así que los Componentes del Servidor React, más o menos donde estamos. Ahora mismo, Next es el único marco de trabajo que está implementando los Componentos del Servidor React. Y sé que algunas personas se han quejado un poco porque es como, oh, hombre, ¿por qué Next recibe ese tipo de favoritismo? Pero el equipo de Vercel, que realmente patrocina el proyecto Next, paga a alguien para que se siente en el equipo de React y ayude a desarrollar y trabajar estrechamente con ellos. Así que como Redwood está yendo all in en los Componentes del Servidor React, estamos apuntando a ser el segundo marco de trabajo en implementar los Componentos del Servidor React. Tenemos un canal directo y una línea abierta al equipo de React. Así que estamos hablando con ellos casi a diario sobre los Componentes del Servidor React y las cosas que estamos construyendo para asegurarnos de que está en línea con la dirección que están tomando React. Porque, ya sabes, hablamos de cómo Redwood es un marco de trabajo de React. Así que hemos estado implementando eso con el servidor. Y lo que eso significa es que podrás hacer llamadas en el sitio web a una API y usar cosas distintas de GraphQL, si eso es lo tuyo. Así que, seguiré. Y Priscilla, mencionaste CSS. Así que tienes esa pieza de CSS en tu carpeta web. Así que tienes esto aquí. Yo, como dije, instalé Tailwind porque eso fue inmediato, pero no tienes, si no tienes Tailwind, este archivo todavía funciona. Es solo un archivo CSS regular. Y puedes escribir CSS como parte de tu JSX si eso es lo tuyo dentro de un componente. Así que tienes la pieza de CSS. Y si quieres ver el repositorio terminado, también está incluido, puedes ver cómo he escrito todos los estilos para el repositorio final. Genial. Así que lo que haré es que voy a salir de esto. Voy a mostrarte algunas de las demostraciones que tenemos para los Componentes del Servidor React. Solo un segundo. Vale. Así que incluiré un enlace a este repositorio en el chat. Así que, este es un ejemplo realmente simple. Pero lo que está haciendo es que está tomando los Componentes del Servidor React y creando un contador de cliente. Así que, voy a, veamos si puedo simplemente abrir esto en Gitpod porque sería más fácil. Si no, tengo esto funcionando localmente, que podría ser más rápido. veremos vale lo cronometraré ambos iremos a por ello asegúrate de que esto no esté funcionando en otro proyecto oh genial parece que vamos a llegar más o menos al mismo tiempo

Así que aquí en el código, tenemos un contador. y notarás que tenemos un uso del cliente. Así que la diferencia con los React componentes del servidor es que puedes ejecutar React en el cliente y luego también puedes ejecutar React en el cliente y React en el servidor. Así que si está en el cliente, eso significa que React se está ejecutando dentro del navegador. Y si se está ejecutando dentro del navegador, tenemos este uso del cliente en la parte superior para decir, oye, ejecuta esto solo en el navegador. Y las veces que querrías ejecutarlo en un navegador es como si estuvieras gestionando el estado. Así que, por ejemplo, si tienes una navegación, estás activando y desactivando, si estás usando ese useStateHook, querrías que estuviera en el navegador para que pueda gestionar esa pieza de estado. Y luego si venimos a la aplicación, puedes ver que aquí tenemos un componente de contador. Tenemos, primero, tenemos un componente del servidor y luego dentro tenemos un componente de contador. Así que es importante que este componente aquí se renderice en el servidor. Así que tal vez te estés preguntando, ¿cuándo querría usar un componente del servidor versus cuándo querría usar un componente del cliente? Bueno, si puedes pasar parte de ese trabajo pesado al servidor para que esté obteniendo los data para ti y luego entregando HTML y CSS al navegador, podría ser un poco más rápido. La otra cosa que es una gran ventaja es que tienes acceso a las etiquetas de gráficos abiertos, etiquetas meta como Google puede realmente pasar por tu aplicación y ver cuál es todo el contenido que hay, porque muchas veces no sabe necesariamente qué hacer con JavaScript. Ahora, si estás haciendo como una aplicación web que está protegida por un inicio de sesión, no necesitas Google y no quieres que Google pase por y lea todo tu contenido. Así que realmente depende de tu caso de uso. Así que, por ejemplo, mencioné la aplicación de insignias antes. Estamos usando la renderización del lado del servidor allí porque queríamos información de gráficos abiertos a medida que la gente comparte enlaces a la aplicación. Así que voy a volver. Veamos, voy a venir a Chrome aquí. A ver si esto está funcionando en nuestro puerto. Perfecto, Gitpod al rescate. Así que aquí está el React servidor, este es un componente del servidor y luego dentro tenemos un componente del cliente. Así que este estado para este contador se está manejando a través del cliente, pero este código aquí se está gestionando en el servicio. Creo que si vienes a ver la fuente de la página, en realidad no está allí porque eso es una cosa diferente. Pero de todos modos puedes entrar y ver que ese código se está pasando al, desde el servidor, vale. Así que voy a cerrar este. Vamos a ver el siguiente que tengo. Así que en esta demostración, esto es crear usando un Redwood para crear un react componente del servidor. Y aquí tenemos una mutación del servidor. Así que estamos mutando los data que están en el servidor con nuestro código. Así que si tiro de esto, veremos el repositorio de nuevo. Y luego tengo creo que esto está en el sitio web. Así que aquí, esto es un componente del servidor. Puedes ver que hay un componente del servidor. Tenemos un contador del servidor. Así que este contador en particular está sentado en el servidor. Y luego tenemos la acción del servidor que está sucediendo. Gracias, Xavier. Así que, puedes ver que esto todavía está subiendo. Toma un minuto instalar las dependencias la primera vez. Oh, nos estamos acercando. Sí, lo otro que diría, si ustedes quieren profundizar más. Sé que mencioné el advenimiento, pero puedes, hablaré mientras esperamos que eso se cargue. Pero si vas a redwoodjs.com y abres los documentos, hay un tutorial aquí. Y esto hace un gran trabajo básicamente mostrándote toda la funcionalidad que recorrimos hoy. Vale, así que creo que esto está funcionando ahora. Saco mi panel de puertos y salto. Sí, perfecto. Así que esto es un componente del servidor. Tenemos un contador del servidor. Y ahora este botón incrementará el contador del cliente. Así que puedes ver que está aumentando. Ahora puedo actualizar el contador del servidor aquí por siete. Así que ahora eso sube, si presiono refrescar, esto todavía va a decir que es siete porque se sirve en el servidor. Pero este cambia de nuevo a uno porque está en los clientes. Así que ver si presiono refrescar, mantiene 10, pero luego salta a uno. Genial, así que eso es el contador del cliente y puedes ver un poco... En realidad, cerré esa ventana. Algunos del código y cómo está funcionando. No voy a entrar en demasiado detalle solo para, porque ya estamos por encima y luego ser capaz de pasar por todas las demostraciones, hay dos más. Y de nuevo, si quieres profundizar más, por favor, echa un vistazo a la conferencia magistral de Tom. Vale. Así que vamos a tomar solo un minuto caliente. ¿Cuáles son algunos problemas empresariales que aún necesitan ser resueltos por JavaScript? Esa es una buena pregunta. Sabes, creo que voy a tomar la salida fácil la típica respuesta del desarrollador y simplemente decir que depende. Depende de lo que estés tratando de resolver. Hay mucho que puedes hacer con JavaScript. Incluso hay. Y incluso pienso en algunos casos de uso donde estoy como, esto es más difícil, pero todavía ha habido personas que han podido resolverlo. Así que una de las startups que se ha construido en Redwood se llama Statapillar, y puede procesar todo tipo de data, como grandes conjuntos de data.

Y luego este, vamos a abrir este puerto. Vale, así que voy a decir que amo a JavaScript y enviar esto. Y así es como, acabo de irme al éter. Ahí vamos. A ver si esto funciona. Amo a JavaScript. Ahí vamos. Oh, parpadeó. Pero de todos modos, responde. Parece que algo podría estar caído. Pero esto está ejecutando un componente de servidor React desde la IA, el fixie de la IA en el navegador.

Así que gracias a ustedes que se quedaron un poco más. Realmente lo aprecio y agradezco su participación. Pero venir a la masterclass y participar, estoy en Twitter. Mi nombre de usuario es self teach me. Si quieres conectarte, estoy feliz de responder preguntas, pero espero verte en la comunidad de Redwood. Lo aprecio.