试着使用Amplify轻松地创建一个Web应用程序

1 年 ago

逸, 科

2 minutes

首先

现在，低代码开发已经成为一种普遍现象，例如MS的PowerPlatform和ServiceNow，可以在不考虑基础架构的情况下开发应用程序。本次介绍使用AWS Amplify，这是一种可实现低代码开发的AWS服务，来简单地创建Web应用程序的方法。

通过使用AWS Amplify，您可以实现以下功能。

通过AWS AppSync从DynamoDB获取数据

只需一种选项：※在本文中，为了介绍技术，我们采用了简单的结构。如果您在实际服务中使用，根据需要启用多因素验证和启用仅管理员可进行新注册的设置。

建筑设计

Amplify的初始设定

按照以下步骤进行Amplify的初始设置。

Amplify CLI安装步骤
Amplify应用创建步骤

# 创建Next.js空项目
npx create-next-app@latest next-amplified –no-app
cd next-amplified

# 注册Amplify应用（默认选项即可，但需要先设置AWS配置文件）
amplify init

# 添加auth类别并构建AWS Cognito
amplify add auth

## 选择以下选项
## 是否使用默认的认证和安全配置？ > 默认配置
## 用户如何登录？ > 用户名
## 是否配置高级设置？ > 不需要，全部完成。

# 添加api类别并构建AWS AppSync和DynamoDB表
amplify add api

## 选择以下选项
## 从下面的服务中选择：GraphQL
## 我们将要创建的GraphQL API。选择要编辑或继续的设置：授权模式：API密钥（默认，过期时间：从现在起7天）
## 为API选择默认的授权类型：Amazon Cognito用户池
## 配置其他授权类型吗？不需要
## 我们将要创建的GraphQL API。选择要编辑或继续的设置：继续
## 选择模式模板：空白模式
## 是否要编辑模式？（Y/n） · 是

打开amplify/backend/api/nextamplified/schema.graphql文件，并将其修改为以下内容。
根据此模型创建AppSync的GraphQL API定义和Dynamo表。
type Todo
@model
@auth(rules: [{ allow: private, provider: userPools }]) {
id: ID! @primaryKey
description: String!
}

将本地更改应用到远程的Amplify应用。
这将由AWS Amplify创建Cognito、AppSync和DynamoDB表。
amplify push
## 是否确定继续？ > 是

## 选择以下选项
## 是否为新创建的GraphQL API生成代码？ > 是
## 选择代码生成语言目标 > typescript
## 输入graphql查询、变动和订阅的文件名模式 > src\graphql\**\*.ts
## 是否生成/更新所有可能的GraphQL操作-查询、变动和订阅？ > 是
## 输入最大语句深度（如果模式嵌套较深，请增加默认值） > 2
## 输入生成代码的文件名 > src\API.ts

应用程序的实施

将pages/index.tsx的内容替换为以下内容。
import { API，Amplify，graphqlOperation } from ‘aws-amplify’;
import ‘@aws-amplify/ui-react/styles.css’;
import { Button，TextField，useAuthenticator，withAuthenticator } from ‘@aws-amplify/ui-react’;
import { GraphQLQuery } from ‘@aws-amplify/api’;
import { listTodos } from ‘@/src/graphql/queries’;
import { Todo，ListTodosQuery，CreateTodoMutation，CreateTodoInput } from ‘@/src/API’;
import { useEffect，useState } from ‘react’;
import { createTodo } from ‘@/src/graphql/mutations’;

import awsconfig from ‘@/src/aws-exports’;
Amplify.configure(awsconfig);

const HomePage = () => {
const { user，signOut } = useAuthenticator((context) => [context.user]);
const [ todos，setTodos ] = useState<(Todo | null)[] | undefined>();
const [ description，setDescription ] = useState(“”);

const getTodos = async () => {
const result = await API.graphql<GraphQLQuery>(graphqlOperation(listTodos));
const todos = result.data?.listTodos?.items;
setTodos(todos);
}

useEffect(() => {
getTodos();
}， [])

const addTodo = async () => {
const todo: CreateTodoInput = { description: description };
await API.graphql<GraphQLQuery>(graphqlOperation(createTodo，{ input: todo }));
getTodos();
}

return (
<>

你好 {user?.username}

setDescription(e.target.value)}>

{todos?.map((todo, index) => ())}

ID	Description
{todo?.id}	{todo?.description}

</div > </>
)
};
export default withAuthenticator(HomePage);

应用程序运行确认

在AWS管理控制台上确认

完成活动后的工作

删除通过执行以下步骤创建的所有环境。

amplify delete
? Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the proj
ect from the cloud and wipe out all the local files created by Amplify CLI) > Yes

可以提供一些参考资料吗？

Todoの更新、削除を行うための実装方法