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

1. บทนำ

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

สิ่งที่คุณต้องดำเนินการ

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

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

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

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

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

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

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

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

เริ่มต้น Cloud Shell

การใช้ Cloud Shell ช่วยให้เราทำส่วนนี้ให้เสร็จสมบูรณ์ได้โดยไม่ต้องติดตั้งเครื่องมือ CLI ของ gcloud และ firebase ในเครื่อง

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
   

   หากเห็นข้อผิดพลาดเกี่ยวกับสิทธิ์ คุณอาจต้องใช้เครื่องมือจัดการเวอร์ชัน เช่น nvm หรือเรียกใช้คำสั่งนี้ในฐานะรูทโดยใช้ sudo

2. รีสตาร์ทเทอร์มินัลเพื่อให้ระบบเพิ่ม gemini ลงใน PATH
3. ยืนยันการติดตั้งว่าได้ติดตั้งเวอร์ชันล่าสุดแล้ว

   gemini --version
   

4. สร้างและเปลี่ยนไปใช้ไดเรกทอรีโปรเจ็กต์ใหม่: ในส่วนถัดไป เราจะสร้างโปรเจ็กต์ในไดเรกทอรี picker-wheel สร้างไดเรกทอรีนั้นตอนนี้และเปลี่ยนเป็นไดเรกทอรีนี้

   mkdir picker-wheel
   cd picker-wheel
   

5. ตรวจสอบสิทธิ์:
   • เริ่มใช้ Gemini CLI

     gemini
     

   • เมื่อระบบถามว่า "คุณเชื่อถือไฟล์ในโฟลเดอร์นี้ไหม" ให้เลือกเชื่อถือโฟลเดอร์ (ตัวเลือกแบบวงล้อ)
   • เมื่อระบบถามว่า "คุณต้องการตรวจสอบสิทธิ์สำหรับโปรเจ็กต์นี้อย่างไร" ให้เลือก 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. การพัฒนาใหม่: วงล้อตัวเลือก

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

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

1. ยืนยันว่าคุณอยู่ในpicker-wheel ไดเรกทอรีที่คุณสร้างไว้ในส่วนก่อนหน้า

   pwd
   

2. เริ่ม Gemini CLI: เริ่มเซสชัน Gemini CLI ใหม่จากไดเรกทอรีโปรเจ็กต์

   gemini
   

3. เริ่มต้น Conductor: เรียกใช้คำสั่งการตั้งค่าเพื่อสร้างโครงร่างโปรเจ็กต์และตั้งค่าสภาพแวดล้อม Conductor

   /conductor:setup
   

4. ทำตามข้อความแบบอินเทอร์แอกทีฟ: ข้อความแบบอินเทอร์แอกทีฟที่คุณเห็นจะไม่ตรงกับตัวอย่างเหล่านี้ทุกประการ มุ่งเน้นที่การออกแบบที่เรียบง่ายเพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ของ Conductor
   • เป้าหมายผลิตภัณฑ์: เว็บแอปพลิเคชันที่แสดงวงล้อหมุนที่กำหนดค่าได้เพื่อเลือกรายการแบบสุ่มจากรายการ
     • กลุ่มเป้าหมาย → สาธารณชน
     • การโต้ตอบ → แตะ/คลิกเพื่อหมุน
     • การปรับแต่ง → พื้นฐาน
     • แพลตฟอร์ม → Desktop-First
   • หลักเกณฑ์ของผลิตภัณฑ์: สร้างอัตโนมัติ
   • ชุดซอฟต์แวร์โครงสร้างพื้นฐาน:
     • ภาษา → TypeScript/JavaScript - เหมาะสำหรับเว็บแบบฟูลสแต็ก
     • ฟรอนท์เอนด์ → 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 จะทำงานตามแผนโดยเขียนโค้ดสำหรับโปรเจ็กต์

   เคล็ดลับ: เพื่อไม่ให้ติดอยู่ในเชลล์แบบอินเทอร์แอกทีฟหรือกระบวนการที่ใช้เวลานาน (เช่น เซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์หรือโปรแกรมตรวจสอบการทดสอบ) เราต้องตรวจสอบว่า Conductor รู้ว่าจะจัดการคำสั่งที่เฉพาะเจาะจงเหล่านี้อย่างไร เครื่องมืออย่าง Vite (npm run dev) และ Vitest (npm run test) มักจะทำงานใน "โหมดดู" โดยค่าเริ่มต้น ซึ่งจะทำให้กระบวนการเปิดอยู่เรื่อยๆ คุณสามารถสั่งให้ Conductor ปิดใช้โหมดดูหรือใช้ is_background: true เมื่อเรียกใช้คำสั่งได้โดยการอัปเดต workflow.md

2. ยืนยันแอปพลิเคชัน: ตลอดระยะการติดตั้งใช้งาน Conductor จะแจ้งให้คุณทดสอบแอปพลิเคชันด้วยตนเอง เช่น ระบบจะขอให้คุณเปิดเว็บเซิร์ฟเวอร์ในเครื่อง แสดงตัวอย่างแอปพลิเคชันในเบราว์เซอร์ และยืนยันการเปลี่ยนแปลง เมื่อติดตั้งใช้งานเสร็จแล้ว คุณควรเห็นวงล้อตัวเลือกที่ใช้งานได้

   การแก้ปัญหา: หากโค้ดที่สร้างขึ้นทํางานไม่เป็นไปตามที่คาดไว้ ให้ตรวจสอบconductor/tracks/.../plan.mdเพื่อดูว่ามีขั้นตอนใดที่ข้ามไปหรือมีข้อผิดพลาดหรือไม่

3. ตรวจสอบการติดตั้งใช้งาน: ขั้นตอนสุดท้ายคือคุณขอให้ Conductor ตรวจสอบการติดตั้งใช้งานได้ โดยควรตรวจสอบซอร์สโค้ด ซิงโครไนซ์เอกสารประกอบของโปรเจ็กต์ และเก็บถาวรแทร็ก

   /conductor:review
   

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

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

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

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

1. ในตัวอย่าง "Brownfield" ต่อไปนี้ เราจะใช้ Firebase สำหรับการตรวจสอบสิทธิ์และการจัดเก็บ ติดตั้ง Firebase extension ของ Gemini CLI เพื่อให้ Conductor ใช้ได้

   gemini extensions install https://github.com/gemini-cli-extensions/firebase
   

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}/

   เคล็ดลับ: เราขอแนะนำให้คุณสนทนากับ Gemini เพื่อทำความเข้าใจและพูดคุยเกี่ยวกับแผนให้มากที่สุดก่อนที่จะดำเนินการต่อ

6. ติดตั้งใช้งาน: หากทุกอย่างดูดีแล้ว คุณก็เริ่มติดตั้งใช้งานได้

   /conductor:implement
   

7. ยืนยัน: โหลดแอปพลิเคชันอีกครั้ง คุณจะเห็นแอปพลิเคชันที่อัปเดตแล้ว

   ในกรณีที่ AI ติดขัดกับการทดสอบการติดตั้งใช้งานการตรวจสอบสิทธิ์ โปรดอย่าลืมเปิดใช้Google Sign-In ในคอนโซล Firebase ภายในการตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้

   

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

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

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

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

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

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

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

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

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

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

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

• สำรวจโหมดแพ็กเกจ Gemini CLI สำหรับการวางแผนแบบเบา
• สำรวจส่วนขยาย Gemini CLI เพิ่มเติม