Giao diện

Kiến trúc Client ​

Client Digiforce là SPA React dùng @digiforce-nc/client. Trang này mô tả cấu trúc bên trong client, hệ thống manager, provider chain, và cách plugin client hoạt động. Đọc trước Tổng quan hệ thống để nắm boundary.

1) Application - trung tâm client ​

2) Constructor flow ​

Khi tạo Application, các bước chính theo thứ tự:

  1. RequireJS - init hoặc reuse window.requirejs; bind defineGlobalDeps.
  2. Reactive state - loading, maintaining, error, maintained.
  3. APIClient - tạo axios wrapper, gắn apiClient.app = this.
  4. Managers - RouterManager → SchemaSettingsManager → PluginManager → SchemaInitializerManager → DataSourceManager.
  5. UI core - uiCore + register ApplicationWidget.
  6. Providers - addDefaultProviders() + addReactRouterComponents() + user providers.
  7. WebSocketClient - kết nối realtime.
  8. PluginSettingsManager - màn cấu hình plugin trong admin.
  9. Listeners - token sync, maintaining end, i18n language change.

3) Provider chain ​

addDefaultProviders() xây chuỗi React context bao bọc toàn app:

Plugin thêm provider bằng app.addProviders(...) - sẽ được nối vào cuối chuỗi.

Context keys chính: app, routeRepository, appInfo, api, i18n, router, documentTitle, route, location, pageInfo.

4) RouterManager - route tree động ​

RouterManager cho phép route key dạng dot-path (admin.settings.acl) và build thành tree route React Router.

  • Plugin thêm route: app.router.add('admin.myPlugin', { path: '/admin/my-plugin', Component }).
  • Route tree resolve thành nested React Router config khi mount().
  • Hỗ trợ element, Component, lazy import.

5) PluginManager (client) ​

Hai nguồn plugin:

Static plugins ​

Bundle sẵn, truyền vào _plugins khi tạo PluginManager. Luôn đi qua initStaticPlugins → add() → afterAdd().

Remote plugins ​

Khi loadRemotePlugins === true:

  1. Client gọi API pm:listEnabled.
  2. getPlugins() tải bundle (requirejs hoặc dynamic import).
  3. Mỗi plugin: add(pluginClass, info) → afterAdd().

Load sequence ​

Lỗi trong pm.load() hoặc uiConfig.load() → LOAD_ERROR hiển thị trong UI.

6) Schema system ​

SchemaSettingsManager ​

Đăng ký mục settings cho block/field - hiển thị menu cấu hình trong UI builder. Plugin gọi schemaSettingsManager.addItem(name, config).

SchemaInitializerManager ​

Đăng ký mục initializer - nút "Thêm block / action" trong UI builder. Plugin gọi schemaInitializerManager.add(name, config).

UI Schema Renderer ​

UI Schema là JSON mô tả cây component. Renderer đọc schema → resolve component từ component map → render React tree. Schema lưu trong database, thay đổi runtime không cần rebuild.

7) DataSourceManager (client) ​

Namespace client, khác DataSourceManager server.

  • Quản lý metadata data source phía client.
  • Chọn source cho từng request (gửi header x-data-source).
  • Cung cấp collection metadata cho UI (field types, relations) - phục vụ form builder, filter, display.

8) Giao tiếp: APIClient + WebSocketClient ​

APIClient ​

  • Wrapper axios; gắn token (bearer), base URL, interceptor.
  • Plugin có thể thêm interceptor: apiClient.axios.interceptors.request.use(...).
  • Các method: request(), resource(name).action(params).

WebSocketClient ​

  • Duy trì kết nối WS với server.
  • Nhận trạng thái: maintaining (bảo trì), notification, refresh.
  • Client auto hiển thị UI maintaining khi nhận signal.

9) Mount - render ứng dụng ​

Application.mount(containerOrSelector):

  1. getRootComponent() - build component tree từ provider chain + router.
  2. createRoot(container).render(<Root />).

Application.getRootComponent():

  1. Wrap providers: compose(this.providers).
  2. Component gốc lắng nghe loading / error / maintaining state.
  3. Khi loading = false → render router output.

Đọc tiếp ​