@digiforce-nc/plugin-mobile

Plugin cung cấp giao diện mobile — layout riêng cho thiết bị di động, tab bar navigation, dynamic pages, và tích hợp JSBridge cho native features.

Plugin này làm gì?

Plugin tạo một ứng dụng mobile hoàn chỉnh chạy song song với desktop — router riêng (basename /m), layout tối ưu cho mobile, tab bar navigation, và trang động cấu hình từ admin.

Ba nhiệm vụ chính

#	Nhiệm vụ	Chi tiết
1	Mobile layout & navigation	Router `/m`, antd-mobile layout, tab bar, header back
2	Dynamic pages	Admin cấu hình trang mobile, gán route, phân quyền theo role
3	Native integration	JSBridge cho camera, GPS, push notification trong WebView

Kiến trúc

Luồng truy cập mobile

Mobile Router architecture

Route	Mô tả
`/m`	Entry point, redirect đến tab đầu tiên
`/m/page/:id`	Dynamic page (nội dung do admin cấu hình)
`/m/tab/:name`	Tab cụ thể

Database - collection mobileRoutes

Field	Mô tả
`type`	Loại route: `tab`, `page`, `link`
`title`	Tiêu đề hiển thị
`icon`	Icon cho tab bar hoặc menu
`schemaUid`	Reference đến UI schema (nội dung trang)
`parentId`	Route cha (nested navigation)

Server hooks & extensions

Hook / Extension	Mô tả
`mobileRoutes:afterCreate/Update/Destroy`	Đồng bộ routes khi admin thay đổi
`roles:afterSave`	Cập nhật mobile access khi role thay đổi
`listAccessible` action	Custom action lọc routes theo role hiện tại
Localization registration	Đăng ký translations cho mobile UI

Vòng đời plugin

ACL - Phân quyền

ACL snippet	Quyền	Mô tả
`ui.mobile`	Role-based	Quyền truy cập giao diện mobile
`pm.mobile`	Admin	Quyền cấu hình mobile routes

Desktop vs Mobile

Đặc điểm	Desktop	Mobile
Base path	`/`	`/m`
Layout	Antd (sidebar, header)	antd-mobile (tab bar, stack)
Components	antd	antd-mobile
Detection	Mặc định	react-device-detect auto-redirect

Ví dụ sử dụng API

Lấy mobile routes cho user

typescript

const response = await agent.resource('mobileRoutes').listAccessible();
const routes = response.body.data;
// [{ id: 1, type: 'tab', title: 'Trang chủ', icon: 'home' }, ...]

Tạo mobile route (admin)

typescript

await agent.resource('mobileRoutes').create({
  values: {
    type: 'tab',
    title: 'Báo cáo',
    icon: 'bar-chart',
    schemaUid: 'report-schema',
    sort: 3,
  },
});

Thành phần client

Thành phần	Mô tả
`MobileLayout` / `MobileTabBar`	Layout chính và tab bar (antd-mobile)
`MobileRouter`	Router với basename `/m`
`DynamicPage`	Render page từ UI schema
`JSBridge`	Interface native features (camera, GPS)
`MobileAdminSettings`	Settings cấu hình mobile routes (desktop)

Dependencies

Package	Vai trò
`antd-mobile`	UI component library cho mobile
`react-device-detect`	Phát hiện thiết bị mobile
`@digiforce-nc/plugin-acl`	Phân quyền mobile access
`@digiforce-nc/plugin-localization`	Đa ngôn ngữ cho mobile UI