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

¡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

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

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.

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.

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,

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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?