[Open Source] #150 - Dashwise: Hệ quản trị Homelab Dashboard hiện đại với Next.js 15, Pocketbase và kiến trúc Worker-Driven mạnh mẽ
Trong hệ sinh thái tự lưu trữ (Self-hosting), việc duy trì một cái nhìn tổng quan về hàng chục dịch vụ chạy trên Docker, theo dõi uptime và quản lý tin tức RSS thường đòi hỏi nhiều công cụ rời rạc. Dashwise ra đời như một nền tảng Dashboard "All-in-one" thế hệ mới, không chỉ đơn thuần là tập hợp các đường dẫn (bookmarks) mà còn tích hợp sâu các khả năng giám sát, lập chỉ mục tìm kiếm thông minh và hệ thống chuyển tiếp thông báo tập trung.
Dưới góc độ kỹ thuật, Dashwise là một minh chứng xuất sắc cho sự kết hợp giữa Next.js 15, kiến trúc BaaS (Backend-as-a-Service) với Pocketbase và mô hình Decoupled Worker để xử lý các tác vụ nặng.
Github: https://github.com/dashwise-arch/dashwise
🛠️ 1. Nền tảng công nghệ: Bleeding Edge Stack
Dashwise tận dụng tối đa các công nghệ web hiện đại nhất hiện nay:
- Frontend & Edge API (Next.js 15): Sử dụng App Router và React Server Components để tối ưu hóa tốc độ tải trang. Toàn bộ logic giao diện được viết bằng TypeScript và Tailwind CSS 4.
- Backend-as-a-Service (Pocketbase): Thay vì dùng các RDBMS truyền thống, Dashwise sử dụng Pocketbase (viết bằng Go). Điều này giúp đóng gói toàn bộ Database (SQLite), Auth, và File Storage vào một file thực thi duy nhất, cực kỳ phù hợp cho các thiết bị cấu hình thấp như Raspberry Pi.
- Background Processing (Node.js & Fastify): Một container
jobsriêng biệt đảm nhận vai trò Worker, xử lý các tác vụ tiêu tốn tài nguyên mà không làm nghẽn luồng xử lý UI của người dùng. - Visual Engine: Tích hợp Shadcn/UI kết hợp với Framer Motion để tạo ra một giao diện Dashbord mượt mà và đậm chất thẩm mỹ.
🏗️ 2. Trụ cột kiến trúc: Decoupled Architecture và User-Centric Config
Kiến trúc của Dashwise tập trung vào tính linh hoạt và khả năng cô lập lỗi:
- Decoupled Worker Model: Các tác vụ như kiểm tra Uptime (Monitoring), cào dữ liệu RSS (News Feed), và lập chỉ mục (Search Indexing) được tách rời hoàn toàn khỏi Web App chính. Điều này đảm bảo trang dashboard luôn phản hồi ngay cả khi hệ thống đang xử lý hàng nghìn yêu cầu mạng ở phía sau.
- Schema-less User Configuration: Mỗi người dùng sở hữu một cấu hình JSON riêng biệt được lưu trữ trong Pocketbase. Tư duy thiết kế này cho phép người dùng tùy biến không giới hạn layout, widget và các integration mà không cần thay đổi cấu trúc bảng database.
- Dynamic Widget Orchestration: Sử dụng cơ chế
dynamic importcủa Next.js để tải các Widget theo nhu cầu (on-demand). Điều này giúp giảm thiểu đáng kể bundle size JavaScript ban đầu, tăng tốc độ First Contentful Paint.
🔄 3. Workflow: Luồng xử lý dữ liệu và Giám sát (Sequence Diagram)
Sơ đồ mô tả cách Dashwise điều phối giữa giao diện người dùng và hệ thống Worker chạy ngầm:
⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn
- Spotlight Command Bar: Tích hợp
cmdkvàFuse.jsđể xây dựng thanh tìm kiếm lệnh (Command Palette) mạnh mẽ. Người dùng có thể thực hiện phím tắt, chuyển đổi theme, hoặc tìm kiếm phim trực tiếp từ Jellyfin ngay tại màn hình chính. - Notification Forwarding with Shoutrrr: Thư mục
jobstích hợp công cụ Shoutrrr, cho phép Dashwise trở thành một cổng thông báo tập trung. Nó có thể nhận thông báo từ bất kỳ dịch vụ nào qua Webhook và chuyển tiếp đến Discord, Telegram, hoặc Slack dựa trên cấu hình người dùng. - Advanced Wallpaper Processing: Sử dụng thư viện sharp ở server-side để tự động nén, thay đổi kích thước và tối ưu hóa ảnh nền lên đến độ phân giải 4K, đảm bảo trải nghiệm thị giác đỉnh cao nhưng vẫn tiết kiệm băng thông.
- Uptime Runner Isolation: Thuật toán giám sát được thiết kế theo mô hình Indexer-Runner. Indexer quét các link từ cấu hình người dùng, trong khi Runner thực hiện việc kiểm tra. Cách tiếp cận này cho phép hệ thống dễ dàng mở rộng quy mô giám sát hàng nghìn link cùng lúc.
⚖️ 5. So sánh chiến lược
| Tiêu chí | Dashwise | Homarr | Heimdall |
|---|---|---|---|
| Công nghệ Core | Next.js 15 + Pocketbase | Next.js + Redis/Sqlite | PHP (Laravel) |
| Kiến trúc | Worker-based (Tách rời) | Monolith | Monolith |
| Giám sát Uptime | Có (Tích hợp sâu) | Có | Cơ bản |
| Tìm kiếm tập trung | Spotlight Search (Mạnh) | Search đơn giản | Không có |
| Dung lượng cài đặt | Thấp (Pocketbase cực nhẹ) | Trung bình | Trung bình |
| Thông báo (Push) | Có (Forwarding qua Shoutrrr) | Không chuyên sâu | Không có |
✅ Kết luận: Tại sao Dashwise là tiêu chuẩn mới cho Homelab?
Dashwise chứng minh rằng một Dashboard tốt không chỉ dừng lại ở việc hiển thị biểu tượng ứng dụng. Bằng cách tách biệt phần xử lý logic nặng nề sang một Worker riêng và sử dụng một backend linh hoạt như Pocketbase, dự án đã tạo ra một "hệ điều hành" quản trị Homelab thực thụ: nhanh, mạnh và cực kỳ ổn định.
Đối với các kỹ sư Fullstack, nghiên cứu Dashwise mang lại giá trị về:
- Cách vận hành Next.js 15 kết hợp với BaaS.
- Kỹ thuật xây dựng Hệ thống Worker/Cron ổn định trong Docker.
- Tư duy thiết kế Tìm kiếm Spotlight và quản lý thông báo đa kênh.
All rights reserved
