Anuncio de la disponibilidad general de AWS Amplify Studio | Servicios web de Amazon

Amplify Studio es una interfaz visual que simplifica el desarrollo front-end y back-end para aplicaciones web y móviles. lo lanzamos como vista previa durante AWS re:Invent 2021, y hoy, me complace anunciar que ahora está disponible para el público en general (GA). Una característica clave de Amplify Studio es la integración con figma, ayudar a los diseñadores y desarrolladores front-end a trabajar en colaboración en tareas de diseño y desarrollo. Para mantenerse sincronizados a medida que cambian los diseños, los desarrolladores simplemente extraen los nuevos diseños de componentes de Figma en su aplicación en Amplify Studio. La versión GA de Amplify Studio también incluye algunas funciones nuevas, como la compatibilidad con los controladores de eventos de la interfaz de usuario, temas de componentes y mejoras en la forma en que puede ampliar y personalizar los componentes generados a partir del código.

Usted puede estar familiarizado con AWS amplificar, un conjunto de herramientas y funciones para ayudar a los desarrolladores a comenzar más rápido con la configuración de varios servicios de AWS para respaldar sus casos de uso de back-end, como la autenticación de usuarios, datos en tiempo real, AI/ML y almacenamiento de archivos. Amplify Studio extiende esta facilidad de configuración a los desarrolladores front-end, que pueden usarlo para trabajar con componentes de interfaz de usuario (UI) enriquecidos prediseñados y personalizados para esas aplicaciones. Los desarrolladores de back-end también pueden utilizar Amplify Studio para continuar con el desarrollo y la configuración de los servicios de back-end de la aplicación.

El entorno visual de apuntar y hacer clic de Amplify Studio permite a los desarrolladores front-end componer rápida y fácilmente interfaces de usuario a partir de una biblioteca de componentes de interfaz de usuario personalizados y prediseñados. Los componentes son temáticos, lo que le permite anular los temas predeterminados de Amplify Studio para personalizar los componentes de acuerdo con sus propias guías de estilo o las de su empresa. Los componentes también se pueden vincular a servicios de back-end sin experiencia en la nube o AWS.

El soporte para desarrollar los niveles front-end y back-end de una aplicación no es todo lo que está disponible. Desde Amplify Studio, los desarrolladores también pueden aprovechar los servicios de alojamiento de AWS Amplify, el CI/CD totalmente administrado de Amplify y el servicio de alojamiento para aplicaciones web escalables. Este servicio ofrece una forma de configuración cero para implementar la aplicación simplemente conectando un repositorio de Git con un flujo de trabajo de implementación e integración continua incorporado. Los artefactos de implementación se pueden exportar a herramientas como AWS Cloud Development Kit (AWS CDK), lo que facilita agregar compatibilidad con otros servicios de AWS que no están disponibles directamente en Amplify Studio. De hecho, todos los artefactos que se crean en Amplify Studio se pueden exportar como código para que los edite en el IDE de su elección.

Puede leer todo sobre la vista previa original y ver un ejemplo del uso conjunto de Amplify Studio y Figma en esta publicación de blog publicada durante re:Invent.

Controladores de eventos de la interfaz de usuario
Los desarrolladores front-end probablemente estén familiarizados con los conceptos detrás de los eventos vinculantes en los componentes de la interfaz de usuario para invocar alguna acción. Por ejemplo, seleccionar un botón puede provocar una transición a otra pantalla o rellenar algún otro campo con datos, posiblemente proporcionados desde un servicio de back-end. En la siguiente captura de pantalla, estamos configurando un controlador de eventos para el onClick evento en un Card componente para abrir una nueva pestaña del navegador:

Para la acción seleccionada, luego definimos la configuración, en este caso, para abrir una vista de mapa en la ubicación utilizando la latitud y la longitud en el modelo del objeto de la tarjeta:

Ampliación de componentes con código
Cuando extrae sus diseños de componentes de Figma a su proyecto en Amplify Studio usando el amplify pull comando, el código JSX generado y los archivos de definición de TypeScript que se asignan a los diseños de Figma se agregan a su proyecto. Si bien podría editar el código generado, la próxima vez que ejecute el comando de extracción, sus cambios se sobrescribirán.

En lugar de solicitarle que edite el código generado, Amplify Studio expone mecanismos que le permiten extender el código generado para lograr los cambios que necesita sin correr el riesgo de perder esos cambios si se regeneran los archivos de código del componente. Si bien esto era posible en la vista previa original, la versión GA de Amplify Studio hace que este proceso sea mucho más simple y conveniente. Hay cuatro formas de cambiar los componentes generados dentro de Amplify Studio:

• Modificación de propiedades predeterminadas
  La modificación de las propiedades predeterminadas de los componentes es simple y un enfoque que probablemente sea familiar para la mayoría de los desarrolladores. Estas propiedades predeterminadas se derivan de la Amplificar biblioteca de interfaz de usuario. Por ejemplo, supongamos que tenemos un componente de colección personalizado que se deriva de la base Collection type, y queremos controlar cómo (o incluso si) los elementos de la colección se ajustan cuando se procesan. El tipo Collection expone una propiedad wrap que podemos utilizar:

  <MyCustomCollection wrap={"nowrap"} />

• Anular elementos secundarios de la interfaz de usuario
  Más allá de las propiedades expuestas individuales, el código que se genera para los componentes (y todos los componentes secundarios) expone un overrides apuntalar. Esta propiedad le permite proporcionar un objeto que contiene varias anulaciones de propiedad, lo que le brinda control total sobre la extensión del código generado. En el siguiente ejemplo, estoy cambiando el accesorio de color que pertenece al Título prop de los artículos de mi colección a naranja. Como mencioné, el objeto de configuración que estoy usando podría contener otras propiedades que también quiero anular:

  <MyCustomCollectionItem overrides={{"Title": { color: "orange" } }} />

• Ampliación de elementos de colección con datos
  Una función útil cuando se trabaja con elementos de una colección es aumentar los elementos con datos adicionales, y puede hacerlo con el overrideItems apuntalar. Proporciona una función a esta propiedad, aceptando parámetros para el elemento y el índice del elemento en la colección. El resultado de la función es un conjunto de accesorios de anulación para aplicar a ese elemento. En el siguiente ejemplo, estoy cambiando el color de fondo de un elemento de la colección dependiendo de si el índice del elemento es par o impar. Tenga en cuenta que también puedo adjuntar código al artículo, en este caso, un onClick controlador que informa el ID del elemento en el que se hizo clic:

  <MyCustomCollection overrideItems={({ item, index })=>({
    backgroundColor: index % 2 === 0 ? 'white' : 'lightgray',
    onClick: () = alert(`You clicked item with id: ${item.id}`)
  })} />

• Lógica empresarial personalizada para eventos
  A veces, desea ejecutar una lógica comercial personalizada en respuesta a eventos lógicos de nivel superior. Un ejemplo sería el código que se ejecuta cuando se crea, actualiza o elimina un objeto en un almacén de datos. Esta opción de extensibilidad proporciona esa capacidad. En su código, adjunta un oyente a Amplify Hub’s ui canal. En su oyente, inspecciona los eventos recibidos y toma medidas sobre los que le interesan. Los eventos se identifican mediante nombres, que tienen un formato específico, actions:[category]:[action_name]:[status]. Puede encontrar una lista de todos los nombres de eventos de acción en la documentación. En el siguiente ejemplo, adjunto un oyente en el que quiero ejecutar un código personalizado cuando se completa la creación de un nuevo elemento en un almacén de datos. En mi código, necesito inspeccionar, en mi oyente, un evento con el nombre actions:datastore:create:finished:

  import { Hub } from 'aws-amplify'
  …
  Hub.listen("ui", (capsule) => {
    if (capsule.payload.event === "actions:datastore:create:finished"){
        // An object has been created, do something in response
    }
  });

Tematización de componentes
Para acompañar el lanzamiento de GA de Amplify Studio, también lanzamos un complemento de Figma que le permite combinar los componentes de la interfaz de usuario con la marca y el estilo de su empresa. Para habilitarlo, simplemente instale el Complemento del editor de temas del enlace de la comunidad de Figma. Por ejemplo, supongamos que quiero combinar los colores de la marca Amazon. Todo lo que tendría que hacer es configurar el color primario en el color naranja de Amazon (#ff9900), y luego todos los componentes reflejarán automáticamente ese color primario. Él Documentación de tematización proporciona el conjunto completo de fichas de diseño que puede modificar con el Editor de temas.

Comience hoy con AWS Amplify Studio
Visite la página de inicio de AWS Amplify Studio para descubrir más características, ya sea un desarrollador back-end o front-end, ¡o ambos! Comenzar es gratis y está diseñado para ayudar a simplificar no solo la configuración de los servicios de back-end que respaldan su aplicación, sino también el desarrollo del front-end de su aplicación y las conexiones a esos servicios de back-end. Si es nuevo en Amplify Studio, encontrará un tutorial sobre cómo desarrollar una interfaz de usuario basada en React e información sobre cómo conectar su aplicación a diseños en Figma. en la documentación.

—Steve