用 Amplify CLI 进行本地模拟和测试-InfoQ

开源 Amplify 框架提供一组库、用户界面 (UI) 组件和命令行接口 (CLI)，可通过使用 AWS CloudFormation 预置后端资源更加容易地将复杂的云功能增加到您的 Web 或移动应用程序中。

与客户交谈时，我经常听到这样的评论：当增加新功能或解决漏洞时，尽可能快地进行迭代从而快速得到操作反馈很重要。我们如何改进他们的开发体验？

上周，Amplify 团队推出了新预测类别，可使您将机器学习能力快速增加到您的 Web 或移动应用程序中。今天，他们又一次这样做。我很高兴地与大家分享的是，您现在可以使用 Amplify CLI 模拟它提供的一些最常见的云服务，并且可以完全在本地测试您的应用程序！

这里模拟的意思是，对于云服务中的 API，我们将不使用实际后端组件，而是可以使用该 API 的本地简化模拟。此模拟可提供开发期间的测试所需的基本功能，而不是您从生产服务中获得的全部行为。

利用这一新的模拟功能，您可以快速测试更改，无需在每一步预置或更新您使用的云资源。借此，您可以设置可快速执行的单元和集成测试，而不会影响您的云后端。根据您的应用程序架构的不同，您可以在 CI/CD 管道中设置自动测试，无需预置后端资源。

这在编辑 AWS AppSync 解析器映射模板时非常有用，这些模板使用 Apache Velocity 模板语言 (VTL) 编写，将您的请求用作输入，并且输出包含解析器说明的 JSON 文档。现在，您可以立即获得编辑反馈，并测试您的解析器是否按预期运行，无需等待每个更新的部署。

对于第一个版本，Amplify CLI 可以在本地模拟：

AppSync GraphQL API，包括 Amazon DynamoDB 支持的解析器映射模板和存储。
AWS Lambda 函数直接调用或作为 GraphQL API 的解析器调用。
Amazon Simple Storage Service (S3) 存储桶用作您应用程序的存储。
Amazon Cognito 适合 GraphQL API 的用户池身份验证，但您首先需要从实际服务中获得 JSON Web Token (JWT)；此后，在本地支持 JWT。
API 模拟
我们来快速概览一下您可以执行的操作。例如，我们来创建一个示例应用程序，以帮助人们存储和共享可使您再灌满可重复使用的水瓶并减少塑料垃圾的良好地点的位置。

要安装 Amplify CLI，我需要 Node.js（版本 >= 8.11.x）和 npm（版本 >= 5.x）：

复制代码

 npm install -g @aws-amplify/cli
amplify configure

Amplify 支持很多不同的框架，在此示例中，我使用 React 并且从示例应用程序开始（npx 需要 npm >= 5.2.x）：

复制代码

 npx create-react-app refillapp
cd refillapp

我使用 Amplify CLI 初始化项目并添加 API。Amplify CLI 是交互式的，将向您询问推动后端配置的问题。在此情况下，当被询问时，我选择添加 GraphQL API。

复制代码

 amplify init
amplify add api

在创建 API 期间，我编辑 GraphQL 架构并用此方式定义 RefillLocation：

复制代码

 type RefillLocation @model {
  id: ID!
  name: String!
  description: String
  streetAddress: String!
  city: String!
  stateProvinceOrRegion: String
  zipCode: String!
  countryCode: String!
}

结尾有感叹号 ! 的字段为必填字段。其他字段为选填字段，创建新对象时，可以省略。

您在第一行看到的 @model 一种指令，该指令使用 GraphQL Transform 在您的 API 中定义 DynamoDB 支持的顶级对象类型并为您生成所有必要的 CRUDL（创建、读取、更新、删除和列出）查询和突变及接收此类突变通知的订阅。

现在，我通常需要运行 amplify push 来配置和预置项目需要的后端资源（在此情况下为 AppSync 和 DynamoDB）。但为了获得快速反馈，我使用运行此指令的本地新模拟功能：

复制代码

 amplify mock

或者，我可以使用 amplify mock api 命令特别模拟我的 GraphQL API。在此阶段，使用此命令是一样的，但当一次使用多个模拟功能时，此命令很方便。

mock 命令的输出为您提供了有关该命令功能和您可以用它进行的操作的信息，包括 AppSync 模拟终端节点：

复制代码

 GraphQL 架构已成功编译。
 
在位于 /MyCode/refillapp/amplify/backend/api/refillapp/schema 的目录中的 /MyCode/refillapp/amplify/backend/api/refillapp/schema.graphql 或 place .graphql 文件中编辑您的架构
 
在本地创建表 RefillLocationTable
 
运行 GraphQL codegen
 
✔ 已成功生成 GraphQL 操作并保存在 src/graphql 中
 
AppSync 模拟终端节点在 http://localhost:20002 中运行

我使 mock 命令在终端窗口中保持运行，以获得我的代码中可能出现的错误的反馈。例如，当我编辑 VTL 模板时，Amplify CLI 立即识别到此情况并为解析器生成更新后的代码。如果发生错误，我将从正在运行的 mock 命令中获得错误。

AppSync 模拟终端节点使您可以访问：

您的 API 所需的 GraphQL 转换
在本地管理您的 API 数据的 DynamoDB Local
基于开源 OneGraph graphiql-explorer 插件的 Amplify GraphQL Explorer
现在，我可以使用 Web 界面在本地为我的 API 运行 GraphQL 查询、突变和订阅。例如，为了创建新的 RefillLocation，我直观地构建突变，如下所示：

为了获得某个城市的 RefillLocation 对象列表，我使用相同 Web 界面构建查询，并在本地 DynamoDB 存储中运行它：
用 Amplify CLI 进行本地模拟和测试

当我确信我的数据模型正确时，我开始构建应用程序的前端代码，从而编辑 React 应用程序的 App.js 文件，并且添加因本地模拟而可以立即测试的功能。

要将 Amplify 框架添加到我的应用程序中，包括 React 扩展，我使用 Yarn：

复制代码

 yarn add aws-amplify
yarn add aws-amplify-react

现在，我可以使用 Amplify 框架库编写这样的代码来运行 GraphQL 操作：

复制代码

 import API, { graphqlOperation } from '@aws-amplify/api';
import { createRefillLocation } from './graphql/mutations';
 
const refillLocation = {
  name: "My Favorite Place",
  streetAddress: "123 Here or There",
  zipCode: "12345"
  city: "Seattle",
  countryCode: "US"
};
 
await API.graphql(graphqlOperation(createRefillLocation, { input: refillLocation }));

存储模拟
现在，我希望为应用程序增加一项新功能，从而让用户可以上传并分享 RefillLocation 的图片。为执行此操作，我在项目的配置中添加存储类别并选择“内容”以使用 S3：

amplify add storage
现在，我可以使用 Amplify 框架库直接在浏览器中使用以下语法放入、从 S3 中获取或删除对象：

复制代码

 import Storage from '@aws-amplify/storage';
 
Storage.put(name, file, {
  level: 'public'
})
.then(result => console.log(result))
.catch(err => console.log(err));
 
Storage.get(file, {
  level: 'public'
})
.then(result => {
  console.log(result);
  this.setState({ imageUrl: result });
  fetch(result);
})
.catch(err => alert(err));

与 S3 的所有交互都被标记为公共，因为我希望我的用户能相互公开分享他们的图片，不过，Amplify 框架支持不同的访问级别，如私有、受保护和公共。您可以在 Amplify 文档的文件访问级别部分中查找关于它的更多信息。

由于这一新模拟功能支持 S3 存储，我再次使用 amplify mock 在本地测试我的整个应用程序，包括我的 GraphQL API（AppSync 和 DynamoDB）使用的后端和我的内容存储 (S3)。

如果我只想在本地测试我的部分应用程序，我可以使用 amplify mock api 或 amplify mock storage 仅在本地模拟 GraphQL API 或 S3 存储。

现已推出
还有很多其他功能我没有时间在这篇博文中介绍，最好的学习方法是充满好奇心、动手去做！您可以按照入门教程开始使用 Amplify。

能够在本地模拟和测试您的应用程序可以帮助您更快的构建和改进您的想法，请告诉我们您对 Amplify CLI GitHub 存储库的看法。

本文转载自 AWS 博客。

原文链接：
https://amazonaws-china.com/cn/blogs/china/new-local-mocking-and-testing-with-the-amplify-cli/

	type RefillLocation @model {
	id: ID!
	name: String!
	description: String
	streetAddress: String!
	city: String!
	stateProvinceOrRegion: String
	zipCode: String!
	countryCode: String!
	}

	GraphQL 架构已成功编译。

	在位于 /MyCode/refillapp/amplify/backend/api/refillapp/schema 的目录中的 /MyCode/refillapp/amplify/backend/api/refillapp/schema.graphql 或 place .graphql 文件中编辑您的架构

	在本地创建表 RefillLocationTable

	运行 GraphQL codegen

	✔ 已成功生成 GraphQL 操作并保存在 src/graphql 中

	AppSync 模拟终端节点在 http://localhost:20002 中运行

	import API, { graphqlOperation } from '@aws-amplify/api';
	import { createRefillLocation } from './graphql/mutations';

	const refillLocation = {
	name: "My Favorite Place",
	streetAddress: "123 Here or There",
	zipCode: "12345"
	city: "Seattle",
	countryCode: "US"
	};

	await API.graphql(graphqlOperation(createRefillLocation, { input: refillLocation }));

	import Storage from '@aws-amplify/storage';

	Storage.put(name, file, {
	level: 'public'
	})
	.then(result => console.log(result))
	.catch(err => console.log(err));

	Storage.get(file, {
	level: 'public'
	})
	.then(result => {
	console.log(result);
	this.setState({ imageUrl: result });
	fetch(result);
	})
	.catch(err => alert(err));

用 Amplify CLI 进行本地模拟和测试

评论

推荐阅读

7 天热点

订阅