¿Qué es Amplify?
Es un conjunto de herramientas y alojamiento web estático completamente administrado para acelerar el desarrollo de aplicaciones web y móviles.
¿Qué es Figma?
Figma es una aplicación de diseño de UI y UX que se utiliza para crear diseños.
¡Novedad!
Una nueva característica de AWS Amplify es la integración de Amplify Studio con Figma. Amplify Studio se encarga de convertir automáticamente cualquier componente desarrollado en Figma en un componente de React para que se pueda emplear en una aplicación.
Requisitos:
Cuenta de AWS
Cuenta en Figma
Tener una versión reciente de Node.js
Demo:
Esta demo será lo más sencilla posible, así que comencemos de una vez.
Entrar a nuestra consola de AWS, seleccionar Amplify.
Crear una nueva aplicación.
Ingresar a Amplify Studio.
Clic en UI Library.
Abrimos Figma y duplicamos el proyecto AWS Amplify UI Kit (Community).
Una vez duplicado, entramos a nuestra copia y le damos en compartir para copiar el link de acceso.
Regresamos a Amplify Studio y damos clic en Get Started,
Nos pedirá compartir el link que deseamos importar de Figma, así que solo pegamos del portapapeles.
Al ser la primera vez, nos pedirá permitir el acceso, aceptamos.
Se empezarán a generar los componentes. Al terminar nos preguntará si los aceptamos o rechazamos, esto se puede hacer de componente por componente o todos juntos. En este caso daremos Accept all.
Al aceptarlos todos los componentes quedarán en nuestra librería. Para continuar generaremos un modelo de datos para la aplicación definiendo los campos y posibles relaciones.
En el menú de la izquierda seleccionamos Content, seguido de Create data model y Add model.
Generaremos un modelo de nombre Usuarios que contendrá el campo id, name, email y followers.
Una vez establecidos los campos vamos a desplegarlo dando clic en Save and deploy. Esto puede tardar unos minutos.
Creado ya el modelo, vamos a apoyarnos de Amplify Studio para auto-generar información del modelo que acabamos de crear. Damos clic en Actions, seguido de Auto-generate data.
Se abre una ventana preguntando cuantos registros queremos, esta ocasión pondremos 5. Adicional podemos seleccionar por campo opciones de tipos de datos, como nombres, direcciones, números en un rango, etc. Para nuestra demo seleccionaremos name y valores de tipo full name. Damos clic en Generate data.
Regresamos a la sección de UI Library, seleccionamos el componente con el que vamos a trabajar, en este caso SocialB, damos clic en Edit y ahora vamos a relacionar los datos.
Damos clic en prop e introducimos el nombre, en este caso será usuarios y como tipo seleccionamos el modelo que generamos llamado Usuarios. Con esto tendremos acceso para el modelo sobre todo el componente.
Por cada elemento del componente, debemos seleccionar el prop adecuado, en nuestro casi serán label ya que solo es texto y relacionarlo con el campo que nos representa. Para tener el preview, podemos dar clic en Shuffle preview data para cambiar los datos y revisar como se vería nuestra información.
Con esto únicamente queda importar con un pull nuestro componente a nuestro proyecto de React. Las líneas de código con todos los datos que ocupamos las podemos obtener dando clic en Get component code. Si ya tenemos el proyecto React creado e inicializado con Amplify usamos la pestaña Use this component, de lo contrario debemos usar Initial project setup.
Para la demo nos iremos desde la creación del proyecto, así que crearemos un proyecto en React con el comando: npx create-react-app amplify-studio-demo, esperamos a que se genere el proyecto, damos cd amplify-studio-demo
Instalamos dependencias con npm install -g @aws-amplify/cli y npm install aws-amplify @aws-amplify/ui-react
Hacemos el import de las siguientes librerías en index.js
Modificamos la envoltura de <App /> con <AmplifyProvider>
Realizamos el pull de los componentes amplify pull — appId <<APP_ID>> — envName <<ENV>>
En App.js importamos nuestro componente con import { SocialB } from ‘./ui-components’; y en el html agregamos nuestro componente <SocialB />
Finalizamos con un npm start para poder abrir la aplicación en React sobre http://localhost:3000/
🎬 Video de la demo: https://drive.google.com/file/d/1GkSpkW9PiwacHxDVWvNG7vqZwhQ8yQMH/view?usp=sharing
Top comments (0)