#Thực hành: Phát triển plugin watermark

Case này trình bày cách dùng một câu để AI phát triển một plugin watermark NocoBase hoàn chỉnh — từ việc tạo scaffold đến enable và kiểm tra, toàn bộ quá trình do AI hoàn thành.

#Hiệu ứng cuối cùng

Sau khi enable plugin:

• Trên các trang NocoBase phủ watermark bán trong suốt, hiển thị tên Người dùng đang đăng nhập
• Watermark không thể bị xóa bằng cách xóa DOM — kiểm tra định kỳ sẽ tự động sinh lại
• Trong "Cấu hình plugin" có thể điều chỉnh nội dung watermark, độ trong suốt và cỡ chữ

#Điều kiện tiên quyết

Đảm bảo bạn đã:

1. Có một môi trường phát triển NocoBase đang chạy (NocoBase CLI khi khởi tạo sẽ tự động cài đặt NocoBase Skills)
2. Đã mở editor hỗ trợ AI Agent (như Claude Code, Codex, Cursor, v.v.)

#Bắt đầu

Tại thư mục gốc của dự án NocoBase của bạn, gửi prompt dưới đây cho AI:

Hãy dùng nocobase-plugin-development skill để phát triển một plugin watermark cho NocoBase,
yêu cầu: phủ watermark bán trong suốt lên trang, hiển thị tên Người dùng đang đăng nhập, ngăn chặn rò rỉ qua chụp màn hình.
Định kỳ kiểm tra DOM của watermark có bị xóa hay không, nếu bị xóa thì sinh lại.
Trong trang cài đặt plugin hỗ trợ cấu hình nội dung watermark, độ trong suốt và cỡ chữ.
Tên plugin là @my-project/plugin-watermark

#AI đã làm gì

Sau khi nhận yêu cầu, AI sẽ tự động thực hiện theo các bước sau:

#1. Phân tích nhu cầu và xác nhận kế hoạch

AI sẽ phân tích trước plugin này cần những extension point nào của NocoBase, sau đó đưa cho bạn một kế hoạch phát triển. Ví dụ:

Phía server:

• Một bảng dữ liệu watermarkSettings, lưu cấu hình watermark (nội dung, độ trong suốt, cỡ chữ)
• Một API tùy chỉnh, đọc/ghi cấu hình watermark
• Cấu hình ACL, Người dùng đã đăng nhập có thể đọc, admin có thể ghi

Phía client:

• Trang cài đặt plugin, dùng form để cấu hình tham số watermark
• Logic render watermark, đọc cấu hình rồi phủ watermark lên trang
• Kiểm tra chống can thiệp, timer giám sát DOM watermark

Sau khi xác nhận kế hoạch, AI bắt đầu viết code.

#2. Tạo scaffold plugin

yarn pm create @my-project/plugin-watermark

AI đã sinh cấu trúc thư mục plugin chuẩn dưới packages/plugins/@my-project/plugin-watermark/.

#3. Viết code phía server

AI sẽ sinh các file sau:

• Định nghĩa bảng dữ liệu — Bảng watermarkSettings, bao gồm các Field text, opacity, fontSize
• API tùy chỉnh — Interface đọc và cập nhật cấu hình watermark
• Cấu hình ACL — Người dùng đã đăng nhập có thể đọc cấu hình watermark, admin có thể sửa

#4. Viết code phía client

• Trang cài đặt plugin — Một form Ant Design, cấu hình nội dung watermark, độ trong suốt (slider), cỡ chữ
• Render watermark — Tạo lớp phủ canvas/div toàn màn hình trên trang, hiển thị tên Người dùng đang đăng nhập
• Kiểm tra chống can thiệp — MutationObserver + timer kép, DOM bị xóa sẽ lập tức sinh lại

#5. Quốc tế hóa

AI tự động sinh language pack tiếng Trung và tiếng Anh, bạn không cần thao tác thêm:

• src/locale/zh-CN.json — Bản dịch tiếng Trung
• src/locale/en-US.json — Bản dịch tiếng Anh

#6. Enable plugin

yarn pm enable @my-project/plugin-watermark

Sau khi enable, mở trang NocoBase, bạn sẽ thấy watermark phủ lên trên nội dung.

#Toàn bộ quá trình mất bao lâu

Từ lúc nhập prompt đến lúc plugin có thể dùng, khoảng 3-5 phút. AI đã hoàn thành các công việc sau:

#Muốn làm thêm nhiều plugin nữa?

Plugin watermark chủ yếu liên quan đến render frontend và lưu trữ backend đơn giản. Nếu bạn muốn tìm hiểu AI còn có thể giúp bạn làm những việc gì — như Block tùy chỉnh, liên kết bảng dữ liệu phức tạp, mở rộng workflow, v.v. — có thể xem Các khả năng được hỗ trợ.

#Liên kết liên quan

• Bắt đầu nhanh với AI Development Plugin — Bắt đầu nhanh và tổng quan các khả năng
• Các khả năng được hỗ trợ — Tất cả những việc AI có thể giúp bạn, kèm prompt mẫu
• Phát triển Plugin — Hướng dẫn đầy đủ về phát triển plugin NocoBase
• NocoBase CLI — Công cụ dòng lệnh để cài đặt và quản lý NocoBase