TIỂU PHẨM L6-01: NHÓM CÔNG NGHỆ VÀ "VIBE CODING" — VIẾT ỨNG DỤNG KHÔNG VIẾT CODE 🎵

📍 Module: §22 (Vibe Coding — Lập trình bằng Ngôn ngữ Tự nhiên) | Level: L6 Engineer 🎓 Slide: L6 S3-S7 ⭐ Format: Demo — NV công nghệ tạo công cụ nội bộ bằng Vibe Coding trên hệ thống Artifacts mới, 0 dòng code tự gõ | 🎯 Bài học: Vibe Coding là gì / 3 nhóm công cụ (Artifacts mới: Claude Design, Dashboards beta, AI-powered artifacts; IDE; Claude Code đa bề mặt) / Hợp đồng lệnh cho code / Vòng lặp tinh chỉnh 5 bước ⏱ ~7 phút | Số vai: 2 NV (NV công nghệ, trưởng nhóm) + Vân Anh tổng kết

Comedy Tools: The Game (10 phút → ứng dụng chạy ngay trên màn hình!) + Mapping (lập trình truyền thống vs Vibe Coding) + Escalation (80% chạy được → sửa lỗi UTF-8 → hoàn thiện giao diện) + Get Out (ranh giới rõ ràng: công cụ nội bộ ✅ vs hệ thống thanh toán thật ❌)

Xưng hô cố định: NV công nghệ↔Trưởng nhóm: em/anh

BỐI CẢNH

[Phòng công nghệ, 9:00 sáng. Nhân viên công nghệ (CAS) cần tạo nhanh một bảng công cụ nội bộ giúp Kế toán (Nga) kiểm tra nhanh dung sai phí COD (≤ 5.000đ/đơn) trước khi nhập chính thức vào hệ thống. Thời hạn: cần mẫu thử ngay trong sáng nay.]

🎬 MÀN 1 — "Mô tả bằng ngôn ngữ tự nhiên, AI dựng ứng dụng"

NV CÔNG NGHỆ: (giải thích với Trưởng nhóm) Với các công cụ tiện ích nội bộ hoặc bảng theo dõi nhanh, giờ chúng ta dùng Vibe Coding (§22) — tức là mô tả rõ yêu cầu nghiệp vụ, luồng dữ liệu và giao diện bằng tiếng Việt chuẩn; Claude sẽ tự viết toàn bộ mã nguồn và hiển thị trực tiếp để mình chạy thử.

3 nhóm công cụ Vibe Coding hiện nay (Chuẩn 10/2026)

Hợp đồng lệnh (Prompt) cho Vibe Coding

Hãy tạo một ứng dụng web nội bộ (1 file HTML + CSS + JS thuần chạy trên Artifacts / trình duyệt) hỗ trợ Kế toán Vagataba kiểm tra nhanh bảng đối soát tiền thu hộ (COD) theo SOP V04.6.

1. CHỨC NĂNG NGHIỆP VỤ:
- Cho phép nhập hoặc dán danh sách đơn gồm: Mã đơn, Đơn vị vận chuyển, Tiền COD phải thu, Tiền thực nhận, Phí chênh lệch, Số ngày kể từ lúc giao thành công (T+).
- Tự động phân loại theo quy tắc Kế toán Vagataba:
  + Khớp 100% hoặc chênh lệch phí vận chuyển/COD ≤ 5.000 VNĐ/đơn → Gắn nhãn XANH "✅ Tự động khớp — Hạch toán TK 6418".
  + Chênh lệch > 5.000 VNĐ/đơn → Gắn nhãn ĐỎ "🔴 Cờ Đỏ — Kiểm tra lệch phí".
  + Quá hạn > T+3 chưa về tiền → Gắn nhãn ĐỎ "🔴 Quá hạn > T+3 — Đòi bưu cục lúc 09:30".
- Có nút Xuất kết quả ra file CSV.

2. THIẾT KẾ GIAO DIỆN:
- Tối ưu hiển thị trên cả màn hình máy tính và điện thoại (Mobile-first).
- Có nút chuyển Chế độ Sáng / Tối, bảng tổng hợp KPI đầu trang rõ ràng.

NV CÔNG NGHỆ: (bấm chạy trên Claude Artifacts) ...Chưa đầy 10 phút → giao diện ứng dụng hiện ra và chạy thử được ngay!

⚡ MÀN 2 — "Vòng lặp tinh chỉnh 5 bước (Iteration)"

NV CÔNG NGHỆ: (thử bấm nút xuất CSV trên mẫu thử V1, phát hiện lỗi) Khi mở file CSV bằng Excel trên máy Windows thì tiếng Việt bị lỗi font chữ. Em sẽ dùng vòng lặp tinh chỉnh từng bước một.

Mẫu lặp lại 5 bước để hoàn thiện ứng dụng

Vòng 1: "Tạo ứng dụng theo Hợp đồng lệnh" → Chạy đúng 80% luồng nghiệp vụ cơ bản
Vòng 2: "Sửa lỗi xuất file CSV tiếng Việt bị lỗi font trên Excel — hãy thêm mã BOM UTF-8 (\uFEFF) ở đầu file"
Vòng 3: "Thêm bộ lọc nhanh theo Đơn vị vận chuyển (GHN / GHTK / ViettelPost) và lọc riêng các đơn Cờ Đỏ"
Vòng 4: "Tối ưu giao diện điện thoại: cố định cột Mã đơn khi cuộn ngang trên màn hình nhỏ"
Vòng 5: "Thêm dòng kiểm tra tổng (Checksum) ở chân bảng để đối chiếu tổng tiền phải thu và thực nhận"

Khi nào NÊN và KHÔNG NÊN dùng Vibe Coding?

📋 Mở L6 Slide 3-7 — "Vibe Coding, Hệ thống Artifacts mới, Vòng lặp 5 bước & Ranh giới an toàn."

🎤 VÂN ANH TỔNG KẾT

[Vân Anh bước ra.]

🎤 VÂN ANH: Vibe Coding (§22) giúp rút ngắn khoảng cách từ ý tưởng nghiệp vụ đến một công cụ chạy thử từ nhiều ngày xuống chỉ còn 10–15 phút. Đặc biệt, hệ thống Claude Artifacts (nâng cấp ngày 16/09/2026) nay đã tích hợp sẵn Claude Design, Dashboards (beta) và AI-powered artifacts, cho phép tạo nhanh bảng điều khiển hoặc tiện ích nội bộ ngay trong khung chat.

Nhưng người làm kỹ thuật và quản lý ở cấp độ L6 luôn nhớ rõ ranh giới: Vibe Coding cực kỳ mạnh cho mẫu thử, dashboard và tiện ích nội bộ; còn khi đụng vào hệ thống Production, thanh toán hay dữ liệu cá nhân của khách hàng, bắt buộc phải tuân thủ quy trình kiểm thử, bảo mật và phê duyệt mã nguồn nghiêm ngặt.

Trong ngành: Vibe Coding (Lập trình bằng ngôn ngữ tự nhiên — thuật ngữ phổ biến từ Andrej Karpathy 2025), Rapid Prototyping (Tạo mẫu thử nhanh), Iterative Refinement (Tinh chỉnh lặp lại từng bước).

📋 3 Bài học

1. Vibe Coding = Mô tả nghiệp vụ chuẩn, AI viết mã nguồn: Nêu rõ đầu vào, quy tắc xử lý (như ngưỡng lệch ≤ 5.000đ/đơn hay > T+3) và giao diện mong muốn để có mẫu thử trong 10 phút.
2. Tinh chỉnh lặp lại 3–5 vòng: Bản đầu tiên giải quyết 80% khung chính; các câu lệnh ngắn tiếp theo giúp sửa lỗi kỹ thuật (như BOM UTF-8), thêm bộ lọc và khóa tổng kiểm tra (Checksum).
3. Giữ vững ranh giới bảo mật: Dùng cho công cụ nội bộ và mẫu thử ✅; tuyệt đối không đưa dữ liệu cá nhân chưa ẩn danh hoặc hệ thống thanh toán thật vào chạy tùy tiện ❌.

💬 Câu hỏi thảo luận

1. Trong phòng ban của bạn, có phép tính hay bảng kiểm quy tắc nào lặp đi lặp lại mỗi ngày có thể biến thành một tiện ích nhỏ trên Claude Artifacts hoặc Dashboards (beta) không?
2. Tại sao trong Vibe Coding, việc chia thành vòng lặp 3–5 bước tinh chỉnh lại hiệu quả và ít lỗi hơn việc nhồi nhét 20 yêu cầu phức tạp vào ngay câu lệnh đầu tiên?
3. Vì sao một tiện ích tạo bằng Vibe Coding dùng nội bộ rất tốt nhưng không được phép nối thẳng vào cổng thanh toán của khách hàng nếu chưa qua kiểm định bảo mật?

📹 KỊCH BẢN GỐC

Mapping nguyên bản → Vagataba

BVT Analysis

Tài liệu nội bộ Vagataba — V7.1 — 20/10/2026 Tiểu phẩm L6-01 — Nhóm Công Nghệ Và "Vibe Coding" Dẫn vào L6 Slide 3-7: Vibe Coding, Hệ thống Artifacts mới & Vòng lặp tinh chỉnh (§22)