使用 Next.js、Tailwind CSS、Zustand 和 Amplication 的全栈 Airbnb 克隆

在这篇博文中，您将了解如何使用 Amplication 创建全栈 Airbnb 克隆。

AirBnb Clone 的功能

• 使用 Next.js 构建
• 使用 Tailwind CSS 进行样式设置
• 使用 Amplication 生成的后端
• 使用 Zusand 进行状态管理
• 使用 Mapbox API 的实时地图
• 使用 JWT 令牌登录注册
• 使用 Axios 进行 API 调用

AirBnb Clone 的功能

• 创建列表
• 查看清单
• 图书清单
• 删除列表
• 将列表添加到愿望清单
• 从愿望清单中删除列表
• 查看已预订房源
• 搜索列表
• 使用地图搜索房源
• 在地图上查看房源数据

这篇博文是我YouTube视频的一部分。快来观看这个精彩的视频吧。

释放放大的力量：轻松加速软件开发

Amplication是一款开源开发工具，旨在简化和加快 Web 应用程序的构建流程。凭借其用户友好的界面和丰富的功能，Amplication 帮助开发人员和组织快速创建强大且可扩展的应用程序，从而节省宝贵的时间和资源。

该平台以低代码开发环境为核心，允许开发人员通过配置和连接预先构建的模块来构建应用程序，而无需从头编写代码。这种方法大大减少了所需的手动编码量，使团队能够专注于创建业务逻辑并交付完善的最终产品。

步骤 1：Fork 启动 git 仓库：

克隆此git 存储库以获取 Airbnb Clone 的启动文件。

第 2 步：创建放大帐户

前往amplication 登录并连接你的 github。

步骤 3：创建您的第一个服务

现在你需要创建一个用于 amplication 的服务，它会生成你的后端代码。给它起一个有意义的名字。

我们将其命名为 AirBnb 并点击继续。

步骤 4：连接 Github 并选择存储库

现在你需要连接 Git。有很多选项可供选择，但我们选择使用 Github 作为我们的 Git 提供程序。

连接到 GitHub 后，您需要选择一个存储库。选择 airbnb 存储库。

现在点击继续。

步骤 5：选择 GraphQL / RestAPI 和 Swagger UI / Admin UI

在此步骤中，您可以启用对 GraphQL API、REST API 和 Swagger UI 以及 Amplication 提供的管理 UI 的支持选项。

我们将在这里启用所有选项。虽然我们不会在该应用中使用 GraphQL API，但出于演示目的，我们启用了它。

我们将在整个 AirBnb 克隆版本中使用 REST API。此外，我们还将使用 Swagger 来测试 API。

第六步：选择Amplication生成的后端结构类型。

Amplication 为生成的代码提供了两种类型的结构。

• Polyrepo
  如果您正在使用 polyrepo，Amplication 会将代码推送到 repo 的根目录，并将其存储在服务器和 admin-ui 的单独文件夹中。

• Monorepo
  如果您使用 monorepo，您​​可以选择要保存服务代码的文件夹。“apps”、“packages”、“ee/packages”均有效。

我们将对该项目使用 Polyrepo 选项。

它将在我们的存储库根目录中生成两个文件夹，分别名为 server 和 admin-ui

现在点击继续。

步骤7：选择数据库。

Amplication 目前提供三种类型的数据库。

• PostgreSQL
• MongoDB
• MySQL

Amplication 生成具有所有必需配置和代码的服务以开始使用 DB。

您可以稍后在插件页面中轻松更改数据库的类型

对于这个 AirBnb Clone，我们将使用 PostrgreSQL DB。

现在点击继续。

步骤 8：为您的项目选择模板

Amplication 为您的实体提供了两个选项。

• 空
  手动定义您自己的实体和字段

• 使用模板
  预定义的实体和字段地址、订单、用户

您可以从头开始或选择一个演示模板。

我们将在这里选择空选项。

点击继续。

步骤9：选择身份验证服务

Amplication 提供内置的身份验证模块，可为您的授权和身份验证预先生成代码。

对于这个Amplication提供了两个选项

• 包含Auth模块
  生成认证授权所需的代码

• 跳过身份验证
  不包含身份验证代码

对于我们的 AirBnb 克隆，我们将使用 Amplication 提供的身份验证模块，因此我们将选择“包含身份验证模块选项”。

现在点击继续

所有初始设置已完成，现在 Amplication 将生成代码。等待生成。这可能需要一两分钟。

代码生成后，您可以看到以下屏幕，表明代码已生成。

现在您选择查看我的代码按钮，它将重定向到 Github 页面

步骤 10：合并由 amplication 生成的拉取请求

现在，Amplication 服务每次发生更改后，都会生成一个新的拉取请求，需要将其与我们的代码合并到 Github 中。

现在，在 Github Pull Request 页面上，您必须使用 Merge pull Request 按钮合并代码。

您还可以通过单击“文件更改”选项来检查由 Amplication 生成的代码

这将向您显示 Amplication 生成的所有代码。

现在转到放大选项卡并点击继续。

您将看到成功页面。

您已成功设置您的 Amplication 应用程序。

现在单击创建实体选项来创建实体。

实体就像数据库中的表。

现在这里有一个预定义的实体，它适用于您的应用程序中的用户。

设置放大实体

我们将在 AirBnb Clone 中使用四个实体

• 用户：管理所有用户及其详细信息。
• 列表：这将存储用户创建的所有实体。
• 旅行：如果用户预订了房源，那么它将存储在这个实体中。
• 愿望清单：如果用户将列表添加到他们的愿望清单中，那么这将存储在愿望清单实体中。

设置列表

现在点击右上角的添加实体按钮

在新的实体模式屏幕上，输入列表作为新实体的名称，然后点击创建实体。

现在您将被重定向到列表实体详细信息页面。

从这里您可以向您的实体添加新字段，甚至可以根据角色为实体授予细粒度的权限。

现在我们需要创建一些用于 AirBnb Clone 的字段。

标题字段

点击添加字段按钮

将 title 写为名称，然后单击旁边的 +。

您可以看到新字段已创建，并且有各种选项可供配置。

我们将把该字段标记为required。

我们还将Single Line Text从下拉菜单中选择数据类型。

Amplication 根据您的需要提供各种数据类型，并根据数据类型根据需要处理代码上的约束。

现在，ampplication 会在每次更改后自动保存所有内容，因此您的选择已被选中

描述字段

对描述执行相同的过程，但对于数据类型我们将更改为Multi Line Text。

locationType 字段

此字段将存储列表的位置类型，无论是房屋、公寓、平房等。

执行与标题字段相同的流程。

placeType 字段

该字段将存储详细信息，例如该地方是否有满房间、该地方是否共享等。

执行与标题字段相同的流程。

价格字段

该字段将存储列表的价格。

对于数据类型，我们将使用Whole Number类型。

最小值和最大值将默认设置。我们不需要更改它。

mapData 字段

该字段将存储 Mapbox 的地图坐标，以便使用准确的标记加载特定位置。

对于这个字段，我们将选择数据类型作为Json类型，因为我们将在其中拥有 json 数据。

locationData 字段

该字段将存储位置数据，如邮政编码、地址、城市等。

这将是一种Json数据类型。

地点空间场

这将存储该场所可容纳的房间总数和客人总数。

这将是一种Json数据类型。

照片领域

这将存储列表照片的链接。

这将是一种Json数据类型。

listingCreatedBy 字段

该字段将存储创建此列表的用户的数据。

这与用户实体相关。

选择数据类型为Relation to entiity。

在关系实体下拉菜单中选择User实体。

并选择该One 'listings' can be related to one 'listingCreatedBy'选项。

这意味着一个用户可以创建多个列表。

就这样。这样我们就创建了我们的 listings 实体。

设置愿望清单

该实体将存储用户的愿望清单。

用户字段

这将存储哪个用户添加了列表。

数据类型将由Relation to Entity用户决定，并带有One 'wishlists' can be related to one 'user'可切换的选项。

listing 字段

这将存储用户添加的列表。

数据类型将由Relation to Entity用户决定，并带有One 'wishlists' can be related to one 'listing'可切换的选项。

这就是愿望清单实体。

设置行程

这将存储用户已预订的行程。

对于旅行，我们将遵循与愿望清单相同的程序，具有相同的字段名称和相同的关系。

这就是 Trips 实体的全部内容。

现在我们已经创建了所有需要的实体，我们可以构建我们的应用程序并将代码推送到 github。

构建并发布代码到 Github

您可以在右侧边栏看到我们有一些待处理的更改。我们需要将这些更改推送到 GitHub，以便将其与我们的应用程序集成。

点击Commit Changes & build按钮。

通过此 Amplication 将开始构建您的代码。

一旦构建成功，代码就会被推送到 Github。

现在转到您的 github 存储库。

现在点击 Pull 请求

单击由 Amplication 机器人生成的待处理的拉取请求。

现在您将看到请求页面。您可以检查代码，也可以合并拉取请求以将其与主源代码合并。

现在我们已经成功使用Amplication生成了后端代码。

设置本地应用程序

现在我们需要在本地机器上设置应用程序。

为此，克隆存储库或从 git 中提取源代码。

现在要设置应用程序，我们需要安装依赖项。

为此，目录根目录中已经创建了一个 pacakge.json 文件。

你需要跑npm install。

这将安装根依赖项。

此后，您需要运行npm run postinstall脚本来安装前端、后端和管理用户界面依赖项。

该过程完成后，您的应用程序将使用 Amplication 生成的后端代码成功设置。

现在您可以运行该应用程序来启动它npm run start。

使用 Swagger 实现的 Amplication REST API

如果您想检查 Amplication 生成的 API，请转到http://localhost:3000/api。

这将打开包含所有 API 的 Swagger UI。您可以点击此处测试 API。

但等等，还有更多，

Amplication 推出了一项突破性的功能：上传 Prisma Schema。

如果您发现自己正处于开发阶段并希望无缝过渡到 Amplication 的服务，那么这个强大的工具将会改变游戏规则。

想象一下，您可以轻松地将 Prisma 模式导入 Amplication，从而自动生成应用程序所需的实体和关系。这简化了迁移过程，节省了您的时间和精力，同时确保顺利过渡到 Amplication 的服务。

借助 Amplication 的“上传 Prisma Schema”功能，您可以将开发项目提升到新的水平，利用平台的强大功能加速应用的开发进度。集成您现有的 Prisma Schema 将为您带来更高效的开发体验。

整个过程如下：

此功能仍处于测试模式，很快就会向最终用户开放。

结论

这篇博文带您了解了如何使用强大的开源开发工具 Amplication 创建全栈 Airbnb 克隆版。借助 Amplication 的低代码开发环境，开发者可以通过配置和连接预构建的模块来构建 Web 应用程序，从而减少所需的手动编码量。本文介绍了 Airbnb 克隆版的各种特性和功能，包括实时地图、基于 JWT 的身份验证、使用 Axios 的 API 调用等等。

本指南分步指导您如何使用 Amplication 设置项目，创建房源、愿望清单和行程实体，以及如何将代码推送到 GitHub 进行集成。此外，它还演示了如何使用 Swagger UI 测试 Amplication 生成的 REST API。

通过利用 Amplication 的功能，开发人员和组织可以加速软件开发，节省宝贵的时间和资源，并交付强大且可扩展的应用程序。无论您是经验丰富的开发人员还是刚刚起步，Amplication 都能提供一个用户友好的平台，让您轻松构建令人印象深刻的 Web 应用程序。所以，在您的下一个开发项目中，尽情释放 Amplication 的强大力量吧！祝您编程愉快！

本教程是我 YouTube 视频的一部分。请查看完整视频。