Advertisement
  1. Code
  2. Mobile Development

Sobrealimentar su Aplicación React Native con AWS

Scroll to top
Read Time: 14 min

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

AWS Amplify es una biblioteca de código abierto que permite a los desarrolladores y en nuestros caso desarrolladores móviles, para agregar un host de funcionalidad valiosa para aplicaciones como analytics, push notificaciones, almacenamiento y autenticación.

Amplify trabaja no solo con React Native, sino también con Vue, Angular, iónico, web reaccione y realmente cualquier framework de JavaScript. En este tutorial, nos se manifestarán algunas de su funcionalidad dentro de una aplicación nativa de reaccionar.

Lo bueno de esta librería es que abstrae lejos lo que solía ser compleja instalación y configuración de todas estas características en un módulo fácil de usar que podemos añadir a nuestro proyecto utilizando la nueva gestión pública.

Cubriremos AWS Amplify en tres partes: autenticación, almacenamiento y análisis.

React Native Instalación y Configuración

Si quieres seguir, cree un nuevo proyecto React Native con Expo (crear reaccionar aplicación nativa) o la CLI React Native:

1
react-native init RNAmplify

o

1
create-react-native-app RNAmplify

A continuación, vamos a seguir adelante e instalar el aws-amplify biblioteca usando hilo o nueva gestión pública:

1
yarn add aws-amplify

Si usas Expo, puede omitir el paso siguiente (enlace) como la Expo envía ya las dependencias nativas para el soporte de Amazon cognitio.

Si no usas Expo, necesitamos enlazar la biblioteca Cognitio (cognitio Amazon controla la autenticación) que se instaló cuando agregamos aws-amplify:

1
react-native link amazon-cognito-identity-js

Configuración AWS

Ahora que el proyecto React Native es creado y configurado, tenemos que configurar los servicios de Amazon será interaccionar con.

Dentro del directorio del nuevo proyecto, crearemos un nuevo proyecto de centro móvil para este tutorial. Para crear este proyecto, vamos a usar la CLI AWSMobile, pero siéntase libre de utilizar la consola de si eres un usuario más avanzado. Acabo de publicar un video de YouTube con un resumen rápido de CLI AWSMobile si quieres aprender más sobre él.

Ahora vamos a crear un nuevo proyecto de centro móvil en la raíz de nuestro directorio de proyecto nuevo:

1
awsmobile init

Después de que usted ha creado su proyecto y su archivo de aws-exportaciones (esto es automáticamente creado para usted por corriente awsmobile init), necesitamos configurar nuestro proyecto nativo de reaccionar con nuestro proyecto AWS con AWS amplificar.

Para ello, nos entrará App.js debajo de la última importación y agregue las tres líneas siguientes de código:

1
import Amplify, { Auth } from 'aws-amplify'
2
import config from './aws-exports'
3
Amplify.configure(config)

Autenticación

Autenticación con amplificación se realiza utilizando el servicio de Amazon Cognito. Usaremos este servicio para permitir a los usuarios iniciar sesión y Regístrate a nuestra aplicación!

Agregar Autenticación Mediante la CLI AWSMobile

Vamos a agregar usuario iniciar sesión y Amazon Cognito a nuestro proyecto de eje móvil. En el directorio raíz, ejecute los siguientes comandos:

1
awsmobile user-signin enable

2


3
awsmobile push

Ahora, tenemos un nuevo grupo de usuario de Amazon cognitio configurado y listo para ir. (Si desea ver los detalles de este nuevo servicio, ir a la consola AWS, haga clic en Cognito y elegir el nombre del proyecto AWSMobile que creó.)

A continuación, vamos a integrar la autenticación y cognitio Amazon AWS amplificar.

Clase Auth

Vamos a empezar por echar un vistazo a la clase principal que va a utilizar para tener acceso a los servicios de Amazon cognitio, la clase Auth.

La clase Auth tiene muchos métodos que te permitirá todo lo hacer de firmar y firmar en los usuarios cambiar sus contraseñas y todo lo demás.

También es fácil de trabajar con autenticación de dos factores con AWS amplificar mediante la clase Auth, como veremos en el siguiente ejemplo.

Ejemplo

Echemos un vistazo a cómo es posible ir de firmar y firmar en un usuario con Amazon cognitio y la clase Auth.

Podemos lograr un sólido flujo de suscripción y el signo con relativamente poco trabajo! Utilizaremos signUp, confirmSignUpsignIn y confirmSignIn métodos de la clase Auth.

En App.js, vamos a crear unos métodos que manejará el usuario registrarse con autenticación de dos factores, así como algún Estado para celebrar la entrada del usuario:

1
  state = {
2
    username: '',
3
    email: '',
4
    phone_number: '',
5
    password: '',
6
    authCode: '',
7
    user: {}
8
  }
9
  onChangeText = (key, value) => {
10
    this.setState({
11
      [key]: value
12
    })
13
  }
14
  signUp() {
15
    const { username, password, email, phone_number } = this.state
16
    Auth.signUp({
17
      username,
18
      password,
19
      attributes: {
20
        phone_number,
21
        email
22
      }
23
    })
24
      .then(() => console.log('user sign up success!!'))
25
      .catch(err => console.log('error signing up user: ', err))
26
  }
27
  confirmSignUp() {
28
    Auth.confirmSignUp(this.state.username, this.state.authCode)
29
      .then(() => console.log('confirm user sign up success!!'))
30
      .catch(err => console.log('error confirming signing up user: ', err))
31
  }

signUp crea la solicitud de inscripción 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 el nuevo usuario en Amazon cognitio.

También crear un interfaz de usuario para la entrada de formulario y un botón y los métodos de la clase de alambre a estos elementos de interfaz de usuario. Actualizar el método de render a la siguiente:

1
render() {
2
    return (
3
      <View style={styles.container}>
4
        <TextInput
5
          style={styles.input}
6
          placeholder='Username'
7
          onChangeText={val => this.onChangeText('username', val)}
8
        />

9
        <TextInput
10
          style={styles.input}
11
          placeholder='Password'
12
          secureTextEntry={true}
13
          onChangeText={val => this.onChangeText('password', val)}
14
        />

15
        <TextInput
16
          style={styles.input}
17
          placeholder='Email'
18
          onChangeText={val => this.onChangeText('email', val)}
19
        />

20
        <TextInput
21
          style={styles.input}
22
          placeholder='Phone Number'
23
          onChangeText={val => this.onChangeText('phone_number', val)}
24
        />

25
        <Button
26
          title='Sign Up'
27
          onPress={this.signUp.bind(this)}
28
        />

29
        <TextInput
30
          style={styles.input}
31
          placeholder='Confirmation Code'
32
          onChangeText={val => this.onChangeText('authCode', val)}
33
        />

34
        <Button
35
          title='Confirm Sign Up'
36
          onPress={this.confirmSignUp.bind(this)}
37
        />

38
      </View>

39
    );
40
  }

Por último, vamos a actualizar nuestra declaración de estilos para que tengamos una mejor interfaz de usuario:

1
const styles = StyleSheet.create({
2
  container: {
3
    flex: 1,
4
    justifyContent: 'center',
5
  },
6
  input: {
7
    height: 50,
8
    borderBottomWidth: 2,
9
    borderBottomColor: '#9E9E9E',
10
    margin: 10
11
  }
12
});
Basic Sign In FormBasic Sign In FormBasic Sign In Form

Para ver la versión final de este archivo, haga clic aquí.

Ahora, deberíamos podemos inscribirse, obtener un código de confirmación enviado a nuestro número de teléfono y confirmar escribiendo en el código de confirmación.

Si desea ver los detalles de esta recién creada usuario, ir a la consola AWS, haga clic en Cognito, elegir el nombre del nombre del proyecto AWSMobile ha creado y haga clic en Usuarios y Grupos en el menú de Configuración General de la izquierda.

Puede tenerlo más por aplicación de inicio de sesión y confirmar inicio de sesión. Echemos un vistazo a los métodos para signIn y confirmSignIn:

1
  signIn() {
2
    Auth.signIn(this.state.username, this.state.password)
3
    .then(user => {
4
      this.setState({ user })
5
      console.log('user sign in success!!')
6
    })
7
    .catch(err => console.log('error signing in user: ', err))
8
  }
9
  confirmSignIn() {
10
    Auth.confirmSignIn(this.state.user, this.state.authCode)
11
      .then(() => console.log('confirm user sign in success!!'))
12
      .catch(err => console.log('error confirming signing in user: ', err))
13
  }

Acceso a Datos y Sesión del Usuario

Una vez que el usuario se firma en, entonces podemos usar Auth para información de usuario de acceso!

Podemos llamar a Auth.currentUserInfo() para obtener información del perfil de usuario (username, correo electrónico, etc.) o Auth.currentAuthenticatedUser() a idToken de usuario, JWT y mucha otra información útil sobre corriente del usuario ha iniciado sesión en sesión.

Analytics

AWS Amplify utiliza Amazon Pinpoint para gestionar métricas. Cuando se crea un nuevo proyecto de eje móvil usando la CLI o eje móvil, automáticamente tienen punta de Amazon está habilitado, configurado y listo para ir.

Si no está ya familiarizado, Amazon Pinpoint es un servicio que no sólo permite a los desarrolladores añadir Analytics a sus aplicaciones móviles, pero 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 parámetros a Amazon Pinpoint con unas pocas líneas de código.

Vamos a abrir el dashboard de Pinpoint de Amazon por lo que podemos ver los eventos que están a punto de crear. Si abrir el proyecto Mobile Hub en la consola AWS, elegir Analytics en la esquina superior derecha, o ir directamente a Amazon Pinpoint desde la consola y abra el proyecto actual.

En la barra de navegación azul oscuro a la izquierda, hay cuatro opciones: Analytics, Segmentos, Campañas y Directa. Elegir el Analytics.

Pinpoint ConsolePinpoint ConsolePinpoint Console

Una vez que empiece a crear eventos envío, podremos ver en esta vista de la consola.

¡Ahora estamos listos para iniciar el seguimiento! En App.js, quite todo el código del último ejemplo, dejándonos con básicamente sólo un método de procesamiento que contiene un envase más con un saludo de texto, ningún Estado, ningún método de clase y sólo un estilo de envase.

También importamos Analytics de aws-amplify:

1
import React, { Component } from 'react';
2
import {
3
  StyleSheet,
4
  Text,
5
  Button,
6
  View
7
} from 'react-native';
8
9
import Amplify, { Analytics } from 'aws-amplify'
10
import config from './aws-exports'
11
Amplify.configure(config)
12
13
export default class App extends Component {
14
  render() {
15
    return (
16
      <View style={styles.container}>
17
        <Text>Analytics</Text>

18
      </View>

19
    );
20
  }
21
}
22
23
const styles = StyleSheet.create({
24
  container: {
25
    flex: 1,
26
    justifyContent: 'center',
27
    alignItems: 'center'
28
  }
29
});

Eventos Básicos de Seguimiento

Una métrica común que puede seguir es el número de veces que el usuario abre la aplicación. Vamos a empezar creando un evento que seguirá a esto.

En reaccionar nativos, contamos con la API AppState, que nos dará el estado actual de la aplicación activo, fondo, o inactivo. Si el estado está 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 el usuario es la pantalla principal o en otra aplicación, mientras que la inactiva significa el usuario es la transición entre el activo y primer plano, multitarea, o está en una llamada telefónica.

Cuando la aplicación se activa, vamos a enviar un evento para nuestro análisis que dice que la aplicación se abrió.

Para ello, nos pedirá el siguiente suceso:

1
Analytics.record('App opened!') 

Puede ver la API para este método en la documentación oficial. El método de registro toma tres argumentos: nombre (string), atributos (object, opcional) y métricas (object, opcional):

1
record(name: string, attributes?: EventAttributes, metrics?: EventMetrics): Promise<any>

Vamos a actualizar la clase para añadir un detector de eventos cuando el componente se monta y cuando el componente se destruye. Este oyente llame _handleAppStateChange cada vez que cambia el estado de la aplicación:

1
componentDidMount() {
2
  AppState.addEventListener('change', this._handleAppStateChange);
3
}
4
5
componentWillUnmount() {
6
  AppState.removeEventListener('change', this._handleAppStateChange);
7
}

Ahora, vamos a crear el método _handleAppStateChange:

1
_handleAppStateChange(appState) {
2
  if (appState === 'active') {
3
    Analytics.record('App opened!')
4
  }
5
}

Ahora, podemos pasar de la aplicación en el fondo, abierto nuevo, y esto debe enviar un evento a nuestro dashboard Analytics. Nota: Para la aplicación de un simulador de iOS o Android emulador de fondo, pulsa el comando-Shift-H.

Para ver estos datos en la consola, haga clic en Eventos y elegir que Aplicación abierta! de la lista desplegable de eventos:

Filtering and viewing Analytics eventsFiltering and viewing Analytics eventsFiltering and viewing Analytics events

Probablemente también notará que tienes otros datos disponibles a usted automáticamente del eje móvil, incluyendo datos de sesión de usuario, Regístrate y usuario iniciar sesión. Me pareció muy bien que toda esta información se registra automáticamente.

Seguimiento Detallado de Eventos

Ahora vamos a llevar esto al siguiente nivel. ¿Lo que si queríamos seguir no sólo a un usuario abrir la aplicación, pero que el usuario abre la aplicación y cuantas veces abre la aplicación?

¡Fácilmente podemos hacer esto añadiendo un atributo a la métrica de segunda!

Vamos a actuar como si tuviéramos un usuario suscrito en y el seguimiento de un nuevo evento que llamaremos "Detalle del usuario: Abre la aplicación".

Para ello, actualizar el registro evento a los siguientes:

Analytics.Record ('Usuario detalle - aplicación abierta!', {username: 'NaderDabit'})

A continuación, cierre y abra la aplicación un par de veces. Ahora deberíamos ser capaces de ver más detalles sobre el evento en nuestro dashboard.

Para ello, mira a la derecha de la lista desplegable del Evento; hay una sección de Atributos. Aquí, podemos profundizar en los atributos para el evento. En nuestro caso, tenemos el nombre de usuario, así que ahora podemos filtrar este evento por nombre de usuario!

Adding attributes and filtering by attributesAdding attributes and filtering by attributesAdding attributes and filtering by attributes

Uso de Métricas

Con el final que haremos el seguimiento procede las métricas de uso. Este es el tercer argumento para Grabar.

Vamos a agregar una métrica que registra el tiempo acumulado que lleva el usuario en la aplicación. Podemos hacerlo muy fácilmente un valor de tiempo en la clase, lo incrementan cada segundo y luego enviar esta información a lo largo de a punta de Amazon cuando el usuario abre la aplicación:

1
// below class definition

2
time = 0
3
componentDidMount() {
4
  this.startTimer()
5
  AppState.addEventListener('change', this._handleAppStateChange);
6
}
7
componentWillUnmount() {
8
  AppState.removeEventListener('change', this._handleAppStateChange);
9
}
10
_handleAppStateChange(appState) {
11
  if (appState === 'active') {
12
    Analytics.record('User detail - App opened!', { username: 'NaderDabit' }, { timeInApp: this.time })
13
  }
14
}
15
startTimer() {
16
  setInterval(() => {
17
    this.time += 1
18
  }, 1000)
19
}
20
// render method

Aquí, hemos creado un valor de tiempo y establézcalo en 0. También hemos añadido un nuevo método de startTimer que añade 1 a valor en el tiempo cada segundo. En componentDidMount, lo llamamos startTimer que incrementará el valor del tiempo por 1 cada segundo.

Ahora podemos añadir un tercer argumento a Analytics.record() que se registre este valor como una métrica!

Almacenamiento de Información

Vamos a ver cómo podemos utilizar amplificación con Amazon S3 para agregar almacenamiento a nuestra aplicación.

Para agregar S3 al proyecto cubo móvil, ejecute los siguientes comandos:

1
awsmobile user-files enable

2


3
awsmobile push

Ejemplo de Uso

Amplifican la AWS tiene una API de Almacenamiento de información que podemos importar igual que tenemos con las otras APIs:

import { Storage } from 'aws-amplify'

Entonces podemos llamar métodos en Storage como getputlist, y remove a 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. mina se llama ejemplo-image.png. Vamos a ver si podemos utilizar AWS Amplify para leer y ver esta imagen de S3.

View of S3 bucket public folderView of S3 bucket public folderView of S3 bucket public folder

Como he mencionado anteriormente, Storage tiene un método get que llamaremos para recuperar items, y el método para recuperar esta imagen se vería algo como esto:

1
Storage.get('example-image.png')

Para demostrar esta funcionalidad en nuestra aplicación React Native, vamos a crear algunas funciones que recupera esta imagen de S3 y demuestra a nuestro usuario.

Necesitamos importar imagen de reaccionar nativa, así como almacenamiento de aws-amplify.

1
import React, { Component } from 'React'
2
import {
3
  // previous imports

4
  Image
5
} from 'react-native';
6
7
import Amplify, { Storage } from 'aws-amplify'
8
// rest of code

Ahora, necesitamos tener algún Estado para sostener esta imagen, así como un método para recuperar la imagen y mantenerla en el estado. Vamos a añadir lo siguiente a nuestra clase sobre el método render:

1
state = {
2
  url: ''
3
}
4
async getFile() {
5
  let name = 'example-image.png';
6
  let fileUrl = await Storage.get(name);
7
  this.setState({
8
    url: fileUrl
9
  })
10
}

Por último, vamos a añadir algunos elementos de la interfaz de usuario para recuperar la imagen y hacerla a la interfaz de usuario:

1
render() {
2
  return (
3
    <View style={styles.container}>
4
      <Text>Storage</Text>

5
      <Button
6
        title="Get Image"
7
        onPress={this.getFile.bind(this)}
8
      />

9
      {
10
        this.state.url !== '' && (
11
          <Image
12
            source={{ uri: this.state.url }}
13
            style={{ width: 300, height: 300 }}
14
          />

15
        )
16
      }
17
    </View>

18
  );
19
}
App screenshots showing the Get Image featureApp screenshots showing the Get Image featureApp screenshots showing the Get Image feature

Ahora, deberíamos ser capaces de, haga clic en el botón y ver la imagen del S3.

Para ver la versión final de este archivo, haga clic aquí.

Conclusión

En general, AWS Amplify proporciona una manera realmente fácil para llevar a cabo lo que solía ser compleja funcionalidad con poco código, integrando perfectamente con muchos servicios AWS.

No cubrimos las notificaciones push, que recientemente fueron agregadas para AWS Amplify, pero estos se tratarán en un próximo post!

AWS amplificar activamente se mantiene, así que si tienes solicitudes o ideas, no dude en comentar, presentar un tema o solicitud, sólo estrellas o ver el proyecto si desea mantenerse al día con las características futuro!

Y mientras tanto, algunos de nuestros otros posts sobre codificación de aplicaciones React Native.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.