Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0235phút ước tínhThực chiến · Builder / Full-Stack

2. Dựng Giao Diện Kanban Board Kéo Thả (Drag & Drop) Đồng Bộ Realtime

Tạo giao diện kéo thả mượt mà với 5 cột trạng thái và đồng bộ tức thời giữa nhiều người dùng qua WebSocket.

🗂️ Các Tính Năng Cốt Lõi Của Kanban Board

Kéo thả mượt mà (HTML5 Drag & Drop): Kéo thẻ task chuyển giữa các cột: Backlog $\rightarrow$ Todo $\rightarrow$ In Progress $\rightarrow$ In Review $\rightarrow$ Done.
Thao tác nhanh (Quick Actions): Bấm vào thẻ để mở Modal xem chi tiết, đổi người phụ trách, gắn nhãn (Tags) và bình luận.
Đồng bộ Realtime: Khi PM đổi trạng thái task, màn hình của nhân viên tự động nhảy sang cột mới trong 0.1 giây mà không cần bấm F5 tải lại trang.

 example.py
// LẮNG NGHE SỰ KIỆN SUPABASE REALTIME ĐỂ CẬP NHẬT KANBAN TỨC THÌ
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const channel = supabase
  .channel('public:tasks')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'tasks' }, (payload) => {
    console.log('Task thay đổi:', payload);
    updateKanbanState(payload); // Tự động cập nhật DOM trên màn hình
  })
  .subscribe();

📦 Sản phẩm thực hành bài 2

1 Màn hình Kanban Board hoàn chỉnh có chức năng kéo thả và lắng nghe Realtime WebSocket.

Thực hành

Thực hành và tự đánh giá

Mở ứng dụng trên 2 tab trình duyệt khác nhau, kéo 1 task trên tab A và kiểm tra xem tab B có tự động cập nhật ngay lập tức không.

🏢 BẠN MUỐN TRIỂN KHAI CHO CẢ PHÒNG BAN / DOANH NGHIỆP?

Đề Xuất Công Ty Tài Trợ & Đào Tạo In-House Trọn Gói

AI Tinh Gọn hỗ trợ khảo sát hiện trạng, kèm 1-1 on-premise bảo mật dữ liệu, setup hạ tầng riêng và xuất hóa đơn VAT hợp pháp cho doanh nghiệp.

📥 Tải Mẫu Đề Xuất Gửi Sếp → Đăng Ký Tư Vấn Doanh Nghiệp →

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.