[Video] Hướng dẫn dùng Claude vibe coding tạo Dashboard CSV đa năng

Bạn có một file CSV xuất từ Excel hoặc phần mềm kế toán và muốn nhìn ra ngay tổng số, mức trung bình, ai đạt doanh số cao nhất hay nhóm nào chiếm tỷ trọng lớn nhất? Thay vì ngồi dựng biểu đồ thủ công hay làm công thức phức tạp trong Excel, bạn có thể nhờ Claude "vibe coding" một trang web Dashboard trực quan: chỉ cần tải file lên, hệ thống sẽ tự động quét cột, tính chỉ số KPI, vẽ biểu đồ và xuất báo cáo PDF chuẩn chỉ.

5 bước tạo Dashboard CSV phân tích dữ liệu bằng Claude

Bước 1: Mở Claude và gửi prompt tạo Dashboard

Truy cập claude.ai , mở một cuộc trò chuyện mới, dán prompt mô tả đầy đủ 3 phần: vai trò (Front-end Developer), yêu cầu kỹ thuật (sử dụng HTML, Tailwind CSS, PapaParse, Chart.js qua CDN) và giao diện Dashboard. Điểm mấu chốt của prompt này là yêu cầu xử lý dữ liệu động: trang web phải tự động nhận diện cột nhãn (tên người/danh mục) và cột số (doanh số/lượng) để bạn không phải chỉnh sửa tên cột trong file CSV trước khi tải lên.

Bước 2: Kiểm tra trang trong khung xem trước (Artifacts)

Claude sẽ xử lý và tạo một trang web chạy trực tiếp ở khung Artifacts bên phải. Hãy bấm nút "Dùng dữ liệu mẫu" để chạy thử giao diện. Trang sẽ tự động thực hiện 3 công việc:

• Nhận diện cột nhãn: Ưu tiên tìm các cột như "Họ và Tên", "Tên", "Sản phẩm", "Danh mục".
• Nhận diện cột số: Ưu tiên tìm các cột "Doanh số", "Lương", "Số lượng", "Giá".
• Làm sạch số liệu: Tự động loại bỏ đơn vị như VNĐ , $ , xử lý dấu chấm và dấu phẩy để tính toán chuẩn xác.

Nếu trang nhận diện chưa đúng ý bạn, hai ô thả xuống Cột nhãn và Cột giá trị trên giao diện cho phép bạn chuyển đổi thủ công ngay lập tức.

Bước 3: Tải file CSV thật và xem kết quả trực quan

Bấm nút "Chọn file CSV" hoặc kéo-thả file CSV của bạn vào khung làm việc. Ngay lập tức, Dashboard sẽ cập nhật:

3 thẻ KPI chính: Tổng giá trị, Giá trị trung bình và Giá trị cao nhất kèm nhãn dẫn đầu.

Biểu đồ thanh ngang: So sánh dữ liệu chi tiết giữa các mục.

Biểu đồ vòng tròn (Doughnut): Hiển thị tỷ trọng đóng góp của từng phần.

Bước 4: Yêu cầu Claude bổ sung nút In và Xuất PDF

Quay lại khung chat và yêu cầu Claude bổ sung hai nút "In báo cáo" và "Xuất PDF" nằm phía trên các thẻ KPI.

• In báo cáo: Tự động mở hộp thoại in khổ A4 của trình duyệt với giao diện tối ưu tiết kiệm mực.
• Xuất PDF: Tự động đóng gói dữ liệu và tải file báo cáo nhiều trang .pdf về máy tính của bạn.

Bước 5: Mở tab riêng và xuất file báo cáo an toàn

Khi bấm nút Xuất PDF, trình duyệt sẽ hiển thị hộp thoại hỏi xác nhận tải file về máy. Bạn chỉ cần bấm Save file để hoàn tất.

Lưu ý: Do cơ chế bảo mật của khung xem trước (Artifacts), một số trình duyệt có thể chặn hộp thoại in. Khi đó, bạn chỉ cần mở Artifacts ở một tab trình duyệt riêng để thực hiện in hoặc xuất PDF mượt mà.

Bộ Prompt mẫu để tinh chỉnh Dashboard CSV

Bạn có thể copy và dán tiếp các prompt dưới đây vào cuộc trò chuyện để nâng cấp Dashboard theo nhu cầu:

Prompt 1: Tạo Dashboard tổng quát từ đầu

"Bạn là một lập trình viên front-end có kinh nghiệm. Hãy tạo một ứng dụng web chỉ gồm một tệp HTML, dùng Tailwind CSS, PapaParse và Chart.js qua CDN, để làm dashboard phân tích file CSV. Xử lý dữ liệu: Tự động nhận diện cột nhãn và cột số dựa trên tiêu đề; làm sạch số (bỏ dấu chấm/phẩy, ký tự VNĐ, $). Giao diện: Có vùng kéo thả file CSV, nút dùng dữ liệu mẫu, 3 thẻ KPI (Tổng, Trung bình, Max) và 2 biểu đồ (thanh ngang, vòng tròn)."

Prompt 2: Bổ sung tính năng In báo cáo & Xuất PDF

"Hãy thêm hai nút 'In báo cáo' và 'Xuất PDF' cho dashboard hiện tại, áp dụng cho mọi file CSV người dùng tải lên. Báo cáo gồm tiêu đề, ngày xuất, các thẻ KPI, biểu đồ và bảng dữ liệu chi tiết."

Prompt 3: Thêm bộ lọc và tìm kiếm dữ liệu

"Hãy thêm vào dashboard một bảng hiển thị toàn bộ dữ liệu file CSV kèm ô tìm kiếm từ khóa và bộ lọc theo danh mục. Khi lọc, các thẻ KPI và biểu đồ phải tự động cập nhật theo."

Prompt 4: Kiểm tra chất lượng dữ liệu (Data Quality Check)

"Thêm phần 'Kiểm tra dữ liệu' hiển thị số dòng hợp lệ/bị bỏ qua và thêm công tắc 'Bỏ qua các dòng có giá trị bằng 0' để tính lại các thẻ KPI và biểu đồ."

Prompt 5: Xuất hình ảnh biểu đồ sắc nét

"Hãy thêm nút 'Tải ảnh biểu đồ' dưới mỗi biểu đồ trong dashboard để lưu biểu đồ thành file ảnh PNG nền trắng phục vụ chèn vào báo cáo."

Ví dụ cấu trúc file CSV mẫu để thử nghiệm

Bạn có thể lưu đoạn văn bản dưới đây thành tệp .csv (chọn mã hóa CSV UTF-8) để tải lên kiểm tra Dashboard:

Họ và Tên,Phòng Ban,Chức Vụ,Doanh Số Tháng (VNĐ),Lương Cơ Bản (VNĐ),Thưởng Doanh Số (VNĐ),Tổng Thu Nhập (VNĐ)

Nguyễn Văn An,Marketing,Trưởng phòng,45000000,18000000,4500000,22500000

Trần Thị Bình,Kinh doanh,Chuyên viên,85000000,12000000,8500000,20500000

Lê Hoàng Cường,Kinh doanh,Trưởng phòng,120000000,20000000,15000000,35000000

Phạm Thị Duyên,Nhân sự,Chuyên viên,0,11000000,1000000,12000000

Vũ Minh Em,Kỹ thuật,Kỹ sư trưởng,0,18000000,2000000,20000000

Đỗ Hoài Phương,Marketing,Chuyên viên,35000000,10500000,3500000,14000000

Hoàng Văn Giang,Kinh doanh,Chuyên viên,95000000,12500000,9500000,22000000

Bùi Thị Hà,Kỹ thuật,Kỹ sư,0,15000000,1500000,16500000

Đặng Quốc Hùng,Kinh doanh,Chuyên viên,110000000,13000000,11000000,24000000

Ngô Bích Ngọc,Nhân sự,Trưởng phòng,0,19000000,1000000,20000000

Lưu ý quan trọng khi Vibe Coding

Bảo mật dữ liệu nhạy cảm: Bảng lương hay thông tin cá nhân là dữ liệu riêng tư. Khi thử nghiệm Vibe Coding trên các công cụ AI, hãy sử dụng dữ liệu mẫu hoặc dữ liệu đã ẩn danh.

Lưu lại phiên bản chạy tốt: Trước khi yêu cầu Claude chỉnh sửa lớn, hãy sao chép hoặc tải file HTML hiện tại về máy để làm bản dự phòng.

Kết luận

Dùng Claude để vibe coding biến việc tạo một Dashboard phân tích dữ liệu từ chỗ tốn nhiều thời gian thành quy trình 5 bước mạch lạc: Gửi prompt ➔ Kiểm tra Artifacts ➔ Tải CSV ➔ Thêm nút In/PDF ➔ Lưu báo cáo. Chỉ cần mô tả rõ ràng nhu cầu, bạn sẽ có ngay một công cụ phân tích dữ liệu gọn nhẹ, phục vụ hiệu quả cho công việc hàng ngày.