基于 React、NextJS 和 GraphQL 构建的完整生产级餐厅计费应用程序

我已经完成了印度餐厅计费应用程序的开发，这个项目是从学习Wes Bos 的高级 React课程开始的。

之前我还写过四篇与该应用程序相关的文章，其中包括我遇到的一些问题以及一些设置。

本文将介绍如何从我的GitHub获取应用程序后在本地主机上安装。内容包括 Prisma 配置、事务性电子邮件配置和管理员用户生成。

我还会带你了解这款应用。我的目标是让这款应用成为更高级的餐厅​​或通用销售点应用的基础，供所有人使用，也方便小型餐厅老板使用。欢迎大家 fork、使用、提出问题（并修复它们）。

所以，打开你常用的终端，克隆这个项目。

git 克隆

现在，你会看到两个文件夹——backend和frontend。分别进入这两个文件夹，然后执行npm install。

npm 安装

现在，是时候设置 Prisma 数据库了。请访问https://www.prisma.io/并创建一个帐户。

完成后，您可以查看您的 Prisma 控制面板。

Prisma 仪表盘

我们将通过终端进行一些部署操作，所以请进入后端文件夹，首先使用`npm i -g prisma`命令全局安装 prisma。

棱镜全球

现在，在后端文件夹中，只需输入命令 prisma login。

Prisma登录

它将打开您的默认浏览器，您需要在其中输入用于创建 Prisma 帐户的凭据。

请输入您的凭据

然后它会请求获得最高权限的使用许可。

授予许可

点击“授予权限”后，系统会提示您关闭浏览器。完成后，您即可在控制台中完成身份验证。

现在，我们需要在终端输入`prisma init`来初始化一个新的 Prisma 服务。你会看到如下所示的错误信息。

Prisma 初始化错误

出现这些错误是因为我们的项目已经完成，并且有一些与 Prisma 相关的自动生成的文件。

您需要删除其中一些文件。请删除以下文件。

.graphqlconfig.yml
datamodel.prisma
prisma.yml
variables.env
src/generated/prisma.graphql

再次输入prisma init命令，即可继续。接下来，使用鼠标向下滚动并输入Demo Server + MySQL 数据库。

选择演示服务器

然后在下一个屏幕中选择延迟最低的选项。

选择延迟最低的那个。

之后，为您的服务选择一个名称，并将阶段设置为dev。

阶段是开发

在选定的编程语言中，不要生成

不要生成

Prisma 为我们创建了两个文件。

创建了两个文件

现在让我们打开prisma.yml，我们会注意到 prisma 给了我们一个端点。

端点

我们将把这个端点信息以及其他一些敏感信息添加到我们的环境文件中。

所以，请在后端文件夹中创建一个名为variables.env 的文件。PRISMA_ENDPOINT 将是我们从prisma.yml文件中获取的端点。PRISMA_SECRET 和 APP_SECRET 可以随意设置。

variables.env

接下来，请打开prisma.yml 文件来使用这些变量。请注意，我们已经注释掉了密钥。这是因为我们目前处于开发阶段，不希望数据库每次都要求输入密码。

prisma.yml

我们需要将datamodel.prisma文件更新到最新代码。之前为了成功执行prisma init命令，我们不得不将其删除。请从这里获取。

数据模型.prisma

现在在后端文件夹中运行npm run deploy

npm run deploy

如果一切顺利，您可以在 Prisma 控制面板中看到该服务。

我们的服务

点击该服务，您将看到我们所有的数据模型项。

我们所有的型号

在运行后端和前端之前，还剩最后一步。Prisma 使用名为prisma.graphql 的工具，我们需要将其删除才能使prisma init成功。您可以从这里获取它。

将其添加到src/generated/prisma.graphql中

prisma.graphql

现在进入后端和前端文件夹，运行`npm run dev`

npm run dev

如果两者都成功，您的应用程序将在http://localhost:7777/启动。

http://localhost:7777/

现在，应用中只有管理员用户拥有创建新用户的权限。因此，我们需要先通过 GraphQL Playground 从后端创建一个管理员用户。

访问http://localhost:4444/并执行以下 mutation 以创建管理员用户。

创建管理员用户的变更

然后前往 Prisma 控制面板，为该用户添加管理员权限。您需要点击权限旁边的三个点，然后点击“管理员”。最后，点击底部的“保存到数据库”按钮。

添加管理员权限

现在点击“登录”按钮，使用管理员用户登录。您将在这里看到许多不同的管理选项。

接下来，我们将创建一个普通用户。点击“注册”。

报名

请使用真实的 Gmail 账号创建用户，因为我们也提供密码重置功能。

真实资质

接下来，我们将设置用于密码重置的事务性电子邮件。请按照我之前在 dev.to上发表的文章中的所有步骤操作（链接在此） 。

您将获得CLIENT_ID、CLIENT_SECRET和REFRESH_TOKEN三个新值，您需要将它们添加到variables.env 文件中。

三个新价值观

另外，在Mutation.js中添加您用于设置事务性电子邮件的 Gmail ID。

Mutation.js

您需要重启后端服务器，然后点击“重置”。

重置密码

如果成功，您将会收到消息。

密码重置成功

您将收到一封发送到您 Gmail 帐户的电子邮件，其中包含重置密码的链接。

用于重置密码的邮件

您还需要设置一个 Cloudinary 账户用于图片上传和管理。请按照我之前在 dev.to 上发表的文章中的所有说明进行操作（链接在此）。

只需将用户名替换为您按照上述文章中的步骤在CreateItem.js文件中获取的用户名即可。

云层

是时候测试一下图片上传功能了。使用管理员账号登录，然后点击汉堡菜单中的“添加菜品”。您还可以通过“权限”设置创建其他类型的用户，例如可以创建、删除或编辑菜品的用户。

添加一道菜

点击提交，菜品即成功添加。

菜品添加成功

设置完成。请检查计费、管理员权限等所有功能。所有数据都会保存到云端的 Prisma 数据库中。

Cloud Prisma 数据库

如果您喜欢这个项目，请在我的 GitHub 链接
BillingRestro上给我点个星。

希望您喜欢这篇文章，并希望使用 Heroku 部署此项目。点击此处查看关于在 Heroku 上部署 React NextJS GraphQL 应用的文章。

这款开源应用也已在 Product Hunt 上发布。请大家为它投票。

https://www.producthunt.com/posts/billing-restro