Thử Thách Học Điều Mới 12 Ngày Cùng AI · 100% Thực hành tác nghiệp (Show, Don't Tell) · 0đ Miễn phí trọn đời.
Ngày 08 / 12
Ước tính: 15–20 phút đọc · 30–45 phút thực hành
Ngày 08: Tư Duy Thiết Kế Ứng Dụng Cho Người Không Chuyên Lập Trình
Không 'mò mẫm gõ mã': Trở thành tổng công trình sư dẫn dắt AI xây dựng phần mềm chuẩn mực
🎯 Mục Tiêu Cốt Lõi Hôm Nay
- Hiểu đúng bản chất của Vibe Coding: Không phải đoán mò may rủi, mà là kỹ năng đặc tả bài toán rõ ràng (Spec-driven Development).
- Cách viết bản mô tả tính năng (PRD) và phân tách một ứng dụng phức tạp thành các mẩu công việc nhỏ AI dễ hoàn thành.
- Làm quen với các công cụ nền tảng thiết yếu: Quản lý phiên bản mã nguồn với Git, sử dụng dòng lệnh cơ bản và đọc nhật ký lỗi.
🧠 Nguyên Lý Nền Tảng & Bản Chất
- Phương pháp phát triển dựa trên tài liệu đặc tả (Spec-driven Development): Nghĩ rõ cấu trúc trước khi sinh mã.
- Nguyên lý chia để trị (Modular Architecture): Giữ cho từng module nhỏ gọn để AI không bị quá tải cửa sổ ngữ cảnh.
- Kỹ thuật gỡ lỗi theo chu kỳ (Debug Loop): Sao chép chính xác nhật ký lỗi (Terminal Logs) để AI phân tích nguyên nhân gốc thay vì sửa chắp vá.
Thực hành tác nghiệp
🛠️ Thực hành 08: Khởi Tạo Bộ Khung Ứng Dụng Web Quản Lý Công Việc Đầu Tiên
Các bước triển khai chi tiết:
- Khởi tạo kho chứa mã nguồn Git và tạo tệp `.gitignore` chuẩn.
- Gửi câu lệnh để AI soạn thảo tệp đặc tả `PRD.md` cho ý tưởng phần mềm của bạn.
- Yêu cầu AI sinh mã khung sườn giao diện ban đầu dựa trên đúng bản đặc tả đã duyệt.
- Thực hiện commit đầu tiên lên Git: `git add . && git commit -m 'feat: initial project spec and scaffolding'`.
📦 Sản phẩm bàn giao sau ngày hôm nay: Mã nguồn ứng dụng web được khởi tạo ngăn nắp, quản lý phiên bản bằng Git và chạy mượt mà trên máy tính cá nhân.
# 1. Khởi tạo Git Repo và thiết lập nhánh chính
mkdir -p my-fullstack-app && cd my-fullstack-app
git init
git branch -M main
# 2. Tạo file chặn rò rỉ mã bí mật ngay từ commit đầu tiên
cat << 'EOF' > .gitignore
.env
.env.local
node_modules/
__pycache__/
*.db
.DS_Store
EOF
🤖 Prompt Mẫu Giao Việc Cho AI (Production Prompt)
Sẵn dùng với Claude / Cursor / ChatGPT
Tôi muốn bạn đóng vai trò Kỹ sư Phần mềm Trưởng (Lead Software Engineer).
Tôi muốn xây dựng ứng dụng: [Mô tả ứng dụng, ví dụ: Web App theo dõi nhiệm vụ và tiến độ dự án nội bộ].
Chúng ta sẽ làm việc theo phương pháp Spec-driven Vibe Coding:
1. Hãy giúp tôi soạn thảo tệp `PRD.md` đặc tả: Đối tượng sử dụng, Luồng người dùng (User Flow), và 3 tính năng cốt lõi MVP.
2. Thiết kế bản đồ kiến trúc thư mục dự án tinh gọn.
3. DỪNG LẠI sau khi viết xong PRD.md để tôi duyệt trước, TUYỆT ĐỐI CHƯA viết mã nguồn vội.
# PRD.md — TÀI LIỆU ĐẶC TẢ YÊU CẦU SẢN PHẨM MẪU (MVP)
## 1. Mục Tiêu Sản Phẩm
Một bảng điều khiển quản lý công việc tinh gọn cho nhóm 3-5 người, cho phép tạo việc, phân công và kéo thả trạng thái.
## 2. Các Màn Hình Cốt Lõi
- Màn hình 1: Trang đăng nhập / đăng ký qua Email.
- Màn hình 2: Bảng Kanban 3 cột (Cần làm -> Đang làm -> Hoàn thành).
- Màn hình 3: Bộ lọc công việc theo mức độ ưu tiên.
## 3. Ngăn Xếp Kỹ Thuật (Tech Stack)
- Frontend: HTML5, CSS Variables, Vanilla JS (hoặc React/Tailwind).
- Backend & Database: Supabase / PostgreSQL.Cảnh báo & Bắt bệnh
💡 AI sinh ra một file code khổng lồ hàng nghìn dòng rồi bị lỗi: Đây là lỗi phổ biến nhất của người mới Vibe Coding. Hãy áp dụng Quy Tắc Module Hóa: Yêu cầu AI tách riêng: `index.html` (chỉ chứa cấu trúc), `style.css` (chỉ chứa giao diện), và `app.js` (chỉ chứa logic sự kiện). Mỗi file không vượt quá 200 dòng.
📚 KHÓA HỌC CHUYÊN SÂU ĐỐI ỨNG
Vibe Coding: Xây Dựng Ứng Dụng AI
Bạn muốn tìm hiểu toàn diện mọi ngóc ngách của công nghệ này? Khóa học mở rộng đã có sẵn trên hệ thống.