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

教程

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

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

概览

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

重要概念

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

实施

 最短完成时间

5 分钟

 使用的服务

 获取帮助

  • 项目将需要两个 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 应用程序的实时运行情况。

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