• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

使用AWS Amplify为您的React Native应用程序增压

ngkoma • 2年前 (2022-05-29) • JavaScript

你将要创建的内容：

使用AWS Amplify为您的React Native应用程序增压 第1张


aws Amplify是一个开源库，使开发人员（在我们的例子中是移动开发人员）能够向应用程序添加许多有价值的功能，包括分析、推送通知、存储和身份验证。

Amplify不仅适用于react Native，还适用于vue、angular、ionic、React web 以及任何javascript框架。在本教程中，我们将在 React Native 应用程序中演示它的一些核心功能。

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

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

React Native 安装和设置

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

react-native init RNAmplify

或者

create-react-native-app RNAmplify

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

yarn add aws-amplify

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

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

react-native link amazon-cognito-identity-js

AWS 设置

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

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

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

awsmobile init

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

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

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

验证

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

使用 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 Amplify为您的React Native应用程序增压 第2张

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

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

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

使用AWS Amplify为您的React Native应用程序增压 第3张

您可以通过实施登录和确认登录来进一步实现这一点。让我们看一下signInand 的方法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 是一项服务，它不仅允许开发人员将分析添加到他们的移动应用程序，还允许他们向用户发送推送通知、SMS 消息和电子邮件。

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

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

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

使用AWS Amplify为您的React Native应用程序增压 第4张

一旦我们开始创建发送事件，我们将能够在这个控制台视图中看到它们。

现在我们准备开始跟踪了！在 App.js中，删除上一个示例中的所有代码，基本上只剩下一个渲染方法，其中包含一个带有文本问候的容器视图，没有状态，没有类方法，只有一个容器样式。

Analytics我们还从以下位置导入aws-amplify：

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，则表示应用程序正在后台运行，用户要么在主屏幕上，要么在另一个应用程序中，而 inactive则表示用户正在活动和前台之间转换、多任务处理或正在通话。

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

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

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!')
  }
}

现在，我们可以将应用程序移到后台，重新打开它，这应该会向我们的分析仪表板发送一个事件。注意：要在ios模拟器或android模拟器上后台运行应用程序，请按Command-Shift-H。

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

使用AWS Amplify为您的React Native应用程序增压 第5张

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

跟踪详细事件

现在让我们把它提升到一个新的水平。如果我们不仅要跟踪打开应用程序的用户，还要跟踪打开应用程序的用户以及他们打开应用程序的次数，该怎么办？

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

让我们假设我们有一个用户登录，并跟踪一个我们称之为“用户详细信息：应用打开”的新事件。

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

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

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

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

使用AWS Amplify为您的React Native应用程序增压 第6张

使用指标

我们将跟踪的最后一项是使用指标。这是要记录的第三个参数。

让我们添加一个指标来记录用户在应用程序中的累计时间。我们可以通过在类中设置一个时间值，每秒递增一次，然后在用户打开应用程序时将此信息发送到 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中，我们调用startTimerwhich 将使时间值每秒增加 1。

现在我们可以添加第三个参数Analytics.record() ，将这个值记录为一个指标！

贮存

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

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

awsmobile user-files enable

awsmobile push

示例用法

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

import { Storage } from 'aws-amplify'

然后，我们可以调用Storagelike get、put、list和上的方法remove来与存储桶中的项目进行交互。

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

使用AWS Amplify为您的React Native应用程序增压 第7张

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

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

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

我们需要Image 从 React Native 以及Storage从aws-amplify.

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>
  );
}

使用AWS Amplify为您的React Native应用程序增压 第8张

现在，我们应该可以单击按钮并查看 S3 中的图像了！

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

结论

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

文章目录
  • React Native 安装和设置
  • AWS 设置
  • 验证
    • 使用 AWSMobile CLI 添加身份验证
    • 认证类
      • 例子
      • 访问用户的数据和会话
  • 分析
    • 跟踪基本事件
  • 跟踪详细事件
    • 使用指标
  • 贮存
    • 示例用法
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：使用AWS Amplify为您的React Native应用程序增压
    文章地址：https://www.weixiaolive.com/en/index.php/post/175.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云