Ngoài việc lập trình theo cảm hứng cho web

1. Giới thiệu

Khi các tác nhân lập trình trở thành một phần không thể thiếu trong quá trình phát triển phần mềm hằng ngày, cho dù bạn là một kỹ sư giàu kinh nghiệm hay một nhà phát triển mới muốn ra mắt ứng dụng đầu tiên của mình, thì cách bạn xây dựng và những gì bạn xây dựng đang thay đổi căn bản. Khi bắt đầu sử dụng các tác nhân lập trình, bạn thường bắt đầu bằng các câu lệnh "không có ví dụ" – một chỉ dẫn duy nhất cho biết ngắn gọn bằng ngôn ngữ tự nhiên những gì bạn muốn. Điều này nhanh chóng gặp phải vấn đề:

  • Thiên kiến làm hài lòng người khác: Các mô hình thường chấp nhận những ràng buộc hoặc tiền đề có lỗi, cố gắng hoàn thành yêu cầu của bạn nhanh nhất có thể và không xác minh rằng những gì chúng tạo ra thực sự làm được những gì bạn muốn.
  • Khoảng trống xác minh: Ngay cả khi viết các bài kiểm thử, các tác nhân thường không kiểm tra công việc của mình để đảm bảo rằng công việc đó hoạt động. Việc thử sử dụng các trang web trong trình duyệt trực tiếp sẽ làm xuất hiện các lỗi ẩn, bố cục bị hỏng và các chế độ điều khiển không truy cập được.
  • Nợ kỹ thuật: Do cách các mô hình được huấn luyện và hoạt động, mã mà các mô hình này viết có xu hướng sử dụng các mẫu cũ và lỗi thời, làm tăng nợ kỹ thuật, khiến việc quản lý tốn nhiều mã thông báo hơn cũng như nhiều thời gian và công sức hơn của cả con người và máy móc. Nợ kỹ thuật thậm chí có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng.

Kế hoạch hành động gồm 4 bước

Để giúp hướng dẫn các tác nhân viết mã tạo ra mã tốt hơn và phù hợp hơn với yêu cầu của bạn, hãy cân nhắc làm theo vòng đời phát triển sản phẩm gồm 4 bước:

  1. Lập kế hoạch và thiết kế: Cùng nhau viết Tài liệu yêu cầu về sản phẩm (PRD) với tác nhân và yêu cầu tác nhân tạo mẫu và thiết kế PRD trong trình duyệt trước khi bắt đầu triển khai sản xuất, sau đó soạn thảo Tài liệu thiết kế (Thông số kỹ thuật) về cấu trúc từ PRD và thiết kế của bạn trước khi bắt đầu lập trình.
  2. Lập trình và xây dựng: Hướng dẫn các tác nhân của bạn xây dựng theo PRD, thiết kế và Thông số kỹ thuật thay vì một câu lệnh không có ví dụ, đồng thời yêu cầu tác nhân chạy một tác nhân khác để kiểm tra công việc của tác nhân đó.
  3. Lặp lại: Lặp lại các bước 1 và 2 cho từng tính năng mới mà bạn muốn thêm.
  4. Triển khai: Gửi đến kênh phát hành công khai.

Tài liệu này hướng dẫn bạn cách sử dụng các tác nhân AI làm đối tác cộng tác tích cực với các phương pháp nhằm giúp bạn giảm nợ kỹ thuật và cải thiện chất lượng mã đầu ra. Bạn sử dụng Antigravity kết hợp với Modern Web Guidance và DevTools for Agents để tạo một trò chơi chữ thông thường và nâng cao trò chơi đó bằng các chức năng AI. Sau đó, bạn triển khai ứng dụng này lên Google Cloud bằng Firebase để chia sẻ với bạn bè và gia đình.

Kiến thức bạn sẽ học được

  • Cách coi các nhiệm vụ lập trình AI như vòng đời phát triển sản phẩm thu nhỏ.
  • Lý do bạn nên tách các yêu cầu về sản phẩm khỏi quy cách kiến trúc.
  • Cách điều phối quy trình làm việc của nhiều tác nhân để tạo mẫu trực tiếp trong trình duyệt và xem xét mã của bạn.
  • Cách tận dụng các kỹ năng và công cụ của bên thứ ba để cải thiện cả trải nghiệm phát triển và trải nghiệm người dùng.
  • Cách triển khai trực tiếp các ứng dụng web vào phiên bản phát hành công khai bằng Firebase MCP.

Điều kiện tiên quyết

  • Tài khoản Google cá nhân và dự án trên Google Cloud hoặc dự án Firebase (hướng dẫn trong phần thiết lập dự án)
  • Có kiến thức cơ bản về HTML, CSS và JavaScript.
  • Một trình duyệt web như Chrome.
  • Đã cài đặt Node.js (nên dùng LTS).

2. Thiết lập dự án

Tài khoản Google

Nếu chưa có Tài khoản Google cá nhân, bạn có thể tạo một Tài khoản Google.

Đăng nhập vào Cloud Console

Đăng nhập vào Google Cloud Console bằng Tài khoản Google cá nhân.

Bật tính năng thanh toán

Để thiết lập tài khoản thanh toán cá nhân, hãy chuyển đến phần bật tính năng thanh toán trong Cloud Console.

Tạo một dự án Firebase

  1. Chuyển đến Bảng điều khiển Firebase rồi đăng nhập bằng Tài khoản Google cá nhân của bạn.
  2. Nhấp vào Thêm dự án (hoặc Tạo dự án).
  3. Trong trình hướng dẫn tạo dự án:
    • Nhập tên dự án (chẳng hạn như wordup-web-app) hoặc sử dụng lại dự án trên đám mây của Google Cloud mà bạn đã thiết lập trong quá trình thiết lập dự án.
  4. Kết nối tài khoản thanh toán
    • Trong thanh bên của Bảng điều khiển Firebase, hãy tìm huy hiệu gói ở dưới cùng (có nội dung "Spark"). Nhấp vào Nâng cấp.
    • Chọn gói Trả tiền theo mức dùng.
    • Chọn Tài khoản thanh toán mà bạn đã thiết lập trong bước Thiết lập dự án.
    • Xác nhận lựa chọn đính kèm tài khoản thanh toán vào dự án. (Lưu trữ Firebase cung cấp một bậc miễn phí hào phóng; việc hoàn thành hướng dẫn này thường không tốn phí).

Cài đặt công cụ

  • Antigravity 2.0: Nền tảng lập trình ưu tiên tác nhân chính mà bạn sử dụng, kết hợp với mô hình Gemini Flash mới nhất để lập trình nhanh chóng và hiệu quả.
  • Modern Web Guidance: Kỹ năng cho các tác nhân viết mã để giúp họ viết CSS, HTML và JavaScript hiện đại. Cài đặt thông qua phần Cài đặt > Tuỳ chỉnh > Xây dựng bằng các trình bổ trợ của Google > Hướng dẫn về web hiện đại của Antigravity.
  • DevTools cho tác nhân: Cho phép các tác nhân điều khiển Chrome, kiểm tra DOM trực tiếp, kiểm thử bố cục và gỡ lỗi trong thời gian chạy. Cài đặt thông qua Antigravity Settings > Customization > Build With Google Plugins > Chrome DevTools (Cài đặt > Tuỳ chỉnh > Xây dựng bằng các trình bổ trợ của Google > Chrome DevTools) và Antigravity Settings > Customization > Add MCP Servers > Chrome DevTools cho tác nhân (Cài đặt > Tuỳ chỉnh > Thêm máy chủ MCP > Chrome DevTools cho tác nhân).
  • Máy chủ MCP của Firebase: Để thiết lập dự án liền mạch và triển khai bằng một lời nhắc. Cài đặt thông qua Antigravity Settings > Customization > Build With Google Plugins > Firebase and Antigravity Settings > Customization > Add MCP Servers > Firebase (Cài đặt > Tuỳ chỉnh > Xây dựng bằng các trình bổ trợ của Google > Cài đặt Firebase và Antigravity > Tuỳ chỉnh > Thêm máy chủ MCP > Firebase).

3. Bắt đầu với một kế hoạch

Điều thường khiến người ta muốn làm trong hoạt động lập trình dựa trên tác nhân là gửi một câu lệnh không có ví dụ ("Xây dựng cho tôi một trò chơi chữ") và hy vọng sẽ nhận được kết quả tốt nhất. Điều này hầu như luôn dẫn đến việc bỏ qua các trường hợp đặc biệt, cơ sở mã bị phình to và các chu kỳ sửa lỗi không ngừng.

Thay vào đó, hãy coi mỗi nhiệm vụ là một vòng đời phát triển sản phẩm thu nhỏ. Các tác nhân lập trình có công cụ nghiên cứu và suy luận, cho phép chúng đóng vai trò là một cộng sự để giúp bạn làm rõ ý tưởng trước khi viết mã. Việc nói ra ý tưởng thường giúp bạn tìm và trả lời các câu hỏi trước khi chúng trở thành vấn đề. Trong kỹ thuật phần mềm, việc này được gọi là gỡ lỗi bằng vịt cao su. Bạn có thể sử dụng các tác nhân lập trình của mình làm "vịt cao su" để lên kế hoạch cho các dự án và tính năng.

Bạn đang xây dựng một trò chơi chữ thông thường. Ra lệnh cho tác nhân để tác nhân giúp bạn thiết kế trò chơi mà bạn muốn.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

Đây là hình dạng cơ bản của câu lệnh. Bạn có thể phối lại câu lệnh này cho phù hợp với nhu cầu của mình. Điều quan trọng ở đây là bạn cần yêu cầu Gemini thực hiện nghiên cứu chuyên sâu và đặt câu hỏi cho bạn dựa trên nghiên cứu đó để giúp bạn lập kế hoạch cho công việc của mình.

Hãy bắt đầu bằng câu lệnh này vì việc làm việc với các tác nhân lập trình đòi hỏi nhiều bước xem xét. Việc chia nhỏ kế hoạch triển khai đầy đủ thành các phần nhỏ hơn, tập trung hơn sẽ giúp bạn dễ dàng xem xét, phát hiện sớm các trường hợp đặc biệt, có thể mang lại kiến thức bên ngoài dữ liệu huấn luyện của tác nhân và quan trọng nhất là giúp bạn nghỉ ngơi nhiều hơn giữa các lần xem xét.

  • Tách biệt "cái gì" với "cách thức": Việc xác định trải nghiệm người dùng và phạm vi sản phẩm trong Tài liệu chính thức về yêu cầu đối với sản phẩm (PRD) sẽ tách biệt những gì bạn muốn xảy ra với cách thức triển khai, cho phép bạn tập trung vào một khía cạnh của quá trình phát triển sản phẩm tại một thời điểm thay vì tất cả cùng một lúc.
  • Xác định sớm các trường hợp đặc biệt: Phiên Hỏi và đáp tương tác buộc bạn phải làm rõ các yêu cầu trước khi bắt đầu thiết kế hoặc triển khai.
  • Nghiên cứu về nhân viên hỗ trợ đang hoạt động: Vì quá trình huấn luyện nhân viên hỗ trợ sẽ kết thúc vào một ngày nhất định và thông tin trong đó trở nên rất tóm tắt, nên việc lấy thông tin từ nghiên cứu trực tiếp có thể mang lại thông tin mới mà nhân viên hỗ trợ có thể bỏ lỡ.

Bài tập 1

Giờ đến lượt bạn. Thiết lập dự án và xây dựng PRD.

  1. Thêm một chỉ dẫn vào tệp AGENTS.md để yêu cầu tệp này lưu đầu ra của bạn vào docs/plans/{{YYYY-MM-DD}}-{{description}}.md.
  2. Chạy câu lệnh nghiên cứu trước đó (với bất kỳ điểm điều chỉnh nào bạn muốn) để xây dựng PRD.
  3. [Mục tiêu mở rộng] Cập nhật tệp AGENTS.md bằng những việc mà bạn thấy tác nhân của mình đang làm nhưng bạn không thích, rồi chạy lại câu lệnh.

4. Thiết kế trong trình duyệt

Thiết kế giao diện người dùng tĩnh dựa vào các bản mô phỏng thường trông rất bắt mắt nhưng có thể không tính đến các trường hợp đặc biệt, các ràng buộc và hoạt động tương tác thực tế của người dùng. Tương tự như mã, việc yêu cầu một tác nhân "thiết kế" ứng dụng trang web của bạn sẽ dẫn đến các thiết kế hội tụ thành một thiết kế chung chung (thường là màu tím).

Đối với các ứng dụng web, bạn có thể sử dụng khả năng kiểm soát trình duyệt web của tác nhân thông qua DevTools cho tác nhân để thiết kế trong trình duyệt. Dù bạn là nhà thiết kế đang cố gắng cải thiện độ chân thực cho các thiết kế của mình, là lập trình viên hoặc nhà xây dựng đang tìm cách cải thiện giao diện người dùng và Trải nghiệm người dùng của dự án, hay cả hai cùng làm việc với nhau, thì việc làm việc trong phương tiện thực tế mà bạn đang xây dựng sẽ mang lại kết quả tốt hơn.

Thiết kế trong trình duyệt cũng giúp bạn có cơ hội phối hợp nhiều tác nhân làm việc cùng nhau để tạo ra một kết quả duy nhất. Những đại lý phụ này là những đại lý có tính cách và mục tiêu cụ thể, có thể phối hợp với nhau để mang lại kết quả tốt hơn so với một đại lý làm việc độc lập. Với tính năng thiết kế, bạn có thể yêu cầu một tác nhân thiết kế trực quan, một tác nhân trải nghiệm người dùng và một tác nhân hỗ trợ tiếp cận cùng nhau làm việc để giúp bạn thiết kế, đồng thời cho bạn xem trực tiếp trong trình duyệt.

Bắt đầu một nhóm các tác nhân thiết kế để giúp bạn chọn một thiết kế dựa trên PRD.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Thiết kế trong môi trường mà bạn đang xây dựng (trong trường hợp này là web) thay vì thiết kế tĩnh giúp bạn nắm bắt các trường hợp và hạn chế khó quản lý, đồng thời nhận được phản hồi trực quan ngay lập tức và đúng với thực tế.

Bài tập 2

Giờ đến lượt bạn. Thiết kế dự án của bạn.

  1. Chạy câu lệnh thiết kế trước đó (với bất kỳ điểm điều chỉnh nào bạn muốn) để tạo thiết kế. Đưa ra ý tưởng về các hướng thiết kế mà bạn muốn thấy (chẳng hạn như hiện đại, vui nhộn, chân thực, v.v.).
  2. Chọn một thiết kế bạn thích và lặp lại quy trình này với tác nhân AI.
  3. Yêu cầu nhân viên của bạn cập nhật PRD để trỏ đến thiết kế đã thoả thuận.
  4. Mục tiêu mở rộng: Chạy các bài kiểm thử khả năng hỗ trợ tiếp cận và kiểm thử thiết kế thích ứng cho thiết kế bạn chọn, đồng thời điều chỉnh thiết kế dựa trên các quy trình kiểm tra đó.

5. Viết bản đặc tả

Sau khi có PRD được phê duyệt ("xây dựng cái gì") và thiết kế trực quan đã chọn ("hình dáng của nó"), giờ đây, bạn cần có sự điều chỉnh về kỹ thuật đối với cấu trúc ("cách xây dựng").

Tài liệu thiết kế kỹ thuật hoặc quy cách (viết tắt là quy cách) mô tả chi tiết cấu trúc tệp, hoạt động quản lý trạng thái, giao diện thành phần, quy trình sự kiện và các phần phụ thuộc. Việc tạo một bản đặc tả trước khi viết mã giúp bạn phát hiện sớm những điểm không phù hợp và các mẫu mã không mong muốn, trước khi chúng biến thành mã khó suy luận và tái cấu trúc hơn.

Write a detailed technical design document on how to implement the game with
the chosen design.

Lý do bạn làm việc này

  • Tính rõ ràng về cấu trúc: Việc xác định hệ phân cấp thành phần và luồng chuyển đổi trạng thái (chẳng hạn như Idle → InGame → EvaluatingGuess → GameOver) giúp ngăn chặn tình trạng xung đột và mã nguồn lộn xộn.
  • Phù hợp với các tiêu chuẩn hiện đại: Khi bạn bật Hướng dẫn về web hiện đại, tác nhân sẽ tham chiếu các tiêu chuẩn hiện đại (ví dụ: truy vấn CSS @container, các phần tử tích hợp cho các lớp phủ trợ giúp hoặc phương thức và các mô-đun ES theo mô-đun) thay vì kéo các thư viện cũ có dung lượng lớn.
  • Đánh giá theo giai đoạn: Việc tách quy trình đánh giá PRD chức năng khỏi quy trình đánh giá tài liệu thiết kế kỹ thuật giúp bạn đánh giá cấu trúc độc lập với trải nghiệm người dùng.

Bài tập 3

  1. Hướng dẫn AGENTS.md lưu đầu ra vào thư mục hiện tại: 
    PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
  2. Chạy lời nhắc tài liệu thiết kế và xem xét lời nhắc đó, đảm bảo lời nhắc bao gồm các khía cạnh như cấu trúc thư mục, xử lý sự kiện và bộ nhớ.
  3. Mục tiêu nâng cao: Yêu cầu tài liệu này có sơ đồ Mermaid để giải thích quy trình theo trạng thái thông qua ứng dụng, nếu tài liệu này chưa có sơ đồ Mermaid.

6. Cuối cùng, hãy tạo ứng dụng

Sau khi thiết lập PRD, bản mô phỏng giao diện người dùng và tài liệu thiết kế, đã đến lúc bắt đầu xây dựng. Ba mục này là hướng dẫn rõ ràng và không mơ hồ mà các trợ lý cần để biết họ nên tạo nội dung gì.

Đây là một cơ hội tốt khác để sử dụng các trợ lý ảo. Bạn có thể chạy các thử nghiệm này sau khi tạo mã để xem xét mức độ phù hợp giữa những gì đã tạo với thiết kế ban đầu, và một thử nghiệm khác để kiểm tra chất lượng mã của những gì đã tạo.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Lý do bạn làm việc này

Quy trình phát triển dựa trên quy cách với người đánh giá vòng đầu giúp tác nhân của bạn có các yêu cầu rõ ràng, đã được kiểm tra trước để xây dựng, đồng thời có một nhóm người đánh giá mới để đảm bảo tác nhân tuân thủ kế hoạch trước khi đến tay bạn, từ đó cải thiện chất lượng và độ trung thực.

  • Yêu cầu đã được kiểm tra kỹ lưỡng: Nhân viên hỗ trợ không cần đoán xem bạn muốn gì; bạn đã xem xét mọi thứ, ngoại trừ việc triển khai trước khi viết bất kỳ mã nào.
  • Đánh giá khách quan: Một tác nhân đánh giá được tạo trong một bối cảnh mới sẽ không có thiên kiến xác nhận khi xây dựng toàn bộ mã nguồn, giúp tác nhân này bắt được các trường hợp biên chưa được xử lý, các yêu cầu triển khai còn thiếu và các chi tiết khác về mã hoặc sản phẩm bị bỏ sót.

Bài tập 4

  1. Chạy câu lệnh tạo bản dựng, trỏ đến chính xác những tệp bạn muốn câu lệnh đó xem xét.
  2. Xem kết quả đầu ra khi chương trình chạy. Bạn sẽ thấy AI suy luận thông qua các yêu cầu của bạn khi cố gắng xây dựng yêu cầu đó. Nếu thấy có gì đó đi chệch hướng, bạn có thể dừng lại và điều chỉnh.
  3. Hãy chạy máy chủ phát triển để xem trang web cuối cùng và kiểm tra hoạt động của trang web.
  4. Mục tiêu vượt mức: Chạy lại quy trình này để thêm các kiểm thử tự động.
  5. Mục tiêu vượt mong đợi: Chọn một khung hoặc ngăn xếp công nghệ cụ thể mà bạn muốn sử dụng để xây dựng trang web. Với PRD, bản mô phỏng và tài liệu thiết kế riêng biệt, bạn có thể dễ dàng điều chỉnh cho phù hợp với các khung hoặc ngăn xếp khác.

7. Triển khai cho kênh phát hành công khai

Bạn đã lên kế hoạch, thiết kế và lập trình. Còn lại những gì? Triển khai cho kênh phát hành công khai.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Bài tập 5

  1. Chạy câu lệnh triển khai thay thế mã dự án của bạn.
  2. Sao chép URL của phiên lưu trữ trực tiếp do nhân viên hỗ trợ cung cấp.
  3. Mở URL đang hoạt động để xác minh rằng URL đó đã được triển khai và đang hoạt động.
  4. Mục tiêu mở rộng: Sử dụng Công cụ cho nhà phát triển cho các tác nhân để chạy quy trình kiểm tra Lighthouse cho trang web sản xuất của bạn, điều chỉnh để cải thiện điểm số Lighthouse và xuất bản nội dung cập nhật.

8. [Không bắt buộc] Các tính năng nâng cao bằng AI

Trò chơi chữ của bạn hiện đã hoạt động đầy đủ bằng cách sử dụng một từ điển tĩnh. Để thay đổi từ tĩnh thành từ động, bạn có thể nhắc người dùng nhập một từ mỗi lần bằng cách sử dụng một mô hình ngôn ngữ nhỏ, cục bộ từ Prompt API.

Vì tính năng này không có trên mọi thiết bị, nên bạn có thể sử dụng cải tiến tăng dần để kiểm tra xem API và mô hình có hoạt động hay không. Nếu có, bạn sẽ sử dụng chúng; nếu không, bạn sẽ quay lại danh sách tĩnh.

Bài tập 6

Áp dụng tất cả những kiến thức bạn đã học vào thực tế.

  1. Làm việc với trợ lý của bạn để viết một PRD nhằm sử dụng Prompt API để tạo một từ ẩn hợp lệ.
  2. Thiết kế thanh tiến trình tải xuống và giao diện người dùng tích hợp AI trong trình duyệt.
  3. Viết một bản đặc tả cho việc triển khai. (Lưu ý: Chạy một tác nhân để đảm bảo tác nhân đó sử dụng đúng cú pháp API tại đây.)
  4. Phát triển tính năng mới.
  5. Triển khai ứng dụng đó cho kênh phát hành công khai.

9. Tổng kết

Xin chúc mừng. Bạn đã tạo, tinh chỉnh, cải tiến và triển khai thành công một ứng dụng web hiện đại, dễ truy cập và có tính năng AI bằng cách áp dụng các phương pháp hay nhất về mã hoá chủ động.

Kiến thức bạn học được

  • Quy trình làm việc của nhân viên hỗ trợ dựa trên sản phẩm: Cách xử lý các nhiệm vụ như vòng đời sản phẩm thu nhỏ (PRD → Thiết kế → Thông số kỹ thuật → Xây dựng) giúp giảm nợ, giảm chi phí xem xét và giảm sự bất tiện khi phải trao đổi qua lại.
  • Nhóm chuyên gia gồm nhiều trợ lý: Cách chạy nhiều trợ lý AI có thể giúp cải thiện chất lượng và độ trung thực của công việc.
  • PRD so với tài liệu thiết kế: Tại sao việc tách phạm vi chức năng (kế hoạch) khỏi cấu trúc kỹ thuật (thông số kỹ thuật) là một quy trình có thể mở rộng và chính xác hơn so với việc nhắc tính năng không cần ví dụ.
  • Triển khai liền mạch: Cách sử dụng máy chủ MCP (chẳng hạn như Firebase MCP) để đơn giản hoá quyền truy cập vào các hệ thống bên thứ ba, chẳng hạn như triển khai trang web của bạn.