• Tiếng Việt

      • Tổng quan

      Plugin phía client của NocoBase có thể làm rất nhiều việc: đăng ký trang mới, viết Component tùy chỉnh, gọi API backend, thêm Block và Field, thậm chí mở rộng nút Action. Tất cả các năng lực này đều được tổ chức thông qua một lối vào Plugin thống nhất.

      Nếu bạn đã có kinh nghiệm phát triển React, sẽ tiếp cận rất nhanh — phần lớn các tình huống chỉ là viết Component React thông thường, sau đó dùng các năng lực context mà NocoBase cung cấp (như gửi request, i18n) để kết nối với NocoBase. Chỉ khi bạn cần Component xuất hiện trong giao diện cấu hình trực quan của NocoBase, mới cần tìm hiểu FlowEngine.

      Lưu ý

      NocoBase đang chuyển từ client (v1) sang client-v2, hiện tại client-v2 vẫn đang được phát triển. Nội dung được giới thiệu trong tài liệu này dùng để trải nghiệm sớm, không khuyến nghị dùng trực tiếp cho môi trường sản xuất. Plugin phát triển mới hãy dùng thư mục src/client-v2/ và API của @nocobase/client-v2.

      Lộ trình học

      Khuyến nghị tìm hiểu phát triển Plugin client theo thứ tự sau, từ đơn giản đến phức tạp:

      Plugin (Lối vào) → Router (Trang) → Component (Component) → Context (Ngữ cảnh) → FlowEngine (Mở rộng UI)

      Trong đó:

      1. Plugin: Lớp lối vào của Plugin, đăng ký các tài nguyên như route, model trong các vòng đời như load().
      2. Router: Đăng ký route trang thông qua router.add(), đăng ký trang cài đặt plugin thông qua pluginSettingsManager.
      3. Component: Cái mà route mount chính là Component React. Mặc định viết bằng React + Antd là được, không khác gì phát triển frontend thông thường.
      4. Context: Trong Plugin có thể lấy context thông qua this.context, trong Component lấy thông qua useFlowContext(), để dùng các năng lực mà NocoBase cung cấp — gửi request (ctx.api), i18n (ctx.t), log (ctx.logger), v.v.
      5. FlowEngine: Nếu Component của bạn cần xuất hiện trong menu "Thêm Block / Field / Action", hỗ trợ người dùng cấu hình trực quan, thì cần dùng FlowModel để bọc.

      Bốn bước đầu đáp ứng được hầu hết các tình huống Plugin. Chỉ khi cần tích hợp sâu vào hệ thống cấu hình UI của NocoBase, mới cần đến bước thứ năm. Nếu không chắc dùng cách nào, có thể xem Component vs FlowModel.

      Chỉ mục nhanh

      Tôi muốn...Xem ở đâu
      Tìm hiểu cấu trúc cơ bản của Plugin clientPlugin
      Thêm một trang độc lậpRouter
      Thêm một trang cài đặt pluginRouter
      Viết một Component React thông thườngPhát triển Component
      Gọi API backend, sử dụng các năng lực tích hợp của NocoBaseContext → Năng lực phổ biến
      Tùy chỉnh kiểu ComponentStyles & Themes
      Thêm một Block mớiFlowEngine → Mở rộng Block
      Thêm một component Field mớiFlowEngine → Mở rộng Field
      Thêm một nút Action mớiFlowEngine → Mở rộng Action
      Không chắc dùng Component hay FlowModelComponent vs FlowModel
      Xem một Plugin hoàn chỉnh được làm như thế nàoVí dụ thực tế Plugin

      Liên kết liên quan