Lập kế hoạch và tạo ứng dụng bằng trình bổ trợ Conductor

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách lập kế hoạch và xây dựng các ứng dụng phần mềm bằng trình bổ trợ Conductor. Conductor là một trình bổ trợ nguồn mở do Google xây dựng, cho phép các tính năng phát triển dựa trên thông số kỹ thuật như lập kế hoạch và theo dõi việc triển khai. Bạn sẽ bắt đầu bằng cách tạo một ứng dụng "từ đầu" hoàn toàn mới. Sau đó, bạn sẽ coi đây là một dự án "brownfield", lặp lại dự án này để thêm tính năng xác thực và lưu trữ.

Bạn sẽ thực hiện

  • Cài đặt trình bổ trợ Conductor trong Antigravity CLI hoặc Claude Code
  • Xây dựng một ứng dụng web "Picker Wheel" (Bánh xe chọn ngẫu nhiên) từ đầu bằng cách sử dụng các khả năng lập kế hoạch và triển khai của Conductor
  • Thêm tính năng cá nhân hoá vào ứng dụng bằng cách thêm tính năng xác thực và lưu trữ bằng Firebase

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

  • Cách sử dụng trình bổ trợ Conductor để lập kế hoạch, triển khai và xem xét một ứng dụng "mới hoàn toàn"
  • Cách sử dụng trình bổ trợ Conductor để thêm các tính năng vào ứng dụng "brownfield"

Bạn cần có

  • Một trình duyệt web như Chrome
  • Một dự án trên Google Cloud đã bật tính năng thanh toán
  • Đã cài đặt Node.js (nên dùng phiên bản 18 trở lên)
  • Một trình soạn thảo mã cục bộ như Visual Studio Code
  • Một công cụ hỗ trợ lập trình như Antigravity CLI hoặc Claude Code

2. Trước khi bắt đầu

Tạo một dự án trên Google Cloud

  1. Trong Google Cloud Console, trên trang chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
  2. Đảm bảo bạn đã bật tính năng thanh toán cho dự án trên Cloud. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trong một dự án hay không.

Khởi động Cloud Shell

Cloud Shell là một môi trường dòng lệnh chạy trong Google Cloud và được tải sẵn các công cụ cần thiết.

  1. Nhấp vào Kích hoạt Cloud Shell ở đầu bảng điều khiển Google Cloud.
  2. Sau khi kết nối với Cloud Shell, hãy xác minh thông tin xác thực của bạn:
    gcloud auth list
  3. Xác nhận rằng dự án của bạn đã được định cấu hình:
    gcloud config get project
  4. Nếu dự án của bạn không được thiết lập như mong đợi, hãy thiết lập dự án:
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

Bật API

Bật Firebase Management API trong dự án Google Cloud.

gcloud services enable firebase.googleapis.com

Thêm Firebase vào dự án của bạn

Firebase CLI được cài đặt sẵn trong Cloud Shell. Trong Cloud Shell, hãy đăng nhập bằng cùng một Tài khoản Google cấp cho bạn quyền truy cập vào dự án trên đám mây của Google Cloud. Nếu bạn đang làm việc cục bộ, hãy cài đặt Firebase CLI bằng cách làm theo hướng dẫn.

firebase login

Chạy lệnh sau để thêm Firebase vào dự án trên đám mây của bạn trên Google Cloud:

firebase projects:addfirebase

Nếu đây là lần đầu tiên bạn chạy CLI firebase, hãy trả lời mọi câu hỏi mà bạn được hỏi.

Thoát Cloud Shell

Bạn có thể đóng cửa sổ Cloud Shell. Trong phần sau, chúng ta sẽ định cấu hình môi trường cục bộ.

3. Cài đặt và xác thực các tác nhân mã hoá CLI

Trong bước này, bạn sẽ chuẩn bị môi trường phát triển cục bộ bằng cách cài đặt và xác thực Antigravity CLI hoặc Claude Code trong trình chỉnh sửa mã cục bộ bằng thông tin đăng nhập Google Cloud.

Cài đặt và xác thực Antigravity CLI

  1. Cài đặt phiên bản mới nhất của Antigravity CLI.
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. Khởi động lại thiết bị đầu cuối để agy được thêm vào PATH.
  3. Xác minh rằng quá trình cài đặt đã cài đặt phiên bản mới nhất.
    agy --version
  4. Xác thực bằng thông tin đăng nhập Google Cloud.
    • Khởi động Antigravity CLI.
      agy
    • Khi được yêu cầu Chọn phương thức đăng nhập, hãy chọn Sử dụng một dự án trên Google Cloud. Mở URL uỷ quyền an toàn trong trình duyệt web. Đăng nhập bằng thông tin đăng nhập đã được phê duyệt và hoàn tất quy trình xác thực. Trình duyệt sẽ hiển thị một mã uỷ quyền riêng biệt bao gồm cả chữ và số. Sao chép mã này, quay lại thiết bị đầu cuối rồi dán mã này vào dấu nhắc.
  5. Thoát Antigravity CLI.Nhập /exit vào thiết bị đầu cuối CLI để kết thúc phiên Antigravity CLI trực tiếp trước khi tiếp tục.

Cài đặt và xác thực mã Claude

Ngoài ra, bạn có thể sử dụng Conductor Plugin với Claude Code. Tại đây, chúng ta sẽ cài đặt và xác thực Claude Code bằng thông tin đăng nhập Google Cloud của bạn.

  1. Cài đặt phiên bản mới nhất của Claude Code.
  2. Xác thực bằng thông tin đăng nhập Google Cloud.
    • Bắt đầu Claude Code.
      claude
    • Nhập /login để chọn phương thức đăng nhập. Chọn mục Nền tảng bên thứ ba · Amazon Bedrock, Microsoft Foundry hoặc Vertex AI và Google Vertex AI. Để thiết lập Google Vertex AI, hãy chọn Thông tin xác thực mặc định của ứng dụng (google auth) rồi hoàn tất quá trình thiết lập theo hướng dẫn.
  3. Khởi động lại Claude Code.

4. Cài đặt Trình bổ trợ Conductor

Conductor là một trình bổ trợ nguồn mở do Google xây dựng, cho phép các tính năng phát triển dựa trên thông số kỹ thuật như lập kế hoạch và theo dõi việc triển khai.

Cài đặt trong Antigravity CLI

  1. Cài đặt trình bổ trợ:
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. Xác minh quá trình cài đặt:
    • Khởi động Antigravity CLI.
      agy
    • Nhập /conductor, bạn sẽ thấy danh sách các lệnh như /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement, v.v.
  3. Thoát khỏi CLI.Nhập /exit từ thiết bị đầu cuối để kết thúc phiên CLI trực tiếp trước khi tiếp tục.

Cài đặt trong Claude Code

  1. Đăng ký kho lưu trữ của trang web thương mại và cài đặt trực tiếp trình bổ trợ Conductor trong phiên Claude Code.
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. Xác minh quá trình cài đặt.
    • Nhập /conductor, bạn sẽ thấy danh sách các lệnh như /conductor-setup, conductor-new-track, conductor-implement, v.v.
  3. Thoát khỏi CLI.Nhập /exit vào thiết bị đầu cuối Claude Code để kết thúc phiên CLI trực tiếp trước khi tiếp tục.

5. Phát triển từ đầu: Vòng quay chọn ngẫu nhiên

Giờ đây, khi đã thiết lập xong môi trường, bạn sẽ tạo một ứng dụng mới từ đầu. Bạn sẽ tạo một "Bánh xe chọn ngẫu nhiên" – một ứng dụng web gọn nhẹ quay để chọn một lựa chọn ngẫu nhiên.

Thiết lập bối cảnh sản phẩm

  1. Tạo và thay đổi thành một thư mục dự án mới.Giờ đây, chúng ta sẽ làm việc trên một dự án trong thư mục picker-wheel. Tạo thư mục này rồi chuyển đến thư mục đó.
    mkdir picker-wheel
cd picker-wheel
  2. Khởi động Antigravity CLI.Bắt đầu một phiên CLI mới từ thư mục dự án bằng Antigravity CLI hoặc Claude Code.
    # Antigravity CLI
agy

# Claude Code
claude
    • Khi được hỏi "Bạn có tin tưởng các tệp trong thư mục này không?", hãy chọn Tin tưởng thư mục (bộ chọn dạng bánh xe)
  3. Khởi chạy Conductor.Chạy lệnh thiết lập để tạo khung dự án và thiết lập môi trường Conductor.
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. Làm theo các lời nhắc tương tác.Các lời nhắc tương tác mà bạn thấy sẽ không hoàn toàn giống với những ví dụ này. Tập trung vào một thiết kế đơn giản hơn để làm quen với quy trình Conductor.
    • Mục tiêu sản phẩm: Một ứng dụng web hiển thị một bánh xe quay có thể định cấu hình để chọn một mục ngẫu nhiên trong danh sách.
      • Đối tượng mục tiêu → Công chúng
      • Tương tác → Nhấn/Nhấp để xoay
      • Tuỳ chỉnh → Cơ bản
      • Nền tảng → Ưu tiên máy tính
    • Nguyên tắc đối với sản phẩm: Tạo tự động.
    • Bộ phần mềm cơ sở:
      • Ngôn ngữ → TypeScript/JavaScript – Phù hợp với web toàn ngăn xếp
      • Giao diện người dùng → Vue.js – Giao diện web trực quan
      • Phụ trợ → Express.js – Phụ trợ Node nhanh
      • Cơ sở dữ liệu → Không có – Không cần cơ sở dữ liệu
    • Quy trình làm việc: Tiêu chuẩn.
    • Yêu cầu về sản phẩm:
      • Câu chuyện của người dùng → Lựa chọn có thể tuỳ chỉnh, Hiển thị người chiến thắng rõ ràng
      • Các tính năng chính → Danh sách lựa chọn có thể chỉnh sửa, Màu sắc ngẫu nhiên
      • Các giới hạn → Chỉ phía máy khách, Hiệu quả cao
      • Không có chức năng → Phạm vi kiểm thử cao, TypeScript và Vue.js, Thiết kế đáp ứng
    Conductor sẽ tạo các tệp ngữ cảnh trong thư mục conductor/.

Tạo bản phụ đề mới

"Track" (Bản nhạc) trong Conductor đại diện cho một tính năng hoặc một đơn vị công việc.

  1. Bắt đầu một bản nhạc mới bằng cách sử dụng /conductor-new-rack.Conductor có thể đề xuất một bản nhạc ban đầu dựa trên bối cảnh sản phẩm. Ngoài ra, bạn có thể đề xuất một bản nhạc của riêng mình hoặc yêu cầu người điều phối đề xuất một bản nhạc.
  2. Xem xét kế hoạch đã tạo.Conductor sẽ tạo một index.md, một spec.md và một plan.md bên trong conductor/tracks/{track-id}/. Hãy dành chút thời gian để đọc các điều khoản này. Nếu mọi thứ đều ổn, Conductor sẽ nhắc bạn lưu và xác nhận các tệp thiết lập ban đầu.

Triển khai bản theo dõi

  1. Bắt đầu triển khai.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Giờ đây, Conductor sẽ thực hiện theo kế hoạch, viết mã cho dự án.
  2. Xác minh ứng dụng.Trong suốt giai đoạn triển khai, Conductor sẽ nhắc bạn kiểm thử ứng dụng theo cách thủ công. Ví dụ: công cụ này sẽ yêu cầu bạn mở máy chủ web cục bộ, xem trước ứng dụng trong trình duyệt và xác minh các thay đổi. Khi quá trình triển khai hoàn tất, bạn sẽ thấy một bánh xe chọn hoạt động.Ứng dụng Picker Wheel
  3. Xem xét việc triển khai.Ở bước cuối cùng, bạn có thể yêu cầu Conductor xem xét việc triển khai. Công cụ này sẽ xem xét mã nguồn, đồng bộ hoá tài liệu dự án và lưu trữ bản theo dõi.
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. Brownfield Iteration: Thêm tính năng cá nhân hoá

Bây giờ, bạn sẽ chuyển sang phát triển "brownfield". Bạn sẽ cải thiện ứng dụng web bánh xe chọn ngẫu nhiên ở phần trước để người dùng đã đăng nhập có thể lưu và khôi phục cấu hình bánh xe chọn ngẫu nhiên của họ.

Tạo một bản nhạc cá nhân hoá

  1. Trong ví dụ "brownfield" sau đây, chúng ta sẽ sử dụng Firebase để xác thực và lưu trữ. Cài đặt các kỹ năng của Firebase để Conductor có thể sử dụng.
  2. Khởi động tác nhân CLI.Bắt đầu một phiên CLI mới.
    # Antigravity CLI
/new

# Claude Code
/new
  3. Bắt đầu một bản nhạc mới.Bắt đầu một bản nhạc mới.
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. Làm theo các lời nhắc tương tác.Các lời nhắc tương tác mà bạn thấy sẽ không hoàn toàn giống với những ví dụ này. Tập trung vào một thiết kế đơn giản hơn để làm quen với quy trình Conductor.
    • Theo dõi mục tiêu:
      • Nhà cung cấp dịch vụ xác thực → Firebase Auth
      • Cấu hình đã lưu → Lựa chọn về bánh xe
      • Lưu trữ dữ liệu → Firestore
      • Giao diện người dùng đăng nhập Firestore → Lớp phủ cửa sổ phương thức
    Conductor sẽ tạo các tệp ngữ cảnh cho một bản nhạc mới bên trong conductor/tracks/{track-id}.
  5. Xem xét kế hoạch đã tạo.Dành chút thời gian để đọc index.md, spec.md và plan.md bên trong conductor/tracks/{track-id}/.
  6. Triển khai.Nếu mọi thứ đều ổn, bạn có thể bắt đầu triển khai.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. Xác minh.Tải lại ứng dụng của bạn. Bạn sẽ thấy một ứng dụng đã được cập nhật. Vòng quay chọn ngẫu nhiên có nút Đăng nhập

Sau đây là mã vàng cho một quá trình triển khai tham chiếu. Bạn phải cung cấp dự án Firebase trong .firebaserc và cấu hình Firebase trong firebase.ts để khởi động ứng dụng đúng cách.

7. Dọn dẹp

Để tránh các khoản phí phát sinh cho tài khoản Google Cloud của bạn, hãy xoá các tài nguyên đã tạo trong lớp học lập trình này.

Xoá dự án Firebase và dự án trên Google Cloud

Cách dễ nhất để dọn dẹp là xoá hoàn toàn dự án.

  1. Trong Google Cloud Console, hãy chọn dự án mà bạn đã tạo.
  2. Nhấp vào XOÁ.

Hoặc nếu bạn muốn giữ lại dự án nhưng xoá tài nguyên:

  1. Xoá cơ sở dữ liệu Firestore: Chuyển đến Bảng điều khiển Firebase > Firestore rồi xoá cơ sở dữ liệu.
  2. Xoá phương thức xác thực: Chuyển đến Bảng điều khiển Firebase > Xác thựcPhương thức đăng nhập, vô hiệu hoá Google.

8. Xin chúc mừng

Xin chúc mừng! Bạn đã sử dụng thành công trình bổ trợ Conductor trong tác nhân mã hoá mà bạn chọn (Antigravity CLI hoặc Claude Code) để tạo một ứng dụng web từ đầu, sau đó lặp lại ứng dụng đó với các tính năng phức tạp như xác thực và tích hợp cơ sở dữ liệu.

Các bước tiếp theo