AWS Amplify simplifica la creación de aplicaciones móviles

AWS Amplify es un marco diseñado para facilitar mucho la creación de aplicaciones web y nativas. Se enfoca en tener un backend completamente construido listo para usar: ejecutar una API y una base de datos con autenticación se maneja por usted.

¿Qué es AWS Amplificar?

Amplify no reemplaza a un marco como React: puede usar la interfaz que desee (aunque React, React Native, Vue, Android e iOS se admiten mejor con bibliotecas específicas). Amplify se encargará del backend, cosas como ejecutar un servidor API, administrar la base de datos y autenticar a los clientes.

Cuando crea un proyecto de Amplify, los recursos de back-end se aprovisionarán automáticamente mediante CloudFormation. Cuando agregue una API, simplemente se le pedirá que defina el esquema y se creará una tabla de DynamoDB para usted, con los métodos de controlador para suscribirse, consultar y actualizar entradas que también se generarán. Si desea envolver una herramienta de administración de estado de terceros como Redux alrededor del backend de Amplify, también puede hacerlo.

Para la autenticación, Amplify se puede conectar a Amazon Cognito, un servicio versátil de administración de identidades. Cognito puede manejar MFA, inicio de sesión y registro de usuarios, servicios de directorio e inicios de sesión federados a proveedores sociales (Google, Facebook), o incluso su propio servidor de Active Directory sobre SAML.

Amplify también contiene una biblioteca de interfaz de usuario llena de componentes útiles, similar a Bootstrap. Sin embargo, la biblioteca de la interfaz de usuario de Amplify se centra en los flujos funcionales, como el registro e inicio de sesión del usuario, la carga de archivos y fotos, y los chatbots con tecnología de AWS Lex. El uso del componente de autenticación, por ejemplo, hará que la conexión de su aplicación al backend de autenticación de Amplify (Cognito) sea mucho más fácil.

Por supuesto, puede ampliarlos con su propio código y colores, si no es fanático del naranja icónico de AWS.

Empezando

Si desea ingresar y jugar con Amplify, la configuración es bastante simple. Instale la CLI de Amplify globalmente desde npm:

npm install -g @aws-amplify/cli

Para la aplicación real, iniciaremos una aplicación básica de React utilizando la propia plantilla de inicio create-react-app de React:

npx create-react-app amplify

cd a esta nueva carpeta e instala Amplify como una dependencia de npm :

npm install @aws-amplify/api @aws-amplify/pubsub

Ejecute npm start y debería ver el logotipo giratorio de React abierto en su navegador.

Si desea utilizar la biblioteca de interfaz de usuario opcional de Amplify, está disponible como un paquete separado para React:

npm install aws-amplify-react

Una vez que todo esté instalado en el lado del cliente, puede configurar su proyecto Amplify usando la CLI:

amplify init

Esto le pedirá un poco de información, como el nombre del entorno (dev, prod, etc.), el tipo de aplicación que está creando (JavaScript, React Native) y la fuente y la configuración de compilación. Ingrese todo según sea necesario, y Amplify tardará un segundo en configurar su backend.

Esto conectará Amplify a la consola de AWS, pero tendrá que hacer más configuraciones para que la API esté en funcionamiento.

Agregar una API

Para configurar el backend de la API de Amplify, ejecute:

amplificar agregar api

Esto le hará algunas preguntas, la primera es su tipo de API. Si desea utilizar GraphQL o Rest API, tendrá que hacer esa elección aquí. Iremos con GraphQL.

También tendrá que elegir un esquema de autenticación: si solo está probando cosas, puede elegir la clave API para autenticarse en desarrollo. Sin embargo, en producción, es probable que desee configurar AWS Cognito para la administración de usuarios y vincularlo a Amplify, que es el esquema de autenticación recomendado para las aplicaciones de Amplify.

Se le pedirá que defina el esquema para su API, que se abrirá en su editor de texto predeterminado. Amplify usará esto para configurar DynamoDB.

Una vez que esté configurado, ejecute amplify push para enviar los cambios a la nube. Amplify le preguntará si desea crear las funciones de GraphQL para interactuar con su API, lo que generará automáticamente los métodos para consultas, suscripciones y mutaciones.

La primera vez que envíe, se aprovisionará y configurará automáticamente una tabla de DynamoDB. Puede ver la tabla en sí desde la consola de Amplify:

Pero si desea realizar cambios en el esquema, deberá hacerlo a través de la consola. La configuración de back-end de Amplify se almacena en:

proyecto/amplificar/backend/

con la configuración de la API almacenada en api/amplify. Si realiza cambios y ejecuta amplify push nuevamente, se realizarán modificaciones en la pila de CloudFormation.

Para usar su API, puede importar PubSub desde Amplify y configurarlo para usar la configuración que Amplify colocó en src/aws-exports.js

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

// Configure Amplify
API.configure(awsconfig);
PubSub.configure(awsconfig);

A continuación, puede utilizar el objeto API para realizar conexiones. Por ejemplo, si usa GraphQL, puede importar los métodos de mutación y llamar a uno de ellos usando API.graphql(method):

import { createTodo } from './graphql/mutations';

async function createNewTodo() {
  const todo = { name: "new-item" , description: "Hello Amplify!" };
  await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

Publicación de su aplicación Amplify

Puede distribuir su aplicación Amplify como mejor le parezca, pero si está publicando una aplicación web, Amplify incluye algunas funciones integradas para implementar automáticamente su aplicación en S3. La opción predeterminada es para un entorno de desarrollo sin HTTPS, pero también se puede configurar para usar CloudFront. Una alternativa a esto sería configurar una canalización de implementación de S3 automatizada desde CodePipeline, o simplemente alojarla en un servidor web existente.

Si desea implementar en S3, simplemente agregue la función de alojamiento web desde la CLI:

amplify add hosting

Esto le preguntará si está implementando para desarrollo o producción, y le pedirá el índice y los documentos de error para su sitio. Una vez que esté configurado, ejecute amplificar publicación para impulsar una nueva pila de CloudFormation.

Su navegador abrirá el nuevo punto final para su aplicación, que puede agregar a su DNS con un registro CNAME o un alias de depósito de Route 53.