วางแผนและสร้างแอปด้วย Gemini CLI Conductor

1. บทนำ

ใน codelab นี้ คุณจะได้เรียนรู้วิธีวางแผนและสร้างแอปพลิเคชันซอฟต์แวร์ด้วยส่วนขยาย Gemini CLI Conductor โดยจะเริ่มจากการสร้างแอปพลิเคชัน "greenfield" ตั้งแต่ต้น จากนั้นจะถือว่าแอปพลิเคชันนี้เป็นโปรเจ็กต์ "brownfield" และทำซ้ำเพื่อเพิ่มการตรวจสอบสิทธิ์และการจัดเก็บข้อมูล

สิ่งที่คุณจะได้ทำ

  • ติดตั้ง Gemini CLI และส่วนขยาย Conductor
  • สร้างเว็บแอป "วงล้อสุ่ม" ตั้งแต่ต้นโดยใช้ความสามารถในการวางแผนและการติดตั้งใช้งานของ Conductor
  • เพิ่มการปรับเปลี่ยนในแบบของคุณลงในแอปพลิเคชันโดยเพิ่มการตรวจสอบสิทธิ์และการจัดเก็บข้อมูลโดยใช้ Firebase

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้ส่วนขยาย Conductor เพื่อวางแผน ติดตั้งใช้งาน และตรวจสอบแอปพลิเคชัน "greenfield"
  • วิธีใช้ส่วนขยาย Conductor เพื่อเพิ่มฟีเจอร์ลงในแอปพลิเคชัน "brownfield"

สิ่งที่คุณต้องมี

  • เว็บเบราว์เซอร์ เช่น Chrome
  • โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินแล้ว
  • ติดตั้ง Node.js แล้ว (แนะนำเวอร์ชัน 18 ขึ้นไป)
  • เครื่องมือแก้ไขโค้ดในเครื่อง เช่น Visual Studio Code

2. ก่อนเริ่มต้น

สร้างโปรเจ็กต์ Google Cloud

  1. ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้เลือกหรือสร้างโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google Cloud
  2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้ว

เริ่มต้น Cloud Shell

Cloud Shell คือสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานใน Google Cloud ซึ่งมาพร้อมกับเครื่องมือที่จำเป็น

  1. คลิกเปิดใช้งาน Cloud Shell ที่ด้านบนของคอนโซล Google Cloud
  2. เมื่อเชื่อมต่อกับ Cloud Shell แล้ว ให้ยืนยันการตรวจสอบสิทธิ์โดยทำดังนี้
    gcloud auth list
  3. ยืนยันว่าได้กำหนดค่าโปรเจ็กต์แล้ว
    gcloud config get project
  4. หากโปรเจ็กต์ไม่ได้ตั้งค่าตามที่คาดไว้ ให้ตั้งค่าดังนี้
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

เปิดใช้ API

เปิดใช้ Firebase Management API ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google

gcloud services enable firebase.googleapis.com

เพิ่ม Firebase ลงในโปรเจ็กต์

Firebase CLI ติดตั้งไว้ล่วงหน้าใน Cloud Shell ลงชื่อเข้าใช้ Cloud Shell ด้วยบัญชี Google เดียวกันกับที่ให้สิทธิ์เข้าถึงโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google Cloud หากคุณทำงานในเครื่อง ให้ติดตั้ง Firebase CLI โดยทำตามวิธีการ

firebase login

เรียกใช้คำสั่งต่อไปนี้เพื่อเพิ่ม Firebase ลงในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google

firebase projects:addfirebase

หากคุณเรียกใช้ firebase CLI เป็นครั้งแรก ให้ตอบคำถามที่ระบบถาม

ออกจาก Cloud Shell

คุณสามารถปิดหน้าต่าง Cloud Shell ได้ ในส่วนถัดไป เราจะกำหนดค่าสภาพแวดล้อมในเครื่อง

3. ติดตั้ง Gemini CLI และ Conductor ในเครื่อง

ในขั้นตอนนี้ คุณจะต้องเตรียมสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ในเครื่อง โดยติดตั้ง Gemini CLI และส่วนขยาย Conductor โดยใช้ตัวแก้ไขโค้ดและเทอร์มินัลในเครื่อง

ติดตั้ง Gemini CLI

  1. ติดตั้ง Gemini CLI เวอร์ชันล่าสุดทั่วโลก โดยใช้ npm ดังนี้
    npm install -g @google/gemini-cli
  2. รีสตาร์ทเทอร์มินัล เพื่อให้ระบบเพิ่ม gemini ลงใน PATH
  3. ยืนยันการติดตั้ง ว่าได้ติดตั้ง เวอร์ชันล่าสุด แล้ว
    gemini --version
  4. สร้างและเปลี่ยนเป็นไดเรกทอรีโปรเจ็กต์ใหม่: ในส่วนถัดไป เราจะสร้างโปรเจ็กต์ในไดเรกทอรี picker-wheel สร้างไดเรกทอรีดังกล่าวตอนนี้และเปลี่ยนเป็นไดเรกทอรีนี้
    mkdir picker-wheel
cd picker-wheel
  5. ตรวจสอบสิทธิ์:
    • เริ่ม Gemini CLI
      gemini
    • เมื่อระบบถามว่า "คุณเชื่อถือไฟล์ในโฟลเดอร์นี้ไหม" ให้เลือกเชื่อถือโฟลเดอร์ (picker-wheel)
    • เมื่อระบบถามว่า "คุณต้องการตรวจสอบสิทธิ์สำหรับโปรเจ็กต์นี้ด้วยวิธีใด" ให้เลือก Vertex AI ทำตามคำแนะนำการตรวจสอบสิทธิ์เพื่อรับคีย์ API ของ Google Cloud และตั้งค่าตัวแปรสภาพแวดล้อมGOOGLE_API_KEY ใช้เวลาสักครู่เพื่อสำรวจระดับการใช้งานต่างๆ และขีดจำกัดอัตรา API ที่เกี่ยวข้อง
  6. ออกจาก Gemini CLI: พิมพ์ /quit จากเทอร์มินัล CLI เพื่อสิ้นสุดเซสชัน Gemini CLI ที่ใช้งานอยู่ก่อนดำเนินการต่อ

ติดตั้งส่วนขยาย Conductor

Conductor เป็นส่วนขยาย Gemini CLI แบบโอเพนซอร์สที่ Google สร้างขึ้น ซึ่งช่วยให้ใช้ฟีเจอร์การพัฒนาที่ขับเคลื่อนด้วยบริบท เช่น การวางแผนและการติดตามการติดตั้งใช้งาน

  1. ติดตั้งส่วนขยาย โดยทำดังนี้
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. ยืนยันการติดตั้ง:
    • เริ่ม Gemini CLI 
      gemini
    • พิมพ์ /conductor แล้วคุณจะเห็นรายการคำสั่ง เช่น setup, newTrack, implement เป็นต้น
  3. ออกจาก Gemini CLI: พิมพ์ /quit จากเทอร์มินัล CLI เพื่อสิ้นสุดเซสชัน Gemini CLI ที่ใช้งานอยู่ก่อนดำเนินการต่อ

4. การพัฒนาแบบ Greenfield: วงล้อสุ่ม

เมื่อตั้งค่าสภาพแวดล้อมเรียบร้อยแล้ว คุณจะสร้างแอปพลิเคชันใหม่ตั้งแต่ต้น โดยจะสร้าง "วงล้อสุ่ม" ซึ่งเป็นเว็บแอปขนาดเล็กที่หมุนเพื่อเลือกตัวเลือกแบบสุ่ม

ตั้งค่าบริบทของผลิตภัณฑ์

  1. ยืนยันว่าคุณอยู่ในไดเรกทอรีpicker-wheelที่คุณสร้างขึ้นในส่วนก่อนหน้า โดยทำดังนี้
    pwd
  2. เริ่ม Gemini CLI: เริ่มเซสชัน Gemini CLI ใหม่จากไดเรกทอรีโปรเจ็กต์
    gemini
  3. เริ่มต้น Conductor: เรียกใช้คำสั่ง setup เพื่อสร้างโครงสร้างโปรเจ็กต์และตั้งค่าสภาพแวดล้อม Conductor
    /conductor:setup
  4. ทำตามข้อความแจ้งแบบโต้ตอบ: ข้อความแจ้งแบบโต้ตอบที่คุณเห็นอาจไม่ตรงกับตัวอย่างเหล่านี้ มุ่งเน้นไปที่การออกแบบที่เรียบง่ายเพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ Conductor
    • เป้าหมายของผลิตภัณฑ์: เว็บแอปพลิเคชันที่แสดงวงล้อหมุนที่กำหนดค่าได้เพื่อเลือกรายการแบบสุ่มจากรายการ
      • กลุ่มเป้าหมาย → บุคคลทั่วไป
      • การโต้ตอบ → แตะ/คลิกเพื่อหมุน
      • การปรับแต่ง → พื้นฐาน
      • แพลตฟอร์ม → เดสก์ท็อปเป็นหลัก
    • หลักเกณฑ์ของผลิตภัณฑ์: สร้างอัตโนมัติ
    • ชุดซอฟต์แวร์โครงสร้างพื้นฐาน:
      • ภาษา → TypeScript/JavaScript - เหมาะสำหรับเว็บแบบ Full-Stack
      • ฟรอนท์เอนด์ → Vue.js - อินเทอร์เฟซเว็บที่ใช้งานง่าย
      • แบ็กเอนด์ → Express.js - แบ็กเอนด์ Node ที่รวดเร็ว
      • ฐานข้อมูล → ไม่มี - ไม่จำเป็นต้องมีฐานข้อมูล
    • เวิร์กโฟลว์: มาตรฐาน
    • ข้อกำหนดของผลิตภัณฑ์:
      • เรื่องราวของผู้ใช้ → ตัวเลือกที่ปรับแต่งได้, แสดงผู้ชนะอย่างชัดเจน
      • ฟีเจอร์หลัก → รายการตัวเลือกที่แก้ไขได้, สีแบบสุ่ม
      • ข้อจำกัด → ฝั่งไคลเอ็นต์เท่านั้น, ประสิทธิภาพสูง
      • ไม่ใช่ฟังก์ชัน → การทดสอบครอบคลุมสูง, TypeScript และ Vue.js, การออกแบบที่ตอบสนองตามอุปกรณ์
    Conductor จะสร้างไฟล์บริบทในไดเรกทอรี conductor/

สร้างแทร็กใหม่

"แทร็ก" ใน Conductor แสดงถึงฟีเจอร์หรือหน่วยงาน

  1. เริ่มแทร็กใหม่ โดยใช้ /conductor:newTrack Conductor อาจเสนอแทร็กเริ่มต้นตามบริบทของผลิตภัณฑ์ หรือคุณจะเสนอแทร็กของคุณเองหรือขอให้ Conductor แนะนำแทร็กก็ได้
  2. ตรวจสอบแผนที่สร้างขึ้น: Conductor จะสร้างไฟล์ index.md, spec.md และ plan.md ภายใน conductor/tracks/{track-id}/ ใช้เวลาสักครู่เพื่ออ่านไฟล์ดังกล่าว หากทุกอย่างดูดีแล้ว Conductor จะแจ้งให้คุณบันทึกและคอมมิตไฟล์การตั้งค่าเริ่มต้น

ติดตั้งใช้งานแทร็ก

  1. เริ่มการติดตั้งใช้งาน โดยทำดังนี้
    /conductor:implement
    ตอนนี้ Conductor จะดำเนินการตามแผน โดยเขียนโค้ดสำหรับโปรเจ็กต์
  2. ยืนยันแอปพลิเคชัน: ตลอดระยะเวลาการติดตั้งใช้งาน Conductor จะแจ้งให้คุณทดสอบแอปพลิเคชันด้วยตนเอง เช่น ระบบจะขอให้คุณเปิดเว็บเซิร์ฟเวอร์ในเครื่อง แสดงตัวอย่างแอปพลิเคชันในเบราว์เซอร์ และยืนยันการเปลี่ยนแปลง เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์แล้ว คุณควรเห็นวงล้อสุ่มที่ใช้งานได้Picker Wheel Application
  3. ตรวจสอบการติดตั้งใช้งาน: ในขั้นตอนสุดท้าย คุณสามารถขอให้ Conductor ตรวจสอบการติดตั้งใช้งานได้ โดยระบบจะตรวจสอบซอร์สโค้ด ซิงค์เอกสารประกอบโปรเจ็กต์ และเก็บแทร็ก
    /conductor:review

5. การทำซ้ำแบบ Brownfield: เพิ่มการปรับเปลี่ยนในแบบของคุณ

ตอนนี้คุณจะเปลี่ยนไปเป็นการพัฒนาแบบ "brownfield" โดยจะปรับปรุงเว็บแอปพลิเคชันวงล้อสุ่มจากส่วนก่อนหน้าเพื่อให้ผู้ใช้ที่ลงชื่อเข้าใช้สามารถบันทึกและกู้คืนการกำหนดค่าวางล้อสุ่มได้

สร้างแทร็กการปรับเปลี่ยนในแบบของคุณ

  1. ในตัวอย่าง "brownfield" ต่อไปนี้ เราจะใช้ Firebase สำหรับการตรวจสอบสิทธิ์และการจัดเก็บข้อมูล ติดตั้งส่วนขยาย Gemini CLI Firebase เพื่อให้ Conductor ใช้งานได้
    gemini extensions install https://github.com/firebase/agent-skills
  2. เริ่ม Gemini CLI: เริ่มเซสชัน Gemini CLI ใหม่จากไดเรกทอรีโปรเจ็กต์
    gemini
  3. เริ่มแทร็กใหม่ โดยทำดังนี้
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. ทำตามข้อความแจ้งแบบโต้ตอบ: ข้อความแจ้งแบบโต้ตอบที่คุณเห็นอาจไม่ตรงกับตัวอย่างเหล่านี้ มุ่งเน้นไปที่การออกแบบที่เรียบง่ายเพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ Conductor
    • เป้าหมายของแทร็ก:
      • ผู้ให้บริการการตรวจสอบสิทธิ์ → Firebase Auth
      • การกำหนดค่าที่บันทึกไว้ → ตัวเลือกวงล้อ
      • การจัดเก็บข้อมูล → Firestore
      • UI การเข้าสู่ระบบ Firestore → การวางซ้อนแบบโมดัล
    Conductor จะสร้างไฟล์บริบทสำหรับแทร็กใหม่ภายใน conductor/tracks/{track-id}
  5. ตรวจสอบแผนที่สร้างขึ้น: ใช้เวลาสักครู่เพื่ออ่านไฟล์ index.md, spec.md และ plan.md ภายใน conductor/tracks/{track-id}/
  6. ติดตั้งใช้งาน: หากทุกอย่างดูดีแล้ว คุณก็เริ่มการติดตั้งใช้งานได้
    /conductor:implement
  7. ยืนยัน: โหลดแอปพลิเคชันซ้ำ คุณควรเห็นแอปพลิเคชันที่อัปเดตแล้ว วงล้อสุ่มพร้อมการลงชื่อเข้าใช้

นี่คือโค้ดที่สมบูรณ์แบบสำหรับการติดตั้งใช้งานอ้างอิง คุณต้องระบุโปรเจ็กต์ Firebase ใน .firebaserc และการกำหนดค่า Firebase ใน firebase.ts เพื่อเริ่มแอปพลิเคชันอย่างถูกต้อง

6. ล้างข้อมูล

หากต้องการหลีกเลี่ยงการเรียกเก็บเงินอย่างต่อเนื่องกับบัญชี Google Cloud ให้ลบทรัพยากรที่สร้างขึ้นระหว่าง codelab นี้

ลบโปรเจ็กต์ Firebase (และโปรเจ็กต์ Google Cloud)

วิธีที่ง่ายที่สุดในการล้างข้อมูลคือการลบโปรเจ็กต์ทั้งหมด

  1. ในคอนโซล Google Cloud ให้เลือกโปรเจ็กต์ที่สร้างขึ้น
  2. คลิกลบ

หรือหากต้องการเก็บโปรเจ็กต์ไว้แต่ลบทรัพยากร ให้ทำดังนี้

  1. ลบฐานข้อมูล Firestore: ไปที่ คอนโซล Firebase > Firestore แล้วลบฐานข้อมูล
  2. ลบการตรวจสอบสิทธิ์: ไปที่ คอนโซล Firebase > การตรวจสอบสิทธิ์วิธีการลงชื่อเข้าใช้ แล้วปิดใช้ Google

7. ขอแสดงความยินดี

ขอแสดงความยินดี คุณใช้ส่วนขยาย Gemini CLI Conductor เพื่อสร้างเว็บแอปพลิเคชันตั้งแต่ต้นและทำซ้ำด้วยฟีเจอร์ที่ซับซ้อน เช่น การตรวจสอบสิทธิ์และการผสานรวมฐานข้อมูล ได้สำเร็จแล้ว

ขั้นตอนถัดไป