สร้างเกมอาร์เคดจับคู่ 3 ด้วย Gemini CLI

1. บทนำ

ใน Codelab นี้ คุณจะได้สร้าง CloudCrush ซึ่งเป็นเกมอาร์เคดจับคู่ 3 โดยใช้ Gemini 3 และ Gemini CLI ซึ่งเป็นเอเจนต์การเขียนโค้ดบรรทัดคำสั่งของเรา เกมนี้จะเขียนด้วยภาษา Go และติดตั้งใช้งานใน Google Cloud โดยใช้ Cloud Run

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

Codelab นี้เหมาะสำหรับนักพัฒนาแอประดับกลางที่ต้องการเรียนรู้วิธีการเขียนโค้ดแบบเป็น Agent ระยะเวลาทั้งหมดโดยประมาณสำหรับแล็บนี้คือ 60 นาที ทรัพยากรที่สร้างใน Codelab นี้ใช้การกำหนดราคาตามการใช้งาน

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

  • สร้างตรรกะหลักของเกมจับคู่ 3 โดยใช้ Go และเฟรมเวิร์ก Ebitengine
  • ปรับเกมให้ทำงานในเว็บเบราว์เซอร์โดยใช้ WebAssembly (WASM)
  • ติดตั้งใช้งานเกมและ API คะแนนสูงสุดใน Cloud Run
  • ประสานงานเอเจนต์ย่อยและส่วนขยายเฉพาะทางสำหรับการทดสอบและการตรวจสอบโค้ด

ข้อกำหนดเบื้องต้น

  • ความรู้พื้นฐานเกี่ยวกับภาษาโปรแกรม
  • ความรู้พื้นฐานเกี่ยวกับโครงสร้างพื้นฐานของระบบคลาวด์
  • ความรู้พื้นฐานเกี่ยวกับคอนโซล Google Cloud

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

  • วิธีทำงานร่วมกับเอเจนต์การเขียนโค้ดเพื่อสร้างแอปพลิเคชันที่ซับซ้อน
  • วิธีทำงานกับ Gemini ในบริบทแบบมัลติโมดัล
  • วิธีติดตั้งใช้งานแอปพลิเคชันในระบบคลาวด์โดยใช้ Cloud Run

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

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

  • Gemini CLI ดาวน์โหลดและติดตั้งโดยทำตามวิธีการใน geminicli.com
  • Go Toolchain (เวอร์ชัน 1.26 ขึ้นไป) ดาวน์โหลดและติดตั้งโดยใช้วิธีการใน go.dev
  • gcloud CLI เพื่อโต้ตอบกับ Google Cloud ดาวน์โหลดและติดตั้งโดยใช้คำสั่งในเอกสารประกอบของ Google Cloud
  • บัญชีสำหรับการเรียกเก็บเงินใน Google Cloud (เพื่อติดตั้งใช้งานเกมในระบบคลาวด์)

เทคโนโลยีหลัก

ดูข้อมูลเพิ่มเติมเกี่ยวกับเทคโนโลยีที่เราจะใช้ได้ที่นี่

  • Gemini CLI: เอเจนต์การพัฒนา
  • Gemini 3: โมเดลภาษาขนาดใหญ่รุ่นล่าสุดของเรา

2. การตั้งค่าสภาพแวดล้อม

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

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

  1. ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud
  2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่

เริ่มต้น 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
    

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

สร้างไดเรกทอรีโปรเจ็กต์

ก่อนอื่น เราต้องสร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

mkdir -p codelab-match3 && cd codelab-match3

เปิดใช้ Gemini CLI

ก่อนอื่น ให้ตรวจสอบว่าได้ติดตั้ง Gemini CLI อย่างถูกต้องแล้ว เรียกใช้ในเทอร์มินัล

gemini --version

คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้

$ gemini --version
0.37.1

ตอนนี้ให้เปิดใช้ Gemini CLI ด้วยคำสั่ง gemini

gemini

คุณควรเห็นพรอมต์ของ Gemini CLI ดังนี้

b9f33e9786c58b61.png

หากเห็นพรอมต์ของ Gemini CLI แสดงว่าคุณพร้อมใช้งานแล้ว หากไม่เห็น ให้ตรวจสอบอีกครั้งว่าคุณพลาดขั้นตอนการตั้งค่าก่อนหน้านี้หรือไม่

เปิดใช้การควบคุมโมเดล

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

หากต้องการเปิดใช้การบังคับเลี้ยวโมเดล ให้เปิดเมนูการตั้งค่าโดยใช้คำสั่ง /settings แล้วพิมพ์ "steering" ในช่องค้นหา จากนั้นตั้งค่าตัวเลือก "เปิดใช้การควบคุมโมเดล" เป็น "จริง"

8ed164e05654a79.png

คุณอาจต้องรีสตาร์ท CLI เพื่อให้การเปลี่ยนแปลงมีผล (กดปุ่ม "r")

ดาวน์โหลดชิ้นงาน

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

Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang

4. สร้างเกมด้วยโหมดวางแผนและการควบคุมโมเดล

เริ่มต้นด้วยการสร้างตรรกะหลักของเกมจับคู่ 3 เนื่องจากเป็นงานที่ซับซ้อน จึงควรใช้ Gemini CLI ในโหมดวางแผนเพื่อจัดระเบียบการพัฒนา

สลับโหมดแพ็กเกจด้วยคำสั่งเครื่องหมายทับ /plan ในพรอมต์ของ Gemini CLI

/plan

เมื่อเปิดใช้โหมดวางแผนแล้ว ให้คัดลอกและวางพรอมต์ต่อไปนี้ลงใน Gemini CLI

Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background. 
On the right side of the play area include a side panel with UI elements 
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.

Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.

The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.

Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.

The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.

Gemini CLI อาจถามคำถามเพื่อความกระจ่าง 2-3 ข้อก่อนสร้างแผน

ตัวอย่างเช่น ในที่นี้ระบบจะถามว่าคุณต้องการสมัครแบบไฟล์เดียวหรือหลายไฟล์

ba0d58fecaef343b.png

และนี่คือคำถามเกี่ยวกับค่ากำหนดสำหรับภาพเคลื่อนไหว

432cbe7c747b2f3.png

คำถามสุดท้ายคือการฝังชิ้นงานลงในไบนารีด้วย go:embed

98ae4d6786d24c9b.png

หลังจากตอบคำถามทั้งหมดแล้ว คุณจะมีตัวเลือกในการตรวจสอบคำตอบอีกครั้งก่อนกด Enter เพื่อส่ง

47c44052fafdc1bf.png

เมื่อแผนเสร็จสมบูรณ์แล้ว ระบบจะแจ้งให้คุณตรวจสอบแผน

5e474a04a060d28b.png

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

b0ad1350cd1ae6c5.png

ใช้โอกาสนี้เพื่อเพิ่มข้อกำหนดใหม่ที่พลาดไปในพรอมต์เดิม

Add a 60-seconds countdown timer and an in-memory high-score tracker
to enhance the arcade game experience.
Combos should give a score bonus of 10% per combo number.

ระบบจะแจ้งให้คุณยืนยันแผนการติดตั้งใช้งานเป็นครั้งสุดท้าย

2f52c3c43efafd0e.png

กด Enter เพื่อให้ตัวแทนเริ่มทำงาน ตอนนี้เอเจนต์จะออกจากโหมดแผนและเริ่มเขียนโค้ด

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

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

Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.

Also enable Arrow Keys to move the selection cursor and Space to select the gem to 
swap (space is pressed once to select, then arrow key immediately makes 
the move - no need to press space again).

Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.

คุณจะเห็นว่าระบบจัดคิวพรอมต์นี้เป็น "คำแนะนำการควบคุม" ดังนี้

75652d5d67e247b3.png

ยอมรับแผนและดู Agent ดำเนินการตามข้อกำหนดทั้งหมดของคุณ

เมื่อตัวแทนดำเนินการติดตั้งใช้งานเสร็จแล้ว ให้เรียกใช้ go run main.go ในโฟลเดอร์โปรเจ็กต์เพื่อสาธิตเวอร์ชันเดสก์ท็อป คุณไม่จำเป็นต้องออกจาก Gemini CLI เพื่อเรียกใช้คำสั่งนี้ พิมพ์ ! (เครื่องหมายตกใจ) เพื่อเข้าสู่โหมดเชลล์และเรียกใช้คำสั่งจากที่นั่น

a2ead65c4efe9d52.png

ข้อดีของการเรียกใช้จากโหมดเชลล์คือระบบจะบันทึกปัญหาที่อาจเกิดขึ้นในบริบทของเอเจนต์ทันที ตัวอย่างเช่น ในกรณีนี้ ตัวแทนลืมดาวน์โหลดการอ้างอิงบางรายการ

c7caf0bc02bc29ce.png

คุณออกจากโหมดเชลล์ได้โดยกดปุ่ม Escape แล้วขอให้ตัวแทนตรวจสอบและแก้ไขข้อผิดพลาด

ef1773f2efffe886.png

ผลลัพธ์ที่สำเร็จควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

2f69de852e625951.png

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

5. ปรับเกมให้ทำงานในเว็บเบราว์เซอร์

เกม Ebitengine ที่คุณเพิ่งสร้างเป็นแอปพลิเคชันบนเดสก์ท็อป หากต้องการเปิดใช้ในเว็บ เราสามารถแปลงเป็น WebAssembly ได้

ใช้พรอมต์ต่อไปนี้เพื่อเป็นแนวทางให้ตัวแทน

We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.

เมื่อเอเจนต์ทำงานเสร็จแล้ว คุณสามารถสั่งให้เอเจนต์เรียกใช้เซิร์ฟเวอร์เกมในเบื้องหลังได้

880f19b60981d191.png

คุณจัดการกระบวนการที่ทำงานเบื้องหลังได้โดยใช้ชุดแป้นพิมพ์ Ctrl+B ดังนี้

b72391e3963db37b.png

กด Ctrl+B อีกครั้งเพื่อปิดหน้าต่างนี้

ตอนนี้เปิด http://localhost:8080 ในเบราว์เซอร์เพื่อดูเกมที่ทำงานบนเว็บ

909e328eb1771bb4.png

ตอนนี้คุณได้เรียกใช้บนเว็บแล้ว ก็ถึงเวลาขัดเกลาขั้นสุดท้ายก่อนที่จะนำไปใช้งานในระบบคลาวด์

6. สร้างหน้าจอชื่อและลีดเดอร์บอร์ด

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

แก้ไขทั้ง 2 ปัญหาด้วยพรอมต์ต่อไปนี้

Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which 
will then be recorded to populate the leaderboard at the end of the round.

Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries, 
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.

Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).

ตัวอย่างหน้าจอชื่อมีดังนี้

8babe90fc0d1079f.png

ตอนนี้ดูเป็นมืออาชีพมากขึ้นแล้ว 🙂

7. ติดตั้งใช้งานเกมใน Cloud Run

ในที่สุดก็ถึงเวลาแชร์ผลงานของเรากับคนทั่วโลกแล้ว ติดตั้งใช้งานเกมใน Google Cloud Run เพื่อให้เข้าถึงได้จากทุกที่

Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.

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

Now enable this game to run on mobile devices. You need to update the input
system to handle "taps" as well as key presses and clicks. Since mobile devices
most likely won't have a keyboard, add a button to generate a random name and
a confirmation button to the name entry.

Also generate a QR code for the CloudRun link and display it on the screen so
that people can scan it to access the mobile version and compete against their
friends for the high score.

เรียกใช้เกมอีกครั้งในเบราว์เซอร์ ลองเข้าถึงเกมจากอุปกรณ์เคลื่อนที่โดยใช้คิวอาร์โค้ดด้วย

8. ใช้เอเจนต์เบราว์เซอร์เพื่อทดสอบเกม

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

โดยปกติแล้ว เกมทดสอบได้ยากด้วยเครื่องมือทดสอบทั่วไป (เช่น การทดสอบหน่วยและการทดสอบการผสานรวม) แต่เราสามารถใช้ตัวแทนเบราว์เซอร์เพื่อทำการทดสอบบางอย่างให้เราได้ เอเจนต์เบราว์เซอร์สามารถเปิดเบราว์เซอร์ Chrome ของตัวเองและไปยังหน้าจอเกมได้โดยการออกคำสั่ง DOM นอกจากนี้ ยังมีความสามารถในการถ่ายภาพหน้าจอ ซึ่งเราสามารถใช้เพื่อบันทึกการทดสอบและส่งคืนให้ตัวแทนเพื่อทำการปรับเปลี่ยน UI เล็กน้อยในภายหลังได้

ขณะนี้เอเจนต์เบราว์เซอร์ยังอยู่ในเวอร์ชันทดลอง เราจึงต้องเปิดใช้ก่อน ป้อนพรอมต์นี้ใน Gemini CLI เพื่อเปิดใช้เอเจนต์ที่ระดับโปรเจ็กต์

Create a .gemini/settings.json file with the following content to
configure the browser sub agent:

{
  "agents": {
    "overrides": {
      "browser_agent": {
        "enabled": true
      }
    }
  }
}

คุณต้องรีสตาร์ท Agent เพื่อให้การเปลี่ยนแปลงนี้มีผล บันทึกการสนทนาปัจจุบันด้วยคำสั่ง /chat save โดยทำดังนี้

3a3ae7e3c610614b.png

ออก Gemini CLI โดยกด Ctrl+D 2 ครั้ง แล้วเริ่มอีกครั้ง กู้คืนการสนทนากับ /chat resume cloud-crush

ตอนนี้คุณควรมีสิทธิ์เข้าถึงตัวแทนเบราว์เซอร์แล้ว เมื่อใดก็ตามที่ต้องการมอบหมายงานให้ตัวแทนเบราว์เซอร์ คุณสามารถพูดถึงตัวแทนได้โดยใช้ @browser_agent ดังนี้

977af2400fdd6ae7.png

ตอนนี้ให้ใช้เอเจนต์เบราว์เซอร์เพื่อประเมินเกมที่เราติดตั้งใช้งาน

@browser_agent perform an end-to-end test of the Cloud Run deployment URL.
Navigate the homepage, start a game, submit a score, and verify the new score 
appears correctly on the leaderboard. Take screenshots to show each step of the 
investigation and save to ./screenshots.

คุณควรเห็นหน้าจอยืนยันต่อไปนี้

3af4096f5d903115.png

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

ddfaed4cd8fe3a80.png

เมื่อดำเนินการเสร็จแล้ว ระบบจะแสดงข้อความดังนี้

d69a9241ae8a9b71.png

นี่คือภาพหน้าจอบางส่วนที่ตัวแทนเบราว์เซอร์ถ่ายไว้

title_screen.png:

fb0a1b38b05e104f.png

game_board.png:

2ef025b6130c31.png

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

Analyse the screenshot @screenshots/game_board.png and adjust the side panel to
have better contrast and be more harmonic with the rest of UI elements. Focus
on readability and color theory to achieve the best possible visuals.

9. สร้าง Agent ที่กำหนดเองเพื่อรักษาความปลอดภัยของเกม

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

Create a new custom agent in .gemini/agents/security_auditor.md using the following content:

---
name: security_auditor
description: Specialized in finding security vulnerabilities in code.
kind: local
tools:
  - read_file
  - grep_search
model: gemini-3-flash-preview
temperature: 0.2
max_turns: 10
---

You are a ruthless Security Auditor. Your job is to analyze code for potential
vulnerabilities.

Focus on:

1.  SQL Injection
2.  XSS (Cross-Site Scripting)
3.  Hardcoded credentials
4.  Unsafe file operations

When you find a vulnerability, explain it clearly and suggest a fix. Do not fix
it yourself; just report it.

คุณจะต้องรีสตาร์ท CLI เพื่อให้การเปลี่ยนแปลงมีผล บันทึกเซสชันการแชทด้วย /chat save และกลับมาแชทต่อด้วย /chat resume เหมือนที่เราเคยทำ

เมื่อ CLI กลับมาทำงานอีกครั้ง ระบบจะตรวจหาเอเจนต์ใหม่โดยอัตโนมัติเมื่อเริ่มต้น

36a78465019aee07.png

คลิก Acknowledge and Enable แล้วขอให้ตัวแทนตรวจสอบความปลอดภัยของรหัสเกมด้วยข้อความแจ้งต่อไปนี้

@security-auditor please run a security audit on this code and cloud run 
deployment to make sure it is safe against common attack patterns and that it is 
not leaking any credentials

คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้

7dd0440a539c735a.png

หลังจากตรวจสอบเสร็จแล้ว ระบบจะให้คำแนะนำ ในตัวอย่างนี้ เครื่องมือพบสิ่งสำคัญ 2-3 อย่างที่ต้องแก้ไข

e6d8d7965a003c16.png

หากพบข้อบกพร่องใดๆ เพียงขอความช่วยเหลือจาก Gemini CLI เพื่อแก้ไขให้คุณ 🙂

10. บทสรุป

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

ล้างข้อมูล

หากคุณไม่ได้วางแผนที่จะกลับมาที่ Codelab นี้ในภายหลัง เราขอแนะนำให้ลบทรัพยากรที่สร้างขึ้นระหว่าง Codelab นี้

  1. ลบบริการ Cloud Run

ขอความช่วยเหลือจาก Gemini CLI เพื่อลบให้คุณโดยทำดังนี้

I'm finished with this project. Delete the cloud run deployment.
  1. ลบไดเรกทอรีโปรเจ็กต์
cd .. && rm -rf codelab-match3

หรือจะลบทั้งโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ก็ได้หากสร้างขึ้นเพื่อ Codelab นี้เท่านั้น

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

คุณสามารถเรียนรู้ต่อไปได้โดยสำรวจ Codelab อื่นๆ ในแพลตฟอร์มนี้ หรือปรับปรุง Cloud Crush ด้วยตนเอง

คำแนะนำบางส่วนในการปรับปรุงเกมมีดังนี้

  • เพิ่ม Gem พิเศษ "Gemini" (ใช้ gemini.png) ที่จะปรากฏเมื่อจับคู่ Gem 4 รายการขึ้นไป การจับคู่อัญมณี Gemini 3 ชิ้นขึ้นไปจะทำให้ผู้เล่นได้รับเวลาพิเศษ
  • เพิ่มเพลง คุณสร้างเพลงได้โดยใช้ Lyria 3 ในหน้าแรกของ Gemini
  • เพิ่มเอฟเฟกต์เสียง
  • เพิ่มโหมดการเล่นเกมอื่นๆ

ขอให้สนุกกับการเขียนโค้ด