Share
Lo que vas a crearAWS Amplify es una biblioteca de código abierto que permite a los desarrolladores, y en nuestro caso a los desarrolladores de dispositivos móviles, agregar una gran cantidad de funcionalidades valiosas a las aplicaciones, incluidos análisis, notificaciones push, almacenamiento y autenticación..
Amplify funciona no solo con React Native, sino también con Vue, Angular, Ionic, React web y realmente cualquier marco de JavaScript. En este tutorial, demostraremos algunas de sus funciones principales dentro de una aplicación React Native.
Lo mejor de esta biblioteca es que abstrae lo que solía ser una configuración y configuración complejas para todas estas características en un módulo fácil de usar que podemos agregar a nuestro proyecto usando NPM.
Cubriremos AWS Amplify en tres partes: autenticación, almacenamiento y análisis..
Si desea seguir adelante, cree un nuevo proyecto React Native utilizando Expo (Crear aplicación nativa React) o la CLI React Native:
reactivo nativo init ARNmplificar
o
crear-reaccionar-nativo-aplicación RNAmplify
A continuación, vamos a seguir adelante e instalar el aws-amplificar biblioteca utilizando ya sea hilo o npm:
hilo agregar aws-amplificar
Si está utilizando Expo, puede omitir el siguiente paso (vinculación) ya que Expo ya envía las dependencias nativas para el soporte de Amazon Cognito.
Si no está utilizando Expo, debemos vincular el Cognito biblioteca (Amazon Cognito maneja la autenticación) que se instaló cuando agregamos aws-amplificar:
enlace nativo reactivo amazon-cognito-identity-js
Ahora que el proyecto React Native está creado y configurado, necesitamos configurar los servicios de Amazon con los que interactuaremos.
Dentro del directorio del nuevo proyecto, crearemos un nuevo proyecto de Mobile Hub para este tutorial. Para crear este proyecto, usaremos la CLI de AWSMobile, pero no dude en usar la consola si es un usuario más avanzado. He publicado un video de YouTube con una descripción general rápida de la CLI de AWSMobile si desea obtener más información al respecto.
Ahora vamos a crear un nuevo proyecto de Mobile Hub en la raíz de nuestro nuevo directorio de proyectos:
awsmobile init
Después de haber creado tu proyecto y tener tu archivo aws-exports (Esto se crea automáticamente para usted ejecutando awsmobile init), necesitamos configurar nuestro proyecto React Native con nuestro proyecto AWS utilizando AWS Amplify.
Para ello, entraremos en App.js debajo de las últimas importaciones y agregue las siguientes tres líneas de código:
importar Amplify, Auth desde 'aws-amplify' importar configuración desde './aws-exports' Amplify.configure (config)
La autenticación con Amplify se realiza mediante el uso del servicio Amazon Cognito. Usaremos este servicio para permitir a los usuarios iniciar sesión y registrarse en nuestra aplicación!
Agreguemos el inicio de sesión de usuario y Amazon Cognito a nuestro proyecto Mobile Hub. En el directorio raíz, ejecute los siguientes comandos:
El inicio de sesión de usuario de awsmobile habilita el empuje de awsmobile
Ahora, tendremos un nuevo grupo de usuarios de Amazon Cognito configurado y listo para funcionar. (Si desea ver los detalles de este nuevo servicio, vaya a la Consola de AWS, haga clic en Cognito y elija el nombre del nombre del proyecto de AWSMobile que creó).
A continuación, integremos la autenticación con Amazon Cognito y AWS Amplify.
Comencemos por echar un vistazo a la clase principal que utilizará para tener acceso completo a los servicios de Amazon Cognito, el Autenticación clase.
los Autenticación La clase tiene muchos métodos que le permitirán hacer todo, desde registrarse e iniciar sesión en los usuarios hasta cambiar su contraseña y todo lo que se encuentre entre ellos..
También es sencillo trabajar con autenticación de dos factores con AWS Amplify utilizando el Autenticación clase, como veremos en el siguiente ejemplo.
Echemos un vistazo a cómo podría iniciar sesión y registrarse en un usuario que utiliza Amazon Cognito y el Autenticación clase.
¡Podemos lograr un registro sólido y un flujo de inicio de sesión con relativamente poco trabajo! Estaremos usando el Regístrate, confirmSignUp, registrarse, y confirmSignInmétodos de la Autenticación clase.
En App.js, vamos a crear algunos métodos que manejarán el registro de usuarios con autenticación de dos factores, así como algún estado para mantener la entrada del usuario:
Accentsconagua
state = username: ", email:", phone_number: ", password:", authCode: ", user: onChangeText = (clave, valor) => this.setState ([key]: value) signUp () const nombre de usuario, contraseña, correo electrónico, número de teléfono = this.state Auth.signUp (nombre de usuario, contraseña, atributos: phone_number, correo electrónico) .then (() => console.log ('usuario ¡Registro exitoso! ')) .catch (err => console.log (' error al registrarse usuario: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .then (() => console.log ('¡confirme que el usuario se registró correctamente!')) .catch (err => console.log ('error que confirma el registro del usuario:', err))Regístrate crea la solicitud de registro inicial, que enviará un SMS al nuevo usuario para confirmar su número. confirmSignUp toma el código SMS y el nombre de usuario y confirma al nuevo usuario en Amazon Cognito.
También crearemos una interfaz de usuario para la entrada del formulario y un botón, y conectaremos los métodos de clase a estos elementos de la interfaz de usuario. Actualizar el hacer Método a los siguientes:
render () return (); this.onChangeText ('nombre de usuario', val) /> this.onChangeText ('contraseña', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Finalmente, actualizaremos nuestra estilos Declaración para que tengamos una mejor interfaz de usuario:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, input: height: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margen: 10));
Para ver la versión final de este archivo, haga clic en aquí.
Ahora, deberíamos poder registrarnos, obtener un código de confirmación enviado a nuestro número de teléfono y confirmar ingresando el código de confirmación.
Si desea ver los detalles de este usuario recién creado, vuelva a la Consola AWS, haga clic en Cognito, elija el nombre del nombre del proyecto AWSMobile que creó y haga clic en Usuarios y grupos en el Configuración general menú a la izquierda.
Puede llevar esto más lejos implementando el inicio de sesión y confirme el inicio de sesión. Echemos un vistazo a los métodos para registrarse y confirmSignIn:
signIn () Auth.signIn (this.state.username, this.state.password) .then (user => this.setState (user) console.log ('user sign in success !!')) .catch (err => console.log ('error al iniciar sesión en usuario:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => console .log ('¡confirme el inicio de sesión del usuario con éxito!')) .catch (err => console.log ('error confirmando el inicio de sesión del usuario:', err))Una vez que el usuario ha iniciado sesión, podemos utilizar Autenticación para acceder a la información del usuario!
Podemos llamar Auth.currentUserInfo () para obtener la información del perfil del usuario (nombre de usuario, correo electrónico, etc.) o Auth.currentAuthenticatedUser () para obtener el usuario idToken, JWT, y mucha otra información útil sobre la sesión actual del usuario que inició sesión..
AWS Amplify usa Amazon Pinpoint para manejar las métricas. Cuando crea un nuevo proyecto de Mobile Hub utilizando CLI o Mobile Hub, tiene habilitado, configurado y listo para usar Amazon Pinpoint automáticamente..
Si aún no está familiarizado, Amazon Pinpoint es un servicio que no solo permite a los desarrolladores agregar Analytics a sus aplicaciones móviles, sino que también les permite enviar notificaciones push, mensajes SMS y correos electrónicos a sus usuarios..
Con AWS Amplify, podemos enviar información de sesión de usuario como métricas a Amazon Pinpoint con unas pocas líneas de código.
Vamos a abrir el panel de control de Amazon Pinpoint para poder ver los eventos que estamos por crear. Si abre su proyecto de Mobile Hub en la consola de AWS, elija Analítica en la esquina superior derecha, o vaya directamente a Amazon Pinpoint Desde la consola, y abre el proyecto actual..
En la barra de navegación azul oscuro de la izquierda, hay cuatro opciones: Analítica, Segmentos, Campañas, y Directo. Escoger Analítica.
Una vez que comencemos a crear eventos de envío, podremos verlos en esta vista de consola..
¡Ahora estamos listos para comenzar el seguimiento! En App.js, elimine todo el código del último ejemplo, dejándonos básicamente con un método de procesamiento que contenga una vista de contenedor con un saludo de texto, sin estado, sin métodos de clase y solo un estilo de contenedor.
Nosotros tambien importamos Analítica desde aws-amplificar:
importar React, Componente desde 'reaccionar'; importar StyleSheet, Text, Button, View desde 'react-native'; importar Amplify, Analytics desde 'aws-amplify' importar configuración desde './aws-exports' Amplify.configure (config) exportar clase predeterminada La aplicación extiende el Componente render () return (); estilos const = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Analítica
Una métrica común que puede querer rastrear es la cantidad de veces que el usuario abre la aplicación. Comencemos creando un evento que rastree esto..
En React Native, tenemos la AppState API, que nos dará el estado actual de la aplicación activo, fondo, o inactivo. Si el estado es activo, significa que el usuario ha abierto la aplicación. Si el estado es fondo, significa que la aplicación se ejecuta en segundo plano y que el usuario está en la pantalla de inicio o en otra aplicación, mientras inactivo significa que el usuario está haciendo la transición entre activo y en primer plano, multitarea o está en una llamada telefónica.
Cuando la aplicación se active, enviemos un evento a nuestro análisis que diga que la aplicación se abrió.
Para ello, estaremos llamando al siguiente evento:
Analytics.record ('¡Aplicación abierta!') Puede ver la API para este método en los documentos oficiales. los grabar el método toma tres argumentos: nombre (cadena), atributos (objeto, opcional) y métricas (objeto, opcional):
record (nombre: cadena, atributos ?: EventAttributes, metrics ?: EventMetrics): Promise
Actualicemos la clase para agregar un detector de eventos cuando se monta el componente y eliminarlo cuando se destruya el componente. Este oyente llamará _handleAppStateChange cada vez que el estado de la aplicación cambia:
componentDidMount () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Ahora, vamos a crear el _handleAppStateChange método:
_handleAppStateChange (appState) if (appState === 'active') Analytics.record ('¡Aplicación abierta!')Ahora, podemos mover la aplicación al fondo, abrirla de nuevo, y esto debería enviar un evento a nuestro panel de control de Analytics. Nota: para poner en segundo plano la aplicación en un simulador de iOS o un emulador de Android, presione Comando-Shift-H.
Para ver estos datos en el panel, haga clic en Eventos, y elige Aplicación abierta! desde el menú desplegable de Eventos:
También es probable que también note que tiene otros datos disponibles de forma automática desde Mobile Hub, incluidos datos de sesión, registro de usuario,y inicio de sesión del usuario. Pensé que era genial que toda esta información se grabara automáticamente..
Ahora vamos a llevar esto al siguiente nivel. ¿Qué pasa si quisiéramos rastrear no solo a un usuario que abre la aplicación, sino a qué usuario la abrió y cuántas veces la abrió??
Podemos hacerlo fácilmente agregando un atributo a la segunda métrica!
Actuemos como si tuviéramos un usuario registrado y rastreemos un nuevo evento al que llamaremos "Detalle del usuario: aplicación abierta".
Para hacer esto, actualice el evento de registro a lo siguiente:
Analytics.record ('Detalle del usuario - ¡Aplicación abierta!', Nombre de usuario: 'NaderDabit')
Luego, cierra y abre la aplicación un par de veces. Ahora deberíamos poder ver más detalles sobre el evento en nuestro panel de control.
Para ello, mira a la derecha de la Evento desplegable; hay un Atributos sección. Aquí, podemos profundizar en los atributos del evento. En nuestro caso, tenemos el nombre de usuario, por lo que ahora podemos filtrar este evento por nombre de usuario!
El último elemento que rastrearemos es la métrica de uso. Este es el tercer argumento para grabar.
Agreguemos una métrica que registre el tiempo acumulado que el usuario ha estado en la aplicación. Podemos hacer esto con bastante facilidad estableciendo un valor de tiempo en la clase, incrementándolo cada segundo y luego enviando esta información a Amazon Pinpoint cuando el usuario abre la aplicación:
// debajo del tiempo de definición de clase = 0 componentDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'active') Analytics.record ('Detalle del usuario - ¡Aplicación abierta!', nombre de usuario: 'NaderDabit', timeInApp: this.time) startTimer ( ) setInterval (() => this.time + = 1, 1000) // método de renderAquí, hemos creado un valor de hora y configurarlo para 0. También hemos añadido un nuevo startTimer Método que sumará 1 al valor de tiempo cada segundo. En componentDidMount, nosotros llamamos startTimer lo que incrementará el valor del tiempo en 1 cada segundo.
Ahora podemos agregar un tercer argumento a Analytics.record () que registrará este valor como una métrica!
Veamos cómo podemos usar Amplify con Amazon S3 para agregar almacenamiento a nuestra aplicación.
Para agregar S3 a su proyecto de Mobile Hub, ejecute los siguientes comandos:
Los archivos de usuario de awsmobile habilitan el empuje de awsmobile
AWS Amplify tiene una Almacenamiento API que podemos importar tal como lo hemos hecho con las otras API:
importar almacenamiento desde 'aws-amplify'
Entonces podemos llamar a métodos en Almacenamiento me gusta obtener, poner, lista, y retirar Para interactuar con los elementos de nuestro cubo..
Cuando se crea un cubo S3, automáticamente tendremos una imagen predeterminada en nuestro cubo en la carpeta pública; el mio se llama example-image.png. A ver si podemos usar AWS Amplificar leer y ver esta imagen desde S3.
Como mencioné anteriormente, Almacenamiento tiene un obtener método al que llamaremos para recuperar elementos, y el método para recuperar esta imagen se vería así:
Storage.get ('example-image.png')Para demostrar esta funcionalidad en nuestra aplicación React Native, creemos alguna funcionalidad que recupere esta imagen de S3 y la muestre a nuestro usuario.
Necesitaremos importar Imagende React Native, así como Almacenamiento desde aws-amplificar.
importar React, Componente desde 'Reaccionar' importar // previas Importaciones Imagen desde 'reaccion-native'; importe Amplify, Storage desde 'aws-amplify' // resto del código
Ahora, necesitaremos tener algún estado para mantener esta imagen, así como un método para recuperar la imagen y mantenerla en el estado. Agreguemos lo siguiente a nuestra clase sobre el método de renderización:
state = url: " async getFile () let name = 'example-image.png'; permita que fileUrl = espere Storage.get (name); this.setState (url: fileUrl)
Finalmente, agreguemos algunos elementos de la interfaz de usuario para recuperar la imagen y renderizarla a la interfaz de usuario:
render () return (); Almacenamiento this.state.url! == "&& ()
Ahora deberíamos poder hacer clic en el botón y ver la imagen desde S3!
Para ver la versión final de este archivo, haga clic aquí..
En general, AWS Amplify proporciona una manera realmente fácil de lograr lo que solía ser una funcionalidad compleja sin mucho código, que se integra perfectamente con muchos servicios de AWS..
No cubrimos las notificaciones push, que también se agregaron recientemente a AWS Amplify, pero se cubrirán en una próxima publicación!
AWS Amplify se está manteniendo activamente, por lo que si tiene alguna solicitud de características o ideas, no dude en comentar, enviar un problema o solicitar una solicitud, o simplemente marque o vea el proyecto si desea mantenerse actualizado con futuras funciones.!
Y mientras tanto, echa un vistazo a algunas de nuestras otras publicaciones sobre la codificación de las aplicaciones nativas React.
