快速笔记简介

部署一个全栈 Web 应用程序，帮助您随时随地整理笔记。

前几天我发布了 Journey，这是一款小巧便捷的应用，可以帮助你在求职过程中追踪职位列表。我收到了很多积极的反馈，所以我想再整理一些使用 AWS Amplify 和亚马逊服务可以实现的功能示例。

这就是我开发 Quick Notes 的原因。它是一款足够小的应用，用户很容易上手，而且它的用途也希望能够像 Journey 一样，被很多人使用。

它的功能

快速笔记功能让您可以快速记录和访问笔记，并提供以下功能：

• 🎙 记录笔记
• 🔈 播放音符
• 📖 阅读笔记
• 👮‍ 已认证
• 🔥 无服务器后端
• 🚀 GraphQL
• 💻 几分钟内即可部署后端

工作原理

该应用程序的代码位于此处。

本项目使用 Amazon ML 服务（Amazon Polly 和 Amazon Transcribe）和 AmplifyPredictions类别将文本转换为语音以演奏音符，并将录制的音符转换为文本以存储在 AWS AppSync（GraphQL 服务）中。

在项目中，你会看到一个名为 `<app_backend_name>` 的文件夹amplify。该文件夹包含应用程序的后端，可以重新部署到任何人的帐户中。在该amplify文件夹中，你会看到一个backend`<config_name>` 文件夹。在这个文件夹中，你会看到四个主要功能的配置：

• 身份验证服务（由 Amazon Cognito 提供支持）
• GraphQL API（使用 AWS AppSync 构建）
• 语音转文本生成（基于 Amazon Transcribe 构建）
• 文本转语音生成（基于 Amazon Polly 构建）

在该backend/api文件夹中，您将看到 GraphQL API 配置以及基本GraphQL Schema。

这是 GraphQL 的基础模式。你会看到基础模式如下所示：

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
  text: String!
  createdAt: String
  updatedAt: String
}

如果您之前从未使用过 Amplify，您可能不了解 ` @modeland`指令。它们是Amplify CLI 的GraphQL Transform@auth库的一部分。

@model - 使用此指令装饰任何基本类型，以获取 CRUD 和列表查询和变更定义、DynamoDB 表以及为 GraphQL 操作创建的解析器。

@auth - 使用此指令装饰任何基本类型或字段，以便为受保护的数据设置细粒度的身份验证和授权。

部署应用程序

要自动部署应用，请点击下方橙色大按钮👇

如果您希望手动部署应用程序，请按照以下说明操作。

部署后端并运行应用程序

1. 克隆仓库并安装依赖项

~ git clone https://github.com/kkemple/quick-notes.git
~ cd quick-notes
~ npm install

1. 初始化并部署 Amplify 项目

~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.

1. 启动应用并注册新用户

~ yarn start

部署前端

1. 使用你选择的 Git 服务创建一个新的仓库。

2. 将项目推送到你的新仓库
   

~ git remote add origin <your_new_repository>
~ git push --set-upstream master

1. 连接到AWS Amplify 控制台并等待构建开始。您将获得一个生产环境 URL，现在可以开始做笔记了！

自定义 GraphQL schema

此架构可以编辑。如果您需要添加其他字段，可以通过以下步骤更新后端：

更新模式（位于 amplify/backend/api/quicknotes/schema.graphql）。

重新部署后端

amplify push

如果您或您认识的任何人在使用这款应用时需要帮助，请在Twitter上联系我，我很乐意提供帮助！