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

Rate this content
Bookmark

Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.

160 min
16 Nov, 2023

Comments

Sign in or register to post your comment.
  • Andrew Arnold
    Andrew Arnold
    New York Public Library
    Maybe this? https://gitnation.zoom.us/j/84052720570?pwd=GtX30KPC2rotjpEVXeaRkxf6Cnhwbm.1
  • Kaitlyn Higgins
    Kaitlyn Higgins
    E.W. Scripps
    Can you drop the zoom link with correct meeting ID here perhaps Isa? I'm seeing tons of channels on Discord, but none of them say troubleshoot. A bunch of the channels look like they're from a past summit.
  • Daniel Cha
    Daniel Cha
    Resilient Coders
    ty for the discord link

AI Generated Video Summary

La masterclass de hoy se centró en RedwoodJS, un marco full-stack que facilita el desarrollo de aplicaciones web. La masterclass cubrió temas como la configuración de un proyecto Redwood, la instalación de Tailwind CSS, el uso de Storybook para el desarrollo de componentes, la escritura de pruebas, la configuración de relaciones de base de datos con Prisma, el uso de GraphQL para acceder a la base de datos, y la exploración de los Componentes del Servidor React. La masterclass también mostró demos de la creación de enlaces, la actualización de páginas, y el uso de los Componentos del Servidor React para la integración de IA. En general, la masterclass proporcionó una visión general completa de RedwoodJS y sus características.

1. Introducción a RedwoodJS y Brazilian Nut News

Short description:

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. Hablamos sobre diseño web y desarrollo. Así que una de las cosas que realmente aprecio de Redwood es que hace que Storybook y simplemente la biblioteca de pruebas de JavaScript. Toma Prisma, GraphQL, React, y hace que todos esos sean ciudadanos de primera clase y ofrece soporte de inmediato. El proyecto real en el que estaremos trabajando se llama Brazilian Nut News. 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. Así que esto es en lo que vamos a trabajar. Este es el repositorio completo. 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 continuar construyendo e incorporando características. Así que echemos un vistazo a los documentos de Redwood y pondremos en marcha un proyecto. Por defecto, se requiere tener la versión 18 de Node y luego una versión de yarn mayor que 1.15.

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.

2. Creando un Proyecto Redwood

Short description:

Voy a crear un proyecto Redwood usando yarn. El proyecto se llamará React Summit. Sobrescribiré la versión de Node y continuaré con la instalación. Usaré TypeScript y omitiré la inicialización del repositorio. Después de ejecutar yarn install, iniciaré el proyecto Redwood ejecutando yarn RW dev. Avísame si encuentras algún problema.

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

3. Instalando Tailwind en el Proyecto Redwood

Short description:

Instalemos Tailwind en nuestro proyecto Redwood. Utilice el comando 'Yarn Redwood Setup UI Tailwind' para instalarlo fácilmente. Después de ejecutar el comando, tendrás Tailwind en funcionamiento. Se encargará de todo por ti, incluyendo la adición de los archivos CSS necesarios y la configuración de Tailwind.

un retraso, pero estoy dispuesto a volver atrás si alguien tiene problemas. Así que tenemos nuestro proyecto en marcha y funcionando. Y lo primero que vamos a hacer es instalar Tailwind. Instalar Tailwind en Redwood es realmente fácil. Solo tienes que ejecutar un solo comando. Así que voy a dividir la vista aquí y simplemente voy a ejecutar Yarn Redwood Setup UI Tailwind. Y ahora tengo Tailwind en funcionamiento. Lo hace todo por mí. Ahora, acabo de ver que algunas personas se han unido a la sala de Zoom. Bienvenidos. Os enviaré un enlace del repositorio en el que estamos trabajando. Podéis ver la agenda. Algo del material que, vaya, os he enviado el comando equivocado. Acabo de enviaros lo que acabo de pegar en la terminal. Ahí está. Perfecto. Así que ahora tengo Tailwind en funcionamiento. Así que déjame mostrarte lo que esto ha creado. Así que si abro mi proyecto Redwood, digamos por aquí código y esto abrirá mi proyecto así que aquí está lo que tenemos con solo un segundo para reconfigurar mis ventanas hacer esto un poco más grande así que este es mi proyecto redwood con todos mis archivos y carpetas oh eso es una lástima sobre la sala de zoom Y cuando acabamos de ejecutar ese comando de tailwind, lo que hizo fue que ya teníamos un archivo CSS aquí, pero añadió nuestras pocas piezas aquí para trabajar con Tailwind. Y luego también tenemos nuestra configuración de Tailwind aquí dentro de webconfig tailwind.

4. Estructura de Carpetas y Configuración de Storybook

Short description:

Ahora voy a dar una visión general de alto nivel de la estructura de las carpetas. Las principales cosas en las que nos centraremos son la carpeta API y la carpeta web. Dentro de la carpeta API, tenemos una carpeta para nuestra base de datos, carpeta de origen para directivas, funciones, GraphQL y servicios. Dentro del directorio web, tenemos configuración, módulos de nodo, carpeta pública, directorio de origen para componentes, aplicación, CSS y archivo de rutas. Comenzaremos poniendo en marcha Storybook, que se incluye con Redwood de serie.

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.

5. Creando un Componente y Usando Storybook

Short description:

Vamos a crear un componente y ver cómo se ve dentro de Storybook. Nos centraremos en el front end en la primera hora.

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

6. Creando un Componente con Storybook

Short description:

Vamos a crear un componente en Redwood y usar Storybook para desarrollarlo. Redwood maneja las actualizaciones de la biblioteca automáticamente, por lo que no tienes que preocuparte por administrarlas. Los generadores de Redwood facilitan el prototipado y la creación de componentes. Storybook te permite desarrollar componentes de forma aislada y crea documentación para ti. En Storybook, puedes pasar props a tus componentes y verlos actualizarse en vivo. También puedes probar la accesibilidad, las acciones y diferentes configuraciones visuales en Storybook.

en el front end. Así que tomemos un componente simple, y creo que comenzaré con este enlace compartido porque probablemente es uno de los componentes más importantes de todo este proyecto. Así que voy a volver a Warp, y vamos a crear un componente. Así que hay una pregunta en el chat. Si la biblioteca actualiza su versión, por ejemplo, React Router, ¿Redwood lo recogerá? Seguro que sí, lo bueno de Redwood es que, por ejemplo, si storybook se actualiza, se encargará de eso por ti, así que si estoy trabajando aquí en la terminal, aparecerá un mensaje la próxima vez que esté listo para ejecutar Redwood y dirá que hay una actualización disponible para ti y tú simplemente ejecutarás yarn Redwood update, así que lo bueno es que no tienes que gestionar esas actualizaciones tú mismo Redwood se encarga de todo eso por ti, así que no sé tú, pero he tenido varios proyectos donde una dependencia como esa se actualiza y luego termino peleando y/o tratando de averiguar qué cambió y cómo necesita ser actualizado y el hecho de que Redwood se encargue de todo eso por ti es realmente agradable. Intentan ser muy conscientes de los cambios que rompen.

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.

7. Uso de las herramientas de Storybook y Auto Docs

Short description:

Puedes activar el modo responsivo, la cuadrícula, el modo claro y oscuro, y utilizar otras herramientas como el zoom in, zoom out y la actualización del componente. Otra gran característica es la capacidad de añadir auto docs a tus componentes, lo que genera documentación para todas las props pasadas. También puedes crear múltiples historias para diferentes variaciones de tu componente. Esto ayuda en las pruebas y en la documentación de los diferentes estados de tu componente.

Veamos. Quería desactivar el... Ahí vamos. También puedes... Esto es similar a las herramientas que tienes dentro de tus DevTools de Chrome donde puedes ver el padding y los tamaños de todo. También puedes activar el modo responsivo. ¿Cómo se ve en un móvil grande? ¿Cómo se ve en un móvil pequeño? tal vez eso necesita ser abordado porque ahora hemos introducido un desplazamiento horizontal um luego también podemos venir aquí, activar una cuadrícula y luego también puedes activar el modo claro y oscuro así que verás que en el modo oscuro deberíamos abordar eso porque ese contraste no va a funcionar um genial y luego aquí hay algunas cosas más que puedes hacer con algunas otras herramientas si quieres hacer zoom in, perdón, zoom out o actualizar el componente. Pero una de mis otras características favoritas. Así que estamos hablando de si eres un desarrollador de front end y estás entregando esto a un desarrollador de backend, puedes añadir etiquetas con auto docs incluidos. Y si añado esto, verás, no le gusta esta ortografía. Añade eso a mi espacio de trabajo. Auto docs. Y vuelvo. Ahora tengo otro enlace que Storybook generó automáticamente para mí. Y esto incluye toda la documentación. Así que puedes ver de inmediato que estas son todas las props que estoy pasando. Si quieres incluir descripciones, puedes hacerlo. Pero luego aquí hay algunas propiedades. Es genial que genere eso para ti. Y déjame mostrarte si llevamos eso un paso más allá. Así que esto creó una historia principal para nuestro enlace compartido. Bueno, puedo duplicar esto y puedo crear otra historia. Así que tal vez podemos hacer, digamos, una historia de título largo. Y podríamos usar todos los mismos argumentos, pero queremos mostrar cómo se ve un título largo. Bueno, en lugar de escribir todo esto, porque esto va a empezar a ser realmente redundante, lo que podríamos hacer es simplemente referenciar nuestra historia principal, referenciar nuestro objeto args y luego simplemente introducir un título realmente largo que no es tan largo pero tú entiendes la idea ahora si volvemos a storybook notarás que hay otra historia aquí en nuestra barra lateral llamada título largo te mostrará cómo se ve ese componente pero en nuestros documentos también documentó ambos componentes así que esto también ayuda en términos de poder ver bien ¿lo hicimos?

8. Introducción a las pruebas en Redwood

Short description:

Hablemos de pruebas. Existen varios tipos de pruebas, incluyendo pruebas estáticas, pruebas unitarias, pruebas de integración y pruebas de extremo a extremo. Hoy, nos centraremos en las pruebas unitarias. Redwood tiene instaladas pruebas por defecto, lo que facilita su configuración. Puedes ejecutar toda la suite de pruebas o limitarla a componentes específicos. Veremos un archivo de prueba y corregiremos una prueba fallida pasando las props necesarias. También añadiremos seguridad de tipo a nuestro componente usando TypeScript. Al final, nuestra prueba pasará, proporcionando confianza en la funcionalidad del componente. Si eres nuevo en las pruebas, no te preocupes. Explicaremos los diferentes tipos y proporcionaremos recursos para un aprendizaje más profundo.

¿Se rompió algo? ¿Y cuáles son todas las variaciones del componente? Genial. Bueno, así que espero que ahora tengas un par de componentes dentro de tu storybook. Y ahora vamos a escribir algunas pruebas. Así que solo tengo curiosidad en el chat, ¿cuántas personas saben cómo escribir pruebas? O tal vez empecemos por ahí. ¿Cuántas personas están familiarizadas con la escritura de pruebas? Solo sí o no. sí, más es perfecto, genial, esto es mucho mejor de lo que esperaba. si eres negativo, no te preocupes, está totalmente bien, hablaremos un poco sobre ello. es interesante porque a veces es más fácil o se siente más fácil seguir adelante y simplemente lanzarlo, está bien, eso es genial. Entonces, hablaremos un poco sobre las pruebas. Lo bueno de las pruebas es que puedes escribir un componente y tener la confianza de que va a seguir haciendo lo que se supone que debe hacer, incluso cuando añades a la base de código y extiendes tu aplicación. Así que hay varios tipos diferentes de pruebas, y eso puede ser un poco confuso cuando estás empezando y tratando de aprender el vocabulario. Sé que me confundió un poco, pero si estás familiarizado con Kent C. Dodds, él tiene un material fantástico sobre pruebas y fue realmente clave para mí cuando estaba tratando de aprender qué son las pruebas y cómo escribirlas. Así que él acuñó esta idea llamada el trofeo de pruebas. Así que puedes ver que esto se tomó directamente de su sitio y voy a incluir el enlace. Voy a referenciar esta imagen en particular. Pero de lo que está hablando aquí es que si empiezas en la parte inferior del trofeo y la razón por la que el trofeo no es una pirámide es porque esto también tiene que ver con el tamaño. Así que probablemente vas a tener la mayoría de las pruebas unitarias y hablaremos de lo que es eso. Así que una prueba estática es lo que te va a ayudar a atrapar errores de tipografía o errores de tipo mientras escribes código. Así que esa es una de las razones por las que usamos herramientas como ESLint y Prettier e incluso TypeScript cae en este cubo de ser capaz de hacer esas pruebas estáticas para poder atrapar esas cosas para ti. Así que no hay realmente ninguna prueba que tengas que hacer por decirlo así, aparte del hecho de que te ayudará a atrapar esos errores mientras estás escribiendo tu código. Luego las pruebas unitarias es cuando estás probando un pedazo individual de código para ver si va a hacer lo que esperas que haga. Así que cuando estás hablando de crear componentes, muchas veces estás hablando de pruebas unitarias porque estás probando ese pedazo individual de código para ese componente. Y luego también tienes pruebas de integración. Así que lo interesante de las pruebas de integración es que de repente estás comprobando para ver, ¿ok, este componente funciona en aislamiento, y este componente funciona en aislamiento, pero cuando los pongo juntos, todavía funcionan de la manera que se supone que deben funcionar? Cuando están integrados juntos, ¿todo está funcionando en armonía como debería? Y luego una prueba de extremo a extremo, normalmente estas se hacen con herramientas como Playwright y Cypress, es que te permitirán realmente probar tu aplicación de la manera en que un usuario probaría la aplicación. Así que con Cypress y Playwright, puedes configurar un robot de ayuda que hará clic a través o llenará formularios o iniciará sesión y comprobará que tu aplicación está funcionando correctamente. Así que hoy no vamos a hacer todos estos diferentes tipos de pruebas. Eso sería mucho, pero vamos a configurar pruebas unitarias. Nuestras pruebas estáticas están básicamente ya hechas porque tenemos una configuración de prettier. Tenemos ESLint ya dentro de nuestro proyecto Redwood. Ya estamos haciendo TypeScript, pero el siguiente nivel es nuestras pruebas unitarias. Así que de la caja, Redwood tiene instaladas pruebas. Esa es parte de tu configuración. Y es bastante genial. No tuviste que hacer nada para configurar eso. Para mí, eso fue un gran punto de venta. Hace unos años, creé un video de YouTube sobre cómo configurar pruebas en un tipo diferente de proyecto. Y es como un video de YouTube de 10 minutos. Así que para mí, puedes imaginar la cantidad de tiempo que me llevó poder averiguar todo y luego condensar eso en un video de 10 minutos. Mientras que esto, sólo ejecutas un solo comando y tienes tu biblioteca de pruebas en funcionamiento. Así que si vuelvo a mi terminal, aquí tengo warp, voy a ejecutar yarn redwood test en la terminal. Y va a ejecutar toda mi suite de pruebas. Así que ahora mismo hay unas pocas pruebas que hemos creado tal vez de la caja. Así que puedes ver que está diciendo que tengo una prueba fallida, dos pruebas pasadas. Así que una de las cosas que podemos hacer es que podemos limitar esto a lo que estamos enfocando en este momento. Así que en realidad voy a dejar que me golpee control C para salir de esto y golpear la flecha hacia arriba. Excepto que esta vez, voy a añadir el nombre de nuestro componente. Así que el componente que creamos fue shared link. Así que si digo yarn redwood test shared link, sólo probará ese componente en particular. Así que ahí es de donde viene una de mis pruebas fallidas. También puedes usar estas teclas aquí. Así que podría decir ejecutar sólo las pruebas fallidas o golpear O para ejecutar sólo las pruebas relacionadas con los archivos cambiados, que es bastante genial una vez que tienes toda tu suite de pruebas en funcionamiento y todo está funcionando, entonces puedes simplemente tenerlo comprobando mientras estás trabajando a través de archivos y simplemente tener eso constantemente en marcha. O puedes usar la tecla P para especificar un nombre de archivo. Así que podría haber golpeado P aquí y tecleado shared link para hacer eso en lugar de simplemente salir y ejecutar específicamente esa prueba. Así que vamos a venir a VS Code y vamos a revisar este archivo de prueba. Así que ya puedo decir lo que está mal y por qué no está funcionando. Así que está esperando algunas props que no hemos pasado. Así que mi suposición es que no se está renderizando correctamente. Eso es realmente todo lo que hace esta prueba. Así que de la caja, sólo tenemos una prueba y sólo se asegura de que se renderiza con éxito. Y como no estamos pasando todas las props que necesitamos, no va a renderizar con éxito. Así que creo que tan pronto como pasemos todas las props que necesitamos, debería funcionar. Así que voy a venir a nuestra historia aquí. Y en realidad, creo que podemos simplemente agarrar esto porque estamos exportando esta historia principal. Creo que esto funcionará si simplemente digo, veamos si esto funciona. No estoy 100% seguro de si esto funcionará o no. Queremos importar primary de sí seguro que sí hay shared link story y vamos a pasar en nuestro primary dot args y queremos extender eso así que ahora bien está diciendo que tengo un bien genial así que parece que me faltan algunas cosas diciendo que algunas cosas son opcionales déjame ver cómo se ve nuestra prueba ahora oh mira eso está pasando ahora Me pregunto por qué esto no está funcionando. Esto podría tener que ser de eso es un no le gusta donde puse mi declaración de importación. Por eso está haciendo eso. Y luego veamos si estamos obteniendo algo raro. Este es un problema de TypeScript. Así que me pregunto si volvemos a añadir seguridad de tipo a nuestro componente, si eso se resolverá. Así que aquí hemos listado, uh, no estoy seguro si todo el mundo está familiarizado con TypeScript. Así que, hablaré brevemente sobre ello. Pero puedes describir todas las props y sus tipos que estás pasando a un componente. Así que, normalmente recurro a una interfaz. Y entonces, voy a llamar a mi interfaz. Así que, una interfaz es sólo una forma elegante de decir que este es un objeto que estoy definiendo. Y voy a decir que el objeto que estoy definiendo son estas props que estoy pasando. Así que notarás que usé dos puntos aquí. Así que estoy obteniendo algunos errores aquí ahora porque está diciendo que tienes estas cosas aquí abajo que estás pasando, pero no has definido ningún tipo para ellas. Así que si copio eso, ahora sólo necesita saber qué tipo es en realidad. Bueno, los puntos van a ser un número. El autor va a ser una cadena. El recuento de comentarios va a ser un número. Mi título va a ser, en realidad el autor no va a ser una cadena. Volveremos a eso. Nuestro título va a ser una cadena y luego nuestro enlace va a ser una cadena. Así que, me sorprende que esto no esté siendo levantado porque esto es en realidad un objeto donde estamos pasando un primer nombre que es una cadena y un apellido que es una cadena. Así que, ahora, si vuelvo, veamos si eso o podría ser que simplemente no le guste el hecho de que pasamos eso como un objeto en lugar de listarlos como props reales. Voy a seguir adelante. Así que si vuelvo, ya hemos establecido que nuestra prueba está pasando. Así que si eres creo que había algunas personas que dijeron que no estaban familiarizadas con las pruebas. Así que permíteme describir un poco lo que está funcionando, lo que está sucediendo en este archivo. Así que todas nuestras pruebas aquí están envueltas en este bloque de descripción.

9. Escritura y Ejecución de Pruebas

Short description:

Al escribir pruebas, piensa en lo que el usuario ve y espera que suceda. Las pruebas incluyen la comprobación del título, puntos, autor, total de comentarios, manejo de votos positivos y negativos, y enlace correcto. La configuración de la prueba implica renderizar el componente y pasar las props necesarias. Se utiliza la biblioteca de pruebas de JavaScript para renderizar componentes. Las afirmaciones se hacen capturando elementos de la pantalla y estableciendo expectativas. Las pruebas fallidas se pueden depurar comprobando la sintaxis e importando las funciones necesarias. Al completar las pruebas una por una, el resultado final debería mostrar todas las pruebas superadas.

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.

10. Pruebas en Redwood

Short description:

Las pruebas en Redwood implican el uso de diferentes métodos para capturar elementos, como 'getByText' y 'getByAltText' para imágenes. Sin embargo, se recomienda el uso de 'getByTestId' para una mejor experiencia del usuario. Aunque 'getByTestId' es menos visible para los usuarios, puede utilizarse como una salida de emergencia para encontrar elementos. Es importante asegurarse de que los ID de prueba coinciden con los elementos que se están probando. Por ejemplo, se puede añadir un ID de prueba a un elemento utilizando el atributo 'data-test-id'. La escritura de pruebas implica la creación de afirmaciones y la eliminación de la palabra clave 'skip'. Las pruebas pueden ejecutarse individualmente utilizando la palabra clave 'only'. También es importante manejar los casos en los que no se encuentra el elemento esperado, como cuando el texto está dividido por varios elementos. En tales casos, envolver el elemento con un span y añadir un ID de prueba puede ayudar a localizar el elemento. En general, se pueden escribir varias pruebas, incluyendo las de puntos, autor, total de comentarios y URL correcta.

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

11. Configuración de la base de datos y relaciones de tablas

Short description:

Al trabajar con bases de datos en Redwood, puedes pensar en ellas como un lugar para almacenar información. Las tablas dentro de las bases de datos son como hojas de cálculo que se refieren entre sí. Redwood admite SQLite y Postgres, con Prisma manejando el formato de los datos. Establecer relaciones entre tablas ayuda a minimizar redundancias. Los principales tipos de datos que necesitamos para nuestra aplicación son usuario, enlace, voto, favorito y comentario. Estas tablas están vinculadas en base a relaciones, como un usuario que marca un enlace como favorito. Estableceremos estas relaciones y garantizaremos la consistencia de los datos en toda la base de datos. Comencemos definiendo la tabla de usuarios, que debe incluir un ID como identificador único.

crea páginas de marketing. Así que permíteme abrir mi pantalla de nuevo. Te mostraré algunas de las otras cosas. Este fue un sitio web que construí para nuestra conferencia de RedwoodJS que hicimos en septiembre. Y es solo ticket.redwoodjs.com. Si quieres echarle un vistazo, pero puedes, aquí vamos. hacer clic y arrastrar la insignia, pero hay una aplicación completa. Hay un componente de back-end completo para esto, que es donde Redwood probablemente tendría más sentido. Puedes ejecutarlo porque hemos estado viviendo principalmente en esa carpeta web. Puedes crear una página de inicio con solo la parte web y centrarte en el front-end dentro de la carpeta web. También puedes simplemente crear, usar el back-end, que es como pasaremos la segunda hora mirando en la carpeta API. Y en realidad hay una empresa en Australia llamada BuildPass y su aplicación solo utiliza la carpeta API de Redwood. Así que no estoy exactamente seguro de por qué solo usan la parte de API y no la parte web juntas. Pero solo para decir que podrías usar solo el front-end o solo el back-end o ambos juntos. Así que, sí, realmente brilla si estás tratando de construir una aplicación. Así que solo por mostrar con más o menos, eso fue realmente útil la última vez. ¿Cuántas personas tienen experiencia trabajando con bases de datos? Sabes, eso me ayudará a determinar cuánto tiempo, cuánto en profundidad debería ir hablando sobre— Okay, perfecto. Gracias. Genial. Oh, eso es genial. Más o menos a la mitad. Perfecto, perfecto. Okay, genial. Esperaré y comprobaré de nuevo. Si eres un menos, no te avergüences. Eso es realmente útil para mí porque entonces pasaré un poco más de tiempo en ello, pero parece que todas las respuestas que he recibido hasta ahora son en su mayoría positivas. Si has trabajado con una database antes, o estás familiarizado, estás cómodo. Okay. Así que, okay, perfecto. Puedo hacer eso. Gracias, Vivian. Así que cuando estás trabajando con bases de datos, puedes pensar en ello simplemente como un lugar donde vas a almacenar información. Y así tienes tablas dentro de las bases de datos, y es casi como una hoja de cálculo donde tienes una tabla y se refiere a una segunda tabla o a una tercera tabla. Así que cada tabla con la que trabajas en cualquier aplicación que estés utilizando. Ahora Redwood, puedes usar SQLite o puedes usar Postgres. Yo suelo optar por Postgres. Y eso es solo la forma en que se formatean los data. Pero como te mostraré, no tienes que preocuparte por escribir código SQL en bruto. Eso suena miserable para mí. Así que Redwood se encarga de mucho de eso por ti. Bueno, más específicamente, Prisma se encarga de mucho de eso por ti. Así que solo voy a sacar mis notas aquí. Y repasaremos la configuración de la database para nuestra aplicación. Así que si abro esto, ahí vamos. Así que ayuda, obviamente, si tienes un design para trabajar. Y puedes ver exactamente qué data estás tratando de recoger. Y luego puedes establecer cuáles van a ser esas relaciones. Así que eso es lo que haremos ahora. Así que vamos a seguir adelante y repasar esto. Y luego en el readme, tengo un enlace a esta página aquí que muestra cómo todo esto está mapeado. Pero vamos a repasarlo un poco más despacio. Así que tenemos, hablemos de todos los diferentes tipos de data que necesitamos. Primero que nada, tenemos un usuario. Necesitamos data para el usuario que está iniciando sesión y creando estos enlaces y cómo están interactuando con esos enlaces. Luego también tenemos un enlace que alguien envía. Y luego tenemos, ¿qué más tenemos? Tendríamos el voto que alguien hace en el enlace. ¿Están votando a favor o en contra? Tenemos que ser capaces de rastrear eso. Y parte de tratar con bases de datos es que quieres encontrar formas de no crear múltiples tipos de data. Como no quiero tener el nombre del usuario aquí y en el voto y tal vez que lo haya enviado. Quieres crear esas relaciones para minimizar redundancias. Y parte de la razón es que si un usuario entra y cambia su dirección de correo electrónico, no quieres tener que ir por toda tu database, ser capaz de cambiar todas las instancias donde están haciendo eso. Quieres cambiarlo en un solo lugar y tener todas las relaciones actualizadas automáticamente. Así que tenemos un usuario. Tenemos un enlace. Tenemos un voto. Tenemos tal vez una tabla de favoritos. ¿Ha sido marcado un enlace como favorito? Y también tenemos un comentario. Así que si el usuario comenta en el enlace, necesitamos ser capaces de rastrear todos esos comentarios. Y luego, no creo que lleguemos a esta parte, pero si un usuario, digamos, votó en un comentario real para votar a favor o en contra. Y creo que esto cubre casi todas las cosas principales que necesitamos. Voy a cambiar esto para que seamos un poco más explícitos con el tipo de porque esto realmente va a ser una relación. Correcto. Porque tenemos un usuario y un enlace y tenemos que decir que el usuario marcó ese enlace como favorito. Así que tenemos que establecer una relación entre estas dos tablas. Así que si digo enlace favorito usuario, puedes ver que estamos haciendo referencia al enlace y al usuario. Y solo estoy poniendo estos en orden alfabético. Creo que esa es una convención general. No creo que sea solo una preferencia personal, pero es una preferencia personal. Así que estoy vinculando la tabla de enlaces y la tabla de usuarios para especificar el favorito. Y luego lo mismo con el voto es que voy a vincular la tabla de enlaces. Voy a llamar a esto, oh, eso no es consistente. Déjame hacer esto consistente. No creo que lo haya hecho consistente en la aplicación que construí. Digamos voto. esa palabra primero. Ahí vamos. Okay. Así que vamos a hacer referencia a estas dos cosas y luego tenemos nuestros comentarios. Así que comencemos con nuestra tabla de usuarios. ¿Qué es toda la información que necesitamos incluir?

12. Información del Usuario y del Enlace

Short description:

Cada tabla en la base de datos debería tener un ID para fácil referencia. La información del usuario incluye correo electrónico, apodo, nombre, apellido y enlaces a redes sociales. Redwood proporciona herramientas para la autenticación. La información del enlace incluye título, enlace, enviado por ID, creado en y actualizado en. Las relaciones se establecen entre las tablas utilizando los ID.

Bueno, cada tabla en tu database debería tener un ID. Esto simplemente facilita la referencia en el futuro para que puedas encontrar esa pieza específica de información que estás buscando. En nuestro caso, será un entero. Luego tendremos su dirección de correo electrónico, que será una cadena. Luego tendremos, voy a llamar a esto un apodo. Así que esto es como esto podría considerarse un nombre de usuario, pero no es lo que alguien está usando para iniciar sesión. Lo llamé un apodo porque si vas a decir perfil / lo que sea que sea el nombre de usuario o su apodo. Eso es como una URL de vanidad. Ahí es donde usarías eso porque no quiero exponer el correo electrónico del usuario y tampoco quiero exponer su ID. Así que un apodo es una forma fácil de hacer eso. Ahora este apodo. Sí, creo que está bien. Iba a decir que puedes hacerlo opcional, pero creo que cada usuario debería tener un apodo. Luego vamos a ver que queremos que tengan su primer nombre. Y tal vez hacemos el primer nombre opcional. Alguien No querían darnos esa información. Y luego su apellido. Y también necesitaremos información para la authentication. Voy a dejar esto ahora porque Redwood tiene algunas herramientas para trabajar con bases de datos. O, lo siento, authentication. Lo hacen realmente fácil. Así que cuando lleguemos a esa sección, dejaremos que Redwood se encargue de eso. Luego también tenemos tal vez en su perfil, queremos que incluyan Twitter o X. y luego tal vez un enlace de Facebook. Todavía están en Facebook. Y supongo que podríamos hacer Instagram. Eso es tal vez más popular ahora que Facebook. Una cadena y luego LinkedIn. Eso podría ser una cadena. De hecho, hagamos todo esto en minúsculas. Y luego diremos para GitHub, tendremos una cadena. Bueno, esta es toda la información que queremos recopilar sobre un usuario. Para el enlace, vamos a hacer algo similar. Hagamos una lista de toda la información que necesitamos. Y luego cuando vayamos a construir eso dentro de nuestra aplicación, esto será fácil. Solo tenemos toda la información ya listada. Como mencioné, cada pieza de información en tu database necesita un ID. Luego para esto, tendremos un título y eso será una cadena. Tendremos un enlace, que también será una cadena. Luego tendremos tal vez enviado por ID. Eso será un entero. Entonces, esto va a hacer referencia, porque estamos usando el ID, va a hacer referencia a otra cosa en otra tabla. Luego tendremos creado en, que será una fecha y hora. Tendremos actualizado en, que será una fecha y hora. Y creo que eso es bueno para los enlaces por ahora. Entonces, como estábamos hablando de este campo de id aquí para enviado por id va a hacer referencia a esta pieza de data aquí en nuestra tabla de usuarios por lo que podemos dibujar una flecha para mostrar que estos están vinculados juntos por lo que un usuario puede tener varios enlaces a él un enlace solo puede tener un usuario que realmente lo envió Si tuvieras, digamos, un usuario con varios enlaces y un enlace con varios autores, necesitarías otra database, otra tabla en tu database para vincular esas dos cosas juntas.

13. Estableciendo Relaciones en la Base de Datos

Short description:

Vamos a traducir las relaciones de la base de datos que discutimos en código. Utilizaremos Prisma, un Gestor de Relaciones de Objetos, para manejar las relaciones dentro de nuestra base de datos. Prisma crea una capa de API entre nosotros y la base de datos, facilitando su interacción. Definiremos las relaciones entre las tablas utilizando IDs y enums. Las relaciones incluyen relaciones de uno a muchos y de muchos a muchos. También configuraremos la base de datos utilizando SQLite, aunque Postgres también es una opción. Prisma se encargará de escribir las llamadas a la base de datos y de construir las tablas para nosotros. En el archivo schema.prisma, definiremos los modelos y sus campos, incluyendo IDs, strings, enteros y fechas. También echaremos un vistazo a un diagrama whimsical terminado para referencia. Vamos a la carpeta API en VS Code y configuramos la base de datos.

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.

14. Modelos de Base de Datos y Relaciones

Short description:

Definimos el ID, correo electrónico, nombre, apodo y enlaces a redes sociales para el modelo de usuario. Prisma proporciona un complemento de VS Code para autocompletar y ofrecer intellisense. Creamos un modelo para la tabla de enlaces con ID, título, enlace, ID de quien lo envió, creado en y actualizado en. Establecemos una relación entre las tablas de enlaces y usuarios utilizando las columnas de ID de quien lo envió y ID de enlace. También configuramos la relación en la otra dirección. Repetimos el proceso para el modelo de comentarios, incluyendo el ID de enlace y el ID de autor.

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.

15. Relaciones de Base de Datos y Migraciones

Short description:

Configuramos las relaciones entre los modelos de autor y usuario, y los modelos de favoritos y enlaces. También establecimos la dirección del voto como un enum. Sin embargo, debido a las limitaciones de SQLite, utilizamos una cadena en su lugar. Ahora, ejecutemos una migración utilizando el comando 'yarn Redwood Prisma MigrateDev' para mantener la base de datos sincronizada con nuestros cambios.

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.

16. Configuración de la Base de Datos y GraphQL

Short description:

Hemos creado nuestra base de datos utilizando Prisma y Redwood. Prisma Studio nos permite ver y agregar registros a nuestra base de datos. El tipo de ID para la tabla de enlaces se estableció erróneamente como una cadena, pero debería haber sido un entero. Sin embargo, el uso de una cadena para los ID puede proporcionar seguridad adicional al generar un UUID único. Redwood maneja las migraciones de la base de datos automáticamente, generando código SQL sin necesidad de escritura manual. Redwood también genera los tipos necesarios para TypeScript. Utilizamos GraphQL para acceder a la base de datos en Redwood, pero en el futuro, Redwood puede soportar otras APIs como Supabase o Zeta. GraphQL es ampliamente utilizado y popular a nivel empresarial. Continuemos con una breve descripción general de GraphQL y aceleremos el ritmo.

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.

17. Generando Archivos GraphQL y Resolvers

Short description:

Hemos ejecutado nuestra migración y tenemos el estudio en funcionamiento. Vamos a revisar nuestro playground de GraphQL. Utilizaremos los generadores de Redwood para crear archivos GraphQL, páginas y formularios. El andamio puede ser abrumador pero genera muchos archivos. Generaremos archivos SDL para cada modelo, resolviendo cualquier error. Los archivos SDL son similares al esquema de Prisma pero utilizan una sintaxis diferente para los campos opcionales y requeridos. Los servicios manejan las consultas y mutaciones de GraphQL. Redwood genera código, asegurando la seguridad de tipo y reduciendo la redundancia. El archivo SDL de usuarios corresponde al archivo de resolución users.ts. Hacer cambios en el archivo SDL requiere cambios correspondientes en el archivo de resolución.

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

18. Explorando Prisma y GraphQL

Short description:

Exploramos Prisma y su uso en la creación de un usuario. El playground de GraphQL nos permite escribir consultas en el front end fácilmente. Podemos especificar los datos que queremos recuperar, lo que lo hace más eficiente que las API REST. Los datos devueltos ya están en un formato similar a JSON, lo que facilita su trabajo. Podemos copiar y pegar las llamadas de GraphQL en el front end. Prisma utiliza JavaScript para crear la API de GraphQL. El archivo de esquema de Prisma define la estructura de GraphQL, mientras que el archivo de resolución correspondiente maneja el código de JavaScript. También creamos un enlace utilizando Prisma Studio y establecimos una relación con el usuario. VS Code es un editor de texto popular para la codificación, que proporciona características como IntelliSense. Prisma Studio simplifica el proceso de consulta de la base de datos y visualización de relaciones. Añadimos un registro para un enlace y guardamos los cambios en Prisma Studio.

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

19. Plugins IntelliSense y Enlaces de Base de Datos

Short description:

Puedes agregar plugins IntelliSense uno a la vez. Co-pilot es un plugin útil que requiere una suscripción mensual. Prisma Studio permite una fácil manipulación de datos. Puedes guardar cambios en la base de datos y establecer relaciones entre registros. RedwoodJS y React Summit son ejemplos de enlaces añadidos a la base de datos. El enrutador de Redwood maneja la vinculación de páginas. Las celdas en Redwood se utilizan para obtener contenido de GraphQL en una página.

proyecto que creamos con el primer comando Yarn Redwood create. Sí, estás preguntando qué plugins IntelliSense tengo, tengo este post de blog que escribí hace un tiempo Lo incluiré en el chat pero tiene todas las extensiones que estoy ejecutando, estoy ejecutando muchas no necesitas todas ellas pero aquí, solo hay, tengo 65 en marcha, también puedes si quieres imitar mi configuración creo que hay un enlace en la parte inferior para descargar, sí, incluso puedes descargar el gist de github y eso te dará la misma configuración exacta que tengo en mi máquina Si quisieras simplemente descargar todas las 65, pero podría sugerir agregar una a la vez.

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.

20. Uso de Celdas Redwood y Mutación de Datos

Short description:

Entonces, en Redwood, puedes crear una celda que maneja diferentes estados y entrega los datos necesarios. Al usar una celda Redwood, no tienes que escribir código para manejar los estados de carga, vacío o éxito. La celda se encarga de todo eso por ti. En la celda, puedes consultar datos utilizando GraphQL. La celda extraerá los datos y los pasará al componente de éxito. Puedes personalizar el componente de éxito para mostrar los datos según sea necesario. Para mostrar la celda en el front end, importa la celda y añádela a la página. La celda extraerá dinámicamente los datos de la base de datos y los mostrará en el front end. Redwood también proporciona generación de tipos para TypeScript, lo que facilita el trabajo con los datos. Puedes usar el componente de formulario de Redwood para crear un formulario para enviar datos en el front end.

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

21. Añadiendo Datos a la Base de Datos

Short description:

Para añadir datos a la base de datos, se utiliza un formulario con una función onSubmit. La función handleSubmit recibe un objeto de datos que contiene el enlace y el título. Los datos se mutan y se envían a la base de datos utilizando consultas y mutaciones de GraphQL en el playground. Si hay algún error, se pueden corregir actualizando el archivo de esquema de Prisma y ejecutando de nuevo la migración. La mutación se puede conectar al formulario en la página de enlaces utilizando el gancho useMutation de Apollo. El gancho useMutation permite manejar los estados de carga y error. La mutación puede hacerse dinámica pasando variables. Redwood también utiliza directivas como requireAuth para controlar el acceso a los datos. Finalmente, la mutación puede incluirse en la función de envío para conectarla al formulario.

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

22. Creando Enlaces y Actualizando la Página

Short description:

Aprendimos cómo crear un enlace usando Redwood y pasar variables. Vimos que el enlace se creó con éxito y se mostró en la página. También aprendimos cómo actualizar automáticamente la página después de enviar un formulario. Además, discutimos el uso de los estados de carga y error en las mutaciones y cómo deshabilitar un formulario durante el estado de carga. Finalmente, aclaramos que Redwood es un marco de trabajo de React que agrupa el código de React en un marco de trabajo.

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.

23. Características de RedwoodJS y Componentes del Servidor React

Short description:

Redwood es un marco de trabajo completo que proporciona generadores, una herramienta de línea de comandos, soporte para front-end y back-end, integración con GraphQL, pruebas y Storybook. Ofrece un concepto único de celda y maneja eficientemente el enrutamiento. Si quieres explorar más, Redwood patrocina los proyectos Advent of JS y Advent of CSS, donde puedes trabajar en una aplicación de Redwood a tu propio ritmo. Además, los cofundadores de Redwood, Tom y David, han dado conferencias magistrales que proporcionan información sobre el futuro de Redwood y sus características. El proyecto en tiempo real de Redwood JS muestra casos de uso interesantes de GraphQL, como chat, subasta, temporizador de cuenta atrás, IA y aplicación de insignias. Los Componentes del Servidor React se están implementando en Redwood, convirtiéndolo en el segundo marco de trabajo en hacerlo. Redwood está en estrecha colaboración con el equipo de React para garantizar la alineación con la dirección de React. Se puede escribir CSS en la carpeta web, y el repositorio terminado demuestra ejemplos de estilos. Las demostraciones de los Componentes del Servidor React están disponibles en un repositorio separado.

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

24. Componentes del Servidor React y Casos de Uso Empresarial

Short description:

Los componentes del servidor React te permiten ejecutar React tanto en el cliente como en el servidor. Puedes gestionar el estado en el navegador utilizando useStateHook. Los componentes del servidor pueden mejorar el rendimiento y proporcionar acceso a las etiquetas de gráficos abiertos y meta. Redwood admite la renderización del lado del servidor para aplicaciones que requieren información de gráficos abiertos. Los componentes del servidor y del cliente pueden trabajar juntos para manejar el estado y la renderización. Las mutaciones del servidor permiten la manipulación de datos en el servidor. Los componentes del servidor React se pueden combinar con IA utilizando proyectos como AI JSX. JavaScript puede resolver una amplia gama de problemas empresariales, como el procesamiento de datos y la IA. El código permite resolver problemas y descubrir cosas. Varias demostraciones muestran la funcionalidad de los componentes del servidor React.

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.

25. Demostración del Proyecto Redwood y Conclusión

Short description:

Toby, uno de nuestros mantenedores principales, ha creado un video y una publicación en el foro sobre cómo crear un nuevo proyecto utilizando Redwood. Proporciona los comandos necesarios para poner en marcha el proyecto, así como instrucciones para construirlo y servirlo. Durante la masterclass, se demuestran un componente de servidor y un componente de cliente, mostrando la capacidad de tener un componente de cliente que renderiza un conteo de servidor. El componente del servidor ejecuta una función en el servidor, permitiendo la funcionalidad de async await. Otra demostración implica un componente de servidor React ejecutándose desde la IA en el navegador. La masterclass concluye con un agradecimiento a los participantes y una invitación para conectarse en Twitter.

componentes. Creo que debería aparecer. Sí. Así que Toby es uno de nuestros mantenedores principales, líder mantenedores en el equipo central que está trabajando en muchas de estas funcionalidades. Así que hay un video aquí. Incluiré un enlace a esto. Y luego ha incluido en esta publicación del foro cómo crear un nuevo proyecto. Puedes experimentar con ello tú mismo. Aquí están los comandos para poner en marcha el proyecto. aquí está cómo construirlo y cómo servirlo así que este es también un gran lugar para obtener actualizaciones creo que esto está a punto de terminar bien así que voy a abrir puertos aquí está el 8910 oh vamos no va a funcionar Oh, ¿sabes qué? Me pregunto si estos dos están compitiendo entre sí ahora. Tal vez no. Oh, lo hice demasiado pronto. Bien. Vale, así que este es un componente de servidor y este es un componente de cliente. Pensé que, oh, este es, ¿es este? Sí, este es ligeramente diferente porque el otro tenía el contador del servidor en el exterior y este lo tiene en el interior. Así que en realidad tenemos un componente de cliente renderizando un conteo de servidor, lo cual es bastante genial. Así que puedes ver que hay una carga aquí. tenemos un retraso falso, donde se actualiza. Así que como está en un servidor, también puedes ejecutar async await para obtener eso. Así que puedo tener un componente de servidor dentro de un componente de cliente que está ejecutando una función en el servidor, lo cual es bastante genial. Eso es lo que está demostrando.

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.