使用 Amplify Studio 构建社交媒体时间线

2024 年 6 月 27 日：这篇博文使用 Amplify Gen 1，如果您要启动新的 Amplify 应用程序，我建议您尝试Gen 2！

自从我们在 Re:Invent 大会上发布开发者预览版以来，AWS Amplify Studio 已经发布了许多出色的新功能。我想借此机会展示其中一些功能，并构建一些功能更加丰富的功能。

1. 创建数据模型

前往Amplify 控制台并选择构建一个新应用程序。

部署 Studio 实例后，点击“启动 Studio”。然后，进入 Studio 后，点击左侧面板“设置”下的“数据”。我们将创建两个数据模型：Post 和 User。Post 将包含三个字段：“content”、“postedAt”和“likes”。“likes”为整数，postedAt 为 AWSDateTime，content 为字符串。User 也包含三个字段：“profilePic”（AWSURL）、handle 和 name，其中后两个字段保留为字符串。

数据也将相关 - 一个帖子将有一个用户 - 或 1：1 关系。

添加所有字段后，单击“保存并部署”！

2. 添加启动数据

数据模型部署完成后，前往左侧导航栏“管理”下的“内容”选项卡。使用表单创建一些用户和帖子。确保您的帖子已绑定用户！

3. 在 Figma 中自定义组件

前往AWS Amplify UI 套件。将 Figma 文件复制到您的帐户，然后前往“我的组件”页面。您将看到一个“SocialB”卡片，我们将根据我们的应用对其进行修改。

我会做一些修改：

• 删除除“赞”按钮之外的分享操作
• 删除Lorem ipsum
• 加粗“作者”
• 删除“Danny 喜欢这个”行
• 将body和组分组share为一个名为CardContent

完成后，您的卡片应如下所示：

然后，在 Studio 中，前往“UI 库”页面。点击“开始”，并粘贴 Figma 文件的链接。然后接受所有组件。

4. 将 UI 与数据关联起来

将组件加载到 Studio 后，前往“SocialB”组件。我们将组件与数据绑定。首先，点击 Lorem Ipsum 文本。然后，将labelprop 设置为post.content。

将标签设置Author为user.name。将99标签设置为post.likes。将src的设置image为user.profilePic。

我们将添加用户的句柄Timestamp。将 Prop 设置label为“@”，然后选择“concatenate”，最后选择user.handle。

让我们在“作者”文本中添加一个链接。首先输入 prop as，并将其设置为a。这会使文本变成。然后，我们将hrefprop 设置为 "/users/" + user.id。这样，作者文本就会链接到用户的个人资料！我不会为这个应用设置实际的路由，但无论如何，我想展示如何设置链接。

5. 在 Studio 中添加事件

您还可以向 Studio 中的元素添加操作 - 选择CardContent组，我们将使社交媒体帖子在悬停时变为灰色。

选择道具onMouseEnter。将动作设置为Modify element property。将道具设置backgroundColor为#00000008。重复onMouseLeave此步骤，但这次将背景颜色设置为透明。

您还可以添加 onClick 和其他事件来创建数据！

6. 实施本地代码

现在让我们进入本地开发环境。首先，在本地创建一个 React 应用npx create-react-app tweettweet。然后，在 Studio 中点击“本地设置说明”，并amplify pull在本地运行生成的命令。安装 Amplify 库npm i @aws-amplify/ui-react aws-amplify：

打开index.js并添加以下内容：

import '@aws-amplify/ui-react/styles.css'
import config from './aws-exports'
import { Amplify } from 'aws-amplify'

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

Amplify.configure(config)

这将为您的应用配置 Amplify，并导入 UI 组件所需的 CSS。然后，添加render组件AmplifyProvider进行样式设置。

ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

导入字体index.css：

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

现在，转到您的App.js文件，我们将在其中编写逻辑代码！首先，我们添加一个函数来查询所有帖子。导入DataStore您的模型。我们还将导入SocialB由 Amplify 生成的组件。

import { DataStore } from 'aws-amplify'

import { Post, User } from './models'

import { useEffect, useState } from 'react'
import { SocialB } from './ui-components'

另外，导入所需的 React Hooks：

import { useEffect, useState } from 'react'

让我们编写一个函数来查询我们 App 组件中的帖子。

const [posts, setPosts] = useState([])

const getPosts = async () => {
  const data = await DataStore.query(Post)
  setPosts(data)
}

我们将在我们的内部调用此函数useEffect：

useEffect(() => {
  getPosts()
}, [])

注意：如果您没有相关数据，可以使用 Studio 创建数据集合并自动提取数据

现在，让我们映射所有帖子并SocialB为每个帖子创建实例。我们将每个帖子传递给组件，用户作为post.User，键是帖子的 id。

  return (
    <div className='App'>
      {posts.map(post => (
        <SocialB
          post={post}
          key={post.id}
          user={post.User}
        />))}
    </div>
  )
}

现在让我们让“赞”按钮工作起来！您可以将覆盖对象传递给生成的组件。传递子组件的 Figma 名称，即可将 prop 直接传递给该项目 - 您可以前往组件的生成文件，查看作为参数传递的键getOverrideProps。

在本例中，我将向子组件发送一个onClick事件Share。这onClick将修改帖子的点赞数。我们还需要将getPosts函数作为 prop 传递，以便触发该函数并更新 UI。

{posts.map(post => (
  <SocialB
    post={post}
    key={post.id}
    user={post.User}
    overrides={{
      getPosts,
      Share: {
        onClick: async e => {
          e.preventDefault()
          const postToChange = await DataStore.query(Post, post.id)
          await DataStore.save(Post.copyOf(postToChange, updated => {
            updated.likes += 1
          }))
          getPosts()
        }
      }
    }
  }
/>))}

现在您的时间线应该显示所有帖子，并且您应该能够通过单击心形来更新点赞数！

结论

在这篇文章中，我们构建了一个包含悬停操作、点击事件、相关数据和链接的社交媒体时间线。我非常期待您在使用 Amplify 构建时提供反馈，尤其是在撰写本文时，Studio 仍处于开发者预览阶段！