Hướng dẫn VibeCoding cho Người Mới Bắt Đầu (Starter)
Tài liệu này cung cấp một bộ công nghệ và cấu trúc được đề xuất dành riêng cho những người mới bắt đầu làm quen với phương pháp phát triển VibeCoding (>85% AI). Mục tiêu là đơn giản hóa lựa chọn ban đầu, giúp bạn tập trung vào việc học cách tương tác hiệu quả với AI.
Lựa chọn Công nghệ Khuyến nghị cho Starter
Để bắt đầu, chúng tôi khuyên bạn nên chọn một trong các bộ công nghệ sau đây, vì chúng có cấu trúc rõ ràng, hỗ trợ typing tốt và thân thiện với việc tạo mã bằng AI.
1. Backend
Chọn một ngôn ngữ và framework phù hợp với bạn hoặc dự án:
- Node.js:
- NestJS (v11 trở lên): Cấu trúc rất chặt chẽ, dựa trên TypeScript, lý tưởng để AI học theo các pattern có sẵn (modules, controllers, services).
- Honojs: Tối giản, nhanh, rất phù hợp cho API hoặc ứng dụng Edge Functions (ví dụ: trên Cloudflare Workers). Cần có cấu trúc dự án tốt do tính tối giản của nó.
- PHP:
- Laravel (v11 trở lên) với PHP 8+ Strong Types: Sử dụng các tính năng typing mạnh mẽ của PHP 8+ trong Controllers, Form Requests, Services để AI tạo mã chính xác hơn.
- Python:
- FastAPI: Tự động tạo tài liệu API, dựa trên type hints của Python. Yêu cầu: Sử dụng type hints một cách nhất quán để đạt hiệu quả cao nhất với VibeCoding.
2. Frontend
Chọn một framework dựa trên sở thích hoặc yêu cầu dự án:
- Nuxt 3 (Dựa trên Vue.js): Cấu trúc rõ ràng (pages, layouts, composables), phù hợp nếu bạn quen thuộc với Vue.js.
- Next.js (Dựa trên React): Cấu trúc tương tự Nuxt (pages hoặc app router), phù hợp nếu bạn quen thuộc với React.
Lưu ý: Cả Nuxt 3 và Next.js đều nên được sử dụng với TypeScript để tối ưu hóa VibeCoding.
3. Mobile (Nếu cần)
Chọn một framework:
- Flutter (Dart): Ngôn ngữ Dart có strong typing, mô hình UI khai báo giúp AI dễ dàng tạo các widget.
- React Native (với TypeScript): Sử dụng các nguyên tắc React. Yêu cầu: Sử dụng TypeScript là điều bắt buộc để VibeCoding hiệu quả.
Lựa chọn IDE có hổ trợ AI Agent
Bất kỳ IDE nào có hổ trợ Agent mode đều có thể thực hiện VibeCoding. Điều quan trọng là cần phải setup context cho từng loại IDE: user rule, project rules, documents,...
Một số IDE khuyến nghị để bắt đầu gồm:
- VSCode + AugmentCode: Dùng trial 14 ngày. Inline Assist và Completion chưa tốt nhưng Agent rất tốt.
- Cursor: Cũng là lựa chọn tốt để bắt đầu.
- Windsurf: Cũng là lựa chọn tốt để bắt đầu.
Cấu trúc Thư mục Khuyến nghị: Dựa trên Tính năng (Feature-Based)
Thay vì nhóm các tệp theo loại kỹ thuật (controllers, services), hãy nhóm chúng theo tính năng hoặc miền nghiệp vụ (domain). Chúng tôi đề xuất sử dụng thư mục gốc tên là modules (hoặc features, domains).
src/
├── modules/ # Hoặc features, domains
│ │
│ ├── users/ # Module quản lý Người dùng
│ │ ├── user.controller.ts # Controller xử lý request HTTP
│ │ ├── user.service.ts # Logic nghiệp vụ
│ │ ├── user.entity.ts # Định nghĩa thực thể/model
│ │ ├── user.dto.ts # Data Transfer Objects (cho request/response)
│ │ ├── user.routes.ts # (Nếu không dùng framework tự động định tuyến)
│ │ └── user.module.ts # (Trong NestJS hoặc cấu trúc tương tự)
│ │
│ ├── products/ # Module quản lý Sản phẩm
│ │ ├── product.controller.ts
│ │ ├── product.service.ts
│ │ ├── product.entity.ts
│ │ └── ... (các tệp khác)
│ │
│ └── orders/ # Module quản lý Đơn hàng
│ └── ... (các tệp tương tự)
│
└── shared/ # Các thành phần dùng chung
├── config/
├── middleware/
├── utils/
└── types/ # Các type dùng chungLợi ích: Cấu trúc này cung cấp ngữ cảnh rõ ràng cho AI khi làm việc trên một tính năng cụ thể, giúp tạo mã nhất quán và dễ bảo trì hơn.
Nguyên tắc Chính Cần Nhớ
- Typing là Vua: Luôn sử dụng TypeScript hoặc strong types (PHP 8+, Python type hints, Dart) bất cứ khi nào có thể. Đây là yếu tố quan trọng nhất để AI hoạt động hiệu quả.
- Prompt Rõ ràng: Cung cấp hướng dẫn chi tiết và ngữ cảnh cho AI.
- Review Cẩn thận: Luôn kiểm tra lại mã do AI tạo ra. AI là trợ lý, không phải người thay thế hoàn toàn.
Chúc bạn có trải nghiệm VibeCoding hiệu quả!