Aprende cómo construir aplicaciones web desde el diseño en Figma hasta la implementación en AWS mientras te mueves muy rápido.
This workshop has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.
FAQ
AWS Amplify es una herramienta de AWS que facilita a los desarrolladores la creación y el manejo de aplicaciones móviles y web ofreciendo una interfaz de usuario y API limpias para trabajar con otros servicios de AWS como DynamoDB, S3, Cognito, y Lambda sin tener que lidiar con su configuración.
Sí, una cuenta gratuita de AWS es suficiente no solo para participar en el masterclass, sino también para construir y lanzar un producto completo con las herramientas aprendidas durante la sesión.
Puedes configurar la autenticación en tu aplicación utilizando AWS Amplify estableciendo opciones de configuración en el Amplify Studio, que permite gestionar fácilmente la autenticidad y las configuraciones de seguridad para usuarios.
Sí, es posible adaptar el tono y el contenido del masterclass para incluir a participantes que no sean desarrolladores de React, asegurando que todos los asistentes puedan seguir y beneficiarse de la sesión.
Al final del taller, los participantes habrán aprendido a utilizar AWS Amplify para simplificar la creación de aplicaciones, manejar la autenticación, autorización y la lógica de negocio con las funciones sin servidor, y cómo lanzar su proyecto de React con solo unos clics.
AWS Amplify facilita la gestión de una base de datos mediante la creación de modelos de datos y la configuración de una API y una base de datos DynamoDB que ayuda a manejar la lógica del modelo y las operaciones de la base de datos eficientemente.
No es necesario tener conocimientos previos en AWS para seguir el taller, ya que se explicarán los conceptos y se guiará a los participantes a través del proceso de creación de aplicaciones utilizando AWS Amplify.
El comando 'Amplify pull' se utiliza para sincronizar el proyecto local con los cambios realizados en Amplify Studio, permitiendo que los componentes y configuraciones actualizadas sean accesibles y manejables localmente.
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.
¡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?
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía). En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también. Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso. (Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?
¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.
Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()? En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor. Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
Comments