Hướng dẫn VibeCoding cho Dự án Đã Tồn tại

Tài liệu này hướng dẫn cách áp dụng VibeCoding (phát triển với >85% hỗ trợ của AI) vào các dự án đã tồn tại. Việc tích hợp AI vào codebase hiện có đòi hỏi phương pháp có hệ thống và cẩn trọng hơn so với dự án mới.

Thách thức khi áp dụng VibeCoding vào dự án cũ

• Thiếu typing: Nhiều codebase cũ sử dụng JavaScript thuần túy, PHP không có type hints, Python không dùng type annotations.
• Cấu trúc không đồng nhất: Mỗi phần của dự án có thể tuân theo các quy ước khác nhau.
• Tài liệu hạn chế: Thiếu tài liệu về quy tắc nghiệp vụ, kiến trúc hệ thống.
• Code "ma thuật": Nhiều framework cũ dựa vào quy ước ngầm, convention over configuration, khó cho AI hiểu.
• Sợ thay đổi: Ngại sửa đổi code đang hoạt động, đặc biệt là khi không có test đầy đủ.

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.

Chiến lược phân tích và chuẩn bị codebase

1. Tìm hiểu codebase

• Tạo bản đồ dự án:
  • Liệt kê tất cả các module/thành phần chính
  • Hiểu luồng dữ liệu và quy trình nghiệp vụ
  • Xác định các thành phần phức tạp nhất
• Đánh giá chất lượng mã:
  • Kiểm tra độ bao phủ của test
  • Đánh giá mức độ sử dụng typing
  • Xác định những phần mã khó hiểu/phức tạp

2. Chuẩn bị tài liệu cho AI

• Tạo "Sổ tay codebase" cho AI, bao gồm:
  • Cấu trúc thư mục và trách nhiệm của các thành phần
  • Quy ước đặt tên đang được sử dụng
  • Luồng xử lý chính và quy tắc nghiệp vụ quan trọng
  • Các khuôn mẫu (pattern) đang được áp dụng
• Tạo bộ sưu tập mẫu (snippets) từ codebase hiện tại làm tài liệu tham khảo

Chiến lược tích hợp theo từng bước

1. Bắt đầu với phần an toàn

• Các tác vụ "không động tới code cũ":
  • Viết tài liệu, comment, JSDoc/PHPDoc
  • Tạo test cho các module hiện có
  • Tạo schema validation cho API đang có
• Các tính năng mới tách biệt:
  • Chọn các tính năng mới có ít phụ thuộc vào code cũ
  • Áp dụng VibeCoding hoàn toàn cho những tính năng này

2. Cải thiện từng phần một

• Chiến lược "Vỏ bọc" (Strangler Fig Pattern):
  • Bọc code cũ trong lớp vỏ mới được phát triển bằng VibeCoding
  • Dần dần thay thế từng phần code cũ
• Chiến lược "Song song":
  • Viết code mới song song với code cũ
  • Thực hiện A/B testing trước khi thay thế hoàn toàn

3. Thêm type dần dần

• TypeScript (JavaScript):
  • Chuyển đổi dần .js sang .ts với allowJs: true
  • Bắt đầu với any và cải thiện dần các type
  • Sử dụng JSDoc trong file JS để được hỗ trợ type
• PHP:
  • Bắt đầu thêm type hints vào các phương thức công khai
  • Sử dụng DocBlock khi không thể thay đổi chữ ký hàm
• Python:
  • Thêm type hints với # type: ignore khi cần
  • Sử dụng các file stub (.pyi) để bổ sung type cho code cũ

Hướng dẫn theo từng ngôn ngữ/framework

JavaScript/TypeScript (Node.js, Frontend)

• Express.js (cũ):
  • Tạo các type interfaces cho Request/Response
  • Tách controllers thành các file riêng biệt theo tính năng
  • Sử dụng middleware để validation thay vì code trực tiếp
• React (cũ):
  • Chuyển đổi các component class sang function + hooks
  • TypeScript + PropTypes song song để chuyển đổi dần
  • Tách logic ra khỏi component bằng custom hooks
• Vue 2:
  • Sử dụng Composition API với plugin @vue/composition-api
  • Thêm JSDoc/TypeScript cho Vuex/components

PHP

• Laravel (phiên bản cũ):
  • Thêm type hints vào Model/Controller/Service
  • Tạo các DTO (Data Transfer Objects) cho request/response
  • Trích xuất logic phức tạp vào services hoặc actions
• Legacy PHP:
  • Tạo facade hiện đại (với typing) cho các hàm cũ
  • Đóng gói logic cũ vào các class có cấu trúc rõ ràng

Python

• Django (phiên bản cũ):
  • Thêm typing module by module
  • Phân tách views lớn thành nhiều views nhỏ hơn
  • Chuyển business logic từ views vào services
• Flask:
  • Tái cấu trúc theo modular pattern với Blueprints
  • Thêm Pydantic models cho validation dữ liệu

Gợi ý Prompt cho AI khi làm việc với dự án cũ

1. Phân tích và mapping codebase

Phân tích codebase sau đây và giúp tôi tạo "bản đồ dự án" hiển thị:
1. Cấu trúc thư mục và các thành phần chính
2. Luồng dữ liệu cốt lõi
3. Các design pattern được sử dụng
4. Điểm mạnh và điểm yếu của kiến trúc hiện tại

[Sao chép một số file/thư mục chính vào đây]

2. Thêm type cho code không có type

Giúp tôi thêm TypeScript type cho đoạn mã JavaScript sau. Bảo tồn hoàn toàn logic, chỉ thêm:
1. Type cho biến, tham số, giá trị trả về
2. Interface/Type cho các object
3. JSDoc nếu cần thiết để giải thích logic phức tạp

[Sao chép mã nguồn cần chuyển đổi vào đây]

3. Tái cấu trúc theo tính năng

Giúp tôi tái cấu trúc các file sau từ organization theo technical layer sang theo feature module. 
Hiện tại chúng nằm trong thư mục riêng biệt (controllers/, services/, models/), nhưng tôi muốn nhóm chúng theo tính năng "user".

[Liệt kê các file liên quan]

Nguyên tắc khi áp dụng VibeCoding cho dự án cũ

• Bảo tồn hành vi: Đảm bảo chức năng vẫn hoạt động như cũ khi refactor
• Từng bước nhỏ: Áp dụng VibeCoding từng phần nhỏ, có thể kiểm soát
• Test trước, refactor sau: Viết test cho code cũ trước khi thay đổi
• Học hỏi từ code cũ: Đảm bảo hiểu rõ logic nghiệp vụ đã tồn tại
• Không chống lại framework: Làm việc với quy ước của framework cũ thay vì cố áp đặt cấu trúc mới
• Tài liệu hóa sự thay đổi: Ghi lại tất cả các quyết định, đặc biệt về lý do kiến trúc

Case Study: Hiện đại hóa Laravel 5.x lên Laravel 10+ với VibeCoding

Bước 1: Phân tích và chuẩn bị

• Tạo danh sách các Models và các mối quan hệ
• Xác định các Controller lớn cần tái cấu trúc
• Tìm hiểu các business rules phức tạp
• Kiểm tra các package đã lỗi thời

Bước 2: Chiến lược tăng cường incremental

• Thêm type hints cho các Model
• Tạo DTOs cho Request/Response
• Trích xuất Custom Validation Rules
• Di chuyển logic từ Controller sang Services
• Tái cấu trúc Blade views từng phần

Bước 3: Sử dụng AI để hỗ trợ

• Tự động phân tích các model relationship
• Tạo mô tả OpenAPI dựa trên routes hiện có
• Cải thiện test coverage
• Chuyển đổi Controllers sang Resource/APIResource pattern

---

Nhớ rằng: Quy trình hiện đại hóa là một marathon, không phải sprint. Làm từng bước, kiểm tra kỹ lưỡng, và duy trì tính nhất quán giữa code cũ và mới.