Các mẫu và quy trình làm việc nâng cao với Vibe Coding

Bạn có thể xây dựng ứng dụng bằng Vibe Coding. Giờ hãy cùng tìm hiểu để lập trình nhanh chóng và đáng tin cậy hơn. Những mẫu nâng cao này là những gì các lập trình viên Vibe Code giàu kinh nghiệm sử dụng để xây dựng những dự án phức tạp mà không bị ngập trong lỗi.

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã học cách tăng cường độ bảo mật cho ứng dụng: Cơ sở dữ liệu thực, xác thực, xử lý lỗi và bảo mật. Giờ đây, bạn sẽ học các mẫu có thể mở rộng cho những dự án lớn, phức tạp hơn.

Mẫu 1: File quy tắc để đảm bảo tính nhất quán

Khi dự án phát triển, bạn sẽ lặp lại các hướng dẫn tương tự trong mọi prompt: "sử dụng TypeScript", "làm theo mẫu này", "đặt các thành phần vào /components". File quy tắc loại bỏ sự lặp lại này.

Cursor (.cursorrules trong thư mục gốc của dự án):

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp chuột vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

# Dự án: DevMarks Bookmark Manager
# Công nghệ sử dụng: Next.js 14, TypeScript, Tailwind CSS, Supabase

## Phong cách lập trình
- Luôn sử dụng TypeScript (không bao giờ dùng JavaScript)
- Sử dụng các thành phần chức năng với hooks
- Đặt tên thành phần theo kiểu PascalCase, tên file theo kiểu kebab-case
- Sử dụng Tailwind CSS cho tất cả các kiểu định dạng (không dùng CSS modules)

## Cấu trúc dự án
- Thành phần: /components/{feature-name}/{ComponentName}.tsx
- Trang: /app/{route}/page.tsx
- API: /app/api/{endpoint}/route.ts
- Kiểu dữ liệu: /types/{domain}.ts

## Quy tắc
- Sử dụng React Server Components theo mặc định
- Chỉ sử dụng 'use client' khi cần thiết (onClick, useState, v.v.)
- Luôn xử lý trạng thái load và lỗi
- Sử dụng Zod cho tất cả các xác thực biểu mẫu

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ dẫn đến kết quả mơ hồ — hãy cụ thể hơn.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Chọn gợi ý có hiệu quả cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các gợi ý có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ những lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

Claude Code (.claude/rules trong thư mục gốc dự án):

Khi làm việc trong dự án này:
- Sử dụng TypeScript cho tất cả các file
- Tuân theo cấu trúc thư mục hiện có
- Chạy thử nghiệm sau khi thực hiện thay đổi
- Cam kết sau mỗi tính năng hoạt động

Các file quy tắc được AI đọc trước mỗi lần tương tác — giống như việc cung cấp cho nó tài liệu về tiêu chuẩn code của nhóm.

✅ Kiểm tra nhanh: Bạn bắt đầu một cuộc thảo luận về tính năng mới mà không có file quy tắc. AI tạo ra JavaScript thay vì tiêu chuẩn TypeScript của dự án. Với file quy tắc, điều này có xảy ra không?

Câu trả lời: Không. File quy tắc chỉ định "Luôn sử dụng TypeScript" và được tự động bao gồm trong mọi tương tác của AI. Nếu không có nó, AI sẽ mặc định sử dụng bất cứ thứ gì có vẻ tự nhiên — thường là JavaScript. Các file quy tắc ngăn chặn những vấn đề về tính nhất quán này.

Mẫu 2: Kiến trúc đa file

Các ứng dụng nhỏ chỉ cần một hoặc hai file. Các ứng dụng lớn hơn cần cấu trúc. Yêu cầu AI lập kế hoạch kiến ​​trúc trước khi xây dựng:

Tôi đang xây dựng một công cụ quản lý dự án. Trước khi viết code, hãy lập kế hoạch kiến ​​trúc file:

Các tính năng:
- Xác thực người dùng
- CRUD dự án (tạo, đọc, cập nhật, xóa)
- Quản lý tác vụ trong dự án
- Phân công thành viên nhóm

Vui lòng đề xuất:
1. Cấu trúc thư mục
2. Các file quan trọng và trách nhiệm của chúng
3. Luồng dữ liệu giữa các thành phần
4. Thành phần nào là server và thành phần nào là client

Chưa cần viết code — chỉ cần lập kế hoạch.

Xem lại kế hoạch. Sau đó xây dựng từng tính năng một, tham khảo kiến ​​trúc.

Mẫu 3: Tích hợp API

Kết nối với các API bên ngoài là một nhiệm vụ lập trình phổ biến:

Tích hợp API OpenWeatherMap vào bảng điều khiển của tôi:

API key: được lưu trữ trong .env.local dưới dạng WEATHER_API_KEY
Endpoint: https://api.openweathermap.org/data/2.5/weather

Yêu cầu:
1. Tạo một tuyến API phía server tại /api/weather để chuyển tiếp yêu cầu
   (không bao giờ để lộ API key cho client)
2. Tạo một thành phần WeatherWidget hiển thị thành phố, nhiệt độ và điều kiện
3. Lấy dữ liệu khi load trang với cache 5 phút
4. Xử lý lỗi: hiển thị "Weather unavailable" nếu API bị lỗi
5. Trạng thái load: hiển thị khung sườn trong khi đang tìm nạp

Mẫu chính: Luôn luôn chuyển tiếp các API của bên thứ ba thông qua tuyến server của riêng bạn. Điều này giữ bí mật API key và cho phép bạn thêm cache, giới hạn tốc độ và xử lý lỗi ở cùng một nơi.

Mẫu 4: Kiểm thử ứng dụng Vibe Code

Kiểm thử đặc biệt có giá trị trong Vibe Coding vì bạn không thể xem xét thủ công từng dòng code:

Thêm các bài kiểm thử tự động cho trình quản lý bookmark của tôi:

1. Kiểm thử đơn vị (sử dụng Vitest):
   - Thêm bookmark cập nhật danh sách
   - Lọc theo tag hiển thị kết quả chính xác
   - Tìm kiếm khớp với tiêu đề, URL và tag

2. Kiểm thử tích hợp:
   - Đăng ký tạo người dùng mới
   - Đăng nhập chuyển hướng đến bảng điều khiển
   - Người dùng chưa được xác thực không thể truy cập /dashboard

Đặt các bài kiểm thử vào thư mục __tests__ bên cạnh thành phần mà chúng kiểm thử.

Sau khi viết các bài kiểm thử, hãy chạy chúng sau mỗi thay đổi do AI tạo ra. Một bài kiểm thử thất bại sẽ ngay lập tức cho bạn biết điều gì đã bị lỗi.

✅ Kiểm tra nhanh: AI thêm tính năng "lưu trữ bookmark" mới và bài kiểm thử "lọc theo tag" của bạn đột nhiên thất bại. Điều này cho bạn biết điều gì?

Câu trả lời: Tính năng lưu trữ đã thay đổi logic lọc — mặc dù bạn không yêu cầu điều đó. Các bài kiểm tra đã phát hiện ra một tác dụng phụ ngoài ý muốn. Nếu không có bài kiểm tra, bạn có thể đã không nhận thấy lỗi lọc cho đến khi người dùng báo cáo.

Mẫu 5: Biết khi nào nên tự viết code

Vibe coding không phải là câu trả lời cho mọi thứ. Nhận biết khi nào nên tự viết code:

Những lập trình viên Vibe Code giỏi nhất sử dụng cả hai phương pháp một cách linh hoạt — AI đảm nhiệm những công việc nặng nhọc, còn lập trình thủ công đảm bảo độ chính xác.

Từ Vibe Coding đến kỹ thuật agentic

Ngay cả Karpathy, người đã đặt ra thuật ngữ "vibe coding", giờ đây cũng nói rằng phương pháp này đang phát triển. Giai đoạn tiếp theo — "kỹ thuật agentic" — có nghĩa là các AI agent sẽ tự động thực hiện nhiều công việc hơn trong khi bạn đóng vai trò là người xem xét và đưa ra quyết định.

Những kỹ năng bạn đã học được trong khóa học này (giao tiếp rõ ràng, hướng dẫn có cấu trúc, gỡ lỗi, lập kế hoạch kiến ​​trúc) chính xác là những gì kỹ thuật agentic yêu cầu. Các prompt trở thành hướng dẫn cho agent. Việc gỡ lỗi trở thành việc xem xét code. Các nguyên tắc vẫn giống nhau.

Bài tập thực hành

1. Tạo một file quy tắc cho dự án của bạn (chọn định dạng phù hợp với công cụ của bạn)
2. Yêu cầu AI đề xuất kiến ​​trúc file cho một tính năng bạn muốn thêm
3. Thêm một bài kiểm tra tự động cho tính năng cốt lõi của bạn
4. Xác định một việc trong dự án của bạn mà việc viết code thủ công sẽ nhanh hơn — hãy thực hiện việc đó
5. Tích hợp một API công cộng miễn phí (thời tiết, báo giá, tin tức) bằng cách sử dụng mô hình proxy

Những điểm chính cần ghi nhớ

• File quy tắc loại bỏ các hướng dẫn lặp đi lặp lại — thiết lập một lần, áp dụng cho mọi prompt
• Lập kế hoạch kiến ​​trúc đa file trước khi xây dựng — xem lại kế hoạch trước
• Ủy quyền API của bên thứ ba thông qua các tuyến server để bảo vệ API key
• Các bài kiểm tra tự động là lưới an toàn của bạn — chúng phát hiện ra những gì bạn không thể xem xét thủ công
• Sử dụng lập trình cảm tính cho những công việc nặng nhọc, viết code thủ công để đạt độ chính xác — hãy thực tế
• Những kỹ năng này chuyển giao trực tiếp sang "kỹ thuật agentic" — bước tiến tiếp theo của phát triển có sự hỗ trợ của AI