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

1. ภาพรวม

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

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

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

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

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

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

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

สิ่งที่ต้องทำก่อนเริ่ม Lab

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

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

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

ข้อกำหนดของ Lab

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

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

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]

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

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

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

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

npm install -g @google/clasp@latest

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

clasp login --no-localhost

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

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

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

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 ในบัญชี Lab ของนักเรียน แล้วคลิก Google Apps Script API และสลับจาก ปิด เป็น เปิด

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

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

gemini

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

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

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

/memory show

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

/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 และคุณสามารถดำเนินการต่อได้โดยอนุญาตให้ใช้เครื่องมือจากเซิร์ฟเวอร์ / ส่วนขยายที่ระบบถามถึงได้เสมอ

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

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

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

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

1. กลับไปที่หน้าโปรเจ็กต์ Apps Script
2. มองหาปุ่มทำให้ใช้งานได้ที่ด้านบน
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

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

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

gcloud projects delete $GOOGLE_CLOUD_PROJECT

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

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

คลิกไอคอนข้อมูล ในแผงการนำทางด้านซ้าย แล้วคลิกไอคอนถังขยะ ที่ด้านขวาของหน้าจอเพื่อนำโปรเจ็กต์ 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. ยินดีด้วย

คุณทำ Lab นี้เสร็จสมบูรณ์แล้วและใช้ Gemini CLI เพื่อ vibe-code ส่วนเสริม Gmail

ใน Lab นี้ คุณได้เรียนรู้วิธีการต่อไปนี้

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

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