使用AWS Amplify为React Native App增压

最新推荐文章于 2023-04-11 20:00:51 发布

cunjie3951

最新推荐文章于 2023-04-11 20:00:51 发布

阅读量768

点赞数

文章标签： python java vue 数据库大数据 ViewUI

AWS Amplify是一个开源库，使开发人员（在我们的情况下为移动开发人员）可以向应用程序添加大量有价值的功能，包括分析，推送通知，存储和身份验证。

Amplify不仅可以与React Native一起使用，而且还可以与Vue，Angular，Ionic，React Web以及实际上任何JavaScript框架一起使用。在本教程中，我们将在React Native应用程序中演示其一些核心功能。

该库的妙处在于，它将所有这些功能的复杂设置和配置抽象为易于使用的模块，我们可以使用NPM将其添加到项目中。

我们将分三个部分介绍AWS Amplify：身份验证，存储和分析。

React Native安装和设置

如果您想继续，请使用Expo（Create React Native App）或React Native CLI创建一个新的React Native项目：

react-native init RNAmplify

要么

create-react-native-app RNAmplify

接下来，让我们继续使用yarn或npm安装aws-amplify库：

yarn add aws-amplify

如果您使用的是Expo，则可以跳过下一步（链接），因为Expo已经提供了Amazon Cognito支持的本地依赖项。

如果您不使用Expo，则需要链接添加aws-amplify时安装的Cognito库（Amazon Cognito处理身份验证）：

react-native link amazon-cognito-identity-js

AWS设置

现在已经创建并配置了React Native项目，我们需要设置将要与之交互的Amazon服务。

在新项目的目录内，我们将为本教程创建一个新的Mobile Hub项目。要创建此项目，我们将使用AWSMobile CLI，但如果您是高级用户，请随时使用控制台。如果您想了解更多有关该视频的信息，我已经发布了一个YouTube视频，其中简要介绍了AWSMobile CLI 。

现在，让我们在新项目目录的根目录中创建一个新的Mobile Hub项目：

awsmobile init

创建项目并拥有aws-exports文件 （通过运行awsmobile init自动为您创建）之后，我们需要使用AWS Amplify将AWS Native项目配置为我们的React Native项目。

为此，我们将在最后一个导入下面进入App.js并添加以下三行代码：

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

认证方式

通过使用Amazon Cognito服务来进行Amplify身份验证。我们将使用此服务允许用户登录并注册我们的应用程序！

使用AWSMobile CLI添加身份验证

让我们将用户登录和Amazon Cognito添加到我们的Mobile Hub项目中。在根目录中，运行以下命令：

awsmobile user-signin enable

awsmobile push

现在，我们将建立一个新的Amazon Cognito用户池并准备就绪。（如果您想查看此新服务的详细信息，请转到AWS控制台，单击Cognito ，然后选择您创建的AWSMobile项目名称的名称。）

接下来，让我们将身份验证与Amazon Cognito和AWS Amplify集成。

验证类别

首先，让我们看一下将用于完全访问Amazon Cognito服务的主要类Auth类。

Auth类具有许多方法，使您可以执行所有操作，从注册和登录用户到更改其密码以及介于两者之间的所有操作。

使用Auth类通过AWS Amplify进行两因素身份验证也很简单，如下面的示例所示。

例

让我们看一下如何使用Amazon Cognito和Auth类进行注册并登录用户。

我们只需很少的工作就可以完成可靠的注册和登录流程！我们将使用signUp ， confirmSignUp ， signIn ，并confirmSignIn Auth类的方法。

在App.js中 ，让我们创建一些方法，这些方法将通过两因素身份验证来处理用户注册以及保持用户输入的某些状态：

state = {
    username: '',
    email: '',
    phone_number: '',
    password: '',
    authCode: '',
    user: {}
  }
  onChangeText = (key, value) => {
    this.setState({
      [key]: value
    })
  }
  signUp() {
    const { username, password, email, phone_number } = this.state
    Auth.signUp({
      username,
      password,
      attributes: {
        phone_number,
        email
      }
    })
      .then(() => console.log('user sign up success!!'))
      .catch(err => console.log('error signing up user: ', err))
  }
  confirmSignUp() {
    Auth.confirmSignUp(this.state.username, this.state.authCode)
      .then(() => console.log('confirm user sign up success!!'))
      .catch(err => console.log('error confirming signing up user: ', err))
  }

signUp创建初始注册请求，该请求将向新用户发送短信以确认其号码。 confirmSignUp会使用SMS代码和用户名，并在Amazon Cognito中确认新用户。

我们还将为表单输入和按钮创建一个UI，并将类方法连接到这些UI元素。将render方法更新为以下内容：

render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder='Username'
          onChangeText={val => this.onChangeText('username', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Password'
          secureTextEntry={true}
          onChangeText={val => this.onChangeText('password', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Email'
          onChangeText={val => this.onChangeText('email', val)}
        />
        <TextInput
          style={styles.input}
          placeholder='Phone Number'
          onChangeText={val => this.onChangeText('phone_number', val)}
        />
        <Button
          title='Sign Up'
          onPress={this.signUp.bind(this)}
        />
        <TextInput
          style={styles.input}
          placeholder='Confirmation Code'
          onChangeText={val => this.onChangeText('authCode', val)}
        />
        <Button
          title='Confirm Sign Up'
          onPress={this.confirmSignUp.bind(this)}
        />
      </View>
    );
  }

最后，我们将更新styles声明，以便拥有更好的UI：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    height: 50,
    borderBottomWidth: 2,
    borderBottomColor: '#9E9E9E',
    margin: 10
  }
});

要查看此文件的最终版本，请单击 此处。

现在，我们应该能够注册，获得发送到我们电话号码的确认码，然后输入确认码进行确认。

如果您想查看此新创建用户的详细信息，请返回AWS控制台，单击Cognito ，选择您创建的AWSMobile项目名称的名称，然后单击左侧常规设置菜单中的用户和组 。。

您可以通过实施登录并确认登录来进一步进行此操作。让我们来看看该方法signIn和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 signing in user: ', err))
  }
  confirmSignIn() {
    Auth.confirmSignIn(this.state.user, this.state.authCode)
      .then(() => console.log('confirm user sign in success!!'))
      .catch(err => console.log('error confirming signing in user: ', err))
  }

访问用户的数据和会话

用户登录后，我们便可以使用Auth访问用户信息！

我们可以调用Auth.currentUserInfo()来获取用户的个人资料信息（用户名，电子邮件等），或者Auth.currentAuthenticatedUser()来获取用户的idToken ， JWT以及有关用户当前登录状态的许多其他有用信息会议。

分析工具

AWS Amplify使用Amazon Pinpoint处理指标。使用CLI或Mobile Hub创建新的Mobile Hub项目时，您会自动启用，配置Amazon Pinpoint，并准备就绪。

如果您还不熟悉，Amazon Pinpoint是一项服务，它不仅允许开发人员向其移动应用程序添加Analytics（分析），还使他们可以向其用户发送推送通知，SMS消息和电子邮件。

借助AWS Amplify，我们可以通过几行代码将用户会话信息作为指标发送到Amazon Pinpoint。

让我们打开Amazon Pinpoint仪表板，以便我们可以查看将要创建的事件。如果您在AWS控制台中打开Mobile Hub项目，请选择右上角的Analytics（分析） ，或从控制台直接进入Amazon Pinpoint ，然后打开当前项目。

在左侧的深蓝色导航栏中，有四个选项： Analytics ， Segments ， Campaigns和Direct 。选择分析。

一旦开始创建发送事件，便可以在此控制台视图中看到它们。

现在我们准备开始跟踪！在App.js中 ，从上一个示例中删除所有代码，基本上只给我们提供一个渲染方法，该方法包含带有Text问候的容器View，无状态，无类方法以及仅容器样式。

我们还从aws-amplify导入Analytics ：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

import Amplify, { Analytics } from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Analytics</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

追踪基本事件

您可能要跟踪的一种常见指标是用户打开应用的次数。让我们从创建一个将对此进行跟踪的事件开始。

在React Native中，我们有AppState API，它将为我们提供当前应用程序状态为active ， background或inactive 。如果状态为active ，则表示用户已打开该应用程序。如果状态为background ，则表示该应用程序正在后台运行，并且用户位于主屏幕或另一个应用程序中；而处于非活动状态 ，则意味着用户正在活动和前台，多任务处理之间或正在通话中。

当该应用程序激活时，让我们向事件发送一个事件，该事件表明该应用程序已打开。

为此，我们将调用以下事件：

Analytics.record('App opened!')

您可以在官方文档中查看此方法的API。 record方法采用三个参数：名称（字符串），属性（对象，可选）和指标（对象，可选）：

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

让我们更新该类，以在装入组件时添加事件侦听器，并在破坏组件时将其删除。每当应用程序状态更改时，此侦听器都会调用_handleAppStateChange ：

componentDidMount() {
  AppState.addEventListener('change', this._handleAppStateChange);
}

componentWillUnmount() {
  AppState.removeEventListener('change', this._handleAppStateChange);
}

现在，让我们创建_handleAppStateChange方法：

_handleAppStateChange(appState) {
  if (appState === 'active') {
    Analytics.record('App opened!')
  }
}

现在，我们可以将应用程序移至后台，然后将其打开以备份它，这会将事件发送到我们的Google Analytics（分析）信息中心。注意：要将应用程序在iOS模拟器或Android模拟器上后台运行，请按Command-Shift-H 。

要在仪表板上查看此数据，请单击“ 事件” ，然后选择“ 打开的应用程序”！ 从“事件”下拉列表中：

您可能还会注意到，您可以从Mobile Hub中自动获得其他数据，包括会话数据 ， 用户注册 ，然后用户登录 。我认为自动记录所有这些信息非常酷。

跟踪详细事件

现在，让我们将其带入一个新的水平。如果我们不仅要跟踪打开应用程序的用户，还要跟踪哪个用户打开了应用程序以及他们打开了多少次该怎么办？

我们可以通过向第二个指标添加属性来轻松地做到这一点！

让我们仿佛有一个用户登录，并跟踪一个新事件，我们将其称为“用户详细信息：应用程序已打开” 。

为此，将记录事件更新为以下内容：

Analytics.record('User detail - App opened!', { username: 'NaderDabit' })

然后，关闭并打开该应用几次。现在，我们应该能够在仪表板上看到有关该事件的更多详细信息。

为此，请查看“ 事件”下拉列表的右侧；有一个“ 属性”部分。在这里，我们可以深入了解事件的属性。在我们的例子中，我们有用户名，因此我们现在可以按用户名过滤此事件！

使用指标

我们将跟踪的最后一项是使用情况指标。这是要记录的第三个论点。

让我们添加一个指标，该指标记录用户在应用中的累计时间。通过在类中设置一个时间值，每秒增加一次，然后在用户打开应用程序时将此信息发送到Amazon Pinpoint，我们可以非常轻松地做到这一点：

// below class definition
time = 0
componentDidMount() {
  this.startTimer()
  AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
  AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange(appState) {
  if (appState === 'active') {
    Analytics.record('User detail - App opened!', { username: 'NaderDabit' }, { timeInApp: this.time })
  }
}
startTimer() {
  setInterval(() => {
    this.time += 1
  }, 1000)
}
// render method

在这里，我们创建了一个时间值并将其设置为0 。我们还添加了一个新的startTimer方法，该方法将每秒为时间值添加1。在componentDidMount ，我们调用startTimer ，它将使时间值每秒增加1。

现在，我们可以向Analytics.record()添加第三个参数，该参数会将这个值记录为度量！

存储

让我们看看如何将Amplify与Amazon S3结合使用以向我们的应用程序添加存储。

要将S3添加到您的Mobile Hub项目中，请运行以下命令：

awsmobile user-files enable

awsmobile push

用法示例

AWS Amplify具有一个存储 API，我们可以像导入其他API一样导入该API：

import { Storage } from 'aws-amplify ” import { Storage } from 'aws-amplify

然后，我们可以在Storage上调用诸如get ， put ， list和remove以与存储桶中的项目进行交互。

创建S3存储桶后，我们会自动在公共文件夹的存储桶中包含一个默认图像；我的被称为example-image.png 。让我们看看是否可以使用AWS Amplify从S3中读取和查看此图像。

正如我上面提到的， Storage有一个get方法，我们将调用该方法来检索项目，而检索该图像的方法将如下所示：

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

为了在我们的React Native应用程序中演示此功能，让我们创建一些功能来从S3检索此图像并将其显示给我们的用户。

我们将需要导入Image 来自React Native，以及来自aws-amplify Storage 。

import React, { Component } from 'React'
import {
  // previous imports
  Image
} from 'react-native';

import Amplify, { Storage } from 'aws-amplify'
// rest of code

现在，我们将需要具有某种状态来保存该图像，以及一种检索图像并将其保持在该状态的方法。让我们在render方法上方的类中添加以下内容：

state = {
  url: ''
}
async getFile() {
  let name = 'example-image.png';
  let fileUrl = await Storage.get(name);
  this.setState({
    url: fileUrl
  })
}

最后，让我们添加一些UI元素以检索图像并将其呈现到UI：

render() {
  return (
    <View style={styles.container}>
      <Text>Storage</Text>
      <Button
        title="Get Image"
        onPress={this.getFile.bind(this)}
      />
      {
        this.state.url !== '' && (
          <Image
            source={{ uri: this.state.url }}
            style={{ width: 300, height: 300 }}
          />
        )
      }
    </View>
  );
}

现在，我们应该能够单击该按钮并查看来自S3的图像！

要查看此文件的最终版本，请单击此处。

结论

总体而言， AWS Amplify提供了一种非常简单的方法，无需太多代码即可完成复杂的功能，并与许多AWS服务无缝集成。

我们没有涉及推送通知，推送通知是最近也添加到AWS Amplify中的，但是这些将在即将发布的帖子中介绍！

AWS Amplify正在积极维护中，因此，如果您有任何功能要求或想法，请随时发表评论，提交问题或提出要求，或者如果您希望与将来的功能保持最新，请仅加注星标或观看项目！

翻译自: https://code.tutsplus.com/tutorials/supercharging-your-next-react-native-application-with-aws-amplify--cms-30648

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用AWS Amplify为React Native App增压

您将要创造的 AWS Amplify是一个开源库，使开发人员（在我们的情况下为移动开发人员）可以向应用程序添加大量有价值的功能，包括分析，推送通知，存储和身份验证。 Amplify不仅可以与React Native一起使用，而且还可以与Vue，Angular，Ionic，React Web以及实际上任何JavaScript框架一起使用。在本教程中，我们将在React Native应用程...
复制链接

扫一扫