วิธีใช้ทักษะของเอเจนต์ AI (ด้วย Antigravity CLI และทักษะของเอเจนต์สำหรับ Firebase)

1. บทนำ

ในแล็บนี้ คุณจะได้เรียนรู้วิธีสร้าง ทักษะ Agent เพื่อให้ AI Agent เข้าถึงความรู้และเวิร์กโฟลว์ที่กำหนดเองได้ โดยจะสร้างเป็นทักษะในเครื่องที่เข้าถึงได้จาก Antigravity CLI

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

• สร้างทักษะ Agent ของคุณเองสำหรับสิ่งที่คุณชื่นชอบ
• ใช้ Antigravity CLI เพื่อค้นหาทักษะ
• ติดตั้งทักษะ Agent อย่างเป็นทางการสำหรับ Firebase และใช้ทักษะเหล่านั้นเพื่อสร้างและทำให้แอปใช้งานได้

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

• วิธีจัดโครงสร้างทักษะ
• วิธีเขียนไฟล์ SKILL.md
• วิธีใช้ทักษะในเครื่องกับ Antigravity CLI

2. การตั้งค่าโปรเจ็กต์

1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
   • ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจำกัดที่ป้องกันไม่ให้คุณเปิดใช้ API ที่จำเป็นสำหรับแล็บนี้
2. ลงชื่อเข้าใช้ คอนโซล Google Cloud
3. เปิดใช้การเรียกเก็บเงินใน Cloud Console
   • การทำแล็บนี้ให้เสร็จสมบูรณ์ควรมีค่าใช้จ่ายทรัพยากร Cloud ไม่เกิน $1 USD
   • คุณสามารถทำตามขั้นตอนที่ส่วนท้ายของแล็บนี้เพื่อลบทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม
   • ผู้ใช้ใหม่มีสิทธิ์รับช่วงทดลองใช้ฟรีมูลค่า $300 USD
4. สร้างโปรเจ็กต์ใหม่ หรือเลือกใช้โปรเจ็กต์ที่มีอยู่ซ้ำ
   • หากเห็นข้อผิดพลาดเกี่ยวกับโควต้าโปรเจ็กต์ ให้ใช้โปรเจ็กต์ที่มีอยู่ซ้ำหรือลบโปรเจ็กต์ที่มีอยู่เพื่อสร้างโปรเจ็กต์ใหม่

3. เปิด Cloud Shell Editor

1. คลิกลิงก์นี้เพื่อไปยัง Cloud Shell Editor โดยตรง
2. หากระบบแจ้งให้ให้สิทธิ์ในวันนี้ ให้คลิก ให้สิทธิ์ เพื่อดำเนินการต่อ
3. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดโดยทำดังนี้
   • คลิกดู
   • คลิก Terminal
4. ตั้งค่าโปรเจ็กต์ในเทอร์มินัลด้วยคำสั่งนี้
   • รูปแบบ:

     gcloud config set project [PROJECT_ID]
     

   • ตัวอย่าง

     gcloud config set project lab-project-id-example
     

   • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
     • คุณสามารถแสดงรหัสโปรเจ็กต์ทั้งหมดได้ด้วยคำสั่งต่อไปนี้

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
5. คุณควรเห็นข้อความต่อไปนี้

   Updated property [core/project].
   

   หากเห็น WARNING และระบบถามว่า Do you want to continue (Y/n)? แสดงว่าคุณป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง ให้กด n แล้วกด Enter จากนั้นลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

4. สร้างทักษะที่กำหนดเอง

ทักษะ Agent คือไดเรกทอรีที่มีไฟล์ SKILL.md อย่างน้อย 1 ไฟล์ ซึ่งมีคำแนะนำและความรู้สำหรับ AI Agent ในส่วนนี้ คุณจะได้สร้างทักษะที่จะสอน Antigravity CLI เกี่ยวกับสิ่งที่คุณชื่นชอบ

1. สร้างไดเรกทอรีสำหรับแล็บนี้แล้วไปยังไดเรกทอรีดังกล่าวโดยทำดังนี้

   mkdir ~/agent-skills-lab && cd ~/agent-skills-lab
   

2. สร้างไดเรกทอรีสำหรับทักษะโปรเจ็กต์โดยทำดังนี้

   mkdir -p ~/agent-skills-lab/.agents/skills/my-favorite-things
   

3. สร้างและเปิดไฟล์ SKILL.md ใหม่สำหรับทักษะโดยทำดังนี้

   cloudshell edit ~/agent-skills-lab/.agents/skills/my-favorite-things/SKILL.md
   

   คำสั่ง cloudshell edit จะเปิดไฟล์ SKILL.md ในตัวแก้ไขเหนือเทอร์มินัล
4. เพิ่มเนื้อหาต่อไปนี้ลงในไฟล์ SKILL.md

   ---
   name: my-favorite-things
   description: Provides personal information about my favorite color, food, and programming language. Use this skill when the user asks questions about my personal preferences or favorite things.
   ---
   
   # Knowledge
   
   - **Favorite Color:** Blue
   - **Favorite Food:** Pizza
   - **Favorite Programming Language:** Python
   
   If asked about one of my favorite things, please respond with the information provided above.
   

คุณได้สร้างทักษะแรกแล้วโดยใช้เพียงไฟล์ SKILL.md เท่านั้น ตอนนี้ก็ถึงเวลาใช้ทักษะนี้ใน Antigravity CLI

5. ใช้ทักษะจาก Antigravity CLI

เมื่อสร้างทักษะเรียบร้อยแล้ว Antigravity CLI จะค้นพบทักษะนี้ได้ทันทีเนื่องจากทักษะอยู่ในไดเรกทอรี .agents/skills

1. เริ่ม Antigravity CLI โดยทำดังนี้

   agy
   

หมายเหตุ: Antigravity CLI ติดตั้งไว้ล่วงหน้าใน Cloud Shell

1. ตรวจสอบสิทธิ์ด้วย Antigravity CLI: ระบบจะขอให้ตรวจสอบสิทธิ์ในระหว่างการเริ่มต้นครั้งแรก เลือก OAuth (กด Enter)
2. คลิกลิงก์ (หากคลิกไม่ได้ ให้ไฮไลต์ URL ใน Cloud Shell เพื่อคัดลอก จากนั้นวางลงในเบราว์เซอร์)
3. ลงชื่อเข้าใช้บัญชี Google
4. คัดลอกโค้ด
5. วางโค้ดลงในเทอร์มินัล Cloud Shell Editor
6. กด Enter.
7. กด Enter เพื่อยอมรับการตั้งค่าเริ่มต้นบางอย่าง
8. ให้ Antigravity CLI แสดงรายการทักษะที่พร้อมใช้งานในบริบทของทักษะ

   /skills
   

   คุณควรเห็น my-favorite-things ในรายการทักษะที่พร้อมใช้งาน
9. กด ESC เพื่อออกจากมุมมองทักษะ
10. ถาม Antigravity CLI เกี่ยวกับสีที่คุณชื่นชอบโดยทำดังนี้

    What is my favorite color?
    

    Antigravity CLI ควรใช้ทักษะ my-favorite-things เพื่อตอบคำถามของคุณ หากได้รับข้อความแจ้ง ให้อนุญาต Antigravity CLI ให้ใช้ทักษะ

เอาต์พุตควรแสดงว่า Antigravity CLI ใช้ทักษะของคุณและตอบกลับด้วยข้อความ เช่น "สีฟ้า" หรือ "สีที่ฉันชื่นชอบคือสีฟ้า"

คุณทำได้แล้ว คุณได้สร้างทักษะและทดสอบทักษะโดยใช้ Antigravity CLI เรียบร้อยแล้ว

เมื่อพร้อมที่จะสิ้นสุดเซสชัน ให้พิมพ์ /exit แล้วกด Enter เพื่อออกจาก Antigravity CLI

6. (ไม่บังคับ) สร้างและทำให้แอปพลิเคชันใช้งานได้กับโฮสติ้งของ Firebase

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

ทักษะ Agent สำหรับ Firebase เป็นตัวอย่างที่ดีของโมดูลแบบพกพาเหล่านี้ โดยได้รับการออกแบบมาเพื่อช่วยให้ผู้ช่วย AI เข้าใจแนวทางปฏิบัติแนะนำของ Firebase และทำงานที่ซับซ้อนได้อย่างแม่นยำมากขึ้นและมีค่าใช้จ่ายโทเค็นต่ำลง

ตอนนี้ให้ใช้ทักษะ Agent สำหรับ Firebase เพื่อสร้างเว็บแอปพลิเคชัน "สิ่งที่ต้องทำ" พร้อมการตรวจสอบสิทธิ์ผู้ใช้และฐานข้อมูล แล้วทำให้ใช้งานได้กับโฮสติ้งของ Firebase

ตั้งค่าโปรเจ็กต์

1. หากยังอยู่ใน Antigravity CLI ให้พิมพ์ /exit เพื่อออก
2. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์แล้วไปยังไดเรกทอรีดังกล่าวโดยทำดังนี้

   mkdir ~/todo-app && cd ~/todo-app
   

3. เข้าสู่ระบบ Firebase โดยใช้บัญชี Google ใช้แฟล็ก --no-localhost เนื่องจากคุณอยู่ใน Cloud Shell โดยทำดังนี้

   firebase login --no-localhost
   

   1. โต้ตอบกับข้อความแจ้งของ CLI:
      • เมื่อระบบถามว่า Enable Gemini in Firebase features? ให้พิมพ์ Y (สำหรับ Yes) แล้วกด Enter
      • เมื่อระบบถามว่า Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? ให้พิมพ์ Y (สำหรับ Yes) แล้วกด Enter
   2. ให้สิทธิ์ในเบราว์เซอร์:
      • คุณจะเห็น URL ในเทอร์มินัล คลิกลิงก์ (หากคลิกไม่ได้ ให้ไฮไลต์ URL ใน Cloud Shell เพื่อคัดลอก จากนั้นวางลงในเบราว์เซอร์) เพื่อเปิดหน้าเข้าสู่ระบบในแท็บเบราว์เซอร์ใหม่
      • ขั้นตอนที่ 1 จาก 3 (ยืนยันคำสั่ง): คลิก Yes, I just ran this command
      • ขั้นตอนที่ 2 จาก 3 (ยืนยันรหัสเซสชัน): ตรวจสอบว่ารหัสเซสชัน ตรงกับที่แสดงในเทอร์มินัล แล้วคลิก Yes, this is my session ID
      • ขั้นตอนที่ 3 จาก 3 (คัดลอกโค้ด): คลิกคัดลอก เพื่อคัดลอกรหัสการให้สิทธิ์ไปยังคลิปบอร์ด
   3. เข้าสู่ระบบให้เสร็จสมบูรณ์:
      • กลับไปที่เทอร์มินัล Cloud Shell แล้ววางรหัสการให้สิทธิ์ ที่ข้อความแจ้ง ? Enter authorization code:
      • กด Enter
   คุณควรเห็นข้อความแสดงความสำเร็จ ✔ Success! Logged in as

เคล็ดลับ: เมื่อวางรหัสการให้สิทธิ์ลงใน Cloud Shell ให้สังเกตกล่องโต้ตอบของ Chrome ที่ขอสิทธิ์เข้าถึงคลิปบอร์ดและตรวจสอบว่าได้เปิดใช้สิทธิ์ดังกล่าวแล้ว คุณสามารถใช้ Ctrl+Shift+V (Windows) หรือ CMD+Shift+V (Mac) เพื่อวางโค้ดลงในเทอร์มินัล

ติดตั้งทักษะ Agent สำหรับ Firebase

เมื่อสร้างไดเรกทอรีโปรเจ็กต์แล้ว คุณควรติดตั้งทักษะ Agent สำหรับ Firebase ภายในไดเรกทอรีดังกล่าว

คุณสามารถติดตั้งทักษะ Agent สำหรับ Firebase ได้ด้วย CLI ของทักษะ ในเทอร์มินัลโดยทำดังนี้

npx skills add firebase/agent-skills

ระหว่างการติดตั้ง ระบบจะแจ้งให้คุณเลือกทักษะที่จะติดตั้ง ใช้ปุ่มลูกศร เพื่อเลื่อนดูรายการและแป้นเว้นวรรค เพื่อเลือกทักษะต่อไปนี้

• firebase-auth-basics
• firebase-basics
• firebase-firestore
• firebase-hosting-basics
• firebase-security-rules-auditor

สำหรับข้อความแจ้งถัดไป คุณสามารถยอมรับค่าเริ่มต้นได้อย่างปลอดภัยโดยกด Enter

คำสั่งนี้จะดาวน์โหลดและติดตั้งทักษะต่างๆ รวมถึง firebase-basics และ firebase-hosting-basics ซึ่งจะทำให้ทักษะเหล่านี้พร้อมใช้งานใน Antigravity CLI ควบคู่ไปกับทักษะ my-favorite-things

ดูข้อมูลเพิ่มเติมเกี่ยวกับทักษะ Agent สำหรับ Firebase ได้ที่ ทักษะที่พร้อมใช้งาน

สร้างและทำให้เว็บแอปพื้นฐานใช้งานได้

1. เปิดใช้ API ที่จำเป็นสำหรับโปรเจ็กต์โดยทำดังนี้

   gcloud services enable \
     cloudresourcemanager.googleapis.com \
     firebase.googleapis.com
   

2. เปิดใช้ Firebase ในโปรเจ็กต์ Google Cloud ปัจจุบันโดยทำดังนี้

   firebase projects:addfirebase ${GOOGLE_CLOUD_PROJECT}
   

3. เริ่ม Antigravity CLI โดยทำดังนี้

   agy
   

4. ขอให้ Antigravity CLI สร้าง index.html พื้นฐานโดยทำดังนี้

   Generate an index.html file with the content "Hello Firebase Hosting" and
   deploy the application to Firebase Hosting using the current Google Cloud
   Project.
   

   Antigravity CLI จะขอสิทธิ์ขณะสร้างและทำให้แอปพลิเคชันใช้งานได้ กด Enter เพื่ออนุญาตให้ดำเนินการดังกล่าว หรือคุณอาจต้องพิมพ์ "approve" แล้วกด Enter Antigravity CLI ควรใช้ทักษะ Agent สำหรับ Firebase เพื่อสร้างและทำให้เว็บไซต์ใช้งานได้ แนะนำ Agent พร้อมการอนุมัติตามความจำเป็น

เมื่อทำให้ใช้งานได้เสร็จแล้ว ระบบควรแสดง URL สำหรับเว็บแอปของคุณ ให้ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ทำให้ใช้งานได้

เพิ่มการตรวจสอบสิทธิ์ Firebase

1. เริ่ม Antigravity CLI หากยังไม่ได้เริ่มโดยทำดังนี้

   agy
   

   Antigravity CLI อาจถามคำถาม เช่น "Do you trust this folder?" กด Enter เพื่อยอมรับค่าเริ่มต้น
2. ตอนนี้ให้ขอให้ Antigravity CLI เพิ่มการลงชื่อเข้าใช้ด้วยบัญชี Google โดยทำดังนี้

   Generate HTML, CSS, and Javascript for a single page application.
   It should use Google Sign-in with Firebase Authentication.
   A user should be able to sign in with their Google Account.
   Deploy when you are done and give the URL to me.
   

   Antigravity CLI อาจขอสร้างหรืออัปเดตไฟล์ เช่น index.html, style.css และ script.js ให้อนุญาตให้ดำเนินการดังกล่าว Antigravity CLI อาจขอให้คุณดำเนินการบางอย่างในคอนโซล Firebase CLI สามารถดำเนินการส่วนใหญ่ได้หากคุณขอให้ลอง แต่คุณอาจต้องทำตามขั้นตอนด้วยตนเอง (เช่น การเปิดใช้ Google OAuth) หากอินสแตนซ์ Cloud Shell ติดตั้ง Firebase CLI เวอร์ชันเก่า

เมื่อทำให้ใช้งานได้เสร็จแล้ว ระบบควรแสดง URL สำหรับเว็บแอปของคุณ ให้ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ทำให้ใช้งานได้

หากต้องการดูการเปลี่ยนแปลงล่าสุด คุณอาจต้อง "รีเฟรชใหม่ทั้งหมด" โดยกด ctrl+shift+R (Windows/Linux) หรือ cmd+shift+R (Mac)

เพิ่ม Cloud Firestore

1. เริ่ม Antigravity CLI หากยังไม่ได้เริ่มโดยทำดังนี้

   agy
   

   Antigravity CLI อาจถามคำถาม เช่น "Do you trust this folder?" กด Enter เพื่อยอมรับค่าเริ่มต้น
2. ขอให้ Antigravity CLI เพิ่ม Firestore เพื่อบันทึกงานโดยทำดังนี้

   Update the application to save tasks in Cloud Firestore for the signed-in user.
   A user should be able to add new tasks and see a list of their tasks.
   Deploy when you are done and give the URL to to me.
   

   Antigravity CLI จะอัปเดตไฟล์ ให้อนุญาตให้ดำเนินการดังกล่าว

เมื่อทำให้ใช้งานได้เสร็จแล้ว ระบบควรแสดง URL สำหรับเว็บแอปของคุณ ให้ใช้ ctrl+click (Windows/Linux) หรือ cmd+click (Mac) เพื่อเปิดลิงก์ในเทอร์มินัล Cloud Shell Editor ไปที่ URL ของแอปที่ทำให้ใช้งานได้

หากต้องการดูการเปลี่ยนแปลงล่าสุด คุณอาจต้อง "รีเฟรชใหม่ทั้งหมด" โดยกด ctrl+shift+R (Windows/Linux) หรือ cmd+shift+R (Mac)

หากแอปพลิเคชันไม่ทำงานตามที่คาดไว้ ให้ใช้ Antigravity CLI ต่อไปเพื่อให้ได้ฟังก์ชันการทำงานที่ต้องการ ตัวอย่าง: shell Hide the task form when the user is logged out. Update the security rules so the user can see their TODOs.

ลองใช้แล็บต่อไปเพื่อเพิ่มฟีเจอร์ที่คุณต้องการเห็นในแอปพลิเคชัน Firebase ใหม่

7. บทสรุป

ยินดีด้วย คุณได้สร้างทักษะและเรียนรู้วิธีติดตั้งทักษะเพิ่มเติมสำหรับ Antigravity CLI เรียบร้อยแล้ว

(ไม่บังคับ) ล้างข้อมูล

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

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

gcloud projects delete $GOOGLE_CLOUD_PROJECT

นอกจากนี้ คุณยังลบทรัพยากรที่ไม่จำเป็นออกจากดิสก์ Cloud Shell เพื่อเพิ่มพื้นที่ว่างได้ด้วย

1. ลบไดเรกทอรีแล็บ (ซึ่งจะลบทั้งทักษะและแอป) โดยทำดังนี้

   rm -rf ~/agent-skills-lab
   

2. ลบไดเรกทอรีแอปพลิเคชัน "สิ่งที่ต้องทำ" (หากคุณสร้างไว้ภายนอก) โดยทำดังนี้

   rm -rf ~/todo-app
   

หากต้องการรีเซ็ต Cloud Shell เป็นสถานะเริ่มต้น คุณสามารถทำตามเอกสารประกอบอย่างเป็นทางการเพื่อดูวิธีการดำเนินการอย่างปลอดภัย