Case Study: Tạo Context Cho Một Tính Năng Thực Tế

Lý thuyết về các loại context là rất quan trọng, nhưng làm thế nào để áp dụng chúng vào một công việc hàng ngày? Trang này sẽ hướng dẫn bạn qua một kịch bản thực tế: thêm một tính năng mới vào một ứng dụng "Todo List" bằng cách kết hợp nhiều lớp context khác nhau.

Bối cảnh Dự án (The Scenario)

• Dự án: Một ứng dụng Todo List đơn giản.
• Công nghệ:
  • Frontend: Next.js, React
  • Backend: Node.js, Express.js
  • Database: PostgreSQL
• Yêu cầu: Xây dựng chức năng cho phép người dùng đánh dấu một công việc đã hoàn thành.

Bước 1: Chuẩn bị các nguồn Context

Trước khi viết prompt, chúng ta cần đảm bảo các nguồn context nền tảng đã sẵn sàng cho Agent.

1. Context Tài liệu Dự án (Project Docs Context)

Chúng ta cần định nghĩa API endpoint cho chức năng mới. Thay vì mô tả trong prompt, chúng ta có thể tạo một file docs/api-design.md và "ghim" nó vào context của IDE.

docs/api-design.md

# API Design

## Todo Endpoints

### `PUT /api/todos/:id/complete`

-   **Description:** Marks a single todo item as complete.
-   **Request Body:** None
-   **Response:**
    -   **200 OK:** Returns the updated todo item.
    -   **404 Not Found:** If the todo item with the given ID does not exist.

Đây là Project Docs Context.

2. Context Quy tắc IDE (IDE Rules)

Dự án của chúng ta có một quy tắc: mọi API response thành công phải có cấu trúc nhất quán. Chúng ta định nghĩa điều này trong /.cursor/rules/api-response.md.

/.cursor/rules/api-response.md

# API Response Rule

All successful API responses (status 200) MUST return a JSON object with the following structure:

{
  "success": true,
  "data": { ... } // The actual data payload
}

Đây là IDE Rules Context.

3. Context Codebase & Thư viện

Agent sẽ tự động lập chỉ mục (index) toàn bộ codebase. Nó sẽ thấy:

• Cách kết nối database trong lib/db.js.
• Cách các route được định nghĩa trong pages/api/todos/index.js.
• Component TodoItem.js ở frontend cần được cập nhật.
• package.json liệt kê các thư viện express, pg, react. Agent sẽ tự động (hoặc chúng ta yêu cầu) lấy tài liệu cho các thư viện này qua MCP/Context7 để sử dụng API một cách chính xác.

Đây là Codebase Context và Library Docs Context.

Bước 2: Viết Prompt chất lượng (User Prompt Context)

Bây giờ, với tất cả context nền đã sẵn sàng, chúng ta có thể viết một prompt ngắn gọn nhưng cực kỳ hiệu quả.

Yêu cầu hoàn thiện tính năng

Hãy giúp tôi xây dựng tính năng "đánh dấu công việc đã hoàn thành" cho ứng dụng Todo List.

Tôi đã định nghĩa API endpoint trong docs/api-design.md và các quy tắc về response trong IDE Rules, bạn hãy tham khảo chúng nhé.

Về phần backend, hãy tạo endpoint mới và viết logic để cập nhật trạng thái công việc trong database.

Còn ở frontend, hãy cập nhật component TodoItem.js, thêm một checkbox. Khi người dùng click vào đó thì gọi API và cập nhật lại giao diện để gạch ngang công việc đã xong.

Kết quả

Bằng cách cung cấp một hệ thống context đa tầng, chúng ta đã giúp Agent:

• Biết phải làm gì: Thông qua prompt rõ ràng.
• Biết làm như thế nào: Bằng cách tham chiếu đến codebase hiện có và tài liệu thư viện.
• Biết các quy tắc cần tuân thủ: Thông qua tài liệu thiết kế và IDE rules.

Kết quả là Agent sẽ tạo ra code chất lượng cao, nhất quán với dự án, và đáp ứng đúng yêu cầu nghiệp vụ, thay vì chỉ là một đoạn code "chạy được" một cách biệt lập.