วางแผนและสร้างแอปด้วยปลั๊กอิน Conductor

1. บทนำ

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

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

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

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

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

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

  • เว็บเบราว์เซอร์ เช่น Chrome
  • โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินแล้ว
  • Node.js แล้ว (แนะนำให้ใช้เวอร์ชัน 18 ขึ้นไป)
  • ตัวแก้ไขโค้ดในเครื่อง เช่น Visual Studio Code
  • Agent การเขียนโค้ด เช่น Antigravity CLI หรือ Claude 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 หากคุณทำงานในเครื่อง ให้ติดตั้ง Firebase CLI โดยทำตามวิธีการ

firebase login

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

firebase projects:addfirebase

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

ออกจาก Cloud Shell

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

3. ติดตั้งและตรวจสอบสิทธิ์ Agent การเขียนโค้ด CLI

ในขั้นตอนนี้ คุณจะต้องเตรียมสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ภายใน โดยติดตั้งและตรวจสอบสิทธิ์ Antigravity CLI หรือ Claude Code ในตัวแก้ไขโค้ดภายในโดยใช้ข้อมูลเข้าสู่ระบบ Google Cloud

ติดตั้งและตรวจสอบสิทธิ์ Antigravity CLI

  1. ติดตั้ง 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. รีสตาร์ทเทอร์มินัล เพื่อให้ระบบเพิ่ม agy ลงใน PATH
  3. ยืนยันการติดตั้ง ว่าได้ติดตั้ง เวอร์ชันล่าสุด แล้ว
    agy --version
  4. ตรวจสอบสิทธิ์ โดยใช้ข้อมูลเข้าสู่ระบบ Google Cloud
    • เริ่ม Antigravity CLI
      agy
    • เมื่อระบบขอให้เลือกวิธีการเข้าสู่ระบบ ให้เลือกใช้โปรเจ็กต์ Google Cloud เปิด URL การให้สิทธิ์ที่ปลอดภัยในเว็บเบราว์เซอร์ ลงชื่อเข้าใช้ด้วยข้อมูลเข้าสู่ระบบที่ได้รับอนุมัติและทำการตรวจสอบสิทธิ์ให้เสร็จสมบูรณ์ เบราว์เซอร์จะแสดงรหัสการให้สิทธิ์ที่เป็นตัวอักษรและตัวเลขที่ไม่ซ้ำกัน คัดลอกรหัสนี้ กลับไปที่เทอร์มินัล แล้ววางลงในพรอมต์
  5. ออกจาก Antigravity CLI พิมพ์ /exit จากเทอร์มินัล CLI เพื่อสิ้นสุดเซสชัน Antigravity CLI แบบสดก่อนดำเนินการต่อ

ติดตั้งและตรวจสอบสิทธิ์ Claude Code

หรือคุณจะใช้ปลั๊กอิน Conductor กับ Claude Code ก็ได้ ในที่นี้ เราจะติดตั้งและตรวจสอบสิทธิ์ Claude Code โดยใช้ข้อมูลเข้าสู่ระบบ Google Cloud

  1. ติดตั้ง Claude Code เวอร์ชันล่าสุด.
  2. ตรวจสอบสิทธิ์ โดยใช้ข้อมูลเข้าสู่ระบบ Google Cloud
    • เริ่ม Claude Code
      claude
    • พิมพ์ /login เพื่อเลือกวิธีการเข้าสู่ระบบ เลือกตัวเลือกแพลตฟอร์มของบุคคลที่สาม · Amazon Bedrock, Microsoft Foundry หรือ Vertex AI และ Google Vertex AI หากต้องการตั้งค่า Google Vertex AI ให้เลือกข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน (การตรวจสอบสิทธิ์ของ Google) แล้วตั้งค่าให้เสร็จสมบูรณ์ตามที่ได้รับแจ้ง
  3. รีสตาร์ท Claude Code

4. ติดตั้งปลั๊กอิน Conductor

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

ติดตั้งใน Antigravity CLI

  1. ติดตั้งปลั๊กอิน:
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. ยืนยันการติดตั้ง:
    • เริ่ม Antigravity CLI
      agy
    • พิมพ์ /conductor แล้วคุณจะเห็นรายการคำสั่ง เช่น /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement เป็นต้น
  3. ออกจาก CLI พิมพ์ /exit จากเทอร์มินัลเพื่อสิ้นสุดเซสชัน CLI แบบสดก่อนดำเนินการต่อ

ติดตั้งใน Claude Code

  1. ลงทะเบียนที่เก็บของมาร์เก็ตเพลสและติดตั้งปลั๊กอิน Conductor ในเซสชัน Claude Code โดยตรง
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. ยืนยันการติดตั้ง โดยทำดังนี้
    • พิมพ์ /conductor แล้วคุณจะเห็นรายการคำสั่ง เช่น /conductor-setup, conductor-new-track, conductor-implement เป็นต้น
  3. ออกจาก CLI พิมพ์ /exit จากเทอร์มินัล Claude Code เพื่อสิ้นสุดเซสชัน CLI แบบสดก่อนดำเนินการต่อ

5. การพัฒนา Greenfield: Picker Wheel

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

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

  1. สร้างและเปลี่ยนเป็นไดเรกทอรีโปรเจ็กต์ใหม่ ตอนนี้เราจะทำงานในโปรเจ็กต์ในไดเรกทอรี picker-wheel สร้างไดเรกทอรีนี้แล้วเปลี่ยนเป็นไดเรกทอรีนี้
    mkdir picker-wheel
cd picker-wheel
  2. เริ่ม Antigravity CLI เริ่มเซสชัน CLI ใหม่จากไดเรกทอรีโปรเจ็กต์ด้วย Antigravity CLI หรือ Claude Code
    # Antigravity CLI
agy

# Claude Code
claude
    • เมื่อระบบถามว่า "คุณเชื่อใจไฟล์ในโฟลเดอร์นี้ไหม" ให้เลือกเชื่อใจโฟลเดอร์ (picker-wheel)
  3. เริ่มต้น Conductor เรียกใช้คำสั่งการตั้งค่าเพื่อสร้างโครงสร้างโปรเจ็กต์และตั้งค่าสภาพแวดล้อม Conductor
    # Antigravity CLI
/conductor:conductor-setup

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

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

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

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

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

  1. เริ่มการติดตั้งใช้งาน
    # Antigravity CLI
/conductor:conductor-implement

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

# Claude Code
/conductor-review

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

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

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

  1. ในตัวอย่าง "Brownfield" ต่อไปนี้ เราจะใช้ Firebase สำหรับการตรวจสอบสิทธิ์และการจัดเก็บข้อมูล ติดตั้งทักษะ Firebase เพื่อให้ Conductor ใช้งานได้
  2. เริ่ม Agent CLI เริ่มเซสชัน CLI ใหม่
    # Antigravity CLI
/new

# Claude Code
/new
  3. เริ่มแทร็กใหม่ เริ่มแทร็กใหม่
    # 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. ทำตามข้อความแจ้งแบบอินเทอร์แอกทีฟ ข้อความแจ้งแบบอินเทอร์แอกทีฟที่คุณเห็นอาจไม่ตรงกับตัวอย่างเหล่านี้ มุ่งเน้นไปที่การออกแบบที่ง่ายขึ้นเพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ Conductor
    • เป้าหมายของแทร็ก:
      • ผู้ให้บริการการตรวจสอบสิทธิ์ → Firebase Auth
      • การกำหนดค่าที่บันทึกไว้ → ตัวเลือกวงล้อ
      • การจัดเก็บข้อมูล → Firestore
      • UI การเข้าสู่ระบบ Firestore → การวางซ้อนแบบโมดัล
    Conductor จะสร้างไฟล์บริบทสำหรับแทร็กใหม่ภายใน conductor/tracks/{track-id}
  5. ตรวจสอบแผนที่สร้างขึ้น โปรดใช้เวลาสักครู่ในการอ่านไฟล์ index.md, spec.md และ plan.md ภายใน conductor/tracks/{track-id}/
  6. ติดตั้งใช้งาน หากทุกอย่างดูดีแล้ว คุณก็เริ่มการติดตั้งใช้งานได้
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. ยืนยัน โหลดแอปพลิเคชันซ้ำ คุณควรเห็นแอปพลิเคชันที่อัปเดตแล้ว วงล้อสุ่มพร้อมการลงชื่อเข้าใช้

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

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

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

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

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

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

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

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

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

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

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

  • สำรวจเอกสารประกอบของปลั๊กอิน Antigravity CLI
  • สำรวจเอกสารประกอบของปลั๊กอิน Claude Code