写点什么

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

  • 2019-09-20
  • 本文字数:3066 字

    阅读完需:约 10 分钟

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

开源 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/cliamplify configure
复制代码


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


npx create-react-app refillappcd refillapp
复制代码


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


amplify initamplify 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 存储中运行它:



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


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


yarn add aws-amplifyyarn 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/


2019-09-20 10:111053
用户头像

发布了 1926 篇内容, 共 154.1 次阅读, 收获喜欢 81 次。

关注

评论

发布
暂无评论
发现更多内容

SD-WAN搭建企业多云专用网络

Ogcloud

网络 SD-WAN 组网 组网网络

tiktok云手机有用吗?用哪个好?

Ogcloud

云服务 TikTok 手机云服务 云服务商

新规施行推动数据资产化迈出关键一步

用友BIP

数据资产

如何下载和安装 Eclipse?

小魏写代码

NeurIPS'23 Paper Digest | PromptTPP: Prompt Pool 与时序点过程模型的持续学习

可信AI进展

机器学习 持续学习 Prompt prompt learning 时序模型

一文详解 Java 限流接口实现

阿里技术

Java 分布式限流 限流算法 应用级限制 限流接口

制造业工厂仓库管理为什么要扫码出入库?

万界星空科技

wms WMS仓库管理 万界星空科技 仓库管理系统 扫码出入库管理

shopee虾皮商品列表数据接口(Shopee.item_search)丨shopee虾皮API接口

tbapi

Shopee shopee API shopee商品列表数据接口 虾皮商品列表数据接口 虾皮API接口

一文读懂$mash 通证的 “Fair Launch” 规则,将公平发挥极致

西柚子

视频直播技术干货(十一):超低延时视频直播技术的演进之路

JackJiang

网络编程 即时通讯 IM

大模型训练中断,断点续传助力快速恢复

百度开发者中心

人工智能 深度学习 大模型

重磅国赛开赛!中国大学生服务外包创新创业大赛飞桨双赛道开放报名

飞桨PaddlePaddle

飞桨 高校 国赛 文心一言 文心大模型

音视频小程序在教育行业,短期爆发or未来趋势?

FinFish

在线教育 小程序容器 小程序技术 音视频小程序

跨国公司为什么要部署SD-WAN

Ogcloud

网络 SD-WAN 组网 组网网络

ICT行业“样品”相关业务挑战及解决方案介绍

用友BIP

ICT行业供应链

用友签约新奥集团,共建智慧资产管理平台

用友BIP

资产管理

教育场景数字化中音视频小程序的发展

Onegun

在线教育 教育 教育科技

基于大模型训练的编程助手

百度开发者中心

人工智能 大模型 智能代码助手

一文读懂$mash 通证的 “Fair Launch” 规则,将公平发挥极致

小哈区块

专业Visio绘图文件阅读器:VSD Viewer 激活最新版

胖墩儿不胖y

Mac软件 文件查看器

用 Amplify CLI 进行本地模拟和测试_技术管理_亚马逊云科技 (Amazon Web Services)_InfoQ精选文章