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.

Amy Dutton
Amy Dutton
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

Video Summary and Transcription

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