Share
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 a los desarrolladores crear 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 usa React, Amplify trabajará 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.
Para comenzar, primero debemos crear una nueva aplicación React utilizando la CLI de crear-reaccionar-aplicación 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:
hilo agregar aws-amplificar aws-amplify-reaccion # o npm instalar aws-amplify aws-amplify-reaccion
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 amplificar configurar comando y configuración de un nuevo usuario de AWS.
amplificar configurar
Puede ver un video corto de esta configuración en YouTube.
Ahora que AWS Amplify CLI está instalado y configurado, ejecute el amplificar comando desde su línea de comandos para ver las opciones disponibles y asegurarse de que la CLI se instaló correctamente.
amplificar
Para inicializar un nuevo proyecto de Amplificación de AWS, ejecutaremos el amplificar init mando:
amplificar 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 AWS Amplify localmente, y ahora veremos un amplificar directorio y .amplificar Archivo creado 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.
La primera característica que habilitaremos es la autenticación del usuario. Podemos habilitar funciones en cualquier momento ejecutando amplificar añadir . La categoría de autenticación es autenticación, así que corre:
amplificar agregar auth
Cuando se le preguntó ¿Desea utilizar la configuración de seguridad y autenticación predeterminada??, escoger Sí.
Una vez creado esto, necesitamos ejecutar amplificar empuje Para crear el nuevo servicio en nuestra cuenta:
amplificar empuje
Cuando se le preguntó Estás seguro de que quieres continuar?, escoger 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 pinchando en el nombre de tu servicio..
También podemos ver todos los servicios habilitados en cualquier momento ejecutando amplificar el estado:
amplificar el estado
También notará un nuevo archivo que fue creado-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.
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 Amplificar.configura En la raíz del proyecto, para nosotros, eso será src / index.js.
importar Amplify desde 'aws-amplify' importar configuración desde './aws-exports' Amplify.configure (config)
Ahora, nuestro proyecto está listo para funcionar y podemos implementar la autenticación.
Accentsconagua
con autenticador Componente de orden superiorVeremos un par de maneras de implementar la autenticación de usuarios, pero para comenzar, comenzaremos por utilizar con autenticador componente de orden superior de la aws-amplificar-reaccionar biblioteca. Este componente crea un flujo de autenticación completo en solo unas pocas líneas de código y es una excelente manera de comenzar a utilizar la biblioteca..
En App.js, importar el con autenticador HOC en la parte superior del archivo:
importar withAuthenticator desde 'aws-amplify-reaccion'
Y, en la parte inferior, actualizar el exportar declaración para envolver el Aplicación componente con con autenticador.
exportar por defecto con autenticador (aplicación)
Para obtener más información, lea sobre los componentes de Amplify React disponibles para la autenticación en la documentación oficial.
Ahora, podemos ejecutar la aplicación y deberíamos ver una pantalla de inicio de sesión:
Hacer clic Crear una cuenta para registrarse y luego iniciar 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..
También podemos generar un botón de cierre de sesión agregando un segundo argumento al HOC:
exportación predeterminada con autenticador (aplicación, includeGreetings: true)
Tenga en cuenta que también podemos utilizar el Autenticación clase directamente para cerrar la sesión de los usuarios:
// 1. Importe la importación de clase Auth desde 'aws-amplify' // Cierre la sesión del usuario que espera a Auth.signOut ()
Tenga en cuenta que al llamar Auth.signOut de manera directa, aún debemos redirigir 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 un tema en el repositorio de GitHub del proyecto.
Autenticación ClaseTambién podemos utilizar el Autenticación clase para gestionar manualmente los usuarios. Auth tiene más de 30 métodos disponibles, incluyendo Regístrate, registrarse, confirmSignUp, confirmSignIn, Se te olvidó tu contraseña, y resendSignUp.
Echemos un vistazo a cómo podría implementar el registro de usuarios usando el Regístrate método de clase:
// 1. Crear un estado inicial para mantener el estado de las entradas del usuario = nombre de usuario: ", contraseña:", correo electrónico: ", número de teléfono:", authCode: " // 2. El controlador onChange para los cambios de entrada del usuario onChange = e => this.setState ([e.target.name]: e.target.value) // 3. Función para llamar a Auth.signUp signUp = async () => const username, password, email, phone_number = this.state aguarda Auth.signUp (nombre de usuario, contraseña, atributos: phone_number, correo electrónico) console.log ('se registró correctamente') // 4. Función para llamar a Auth.signUp confirmSignUp = async () => const username, authCode = this.state await Auth.confirmSignUp (username, authCode) console.log ('confirmado correctamente registrado') // 5. En el método de representación, cree entradas con atributos para actualizar el estado // 6. Crear botones para llamar a los métodos signUp y confirmSignUp Este es un anteproyecto de cómo puede 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..
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 contenedor S3, así como también cómo cargar y descargar imágenes y archivos en el contenedor..
Para habilitar el almacenamiento, podemos ejecutar el siguiente comando:
amplificar agregar almacenamiento
A continuación, se le pedirá que proporcione algunos detalles de configuración. Selecciona el Contenido (Imágenes, audio, video, etc.) Servicio. 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 restringirse a Sólo usuarios de autenticación, y los usuarios autenticados deben ser concedidos leer escribir acceso.
Ahora el almacenamiento se ha agregado a nuestra configuración, y ejecutamos amplificar empuje Para crear los nuevos recursos en nuestra cuenta:
amplificar empuje
Esto creará y configurará un depósito de Amazon S3 que podemos comenzar a usar para almacenar elementos..
Si quisiéramos probar esto, podríamos almacenar algo de texto en un archivo como este:
importar Almacenamiento desde 'aws-amplify' // crear función para trabajar con Almacenamiento addToStorage = () => Storage.put ('javascript / MyReactComponent.js', 'import React from' reaccion 'const App = () = > ( Hola Mundo
) exportar la aplicación predeterminada ') .then (resultado => console.log (' resultado: ', resultado)) .catch (err => console.log (' error: ', err)); // agregar el controlador de clic Esto creará una carpeta llamada javascript en nuestro cubo S3 y almacenar un archivo llamado MyReactComponent.js Allí con el código que especificamos en el segundo argumento de Almacenamiento.put.
Si queremos leer todo de esta carpeta, podemos usar Almacenamiento.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 Almacenamiento.get:
readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('data from S3:', data)) .catch (err => console.log (' error '))Si quisiéramos derribar todo, podríamos usar Almacenamiento.list:
readFromStorage = () => Storage.list (") .then (data => console.log ('data from S3:', data)) .catch (err => console.log ('error'))Trabajar con imágenes también es fácil. Aquí hay un ejemplo:
la clase S3ImageUpload extiende React.Component onChange (e) const file = e.target.files [0]; Storage.put ('example.png', archivo, contentType: 'image / png') .then (resultado => console.log (resultado)) .catch (err => console.log (err)); render () return ( this.onChange (e) />)En el código anterior, vinculamos una entrada del formulario de carga de archivos a la onChange controlador de eventos. Cuando el usuario suministra un archivo, Almacenamiento.put Se llama a subir el archivo a S3 con tipo MIME. imagen / png.
Para implementar y alojar su aplicación en AWS, podemos utilizar el alojamiento categoría.
amplificar agregar alojamiento
Una vez más, se le pedirá que proporcione algunas opciones de configuración:
Ahora, todo está configurado, y podemos publicar la aplicación:
amplificar publicar
Si en algún momento desea eliminar un servicio de su proyecto y su cuenta, puede hacerlo ejecutando el amplificar eliminar comando y luego empujando.
amplificar eliminar auth amplificar empujar
Si no está seguro de qué servicios ha habilitado en cualquier momento, puede ejecutar el amplificar el estado mando:
amplificar el estado
amplificar el estado le dará la lista de recursos que actualmente están habilitados en su aplicación.
AWS Amplify les permite a los desarrolladores crear aplicaciones de pila completa, 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.
