Cómo crear aplicaciones web sin servidor con React y AWS Amplify

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:

npx create-react-app amplify-web-app

cd amplify-web-app

A continuación, instalaremos las dependencias de clientes de AWS Amplify:

yarn add aws-amplify aws-amplify-react

# or

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.

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.

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.

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:

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:

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:

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:

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.

import Amplify from 'aws-amplify'
import config from './aws-exports'
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:

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.

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:

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. import the class
import { Auth } from 'aws-amplify'

// Sign the user out
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. Create initial state to hold user inputs
state = {username: '', password: '', email: '', phone_number: '', authCode: ''}

// 2. onChange handler for user input changes
onChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}

// 3. Function to call Auth.signUp
signUp = async () => {
  const { username, password, email, phone_number } = this.state
  await Auth.signUp({
    username, password, attributes: { phone_number, email}
  })
  console.log('successfully signed up')
}

// 4. Function to call Auth.signUp
confirmSignUp = async () => {
  const { username, authCode } = this.state
  await Auth.confirmSignUp(username, authCode)
  console.log('successfully confirmed signed up')
}

// 5. In render method, create inputs with attributes to update state
<input onChange={this.onChange} name='username' />

// 6. Create buttons to call signUp and confirmSignUp methods
<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:

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:

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:

import { Storage } from 'aws-amplify'

// create function to work with Storage
addToStorage = () => {
  Storage.put('javascript/MyReactComponent.js', `
    import React from 'react'
    const App = () => (
      <p>Hello World</p>
    )
    export default App
  `)
    .then (result => {
      console.log('result: ', result)
    })
    .catch(err => console.log('error: ', err));
}

// add click handler
<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:

readFromStorage = () => {
  Storage.list('javascript/')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Si solo queremos leer el único archivo, podemos usar Storage.get:

readFromStorage = () => {
  Storage.get('javascript/MyReactComponent.js')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Si quisiéramos desplegar todo, podríamos usar Storage.list:

readFromStorage = () => {
  Storage.list('')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Trabajando con imagenes

Trabajar con imágenes también es fácil. Aquí hay un ejemplo:

class S3ImageUpload extends React.Component {
  onChange(e) {
      const file = e.target.files[0];
      Storage.put('example.png', file, {
          contentType: 'image/png'
      })
      .then (result => console.log(result))
      .catch(err => console.log(err));
  }

  render() {
      return (
          <input
              type="file" accept='image/png'
              onChange={(e) => this.onChange(e)}
          />
      )
  }
}

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.

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:

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.

amplify remove auth
amplify push

Si no está seguro de qué servicios ha habilitado en cualquier momento, puede ejecutar el comando de amplify status :

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.