Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

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:

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

Instale y configure la CLI de Amplificación de AWS

A continuación, tendremos que instalar la CLI de AWS Amplify.

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.

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.

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:

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:

Cuando se le pregunte ¿Desea utilizar la configuración de seguridad y autenticación predeterminada ?, elija .

Una vez que se crea esto, debemos ejecutar amplify push para crear el nuevo servicio en nuestra cuenta:

Cuando se le pregunte ¿Está seguro de que desea continuar ?, elija .

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:

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.

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:

Y, en la parte inferior, actualice la declaración de export para envolver el componente de la app con withAuthenticator.

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:

Sign-in screen for the app

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:

Tenga en cuenta que también podemos usar la clase Auth directamente para cerrar la sesión de los usuarios:

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:

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:

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:

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:

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:

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

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

Trabajando con imagenes

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

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.

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:

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.

Si no está seguro de qué servicios ha habilitado en cualquier momento, puede ejecutar el comando de 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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.