使

使用 Amplify Studio 构建度假租赁网站

2025-06-08

使用 Amplify Studio 构建度假租赁网站

什么是 Amplify Studio？

AWS Amplify Studio 是我职业生涯中最激动人心的项目之一，它刚刚在 Re:Invent 大会上发布了公开预览版。借助 Amplify Studio，您可以快速将设计师的构想转化为一个全栈、云连接的应用程序，并可根据您的需求进行扩展。您可以在Figma中创建组件，将其导入 Amplify Studio，然后将它们连接到 AWS 支持的数据模型。之后，Studio 可以将您的 UI 组件导出为易于理解的 React 代码，您可以自行扩展这些代码。让我们逐步了解如何使用 Amplify Studio 构建应用程序。

创建数据模型

前往Amplify Sandbox 。进入后，将“构建”后的下拉菜单更改为“空白”，然后点击“开始”。

放大沙盒

在数据建模页面上，添加一个“租赁”模型，其中包含“名称”、“图像”、“价格”（整数）和“位置”字段。

租赁模型字段

然后点击页面右上角的“部署到AWS”按钮。

如果您不熟悉 Amplify 的数据建模，您可以查看本教程以了解更多信息！

部署到 AWS

在部署页面上，选择您是否拥有 AWS 账户（如果还没有，请创建一个！），然后选择应用程序名称和部署区域。

在数据管理器中创建数据

应用程序部署完成后，单击启动 Studio按钮。

启动 Studio 按钮

现在，前往content左侧的标签页。这会打开一个管理面板，您可以在其中对模型执行完整的 CRUD 操作——创建一些租赁房源！点击“创建租赁”，然后使用表单创建新条目。

新的租赁实例

放大 Figma 文件

如果您返回工作室主页，您会在 Amplify Studio 主页上看到一个“加速 UI 开发”选项——点击下方的“构建 UI”按钮。在 UI 库主页上，会有一个“开始”按钮，点击后会要求您提供 Figma 文件的链接。

使用 Amplify 加速 UI 开发

Amplify 在 Figma 上发布了一个UI 套件。您可以复制此文件，然后根据需要进行修改，最终创建您自己的组件！只需在componentsFigma 页面中操作即可。

Figma 中的所有组件

我将修改外观，CardA使角变圆、将一些文本加粗，并删除背景颜色。

经过修改的 CardA

此 UI 套件与Amplify UI Components相关，Studio 在为 React 生成 Figma 组件时将在后台使用该组件。

将 Figma 导入 Studio

说到这里，让我们将 Figma 组件导入 Studio。复制 Figma 文件的 URL 并将其粘贴到 Studio 中。然后点击“继续”。您的组件将被加载到 Studio 中。

同步到 Figma

在这里，您可以接受或拒绝您的组件，并查看其变体。我选择“全部接受”。

链接数据

现在，我已经创建了数据模型和 UI 组件。现在我需要将数据链接到 UI。我将选择我的CardA组件，然后点击“配置”。

然后，使用组件属性表单创建一个 prop。选择一个名称，然后使用下拉菜单找到你创建的模型！这会将该模型中的数据传递给组件。

从那里，选择您想要填充数据的元素，并选择您想要使用的属性。我将点击“图像”（目前是一个占位符），然后将srcprop 设置为rental.image。

对于当前显示“经典长袖T恤”的商品，将标签设置为rental.name。最后，对于价格，我将当前显示的 99 美元设置为数据模型中的价格。我还会将其与“$”和“/晚”连接起来。

现在，我的组件呈现我的实时数据！

创建集合

我想显示所有租赁信息，而不是只显示一个。因此，我将从组件中创建一个集合。点击页面右侧的“创建集合”。然后为集合选择一个名称，我选择的是RentalCollection。进入集合页面后，您可以选择卡片是以网格还是列表形式呈现，列数、列间间距以及集合的方向。

我将创建一个网格，然后切换到四列并在每列之间添加 4px。

您还可以修改集合中的数据集。您可以对项目进行排序，或点击“数据集”旁边的“查看/编辑”添加过滤器。

拉至工作室

如果您是 React 新手，请在继续之前查看本教程！

现在我们已经创建了绑定了数据的组件，让我们在应用中使用这些组件吧！我将创建一个 React 应用：

$ npx create-react-app amplify-studio-tutorial
$ cd amplify-studio-tutorial
Enter fullscreen mode Exit fullscreen mode

然后，我将安装 Amplify JavaScript 库和 React 组件。

$ npm i aws-amplify @aws-amplify/ui-react
Enter fullscreen mode Exit fullscreen mode

然后，我将运行 Amplify pull 命令来在我的应用中运行代码生成。您可以amplify pull通过点击 Studio 中的“本地设置说明”找到适用于您应用的命令。

在你的 React 应用中运行此命令，你会看到生成了不少文件，包括/src/ui-components你所有的 React 组件！你可以打开它们看看里面有什么。

现在，让我们设置我们的应用程序。首先，在您的index.js文件中，通过粘贴以下三行代码来配置 amplify：

import config from './aws-exports'
import Amplify from 'aws-amplify'

Amplify.configure(config)
Enter fullscreen mode Exit fullscreen mode

这些会将您的前端与 Amplify 创建的后端联系起来。

现在，转到您的 App.js，并清除现有的return ()。

导入AmplifyProvider组件和 Amplify CSS 文件：

import { AmplifyProvider } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
Enter fullscreen mode Exit fullscreen mode

AmplifyProvider然后，在 的顶层添加return。这将为其所有子组件提供样式。

function App () {
  return (
    <AmplifyProvider>
    </AmplifyProvider>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

现在，让我们渲染一下RentalCollection！首先，导入它：

import { RentalCollection } from './ui-components'
Enter fullscreen mode Exit fullscreen mode

然后，将其添加到渲染中：

function App () {
  return (
    <AmplifyProvider>
+ <RentalCollection />
    </AmplifyProvider>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

如果您运行 React 服务器并检查您的页面，您将拥有您的租赁集合！

Amplify 不会自动加载字体，因此您可能需要添加自己的字体。例如，您可以在文件Inter中添加App.css：

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');
Enter fullscreen mode Exit fullscreen mode

使用道具

您可以在自己的代码中自定义这些 React 组件。首先，您可以使用 props 来修改组件。例如，如果您想将租赁列表转换为列表，可以将 prop 传递type="list"给RentalCollection。

<RentalCollection type="list" />
Enter fullscreen mode Exit fullscreen mode

您可以在Amplify UI 文档中找到所有道具的列表。

使用覆盖

有时，您可能想要修改子组件而不是顶级组件。您可以使用覆盖来实现这一点！

目前，由于我在 Figma 中的样式设置，图片看起来有点乱。让我们通过覆盖来修改 object-fit 属性，让它覆盖图片，解决这个问题。

打开RentalCollection组件的代码。在每个子组件中，你会看到一行这样的代码：{...getOverrideProps(overrides, "Collection.CardA[0]")}。第二个值是一个键，你可以用它来指定要覆盖哪个组件。

在这种情况下，我们将向实例添加以下内容RentalCollection：

<RentalCollection
 type='list' overrides={{
   'Collection.CardA[0]': {
   }
 }}
/>
Enter fullscreen mode Exit fullscreen mode

这将为 CardA 组件添加覆盖。不过，在本例中，我们想要覆盖Image内部的组件CardA。打开该组件的代码，你会看到它的每个子组件都有类似的覆盖。

我们将第二个覆盖对象传递给 CardA 覆盖。然后，我们将 key 设置为 Image 的覆盖 key。最后，我们将 objectFit 属性设置为cover。

<RentalCollection
 type='list' overrides={{
   'Collection.CardA[0]': {
       overrides: {
        'Flex.Image[0]': { objectFit: 'cover' }
       }
    }
 }}
/>
Enter fullscreen mode Exit fullscreen mode

您可以使用它为您的组件添加几乎任何您需要的定制！

请注意，如果您重新运行，amplify pull您的组件将会重新生成。因此，您不应该ui-components直接修改目录中的组件。如果您决定修改组件文件中的代码，您可以将其拖出该目录，这样它就不会再被覆盖了amplify pull！

主题

您可能希望为 UI 组件添加主题，使其与您的品牌相匹配。您可以通过 JavaScript 对象、CSS 变量或Amplify 主题编辑器 Figma 插件来实现此目的。

安装插件，然后从 Figma 插件下拉菜单中选择它。

系统将提示您输入应用程序的 Amplify Studio URL，然后登录应用程序。为了登录，您可以在 AWS Amplify 控制台中为您的应用程序创建一个用户。

注意：在使用新用户密码登录 Figma 插件之前，请务必重置该密码！

然后，您可以更改应用程序的任何颜色、品牌颜色以及任何组件的颜色。您可以将它们应用到 Figma 文件和 Studio 应用程序中。与 Studio 同步后，下次运行时amplify pull，您将获得一个主题对象，您可以将其作为 prop 传递，AmplifyProvider并将主题应用到您的应用程序中！

在文档中了解有关主题的更多信息。

Figma 更新

如果您想更新组件，可以在 Figma 中进行更新，然后在 Studio 中点击“与 Figma 同步”。之后，您将能够观察到与当前组件相比的更改，并可以选择接受或拒绝更改。

使用 Amplify 生态系统的其余部分

您可以将整个 Amplify 生态系统与您使用 Amplify Studio 创建的应用程序结合使用。您可以添加前端托管、其他后端资源（例如身份验证、存储和无服务器功能），然后使用 CDK 扩展 Amplify 原生支持的功能之外的项目。

结论

我迫不及待地想看到您使用 Amplify Studio 构建自己的应用程序。如果您有任何反馈，请在 GitHub 上提交问题或加入我们的Discord 社区！

鏂囩珷鏉ユ簮锛�https://dev.to/aws/build-a-vacation-rental-site-with-amplify-studio-1n10
Devto 翻译
PREV
使用 Vanilla JavaScript 构建离线表单 创建表单 创建空草稿 在页面退出时填写草稿 提交表单
NEXT
使用 Amplify Studio 构建社交媒体时间线