CPPAI × EzyPlatform

Loạt bài · Bài 2

Sử dụng bộ công cụ của CPPAI dành cho EzyPlatform để tạo trò chơi tìm hiểu Nginx

Từ mã nguồn nginx tới một trò chơi chạy trên EzyPlatform: giao việc cho Claude Code đọc source, dựng một trang độc lập, thêm quái vật, lỗ hổng CVE có thật và âm thanh, quay trailer tự động, rồi đưa lên site bằng bộ công cụ ezy của CPPAI.

Ở bài 1, chúng ta đã cài lệnh ezy, cài plugin ezyplatform cho Claude Code và dựng EzyPlatform chạy local bằng Docker. Bài này dùng chính bộ công cụ đó cho một việc cụ thể và vui hơn: biến mã nguồn nginx thành một trò chơi học tập, chạy như một trang của site EzyPlatform. Gần như toàn bộ mã của trò chơi do agent viết; phần của con người là đặt yêu cầu, chọn hướng và duyệt trước mỗi lần ghi lên site.

Kết quả: NGINX Packet Quest

Người chơi là một gói tin GET /api/orders. Gói tin đi qua thành phố NGINX theo đúng vòng đời của một request trong mã nguồn: từ tiến trình master, vòng lặp epoll, bộ phân tích HTTP, 11 giai đoạn xử lý, upstream, chuỗi bộ lọc cho tới keepalive. Ở mỗi trạm có một NPC giải thích đoạn code tương ứng rồi hỏi một câu; trả lời đúng thì cổng mở.

Bạn có thể chơi thử ngay trên trình duyệt. Toàn bộ trò chơi nằm trong một file content.html khoảng 240 KB: canvas vẽ bản đồ, âm thanh tự tổng hợp bằng Web Audio, không dùng thư viện ngoài.

Chuẩn bị

• Dự án site đã tạo ở bài 1 (ví dụ ezy new mmo-game --mode local), đã cài EzyArticle và ezy check báo kết nối thành công.
• Claude Code đã có plugin ezyplatform@cppai.
• Mã nguồn nginx đặt trong thư mục dự án để agent đọc được:

git clone https://github.com/nginx/nginx.git

Bản chúng tôi dùng là 1.31.9 (đọc từ src/core/nginx.h).

Bước 1: Cho agent đọc mã nguồn nginx

Mọi thứ bắt đầu từ một yêu cầu bằng tiếng Việt trong Claude Code, mở tại thư mục dự án:

Đọc mã nguồn của nginx và tạo một trò chơi ở dạng trang độc lập. Người chơi đóng vai một gói tin tìm cách đi qua bản đồ chứa các luồng của nginx, ở mỗi điểm có NPC giải thích ý nghĩa và cách đi qua. Bản đồ sinh động, có cây cối hoa cỏ, theo bộ nhận diện thương hiệu của nginx.

Agent không viết ngay. Nó đọc các file cốt lõi trước: src/event/ngx_event.c (vòng lặp sự kiện), src/event/ngx_event_accept.c, src/http/ngx_http_request.c (đọc và phân tích request, keepalive), src/http/ngx_http_core_module.c (11 giai đoạn, tìm location), src/http/ngx_http_upstream_round_robin.c (cân bằng tải) và danh sách bộ lọc trong auto/modules.

Điều đáng giá nhất ở bước này: trước khi đưa một con số vào lời thoại, agent dò lại trong code. Ví dụ:

Kết quả là 17 trạm, mỗi trạm có lời thoại, một đoạn code trích dẫn và một câu hỏi ba lựa chọn. Mỗi lựa chọn đều có lời giải thích vì sao đúng hay sai.

Bước 2: Dựng trò chơi thành một trang độc lập

Trò chơi cần toàn màn hình, không dùng header và footer chung của site, nên agent chọn kiểu trang STANDALONE_PAGE theo quy ước trong AGENTS.md của dự án: toàn bộ HTML, CSS và JavaScript nằm trong content.html.

pages/game-hanh-trinh-goi-tin-nginx/
├── content.html   # toàn bộ trò chơi
└── meta.json

{
  "slug": "game-hanh-trinh-goi-tin-nginx",
  "title": "Hành trình gói tin NGINX",
  "pageType": "STANDALONE_PAGE",
  "contentType": "HTML",
  "status": "DRAFT",
  "metadata": {}
}

Bản đồ được vẽ trên canvas: đường đi nối các trạm, quảng trường lát gạch lục giác màu xanh #009639 của nginx, cây, hoa, nấm, hồ nước, một dòng sông có cầu gỗ ở trạm bộ lọc và bướm bay. Trò chơi có minimap, sổ tay ghi lại những gì đã học, điều khiển bằng bàn phím và có bàn phím ảo cho điện thoại.

Bước 3: Làm trò chơi sinh động qua từng vòng trao đổi

Phần còn lại là một chuỗi yêu cầu ngắn. Khi yêu cầu còn mơ hồ, agent đề xuất trước, đợi người duyệt rồi mới làm:

Bước 4: Đưa lỗ hổng bảo mật vào trò chơi

Khi được hỏi về “những lỗ hổng bảo mật bạn nhận thấy từ nginx”, agent trả lời thẳng: khi đọc code, nó không tự phát hiện lỗ hổng mới nào. Nguồn đáng tin là danh sách lỗ hổng đã công bố và đã vá mà chính kho mã ghi lại trong docs/xml/nginx/changes.xml, khoảng 45 mục từ 2005 tới 2026.

Từ đó trò chơi tách hai khái niệm mà người mới hay nhầm:

• Quái vật là tấn công từ bên ngoài, nginx cấu hình đúng sẽ chống được.
• Vết nứt CVE là lỗi nằm trong chính nginx: cấu hình đúng cũng không cứu được, phải vá (nâng cấp). Mỗi vết nứt được vá qua ba bước: ai bị ảnh hưởng, hậu quả, cách xử lý. Thước trên HUD cho biết phiên bản nginx tối thiểu để chặn các lỗ hổng đã vá.
• Bẫy cấu hình là lỗi do người viết cấu hình: alias thiếu /, $uri trong header dẫn tới CRLF injection, add_header bị mất khi khai báo lại ở location, set_real_ip_from 0.0.0.0/0, lộ thư mục .git, proxy_pass theo tham số dẫn tới SSRF.

Bước 5: Để agent tự kiểm thử

Trò chơi lớn dần lên khoảng 3.000 dòng. Agent tự kiểm tra sau mỗi lần sửa, không đợi người chơi thử mới phát hiện lỗi:

• Kiểm tra cú pháp JavaScript bằng node --check.
• Chạy logic trò chơi trong Node với một DOM giả: bắt đầu, đánh quái, vá CVE, dẫm bẫy, chết rồi reset, và cả màn chiến thắng.
• Mô phỏng AudioContext để kiểm tra âm thanh dừng khi trang bị ẩn và phát lại khi hiện.
• Trích khung hình từ video trailer rồi tự xem. Nhờ vậy đã phát hiện phụ đề đè lên nhân vật và một câu hỏi bị lặp chữ.

Bước 6: Quay trailer tự động

Thay vì tự chơi rồi quay màn hình, agent thêm vào trò chơi một chế độ trailer (?trailer=1): một kịch bản khoảng 60 giây dùng chính các hàm thật của trò chơi. Camera lia qua thành phố, gói tin tự đi, tự đánh quái, vá CVE, dẫm bẫy, hạ boss, kèm phụ đề tiếng Việt. Một script quay tự động nằm trong tools/trailer/:

cd tools/trailer
npm install
npm run record

• Playwright mở Chromium ở 1920×1080 và quay bằng CDP screencast. Mỗi khung hình có dấu thời gian để video khớp đúng thời gian thực.
• Âm thanh được render lại offline bằng OfflineAudioContext theo đúng các sự kiện đã diễn ra, xuất thành WAV.
• ffmpeg ghép hình và tiếng thành MP4 H.264, chuẩn hoá âm lượng bằng loudnorm, kèm ảnh poster.

Mỗi khi trò chơi thay đổi, chỉ cần chạy lại là có trailer mới.

Bước 7: Triển khai lên EzyPlatform bằng bộ công cụ ezy

Trong terminal, bật site local và kiểm tra kết nối như ở bài 1:

cd mmo-game
docker compose up -d
ezy check

Với ezy 0.4.0, mọi việc liên quan đến nội dung (đồng bộ, publish, kiểm tra trang) làm qua coding agent; lệnh ezy chỉ lo thiết lập và kiểm tra. Mở Claude Code trong thư mục dự án rồi nhắn:

Lần đầu tạo trang

Ở plugin ezyplatform 0.5.0, ezy-publish chỉ cập nhật trang đã có trên server. Trang hoàn toàn mới phải tạo một lần bằng extension EzyArticle cho VS Code: mở thư mục dự án, mở content.html của trang rồi chạy EzyArticle: Publish Content To Server. Từ lần sau, mọi cập nhật đi qua ezy-publish với chạy thử và sao lưu.

Để người dùng không cần VS Code và luôn thấy rõ server đích trước khi ghi, chúng tôi đã gửi pull request #1 cho repo cppai-vn/agents-plugins. Với bản sửa này, ezy-publish tạo được trang và fragment chưa có trên server, bằng đúng API save-simply mà extension dùng. Bản chạy thử ghi rõ bài nào sẽ tạo mới và tạo lên server nào. Status lấy theo meta.json (mặc định DRAFT). Sau khi tạo, script in lệnh remove để hoàn tác. Khi bản này được phát hành, lần publish đầu tiên cũng chỉ còn là một câu nhắn cho agent.

Những điều rút ra

Tiếp theo

Bạn đã thấy một vòng làm việc trọn vẹn với bộ công cụ của CPPAI: từ ý tưởng, mã nguồn, kiểm thử, trailer tới triển khai lên EzyPlatform. Hãy chơi thử NGINX Packet Quest, và xem các bài khác tại mục lục loạt bài.