动态

详情 返回 返回

簡化的架構治理:使用 NocoBase 構建應用程序目錄 - 动态 详情

這篇博客由 Leandro Martins 創作,並最初發表在使用 NocoBase 構建應用程序目錄。

本文的目標是展示 NocoBase) 在無代碼開發 Web 應用方面的潛力和易用性。作為一個案例研究,我將創建一個應用程序目錄來輔助架構治理。此案例將使用 NocoBase 的功能,包括建模、安裝、創建表格、菜單、表單、圖表以及工作流。

本文將使用以下技術:NocoBase、Postgres 和 Docker。

什麼是 NocoBase?

NocoBase) 是一個開源平台,由 JavaScript 編寫,基於 NodeJS、TypeScript 和 AntDesign,旨在無需編碼即可創建自定義應用程序。這是一個低代碼後端解決方案,可視化創建表格、自定義表單、工作流自動化和定製界面。

What is NocoBase?.png

NocoBase 的主要亮點

  • 活躍的社區:一個高度活躍的論壇,用於插件開發和問題解決。
  • 不斷審查的代碼:GitHub 上有頻繁更新和貢獻,擁有超過 13k 星標。
  • 數據庫兼容性:支持主要的關係數據庫,如 Postgres 和 MySQL。
  • 可視化數據建模:使用 Main Database 插件可視化定義表格和數據。
  • 廣泛的插件庫:提供各種免費和付費插件,並支持開發自定義插件。

Key Highlights of NocoBase.png

案例研究

為了展示 NocoBase 的一些功能,我們將創建一個名為架構門户的案例研究。該門户旨在組織企業應用相關數據,具備以下功能:

  • 應用目錄
  • 更新提醒,例如版本升級和證書續期。
  • API 目錄,用於企業系統。
  • 數據可視化圖表

Case Study Overview.png

開發步驟

數據建模

第一步是映射並定義將在架構門户中包含的字段。以下是一個示例:

1. Application Catalog

Applications:
id: Unique identifier.
name: Application name.
description: Detailed description of the application.
stack: Technologies used.
owner: Responsible person or team.
created_at: Creation date.
last_updated: Last update date.

Reminders (Linked to Applications):
id: Unique identifier.
application_id: Reference to the application.
type: Reminder type (e.g., version update, certificate renewal).
description: Reminder description.
scheduled_date: Scheduled date for the reminder.
status: Status (e.g., Pending, Completed).

2. API Catalog

APIs:
id: Unique identifier.
Application_id: Reference to the corresponding system.
name: API name.
description: Functional description of the API.
documentation_url: Link to the official documentation.
last_updated: Last update date.
version: Current version.

安裝 NocoBase

對於安裝和配置,我選擇了使用 Docker 的本地版本。其他安裝選項包括 npm 或 Git 源碼。

以下是 Docker Compose 的 YAML 配置代碼。安裝 Docker 後,導航到 YAML 文件所在目錄並運行以下命令:

docker compose up -d

這將在你的機器上啓動 NocoBase,默認端口為 13000。在瀏覽器中打開 http://localhost:13000。默認登錄憑據為admin@nocobase.comadmin123

version: '3'

networks:
  nocobase:
    driver: bridge

services:
  app:
    image: nocobase/nocobase:beta
    networks:
      - nocobase
    depends_on:
      - postgres
    environment:
      # The application's secret key, used to generate user tokens, etc.
      # If APP_KEY is changed, old tokens will also become invalid.
      # It can be any random string, and make sure it is not exposed.
      - APP_KEY=your-secret-key
      # Database type, supports postgres, mysql, mariadb
      - DB_DIALECT=postgres
      # Database host, can be replaced with the IP of an existing database server
      - DB_HOST=postgres
      # Database name
      - DB_DATABASE=nocobase
      # Database user
      - DB_USER=nocobase
      # Database password
      - DB_PASSWORD=nocobase
      # Timezone
      - TZ=Asia/Shanghai
    volumes:
      - ./storage:/app/nocobase/storage
    ports:
      - '13000:80'
    # init: true

  # If using an existing database server, postgres service can be omitted
  postgres:
    image: postgres:16
    restart: always
    command: postgres -c wal_level=logical
    environment:
      POSTGRES_USER: nocobase
      POSTGRES_DB: nocobase
      POSTGRES_PASSWORD: nocobase
    volumes:
      - ./storage/db/postgres:/var/lib/postgresql/data
    networks:
      - nocobase

創建表格和數據

使用 Data Source Manager 插件,可以創建集合(表格)並定義字段。根據前文模型,可以輕鬆實現。更多插件參考見此處)。

Creating Tables and Data.png

Creating Tables and Data.png

創建菜單

通過單擊屏幕右側的鉛筆圖標,可以創建頂部和側邊菜單,如圖所示。我們可以按照圖中展示的示例進行配置。

Creating Menus.png

創建表單

創建表單(CRUD)也非常簡單。NocoBase 使用塊組件來創建表格、表單、詳情頁、列表、圖表、卡片等。在選擇塊類型後,只需選擇要鏈接到該塊的集合(表格),鏈接到集合的組件(塊)會自動生成。每個塊都有其獨立的自定義設置。

Creating Forms.png

創建圖表

構建圖表同樣非常簡單。只需添加一個名為“圖表”的塊,並選擇希望用作數據源的集合(表格),如圖所示。

Creating Charts.png

選定塊後,可以配置圖表屬性。下圖展示了圖表的配置選項,用户可以設置指標、分組、過濾器、不同類型的圖表以及標題等屬性。用户可以探索所有配置選項,靈活調整圖表展示效果。

Creating Charts.png

創建計劃工作流

NocoBase 允許通過事件創建自動化工作流,以執行多種任務。三種觸發器類型包括:集合事件計劃事件後操作事件。利用這些觸發器,可以在系統內創建各種操作,例如發送通知、將數據插入其他表格或向外部 API 發送請求。以下是一個在應用內發送通知的工作流示例。

Workflow.png

在我們的案例中,我們將創建一個工作流,在提醒日期當天發送通知。此工作流使用 計劃事件,每天在指定時間運行,如下圖所示。

Workflow.png

Workflow.png

除了配置計劃時間,還需要設置工作流以查詢 提醒 集合,提取當天的提醒,循環遍歷每條提醒,併為每條提醒發送通知,如下圖所示。整個過程非常簡單,只需點擊“+”按鈕添加這些動作並進行配置即可。

Workflow.png

配置完成後,只需點擊右上角的“開”按鈕激活工作流。要查看執行結果,點擊右上角的“…”按鈕並選擇 執行歷史記錄,如圖所示。

Workflow.png

結論

通過上述案例研究,我們展示了 NocoBase 提供的豐富功能。它靈活適配不同規模和需求的應用開發,支持文件管理、國際化、移動端以及主題編輯功能。用户還可以開發自己的插件或購買市場中的商業插件。

推薦閲讀:

  • 如何使用 NocoBase 構建應用程序?
  • 2025年8個強大的無代碼(零代碼)開發平台
  • GitHub Star 數量前 12 的開源無代碼(零代碼)工具
  • GitHub Star 數量前 15 的開源低代碼項目
  • 6 大推薦給開發者的無代碼(零代碼)工具
  • 國內外十大開源快速開發平台推薦
user avatar k21vin 头像 candy_68fb0dfb0afd0 头像 huidadebianpao 头像 haijun_5e7e16c909f52 头像 liudamao 头像 rtedevcomm 头像 xuri 头像 openanolis 头像 leguandeludeng 头像 xiangchujiadepubu 头像 phyjack 头像
点赞 11 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.