如何使用 NocoBase 构建应用程序?

来一起探索如何利用 NocoBase 构建一个宠物追踪应用程序吧!

Don Freeman|

这篇博客来自 Freeman Tech Consulting 的 Don Freeman,首发于nocodefounders.com。Freeman Tech Consulting 是一家全方位服务的软件工程公司,可以帮助进行无代码部署、网页应用开发、云基础设施设计/构建、GRC管理、数据分析等多种服务。

🌟什么是 NocoBase?

NocoBase 是一个无代码/低代码平台,用于轻松构建数据驱动的应用程序。用户可以定义数据模型,然后围绕该模型构建应用程序。该平台提供去除 NocoBase 标志的付费版本。NocoBase 作为开源项目,你可以在 GitHub 上轻松贡献代码。值得一提的是,NocoBase 的插件化架构能够在需要时轻松扩展平台的功能。

🚀 本地部署 NocoBase

本地运行 NocoBase 需要哪些条件?

  • Docker
  • Docker compose
  • PostgreSQL 数据库:在本篇博客中,我们将通过 Docker Compose 来运行一个数据库,但在实际的生产环境中,建议使用专用的 PostgreSQL 数据库。

如何在本地运行 NocoBase?

  • 你可以在 NocoBase 的官方文档上找到在本地运行 NocoBase 的具体步骤。

首先,创建一个工作目录,并在终端中切换到该目录。之后,你需要创建一个 docker compose 文件。我参考了 NocoBase 官网上的入门指南,并调整了细节。

下面的 docker compose 显示了在本地运行 PostgreSQL 数据库,但建议在实际生产环境中使用专用数据库。

docker compose.png

在本地目录中创建好文件后,运行以下命令以拉取所需的镜像:

pull the needed images.png

然后运行以下命令以在后台启动容器。

start the containers.png

现在你可以在 http://localhost:13000 访问 NocoBase。

🐶 构建 NocoBase 应用程序:宠物追踪应用程序

Pet Tracking Application.png

在此示例中,我们将构建一个宠物追踪应用程序🐕 🐈!此应用程序将追踪宠物主人及其宠物的信息。首先,我们需要为应用程序定义数据模型,这一操作在 NocoBase 中非常简单。

NocoBase 数据模型

🔍 找到数据模型编辑器(Data Model Editor)

在 NocoBase UI 界面中,你可以单击右上角的小齿轮⚙️,然后单击“数据源”。这将打开数据模型编辑器。在那里,你将看到 “main” 的默认数据源。单击主数据源的配置(Configure)。

创建集合

现在,我们可以在主数据源中创建集合。这些集合将存储应用程序的数据。在此示例中,我们将创建两个集合。一个用于宠物主人,另一个用于宠物。

宠物主人集合

在集合界面上,单击“新建集合”New Collection按钮。然后为集合指定一个显示名称Collection Display Name“宠物主人”,集合名称Collection Name则定为“Pet Owner”。

现在,让我们为宠物主人集合添加所需的字段。在集合界面上,单击 Pet Owner 集合旁边的“配置字段”Configure Fields。使用“添加字段”Add Field按钮,可以向该集合中添加所需字段。宠物主人集合将包含以下字段:

  • 名字(单行文本字段)
  • 姓氏(单行文本字段)
  • 电子邮件(电子邮件字段)

宠物集合

现在我们可以对宠物集合重复上述步骤。宠物集合将包括以下字段:

  • 名字(单行文本字段)
  • 宠物类型(多项选择字段)
  • 出生日期(日期时间字段)

🔗 将宠物主人集合链接至宠物集合

要将宠物主人集合与宠物集合关联,请返回宠物集合,然后单击集合配置界面的“添加字段”Add Field按钮。找到 “一对多接口” 类型,并为关系指定一个显示名称,选择“宠物”作为目标集合Target Collection,并将“ID”设置为目标键Target Key

🥳 数据模型已完成!!!

这就是数据模型设置的全部内容。以下是我的宠物数据模型示例。

pet data model.png

构建 NocoBase UI

🏠 创建主页

现在我们已经完成了数据模型,接下来可以快速构建一个用户界面,来与数据模型进行交互。返回应用程序的主页,顶部可以看到“添加新菜单项”Add New Menu。单击它,然后选择页面page。为页面命名为“主页”,然后你会看到类似这样的界面。

Create the Home Page.png

📜 创建宠物主人列表

接下来,我们将添加卡片列表,以便与我们的宠物主人集合进行交互。点击“添加区块”Add Block → “网格卡片” Grid CardPetOwner。这将实现以卡片网格的形式展示宠物主人。点击“配置字段”Configure Fields,添加名字、姓氏和电子邮件字段。

➕ 添加宠物主人

现在我们需要能够创建新的宠物主人。在区块的右上角点击“配置操作”Configure Action(注意不是在卡片中的“配置操作”)。然后点击“添加”Add New。这将创建一个名为“Add New”的按钮。点击此按钮来配置添加宠物主人的操作。

🍿 添加新宠物主人弹窗

在弹窗中,点击“添加区块”Add Block → “表单”Form → “当前集合”Current Collection。点击“配置字段”Configure Fields,添加名字、姓氏和电子邮件字段。这将使你在创建新宠物主人时能够填入这些信息。最后,点击“配置操作” Configure Action→ “提交”Submit。然后点击弹窗外部关闭它。

➕ 添加新宠物

现在我们可以查看和创建新宠物主人,接下来需要实现添加宠物的功能。回到主页,在卡片中点击“配置操作”Configure Action,然后选择“弹窗”。这将为卡片创建一个名为“弹窗”的链接,点击该链接。在弹窗内,点击“添加区块” Add Block→ “表单(添加)Form (add new)” → “关联记录” Associated Records→ “宠物”Pets。在这个新区块中,点击“配置字段”Configure Fields,添加名字、宠物类型和出生日期。这将实现在创建新宠物时能够填写这些信息。最后,点击“配置操作” Configure Action→ “提交”Submit

📜 列出现有宠物

在这个新区块的下方,点击“添加区块”Add Block → “列表” List→ “关联记录”Associated Records → “宠物”Pets。在这个新区块中,点击“配置字段”Configure Fields,添加名字、宠物类型和出生日期。

弹窗应如下所示。我的数据库中已经有一只宠物,所以它看起来可能略有不同。

List Existing Pets.png

点击弹窗外部以关闭它。现在我们可以创建和查看宠物了。你的 UI 界面现在应该类似于以下截图:

UI.png

🧪 测试

点击橙色的“UI 编辑器”按钮以退出 UI 编辑模式。您可以尝试操作 UI,创建宠物和宠物主人。

本文遗漏了许多主题,包括用户认证、更复杂的用户界面、生产环境的部署等。我可能会在后续博客中涵盖这些内容。