Apps Script: Vibe-code ส่วนเสริม Gmail พร้อมเซิร์ฟเวอร์ Gemini CLI และ MCP

1. ภาพรวม

แล็บนี้จะแนะนำเวิร์กโฟลว์ที่ทันสมัยซึ่งขับเคลื่อนด้วย AI เพื่อสร้างส่วนเสริม Gmail แบบไดนามิกตั้งแต่ต้น คุณจะใช้ Gemini CLI เพื่อจัดระเบียบสภาพแวดล้อมการพัฒนาในเครื่องที่มีประสิทธิภาพ โดยใช้ประโยชน์จากเซิร์ฟเวอร์ MCP (Model Context Protocol) และส่วนขยาย Gemini CLI เพื่อผสานรวมเครื่องมือต่างๆ เช่น gcloud และ clasp

ส่วนเสริมที่คุณสร้างจะสร้างและแสดงรูปภาพแมวที่ไม่ซ้ำกันตามคำขอโดยเรียกใช้โมเดลรูปภาพในแพลตฟอร์ม Vertex AI ของ Google Cloud

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

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

เมื่อทำแล็บนี้เสร็จแล้ว คุณจะได้เรียนรู้วิธีทำสิ่งต่อไปนี้

• ตั้งค่าและใช้ Gemini CLI กับส่วนขยาย
• สร้างส่วนเสริม Gmail ที่เรียกใช้ API ภายนอก
• แก้ไขส่วนเสริมเพื่อเรียกใช้ Vertex AI API เพื่อสร้างรูปภาพ
• ติดตั้งใช้งานส่วนเสริม Google Workspace เวอร์ชันทดสอบจากอินเทอร์เฟซผู้ใช้ Apps Script

3. การตั้งค่าและข้อกำหนด

ก่อนเริ่มแล็บ

1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจำกัดที่ทำให้คุณเปิดใช้ API ที่จำเป็นสำหรับแล็บนี้ไม่ได้
2. ลงชื่อเข้าใช้ Google Cloud Console
3. เปิดใช้การเรียกเก็บเงินใน Cloud Console

⚠️ข้อควรระวัง: Lab นี้ใช้ทรัพยากรระบบคลาวด์ที่เรียกเก็บเงินได้ หากไม่ต้องการให้มีการเรียกเก็บเงินอย่างต่อเนื่อง ให้ทำตามขั้นตอนการล้างข้อมูลที่ส่วนท้ายของแล็บ ผู้ใช้ใหม่มีสิทธิ์ใช้ช่วงทดลองใช้ฟรีมูลค่า$300 USD

4. สร้างโปรเจ็กต์ใหม่หรือเลือกใช้โปรเจ็กต์ที่มีอยู่ซ้ำ

ข้อกำหนดของห้องปฏิบัติการ

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

• เว็บเบราว์เซอร์: เว็บเบราว์เซอร์มาตรฐาน เช่น Chrome (แนะนำ)
• เวลาที่จัดสรรไว้: จัดสรรเวลาให้เพียงพอเพื่อมุ่งเน้นไปที่กิจกรรมในห้องทดลอง

4. ตั้งค่าสภาพแวดล้อม Google Cloud

1. คลิกไอคอนเปิดใช้งาน Cloud Shell : ที่มุมขวาบนของส่วนหัวของคอนโซล ให้คลิกไอคอนเทอร์มินัลที่ระบุว่า "เปิดใช้งาน Cloud Shell" เมื่อวางเมาส์เหนือไอคอน
2. ให้สิทธิ์
3. รอการเริ่มต้น: เซสชัน Cloud Shell จะเปิดขึ้นในเฟรมใหม่ที่ด้านล่างของหน้าต่างคอนโซล เซสชันจะใช้เวลาสักครู่ในการเริ่มต้นเนื่องจากมีการจัดสรรเครื่องเสมือน (VM) ที่ใช้ Debian ชั่วคราวให้คุณ
4. เมื่อเริ่มต้นเซสชันแล้ว คุณจะเห็นพรอมต์บรรทัดคำสั่ง (user@cloudshell:~ $)
5. คุณขยายหน้าต่าง Cloud Shell ได้โดยคลิกปุ่มขยายเพื่อเพิ่มขนาดหน้าต่าง
6. ยืนยันโปรเจ็กต์: เรียกใช้คำสั่งต่อไปนี้

gcloud config list project

7. เปลี่ยนโปรเจ็กต์ (หากจำเป็น)

gcloud config set project [YOUR_PROJECT_ID]

คุณพร้อมที่จะเริ่มกิจกรรมในแล็บแล้ว

5. กำหนดค่าสภาพแวดล้อมในการพัฒนาในเครื่อง

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

1. Gemini CLI ได้รับการติดตั้งเป็นส่วนหนึ่งของสภาพแวดล้อม Cloud Shell อยู่แล้ว จึงไม่จำเป็นต้องติดตั้ง
2. นอกจากนี้ ระบบยังติดตั้ง clasp ไว้แล้วเป็นส่วนหนึ่งของสภาพแวดล้อม Cloud Shell แต่เราจะตรวจสอบว่าเราใช้เวอร์ชันล่าสุดใน Lab นี้

npm install -g @google/clasp@latest

3. ให้สิทธิ์ clasp ในการเข้าถึงบัญชีของคุณโดยป้อนคำสั่งต่อไปนี้และทำตามวิธีการด้านล่าง

clasp login --no-localhost

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

คัดลอก URL จากหน้าต่างเบราว์เซอร์ (ที่ขึ้นต้นด้วย http://localhost:8888/?code=xxx) แล้ววางลงในเซสชัน Cloud Shell ที่เปิดอยู่ จากนั้นกด Enter clasp จะดำเนินการตามขั้นตอนการให้สิทธิ์ต่อไป และหากคุณเข้าสู่ระบบสำเร็จ คุณจะเห็นการยืนยันที่คล้ายกับ You are logged in as [e-mail]

4. ติดตั้งส่วนขยาย Gemini CLI ของ Clasp

gemini extensions install https://github.com/google/clasp --consent

5. ติดตั้งgcloudส่วนขยาย Gemini CLI

gemini extensions install https://github.com/gemini-cli-extensions/gcloud --consent

6. ติดตั้งส่วนขยาย Gemini CLI สำหรับนักพัฒนาซอฟต์แวร์ Google Workspace

gemini extensions install https://github.com/googleworkspace/developer-tools --consent

7. สร้างไดเรกทอรีโปรเจ็กต์ที่ว่างเปล่า

mkdir genai-cat-add-on

8. เปลี่ยนไปใช้ไดเรกทอรีโปรเจ็กต์ที่สร้างขึ้นใหม่โดยทำดังนี้

cd genai-cat-add-on

9. กำหนดค่าไฟล์บริบท Gemini CLI สำหรับโปรเจ็กต์นี้

cat << 'END_OF_FILE' > GEMINI.md
## **Gemini CLI Instructions for Gmail Add-on Development**

You are a methodical **Google Workspace extensibility and integration expert**. Your goal is to build a Gmail Add-on for the `genai-cat-add-on` project by writing Apps Script code and using command-line tools.

---

## **Tools Available**

*   **`clasp`**: Use this tool for all Apps Script project operations like pushing files.
*   **`gcloud`**: Use this tool for Google Cloud operations, such as enabling APIs or managing IAM permissions.
*   **`workspace-developer`**: Use this tool to search the official Google Workspace documentation for correct syntax, manifest properties, and required OAuth scopes.

---

## **Development Workflow and Validation**

You MUST follow the workflow below when building the add-on:

1.  **Mandatory Documentation Check**: Before creating, committing, or modifying any code (especially manifest files or Apps Script functions), you **MUST** first utilize the **`workspace-developer` tool** and use **search_workspace_docs** to search and validate the necessary Apps Script syntax, OAuth scopes, Apps Script services such as GmailApp, and best practices. Always refer to the official Google Workspace developer documentation via this tool for authoritative information.
2.  **Security and Scopes**: For every code commit or structural change, you must first **verify the manifest file (`appsscript.json`) includes the necessary OAuth scopes** for Gmail access and external API calls, ensuring you use the **minimal required scopes** and nothing more to adhere to the principle of least privilege.
3.  **Versioning/Persistence**: After any successful file creation, update, or deletion, you must ensure the changes are persistently saved and pushed using the appropriate `clasp` tool command.
4.  **Error Handling**: Include appropriate debugging and robust error handling code in all Apps Script functions.

---

## **Project and API Specifications**

* **Project Focus:** All work is centered on the **`genai-cat-add-on`** Apps Script project.
* **Vertex AI Details:** If asked to generate images, you must use the **`gemini-2.5-flash-image`** model on **Vertex AI**. Do NOT use imagen. All Vertex AI operations must use the currently logged-in user's credentials and the current Google Cloud project.
END_OF_FILE

10. เปิดใช้ Google Apps Script API ในบัญชีห้องทดลองสำหรับนักเรียน/นักศึกษา แล้วคลิก Google Apps Script API และสลับจากปิดเป็นเปิด

6. เริ่มและยืนยันการตั้งค่า Gemini CLI

1. เริ่ม Gemini ในไดเรกทอรีโปรเจ็กต์

gemini

⭐ เคล็ดลับ: หากพบปัญหาขณะใช้ Gemini CLI คุณสามารถไปที่เคล็ดลับการแก้ปัญหาเพื่อเรียกใช้ Gemini CLI เวอร์ชันที่ต้องการได้ทุกเมื่อ

2. โดยค่าเริ่มต้น Gemini CLI จะขอให้คุณตรวจสอบและยอมรับการเปลี่ยนแปลงในไฟล์ สำหรับแล็บนี้ เราขอแนะนำให้ปิดฟีเจอร์นี้โดยกด Shift + Tab เพื่อยอมรับการแก้ไขโดยอัตโนมัติ ซึ่งจะช่วยให้คุณทำแล็บเสร็จทันเวลา ตอนนี้หน้าจอของคุณควรมีตัวเลือกนี้ไฮไลต์เป็นสีแดง

3. ตรวจสอบว่าโหลดไฟล์ GEMINI.md แล้ว และแสดงสิ่งที่โหลดในบริบทของ Gemini CLI

/memory show

4. ตรวจสอบว่ากำหนดค่าเซิร์ฟเวอร์ MCP อย่างถูกต้องแล้ว เซิร์ฟเวอร์ gcloud MCP อาจใช้เวลาสักครู่ในการเริ่มต้น ดังนั้นอย่าตกใจหากเซิร์ฟเวอร์แสดงว่าไม่ได้เชื่อมต่อ โปรดรอสักครู่แล้วลองอีกครั้ง

/mcp list

ℹ️หมายเหตุ: ขณะทำตามขั้นตอนถัดไป Gemini CLI จะขอให้คุณอนุญาตให้ใช้เครื่องมือบางอย่างที่จำเป็นสำหรับ Lab คุณควรเลือกให้สิทธิ์ในการเรียกใช้เครื่องมือทั้งหมด

7. สร้างส่วนเสริม Gmail

5. ขอให้ Gemini สร้างส่วนเสริม Gmail เวอร์ชันแรก

Use Apps Script to create a new Google Workspace add-on that displays a random cat image using the Cat-as-a-Service API upon opening the add-on in Gmail. Make sure you update the code and manifest files, use the correct scopes, and use the API documentation at https://cataas.com/doc.html.

Once done, provide a link to view the project.

❗สำคัญ: Gemini CLI จะขอให้คุณอนุญาตการเรียกใช้เครื่องมือหรือส่วนขยาย MCP ใดๆ และคุณสามารถดำเนินการต่อได้โดยอนุญาตให้เครื่องมือจากเซิร์ฟเวอร์ / ส่วนขยายที่ CLI ถามถึงอนุญาตเสมอ

6. เมื่อ Gemini ตอบกลับพรอมต์ของคุณเสร็จแล้ว ให้คลิกลิงก์ที่ระบุ หรือไปที่หน้าแรกของ Apps Script แล้วคลิกโปรเจ็กต์ genai-cat-add-on
7. คลิกไอคอนการตั้งค่าโปรเจ็กต์ (ไอคอนรูปเฟือง) ที่ด้านซ้ายของหน้า

8. เลือกตัวเลือก "แสดงไฟล์ Manifest "appsscript.json" ในเครื่องมือแก้ไข"

9. สลับไปที่หน้าจอ Editor แล้วดูโค้ดที่สร้างขึ้นใน Code.gs และไฟล์ Manifest ที่กำหนดค่าโปรเจ็กต์ใน appsscript.json

8. ติดตั้งและทดสอบส่วนเสริม

1. กลับไปที่หน้าโปรเจ็กต์ Apps Script
2. มองหาปุ่ม "Deploy" ที่ด้านบน
3. คลิกลูกศรข้าง "ทําให้ใช้งานได้" แล้วเลือกการทดสอบการทําให้ใช้งานได้
4. ในกล่องโต้ตอบ "ทดสอบการติดตั้งใช้งาน" ที่ปรากฏขึ้น คุณควรเห็นตัวเลือกในการติดตั้งส่วนเสริมที่ยังไม่ได้เผยแพร่
5. คลิกปุ่มติดตั้ง
6. ข้อความยืนยันจะปรากฏขึ้น คลิก "เสร็จสิ้น" ที่ด้านล่างเพื่อปิดกล่องโต้ตอบการติดตั้งใช้งาน
7. เปิดและรีเฟรชหน้าแรกของ Gmail
8. ตอนนี้ส่วนเสริมควรพร้อมใช้งานแล้ว ส่วนเสริมจะปรากฏในแผงด้านขวา
9. เมื่อโต้ตอบกับส่วนเสริมเป็นครั้งแรก ระบบจะแจ้งให้คุณให้สิทธิ์ส่วนเสริมเพื่อเข้าถึงข้อมูลหรือสิทธิ์ที่จำเป็น ทำตามข้อความแจ้งบนหน้าจอเพื่อให้สิทธิ์
10. คุณควรเห็นรูปภาพแมว หากไม่เห็น ให้แก้ปัญหาด้วย Gemini CLI โดยแชร์ข้อความแสดงข้อผิดพลาด

9. ใช้ตรรกะการสร้างรูปภาพ AI

1. ตอนนี้ขอให้ Gemini เพิ่มตรรกะเพื่อสร้างรูปภาพ

Now update the add-on to display an AI-generated image using the samples in https://docs.cloud.google.com/vertex-ai/generative-ai/docs/multimodal/image-generation#use-image-generation. 

The image should show a cute cat if I open my inbox, and should add a speech bubble saying "<email sender name> rocks!" with the actual sender name when I open an email.

2. รีเฟรชหน้าแรกของ Gmail แล้วเปิดส่วนเสริมอีกครั้ง ยอมรับสิทธิ์ใหม่หากระบบขอ
3. ตอนนี้คุณควรเห็นรูปภาพแมวที่ AI สร้างขึ้น หากรูปภาพไม่แสดง ให้แก้ปัญหาด้วย Gemini CLI โดยแชร์ข้อความแสดงข้อผิดพลาดและทำตามวิธีการ
4. เปิดอีเมลและสังเกตว่ารูปภาพเปลี่ยนไปอย่างไรเพื่อแสดงบับเบิลคำพูดพร้อมชื่อผู้ส่ง แก้ปัญหาเกี่ยวกับ Gemini CLI ในลักษณะเดียวกับขั้นตอนก่อนหน้า

10. [ไม่บังคับ] เพิ่มเมนูแบบเลื่อนลงสำหรับประเภทสัตว์

1. ขอให้ Gemini เพิ่มตัวเลือกในการสร้างรูปภาพสัตว์อื่นๆ นอกเหนือจากรูปภาพแมว

Add a dropdown menu that lets the user choose the type of animal image it wants. Choose 2 random animals to add to the list in addition to the cat image.

2. รีเฟรชส่วนเสริมโดยคลิกจุดแนวตั้ง 3 จุดแล้วคลิกรีเฟรช หรือรีเฟรชหน้าแรกของ Gmail แล้วเปิดส่วนเสริมอีกครั้ง
3. ทดสอบฟังก์ชันใหม่โดยเลือกรูปภาพสัตว์อื่น หากมีข้อผิดพลาด เช่น UI ไม่รีเฟรชหรือมีข้อผิดพลาดปรากฏขึ้น ให้แก้ปัญหาด้วย Gemini CLI โดยแชร์ข้อความแสดงข้อผิดพลาดและทำตามวิธีการ

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

ออกจาก Gemini CLI

ออกจาก Gemini CLI แล้วดูสถิติการใช้งานโดยใช้คำสั่งต่อไปนี้

/quit

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

⚠️ข้อควรระวัง: การลบโปรเจ็กต์ Google Cloud นี้จะทำลายทรัพยากรทั้งหมดภายในโปรเจ็กต์อย่างถาวร ซึ่งรวมถึงงานใดๆ ที่ไม่เกี่ยวข้องกับโค้ดแล็บนี้ นอกจากนี้ คุณจะใช้รหัสโปรเจ็กต์ที่กำหนดเองนี้ซ้ำในอนาคตไม่ได้ หากต้องการเก็บรหัสไว้ ให้ลบเฉพาะทรัพยากรที่สร้างขึ้นในระหว่างแล็บนี้แทนที่จะลบทั้งโปรเจ็กต์

เราขอแนะนำให้คุณลบโปรเจ็กต์ Google Cloud เพื่อหลีกเลี่ยงการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ใน Codelab นี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

ลบโปรเจ็กต์ Apps Script

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

คลิกไอคอนข้อมูล ในแผงการนำทางด้านซ้าย แล้วคลิกไอคอนถังขยะ ทางด้านขวาของหน้าจอเพื่อนำโปรเจ็กต์ Apps Script ออก

12. เคล็ดลับในการแก้ปัญหา

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

npx https://github.com/google-gemini/gemini-cli#v0.12.0

• หากพบข้อผิดพลาด ให้ขอให้ Gemini แก้ไขข้อผิดพลาดให้คุณ แล้วแชร์ข้อผิดพลาดและบริบท (ตำแหน่งที่เกิดข้อผิดพลาด)
• หาก Gemini ใช้การบันทึกข้อผิดพลาดและขอให้คุณแชร์ข้อผิดพลาด ให้ทำตามขั้นตอนที่ทำให้เกิดข้อผิดพลาดอีกครั้ง แล้วแชร์ผลลัพธ์กับ Gemini
• คุณอาจลองใช้พรอมต์ต่อไปนี้

You have my permission to fix any errors. Please go ahead and make it work.

• หากติดขัดและต้องการช่วย Gemini คุณสามารถใช้พรอมต์ต่อไปนี้ได้

Use the following Github repo as a reference implementation to make my add-on work: https://github.com/googleworkspace/add-ons-samples/tree/main/apps-script/generative-ai/cat-add-on

13. ยินดีด้วย

คุณทำแล็บเสร็จสมบูรณ์และใช้ Gemini CLI เพื่อเขียนโค้ดส่วนเสริม Gmail ได้สำเร็จแล้ว

ในแล็บนี้ คุณได้เรียนรู้วิธีทำสิ่งต่อไปนี้

• ใช้ Gemini CLI
• ติดตั้งเครื่องมือและขยาย Gemini CLI โดยใช้เซิร์ฟเวอร์ MCP (Model Context Protocol)
• สร้าง ทำให้ใช้งานได้ และติดตั้งส่วนเสริม Gmail

ตอนนี้คุณพร้อมที่จะไปยังแล็บถัดไปแล้ว