Construye una aplicación Fullstack rápidamente con herramientas modernas

Rate this content
Bookmark

Aprende cómo construir aplicaciones web desde el diseño en Figma hasta la implementación en AWS mientras te mueves muy rápido.

Christian Nwamba
Christian Nwamba
91 min
10 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La masterclass de hoy se centró en AWS Amplify, una herramienta que simplifica la vida de los desarrolladores frontend y móviles. Los participantes aprendieron cómo crear una aplicación React, configurar un modelo de datos, generar datos de prueba y utilizar la función de biblioteca de interfaz de usuario. También exploraron cómo importar componentes a un proyecto de Figma, previsualizar y vincular datos a los componentes, y configurar dependencias. La masterclass cubrió la renderización de componentes, la adición de funcionalidad, el manejo de autenticación y autorización, y la implementación de la aplicación. En general, los participantes encontraron que Amplify es una forma rápida y eficiente de construir y desplegar aplicaciones con mejoras constantes en la función de interfaz de usuario.

Available in English

1. Introducción y Chat

Short description:

¡Hola a todos! Soy Christian Mamba, un defensor principal de desarrolladores en AWS. Hoy aprenderemos sobre AWS, una herramienta que se enfoca en los desarrolladores de frontend y móviles para facilitarles la vida. Únete al chat e preséntate. Este es un ambiente divertido, así que siéntete libre de hacer preguntas.

¡Hola a todos, estoy muy emocionado de verlos hoy y estoy muy agradecido con el equipo de React Advanced de AWS por brindarnos la oportunidad de tener un increíble masterclass hoy. Mi nombre es Christian Mamba, y soy un defensor principal de desarrolladores en AWS, lo que significa que paso la mayor parte de mi tiempo tratando de educar a los desarrolladores sobre cómo utilizar algunos de nuestros productos de AWS. Pero específicamente, me enfoco en esta increíble herramienta que vamos a aprender hoy llamada AWS para enfocarnos en los desarrolladores de frontend y móviles y asegurarnos de que su vida sea más fácil cuando están utilizando nuestros productos. Así que eso es básicamente todo sobre mí, y me gustaría conocer a todos los demás. Por favor, siéntanse libres de unirse al chat. Creo que preferiría discord para que no perdamos nuestro chat. Así que si pueden unirse a discord, hay un enlace en el chat de Zoom sobre cómo llegar a discord. Así que vayan a discord. Digan hola allí, déjennos saber sobre ustedes. Digan su nombre, dígannos desde dónde se están uniendo, qué país y qué ciudad. Dígannos qué hora es y dígannos en qué están trabajando o para quién trabajan o qué en general les emociona estar aquí hoy. Bien, así que por favor recuerden que este es un ambiente divertido. Siéntanse libres de divertirse. Siéntanse libres de hacer preguntas. Me encantan las preguntas. Ninguna pregunta es demasiado estúpida para hacer. Estoy aquí para responder cada una de sus preguntas. Así que por favor, estoy diciendo todo esto para asegurarme de que se sientan cómodos en esta sala hoy y asegurarme de que puedan llevarse algo hoy al final de

2. Introducción al taller de AWS Amplify

Short description:

Una cuenta gratuita de AWS es suficiente para este taller. Aprenderemos cómo simplificar nuestras vidas como desarrolladores de React y superar los desafíos al salir del entorno del navegador. AWS Amplify es la herramienta que nos ayudará a resolver estos problemas con solo unos pocos clics. Vamos a navegar hasta la consola de AWS y encontrar AWS Amplify. Una vez allí, podemos crear una nueva aplicación, darle un nombre y confirmar la implementación. Si tienen alguna pregunta o están confundidos, por favor pregúntenlo en el chat. Eso es todo lo que hemos hecho hasta ahora.

el taller. Bien, veo que alguien está haciendo preguntas. ¿Una cuenta gratuita de AWS es suficiente para este taller? Sí, no solo para este taller. Incluso cuando estás construyendo un producto completo con las herramientas que aprendimos hoy, una cuenta gratuita te ayudará a construir y lanzar incluso antes de empezar a pagar a AWS si ya tienes clientes en tu producto. Bien, una cuenta gratuita es totalmente válida para el taller de hoy. Y hablando del taller de hoy, lo que vamos a aprender hoy es básicamente cómo hacer nuestras vidas más simples como desarrolladores de React que quieren lanzar las cosas con compilaciones. La mayoría del tiempo lo pasamos en el navegador y asumo que este es un taller de React o una conferencia avanzada de React y los desarrolladores aquí son desarrolladores de React, pero si no lo eres, por favor avísame en el chat y puedo adaptar un poco el tono del taller para que se ajuste a todos los demás, ¿de acuerdo? Pero asumo que todos aquí escriben React de alguna manera, y hacemos eso casi todos los días de nuestra vida y pasamos la mayor parte de nuestro tiempo en el navegador, ese es nuestro trabajo, esa es nuestra descripción de trabajo, esa es nuestra responsabilidad, pero a veces a veces estás trabajando solo, a veces estás haciendo un proyecto personal, eres un freelancer y solo quieres mostrar al mundo en qué has estado trabajando y luego, una vez que tienes esta idea de lanzar lo que has estado trabajando, te encuentras bloqueado por todas estas numerosas herramientas en el ecosistema que hacen que sea muy desafiante avanzar. Tienes que pensar en cosas como ¿dónde guardo mis imágenes? ¿Cómo cuido mi base de datos? ¿Dónde guardo mis datos? ¿Cómo manejo la autenticación? ¿Cómo manejo la autorización? ¿Cómo extiendo mi lógica de negocio con funciones sin servidor? ¿Cómo... hay muchas preguntas que hacer una vez que decides dejar el navegador y pasar más allá de ser solo un desarrollador web. Entonces, al final de este taller, te daré todas las herramientas que te ayudarán a resolver este problema con solo unos pocos clics, ¿de acuerdo? Y no estoy bromeando, solo unos pocos clics y podrás lanzar tu proyecto de React y gestionarlo y configurar la autenticación y todas las demás cosas geniales que verás. Y la herramienta responsable de hacer esto se llama AWS Amplify, que voy a compartir en mi pantalla ahora y vamos a ver cómo se ve esta herramienta, ¿de acuerdo? Déjame ver si puedo compartir mi pantalla. Antes de continuar, solo quiero ver el chat y ver si alguien tiene alguna pregunta. Veo que la gente está saludando. Hola, Steve de Ámsterdam, Jason de Nevada, Carlo de Ámsterdam, Emma de Irlanda, Alex del Reino Unido, Zebra de Sri Lanka. Gracias a todos por unirse hoy y por favor, si aún no lo han hecho, preséntense en el chat antes de continuar. De acuerdo, bien. Esta es mi consola de AWS, de acuerdo. Deberían estar familiarizados con esto si han usado AWS antes y si no lo han hecho, no hay de qué preocuparse. Esta es simplemente la página de inicio de una vez que inicias sesión en el panel de control de AWS, se llama consola, la consola de AWS. Una vez que creas una cuenta de AWS, esto es lo primero que ves. Ahora, el servicio en el que estamos interesados hoy no son todos los abrumadores servicios que obtenemos de AWS. Es solo uno de ellos, que es este Amplify de AWS aquí y si no puedes encontrarlo en los servicios visitados recientemente, utiliza la barra de búsqueda para buscar Amplify de AWS. De acuerdo. Hice clic en él desde Kazajistán. Espero haberlo pronunciado correctamente. Cuando encuentres esto, simplemente haz clic en él. De acuerdo. Ahora, solo tenemos dos horas para mostrarte muchas cosas increíbles. Recomendaría que en lugar de seguir el ritmo, si sientes que no puedes seguir, prefiero que prestes atención y obtengas el conocimiento primero. Así que asegúrate de no estar confundido al final del taller. Y una vez que el video esté en YouTube, el video se cargará inmediatamente después del taller. Una vez que esté en YouTube, puedes verlo de nuevo si quieres seguir el ritmo y hacer lo que estoy haciendo hoy. Pero solo para asegurarme de que disfrutes del taller y sea un poco más interactivo, siéntete libre de ver y déjame mostrarte todas estas cosas geniales. De acuerdo, bien. Una vez que hayas abierto el servicio, lo siguiente que debes hacer es hacer clic en este botón que dice nueva aplicación. Una vez que hagas clic en el botón, verás un menú desplegable. Hay publicar una aplicación web, que veremos más adelante. Y luego está construir una aplicación, ¿de acuerdo? Así que queremos construir una aplicación. Y luego podemos darle un nombre a la aplicación, nota nueve. De acuerdo, y confirmar la implementación. Esto tomará unos segundos para configurar el proyecto de Amplify. Y una vez que esté listo, podemos continuar. Solo me aseguro de revisar el chat, no hay preguntas. Si tienes preguntas, si estás confundido con lo que acabo de hacer, por favor di algo en el chat y te ayudaré. De acuerdo. Solo como resumen, fuimos al panel de control de AWS, que se llama la consola, y luego buscamos Amplify de AWS. Y luego hicimos clic en el servicio. Y luego había un botón en el que hicimos clic para crear una nueva aplicación. Y luego desde el botón de nueva aplicación, seleccionamos construir una nueva aplicación, le dimos un nombre, y la implementamos. Eso es todo lo que hemos hecho hasta ahora. De acuerdo, por si te estás uniendo

3. Amplify Studio y Modelo de Datos

Short description:

Vamos a hacer clic en lanzar estudio para acceder al panel de control de Amplify Studio. Amplify es una interfaz de usuario y API de front-end limpia que simplifica el uso de servicios de AWS como DynamoDB, S3, Cognito y Lambda. Modela la base de datos agregando un nombre, título y campo de texto. Puedes validar y agregar más modelos si es necesario. Implementa la tabla y confirma la implementación. Amplify crea una API de AppSync y una instancia de DynamoDB. No tenemos que esperar a que la implementación termine antes de comenzar a trabajar con ella. La autenticación también se implementa. Ve a la sección de contenido para comenzar a agregar datos a la tabla.

y te preguntas qué está pasando. Muy bien. Genial. Asegurémonos de que no me estoy perdiendo el chat de Zoom y otros chats.

Muy bien. Gracias por ayudar con la pregunta, porque iba a preguntar eso.

Muy bien. Genial. Todavía estaba esperando que la implementación se completara.

OK. Ya está hecho ahora. Diego de España. Encantado de conocerte.

Entonces, ahora estamos implementados y lo que necesitamos hacer es hacer clic en lanzar estudio. Ahora, el estudio es básicamente el panel de control de AWS Amplify. En este punto, hemos terminado con los servicios de AWS, estamos fuera del panel de control de AWS por completo. Y estamos en este nuevo mundo llamado Amplify Studio. Y este es básicamente tu panel de control de CMS. Te permite gestionar tus datos. Puedes modelar tu base de datos. Puedes configurar la autenticación, puedes configurar tu servicio de almacenamiento, puedes hacer todas estas cosas geniales. Y una vez que los configures todos, también puedes venir aquí y gestionarlos. Entonces puedes agregar contenido a tu base de datos. Puedes gestionar a todos los usuarios que se han registrado en tu sitio. Y también puedes navegar por los archivos que has almacenado en tu almacenamiento.

Por cierto, creo que este es un buen momento para mencionar que cada uno de estos servicios no son servicios de Amplify, son servicios de AWS. Lo que Amplify está haciendo básicamente es darte una interfaz de usuario y API muy limpia para trabajar con los servicios. Por ejemplo, el servicio de datos está respaldado por DynamoDB, AWS DynamoDB, el almacenamiento está respaldado por el famoso servicio S3, la autenticación está respaldada por Cognito, las funciones están respaldadas por Lambda. Y así sucesivamente. Estos son servicios reales de AWS que son muy populares y que todos conocemos y amamos. Pero esta vez solo estamos usando Amplify para facilitarte su uso sin tener que lidiar con su configuración, ¿de acuerdo? Espero que tenga sentido.

Muy bien, tu próximo paso es modelar la base de datos y para hacerlo, haz clic en este botón de datos o en el elemento de datos en la barra lateral y luego haz clic en el botón agregar modelo. Muy bien, una vez que hayas hecho eso debes darle un nombre al modelo y luego darle un título al modelo así como un campo de texto.

Muy bien, el campo de ID se genera automáticamente y también se rellena automáticamente con tus IDs. Pero el título y el campo de texto son campos personalizados, ¿de acuerdo? Ahora, cada uno de estos campos se puede validar. Puedes asegurarte de que sean obligatorios lo cual no necesitamos para una aplicación de notas. Solo estamos haciendo una aplicación de notas muy simple pero puedes validarlos aquí y también puedes agregar más modelos. Muy bien, puedes agregar más tablas y agregar relaciones entre las tablas pero por ahora solo estamos trabajando con una sola tabla así que no necesitamos agregar más tablas. Solo te lo estoy mostrando para que también tengas la opción. Muy bien, sí, veamos e implementemos esta tabla que acabamos de crear y confirma la implementación. Hola, ¿eres de Marruecos? Encantado de conocerte. Genial, entonces lo que Amplify está haciendo básicamente en este momento es tomar el modelo que describimos y va a hacer dos cosas, va a crear una API de AppSync y va a crear una instancia de DynamoDB y puedes ver la animación aquí mostrando exactamente lo que está haciendo. Así que tenemos AppSync, que es la API que va a, que básicamente si recuerdas el patrón MVC, AppSync se va a encargar de las cosas del controlador y la parte del modelo, que es la base de datos, es manejada por DynamoDB. Y estos son dos servicios que Amplify necesita configurar, así que está bien, vamos directo a ambos, los implementamos y los configuramos, ¿de acuerdo? Si tuvieras que hacer esto manualmente por ti mismo, llevaría unos minutos, como está sucediendo ahora mismo. Y en lugar de hacernos esperar incómodamente a que esto termine mirando la pantalla, lo que he hecho es que he creado otra aplicación antes de este taller, que ya tiene la aplicación de notas implementada, ¿de acuerdo? Así que no tenemos que esperar a que esta implementación termine antes de poder comenzar a construir lo que queremos construir con ella. Pero también tiene la autenticación implementada, ¿de acuerdo? Te mostraré cómo implementar la autenticación cuando lleguemos a ese punto. Pero acabo de hacer estas dos cosas antes del taller, para que no tengamos que esperar a que terminen antes de poder avanzar. Espero que tenga sentido. Si no lo tiene, avísame en el chat y aclararé las cosas aún más, ¿de acuerdo?

Muy bien, ahora, lo que necesitamos hacer con nuestro modelo de datos, que acabamos de implementar, es ir a la sección de contenido y comenzar a agregar datos a esta tabla, ¿de acuerdo? Y para hacer eso, podemos hacer clic...

4. Generación de Datos de Prueba y Uso de la Biblioteca de UI

Short description:

Generemos datos de prueba para poblar nuestra base de datos. Podemos hacer clic en el botón Auto-generar datos de prueba y especificar restricciones para el título y el texto. Amplify luego alimentará nuestra base de datos con los datos de texto generados. Si eres nuevo, aquí tienes un resumen: creamos una aplicación de AWS Amplify, configuramos el modelo de datos y ahora estamos llenando la base de datos. A continuación, exploremos la increíble función de la Biblioteca de UI de Amplify. Al proporcionar una URL de Figma, Amplify puede convertir los componentes del proyecto en componentes de React. Luego puedes usar estos componentes en tu proyecto de React y vincularlos a tu modelo de datos. Es una forma poderosa de agilizar el proceso de diseño y desarrollo. Si estás emocionado, ¡avancemos!

Terminemos de cargar primero. Podríamos hacer clic en el botón Crear nota, lo que básicamente nos permitiría completar un formulario y agregar elementos a la tabla. Pero en lugar de hacer esto, creo que deberíamos generar algunos datos de prueba ya que solo estamos generando datos de texto, ¿de acuerdo? Entonces haz clic en el botón Auto-generar datos de prueba y queremos generar 100 notas y quiero agregar algunas restricciones y asegurarme de que el título sea una oración de entre uno y tres, ¿de acuerdo? Y el texto tenga una longitud de párrafo entre uno y cinco. Estas son solo las restricciones. Entonces, si hago clic en Generar datos, lo que va a suceder es que Amplify comenzará a alimentar nuestra base de datos con todos estos datos de texto, ¿de acuerdo? Entonces puedes ver que estamos obteniendo un montón de 100 filas de Ipsum largo que se están agregando a nuestros datos y solo espera unos segundos para que la base de datos se termine de poblar y luego puedes usar estos elementos de datos o este contenido para probar, ¿de acuerdo?

Hola, Igor de Polonia. Por favor, si no has saludado en el chat, en el chat de Discord, siéntete libre de hacerlo. Solo mantiene la conversación en marcha y permite que todos te conozcan al menos, ¿de acuerdo? Si alguien se ha perdido, por favor dilo en el chat y puedo ayudarte y asegurarme de que todo vaya bien para ti para que puedas seguir el taller hasta el final. Solo como resumen, para asegurarnos de que los que son nuevos no se pierdan, lo que acabamos de hacer es ir a AWS y por cierto, estábamos construyendo una aplicación de Notas con Amplify de AWS. Así que fuimos a AWS, creamos una aplicación de Amplify de AWS y abrimos Amplify Studio que es este entorno de CMS para Amplify y luego el siguiente paso fue configurar el modelo de datos que es solo una aplicación de Notas con un título y un campo de texto y luego hemos llegado a la sección de contenido para poblar esa base de datos con contenido. Eso es básicamente lo que hemos hecho. De acuerdo. Entonces, si te has perdido, avísame si necesitas que explique algo más. De acuerdo. Muy bien, genial. Así que pasemos al siguiente paso que es diseñar nuestra aplicación. Muy bien. Aquí es donde Amplify se vuelve increíblemente asombroso. Esta es la mejor función que tiene Amplify. Esta es mi función favorita de Amplify y necesito que te abroches el cinturón con esta. Muy bien. Así es como funciona, si haces clic en la Biblioteca de UI. Muy bien. Presta atención. Si haces clic en la Biblioteca de UI, obtienes la opción de proporcionar a Amplify una URL de Figma. Muy bien. La URL del proyecto de Figma. Y lo que Amplify hará entonces es tomar todos los componentes de ese proyecto y convertirlos en componentes de React. Muy bien. Luego puedes extraer esos componentes de Amplify a tu proyecto de React. Así que necesito que te tomes tu tiempo para entender esto porque esto es algo que nos lleva mucho tiempo. Pasamos mucha energía tratando de interpretar un diseño que hemos recibido de un diseñador y convertirlos en componentes de React antes de poder comenzar a construir la idea real que tenemos. Así que puedes ver cuánto estamos haciendo nuestro mejor esfuerzo para eliminar esta fricción desde aquí y asegurarnos de que no tengas que lidiar con todos estos problemas. Entonces, para reiterar, básicamente le darías a Amplify una URL. Amplify convertirá todos los componentes en esa URL de Figma en componentes de React, y luego puedes usar ese componente directamente en tu proyecto de React y para hacer las cosas aún mejores, te permite vincular los datos en tu modelo de datos a esos componentes. Entonces, cuando extraigas esos componentes, no tendrás que hacer cosas como axios o usar la API Fetch para obtener datos y vincular manualmente los datos a los componentes. Esos componentes ya estarán vinculados a los datos cuando los extraigas, y todo lo que necesitas hacer es renderizarlos, ¿de acuerdo? Si crees que eso es emocionante, avísame en el chat y sigamos adelante. De acuerdo, antes de seguir adelante, creo que, hola, López de Londres. Sí, Jason dijo que esto es realmente genial. Sí, yo también. Creo que esto es realmente increíble. Es mi función favorita. Hola, Dennis de Rotterdam. Hola, Teodros. ¿Qué debería decir? Hola. Sí, por favor saluda en Discord. Si te desplazas hacia arriba, alguien ya compartió el enlace en Discord, en el chat de Zoom. Hola, Zenok de Nigeria y hola, Ven del Reino Unido. De acuerdo. Sí, Steve, está preguntando si hay un servicio de AWS que haga esta conversión de UI a Figma a React. No, en realidad es algo de Amplify.

5. Incorporación de componentes en el proyecto de Figma

Short description:

Hola, Ben de Londres. Deberías probar Amplify. Pasemos a incorporar componentes en nuestro proyecto de Figma. Hemos creado una plantilla de Figma para que sigas las reglas. Hay cuatro páginas: Readme, Primitives, My Components y Examples. Para personalizar los bloques en la página de Primitives, utiliza el complemento Amplify UI team editor de Figma. Una vez que hayas realizado cambios, Amplify te proporcionará un archivo JSON llamado Team.json. Déjame dejar un archivo de Figma en el chat para que lo uses. Mi colega Allie ha diseñado un proyecto de Figma para que lo utilicemos. Una vez que hayas hecho una copia, pega la URL en Amplify y se cargarán el tema y los componentes. Acepta los cambios y tu equipo se actualizará.

Vale, no hay otro servicio de AWS que haga esto. Muy bien. Hola, Ben de Londres. Deberías realmente probar Amplify al final de esta masterclass, por supuesto, estoy seguro de que te convenceré de que lo pruebes. De acuerdo. Muy bien. Así que pasemos a la siguiente parte.

Vamos a incorporar componentes en nuestro proyecto de Figma. Para hacerlo, haz clic en el botón de empezar. Muy bien. Ahora, para que esto funcione correctamente, hemos creado la plantilla de Figma para que sigas las reglas de esa plantilla. Todo funcionará como se espera. Si haces clic en esta plantilla, en este enlace, debería llevarte a la página web de la comunidad de Figma donde puedes hacer una copia de esta plantilla en particular. Y luego voy a hacer una copia en mi cuenta personal de Figma. Por supuesto, necesitas una cuenta de Figma para poder hacer esto.

Ahora, hay cuatro páginas. La primera página es la página de Readme, que básicamente te explica cómo utilizar esta plantilla. La segunda página es la página de Primitives, que es un aspecto muy, muy importante de este proyecto de Figma. Son los componentes atómicos que se encuentran aquí. Cosas como botones, insignias, campos de entrada, casillas de verificación de tipografía y todas esas cosas. Solo hay una regla que no debes romper, que es no editar las cosas en esta página de Primitives. La razón de esto es que hay una biblioteca de UI que Amplify utiliza para gestionar estos componentes cuando los incorporas en tu proyecto de React. Y si editas este archivo directamente, se desincronizarán con la biblioteca de UI. Pero esto generará la pregunta que espero que algunos de ustedes ya tengan en mente o estén tratando de hacer, que es, ¿qué pasa si quieres personalizar este bloque? En lugar de eso, ¿qué pasa si consideras que el color de este botón es feo y quieres cambiarlo? Hay una forma de hacerlo. Antes de mostrártelo, voy a mostrarte rápidamente las otras páginas. Ahora, la tercera página es la página de Mis componentes, y aquí es donde debes pasar tiempo. Y si quieres agregar más componentes, y si tienes un diseñador con el que estás trabajando, aquí es donde el diseñador creará más componentes para tu aplicación. Y luego la página de ejemplos son solo ejemplos de cómo utilizar esos componentes, ¿de acuerdo? Ahora, como estaba diciendo, si quisiera cambiar estos bloques en la página de Primitives, lo que tendría que hacer es en lugar de editar estos bloques directamente, utilizaría este complemento Amplify UI team editor de Figma que te permite cambiar estos bloques. Así que digamos que queremos cambiar nuestro color primario de verde a rojo. Una vez que haya hecho esto y luego haga clic en Actualizar equipo, deberías ver que el color del botón ha cambiado, ¿de acuerdo? Ahora, una vez que hayas hecho esto, lo que Amplify va a hacer cuando incorpores este proyecto en Amplify es que te proporcionará un archivo JSON llamado Team.json y luego ese archivo JSON se puede pasar a esa biblioteca de UI para personalizar esa biblioteca en particular para que se vea exactamente como en tu proyecto de Figma. Esto puede que no tenga mucho sentido pero cuando empiece a escribir algo de código, verás de qué estoy hablando, ¿de acuerdo? Genial, veamos si hay alguna pregunta. Sí, voy a dejar un archivo de Figma que vamos a utilizar en el chat para que puedas sacar una copia. Ruka dijo que esto suena demasiado bueno para ser verdad. Sí, así me sentí la primera vez que también conocí esta función. De acuerdo, genial. Muy bien, incorporemos un proyecto de Figma en nuestro proyecto de Amplify. Así que mi colega Allie, ella ha diseñado, déjame obtener eso para nosotros, ella diseñó un proyecto para que lo utilicemos en esto, ella tiene un diseño de Figma para que lo utilicemos en esta masterclass. De acuerdo, solo estoy tratando de obtener el enlace para poder pegarlo en el chat para que todos tengan acceso a él. Así que lo único que tienes que hacer es hacer una copia de esto, ¿de acuerdo? El chat se llama... Genial. Así que haz clic en esto y debería llevarte a la página de la comunidad para este enlace y lo único que tienes que hacer es hacer una copia de él y una vez que hayas hecho una copia, podemos copiar la URL y volver a Figma y luego pegar la URL aquí, ¿de acuerdo? Una vez que hayas hecho eso, haz clic en Continuar y dale unos segundos a Amplify y lo que Amplify va a hacer ahora, tal como describí anteriormente, es ir a Figma y primero, extraerá el tema. Así que recuerda cuando te hablé del archivo theme.JSON? Así que este es el archivo aquí y básicamente puedes ver si has utilizado Tailwind antes, es ese objeto de configuración de Tailwind. Básicamente, un gran objeto de configuración que te permite configurar los estilos para la biblioteca de UI. Pero lo genial de Amplify UI es que puedes generarlo. No tienes que escribirlo... A diferencia de Tailwind, no tienes que configurar estos estilos manualmente. En su lugar, la interfaz de usuario del tema de Figma puede generar este objeto para ti y luego simplemente puedes insertarlo en tu configuración cuando incorporemos esto en React y todo tu equipo se actualizará. Muy bien, una vez que aceptemos todos los cambios para los estilos que puedes ver que son solo nuestros estilos de tipografía, nuestros colores y todas esas cosas, podemos obtener la opción de aceptar todos nuestros componentes. Así que puedes ver que tenemos... Permíteme mostrarte los componentes que tenemos.

6. Vista previa y vinculación de datos a componentes

Short description:

Podemos navegar y previsualizar los componentes de interfaz de usuario de Node, la barra de navegación, el componente createNodes y el componente updateNodes en Amplify. Estos son componentes React reales, no solo imágenes de Figma. Podemos escribir, cambiar valores y hacer clic en botones en ellos. Si alguien tiene problemas con el archivo de Figma, podemos continuar y abordarlo más tarde. El siguiente paso es vincular datos al componente de interfaz de usuario de Note. Podemos configurar el componente y establecer etiquetas de texto para note.text y note.title. También podemos vincular eventos, como eliminar una nota, estableciendo un evento onClick.

Tenemos un componente de interfaz de usuario de Nuke que te permite previsualizar los Nodos. Tenemos un componente updateNodes para actualizar el Nodo para tener la barra de navegación y luego un componente createNodes. Así que solo necesitamos aceptar todos esos componentes que se han incorporado.

Una vez que los aceptemos todos, básicamente podemos navegar por ellos desde Amplify. Esto ya no es Figma. ¿Y sabes qué? Si hacemos cambios en Figma, también podemos venir aquí y hacer clic en sincronizar con Figma para actualizar Amplify con un nuevo componente que hemos agregado en el proyecto de Figma.

De acuerdo, genial. Básicamente, podemos venir aquí y navegar por nuestros componentes. Tenemos nuestros componentes de interfaz de usuario de Nodo que nos permiten previsualizar los nodos. Tenemos la barra de navegación que es simplemente eso, una barra de navegación. Tenemos el componente createNodes donde agregamos nuestras cosas de nodos. Tenemos el componente updateNodes donde podemos editar nodos existentes. De acuerdo. Y algo que debes tener en cuenta es que estos no son imágenes. No son solo imágenes de representación para que veamos cómo se ve el componente. Estos son realmente componentes de React que se están representando. De acuerdo. Y para demostrártelo, puedo hacer clic y comenzar a escribir dentro de este título. ¿No es increíble? Como si solo tomáramos una imagen. Eso es lo que es, una imagen de Figma y la incorporamos en Amplify, y ahora es un componente de React que está realmente vivo. Podemos, podemos escribir en él. Podemos cambiar los valores. Podemos hacer clic en botones, aunque aún no puedan hacer nada, pero básicamente funciona.

De acuerdo. Ves un error. Verifica que el enlace del archivo de Figma sea válido. ¿Alguien más tiene este error, asegurémonos de que esté bien. De acuerdo. ¿Alguien puede acceder, alguien más puede acceder al archivo de Figma? Así que ahora tengo el enlace y luego intento abrirlo y funciona bien en mi caso. ¿Alguien más puede confirmar si pueden reproducir el problema en este enlace? De acuerdo, genial. Entonces, Jason, no he visto este error antes, pero tal vez pueda, sigamos adelante y solo mírame seguir el curso y puedo ayudarte al final de la masterclass. De acuerdo, genial. Eso es todo lo que necesitamos hacer para incorporar los componentes en Figma. De acuerdo, el siguiente paso entonces es comenzar a vincular data a este componente. Y para hacer eso, necesitamos comenzar con los componentes de interfaz de usuario de Note. De acuerdo, esta es la segunda cosa principal que quería aprender hoy. Todo lo que necesitas hacer es hacer clic en este botón de configuración. Y luego, desde la sección de configuración, podemos seleccionar el texto al que deseamos vincular data. Y luego podemos establecer cada etiqueta de texto en note.text. De acuerdo, puedes ver que se está pasando el modelo de nota al componente y luego se está estableciendo la propiedad de etiqueta en note.text. Puedes hacer lo mismo con el título también. Puedes establecer el título de este componente de interfaz de usuario de Note como note.title. Y puedes ver que comienza a poblar este componente con datos de Lorem ipsum, que es exactamente lo que tenemos en nuestra database. De acuerdo, genial. El siguiente paso es que también podemos vincular eventos. Entonces, si quisiera eliminar este elemento de nota en particular, lo que puedo hacer es hacer clic en el bote de basura y luego establecer un evento onClick. Y lo que quiero que haga el evento onClick es eliminar este modelo de nota en particular. De acuerdo, esa es la acción. Y luego estamos eliminando del modelo de nota, y queremos encontrar las notas,

7. Vinculación de datos a componentes

Short description:

Vinculamos datos al componente Notewire haciendo clic en el botón de configuración y vinculándolos a ellos. Hicimos lo mismo con CreateNote, pero esta vez solo vinculamos datos a los eventos para crear nuevas notas. Y lo mismo ocurre con UpdateNote. No hemos hecho nada con la barra de navegación. Lo haremos cuando lo pongamos en el código de React. Eso es prácticamente todo lo que necesitamos hacer para vincular datos a este componente.

queremos eliminar basado en el ID de las notas. ¿De acuerdo? Y eso es prácticamente todo. Hemos terminado con el componente de interfaz de usuario de notas. Y antes de continuar, quiero asegurarme de que nadie se haya perdido. Si crees que esto es genial, avísame en el chat. Y también verifica si alguien tiene algún problema en el chat de Zoom. Sí. Esto pregunta si son componentes de estilo. ¿Podemos ver el código? Sí. No son componentes de estilo. Básicamente son estilos regulares que se aplican al elemento React, ¿de acuerdo? Para Amplify, preguntó si podemos ver el código. Amplify es completamente flexible y siempre puedes hacer una extracción en cualquier momento. Entonces, cuando importemos este proyecto a React, verás el código real que se está generando. Verás cómo se ve. Como, verás los componentes de React como código de React, no como la interfaz de usuario de Amplify, ¿de acuerdo?

De acuerdo. Volvamos a la biblioteca. También lo vincularemos. Lo que quiero que suceda cuando hagamos clic en el botón de guardar es crear un nuevo elemento de nodo. Y queremos crear un nodo y luego el primer campo de texto se vinculará al título, y el segundo campo de texto se vinculará al nodo. Solo necesitas repetir lo mismo para actualizar nodos. Configurar y hacer clic en el mismo botón. Y luego actualizar esto. Crear. Queremos actualizar el modelo de nodo. Y queremos actualizar un nodo después de encontrarlo en el ID. Y luego queremos asegurarnos de que el título se establezca en el primer campo de texto y el texto se establezca en el segundo campo de texto, ¿de acuerdo? Y por último, como no vamos a mostrar interfaces de usuario de nodos individuales, también necesitamos hacer una colección de esta interfaz de usuario. Entonces, si hacemos clic en configurar una vez más, puedes hacer clic en crear colección. Y luego podemos dar un nombre a la colección. Y lo que esto hará es crear otro componente dentro de Amplify ahora. Y el componente es básicamente una lista de componentes de interfaz de usuario de nodo, ¿de acuerdo? Así que vamos a representarlo como una cuadrícula y tal vez una cuadrícula de 3.0. Y agreguemos un espacio de 10 píxeles entre cada uno de ellos. Y por último, me gustaría habilitar la paginación, lo que nos permitirá navegar a través de nuestros datos utilizando esta paginación de pie de página, ¿de acuerdo? Y eso es prácticamente todo lo que necesitamos hacer para vincular data a nuestros componentes. Y para resumir, lo que hemos hecho es vincular data al componente Notewire haciendo clic en el botón de configuración y vinculando data a ellos. Hemos hecho lo mismo con CreateNote también, pero esta vez solo hemos vinculado data a los eventos para crear nuevas notas. Y lo mismo ocurre con UpdateNote también. No hemos hecho nada con la barra de navegación. Lo haremos cuando lo pongamos en el código de React. Eso es prácticamente todo lo que necesitamos hacer para vincular data a este componente. Como no hay preguntas, voy a pasar a importar este proyecto a un proyecto de React ahora. Pero si tienes alguna pregunta, voy a esperar unos segundos y responderé tu pregunta antes de continuar. Alguien está escribiendo, pero algunas personas están escribiendo así que démosles unos segundos para hacer sus preguntas porque acabamos de alcanzar un nuevo hito. Así que antes de continuar, quiero asegurarme de que nadie se haya perdido. En Create Note hicimos una actualización, ¿no deberíamos estar creando una nota? Confirmémoslo. Create Note, Configurar, Guardar. No, estamos creando un nuevo elemento, no actualizando. Luego, en Update Note es donde estamos actualizando, ¿de acuerdo? Esto, estamos actualizando. De acuerdo, ahora podemos continuar. En resumen, si te has perdido completamente, puedes ponerte al día con el taller cuando veas el video, ¿de acuerdo? Pero no olvides ponerte al día en el taller. Eso es lo importante. De acuerdo. Continuemos, ahora necesitamos importar esto a un proyecto de React, ¿de acuerdo? Y para hacer eso, primero necesitamos, por supuesto, crear un proyecto de React. Creemos un proyecto de React, mueve mi terminal, y para crear un proyecto de React, por supuesto, necesitamos hacer React workshop.

8. Configuración de Dependencias

Short description:

Para crear un proyecto de React, ejecuta npx create-react-app [nombre-de-la-aplicación]. Instala las dependencias aws-amplify/uireact y aws-amplify. La biblioteca uireact se encarga de la interfaz de usuario, mientras que la biblioteca aws-amplify maneja las solicitudes de búsqueda y la mutación de datos. Instala la CLI de Amplify y ejecuta Amplify configure para autorizar la terminal. Estas son las dependencias que necesitamos para el taller.

Todos sabemos cómo crear un proyecto de React. Pero por si acaso, solo para recordar a todos, ejecuta npx. Crea una aplicación de React y dale un nombre a tu aplicación, ¿de acuerdo? Y déjame asegurarme de que todos puedan ver mi terminal. Y una vez que hayas hecho eso, el siguiente paso sería 3D en ese proyecto. Antes de ahora, ya he creado un proyecto, ¿de acuerdo? Y el siguiente paso después de crear un proyecto es instalar algunos, déjame ver, npm install aws-amplify slash uireact y aws-amplify. Ahora estas dos bibliotecas son las únicas dependencias que necesitamos para poder usar, extraer nuestros componentes y usarlos en nuestra aplicación, ¿de acuerdo? La primera dependencia, que es uireact, recuerda cuando te estaba diciendo que la página de primitivas depende de la biblioteca de interfaz de usuario y esa biblioteca de interfaz de usuario es la que se configurará. Entonces básicamente, si estás familiarizado con Tailwind, uireact es el Tailwind de Amplify, ¿de acuerdo? Algo así, no creo que sea una buena analogía, pero espero que tenga sentido. Esta es tu biblioteca de interfaz de usuario, esto es lo que se encarga de que tu aplicación se vea bien, ¿de acuerdo? Luego, la segunda biblioteca que estamos instalando es como el AXIOS o los clientes de GraphQL de AWS Amplify. Esto te permite hacer todas tus solicitudes de búsqueda y mutar tus data y todas esas cosas. Aunque ya no vamos a hacer eso manualmente porque hemos configurado nuestros componentes para que tengan datos vinculados a ellos, aún necesitamos tener esta biblioteca instalada para que esos componentes puedan hacer esas cosas. De acuerdo, dicho esto, lo último que necesitamos hacer, lo cual también he hecho, es instalar la CLI de Amplify. De acuerdo, la CLI de Amplify te permite ejecutar comandos de Amplify directamente desde la terminal. Y necesitamos hacer eso para poder extraer nuestros componentes en nuestros proyectos de React, ¿de acuerdo? Y antes de poder ejecutar los comandos de Amplify, por favor ejecuta Amplify configure. Y lo que esto hará es redirigir el navegador a AWS para autorizar la terminal. Y una vez que hayas autorizado la terminal, la terminal tendrá acceso para hacer cosas como crear nuevas aplicaciones de Amplify, extraer proyectos de Amplify, enviar a Amplify y todas esas cosas. Y eso es todo lo que necesitamos saber sobre las dependencias.

9. Extracción de Proyectos desde Amplify

Short description:

Para extraer nuestros proyectos desde Amplify hacia nuestro proyecto de React, regresa a Amplify Studio y haz clic en las instrucciones locales. Copia el comando Amplify pool y ejecútalo en el directorio del proyecto. Configura la CLI de Amplify ejecutando Amplify Configure. Luego, en Amplify Studio, haz clic en Instrucciones de Configuración Local y pega el comando en la terminal. Autentica la CLI en el navegador y responde algunas preguntas. El código generado incluye la carpeta Amplify para el módulo, la carpeta API para el backend y la carpeta de componentes de interfaz de usuario en el directorio de origen.

El siguiente paso ahora es extraer todos nuestros proyectos desde Amplify hacia este proyecto de React, ¿de acuerdo? Entonces, para hacer eso, regresa a Amplify Studio, haz clic en las instrucciones locales, y luego copia el comando Amplify pool, ¿de acuerdo? Así que repite eso una vez más, solo por si no estabas mirando la pantalla. Amplify Studio, haz clic en las instrucciones locales en la parte superior derecha de la barra de navegación, y luego copia el comando Amplify pool. Y una vez que hayamos hecho eso, ejecuta el comando en las reglas del proyecto, ¿de acuerdo? En este caso, hemos configurado un proyecto llamado Notepad, que es un proyecto de React. Todo lo que necesito hacer ahora es ejecutar el comando Amplify pool en ese proyecto, ¿de acuerdo? Ahora, lo que va a suceder es que Amplify nos va a dirigir al navegador para autorizar la terminal y básicamente asegurarse de que esta instancia de nuestra aplicación Amplify esté dando acceso a la terminal para controlar todo lo que sucede en Amplify Studio, ¿de acuerdo?

De acuerdo, estábamos instalando la CLI de Amplify. Entonces, en ese caso, una vez que la hayas instalado, lo siguiente que debes hacer es configurar la CLI, ¿de acuerdo? Solo necesitamos asegurarnos de que, déjame asegurarme de que el chat esté abierto para poder ver los mensajes de todos. De acuerdo, una vez que hayas hecho esto, necesitas ejecutar Amplify Configure, ¿de acuerdo? Y esto básicamente autenticará tu CLI y permitirá que tu CLI haga solicitudes en tu nombre utilizando AWS, ¿de acuerdo? Genial. El siguiente paso es extraer realmente nuestro proyecto de Amplify hacia nuestro proyecto de React. Y para hacer eso, volverías a Amplify Studio y mientras estás en Amplify Studio, haz clic en Instrucciones de Configuración Local, ¿de acuerdo? Y luego copia el comando que encuentres aquí y luego pégalo en tu terminal. Y lo que va a suceder es que Amplify abrirá el navegador y te pedirá autorizar la CLI para tener acceso a esta instancia de tu proyecto Amplify. ¿De acuerdo? Una vez que recibas la pregunta, simplemente haz clic en sí. Y una vez que se haya completado la autenticación, puedes cerrar la pestaña, regresar a la terminal y simplemente responder algunas preguntas que Amplify te hará para conocer tus respuestas. Para conocer mejor tus proyectos. Y la primera pregunta es, ¿cuál es tu editor de código, que en este caso es VS Code. Estamos escribiendo JavaScript, por supuesto. Y esto muestra que también admitimos iOS, Flutter y Android. Si tienes amigos que te permitirán usar Amplify pero no son desarrolladores de JavaScript, avísales, por favor. Y también admitimos otros react, otras bibliotecas de JavaScript, no solo react, pero por ahora estamos usando react. Y esto, nuestro código vive en el subdirectorio y vamos a acelerar nuestra compilación en la carpeta build. Y nuestro comando de compilación es npm run build y npm run start para el comando de inicio. Y la razón por la que se nos ha preguntado esto es que cuando implementamos esta aplicación, necesita saber cuáles son los comandos para ayudarnos a completar la implementación. Puedes ver que ahora está generando componentes de interfaz de usuario. Esto es muy importante. Ahora ha terminado de sincronizar los componentes de interfaz de usuario. Y luego nos pregunta si queremos poder modificar el backend. Lo que esto significa es que si queremos extraer nuestro modelo hacia nuestro proyecto de React, podemos hacerlo. Y eso básicamente significa que luego podemos usar el esquema GraphQL para modelar, agregar más modelos de datos, agregar autenticación personalizada, todas esas cosas. Entonces, si no quieres usar Amplify Studio, usando una CLI también puedes usar eso para administrar la mayoría de tus cosas de Amplify, ¿de acuerdo? Entonces digamos que sí a esto, y luego dale un tiempo para extraer nuestros modelos y la autenticación. Permíteme verificar si hay preguntas. Gracias Jason por ayudar con eso, realmente lo aprecio. Alex, no, no extraje tu informe de Amplify. Inicialmente, creé un proyecto de React, y básicamente lo que hice, porque no quiero que esperemos a que se configure el proyecto de React, lo hice antes de que comenzara la masterclass, pero es solo un proyecto de React simple, nada especial al respecto, ¿de acuerdo? De acuerdo. Así que estamos esperando a que se complete la extracción de nuestro módulo, y una vez que termine, podemos echar un vistazo a cómo se ve todo este código que se generó. Sí, asegurándome de que mi conexión a internet siga bien. De acuerdo, genial. Ahora hemos terminado de extraer, y podemos abrir esto en Visual Studio Code. De acuerdo. Ahora, si estás familiarizado con React, si has configurado un proyecto de React antes, puedes notar fácilmente que algunas cosas son extrañas en este proyecto. Lo primero es la carpeta Amplify, ¿de acuerdo? Ahora, la carpeta Amplify es donde vive tu módulo. Entonces podemos abrir la carpeta API en la carpeta backend. Y puedes ver que esto es básicamente solo un tipo de esquema, que podemos seguir adelante y agregar más si queremos, tal vez agregar otra tabla y básicamente definir el tipo y empujar esto a algún archivo y crear una nueva tabla para nosotros, ¿de acuerdo? Entonces, básicamente, así es como puedes hacer esto localmente. Y luego, lo otro que tenemos es la configuración para la autenticación, lo cual debería darte una pista de que ya tenemos la autenticación configurada, ¿de acuerdo? Te mostraré cómo hacer eso cuando lleguemos a esa etapa. Y luego, en la carpeta de origen, carpeta SRC, puedes ver que tenemos esta carpeta de componentes de interfaz de usuario. Aquí es donde se pone interesante. Para esto, alguien preguntó, creo que Sarah preguntó anteriormente si podemos ver el código de esos componentes que se generaron. Y sí, puedes verlos. Estos son archivos puramente de TypeScript y Javascript. Si quieres trabajar con TypeScript, está bien. Pero estos son ambos archivos y podemos elegir el que queramos.

10. Renderizado de Componentes y Configuración de Amplify

Short description:

Abre el componente NoteUI y observa los componentes React y de la biblioteca UI. Amplify es flexible y te permite expulsar y seguir trabajando sin sincronizar con Figma. El proyecto incluye el archivo team.json para los temas generados y el archivo de configuración AWS exports para las credenciales de la API. Comienza abriendo el archivo JS y ejecutando npm start para ver la aplicación React simple. Importa componentes de la interfaz de usuario como la barra de navegación y configúralos. Configura la aplicación en el archivo index.js importando amplify, amplify provider, el archivo de configuración y los estilos. Ejecuta amplify.configure y envuelve la aplicación con Amplify Provider. Verifica en el navegador los componentes renderizados. Sin preguntas, así que pasemos al renderizado de la colección Noty.

En este caso, digamos que abrimos el componente NoteUI. Puedes ver que es básicamente un componente React con componentes de la biblioteca UI como flex, text y view que se importan desde la biblioteca UI. Estos son solo componentes de la biblioteca UI. Pero el resto son básicamente solo componentes React. Como mencioné, Amplify es muy flexible. No te limita a nada. Si quieres expulsar y seguir trabajando desde aquí sin sincronizar más con Figma, este es tu código. Puedes hacer con él lo que quieras, ¿de acuerdo?

Entonces, eso es básicamente cómo se ve el proyecto. Como también mencioné, el archivo team.json o archivo js contiene los temas que se generan mediante el complemento del equipo de interfaz de usuario en Figma. Entonces, si cambias cosas en Figma en tu estilo, se genera como objetos adyacentes y luego puedes pasar este objeto JavaScript a tu biblioteca de interfaz de usuario cuando la configures, ¿de acuerdo? Y luego, otro archivo de configuración que debes conocer es AWS exports config, que es como tu archivo .env. Puedes ver que esto se ignora automáticamente en .git, para que no lo subas accidentalmente a GitHub, ¿de acuerdo? Estas son tus credenciales para acceder a tu API. No hagas esto público, no lo subas al control de código fuente, ¿de acuerdo? Bien, con todo esto dicho, aprovechemos todo lo que hemos trabajado. Lo primero que debemos hacer es abrir ese archivo JS y convertirlo en un componente muy simple. Ejecutemos npm start para iniciar la aplicación. Y luego abramos el navegador. Nos aseguraremos de que sea el puerto correcto. Abre localhost:3000 y obtendremos una aplicación React muy simple que solo dice `up`, ¿verdad? El siguiente paso sería importar algunos de esos componentes de la interfaz de usuario. Algunos de esos componentes de la interfaz de usuario los podemos importar desde la carpeta de componentes de la interfaz de usuario. Entonces, lo primero que me gustaría renderizar es la barra de navegación. Y también me gustaría configurar la barra de navegación para que sea 100%. Entonces, puedes ver que también puedes establecer los estilos de la barra de navegación directamente, 100%, y luego establecer el margen inferior, para darle un poco de espacio en la parte inferior, margen inferior de 20 píxeles. ¿De acuerdo? Y luego podemos abrir el navegador y ver cómo se ve esto. Dice `compile`, así que una vez que hayas terminado de compilar puedes echarle un vistazo. Este es el navegador. Bien, esto es algo, ¿verdad? No es exactamente lo que representamos, porque en Figma no se parece a nuestro diseño, pero al menos puedes ver el progreso. Puedes ver el progreso. Ahora, la razón por la que se ve tan horrible es que no hemos importado la biblioteca de interfaz de usuario de la que te hablé antes, así que configuremos toda la aplicación para poder usar esa biblioteca y otras configuraciones que se requieren. ¿De acuerdo?

Entonces, si vas al archivo index.js, lo que debemos hacer aquí es importar algunas cosas, debemos importar amplify, también debemos importar amplify provider, debemos importar el archivo de configuración, ver AWS export, y por último, debemos importar nuestros estilos. Importa de aws/uireact/styles. Eso es todo. ¿De acuerdo? Bien. Una vez que hayamos hecho esto, podemos ejecutar amplify.configure y pasarle el objeto de configuración para configurar Amplify. Y por último, solo necesitamos envolver nuestra aplicación con Amplify Provider. Ahora, aquí es donde puedes establecer el tema para tu proyecto. Básicamente, puedes importar este objeto de tema de Amplify aquí en Studio y pasarlo a esta propiedad de tema y todos los cambios de interfaz de usuario que hayas hecho en Figma también se reflejarán aquí. Pero como no hemos hecho ningún cambio en comparación con el diseño que estamos utilizando, no necesitamos hacer esto. Es opcional. ¿De acuerdo? Bien. Entonces, si volvemos al navegador, deberías ver que todo se ve bien ahora. ¿De acuerdo? ¿Alguien tiene preguntas antes de continuar? En realidad, estamos organizando nuestros componentes ahora. Estos son componentes reales. No son imágenes. Puedes seleccionar tu texto, hacer clic en los botones y todo se ve bien. Avísame si tienes preguntas antes de pasar al siguiente paso. Si tienes preguntas, puedo responderlas. Genial. Entonces, sin preguntas. Y el siguiente paso es renderizar la colección, la colección Noty.

11. Renderizado de Componentes de Creación y Actualización

Short description:

Para mostrar el componente de creación, importamos noty-collection en el archivo app.js. Ocultamos los formularios de creación y actualización estableciendo su propiedad display en none y agregando una clase de modelo. Utilizamos los estados de React para controlar la visibilidad de los modales. Para establecer un evento onClick en la barra de navegación, utilizamos la función Override para anular las propiedades en elementos individuales. Esto nos permite proporcionar funcionalidad adicional a nuestros componentes generados por Amplify.

De acuerdo. Y para hacer eso, necesitamos volver al archivo app.js e importar simplemente noty-collection. Y eso es todo. Eso es todo lo que necesitamos hacer. Si vuelvo al navegador, puedes verlo. ¿Verdad? Increíble. Es todo lo que necesitamos hacer. Tenemos nuestro Noty que se renderiza correctamente y podemos eliminar algunos de ellos porque los eventos onClick están funcionando ahora. De acuerdo. El siguiente paso es crear, para renderizar el componente de creación. CreateNote y UpdateNote. De acuerdo. Ahora se mostrará en la parte inferior de esto. Y por cierto, también tendremos nuestra paginación funcionando para que puedas navegar por estos archivos. De acuerdo. Entonces, los formularios de creación y actualización se muestran debajo de las páginas. Quiero que floten como un modelo. Entonces, lo que vamos a hacer por ahora es ocultarlos estableciendo la propiedad display en none. También necesito establecer esto, darle una clase de, clase modelo o modelo más bien, para que cuando lo estilice como un modelo, flote cuando aparezca. Y para obtener estos estilos, simplemente los copiaré de mis notas. Y luego los pegaré en mi index.css. De acuerdo, esto básicamente es solo una posición absoluta y permitir que flote encima de todo. Eso es todo. Este es solo un estilo de modal regular, nada especial, ¿de acuerdo? Genial. Si vas al navegador, puedes ver que puedes encontrar ese correo electrónico porque ahora está oculto, estableceremos la propiedad display en none. Luego podemos usar los estados de React para alternar si se muestra o no, ¿de acuerdo? Entonces creemos un estado de mostrar, mostrar estado de modal de creación y establezcamos el estado de mostrar modal de creación y básicamente usemos state. Esto se establecerá en su valor predeterminado, que será false, ¿de acuerdo? Y luego hacemos lo mismo aquí, pero para el modal de actualización, ¿verdad? Bien, eso es prácticamente todo. Lo que podemos hacer entonces es decir que si el modal de creación no es verdadero, entonces la propiedad display debe establecerse en none, y lo mismo se aplica a la actualización, solo necesitamos cambiar esto a modal de actualización. De acuerdo, volvamos al navegador y aún no hay cambios visibles que aún no se están produciendo, pero luego podemos comenzar a establecer eventos onClick en los botones para mostrar estos modales, ¿de acuerdo? Y lo primero que debemos hacer es hacer clic en crear nodos para crear un nuevo nodo. Y para hacer eso, necesitas, necesitamos encontrar una forma de establecer un evento onClick en la barra de navegación. Y si abro la barra de navegación, y encuentro el botón de crear nodos, y le establezco onClick, ¿de acuerdo? Pero el problema con esto, déjame ver si hay preguntas. ¿Podrías abrir las herramientas de desarrollo? Dije, claro, y esto está hecho, pero dame un segundo, déjame terminar con este en particular. Asegúrate de que conozco esa pregunta. Si estás perdido, avísame para poder responder preguntas si sigo adelante, ¿de acuerdo? Como dije, podría ir fácilmente y establecer eventos onClick en estos elementos en particular directamente pero esto no es práctico porque si extraemos nuestros componentes, si vamos a Figma, hacemos cambios, y sincronizamos nuestro componente una vez más, va a anular todo lo que está aquí. Entonces, a menos que lo estés inyectando por completo, lo que significa que no tienes la intención de sincronizarlo nunca más con Figma, entonces está bien. Pero no es la forma correcta de hacerlo si quieres seguir realizando cambios, ¿de acuerdo? Jason me está preguntando si esto es correcto. Sí, configurar, configurar. Solo necesitas importar tus estilos también, ¿de acuerdo? Olvidé importar tus estilos. Y déjame mostrarte cómo se ve, por cierto. Index.js. De acuerdo, genial. Luego pasamos a cómo establecer el evento onClick utilizando NavBar en este caso. Dado que no podemos hacerlo directamente dentro de un componente NavBar porque lo anulará fácilmente. Entonces, el siguiente paso es realmente usar esta cosa llamada Override, ¿de acuerdo? Override te permite anular propiedades en elementos individuales dentro de un componente en particular y cómo funciona es básicamente, en el componente renderizado, pasar una propiedad overrides, ¿de acuerdo? La propiedad overrides toma un objeto y ese objeto apunta a los elementos en tu componente Navbar. Y para encontrar, para apuntar al componente de número, los elementos en el componente Navbar, cada uno de los elementos tiene un ID de anulación.

12. Agregando Funcionalidad a los Componentes

Short description:

Para proporcionar funcionalidad adicional a tus componentes generados por Amplify, copia el ID y pásalo como una prop. Establece eventos onClick y crea un modelo. Oculta el modelo con un icono X. Para mostrar el modelo de actualizaciones, utiliza elementos de anulación en lugar de anulación. Pasa la nota a actualizar al EditModel. Crea un nuevo estado llamado NoteToUpdate. Haz clic en el estado para actualizar el valor. Si tienes dudas, pide ayuda. Crea una colección haciendo clic en Configurar y Crear colección. Ejecuta amplify pool para obtener los nuevos componentes.

Así que puedes ver que tenemos este ID en particular aquí que solo necesitas copiar. Una vez que lo copies, puedes pegarlo aquí. Y luego podemos pasarlo como un objeto. Esto se convierte en una prop para este elemento en particular, ¿de acuerdo? Entonces podemos establecer eventos onClick aquí para lo que queramos hacer. De acuerdo, así es como proporcionas funcionalidad adicional a tus componentes, a tus componentes generados por Amplify, ¿de acuerdo?

Y podemos establecer create model aquí en verdadero. De acuerdo, si hacemos clic en eso, tendremos errores. Permíteme refrescar. Creo que esto es Veamos. ¿Qué me he perdido? Sí, necesito eliminar esto. De acuerdo, genial. Entonces podemos hacer clic en el botón de crear y luego se mostrará el modelo, ¿de acuerdo? Y el siguiente paso es ocultar el modelo con un botón X o un icono X. Para hacer eso, podemos volver a puedes encontrar los componentes de modo de creación y encontrar el icono, que se llama My Icon aquí, ¿de acuerdo? Y luego en el archivo app.js puedes anular ese componente y establecer un evento onClick en él. De acuerdo. Establece show create model en falso, ¿de acuerdo? Si hago clic en esto ahora, el modelo desaparece, así que ahora tenemos un modelo funcional, ¿de acuerdo?

Podemos hacer lo mismo para el modelo de actualizaciones, solo copia esto, pégalo en el modelo de actualizaciones y reemplaza esto con show update model, ¿de acuerdo? Genial, así que ahora tenemos un modelo funcional y realmente puedes comenzar a ingresar valores aquí. Entonces, si hago clic en el botón de crear nodo y establezco estos valores como pruebas, y nodo de prueba, y hago clic en guardar, el modelo no desaparece, lo arreglaremos más tarde, pero si vas a la última página, puedes ver que si cierro este modelo, puedes ver que tenemos nuestras pruebas y nodo de prueba se agrega a la base de datos, ¿de acuerdo? Y esto es muy rápido porque Amplify funciona sin conexión, entonces lo que sucede es que va a almacenar los elementos en la memoria local en tu almacenamiento de sesión, y luego, una vez que lo hace, intentará o comenzará a intentar enviarlo a la base de datos cuando estés en línea, ¿de acuerdo? Así es como funciona esto. Y luego, asegurémonos de que no haya preguntas, antes de continuar, genial.

Entonces, el siguiente paso es mostrar el modelo de actualizaciones, ¿de acuerdo? Para hacer eso, queremos poder hacer clic en este icono de actualización para mostrar el modelo, el modelo de actualizaciones. Pero el problema con esto es que cada uno de estos elementos tiene este icono. ¿Cómo podemos apuntar a todo y establecer el icono en ellos? O establecer los eventos en ellos, ¿de acuerdo? Para hacer eso, tendríamos que usar algo más que no sea anulación. Se llama anulación de elementos. La diferencia entre esto es que usas esto para colecciones y luego usas anulación para elementos individuales, ¿de acuerdo? Entonces, anulación de elementos va a tomar una función que recibe un objeto que contiene nuestro elemento, y luego devuelve un objeto. Y dentro del objeto que devuelve está la anulación, ¿de acuerdo? Y dentro de esa anulación, podemos apuntar a mi icono nuevamente. O déjame mostrar cómo se llama en la actualización. Abramos el componente updateNode. Oh, no esto, abramos el componente nodeUI y encontremos cómo se llama esto. Debería llamarse EditButton aquí. Entonces podemos ponerlo aquí y establecer un evento onClick en esto. Y esto básicamente establecerá updateModel en verdadero. De acuerdo. Entonces, si volvemos y hacemos clic en esto, funciona. Y como ya hemos configurado el icono de cierre, esto debería cerrar el modelo, ¿de acuerdo? Y lo siguiente es pasar la nota que realmente queremos actualizar a ese EditModel en particular. Y para hacer eso, necesitamos un nuevo estado que se llama NoteToUpdate. Y podemos establecerlo en el elemento que tenemos de esta función, ¿de acuerdo? Y luego podemos establecer updatesNote, que es la nota que queremos actualizar, en NoteToUpdate. Y por último, puedes crear el estado. Entonces, NoteToUpdate y establecer NoteToUpdate React.useState, ¿de acuerdo? Ahora podemos hacer clic en el estado y cambiar el valor de prueba a prueba y luego hacer clic en guardar, y verás que actualiza las notas. Ahora tuve un problema tratando de averiguar cómo asegurarme de que cuando haga clic en cualquiera de los componentes actualice el valor. No pude resolver eso antes del taller pero te prometo que al final del taller cuando esté disponible en un video de YouTube dejaré un comentario en el video sobre cómo hacer esto, ¿de acuerdo? Hasta ahora todo bien, asegurémonos de que nadie esté perdido y asegurémonos de que nadie tenga preguntas. Si tienes alguna duda sobre algo por favor avísame y puedo responder eso. Jason está escribiendo. De acuerdo. ¿Creaste la colección? Permíteme mostrarte cómo crear la colección. ¿Tienes algo como esto en tus componentes? Esto, los componentes de colección NotUI. De acuerdo. Oye, creo que ahí es donde te lo perdiste. Solo como recordatorio, si quieres crear una colección haz clic en Configurar y haz clic en Crear colección. De acuerdo. Y dale un nombre y eso es todo. De acuerdo. Eso es lo que te perdiste. ¿De acuerdo? Genial. Y una vez que lo hagas, Jason, simplemente ejecuta amplify pool en tu terminal y eso obtendrá los nuevos componentes para ti. ¿De acuerdo? De acuerdo.

13. Manejo de Autenticación y Autorización

Short description:

Puedes realizar cambios en los elementos de la interfaz de usuario sin anulaciones, pero no se recomienda. Hemos completado la creación de una aplicación de código con funcionalidad CRUD para notas. El siguiente paso es manejar la autenticación, seguida de la autorización. La autenticación implica establecer la fortaleza de la contraseña y desplegarla. La autorización garantiza que los usuarios solo puedan acceder a sus propias notas. Vamos a habilitar la autenticación del propietario y deshabilitar el acceso a las notas para otros usuarios.

Entonces, sigamos adelante. ¿Podemos hacer estos cambios dentro de los elementos de la interfaz de usuario sin anulaciones? Sí. Por supuesto, puedes hacer esto, pero tiene un precio que es que, cuando hagas cambios en tus componentes en Figma y los sincronices en Amplify y los extraigas, sobrescribirá las cosas que has hecho. Entonces, si estás seguro de que es algo único, es una sola cosa, un único cambio donde básicamente solo design tus componentes y estás seguro de que no vas a hacer cambios en estos componentes nuevamente desde Figma entonces, por supuesto, hazlo. Pero no lo aconsejaría. Prefiero que uses anulaciones ya que no sabes qué va a suceder en el futuro. Solo puedes hacer cambios en los componentes en el futuro y querrás asegurarte de extraer esos cambios. No afecta cómo se ve realmente tu aplicación o cómo se comporta actualmente, ¿de acuerdo? Y eso es todo.

Creo que hemos terminado de crear realmente una aplicación de código. Hemos creado, actualizado, eliminado. Podemos leer nuestras notas. Podemos actualizar nuestras notas. Podemos eliminar nuestras notas. Y podemos consultar nuestras notas. ¿Qué más necesitas? Entonces, el siguiente paso es manejar la authentication. De nada, Sarah. El siguiente paso es manejar la authentication. De acuerdo. Para hacer eso, necesitamos ir a uno de nuestros proyectos, hacer clic en el elemento authentication en la izquierda y luego establecer la fortaleza de tu contraseña. Solo voy a hacerlo muy simple para no tener que pensar en una contraseña cuando inicie sesión. Y luego hacer clic en desplegar. Eso es prácticamente todo lo que necesitas hacer para la authentication y confirmar los despliegues. De acuerdo. Ten en cuenta que esto es diferente de la autorización. Vamos a echar un vistazo a la autorización una vez que termine con la authentication. De acuerdo. En realidad, vamos a manejar esta autorización ahora. Para hacerlo, porque ya tengo una aplicación diferente que tiene la authentication desplegada. Para establecer la autorización, ve a tu modelo de datos. De acuerdo. Y si me muevo demasiado rápido, avísame. Muy bien. Revisa el chat una vez más.

Acabamos de ver cómo configurar la authentication. Ahora voy a mostrarte cómo configurar la autorización. Son dos cosas diferentes. La authentication es decir, `oye, soy Chris y tengo una cuenta en tu aplicación. Por favor, déjame entrar`. Eso es la authentication. La autorización es algo completamente diferente. Dice, `oye, soy Chris, y tengo los derechos para crear y eliminar una nota. Por favor, permíteme hacer eso`. Eso es la autorización. Entonces, lo que quiero hacer ahora es habilitar lo que llamamos autorización del propietario con este módulo de notas. Lo que básicamente hará es asegurarse de que no leas, actualices o elimines notas que no hayas creado. Solo puedes acceder a las notas que creaste tú mismo. Esto te permite tener múltiples usuarios en tu aplicación con múltiples notas, pero no pueden acceder a las notas de los demás. ¿De acuerdo? Entonces, para hacer eso, habilitaremos la authentication del propietario y luego deshabilitaremos que cualquier otra persona pueda acceder a las notas.

14. Autenticación y Autorización

Short description:

Queremos que solo los propietarios de las notas puedan actualizar, leer y eliminarlas. Para configurar la autenticación, envolvemos el componente con Authenticator. La interfaz de usuario para iniciar sesión y cerrar sesión se genera automáticamente. Las opciones de configuración están disponibles en los documentos de la interfaz de usuario. Después de crear una cuenta y verificar el correo electrónico, podemos acceder a la aplicación. Para cerrar sesión, hacemos clic en el botón de cerrar sesión y manejamos el mensaje de confirmación. La autenticación es fácil de configurar. Agregar autorización es igual de fácil, ya que solo la habilitamos para los propietarios de las notas.

¿De acuerdo? Esto indica que cualquier usuario autenticado puede crear, leer y actualizar. No queremos esto. Solo queremos que las personas que son propietarias de las notas puedan actualizar, leer y eliminarlas. ¿Correcto? Una vez que hayas hecho esto, podemos hacer clic en guardar y desplegar. Y luego podemos proceder con el despliegue. Mientras esperamos a que termine el despliegue, podemos volver a investigar, a programar y configurar la authentication. Y es tan simple como envolver este componente con el uso de withAuthenticator. ¿De acuerdo? Y eso es todo. Eso es prácticamente todo lo que necesitamos hacer. ¿Puedes ver que se importa desde la biblioteca UI Reds? Y si vamos a nuestra aplicación, ya no podemos acceder a ella. Tenemos la interfaz de usuario para iniciar sesión y cerrar sesión. Y si te preguntas si puedes configurar esto. Sí. En primer lugar, esto se ajusta a tu estilo, por ejemplo, si cambiamos el color del botón de inicio de sesión a rojo. Este sería rojo, ¿de acuerdo? Y podemos hacer todas esas personalizaciones locas yendo a nuestros documentos de la interfaz de usuario, UI.docs.amplify.aws, y puedes consultar los documentos sobre cómo configurar esto. Así que haz clic en componentes conectados, puedes ver la configuración del autenticador. Y puedes leer estos documentos para ver todas las cosas que puedes hacer. Puedes ver que también podemos configurar la autenticación social y todas estas cosas geniales, ¿de acuerdo? Ahora eso es la authentication. Así que creemos una cuenta. Y luego necesitas verificar tu correo electrónico. Esto me enviará un código por correo electrónico para verificar mi correo electrónico. Solo voy a copiarlo rápidamente de mi correo electrónico y pegarlo. Luego hago clic en confirmar. Y puedes ver que podemos acceder a nuestra aplicación nuevamente. ¿De acuerdo? Y luego, para cerrar sesión, necesitamos hacer clic en este botón para cerrar sesión. Así que vamos a manejar la salida. Para hacer eso, cuando envuelves esto con los componentes de orden superior con Authenticator, recibirás un mensaje de salida, que es una función de salida. Y luego podemos llamar a esa función de salida en el número. Y para hacer eso, busquemos un número y busquemos el botón de salida, que es este. Copiamos el ID y luego pegamos. Y luego podemos establecer el evento onclick y llamar a la función de salida. ¿De acuerdo? Entonces, eso es prácticamente todo, cerrará la sesión. Así que si haces clic en este botón ahora, deberías cerrar la sesión. ¿De acuerdo? Y eso es todo. Eso es todo lo que necesitamos hacer para la authentication. Es fácil, ¿verdad? Avísame si crees que es fácil. Sí, de acuerdo. Jason ya lo dijo. Genial. Sí, agregar pods es realmente fácil. Y puedes ver que agregar autorización también es igual de fácil porque acabamos de habilitar la autorización solo para los propietarios de las notas. Entonces, lo que va a suceder ahora mismo es que vamos a llamar, todavía se está desplegando. De acuerdo, acaba de terminar. James. De acuerdo, genial. Vamos a extraer esto una vez más porque acabamos de terminar de desplegar la autorización. De acuerdo. Y una vez que termine de extraer esto, lo que va a suceder de inmediato es que ya no podremos acceder a estas notas una vez que cerremos sesión e iniciemos sesión nuevamente porque no creamos estas notas.

15. Implementación, Limpieza de Almacenamiento y Creación de Notas

Short description:

Mientras esperamos a que se complete la implementación, limpiemos el almacenamiento para eliminar los datos de la caché. Después de iniciar sesión, solo se puede acceder a los datos creados. Si alguien está perdido, por favor avíseme. Creemos notas y cerremos los modelos al guardar. Escuchemos los eventos de creación y actualización para ocultar el modelo. Usemos el hook useEffect y importemos Holm de AWS Amplify.

De acuerdo. Así que esperemos a que termine la implementación. Y por cierto, mientras se está implementando, necesitamos limpiar nuestro almacenamiento. Recuerda que te dije que Amplify es offline-first. Entonces algo que siempre debemos hacer cuando cerramos sesión es llamar a data store.clear. Esto básicamente vaciará el almacenamiento local de la caché. Básicamente, deshazte de la caché en tu almacenamiento local o de los datos offline-first en tu almacenamiento local. Cuando se importa data storage de AWS Amplify.

De acuerdo. Por cierto, si estás haciendo las cosas manualmente, tal vez si estás construyendo tus componentes manualmente, esta es la API que usas para comunicarte con tu base de datos, la llamo data store.query y así sucesivamente. O leer, más bien.

De acuerdo. Entonces, veamos si terminamos de extraer. Sí, terminamos de extraer. Así que si volvemos a nuestra aplicación, podemos cerrar sesión. Y una vez que iniciemos sesión nuevamente, uno, dos, tres, cuatro, cinco, seis. Una vez iniciada la sesión, verás que ya no podemos acceder a esos datos data más, porque solo se puede acceder a lo que creaste. Solo se puede leer, actualizar y eliminar lo que creaste. Ya que esas pruebas anteriores de data solo eran para testing y no están vinculadas a ningún usuario en particular. Entonces ningún usuario los obtiene y son solo basura en este momento. ¿De acuerdo?

Entonces, antes de continuar, quiero asegurarme de que nadie esté perdido, si alguien está perdido, me alegra que todos estén disfrutando esto. Si estás perdido, por favor avísame. Quiero asegurarme de que todos se diviertan mientras siguen nuestros pasos, ¿de acuerdo? Solo esperando para asegurarme de que nadie esté perdido y luego puedo pasar a la siguiente cosa. Y por cierto, ahora puedo crear notas y estas notas pertenecerán a, sí. Al guardar, ver. Oops, por alguna razón, guardar no está funcionando. Oh sí. Muy bien, así que creo que la nota de demostración va a estar en mi contra ahora. Intentemos resolver esto. Elimina el punto O del jugador y veamos cuál es el problema. Crear nota. Test, test, test. Creo que ese era el problema, vamos... Borremos y volvamos a intentarlo. Sí. Confirmar prueba. Ahora funciona bien. Eso fue extraño, pero no hubo ningún problema. No hay necesidad de entrar en pánico. Todo fue como se esperaba. De acuerdo, así que necesito poder cerrar estos modelos cuando guardamos algo, ¿de acuerdo? Cuando hacemos clic para crear algo, quiero que esos dos modelos de alto nivel se oculten Y para hacer eso, podemos escuchar los eventos de creación y actualización. Amplify te avisa cuando se ha registrado correctamente el hecho de que necesitas crear o actualizar un elemento de data, ¿de acuerdo? Y luego puedes escuchar esos eventos y realizar algunas acciones. Entonces, en este caso, quiero escuchar esos eventos y una vez que Amplify esté aquí, terminé de crear las notas. Puedes ocultar el modelo, ¿de acuerdo? Para hacer eso, simplemente voy a copiar el código del evento y pegarlo y luego te lo explicaré. Para hacer eso, primero debemos crear un hook useEffects y dentro del hook, también debemos importar Holm de AWS Amplify. Muy bien. Entonces, llamo a hub.listing y queremos listar todos los cambios de la interfaz de usuario, ¿de acuerdo? Y luego recibimos esta cápsula que realiza un seguimiento de todos los eventos, como una cápsula del tiempo. Y luego lo que hacemos es verificar si hemos terminado de crear un elemento de data, si hemos terminado de agregar elementos en Datastore o si hemos terminado de actualizar Datastore. Si hemos terminado, entonces establecemos show model en falso para ambos, ¿de acuerdo? Entonces, si volvemos aquí y hacemos clic en crear, hagamos esto uno, y creemos uno más, y guardemos, y luego guardemos este archivo, de acuerdo.

QnA

Implementación de la Aplicación y Preguntas y Respuestas

Short description:

Hagámoslo de nuevo. Crea nodos, prueba, prueba y guarda para ocultar el modelo. Hemos terminado de construir nuestra aplicación y agregar autenticación y autorización. Vamos a implementar la aplicación enviándola a GitHub, creando un repositorio y conectándolo a Amplify. Podemos seleccionar el entorno y configurar el perfil de CI/CD. Mientras esperamos la implementación, responderé cualquier pregunta o comentario en el chat. ¡Gracias a todos por unirse a la masterclass!

Hagámoslo de nuevo. Crea nodos, prueba, prueba, y guarda y verás que el modelo ha desaparecido. ¿De acuerdo? Así es como ocultas el modelo. Eso es prácticamente todo lo que necesitas hacer. De hecho, hemos terminado de construir nuestra aplicación y agregar autenticación y autorización. Creo que todavía tenemos unos minutos así que puedo usar ese tiempo para implementar la aplicación y mostrarte cómo implementar una aplicación una vez que hayas terminado de construirla.

De acuerdo. Para hacer eso, primero necesitamos enviar esto a GitHub. Así que permíteme crear un repositorio en GitHub llamado node-app-paged, hazlo privado. ¿De acuerdo? Y esto es básicamente, en lugar de ir a GitHub o set-create, puedes usar la CLI de GitHub para hacer esto. ¿De acuerdo? Luego puedo agregar el origen. Gate, remoto, agregar origen. Solo elimina todo esto, todos estos nodos, tenlo. ¿De acuerdo? Luego puedo agregar todos mis cambios, comprometerlos y luego enviarlos al origen. Ahora podemos echar un vistazo a GitHub y ver que tengo mi aplicación implementada, enviada a GitHub, más bien. ¿De acuerdo?

Entonces lo que podemos hacer es volver a AWS Amplify o más bien a la consola de AWS. Permíteme abrir la consola de nuevo porque cerré sesión. De acuerdo, volvamos a la consola de AWS y tengo registros. Una vez que se haya lanzado, volvamos y vayamos a la función heredada y al sistema operativo y LDAP. Entonces, si podemos ver, como acabo de hacer después de las actualizaciones y tenemos la aprobación y obtuvimos eso que nos permite iniciar sesión. Y a partir de ahí, deberíamos poder encontrar nuestra nota y luego hacer clic en entornos de alojamiento. Lo que hicimos antes fue crear un entorno backend. Ahora quiero hacer clic en crear entorno de alojamiento para poder implementar nuestra aplicación, ¿de acuerdo? Queremos implementar desde GitHub y quiero conectar una rama. Esto va a autorizar primero. Entonces, si es la primera vez que haces esto, puedes pedirle que inicie sesión en GitHub. Así puedes tener acceso para habilitar la recuperación de nuestros repositorios. Ahora estamos obteniendo todos esos repositorios y solo esperaremos. Y una vez que haya terminado, podemos encontrar el repositorio que acabamos de crear y conectarnos a ese repositorio. Genial, si obtienes este error, simplemente ignora el error, en realidad encontró los repositorios. Permíteme ver. Sí, encontramos los repositorios y puedes ver que tengo un repositorio NoteApp8 aquí y luego podemos seleccionar implementar desde la rama principal y hacer clic en siguiente. Ahora desde aquí, podemos seleccionar el entorno como de preparación y configurar el perfil de CI/CD. Ahora, si es la primera vez que implementas en AWS Amplify, necesitas crear una nueva regla para el CI/CD y para hacer eso solo necesitas seguir las instrucciones que te dan o usar los datos que se te proporcionan y adoptar la publicación que te permite mostrar cómo hacer esto. Y luego podemos hacer clic en siguiente y luego hacer clic en guardar e implementar, ¿de acuerdo? Esto tomará unos minutos y mientras tanto, echaré un vistazo al chat y conversaré con todos ustedes. Ahora hemos terminado con esta masterclass y solo estamos esperando que se implemente. Si tienen alguna pregunta desde el principio hasta ahora, si algo les confundió, si algo no tiene sentido, si tienen pensamientos, si tienen comentarios háganmelo saber en el chat y podemos hablar al respecto. De acuerdo, veamos. Como resumen, básicamente enviamos nuestro proyecto a GitHub, fuimos a la consola de AWS, encontramos AWS Amplify, encontramos nuestra aplicación. Luego, cuando abrimos la aplicación, tendremos estas dos pestañas, que son el entorno backend y el entorno de alojamiento. Seleccionamos los entornos de alojamiento y luego elegimos conectar a un repositorio y luego buscamos nuestro repositorio. Y ahora estamos implementando desde la rama de nuestro repositorio, ¿de acuerdo? De acuerdo. Por cierto, gracias a todos por quedarse en la masterclass. Fue divertido, espero que se hayan divertido. ¿El despliegue de Amplify admite entornos de aplicación Spina para solicitudes de extracción como Amplify? Sí, anteriormente, sí. De acuerdo. Gracias a Jason. Oh, estaba leyendo un mensaje diferente. Solo asegurándome de que no haya ninguna pregunta que me haya perdido. Uh, anteriormente.

Construcción e Implementación con AWS Amplify

Short description:

Se recomienda Amplify NEXT para desarrolladores de React. Amplify verifica los cambios y los implementa en consecuencia. Funciona como Amplify CLI y Git. El diseño automático es crucial para diseños consistentes. La implementación está lista y la aplicación se puede acceder a través de la URL del dominio. Construir una aplicación con Amplify es rápido y eficiente. Prueba romper cosas y probar Amplify. La función de interfaz de usuario se mejora constantemente. Puedes usar otras bibliotecas como Tailwind CSS con la función de biblioteca de interfaz de usuario de Amplify. Gracias a todos por unirse.

Uh, sí. Uh, muy cerca, señor. Me perdí tu pregunta. Estás preguntando si Amplify requiere escalera, sabes, de hecho, mi favorito, por favor, usa Amplify NEXT, y como un acto nuevo, porque esta es una conferencia de React y yo uso next en muchas ocasiones y también puedes usar VITA. Solo responde esas preguntas correctamente. cuando te pregunte sobre la configuración de tu proyecto y de esa manera sabrá dónde poner todos los archivos y cómo implementar tu aplicación cuando necesite hacerlo.

De acuerdo. Sí. Si es solo verifica los cambios. No pierde tiempo cuando no hay nada que hacer. No solo revisa cosas. Verifica, por ejemplo, si, si a través de tu modelo es por el camino para todos los que no tienen una serie de preguntas preguntando si Amplify construye tu backend y empuja o tira entre corchetes, no, no lo hace. Solo verifica los cambios. Entonces, por ejemplo, si hiciste un cambio en tu, en tu modelo, en tu archivo, y luego lo empujas, es genial ver, okay. Hey, sí, parece que necesitas ese archivo al menos es, es diferente desde la última vez que lo revisamos. Así que creo que deberíamos volver a implementar los modelos.

De acuerdo. Básicamente funciona como Amplify CLI todavía funciona como Git. Es como un control de versiones en miniatura. Todavía estamos esperando a que se complete la compilación. Y veamos. Está hecho. Actualmente es solo diferente, y no.

De acuerdo. Sí. Jason pregunta si alguna vez me he encontrado en una situación en la que un diseñador rompe los diseños al realizar cambios de diseño. Sí. Así que la primera vez que trabajé en esto, el diseñador no se adhirió a, por ejemplo, asegurarse de que el diseño no se rompiera. Eso es seguro. Pero, ¿qué pasa si estás usando diseño automático? Entonces, si sabes, como los diseñadores saben qué es el diseño automático, esa es la forma correcta de construir diseños. Si el diseño automático se comporta como cajas flexibles, son como las cajas flexibles de Figma. Entonces, si no te hacen el diseño automático, las cosas se desmoronan cuando lo extraes. Así que asegúrate de que si eres un diseñador y tienes un diseño superior, asegúrate de que el diseñador aproveche el diseño automático de Figma. Esa es en realidad la forma estándar de la industria para que los diseñadores creen diseños. ¿De acuerdo? Y Amplify también lo usa. Para que tu diseño se vea exactamente como se ve en el diseño. Pero por supuesto, ha habido situaciones en las que el diseñador simplemente colocaba cosas alrededor de la página y Amplify no lo hacía exactamente. Como sabía que era porque no estaban usando el diseño automático. Tuvo que recurrir al posicionamiento CSS, que por supuesto, ya sabes cómo termina siendo, es una experiencia fea, ¿de acuerdo?

Genial. Creo que nuestra implementación está lista. Así que ahora puedes hacer clic en esta URL del dominio. Y deberíamos obtener nuestra opción de inicio de sesión y visualización una vez más. Entonces puedes ver que esto es una URL remota ahora. Eso es prácticamente todo. Así es cómo construir una aplicación con AWS Amplify y hacerlo rápidamente. En solo 1 hora y 30 minutos, diseñamos, bueno, no diseñamos por supuesto, pero importamos componentes desde Figma. Configuramos nuestros componentes, vinculamos datos a ellos, configuramos la autenticación, configuramos la autorización, importamos nuestros componentes a React, renderizamos nuestros componentes, implementamos nuestra aplicación en literalmente solo 1 hora y 30 minutos. Así que también somos desarrolladores tempranos. Sabemos cuánto tiempo nos habría llevado hacer esto. Esto es el esfuerzo de una semana hecho en 1 hora y 30 minutos. Eso es simplemente, eso es simplemente asombroso. Y, te recomendaría que lo pruebes y también intentes romper cosas, prueba Amplify brutalmente. La función de interfaz de usuario es nueva, la función de interfaz de usuario se mejora constantemente, puedes verlo literalmente aquí, y constantemente estamos lanzando nuevas funciones para esto. Pero, si, si, si, si sientes que va en contra de tu flujo de trabajo, usa totalmente otra biblioteca que puedas usar, y por cierto, tengo un artículo en el que estoy trabajando, un video que estoy haciendo sobre cómo usar, seguir usando tanto la biblioteca de interfaz de usuario como aprovechar la función de biblioteca de interfaz de usuario en Amplify, y usarla con otras bibliotecas de terceros como Tailwind CSS, de acuerdo. Entonces, en caso de que estés interesado en eso, dejaré un comentario en el video una vez que esté listo, una vez que se haya cargado el video, así que si quieres aprender cómo combinar diferentes bibliotecas junto con esta función, es completamente posible, ¿de acuerdo? Eso es, eso es, eso es todo, eso es todo para este taller y gracias a todos por unirse. Voy a seguir monitoreando el chat del taller después de que terminemos, cuando termine este taller, por si alguien tiene preguntas, estaré aquí hasta el final de la conferencia, hasta el final de la próxima semana, seguiré revisando este chat y respondiendo tus preguntas, si tienes más preguntas, así que no sientas que este es el final del taller, siéntete libre de seguir haciéndome preguntas aquí, en caso de que sigas adelante y construyas esta aplicación mañana y te sientas atascado, estaré asesorando este canal en particular durante las próximas dos semanas, ¿de acuerdo?

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

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

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
(Easier) Interactive Data Visualization in React
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!