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 xây dựng một ứng dụng "greenfield" hoàn toàn từ đầu. Sau đó, bạn sẽ coi ứng dụng đó là một dự án "brownfield", lặp lại để 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" (Vòng quay chọn) từ đầu bằng cách sử dụng các tính 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 "greenfield"
  • Cách sử dụng tiện ích Conductor để thêm các tính năng vào một ứ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
  • Node.js đã được cài đặt (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 bộ chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
  2. Đảm bảo rằng 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 bật trên một dự án hay chưa.

Bắt đầu Cloud Shell

Cloud Shell là một môi trường dòng lệnh chạy trong Google Cloud, đượ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 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 API Quản lý Firebase trong dự án trên đám mây của bạn.

gcloud services enable firebase.googleapis.com

Thêm Firebase vào dự án

Firebase CLI được cài đặt sẵn trong Cloud Shell. Từ Cloud Shell, hãy đăng nhập bằng cùng một Tài khoản Google cho phép bạ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 Google:

firebase projects:addfirebase

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

Thoát khỏi 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 cục 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 soạn thảo mã và cửa sổ dòng lệnh 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 cửa sổ dòng lệnh để gemini được thêm vào PATH.
  3. Xác minh 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 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à thay đổi thành thư mục này:
    mkdir picker-wheel
cd picker-wheel
  5. Xác thực:
    • Bắt đầu 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 (picker-wheel)
    • Khi được hỏi "Bạn muốn xác thực cho dự án này như thế 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 để khám phá các cấp sử dụng khác nhau và hạn mức tốc độ API tương ứng.
  6. Thoát khỏi Gemini CLI: Nhập /quit từ cửa sổ dòng lệnh CLI để 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 quá trình 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:
    • Bắt đầu Gemini CLI. 
      gemini
    • Nhập /conductor và bạn sẽ thấy danh sách các lệnh như setup, newTrack, implement, v.v.
  3. Thoát khỏi Gemini CLI: Nhập /quit từ cửa sổ dòng lệnh CLI để kết thúc phiên Gemini CLI trực tiếp trước khi tiếp tục.

4. Phát triển Greenfield: Vòng quay chọn

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

Thiết lập ngữ cảnh sản phẩm

  1. Xác nhận rằng bạn đang ở trong picker-wheel thư mục mà bạn đã tạo trong phần trước:
    pwd
  2. Bắt đầu Gemini CLI: Bắt đầu một phiên Gemini CLI mới từ thư mục dự á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 lời nhắc tương tác: Lời nhắc tương tác mà bạn thấy sẽ không khớp chính xác với các 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 làm việc của Conductor.
    • Mục tiêu sản phẩm: Một ứng dụng web hiển thị một vòng 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 để quay
      • 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ự động tạo.
    • Bộ phần mềm cơ sở:
      • Ngôn ngữ → TypeScript/JavaScript – Lý tưởng cho web toàn ngăn xếp
      • Giao diện người dùng → Vue.js – Giao diện web trực quan
      • Phần phụ trợ → Express.js – Phần 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 người dùng → Tuỳ chọn có thể tuỳ chỉnh, Hiển thị rõ ràng người chiến thắng
      • Các tính năng chính → Danh sách tuỳ chọn có thể chỉnh sửa, Màu 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 → Độ bao phủ kiểm thử cao, TypeScript và Vue.js, Thiết kế thích ứng
    Conductor sẽ tạo các tệp ngữ cảnh trong thư mục conductor/.

Tạo một bản nhạc mới

"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:newTrack. Conductor có thể đề xuất một bản nhạc ban đầu dựa trên ngữ cảnh sản phẩm. Ngoài ra, bạn có thể đề xuất bản nhạc của riêng mình hoặc yêu cầu Conductor đề xuất một bản nhạc.
  2. Xem xét kế hoạch đã tạo: Conductor sẽ tạo index.md, spec.md và plan.md bên trong conductor/tracks/{track-id}/. Dành chút thời gian để đọc các tệp này. Nếu mọi thứ đều ổn, Conductor sẽ nhắc bạn lưu và cam kết các tệp thiết lập ban đầu.

Triển khai bản nhạc

  1. Bắt đầu triển khai:
    /conductor:implement
    Conductor sẽ thực hiện 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ụ: Conductor 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 vòng quay chọn hoạt động.Ứng dụng Picker Wheel
  3. Xem xét quá trình triển khai: Ở bước cuối cùng, bạn có thể yêu cầu Conductor xem xét quá trình triển khai. Conductor sẽ xem xét mã nguồn, đồng bộ hoá tài liệu dự án và lưu trữ bản nhạc.
    /conductor:review

5. Vòng lặp Brownfield: 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 vòng quay chọn từ phần trước để người dùng đã đăng nhập có thể lưu và khôi phục cấu hình vòng quay chọn.

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/gemini-cli-extensions/firebase
  2. Bắt đầu Gemini CLI: Bắt đầu một phiên Gemini CLI mới từ thư mục dự án.
    gemini
  3. Bắt đầu một bản nhạc mới: Bắt đầu một bản nhạc 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 lời nhắc tương tác: Lời nhắc tương tác mà bạn thấy sẽ không khớp chính xác với các 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 làm việc của Conductor.
    • Mục tiêu theo dõi:
      • Nhà cung cấp dịch vụ xác thực → Firebase Auth
      • Cấu hình đã lưu → Tuỳ chọn vòng quay
      • Lưu trữ dữ liệu → Firestore
      • Giao diện người dùng đăng nhập Firestore → Lớp phủ 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.
    /conductor:implement
  7. Xác minh: Tải lại ứng dụng. Bạn sẽ thấy một ứng dụng được cập nhật. Bộ chọn dạng bánh xe có nút Đăng nhập

Dưới đây là mã vàng để tham khảo cách triển khai. Bạn phải cung cấp dự án Firebase trong .firebaserc và cấu hình Firebase trong firebase.ts để bắt đầu ứng dụng đúng cách.

6. Dọn dẹp

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

Xoá dự án Firebase (và dự án Google Cloud)

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

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

Ngoài ra, 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á tính năng xác thực: Chuyển đến Bảng điều khiển Firebase > Xác thựcPhương thức đăng nhập, tắt Google.

7. Xin chúc mừng

Xin chúc mừng! Bạn đã sử dụng thành công tiện ích Conductor của Gemini CLI để 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