Lập kế hoạch và tạo ứng dụng bằng Gemini CLI 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 tiện ích Conductor của Gemini CLI. 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 Gemini CLI và tiện ích Conductor
  • 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 tiện ích Conductor để lập kế hoạch, triển khai và xem xét một ứng dụng "mới"
  • Cách sử dụng tiện ích 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

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 đám mây của 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 Cloud Console.
  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 Gemini CLI và Conductor trên thiết bị

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 Gemini CLI và tiện ích Conductor bằng trình chỉnh sửa mã và thiết bị đầu cuối cục bộ.

Cài đặt Gemini CLI

  1. Cài đặt phiên bản mới nhất của Gemini CLI trên toàn cầu bằng npm:
    npm install -g @google/gemini-cli
  2. Khởi động lại thiết bị đầu cuối để gemini đượ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:
    gemini --version
  4. Tạo và thay đổi thành một thư mục dự án mới: Trong một phần sau, chúng ta sẽ tạo một dự án trong thư mục picker-wheel. Tạo thư mục đó ngay bây giờ và chuyển sang thư mục này:
    mkdir picker-wheel
cd picker-wheel
  5. Xác thực:
    • Khởi động Gemini CLI.
      gemini
    • 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)
    • Khi được hỏi "Bạn muốn xác thực cho dự án này bằng cách nào?", hãy chọn Vertex AI. Làm theo hướng dẫn xác thực để lấy khoá API Google Cloud và đặt biến môi trường GOOGLE_API_KEY. Dành chút thời gian để tìm hiểu các cấp sử dụng khác nhau và giới hạn về tốc độ API tương ứng.
  6. Thoát Gemini CLI: Nhập /quit trong cửa sổ dòng lệnh để kết thúc phiên Gemini CLI trực tiếp trước khi tiếp tục.

Cài đặt tiện ích Conductor

Conductor là một tiện ích Gemini CLI mã 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 ngữ cảnh như lập kế hoạch và theo dõi việc triển khai.

  1. Cài đặt tiện ích:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. Xác minh quá trình cài đặt:
    • Khởi động Gemini CLI. 
      gemini
    • Nhập /conductor, bạn sẽ thấy danh sách các lệnh như setup, newTrack, implement, v.v.
  3. Thoát Gemini CLI: Nhập /quit trong cửa sổ dòng lệnh để kết thúc phiên Gemini CLI trực tiếp trước khi tiếp tục.

4. 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. Xác nhận rằng bạn đang ở trong thư mục picker-wheel mà bạn đã tạo trong phần trước:
    pwd
  2. Khởi động Gemini CLI: Bắt đầu một phiên Gemini CLI mới từ thư mục dự án của bạn.
    gemini
  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.
    /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 tệp phụ đề mới bằng /conductor:newTrack. 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:
    /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.
    /conductor:review

5. 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 tiện ích Firebase của Gemini CLI để Conductor có thể sử dụng tiện ích này.
    gemini extensions install https://github.com/firebase/agent-skills
  2. Khởi động Gemini CLI: Bắt đầu một phiên Gemini CLI mới từ thư mục dự án của bạn.
    gemini
  3. Bắt đầu một tệp phụ đề mới: Bắt đầu một tệp phụ đề mới.
    /conductor:newTrack "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 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.
    /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.

6. 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.

7. Xin chúc mừng

Xin chúc mừng! Bạn đã sử dụng thành công tiện ích Gemini CLI Conductor để xây dựng một ứng dụng web từ đầu, sau đó lặp lại ứng dụng đó bằng 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