Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)



AWS
Amplify es una biblioteca cliente, una cadena de herramientas CLI y una
biblioteca de componentes de IU que permite a los desarrolladores crear
y conectarse rápidamente a servicios de gran alcance en la nube. En
esta publicación, veremos cómo crear aplicaciones web totalmente sin
servidor con React y AWS Amplify con características como la
autenticación, una capa de datos GraphQL administrada, almacenamiento,
funciones lambda y alojamiento web.
Amplify habilita funciones como GraphQL administrado (AWS AppSync), almacenamiento (Amazon S3), autenticación de usuario (Amazon Cognito), funciones sin servidor (AWS Lambda), hosting (Amazon CloudFront y Amazon S3), análisis (Amazon Pinpoint) y más.
El objetivo de la biblioteca y la CLI es permitir que los desarrolladores creen aplicaciones web y móviles de pila completa sin tener que preocuparse por administrar su propia infraestructura de back-end, lo que les permite avanzar más en la pila utilizando las habilidades que ya conocen.
En esta serie, le mostraré cómo crear un nuevo proyecto AWS Amplify, habilitar las funciones de la nube mediante la CLI, conectar la aplicación React y comenzar a interactuar con los servicios de la nube. En esta publicación, te mostraré cómo implementar la autenticación, el almacenamiento y el alojamiento. En el siguiente tutorial, aprenderemos cómo crear e interactuar con GraphQL y las API sin servidor.
Si bien este tutorial utiliza React, Amplify funcionará con cualquier proyecto de JavaScript y tiene componentes específicos de la infraestructura para Angular, Vue, React Native e Ionic. La CLI también es compatible con iOS y Android nativos.
Empezando
Crear una nueva aplicación React
Para comenzar, primero debemos crear una nueva aplicación React utilizando la create-react-app CLI y cambiar al nuevo directorio:
1 |
npx create-react-app amplify-web-app |
2 |
|
3 |
cd amplify-web-app
|
A continuación, instalaremos las dependencias de clientes de AWS Amplify:
1 |
yarn add aws-amplify aws-amplify-react |
2 |
|
3 |
# or
|
4 |
|
5 |
npm install aws-amplify aws-amplify-react
|
Instale y configure la CLI de Amplificación de AWS
A continuación, tendremos que instalar la CLI de AWS Amplify.
1 |
npm install -g @aws-amplify/cli |
Ahora que AWS Amplify CLI está instalado, debemos configurarlo para poder crear recursos en nuestra cuenta de AWS. Hacemos esto ejecutando el comando amplify configure
y configurando un nuevo usuario de AWS.
1 |
amplify configure |
Puede ver un video corto de esta configuración en YouTube.
Ahora
que AWI Amplify CLI está instalado y configurado, ejecute el comando
amplify
desde su línea de comandos para ver las opciones disponibles y
asegurarse de que la CLI se haya instalado correctamente.
1 |
amplify |
Inicializando un nuevo proyecto de amplificación de AWS
Para inicializar un nuevo proyecto de Amplificación de AWS, ejecutaremos el comando de amplify init
:
1 |
amplify init |
Cuando se le solicite, elija su editor de texto preferido y respete los valores predeterminados para todas las demás opciones.
Esto
ahora ha inicializado un nuevo proyecto de AWS Amplify localmente, y
ahora veremos un directorio de amplify
y un archivo .amplifyrc
creados en el directorio raíz de nuestro proyecto React. Estos
archivos contienen información de configuración sobre nuestro proyecto
Amplify, y no necesitamos tocarlos en absoluto por ahora.
Implementando Autenticación
La primera característica que habilitaremos es la autenticación del usuario. Podemos habilitar las funciones en cualquier momento ejecutando amplify add <featurename>
. La categoría para la autenticación es auth
, así que ejecute:
1 |
amplify add auth |
Cuando se le pregunte ¿Desea utilizar la configuración de seguridad y autenticación predeterminada ?, elija Sí.
Una vez que se crea esto, debemos ejecutar amplify push
para crear el nuevo servicio en nuestra cuenta:
1 |
amplify push |
Cuando se le pregunte ¿Está seguro de que desea continuar ?, elija Sí.
Una vez que se haya creado el servicio, puede ver el servicio en el panel en cualquier momento visitando https://console.aws.amazon.com/cognito/users/ y haciendo clic en el nombre de su servicio.
También podemos ver todos los servicios habilitados en cualquier momento ejecutando amplify status
:
1 |
amplify status |
También notará que se creó un nuevo archivo, aws-exports.js, en la carpeta raíz de la aplicación React. No necesitará editar este archivo como lo maneja el CLI, pero lo usaremos en el próximo paso para configurar el proyecto local.
Adición de autenticación a la aplicación React
¡Ahora que hemos creado el servicio de autenticación, podemos comenzar a usarlo en nuestra aplicación React!
Lo primero que debemos hacer es configurar la aplicación React para conocer nuestro proyecto Amplify. La forma en que lo hacemos es llamando a Amplify.configure
en la raíz del proyecto; para nosotros, eso será src / index.js.
1 |
import Amplify from 'aws-amplify' |
2 |
import config from './aws-exports' |
3 |
Amplify.configure(config) |
Ahora, nuestro proyecto está listo y podemos implementar la autenticación.
Uso del componente de orden superior withAuthenticator
Veremos un
par de maneras de implementar la autenticación de usuarios, pero para
comenzar, comenzaremos con el componente de orden superior
withAuthenticator
de la biblioteca aws-amplify-reac. Este
componente crea un flujo completo de autenticación en solo unas pocas
líneas de código y es una excelente manera de comenzar a trabajar con la
biblioteca.
En App.js, importe el withAuthenticator
HOC en la parte superior del archivo:
1 |
import { withAuthenticator } from 'aws-amplify-react' |
Y,
en la parte inferior, actualice la declaración de export
para
envolver el componente de la app
con withAuthenticator
.
1 |
export default withAuthenticator(App) |
Para
obtener más información, lea sobre los componentes de Amplify React
disponibles para la autenticación en la documentación oficial.
Probando el flujo de autenticación
Ahora, podemos ejecutar la aplicación y deberíamos ver una pantalla de inicio de sesión:



Haga clic en Crear cuenta para registrarse y luego inicie sesión en la aplicación. Una vez que hayamos iniciado sesión, la sesión se almacenará, por lo que podemos actualizar la página y nos mantendremos conectados.
Opciones de salida
También podemos generar un botón de cierre de sesión agregando un segundo argumento al HOC:
1 |
export default withAuthenticator(App, { includeGreetings: true }) |
Tenga en cuenta que también podemos usar la clase Auth
directamente para cerrar la sesión de los usuarios:
1 |
// 1. import the class
|
2 |
import { Auth } from 'aws-amplify' |
3 |
|
4 |
// Sign the user out
|
5 |
await Auth.signOut() |
Tenga
en cuenta que al llamar a Auth.signOut
directamente, todavía debemos
volver a enviar el componente de alguna manera para que el usuario
vuelva a la página de inicio de sesión. Puede ver un ejemplo de esto en un subproceso de problemas en el repositorio de GitHub del proyecto.
Usando la clase Auth
También podemos usar la clase Auth
para administrar usuarios manualmente. Auth
tiene más de 30 métodos disponibles que incluyen signUp
, signIn
,
confirmSignUp
, confirmSignIn
, forgotPassword
y resendSignUp
.
Veamos cómo puede implementar el registro de usuarios usando el método de clase signUp
:
1 |
// 1. Create initial state to hold user inputs
|
2 |
state = {username: '', password: '', email: '', phone_number: '', authCode: ''} |
3 |
|
4 |
// 2. onChange handler for user input changes
|
5 |
onChange = e => { |
6 |
this.setState({ [e.target.name]: e.target.value }) |
7 |
}
|
8 |
|
9 |
// 3. Function to call Auth.signUp
|
10 |
signUp = async () => { |
11 |
const { username, password, email, phone_number } = this.state |
12 |
await Auth.signUp({ |
13 |
username, password, attributes: { phone_number, email} |
14 |
})
|
15 |
console.log('successfully signed up') |
16 |
}
|
17 |
|
18 |
// 4. Function to call Auth.signUp
|
19 |
confirmSignUp = async () => { |
20 |
const { username, authCode } = this.state |
21 |
await Auth.confirmSignUp(username, authCode) |
22 |
console.log('successfully confirmed signed up') |
23 |
}
|
24 |
|
25 |
// 5. In render method, create inputs with attributes to update state
|
26 |
<input onChange={this.onChange} name='username' /> |
27 |
|
28 |
// 6. Create buttons to call signUp and confirmSignUp methods
|
29 |
<button onClick={this.signUp}>Sign Up</button> |
Este es un anteproyecto de cómo podría registrar manualmente un usuario con la clase Auth.
La implementación manual requiere más tiempo para escribir, pero le brinda un control completo no solo de la interfaz de usuario, sino también de la funcionalidad real que desea implementar.
Puede obtener más información sobre la autenticación con AWS Amplify en la documentación del proyecto.
Almacenamiento con Amazon S3
Amazon S3 es un servicio popular para almacenar medios como imágenes y videos, así como para servicios de back-end como alojamiento de aplicaciones, copias de seguridad y entrega de software.
AWS Amplify CLI nos permite crear, configurar, actualizar y eliminar depósitos de S3. En esta sección, veremos cómo crear un grupo de S3 y cómo cargar y descargar imágenes y archivos en el grupo.
Para habilitar el almacenamiento, podemos ejecutar el siguiente comando:
1 |
amplify add storage |
A continuación, se le pedirá que proporcione algunos detalles de configuración. Seleccione el servicio de Contenido (Imágenes, audio, video, etc.). A continuación, proporcione un nombre de recurso específico del proyecto (utilizado internamente en el proyecto) y un nombre de depósito (la ubicación S3 donde se almacenarán sus datos). Finalmente, el acceso debe estar restringido a usuarios de Auth solamente, y los usuarios autenticados deben tener acceso de lectura / escritura.
Ahora
el almacenamiento se ha agregado a nuestra configuración, y ejecutamos
amplify push
para crear los nuevos recursos en nuestra cuenta:
1 |
amplify push |
Esto creará y configurará un depósito de Amazon S3 que podemos comenzar a usar para almacenar elementos.
Ejemplo de uso de almacenamiento S3
Si quisiéramos probar esto, podríamos almacenar algo de texto en un archivo como este:
1 |
import { Storage } from 'aws-amplify' |
2 |
|
3 |
// create function to work with Storage
|
4 |
addToStorage = () => { |
5 |
Storage.put('javascript/MyReactComponent.js', ` |
6 |
import React from 'react'
|
7 |
const App = () => (
|
8 |
<p>Hello World</p>
|
9 |
)
|
10 |
export default App
|
11 |
`) |
12 |
.then (result => { |
13 |
console.log('result: ', result) |
14 |
})
|
15 |
.catch(err => console.log('error: ', err)); |
16 |
}
|
17 |
|
18 |
// add click handler
|
19 |
<button onClick={this.addToStorage}>Add To Storage</button> |
Esto creará
una carpeta llamada javascript en nuestro grupo de S3 y almacenará un
archivo llamado MyReactComponent.js allí con el código que especificamos
en el segundo argumento de Storage.put
.
Si queremos leer todo de esta carpeta, podemos usar Storage.list
:
1 |
readFromStorage = () => { |
2 |
Storage.list('javascript/') |
3 |
.then(data => console.log('data from S3: ', data)) |
4 |
.catch(err => console.log('error')) |
5 |
}
|
Si solo queremos leer el único archivo, podemos usar Storage.get
:
1 |
readFromStorage = () => { |
2 |
Storage.get('javascript/MyReactComponent.js') |
3 |
.then(data => console.log('data from S3: ', data)) |
4 |
.catch(err => console.log('error')) |
5 |
} |
Si quisiéramos desplegar todo, podríamos usar Storage.list
:
1 |
readFromStorage = () => { |
2 |
Storage.list('') |
3 |
.then(data => console.log('data from S3: ', data)) |
4 |
.catch(err => console.log('error')) |
5 |
}
|
Trabajando con imagenes
Trabajar con imágenes también es fácil. Aquí hay un ejemplo:
1 |
class S3ImageUpload extends React.Component { |
2 |
onChange(e) { |
3 |
const file = e.target.files[0]; |
4 |
Storage.put('example.png', file, { |
5 |
contentType: 'image/png' |
6 |
})
|
7 |
.then (result => console.log(result)) |
8 |
.catch(err => console.log(err)); |
9 |
}
|
10 |
|
11 |
render() { |
12 |
return ( |
13 |
<input |
14 |
type="file" accept='image/png' |
15 |
onChange={(e) => this.onChange(e)} |
16 |
/> |
17 |
)
|
18 |
}
|
19 |
}
|
En el código anterior, vinculamos una entrada del formulario de carga de archivos al controlador de eventos onChange
. Cuando el usuario proporciona un archivo, se llama a Storage.put
para cargar el archivo a S3 con image/png
de tipo MIME.
Alojamiento
Para implementar y alojar su aplicación en AWS, podemos usar la categoría de hosting
.
1 |
amplify add hosting |
Una vez más, se le pedirá que proporcione algunas opciones de configuración:
- Para el tipo de entorno, seleccione DEV (S3 solo con HTTP).
- Elija un nombre de grupo único a nivel mundial donde se alojará su proyecto.
- Proporcione el nombre del índice y las URL de error para el sitio web, generalmente index.html.
Ahora, todo está configurado, y podemos publicar la aplicación:
1 |
amplify publish |
Removiendo servicios
Si en algún
momento desea eliminar un servicio de su proyecto y su cuenta, puede
hacerlo ejecutando el comando amplify remove
y luego presionando.
1 |
amplify remove auth |
2 |
amplify push |
Si no está seguro de qué servicios ha habilitado en cualquier momento, puede ejecutar el comando de amplify status
:
1 |
amplify status |
El amplify status
le dará la lista de recursos que actualmente están habilitados en su aplicación.
Conclusión
AWS Amplify permite a los desarrolladores crear aplicaciones de pila completa y habilitadas para la nube más fácilmente que nunca, lo que permite a los desarrolladores iterar rápidamente, directamente desde su entorno front-end.
Esta es la primera parte de una serie de dos. En el siguiente tutorial, aprenderemos cómo crear e interactuar con GraphQL y las API sin servidor. Así que estad atentos.