用Amplify Studio建立一个度假租赁网站的详细教程

xcvxvxc
472 阅读8分钟

什么是Amplify Studio？

我职业生涯中最激动人心的项目之一，AWS Amplify Studio，刚刚在Re:Invent公开预览中推出。通过Amplify Studio，你可以快速地从一个设计师的设想变成一个全栈的、与云连接的应用程序，并随着你的需求而扩展。您可以在Figma中创建组件，将它们导入Amplify Studio，然后将它们连接到您的AWS支持的数据模型。然后，Studio可以将您的UI组件导出为人类可读的React代码，您可以自行扩展。让我们一步一步地了解你如何用Amplify Studio构建一个应用程序。

创建一个数据模型

前往Amplify沙盒。在那里，把Build a后面的下拉菜单改为 "空白"，然后点击Get Started。

Amplify Sandbox

在数据建模页面，添加一个 "Rental "模型，包含 "name"、"image"、"price"（一个整数）和 "location "字段。

Rental model fields

然后点击页面右上方的 "部署到AWS "按钮。

如果你是Amplify数据建模的新手，你可以查看这个教程来学习更多的知识

部署到AWS

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

在数据管理器中创建数据

一旦你的应用程序完成了部署，点击Launch Studio按钮。

Launch Studio button

现在，前往左侧的content 标签。这给了你一个管理面板，在那里你可以对你的模型进行完整的CRUD操作--创建一些租赁属性点击创建租赁，然后使用表格创建新条目。

New rental instances

扩增Figma文件

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

accelerate UI development with Amplify

Amplify在Figma上推出了一个UI工具包。您可以复制这个文件，然后做任何您想做的修改，并创建您自己的组件!在components Figma页面中进行。

All components in Figma

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

CardA with modifications

这个 UI 套件与Amplify UI 组件相关，当 Studio 将你的 Figma 组件生成到 React 时，它将在引擎下使用。

将 Figma 导入 Studio

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

sync to Figma

在那里，你可以接受或拒绝你的组件，你也可以查看它们的变体。我将继续并 "全部接受"。

链接数据

现在，我已经创建了一个数据模型和UI组件。我现在需要将我的数据与用户界面连接起来。我将选择我的CardA 组件，然后点击配置。

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

从那里，选择你想用数据填充的元素，并选择你想使用的属性。我将点击 "图像"，现在它是一个占位符，然后我将设置src 道具为rental.image 。

对于目前写着 "经典长袖T恤 "的位置，将标签设置为rental.name 。最后，对于价格，我将把目前显示的99美元设置为我的数据模型中的价格。我还将用"$"和"/night "来连接它。

现在，我的组件显示了我的实时数据

创建一个集合

我想显示我所有的租房信息，而不仅仅是一个。因此，我将从我的组件中创建一个集合。点击页面右侧的 "创建集合"。然后为你的集合选择一个名字，我将选择RentalCollection 。一旦进入集合页面，你可以选择你的卡片是以网格还是列表的形式呈现，选择列的数量，中间的填充，以及集合的方向。

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

你还可以修改进入集合的数据集。你可以对项目进行排序，或者通过点击 "数据集 "旁边的 "查看/编辑 "添加一个过滤器。

拉到工作室

如果你是React的新手，在继续之前请先看看这个教程

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

$ npx create-react-app amplify-studio-tutorial
$ cd amplify-studio-tutorial

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

$ npm i aws-amplify @aws-amplify/ui-react

然后，我将运行Amplify pull命令，在我的应用程序中运行代码生成。你可以通过点击Studio中的 "本地设置说明 "找到特定于你的应用程序的amplify pull 命令。

在你的React应用中运行这个命令，你会看到生成的相当多的文件，包括/src/ui-components -- 这包含了你所有的React组件！你可以打开它们，看看有什么东西在里面。你可以打开它们，看看里面有什么。

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

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

Amplify.configure(config)

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

现在，进入你的App.js，清除现有的return () 。

导入AmplifyProvider 组件和 Amplify 的 CSS 文件。

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

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

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

export default App

现在，让我们来渲染我们的RentalCollection ！首先，导入它。

import { RentalCollection } from './ui-components'

然后，把它添加到渲染中。

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

export default App

如果你运行你的React服务器并查看你的页面，你会有你的租借集合

Amplify不会自动为你加载字体，所以你可能想添加你自己的字体。例如，你可以在你的App.css 文件中添加Inter 。

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

使用一个道具

你可以在自己的代码中定制这些React组件。首先，你可以使用道具，以便修改你的组件。例如，如果你想把你的租赁网格变成一个列表，你可以把道具type="list" 传给你的RentalCollection 。

<RentalCollection type="list" />

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

使用重写

有时，你会想修改子组件而不是顶层组件。你可以使用覆盖来实现这个目的。

现在，由于我在Figma中的风格设计，图像有点不正常。让我们通过覆盖来改变图像的对象适合性，以解决这个问题。

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

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

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

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

我们将向 CardA 覆盖传递第二个覆盖对象。然后我们把键设置为我们的图像的覆盖键。然后我们将objectFit道具设置为cover 。

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

你可以用它来为你的组件添加几乎任何你需要的自定义功能

注意，如果你重新运行amplify pull ，你的组件将重新生成。正因为如此，你不会想直接修改ui-components 目录中的组件。如果你决定要修改某个组件文件中的代码，你可以把它从那个目录中拖出来，它就不会再被amplify pull 覆盖了!

主题设计

你可能想给你的用户界面组件添加一个主题，使它们与你的品牌相匹配。你可以通过一个JavaScript对象、CSS变量或通过Amplify Theme Editor Figma插件来做到这一点。

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

你会被提示输入你的应用程序的Amplify Studio URL，然后登录你的应用程序。为了获得你的登录，你可以在AWS Amplify控制台内为你的应用程序创建一个用户。

注意：在使用您的新用户登录Figma插件之前，请确保重置您的新用户的密码

然后您可以为您的应用程序改变任何颜色，改变您的品牌颜色，以及任何组件的颜色。您可以将它们应用于Figma文件和您的Studio应用程序。一旦您与Studio同步，下次运行amplify pull ，您就会有一个主题对象，您可以将其作为一个道具传递给AmplifyProvider ，它将把您的主题应用到您的应用程序上

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

从 Figma 更新

如果您想在任何时候更新一个组件，您可以在 Figma 中这样做，然后在 Studio 中点击 "与 Figma 同步"。然后，您就可以观察到您的改动与现在的改动的对比，并接受或拒绝您的改动。

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

你可以在你用Amplify Studio创建的应用程序中使用整个Amplify生态系统。你可以添加前端主机、额外的后端资源，如认证、存储和无服务器功能，然后在Amplify原生提供的CDK之外扩展你的项目。

总结

我已经迫不及待地想让你用Amplify Studio构建你自己的应用程序了。如果你有任何反馈，请留下GitHub问题或加入我们的Discord社区

avatar
文章
阅读
粉丝