🖥️
Frontend
Là phần nhìn thấy. Trong Kanban, đó là 3 cột, thẻ công việc, nút thêm, nút xóa.
✨ Dành cho mọi người - kể cả chưa biết code
Vibe Coding là gì?
Vibe coding là cách biến ý tưởng thành app bằng cách nói chuyện với AI. Người học không cần tự gõ từng dòng code, nhưng cần biết app gồm những phần nào để chỉ huy AI đúng hướng.
Công thức dễ nhớ: Ý tưởng rõ + yêu cầu nhỏ + kiểm tra liên tục = app chạy được.
Kanban App
● ● ●
To Do
Viết ý tưởng
Thiết kế màn hình
Doing
Tạo nút thêm task
Done
Tạo 3 cột
Người học
Mô tả app cần gì, kiểm tra kết quả.
→
AI coding
Viết code, sửa lỗi, đề xuất cách làm.
Một app web giống như một cửa hàng nhỏ
Người dùng chỉ thấy phần trước mặt. Nhưng phía sau còn có xử lý, lưu dữ liệu, đăng nhập và đưa app lên internet.
Frontend
Màn hình người dùng nhìn thấy
Nút, cột Kanban, form nhập task, màu sắc, bố cục, thao tác kéo thả.
↓
Kanban App
Một app nhỏ nhưng có đủ các phần quan trọng của vibe coding.
↑
Database
Kho lưu dữ liệu
Lưu task, người dùng, trạng thái, ngày tạo, ai là chủ sở hữu.
Auth
Cửa kiểm tra danh tính
Ai đang đăng nhập? Người đó có quyền xem, sửa, xóa gì?
Backend
Bộ não xử lý phía sau
Nhận yêu cầu, kiểm tra quyền, xử lý logic, nói chuyện với database.
Deploy
Đưa app lên internet
Từ chạy trên máy mình thành đường link để người khác truy cập.
6 khái niệm nền tảng
Chỉ cần nắm 6 khái niệm này, học viên đã có bản đồ trong đầu để giao việc cho AI rõ hơn.
⚙️
Backend
Là phần xử lý. Nó quyết định khi bấm nút thì app phải làm gì phía sau.
🗄️
Database
Là nơi lưu dữ liệu. Nếu không lưu đúng, tắt app là mất task.
🔐
Authentication
Là đăng nhập. App cần biết người đang dùng là ai.
🪪
Authorization
Là phân quyền. Admin được xóa, thành viên chỉ được sửa task của mình.
🌍
Deployment
Là đưa app lên mạng. Khi deploy xong, người khác có thể dùng qua một đường link.
Nhìn vào app Kanban là hiểu toàn bộ
Mỗi thứ trên màn hình đều tương ứng với một phần kỹ thuật phía sau. Học viên chỉ cần học cách gọi đúng tên.
Kanban Học AI
To Do 2
Chuẩn bị bài giảng
deadline: hôm nay
Tạo ví dụ frontend
người phụ trách: anh Phong
Doing 1
Test chức năng kéo thả
trạng thái: đang làm
Done 1
Tạo giao diện 3 cột
đã lưu vào database
Thấy được trên màn hình
Đây là frontend: cột, task, nút, form, màu sắc.
Bấm nút thì có xử lý
Đây là backend: thêm, sửa, xóa, chuyển trạng thái.
Tắt máy vẫn còn dữ liệu
Đây là database: lưu task để lần sau mở lại vẫn thấy.
Mỗi người thấy dữ liệu riêng
Đây là đăng nhập và phân quyền.
Gửi link cho học viên dùng
Đây là deployment: đưa app từ máy mình lên internet.
Khi bấm “Thêm task”, chuyện gì xảy ra?
Đây là luồng đơn giản nhất để học viên hiểu app không phải chỉ là cái màn hình đẹp.
Người dùng bấm nút
Frontend nhận thao tác: “Tôi muốn thêm một task mới.”
Gửi yêu cầu
Frontend gửi thông tin task đến backend qua API.
Kiểm tra quyền
Backend hỏi: “Người này đã đăng nhập chưa? Có được thêm task không?”
Lưu dữ liệu
Nếu hợp lệ, backend lưu task mới vào database.
Cập nhật màn hình
Frontend hiển thị task mới trong cột To Do.
Local và Cloud
Đây là điểm học viên rất hay nhầm: app chạy trên máy mình chưa chắc người khác dùng được.
💻 Local
App đang chạy trên máy cá nhân của mình.
- Phù hợp để thử nghiệm.
- Người khác thường chưa truy cập được.
- Tắt máy hoặc tắt server là app dừng.
☁️ Cloud
App được đưa lên máy chủ trên internet.
- Có thể gửi link cho người khác dùng.
- Cần cấu hình deploy, domain, dữ liệu.
- Cần chú ý bảo mật hơn.
Người học vibe coding cần làm gì?
Không cần thành lập trình viên ngay. Nhưng cần trở thành người chỉ huy AI có kiểm soát.
🎯
Nói rõ mục tiêu
App này làm cho ai? Giải quyết vấn đề gì? Chức năng nào quan trọng nhất?
🧩
Chia nhỏ yêu cầu
Đừng bắt AI làm cả app một lần. Làm giao diện trước, rồi thêm chức năng sau.
🧪
Test liên tục
Bấm thử, nhập thử, xóa thử, đăng nhập thử. Không test thì không biết app có đúng không.
🛡️
Giữ an toàn
Không công khai API key, mật khẩu, dữ liệu thật hoặc thông tin nhạy cảm khi chưa hiểu bảo mật.
Những lỗi tư duy cần tránh
Đây là phần giúp học viên có kỳ vọng đúng trước khi bắt đầu dùng Claude Code, Cursor, Lovable, Replit hoặc các công cụ tương tự.
❌ Hiểu sai
- AI làm hết, mình không cần hiểu gì.
- App hiện ra đẹp nghĩa là app đã đúng.
- Lỗi là chuyện của AI, mình không cần đọc.
- Làm app thật có khách hàng ngay từ lần đầu.
✅ Hiểu đúng
- AI viết code, con người định hướng và kiểm tra.
- Giao diện đẹp chỉ là bước đầu.
- Lỗi là tín hiệu để sửa đúng chỗ.
- Bắt đầu bằng prototype nhỏ, rồi nâng cấp dần.
Vibe coding không phải là phép màu. Nó là cách người không chuyên kỹ thuật học cách chỉ huy AI để tạo sản phẩm.
Khi học viên hiểu frontend, backend, database, đăng nhập, phân quyền và deploy, họ không còn “nhờ AI làm app” một cách mơ hồ. Họ bắt đầu biết giao việc, kiểm tra và cải tiến.