Giao diện
Hướng dẫn cài đặt — Mobile
Yêu cầu hệ thống
| Thành phần | Yêu cầu |
|---|---|
| Digiforce Server | Đang chạy, có thể truy cập từ thiết bị di động (qua internet hoặc mạng nội bộ) |
| Plugin ACL | Đã cài đặt (peer dependency — quản lý quyền truy cập mobile) |
| Plugin Localization | Đã cài đặt (peer dependency — hỗ trợ đa ngôn ngữ menu mobile) |
| Trình duyệt mobile | Chrome, Safari, hoặc trình duyệt hiện đại hỗ trợ ES6+ |
Bước 1: Kích hoạt Plugin
Truy cập Settings → Plugin Manager, tìm plugin-mobile và bật plugin. Khởi động lại server.
Bước 2: Cấu hình giao diện mobile
Sau khi kích hoạt, vào Settings → Mobile trên giao diện desktop để cấu hình:
Cấu hình Tab Bar
Tab bar là thanh điều hướng ở cuối màn hình mobile. Mỗi tab bao gồm:
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
| Icon | Biểu tượng từ Ant Design Icons | HomeOutlined, UnorderedListOutlined |
| Title | Tên hiển thị dưới icon | "Trang chủ", "Danh sách" |
| Page | Trang liên kết (UI schema) | Schema block đã cấu hình |
| Sort | Thứ tự hiển thị | 1, 2, 3... |
Mẹo
Tối đa 5 tab để đảm bảo UX tốt trên màn hình nhỏ. Các trang phụ nên đặt dạng page thay vì tab.
Các loại route
| Loại | Mô tả | Sử dụng khi |
|---|---|---|
tab | Tab hiển thị trên tab bar | Trang truy cập thường xuyên (tối đa 5) |
page | Trang phụ, truy cập từ menu hoặc link | Chi tiết, báo cáo, form |
link | Liên kết ngoài hoặc URL khác | Redirect đến hệ thống bên ngoài |
Cấu hình nội dung trang
Mỗi route liên kết đến một UI Schema — tương tự cách cấu hình trang desktop. Bạn có thể:
- Kéo thả block vào trang mobile
- Sử dụng Collection page để hiển thị danh sách/chi tiết bản ghi
- Tạo Custom page với các block tuỳ chỉnh
Bước 3: Phân quyền mobile
Plugin sử dụng hệ thống role-based access control:
| Quyền | Snippet | Mô tả |
|---|---|---|
| Quản trị mobile | ui.mobile | Tạo, sửa, xoá, sắp xếp mobile routes |
| Cấu hình hệ thống | pm.mobile | Xem danh sách routes, quản lý role ↔ route |
| Truy cập mobile | loggedIn | Bất kỳ user đã đăng nhập đều gọi được listAccessible |
Gán route cho role
Khi tạo route mới, route sẽ tự động được gán cho các role có allowNewMobileMenu = true (mặc định: admin, member). Bạn có thể thay đổi quyền truy cập từng route cho từng role trong Settings → Roles → Mobile Routes.
Bước 4: Truy cập từ điện thoại
Mở trình duyệt mobile và truy cập:
https://your-domain/mHệ thống tự động:
- Phát hiện thiết bị mobile bằng
react-device-detect - Load mobile router với basename
/m - Gọi
mobileRoutes:listAccessibleđể lấy danh sách route theo role hiện tại - Render giao diện mobile với
antd-mobilelayout và tab bar
Lưu ý
Giao diện mobile hoàn toàn độc lập với desktop. Cần cấu hình riêng các trang cho mobile — không tự động kế thừa cấu hình desktop.
Tích hợp đa ngôn ngữ
Plugin đăng ký tiêu đề route với plugin Localization (mobile-routes source). Khi admin thay đổi tiêu đề tab/page, hệ thống tự động đồng bộ vào bảng dịch.
Quản lý bản dịch tại Settings → Localization → Mobile Menu.
Thêm vào Home Screen (PWA)
Người dùng có thể thêm ứng dụng vào home screen điện thoại:
iOS (Safari):
- Mở
https://your-domain/mtrong Safari - Nhấn nút Share → Add to Home Screen
Android (Chrome):
- Mở
https://your-domain/mtrong Chrome - Nhấn menu ⋮ → Add to Home screen
Sau khi thêm, ứng dụng mở như app native (không có thanh URL trình duyệt).