Video quảng cáo có cả unit test: Khi lập trình viên viết video bằng code

Có những thứ tưởng chừng không liên quan gì đến kiểm thử phần mềm, vậy mà vẫn có thể được đưa vào một bộ unit test. David Pertiller, một kiến trúc sư phần mềm, vừa chia sẻ trải nghiệm đáng chú ý: video quảng cáo 15 giây cho ứng dụng giá xăng Petroly của anh được viết hoàn toàn bằng code, và các AI agent còn tự động sinh ra test để đảm bảo video hoạt động đúng.

Khung hình video được render từ code

Một unit test cho... video

Điều khiến Pertiller bất ngờ nhất là một bài kiểm tra do AI agent tạo ra: đảm bảo rằng thông báo đẩy (push notification) trong video không thể xuất hiện trước khi giá trên biểu đồ động chạm mức mục tiêu.

"Một unit test. Cho một video."

Anh cần một video quảng cáo 15 giây cho Petroly, ứng dụng theo dõi giá nhiên liệu. Thay vì mở phần mềm dựng phim, anh để Claude Code viết một trình render bằng JavaScript, tái sử dụng chính hệ thống thiết kế của ứng dụng. Từ đó, anh có thể mô tả thay đổi bằng ngôn ngữ tự nhiên, xem kết quả và tinh chỉnh dần.

Anh chưa từng mở một phần mềm dựng video nào. Biểu đồ, thông báo, hoạt ảnh sắp xếp và các hiệu ứng chuyển cảnh đều nằm trong mã nguồn. Có thể sửa, xem diff và render lại bất cứ lúc nào.

Video là một hàm của thời gian

Ý tưởng cốt lõi rất đơn giản:

frame(timeInSeconds) // → một chuỗi SVG cho đúng thời điểm đó

Ở giây thứ hai, hàm vẽ cảnh mở đầu. Về sau, nó vẽ biểu đồ giá vượt mục tiêu và thông báo xuất hiện. Muộn hơn nữa, danh sách trạm xăng tự sắp xếp lại. Mỗi vị trí, mỗi hiệu ứng mờ dần hay nảy lên đều chỉ là một phép tính nhỏ trên biến thời gian t.

Để tạo ra video, trình render yêu cầu 375 khung hình — 25 khung mỗi giây trong 15 giây — rồi đẩy liên tục vào FFmpeg. Kết quả là một video hoàn chỉnh, nhưng nguồn gốc của nó chỉ là code.

Kiểm thử bảo vệ cơ chế, mắt người bảo vệ cảm giác

Các bài test trong dự án không chỉ dừng ở thông báo đẩy. Chúng còn kiểm tra:

• Mã QR: bố cục và vùng trống xung quanh phải đúng chuẩn.
• Danh sách trạm xăng: bắt đầu sắp xếp theo khoảng cách và kết thúc theo giá.
• Tính toàn vẹn dữ liệu: không khung hình nào trong 375 khung chứa NaN, Infinity hay undefined.
• Điểm nhấn trạm rẻ nhất: chỉ xuất hiện sau khi tất cả các dòng đã ngừng di chuyển — một quyết định thiết kế được diễn đạt thành một assertion.
• Kiểm tra pixel: đảm bảo logo thực sự được raster hóa, chứ không chỉ kiểm tra sự tồn tại của thẻ ảnh trong SVG.

"Những công cụ tôi dùng để bảo vệ hành vi của một ứng dụng cũng có thể bảo vệ hành vi của video cho ứng dụng đó."

Pertiller thừa nhận anh sẽ không nghĩ đến việc yêu cầu những điều này khi đặt hàng một video quảng cáo. Chính việc AI agent coi video như phần mềm có thể kiểm thử đã khiến anh ngạc nhiên.

Phát hiện thú vị: video có thể trong suốt

Một khám phá khác của anh: video có thể có kênh alpha, giống như ảnh PNG. Anh muốn video trông giống màn hình iPhone với bốn góc bo tròn. Kênh alpha khiến vùng ngoài các góc bo trở nên trong suốt, giúp video hòa vào bất kỳ nền nào phía sau.

Bí quyết là giữ nguyên độ trong suốt xuyên suốt quá trình xuất. Bản master dựng phim dùng ProRes 4444 với alpha trong container MOV. Chỉ riêng phần mở rộng .mov không đảm bảo được độ trong suốt — codec và định dạng pixel cũng phải hỗ trợ.

Mười hai phiên bản ngôn ngữ, một hoạt ảnh

Sau khi hài lòng với bản tiếng Đức, Pertiller biến việc dịch thuật thành một đầu vào khác của trình render. Mười hai phiên bản bao phủ mười ngôn ngữ, gồm tiếng Anh dùng euro và bảng Anh, cùng hai biến thể tiếng Bồ Đào Nha châu Âu và Brazil.

Các cảnh và thời điểm được chia sẻ chung:

• Định dạng địa phương: bản tiếng Anh (Anh) hiển thị pence mỗi lít và khoảng cách bằng dặm, bản Đan Mạch dùng krone, bản Brazil dùng real. Giá minh họa giữ nguyên thứ tự và vượt mục tiêu cùng thời điểm.
• Ngôn từ của ứng dụng: cụm "Price alert" và năm hạng mục giá lấy trực tiếp từ bản dịch của ứng dụng.
• Liên kết bản địa hóa: mỗi phiên bản chọn đích đến QR phù hợp, dùng trang tiếng Anh khi chưa có trang đích dịch sẵn.
• Văn bản vừa khung: mỗi chuỗi được đo bằng font thật và chỉ thu nhỏ khi buộc phải vậy — "Très bon marché" dài hơn nhiều so với "Very cheap".

Nếu cải thiện hoạt ảnh sắp xếp, cả mười hai phiên bản đều kế thừa thay đổi ở lần render tiếp theo. Không cần đồng bộ thủ công mười hai dòng thời gian riêng biệt.

Không trình dựng phim, không thuê bao

Toàn bộ công cụ render gồm JavaScript, SVG, sharp và FFmpeg — đều là mã nguồn mở. Nhạc nền và hiệu ứng âm thanh cũng có giấy phép miễn phí. Pertiller không phải mua phần mềm dựng phim hay trả thêm bất kỳ khoản thuê bao nào.

Với cách làm này, anh có thể xem thay đổi của video như một diff, hỏi test xem thông báo có đến quá sớm không, render đúng một khung để kiểm tra bố cục, và tạo thêm ngôn ngữ mới từ cùng một hoạt ảnh.

"Tôi vẫn thấy phấn khích vì một video có thể hoạt động theo cách này."

Câu chuyện này cho thấy một xu hướng đáng chú ý: khi AI agent ngày càng tham gia sâu vào quy trình phát triển, ranh giới giữa "phần mềm" và "nội dung" đang mờ dần. Với các lập trình viên và nhà phát triển ứng dụng tại Việt Nam, đây có thể là gợi ý thực tế để tự sản xuất tài liệu quảng cáo cho sản phẩm mà không phụ thuộc vào công cụ dựng phim đắt tiền.