在 AWS Amplify 上部署 Web 应用程序

教程

简介

模块 3：构建前端

在本模块中，您将创建一个应用程序前端并将其连接到已经构建的云后端。

简介

在本模块中，您将了解如何使用 Amplify UI 组件库支撑整个用户身份验证流，从而使用户只需几行代码即可注册、登录和重置密码。此外，您还将构建一个应用程序前端，允许用户创建、更新和删除支出。

您将学到的内容

安装 Amplify 客户端库
配置您的 React 应用程序，以包括支出功能的身份验证、数据和存储

实施

所需时间

5 分钟

获取帮助

Amplify 故障排除

安装 Amplify 库
项目将需要两个 Amplify 库。主 aws-amplify 库包含用于将应用程序的前端连接到后端的所有客户端 API，而 @aws-amplify/ui-react 库包含框架特定 UI 组件。
1.打开一个新的终端窗口，导航到项目根文件夹 (expense tracker)，然后运行以下命令将这些库安装到项目的根中。

npm install aws-amplify @aws-amplify/ui-react

设置应用程序用户界面样式

1.在本地计算机上，导航到 expensetracker/src/index.css 文件，然后使用以下代码对其进行更新，以设置用户界面样式。然后，保存文件。

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.87);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;

}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.box:nth-child(3n + 1) {
  grid-column: 1;
}
.box:nth-child(3n + 2) {
  grid-column: 2;
}
.box:nth-child(3n + 3) {
  grid-column: 3;
}

实现支出的用户界面流程功能

在此步骤中，您将更新 src/App.jsx 文件，使用客户端配置文件 (amplify_outputs.json) 配置 Amplify 库。然后，使用 generateClient() 函数生成数据客户端。

该代码使用 Amplify Authenticator 组件来支撑整个用户身份验证流程，从而使用户能够注册、登录、重置密码和确认登录以进行多重身份验证（MFA）。

此外，该代码包含以下内容：

使用实时 observeQuery 订阅用户支出数据的实时动态的代码。
createExpense - 从表单中获取数据，并使用数据客户端创建新的支出。
deleteExpense - 使用数据客户端删除所选支出。

1.在本地计算机上，导航到 expensetracker/src/app.jsx 文件，然后使用以下代码对其进行更新。然后，保存文件。

import { useState, useEffect } from "react";
import {
  Authenticator,
  Button,
  Text,
  TextField,
  Heading,
  Flex,
  View,
  Grid,
  Divider,
} from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { generateClient } from "aws-amplify/data";
import outputs from "../amplify_outputs.json";
/**
 * @type {import('aws-amplify/data').Client<import('../amplify/data/resource').Schema>}
 */

Amplify.configure(outputs);
const client = generateClient({
  authMode: "userPool",
});

export default function App() {
  const [expenses, setExpenses] = useState([]);

  useEffect(() => {
    client.models.Expense.observeQuery().subscribe({
      next: (data) => setExpenses([...data.items]),
    });
  }, []);

  async function createExpense(event) {
    event.preventDefault();
    const form = new FormData(event.target);

    await client.models.Expense.create({
      name: form.get("name"),
      amount: form.get("amount"),
    });

    event.target.reset();
  }

  async function deleteExpense({ id }) {
    const toBeDeletedExpense = {
      id,
    };

    await client.models.Expense.delete(toBeDeletedExpense);
  }

  return (
    <Authenticator>
      {({ signOut }) => (
        <Flex
          className="App"
          justifyContent="center"
          alignItems="center"
          direction="column"
          width="70%"
          margin="0 auto"
        >
          <Heading level={1}>Expense Tracker</Heading>
          <View as="form" margin="3rem 0" onSubmit={createExpense}>
            <Flex
              direction="column"
              justifyContent="center"
              gap="2rem"
              padding="2rem"
            >
              <TextField
                name="name"
                placeholder="Expense Name"
                label="Expense Name"
                labelHidden
                variation="quiet"
                required
              />
              <TextField
                name="amount"
                placeholder="Expense Amount"
                label="Expense Amount"
                type="float"
                labelHidden
                variation="quiet"
                required
              />

              <Button type="submit" variation="primary">
                Create Expense
              </Button>
            </Flex>
          </View>
          <Divider />
          <Heading level={2}>Expenses</Heading>
          <Grid
            margin="3rem 0"
            autoFlow="column"
            justifyContent="center"
            gap="2rem"
            alignContent="center"
          >
            {expenses.map((expense) => (
              <Flex
                key={expense.id || expense.name}
                direction="column"
                justifyContent="center"
                alignItems="center"
                gap="2rem"
                border="1px solid #ccc"
                padding="2rem"
                borderRadius="5%"
                className="box"
              >
                <View>
                  <Heading level="3">{expense.name}</Heading>
                </View>
                <Text fontStyle="italic">${expense.amount}</Text>

                <Button
                  variation="destructive"
                  onClick={() => deleteExpense(expense)}
                >
                  Delete note
                </Button>
              </Flex>
            ))}
          </Grid>
          <Button onClick={signOut}>Sign Out</Button>
        </Flex>
      )}
    </Authenticator>
  );
}