如何用Amplify Studio建立社交媒体时间线

xcvxvxc
269 阅读5分钟

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

1.创建你的数据模型

前往Amplify控制台，选择建立一个新的应用程序。

一旦你的Studio实例被部署，点击 "启动Studio"。然后，一旦进入Studio，点击左侧面板上 "设置 "下的 "数据"。我们将创建两个数据模型。Post和User。帖子将有三个字段。"内容"，"postedAt"，和 "喜欢"。喜欢将是一个整数，postedAt是AWSDateTime，而内容是一个字符串。用户也将有三个字段。"profilePic "是一个AWSURL，手柄和名字--后两个将保持字符串。

这些数据也将是相关的--一个帖子将有一个用户--或1:1的关系。

completed data model

一旦你添加了所有的字段，点击 "保存和部署"!

2.添加初始数据

一旦你的数据模型完成部署，前往左侧导航中 "管理 "下的 "内容 "标签。使用表格创建一些用户和帖子。确保你的 "帖子 "有用户与之挂钩。

3.在Figma中定制您的组件

前往AWS Amplify UI Kit。复制Figma文件到您的账户，然后进入 "我的组件 "页面。你会看到一个 "SocialB "卡，我们将为我们的应用程序进行修改。

我将做一些修改。

  • 删除除 "喜欢 "按钮以外的分享动作
  • 删除Lorem ipsum
  • 加粗 "作者"
  • 删除 "Danny liked this "行
  • 将 body 和share 组归为一个组，称为CardContent

当你完成后，你的卡片应该看起来像这样。

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

4.将用户界面连接到数据

一旦你的组件被加载到Studio中，前往 "SocialB "组件。我们将把我们的组件与数据联系起来。首先，点击Lorem Ipsum文本。然后，将label 道具设置为post.content 。

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

对于Timestamp ，我们将添加用户的手柄。将 Proplabel 设置为"@"，然后选择 "连接"，然后选择user.handle 。

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

Image description

5.在工作室中添加事件

你也可以在Studio中为元素添加动作--选择CardContent 组，我们将使社交媒体帖子在被悬停时变成灰色。

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

Image description

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

6.实施本地代码

现在让我们移到本地的开发环境。首先，在本地创建一个React Appnpx 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 和你的模型。我们还将导入由Amplify生成的SocialB 组件。

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名称，可以直接向该项目传递一个道具--你可以通过进入组件的生成文件看到这些，并看到作为参数传递给getOverrideProps 的键。

在这种情况下，我将发送一个onClick 事件给Share 子组件。这个onClick ，将修改帖子的喜欢数。我们还需要把getPosts 函数作为一个道具来传递，这样我们就可以触发它并更新用户界面。

{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还处于开发者预览阶段

avatar
文章
阅读
粉丝