宣布 AWS Amplify Studio 正式发布

Amplify Studio 是一个可视化界面，可简化 Web 和移动应用程序的前端与后端开发。我们在 AWS re:Invent 2021 期间发布了该产品的预览版，而今天，我很高兴地宣布 Amplify Studio 现已正式发布 (GA)。Amplify Studio 的一个关键功能是与 Figma 集成，帮助设计人员和前端开发人员协作完成设计与开发任务。为了在设计变更时保持同步，开发人员只需将 Figma 中的新组件设计拉入 Amplify Studio 中的应用程序。正式版的 Amplify Studio 还包括一些新功能，例如对 UI 事件处理程序的支持、组件主题化以及代码生成组件的扩展和自定义方式改进。

您可能熟悉 AWS Amplify，这是一组工具和功能，可帮助开发人员更快地开始配置各种 AWS 服务以支持其后端使用案例，例如用户身份验证、实时数据、AI/ML 和文件存储。Amplify Studio 将这种易于配置的功能扩展到前端开发人员，他们可以使用此功能处理这些应用程序的预构建和自定义富用户界面 (UI) 组件。后端开发人员还可以利用 Amplify Studio 继续开发和配置应用程序的后端服务。

Amplify Studio 的点击式可视化环境可让前端开发人员通过预构建和自定义 UI 组件库快速轻松地编写用户界面。组件可主题化，因此可覆盖 Amplify Studio 的默认主题，以根据自己或公司的样式指南自定义组件。组件也可以绑定到后端服务，而无需具备云或 AWS 专业知识。

目前还未全面支持开发应用程序的前端和后端层。在 Amplify Studio 中，开发人员还可以利用 AWS Amplify 托管服务、Amplify 的完全托管式 CI/CD 以及用于可扩展 Web 应用程序的托管服务。该服务提供了一种零配置方式来部署应用程序，只需将 Git 存储库与内置的持续集成和部署工作流程连接起来。可以将部署构件导出到诸如 AWS Cloud Development Kit (AWS CDK) 之类的工具中，从而轻松支持直接在 Amplify Studio 中不可用的其他 AWS 服务。实际上，在 Amplify Studio 中创建的所有构件都可以导出为代码，供您在所选的 IDE 中进行编辑。

在 re:Invent 期间发布的这篇博客文章中，您可以阅读有关原始预览版的所有内容，以及逐步了解结合使用 Amplify Studio 和 Figma 的示例。

UI 事件处理程序
前端开发人员可能熟悉在 UI 组件上绑定事件以调用某些操作背后的概念。例如，选择一个按钮可能会导致转换到另一个屏幕，或者使用可能由后端服务提供的数据填充其他字段。在以下屏幕截图中，我们正在为 Card 组件上的 onClick 事件配置事件处理程序，以打开新的浏览器选项卡：

然后，对于选定的操作，我们定义设置，在本例中，使用卡片对象模型中的纬度和经度打开地图视图并定位到该位置：

使用代码扩展组件
使用 amplify pull 命令将组件设计从 Figma 拉入 Amplify Studio 中的项目时，生成的 JSX 代码和映射到 Figma 设计的 TypeScript 定义文件就会添加到项目中。虽然接下来可以编辑生成的代码，但在下次运行 pull 命令时，所执行的更改将被覆盖。

Amplify Studio不要求您编辑生成的代码，而是公开了一些机制，可让您扩展生成的代码以实现所需的更改，而不会在重新生成组件代码文件时丢失这些更改。虽然在原始预览版中也实现了此功能，但 GA 版本的 Amplify Studio 使该过程变得更加简单和方便。可以通过 4 种方法在 Amplify Studio 中更改生成的组件：

修改默认属性
可以方便地修改组件的默认属性，大多数开发人员都可能熟悉这种方法。这些默认属性源于 Amplify UI 库。例如，假设有一个派生自基础 Collection 类型的自定义集合组件，并且要控制集合中的项目在渲染时的包装方式（甚至是否包装）。Collection 类型公开了一个可以利用的包装属性：
```
<MyCustomCollection wrap={"nowrap"} />
```
覆盖子 UI 元素
除了单独公开的属性之外，为组件（和所有子组件）生成的代码还公开了 overrides 属性。此属性可让您提供包含多个属性覆盖的对象，从而完全控制生成代码的扩展。在下面的示例中，我将属于集合项目 Title 属性的 color 属性更改为橙色。之前提到，正在使用的设置对象可能包含想要覆盖的其他属性：
```
<MyCustomCollectionItem overrides={{"Title": { color: "orange" } }} />
```
使用数据扩展集合项目
在处理集合中的项目时，一个有用的功能是使用其他数据来增强项目，为此可以使用 overrideItems 属性。可以为此属性提供一个函数，接受集合中项目的参数和项目的索引。函数的输出是一组要应用于该项目的覆盖属性。在下面的示例中，我将根据项目的索引是奇数还是偶数来切换集合项目的背景颜色。请注意，我还可以将代码附加到项目，在此是报告所单击项目 ID 的 onClick 处理程序：
```
<MyCustomCollection overrideItems={({ item, index })=>({
  backgroundColor: index % 2 === 0 ? 'white' : 'lightgray',
  onClick: () = alert(`You clicked item with id: ${item.id}`)
})} />
```
自定义事件的业务逻辑
有时，您需要运行自定义业务逻辑来响应更高级别的逻辑事件。例如，在数据存储中创建、更新或删除对象时要运行的代码。此可扩展性选项提供了这一功能。在代码中，您将侦听器附加到 Amplify Hub 的 ui 通道。在侦听器中，可以检查接收到的事件并对感兴趣的事件采取行动。可以使用具有特定格式的名称来标识事件：actions:[category]:[action_name]:[status]。可以在文档中找到所有操作事件名称的列表。在下面的示例中，我附加了一个侦听器，当 DataStore 中的新项目完成创建时，我想在其中运行一些自定义代码。在我的代码中，我需要在侦听器中检查名为 actions:datastore:create:finished 的事件：
```
import { Hub } from 'aws-amplify'
…
Hub.listen("ui", (capsule) => {
  if (capsule.payload.event === "actions:datastore:create:finished"){
      // An object has been created, do something in response
  }
});
```

组件主题化
为了配合 Amplify Studio 的正式推出，我们还发布了 Figma 插件，用于将 UI 组件与公司的品牌和样式进行匹配。要启用该插件，只需从 Figma 社区链接安装 Theme Editor 插件。例如，假设我想匹配 Amazon 的品牌颜色。我所要做的就是将原色配置为 Amazon 橙色 (#ff9900)，然后所有组件都会自动反映该原色。

立即开始使用 AWS Amplify Studio
访问 AWS Amplify Studio 主页了解更多功能，无论您是后端开发人员还是前端开发人员，又或者是两者！它是免费入门的产品，旨在帮助简化支持应用程序的后端服务的配置，还可以简化应用程序前端的开发以及与这些后端服务的连接。如果您是Amplify Studio的新手，可以在文档中找到有关开发基于 React 的 UI 的教程以及将应用程序与 Figma 中的设计连接起来的信息。

– Steve

亚马逊AWS官方博客

宣布 AWS Amplify Studio 正式发布