Logo

菜单

发布于 2026-01-06 0 阅读
0

隆重推出 Amplify UI 的 React 组件

隆重推出 Amplify UI 的 React 组件

2024年6月27日：这篇博文使用的是Amplify Gen 1，如果您要开始使用新的Amplify应用程序，我建议您尝试使用Gen 2！

本周，我在 AWS 的团队推出了 React UI 组件，用它们来构建东西真的很有趣——我想向大家展示一下你可以创造出什么！

AWS Amplify UI 是一套基础组件和云连接组件，支持自定义、主题化和辅助功能。它包含用于创建布局、按钮、标题、评分等的基础组件，以及用于连接 AWS 资源以显示地图和构建身份验证流程的组件。让我们来构建一个使用 UI 库的地图应用程序吧！

已完成的应用程序，包含标题、卡片和地图。

启动应用程序

首先，创建一个应用程序——我使用的是 Next.js，但您也可以使用 Create React App。

npx create-next-app amplify-ui-demo
cd amplify-ui-demo
Enter fullscreen mode Exit fullscreen mode

然后，安装 Amplify 库和 UI 组件：

npm i aws-amplify @aws-amplify/ui-react
Enter fullscreen mode Exit fullscreen mode

Amplify UI 默认没有自带字体，您可以选择自己喜欢的字体。默认主题使用 Inter 字体——我们也会在我们的应用中安装该字体。

npm install @fontsource/inter
Enter fullscreen mode Exit fullscreen mode

在应用程序的根目录下/pages/_app.js，导入 Amplify CSS 文件和 inter font：

import "@aws-amplify/ui-react/styles.css";
import "@fontsource/inter/variable.css";
Enter fullscreen mode Exit fullscreen mode

构建基本用户界面

现在，让我们来构建应用程序的基本用户界面！我们将在应用程序的主页上进行操作/pages/index.js。首先，我将在我的 React 组件上方创建一个餐厅数组。每家餐厅都将包含名称、菜系、评分、价格以及（随机生成的）经纬度：

const restaurants = [
  {
    name: "Mannys's Burgers",
    cuisine: "American",
    rating: 5,
    price: "$$",
    location: {
      lat: "32.385348495775",
      long: "-85.738272191934",
    },
  },
  {
    name: "Mac n Cheesy",
    cuisine: "American",
    rating: 4,
    price: "$",
    location: {
      lat: "40.385358710927",
      long: "-78.637760520167",
    },
  },
  {
    name: "Giuliano's Italian Restaurant",
    cuisine: "Italian",
    rating: 5,
    price: "$$$",
    location: {
      lat: "35.396328108119",
      long: "-87.786869702867",
    },
  },
  {
    name: "The Pink Sheep",
    cuisine: "Fine Dining",
    rating: null,
    price: "$$$$",
    rating: 3,
    location: {
      lat: "45.386348035105",
      long: "-97.535870048241",
    },
  },
];
Enter fullscreen mode Exit fullscreen mode

我还会预先导入所有需要的UI组件，包括Next.js的Link组件。

import {
  withAuthenticator,
  Card,
  Badge,
  Heading,
  Rating,
  Text,
  Link,
  Flex,
  View,
  SearchField,
  useTheme,
  MapView,
} from "@aws-amplify/ui-react";

import NextLink from "next/link";
Enter fullscreen mode Exit fullscreen mode

我们将从一个组件开始，View该组件默认会渲染成一个div<div> 标签。我们将保留 Next.js 代码Head，并在其中添加一个 title 标签。

function Home() {
  return (
    <View>
      <Head>
        <title>RestaurantList</title>
      </Head>
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

在下方Head，我们来构建一个页眉。首先，我们将View再次使用 `<header>` 组件，但这次我们将它渲染为 ` header<header>` 元素而不是 `<header>` 元素div。我们还会添加一些内边距。然后，我们将使用Flex`<flexbox>` 组件来实现 Flexbox 布局。您可以使用与 Flexbox CSS 属性相对应的 props！我们将使内容在行内居中，并在项目周围添加间距。我们将创建另一个 `<header>` 组件Flex并添加一些Link`<header>` 标签。我们还将添加一个 `<header>` 级别的标题，标题内容1为网站名称。最后，我们将添加另一个 `<header>`Flex组件，并在SearchField其中添加一个 `<header>` 标签。

<View as="header" padding="10px">
  <Flex direction="row" justifyContent="space-around" alignItems="center">
    <Flex>
      <NextLink href="">
        <Link>Home</Link>
      </NextLink>
      <NextLink href="/about">
        <Link>About</Link>
      </NextLink>
      <NextLink href="/shop">
        <Link>Shop</Link>
      </NextLink>{" "}
    </Flex>
    <Heading level={1} textAlign="center">
      RestaurantList
    </Heading>
    <Flex>
      <SearchField />
    </Flex>
  </Flex>
</View>
Enter fullscreen mode Exit fullscreen mode

接下来，我们遍历所有餐厅，并Card为每家餐厅添加一个组件。我们将Flex在这里创建一个组件，以便将来可以在卡片旁边显示地图。然后，我们将添加一个View包含集合的组件maxWidth。我们将遍历所有餐厅，并Card为每家餐厅创建一个组件。每个组件的Card左侧将包含餐厅信息，右侧将包含评分。该Rating组件将渲染每家餐厅的星级评分！

<Flex>
  <View maxWidth="800px">
    {restaurants.map((restaurant) => (
      <Card variation="elevated" key={restaurant.name} margin="10px">
        <Flex direction="row" justifyContent="space-between">
          <Flex direction="column">
            <Heading level={3}>{restaurant.name}</Heading>
            <Badge size="large" variation="info" width="fit-content">
              {restaurant.cuisine}
            </Badge>
            <Text color="grey">{restaurant.price}</Text>
          </Flex>
          <Flex direction="column">
            <Rating value={restaurant.rating} maxValue={5} />
          </Flex>
        </Flex>
      </Card>
    ))}
  </View>
</Flex>
Enter fullscreen mode Exit fullscreen mode

现在你的用户界面应该看起来像这样：

用户界面左侧带有标题和卡片

主题

Amplify UI 完全支持主题定制——您可以让组件完全符合您的品牌或风格。Amplify UI 文档中提供了一些示例主题，可以彻底改变 UI 的外观！

在这种情况下，我会更改一些颜色。我将使用绿色作为主主题色，黄色作为辅助色。我会将主题对象添加到文件中_app.js。Amplify UI 内置了颜色，绿色和黄色就是从这里来的，但您也可以将这些值设置为完全自定义的颜色。

const earthyTheme = {
  name: "earthTheme",
  tokens: {
    colors: {
      brand: {
        primary: {
          10: { value: "{colors.green.10}" },
          20: { value: "{colors.green.20}" },
          40: { value: "{colors.green.40}" },
          60: { value: "{colors.green.60}" },
          80: { value: "{colors.green.80}" },
          90: { value: "{colors.green.90}" },
          100: { value: "{colors.green.100}" },
        },
        secondary: {
          10: { value: "{colors.yellow.10}" },
          20: { value: "{colors.yellow.20}" },
          40: { value: "{colors.yellow.40}" },
          60: { value: "{colors.yellow.60}" },
          80: { value: "{colors.yellow.80}" },
          90: { value: "{colors.yellow.90}" },
          100: { value: "{colors.yellow.100}" },
        },
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

要使用该主题，请导入ThemeProvider组件。

import { ThemeProvider } from "@aws-amplify/ui-react";
Enter fullscreen mode Exit fullscreen mode

然后，将顶层应用程序组件包裹在内，ThemeProvider并将theme属性设置传递给主题对象。

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={earthyTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

在组件中使用主题

您还可以直接在组件中使用主题属性来设置组件样式。在Home组件内部index.js，使用useTheme钩子函数。

const { tokens } = useTheme();
Enter fullscreen mode Exit fullscreen mode

接下来，我们将页眉的背景颜色设置为主题的主色：

<View as="header" padding="10px" backgroundColor={tokens.colors.brand.primary[40]}>
Enter fullscreen mode Exit fullscreen mode

如果品牌主色在未来发生变化，页眉也会随之更新！

云连接组件

Amplify UI 还提供云连接组件，以便您可以直接从 React 组件连接到 AWS 服务。首先，请安装 Amplify CLI。如果您是第一次使用 Amplify，则还需要对其进行配置。

npm install -g @aws-amplify/cli
Enter fullscreen mode Exit fullscreen mode

然后，在项目中初始化 Amplify：

amplify init
Enter fullscreen mode Exit fullscreen mode

出现提示时，请为您的项目选择一个名称，然后选择“是”以使用默认值进行初始化。同时，请选择您的 AWS 配置文件。

现在，运行以下命令为您的项目添加身份验证：

amplify add auth
Enter fullscreen mode Exit fullscreen mode

按回车键进入默认配置，然后选择用户名和“不，我完成了”。

然后将地图功能添加到您的应用中：

amplify add geo
Enter fullscreen mode Exit fullscreen mode

请按以下方式回答问题（地图名称可随意选择）：

? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: · map53122572
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no
Enter fullscreen mode Exit fullscreen mode

运行amplify push以部署资源。

接下来，您需要在应用程序代码中配置 Amplify。在./pages/_app.js文件中添加以下内容：

import awsExports from "../src/aws-exports";
import { Amplify } from "aws-amplify";

Amplify.configure(awsExports);
Enter fullscreen mode Exit fullscreen mode

我们先来给应用添加一个地图组件。在餐厅卡片的 `<head> Flex` 标签内，并在 `<body>` 标签的结束位置下方，</View>添加一个 `<map>` 标签MapView。经纬度指的是美国，您可以根据需要调整缩放级别。

<MapView
  initialViewState={{
    latitude: "37.0902",
    longitude: "-95.7129",
    zoom: 4,
  }}
></MapView>
Enter fullscreen mode Exit fullscreen mode

我们还要为每家餐厅添加标记。我们将使用react-map-gl这些标记。

安装软件包：

npm i react-map-gl
Enter fullscreen mode Exit fullscreen mode

导入标记：

import { Marker } from "react-map-gl";
Enter fullscreen mode Exit fullscreen mode

然后，在 MapView 标签内渲染Markers。

{
  restaurants.map((restaurant) => (
    <Marker
      key={restaurant.name}
      latitude={restaurant.location.lat}
      longitude={restaurant.location.long}
    />
  ));
}
Enter fullscreen mode Exit fullscreen mode

现在你就有地图了！

美国地图，标有餐厅位置

现在我们来添加身份验证流程，以便用户需要登录才能查看地图。将 Home 组件包裹在高阶withAuthenticator组件中。现在系统会提示您创建用户并登录！

export default withAuthenticator(Home);
Enter fullscreen mode Exit fullscreen mode

身份验证流程

您还可以使用Amplify 的数据类别来使用数据库数据而不是 JavaScript 对象。

工作室

您还可以使用 Amplify Studio 将 Figma 设计稿转换为云端代码。底层生成的组件都将使用 Amplify UI。请查看此教程，了解如何使用该工作流程构建类似的应用程序。

结论

在本教程中，我们使用 Amplify UI 的基本组件和云连接组件构建了一个用户界面。如果您想断开应用与云端的连接并删除身份验证和地理位置资源，请运行以下amplify delete命令。在使用 Amplify UI 进行构建的过程中，我们非常期待您的反馈！

文章来源：https://dev.to/aws/build-a-mapping-app-with-aws-amplify-ui-3e5k
Lineicons 精选十大免费 ...
Laravel Fortify：实...