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

1. บทนำ

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

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

  • ติดตั้งปลั๊กอิน Conductor ใน Antigravity CLI หรือ Claude Code
  • สร้างเว็บแอป "วงล้อสุ่ม" ตั้งแต่ต้นโดยใช้ความสามารถในการวางแผนและการติดตั้งใช้งานของ 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 แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่

เริ่มต้น 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. ติดตั้งและตรวจสอบสิทธิ์ 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 auth) แล้วตั้งค่าให้เสร็จตามที่ได้รับแจ้ง
  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 โดยตรง
    /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 เพื่อสิ้นสุดเซสชัน CLI แบบสดก่อนดำเนินการต่อ

5. การพัฒนาใหม่: วงล้อสุ่ม

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

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

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

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

# Claude Code
/conductor-setup
  4. ทำตามข้อความแบบอินเทอร์แอกทีฟ ข้อความแบบอินเทอร์แอกทีฟที่คุณเห็นอาจไม่ตรงกับตัวอย่างเหล่านี้ มุ่งเน้นที่การออกแบบที่เรียบง่ายเพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ของ Conductor
    • เป้าหมายผลิตภัณฑ์: เว็บแอปพลิเคชันที่แสดงวงล้อหมุนที่กำหนดค่าได้เพื่อเลือกรายการแบบสุ่มจากรายการ
      • กลุ่มเป้าหมาย → สาธารณชน
      • การโต้ตอบ → แตะ/คลิกเพื่อหมุน
      • การปรับแต่ง → พื้นฐาน
      • แพลตฟอร์ม → Desktop-First
    • หลักเกณฑ์ของผลิตภัณฑ์: สร้างอัตโนมัติ
    • ชุดซอฟต์แวร์โครงสร้างพื้นฐาน:
      • ภาษา → TypeScript/JavaScript - เหมาะสำหรับเว็บแบบฟูลสแต็ก
      • ฟรอนท์เอนด์ → Vue.js - อินเทอร์เฟซเว็บที่ใช้งานง่าย
      • แบ็กเอนด์ → Express.js - แบ็กเอนด์ Node ที่รวดเร็ว
      • ฐานข้อมูล → ไม่มี - ไม่จำเป็นต้องใช้ฐานข้อมูล
    • เวิร์กโฟลว์: มาตรฐาน
    • ข้อกำหนดสำหรับผลิตภัณฑ์
      • เรื่องราวของผู้ใช้ → ตัวเลือกที่ปรับแต่งได้ การแสดงผู้ชนะอย่างชัดเจน
      • ฟีเจอร์หลัก → รายการตัวเลือกที่แก้ไขได้, สีแบบสุ่ม
      • ข้อจำกัด → ฝั่งไคลเอ็นต์เท่านั้น ประสิทธิภาพสูง
      • ไม่ใช่ฟังก์ชันการทำงาน → ความครอบคลุมของการทดสอบสูง, 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 Application
  3. ตรวจสอบการติดตั้งใช้งาน ขั้นตอนสุดท้ายคือการขอให้ Conductor ตรวจสอบการติดตั้งใช้งาน โดยควรตรวจสอบซอร์สโค้ด ซิงโครไนซ์เอกสารประกอบของโปรเจ็กต์ และเก็บถาวรแทร็ก
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

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

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

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

  1. ในตัวอย่าง "Brownfield" ต่อไปนี้ เราจะใช้ Firebase สำหรับการตรวจสอบสิทธิ์และการจัดเก็บ ติดตั้งทักษะ Firebase เพื่อให้ Conductor ใช้ได้
  2. เริ่มตัวแทน 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. ล้างข้อมูล

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

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

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

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

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

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

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

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

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