构建一个基本的 Web 应用程序

教程

简介
创建 Web 应用程序
构建无服务器函数
创建数据表
将无服务器函数与 Web 应用程序链接
单击此处
添加交互到 Web 应用程序
单击此处
清理资源

模块 5：添加交互到 Web 应用程序

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

概览

在本模块中，您将更新在模块 1 中创建的网站，以使用 Amplify UI 组件库来构建整个用户身份验证流程，使用户能够注册、登录和重置密码，并调用在模块 3 中创建的 GraphQL API。这将增加一项显示使用无服务器功能捕获的用户电子邮件的功能。 

重要概念

Amplify 库：您可以使用 Amplify 库从 Web 应用程序或移动应用程序中与 AWS 服务互动。

实施

 最短完成时间

5 分钟

 使用的服务

AWS Amplify

 获取帮助

Amplify 故障排除

  • 项目将需要两个 Amplify 库。主 aws-amplify 库包含用于将应用程序的前端连接到后端的所有客户端 API，而 @aws-amplify/ui-react 库包含框架特定 UI 组件。

    1.在新的终端窗口，在项目根文件夹 (profilesapp) 中，运行以下命令来安装库。

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

  • 1.在本地计算机上，导航到 profilesapp/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;
}

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

    • 该代码将使用 Amplify Authenticator 组件来支撑整个用户身份验证流程，从而使用户能够注册、登录、重置密码和确认登录以进行多重身份验证（MFA）。
    import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Authenticator } from "@aws-amplify/ui-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);

    2.在本地计算机上，导航到 profilesapp/src/App.jsx 文件并使用以下代码进行更新。然后，保存文件。

    • 代码首先使用客户端配置文件 (amplify_outputs.json) 配置 Amplify 库。然后，使用 generateClient () 函数生成一个数据客户端。该应用程序将使用数据客户端来获取用户的配置文件数据。 
    import { useState, useEffect } from "react";
import {
  Button,
  Heading,
  Flex,
  View,
  Grid,
  Divider,
} from "@aws-amplify/ui-react";
import { useAuthenticator } 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 [userprofiles, setUserProfiles] = useState([]);
  const { signOut } = useAuthenticator((context) => [context.user]);

  useEffect(() => {
    fetchUserProfile();
  }, []);

  async function fetchUserProfile() {
    const { data: profiles } = await client.models.UserProfile.list();
    setUserProfiles(profiles);
  }

  return (
    <Flex
      className="App"
      justifyContent="center"
      alignItems="center"
      direction="column"
      width="70%"
      margin="0 auto"
    >
      <Heading level={1}>My Profile</Heading>

      <Divider />

      <Grid
        margin="3rem 0"
        autoFlow="column"
        justifyContent="center"
        gap="2rem"
        alignContent="center"
      >
        {userprofiles.map((userprofile) => (
          <Flex
            key={userprofile.id || userprofile.email}
            direction="column"
            justifyContent="center"
            alignItems="center"
            gap="2rem"
            border="1px solid #ccc"
            padding="2rem"
            borderRadius="5%"
            className="box"
          >
            <View>
              <Heading level="3">{userprofile.email}</Heading>
            </View>
          </Flex>
        ))}
      </Grid>
      <Button onClick={signOut}>Sign Out</Button>
    </Flex>
  );
}

    3.在新的终端窗口，导航到项目根目录 (profilesapp)，然后运行以下命令启动应用程序：  

    npm run dev

    4.选择 Local host 链接打开 Vite + React 应用程序。

    5.选择创建帐户选项卡，然后使用身份验证流程，输入电子邮件地址和密码，创建新用户。然后选择创建账号。

    6.验证码将发送到您的邮箱。输入验证码登录应用程序。登录后，应用程序将显示您的电子邮件地址。

    7.  在打开的终端窗口中，运行以下命令将更改推送到 GitHub： 

    git add .
git commit -m 'displaying user profile'
git push origin main

    8.在新的浏览器窗口中登录 AWS 管理控制台，然后通过以下网址打开 AWS Amplify 控制台：https://console.thinkwithwp.com/amplify/apps。

    9.AWS Amplify 自动在 https://...amplifyapp.com 上构建您的源代码并部署您的应用程序，每次 git 推送都会更新您的部署实例。 选择访问已部署的 URL，即可查看您的 Web 应用程序的实时运行情况。

此页内容对您是否有帮助？

 反馈
开始学习模块六

清理资源