npm 包 aws-amplify 使用教程

AWS Amplify 是 AWS 官方提供的用于构建快速、可扩展的 Web 应用程序的开发平台。它可以使开发人员轻松地加入身份验证、存储、API 和即时通讯等功能，从而为前端开发人员提供了强大的工具和功能来构建出色的 Web 应用程序。本文使用 npm 包 aws-amplify 来介绍 Amplify 的使用教程，帮助你更好地掌握这个强大的前端开发平台。

前置条件

在开始使用 aws-amplify 之前，需要事先注册一个 AWS 帐户，并创建一个名为 "amplify" 的命名空间。可以按照以下步骤创建这个命名空间：

1. 登录 AWS 管理控制台，并转到 Amplify 界面。

2. 单击 "Create an app" 按钮，创建一个新的 Amplify 应用程序。

3. 选择您想要使用的平台（Web、iOS 或 Android）。

4. 输入应用程序名称并单击 "Next" 按钮。

5. 在 "Create a new IAM user" 页面上创建一个新的 IAM 用户。

6. 单击 "Next" 按钮，输入以下信息：

• 创建的 IAM 用户名称
• IAM 用户 Access Key 和 Secret Key

1. 单击 "Create" 按钮完成命名空间的创建。

现在可以使用这个命名空间来创建一个新的 Amplify 应用程序。

安装 aws-amplify

要使用 aws-amplify 开始构建您的应用程序，需要先将其添加到项目中。您可以使用 npm 安装 aws-amplify npm 包：

npm install aws-amplify --save

以上命令将在项目中添加 aws-amplify 包， --save 参数将将其添加到您的项目的 dependencies 中。

引入 aws-amplify

在您的项目中引入 aws-amplify 可以通过以下方式完成：

import Amplify from 'aws-amplify';
Amplify.configure({
  Auth: {
    region: 'YOUR_REGION',
    userPoolId: 'YOUR_USER_POOL_ID',
    userPoolWebClientId: 'YOUR_APP_CLIENT_ID'
  }
});

在这个例子中，我们使用 Amplify.configure 方法进行配置，这个方法将引入 Auth 模块的配置，并指定来自 AWS 用户池和应用程序客户端的参数。如果你不熟悉这些概念，可以查看 AWS Amplify 文档中的 "setting up authentication" 部分，获取更多相关的认证信息。

使用 aws-amplify

现在您已经完成了 aws-amplify 的安装和配置，可以使用它的功能构建应用程序了。以下是 aws-amplify 的一些主要功能：

身份验证

使用 aws-amplify 来构建身份验证非常简单，仅需几行代码即可。以下是一个例子：

-- -------------------- ---- -------
------ - ---- - ---- --------------
-------------
  --------- -----------
  --------- -------------
  ----------- -
      ------ -----------------------
  -
------------ -- ------------------
  ---------- -- ------------------

在这个例子中，我们使用 Auth 模块中的 signUp 方法来创建一个新的用户账号。这个方法接受一个包含 username、password 和 attributes 属性的对象参数，并返回创建的新用户数据，或者返回错误信息。

存储

使用 aws-amplify 来访问存储也非常容易。以下是一个例子：

import { Storage } from 'aws-amplify';
Storage.put('test.txt', 'Hello World').then(data => console.log(data))
  .catch(err => console.log(err));

在这个例子中，我们使用 Storage 模块中的 put 方法来将数据存储到 AWS s3 存储器中。这个方法接受将要存储的数据和存储的键作为参数，并返回存储的数据或错误信息。

API

要在应用程序中使用 AWS Lambda 函数或其他 API，可以使用 aws-amplify 的 API 功能。以下是一个简单的例子：

import { API } from 'aws-amplify';
API.get('myApi', '/items').then(data => console.log(data))
  .catch(err => console.log(err));

在这个例子中，我们使用 API 模块中的 get 方法来获取来自名为 "myApi" 的 API 的 "/items" 端点的数据。它匹配 AWS API Gateway 中的端口配置，并返回 API 数据或错误信息。

实时通讯

使用 aws-amplify 来构建实时通讯非常容易。以下是一个例子：

import { RealTime } from 'aws-amplify';
const rtm = new RealTime();
const channel = await rtm.createChannel('test-channel');
channel.subscribe(message => console.log(message));
await channel.sendMessage('hello world');

在这个例子中，我们使用 RealTime 模块创建了一个名为 "test-channel" 的新通道，并通过 subscribe 方法订阅了新消息。然后，我们使用 sendMessage 方法通过通道发送了一条消息。当通道接收到消息时，它会通过 subscribe 方法返回订阅收到的消息。

结论

通过本文，您已经学习使用 AWS Amplify 中的 npm 包 aws-amplify 的使用教程。在这个过程中，我们覆盖了使用 Amplify 中 Auth、Storage、API 和 RealTime 模块的身份验证、存储、API 和实时通讯的功能。希望这篇文章可以帮助您更好地了解 AWS Amplify 平台并开始构建更好的 Web 应用程序。以下是完整的示例代码：

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/aws-amplify