AWS Amplify Admin UI 简介：点击即可创建应用程序后端

我对全新的 Amplify Admin UI 感到非常兴奋，我所在的团队本周发布了它。您可以在几分钟内为应用程序创建和配置后端，无需 AWS 账户即可开始构建，只需点击几下即可创建架构，添加身份验证，并轻松部署到 AWS。您无需了解后端开发或 AWS 即可使用它——我认为对于想要在这些领域起步的新开发者来说，这是一个非常棒的工具。在本教程中，我们将为一个带有评论功能的博客构建后端，并添加用户身份验证。

首先前往Amplify Admin UI 主页。然后，单击“创建应用后端”下的“开始”。

创建数据模型

在下一页选择“数据”，然后选择“空白模式”。如果您愿意，以后也可以从示例模式开始，但在本教程中，我们将从头开始！数据模型在底层利用了DataStore，这使得您的数据可以在离线和在线模式下访问，并可供应用程序的所有用户使用。

然后，点击“创建新模式”。我们将添加两个模型：Post 和 Comment。

点击添加按钮，然后添加模型。

将模型命名为“Comment”，然后添加两个字段：text 和 author。这两个字段均为字符串。

添加“Post”模型。它将包含两个字段：title 和 content。

我们还将添加一种关系，以便每个帖子都附有评论。

点击“帖子”模型下的“添加关系”。选择“评论”作为关联模型，并选择“一个帖子对应多个评论”，因为我们希望每篇帖子能够拥有多条评论。

我还把所有字段都设为必填项。如果你选中某个字段，屏幕右侧会显示一个面板，你可以在其中将该字段设为必填项。在这个视图中，你还可以创建数组字段，如果你想在博客文章中添加标签数组，这将非常有帮助！

然后单击橙色的“下一步：在您的应用程序中进行本地测试”按钮。

测试您的数据

然后，您可以在应用程序中测试您的数据模型，以确保它按照您希望的方式工作。

在此屏幕上，您将看到设置应用类型以及如何设置的选项——您可以选择 Web、iOS 或 Android 应用。为了方便本教程，我将选择 Web 作为平台，并选择 React 作为框架。选择完成后，您将看到创建应用的说明。

如果你刚开始学习 React，这里有一个入门教程！我会快速浏览这部分，因为我想把这篇文章的重点放在管理界面上。

运行以下命令来创建一个 React 应用程序并进入其目录。

$ npx create-react-app blog
$ cd blog

然后，安装 Amplify CLI。

$ curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

另外，拉下您新创建的后端以便在本地进行测试。

amplify pull --sandboxId your-app-id

我们需要安装一些包，首先是 typescript，因为 DataStore 使用它来生成模型，然后是 Amplify 库，它将为我们提供使用和扩展后端的实用程序。

npm install aws-amplify typescript

然后，打开您的index.js文件并添加以下代码以在您的项目中配置 Amplify：

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

Amplify.configure(awsconfig)

然后，我们就可以编写 React 代码了！在本教程中，我们将创建一篇文章，并在页面上列出所有文章。我们为每个文章创建相应的组件：

touch src/PostList.js
touch src/CreatePost.js

首先，我们将创建一个标准的 React 表单来创建新的博客文章。

// CreatePost.js
import { useState } from 'react'

export default function CreatePost () {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')

  const handleSubmit = async e => {
    // When the form is submitted, prevent the default form behavior (don't refresh the page)
    e.preventDefault()

    // set the tile and content back to empty strings
    setTitle('')
    setContent('')
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor='title'>Title</label>
        {/* Update the title in state every time the title field is changed */}
        <input type='text' name='title' id='title' value={title} onChange={e => setTitle(e.target.value)} />
      </div>
      <div>
        <label htmlFor='content'>Content</label>
        {/* Update the content in state every time the content field is changed */}
        <textarea id='content' name='content' type='text' value={content} onChange={e => setContent(e.target.value)} />
      </div>
      <input type='submit' value='create' />
    </form>
  )
}

然后我们将添加 Amplify 代码以将数据保存到 DataStore。

// Import data store and the Post model
+ import { DataStore } from '@aws-amplify/datastore'
+ import { Post } from './models'

...diff
  const handleSubmit = async e => {
    e.preventDefault()

    // Save our Post using the title and content the user inputted.
+ await DataStore.save(
+ new Post({
+ title,
+ content
+ })
+ )
    setTitle('')
    setContent('')
  }
...

然后，我们将创建一个组件来显示每个帖子。

// PostList.js

import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { DataStore } from '@aws-amplify/datastore'

import { Post } from './models'

export default function PostList () {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    const getData = async () => {
      // Get all of our posts and update state with them
      const postData = await DataStore.query(Post)
      setPosts(postData)
    }
    getData()
  }, [])

  // Loop through  
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content.substring(0, 300)}...</p>
        </div>
      ))}
    </div>

  )
}

最后，在 App 组件中链接两个组件：

import CreatePost from './CreatePost'
import PostList from './PostList'

function App () {
  return (
    <div>
      <CreatePost />
      <PostList />
    </div>
  )
}

export default App

为了教程的长度，我将跳过其余组件，因为这展示了如何获取数据并添加数据，但我的完整应用程序代码将链接在教程的末尾。

您应该能够创建帖子然后在页面上看到它们！

如果您想对架构进行任何更改，可以点击“模型”选项卡进行编辑。然后，您需要重新运行该amplify pull --sandboxId your-sandbox-id命令来提取更改。

此外，如果您不想在部署应用程序之前对其进行测试，您可以跳过测试页面并转到“部署”页面。

部署

目前，您的数据仅在本地。我们需要将后端部署到 AWS，以便更广泛的用户群可以使用。

在deploy该页面上，您可以注册一个新的 AWS 账户，也可以登录您已有的账户。

选择一个，您将进入“创建应用后端”页面。为您的应用输入任意名称，然后选择要部署到的 AWS 区域。通常，您需要选择一个距离大多数用户最近的区域。us-east-1由于我位于美国东海岸，所以我选择的是这个区域。将来，您可以将应用设置为多区域部署，以便更好地支持全球用户。如果您想了解更多信息，这里有一张所有区域的地图！

初始化后端环境需要几分钟时间，但完成后，您可以单击“后端环境”选项卡，然后单击“打开管理 UI”。

从此视图中，您将能够编辑您的模式，管理您的应用程序内容，向您的应用程序添加身份验证，以及使用任何其他 Amplify 服务扩展您的应用程序。

首先，单击右上角的“本地设置说明”以获取另一个放大拉取命令 - 该命令会将您的应用程序连接到已部署的 API，而不是沙盒 API。

$ amplify pull --appId your-live-app-id --envName staging

管理应用内容

点击“管理应用内容”按钮，您将进入一个仪表板，您可以在其中创建、编辑和删除应用数据。切换到“帖子”表，然后点击“创建帖子”。然后，您可以添加标题和内容——点击“以 Markdown 格式编辑”即可启动 Markdown 预览工具，预览您的博客文章！

您还可以直接在帖子中添加评论。这是向您的应用程序添加初始数据的好方法，而且您无需自己为应用程序编写管理面板！

管理员界面访问

您可以授予没有 AWS 账户的用户访问管理界面的权限——您可以允许非技术团队成员仅与应用内容交互，并向开发人员授予完全访问权限。要执行此操作，请返回 AWS 控制台中您应用的主页。如果您之前离开过该页面，可以访问此链接，然后点击您的应用！

点击“管理员界面管理”，然后点击“邀请用户”按钮，通过电子邮件邀请用户加入管理员界面。

添加身份验证

回到管理界面，您只需点击几下即可为您的应用初始化身份验证。您可以配置用户的注册和登录要求，包括社交身份验证和多重身份验证。点击“启用身份验证”即可开始。

部署身份验证后，您可以在“管理组”页面上管理用户和创建用户组，因此如果您愿意的话。

然后，回到数据模型页面，您可以向表添加授权角色。将授权模式更改为 Cognito 用户池，这样只有登录的用户才能访问和操作数据，并且您可以设置只有特定组或所有者才能对数据执行操作。

如果您想允许公共读取访问但只有登录用户才能操作数据，您也可以使用 IAM 用户。

您可以使用Amplify UI React Components将配置的身份验证添加到您的应用程序。

首先，安装 React 组件：

$ npm i @aws-amplify/ui-react

然后，我们可以通过将组件包装在withAuthenticator高阶组件中来为整个应用程序添加身份验证：

import { withAuthenticator } from '@aws-amplify/ui-react'
...
export default withAuthenticator(App)

使用现有的 Amplify 命令

您可以将 Amplify 的命令行界面与 Amplify UI 结合使用 - 这样您仍然可以使用 GraphQL API、S3 存储、Lambda 函数等。您可以通过单击左侧菜单中的项目或通过文档查看添加这些内容的说明。

部署前端

编写完前端代码后，您也可以通过 Amplify 进行部署。这里有一个教程。

结论

我迫不及待地想让你试用这个工具！如果你也想试试，欢迎随时给我留言，告诉我你有什么反馈，或者对后续教程有什么要求。

这是我的完整代码的链接！

继续阅读：https://dev.to/aws/introducing-the-aws-amplify-admin-ui-create-an-application-backend-in-clicks-46pk