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

1. บทนำ

รูปภาพปกของ Agent Skills Lab

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

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

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

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

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

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

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

3. เปิดเครื่องมือแก้ไข Cloud Shell

คลิกลิงก์นี้เพื่อไปยัง Cloud Shell Editor โดยตรง
หากระบบแจ้งให้ให้สิทธิ์ในวันนี้ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ
หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดโดยทำดังนี้
- คลิกดู
- คลิก Terminal
ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
- รูปแบบ:
```
gcloud config set project [PROJECT_ID]
```
- ตัวอย่าง
```
gcloud config set project lab-project-id-example
```
- หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
  - คุณแสดงรหัสโปรเจ็กต์ทั้งหมดได้โดยใช้คำสั่งต่อไปนี้
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
คุณควรเห็นข้อความต่อไปนี้
```
Updated property [core/project].
```
หากเห็น WARNING และระบบขอให้คุณ Do you want to continue (Y/n)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด n กด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

4. สร้างทักษะ "สิ่งที่ฉันชอบ"

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

สร้างไดเรกทอรีสำหรับแล็บนี้แล้วไปที่ไดเรกทอรีดังกล่าว
```
mkdir ~/agent-skills-lab && cd ~/agent-skills-lab
```
สร้างไดเรกทอรีสำหรับทักษะของโปรเจ็กต์โดยใช้คำสั่งต่อไปนี้
```
mkdir -p ~/agent-skills-lab/.agents/skills/my-favorite-things
```
สร้างและเปิดไฟล์ SKILL.md ใหม่สำหรับทักษะของคุณ
```
cloudshell edit ~/agent-skills-lab/.agents/skills/my-favorite-things/SKILL.md
```
คำสั่ง cloudshell edit จะเปิดไฟล์ SKILL.md ในเครื่องมือแก้ไขเหนือเทอร์มินัล

เพิ่มเนื้อหาต่อไปนี้ลงในไฟล์ 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 เพียงไฟล์เดียว ถึงเวลาใช้ทักษะนี้ใน Gemini CLI แล้ว

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

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

เริ่มใช้ Gemini CLI
```
gemini
```
คุณควรเห็น Gemini CLI รู้จักทักษะใหม่ คุณอาจต้องกด Enter เพื่อยอมรับการตั้งค่าเริ่มต้นบางอย่าง

ให้ Gemini แสดงรายการทักษะที่พร้อมใช้งานในบริบทของตัวเอง
```
/skills
```
คุณควรเห็น my-favorite-things ในรายการทักษะที่พร้อมใช้งาน
ถาม Gemini เกี่ยวกับสีโปรดของคุณ
```
What is my favorite color?
```
Gemini CLI ควรใช้ทักษะ my-favorite-things เพื่อตอบคำถามของคุณ หากได้รับข้อความแจ้ง ให้อนุญาตให้ Gemini CLI ใช้ทักษะ

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

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

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

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

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

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

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

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

หากยังอยู่ใน Gemini CLI ให้พิมพ์ /quit เพื่อออก
สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์และไปที่ไดเรกทอรีนั้น
```
mkdir ~/todo-app && cd ~/todo-app
```
เข้าสู่ระบบ Firebase โดยใช้บัญชี Google ใช้แฟล็ก --no-localhost เนื่องจากคุณอยู่ใน Cloud Shell
```
firebase login --no-localhost
```
1. โต้ตอบกับข้อความแจ้งของ CLI
  - เมื่อระบบถาม Enable Gemini in Firebase features? ให้พิมพ์ Y (สำหรับ "ใช่") แล้วกด Enter
  - เมื่อระบบถาม Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? ให้พิมพ์ Y (สำหรับ "ใช่") แล้วกด Enter
2. ให้สิทธิ์ในเบราว์เซอร์
  - คุณจะเห็น URL ในเทอร์มินัล คลิกลิงก์เพื่อเปิดหน้าเข้าสู่ระบบในแท็บเบราว์เซอร์ใหม่
  - ขั้นตอนที่ 1 จาก 3 (ยืนยันคำสั่ง): คลิกใช่ ฉันเพิ่งเรียกใช้คำสั่งนี้
  - ขั้นตอนที่ 2 จาก 3 (ยืนยันรหัสเซสชัน): ตรวจสอบว่ารหัสเซสชันตรงกับที่แสดงในเทอร์มินัล แล้วคลิกใช่ นี่คือรหัสเซสชันของฉัน
  - ขั้นตอนที่ 3 จาก 3 (คัดลอกโค้ด): คลิกคัดลอกเพื่อคัดลอกรหัสการให้สิทธิ์ไปยังคลิปบอร์ด
3. เข้าสู่ระบบให้เสร็จสมบูรณ์
  - กลับไปที่เทอร์มินัล Cloud Shell แล้ววางรหัสการให้สิทธิ์ที่พรอมต์ ? Enter authorization code:
  - กด Enter
คุณควรเห็นข้อความแสดงความสำเร็จ: ✔ Success! Logged in as

ติดตั้งทักษะของเอเจนต์สำหรับ Firebase

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

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

npx skills add firebase/agent-skills

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

firebase-basics
firebase-hosting-basics
firebase-auth-basics
firebase-firestore-enterprise-native-mode

เลือกทักษะ Firebase 4 รายการ

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

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

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

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

เปิดใช้ API ที่จำเป็นสำหรับโปรเจ็กต์ของคุณ
```
gcloud services enable \
  cloudresourcemanager.googleapis.com \
  firebase.googleapis.com
```
วิธีเปิดใช้ Firebase ในโปรเจ็กต์ Google Cloud ปัจจุบัน
```
firebase projects:addfirebase ${GOOGLE_CLOUD_PROJECT}
```
เริ่มใช้ Gemini CLI
```
gemini
```
ขอความช่วยเหลือจาก Gemini เพื่อสร้าง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.
```
Gemini จะขอให้สร้าง index.html และเรียกใช้ firebase กด Enter เพื่ออนุญาตให้ทำเช่นนั้นได้ Gemini CLI ควรใช้ทักษะของ Agent สำหรับ Firebase เพื่อสร้างและทำให้เว็บไซต์ใช้งานได้ แนะนำตัวแทนพร้อมกับการอนุมัติตามความจำเป็น

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

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

เริ่ม Gemini CLI หากยังไม่ได้เริ่ม
```
gemini
```
Gemini อาจถามคำถาม เช่น "คุณเชื่อถือโฟลเดอร์นี้ไหม" กด Enter เพื่อยอมรับค่าเริ่มต้น
ตอนนี้ขอให้ Gemini เพิ่มการลงชื่อเข้าใช้ด้วย 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 the user.
```
Gemini อาจขอสร้างหรืออัปเดตไฟล์ เช่น index.html, style.css และ script.js อนุญาตให้ดำเนินการดังกล่าว Gemini อาจขอให้คุณดำเนินการบางอย่างในคอนโซล Firebase CLI สามารถทำสิ่งเหล่านี้ได้เกือบทั้งหมดหากคุณขอให้ลอง แต่คุณอาจต้องทำตามขั้นตอนด้วยตนเอง (เช่น การเปิดใช้ Google OAuth) หากอินสแตนซ์ Cloud Shell มีการติดตั้ง Firebase CLI เวอร์ชันเก่ากว่า

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

เพิ่ม Cloud Firestore

เริ่ม Gemini CLI หากยังไม่ได้เริ่ม
```
gemini
```
Gemini อาจถามคำถาม เช่น "คุณเชื่อถือโฟลเดอร์นี้ไหม" กด Enter เพื่อยอมรับค่าเริ่มต้น

ขอความช่วยเหลือจาก Gemini เพื่อเพิ่ม 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 the user.

Gemini จะอัปเดตไฟล์ อนุญาตให้ทำเช่นนั้น

หากแอปพลิเคชันไม่ทํางานตามที่คาดไว้ ให้ทํางานกับ Gemini 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. บทสรุป

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

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

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

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

gcloud projects delete $GOOGLE_CLOUD_PROJECT

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

ลบไดเรกทอรีแล็บ (ซึ่งจะนำทั้งทักษะและแอปออก)
```
rm -rf ~/agent-skills-lab
```
ลบไดเรกทอรีแอปพลิเคชัน "To Do" (หากคุณสร้างไว้ภายนอก) โดยทำดังนี้
```
rm -rf ~/todo-app
```

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