เปิดตัววิดีโอเกมบนเว็บด้วย AI

1. บทนำ

ภาพรวม

การสร้างด้วย AI เริ่มต้นที่ใดในปัจจุบัน สำหรับพวกเราส่วนใหญ่ การสร้างเริ่มต้นด้วยคําค้นหาหรือต้นแบบอย่างง่าย Google AI Studio มีโหมดสร้าง ที่มีประสิทธิภาพ (มักเรียกว่า "การเขียนโค้ดแบบสบายๆ") ซึ่งช่วยให้คุณออกแบบ ทดสอบ และสร้างเว็บแอปพลิเคชันแบบ Full-Stack ได้โดยใช้การสร้างโค้ดที่ขับเคลื่อนโดยโมเดล Gemini

ใน Codelab นี้ คุณจะได้สร้างวิดีโอเกมแบบผลัดกันเล่นบนเว็บโดยใช้ฐานข้อมูล Firestore ที่มี Event Sourcing (เพื่อเก็บการดำเนินการในเกมเป็นลำดับเหตุการณ์เพื่อให้ผู้เล่นดูประวัติการแข่งขันและกลับไปเล่นในเทิร์นก่อนหน้าได้) และ การตรวจสอบสิทธิ์ Firebase สำหรับการเข้าสู่ระบบของผู้ใช้ Agent ของ AI Studio จะกำหนดค่าบริการแบ็กเอนด์ทั้งหมดและเขียนโค้ดฟรอนต์เอนด์ ตรรกะการจัดเก็บเหตุการณ์ และโค้ดการโต้ตอบกับฐานข้อมูล เมื่อแอปพร้อมใช้งานแล้ว คุณจะติดตั้งใช้งานแอปใน Cloud Run ได้โดยตรงด้วยการคลิกเพียงครั้งเดียว

เว็บไซต์พอร์ตโฟลิโอเวอร์ชันที่เสร็จสมบูรณ์

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

  • ใช้พรอมต์กับ Google AI Studio เพื่อสร้างต้นแบบเว็บแอปพลิเคชันวิดีโอเกมแบบผลัดกันเล่นหลายผู้เล่น
  • ใช้การรองรับโค้ดเกมแบบย่อที่แชร์ได้หรือลิงก์เข้าร่วมเพื่อให้เพื่อนๆ เชื่อมต่อกับการแข่งขันเดียวกันได้
  • ใช้การจัดเก็บฐานข้อมูล Firestore ด้วยรูปแบบการจัดเก็บเหตุการณ์เพื่อติดตามประวัติการแข่งขันและอนุญาตให้มีการเดินทางข้ามเวลาในการเล่นเกม (เลิกทำหรือเล่นเทิร์นซ้ำ)
  • กำหนดค่าและเปิดใช้การผสานรวม Firebase เพื่อจัดเตรียมฐานข้อมูล Firestore และตั้งค่าการตรวจสอบสิทธิ์ด้วย Google Sign-In
  • ทดสอบแอปพลิเคชันในแซนด์บ็อกซ์การแสดงตัวอย่างแบบอินเทอร์แอกทีฟ
  • ติดตั้งใช้งานแอปพลิเคชันใน Cloud Run โดยตรงจาก UI ของ Google AI Studio

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

  • วิธีใช้โหมดสร้างของ Google AI Studio เพื่อสร้างต้นแบบบริการเกมแบบ Full-Stack อย่างรวดเร็วโดยใช้ภาษาง่ายๆ
  • วิธีใช้รูปแบบสถาปัตยกรรม Event Sourcing โดยใช้ Cloud Firestore เพื่อจัดเก็บประวัติเกม
  • วิธีที่ Google AI Studio กำหนดค่าการผสานรวม Firebase Firestore และการตรวจสอบสิทธิ์โดยอัตโนมัติ
  • วิธีติดตั้งใช้งานแอปพลิเคชัน AI Studio เป็นคอนเทนเนอร์แบบ Serverless ใน Cloud Run
  • วิธีตรวจสอบบันทึกฐานข้อมูลและสถานะความปลอดภัยภายในคอนโซล Firebase

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

ก่อนเปิดตัว AI Studio ให้ตรวจสอบสถานะบัญชีและข้อกำหนดเบื้องต้น

บัญชี Google และข้อมูลระดับ

  1. หากยังไม่มีบัญชี Google ให้สร้างบัญชี Google
    • เคล็ดลับ: ใช้บัญชี Google ส่วนบุคคลสำหรับ Lab นี้หากเป็นไปได้ บัญชีของกลุ่ม องค์กร หรือโรงเรียนอาจบังคับใช้นโยบาย Workspace ที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
  2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการติดตั้งใช้งาน
    • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบ Full-Stack ได้สูงสุด 2 รายการในภูมิภาคที่เลือกโดยไม่มีค่าใช้จ่าย โดยไม่ต้องสร้างบัญชีสำหรับการเรียกเก็บเงิน Google Cloud แบบเต็ม
    • การติดตั้งใช้งานมาตรฐาน: เชื่อมต่อกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ Google ที่มีอยู่และมีการชำระเงินแล้ว และขยายขีดจำกัดพื้นที่เก็บข้อมูล ทรัพยากร CPU และ API

3. สร้างวิดีโอเกมแบบผลัดกันเล่นในโหมดสร้างของ AI Studio

มาสร้างเชลล์แอปพลิเคชันและใช้พรอมต์กับ AI ผู้ช่วยเขียนโค้ดเพื่อสร้างเลเยอร์ความปลอดภัย ตรรกะการเล่นเกม และเลเยอร์การจัดเก็บข้อมูลแบบ Event Sourcing กัน

  1. ไปที่แผงแอป Google AI Studio แล้วคลิกแอปใหม่
  2. ในกล่องพรอมต์แชท ให้ป้อนคำอธิบายสำหรับแอปพลิเคชันวิดีโอเกมแบบผลัดกันเล่น 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    ลิงก์นี้จะป้อนข้อมูลในกล่องพรอมต์ให้คุณโดยอัตโนมัติ
  3. คลิกสร้าง เพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

เมื่อ Agent ของ AI Studio ตระหนักถึงความจำเป็นในการจัดเก็บฐานข้อมูลและการเข้าสู่ระบบของผู้ใช้ที่ปลอดภัย ระบบจะทริกเกอร์โฟลว์การกำหนดค่า Firebase แบบอัตโนมัติ

  1. หลังจากผ่านไปประมาณ 1 นาที การ์ดการผสานรวมเพื่อเปิดใช้ Firebase จะปรากฏขึ้นในพื้นที่ทำงาน
  2. คลิกปุ่มเปิดใช้ Firebase เพื่อยืนยันและยอมรับข้อกำหนดในการให้บริการ
  3. Agent จะดำเนินการตั้งค่าเบื้องหลัง กลไกภายใน
    • มีการจัดเตรียมอินสแตนซ์ฐานข้อมูล Firestore
    • เปิดใช้การตรวจสอบสิทธิ์ Firebase โดยเปิดใช้การลงชื่อเข้าใช้ด้วยบัญชี Google
    • มีการสร้างการกำหนดค่าบัญชีบริการ (เช่น การสร้าง src/lib/firebase.ts ที่มีข้อมูลเข้าสู่ระบบ API)
    • มีการเพิ่ม firestore.rules ที่มีขอบเขตความปลอดภัยเริ่มต้น (กฎการแยกผู้ใช้)

4. ทดสอบและทำซ้ำ

ก่อนเปิดตัวบริการ ให้เรียกใช้การตรวจสอบความถูกต้องในการแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

  1. เปิดบานหน้าต่างแสดงตัวอย่างภายใน Google AI Studio
  2. คลิกปุ่มเข้าสู่ระบบเพื่อทริกเกอร์การตรวจสอบสิทธิ์ Google Sign-In ในแซนด์บ็อกซ์
    • หมายเหตุเกี่ยวกับการแก้ไขข้อผิดพลาด: ระหว่างการสร้างหรือการทดสอบ คุณอาจพบปัญหาเกี่ยวกับรันไทม์ ข้อผิดพลาดในการคอมไพล์ หรือข้อผิดพลาดเกี่ยวกับสิทธิ์ Firestore เป็นครั้งคราวเนื่องจากการตั้งค่ากฎความปลอดภัยไม่ถูกต้อง หากเกิดกรณีนี้ขึ้น AI Studio จะแสดงปุ่มแก้ไข ในแชท ซึ่งช่วยให้คุณขอให้ Agent วินิจฉัยและแก้ไขปัญหาโดยอัตโนมัติได้
    ตำแหน่งปุ่มแก้ไขใน Google AI Studio
  3. เมื่อเข้าสู่ระบบแล้ว ให้เริ่มการแข่งขันเกมใหม่ คัดลอกโค้ดเกมแบบย่อหรือลิงก์แชร์ที่สร้างขึ้น แล้วตรวจสอบว่าใช้เข้าร่วมการแข่งขันได้
  4. ดำเนินการหลายครั้งและตรวจสอบว่าประวัติการแข่งขันแสดงอย่างถูกต้อง
  5. ลองกลับไปที่เทิร์นก่อนหน้าของการแข่งขัน ตรวจสอบว่าบอร์ดหรือสถานะอัปเดตเพื่อแสดงจุดนั้นในประวัติการเล่นเกม และตรวจสอบว่าคุณสามารถกู้คืนหรือย้อนกลับไปยังสถานะนั้นได้
  6. หากต้องการเปลี่ยนสไตล์หรือลักษณะการทำงาน ให้สั่ง Agent ผ่านหน้าต่างแชท ตัวอย่างเช่น
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. รอให้ Agent อัปเดตฐานของโค้ด แล้วตรวจสอบเบราว์เซอร์แสดงตัวอย่างเพื่อดูข้อมูลอัปเดต

5. ทำให้ใช้งานได้กับ Cloud Run

เมื่อต้นแบบทำงานได้อย่างสมบูรณ์แล้ว ให้ติดตั้งใช้งานเป็นบริการสาธารณะใน Cloud Run

  1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่ เพื่อเริ่มวิซาร์ดการติดตั้งใช้งานตำแหน่งปุ่มเผยแพร่ของ Google AI Studio
  2. คลิกเริ่มต้นใช้งาน เพื่อกำหนดค่าโปรเจ็กต์ Google Cloud
    • ตรวจสอบว่าเมนูแบบเลื่อนลงโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์ที่คุณเชื่อมโยงกับพื้นที่ทำงาน
    • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
    • คุณเลือกที่จะระบุคำนำหน้า URL .ai.studio ที่กำหนดเอง (เช่น your-portfolio-name.ai.studio) เป็นส่วนหนึ่งของการกำหนดค่าการติดตั้งใช้งานได้
  3. หากคุณติดตั้งใช้งานเป็นครั้งแรกและใช้พารามิเตอร์มาตรฐานของ Google Cloud ระบบอาจแจ้งให้คุณระบุประเภทองค์กรและระบุรายละเอียดการเรียกเก็บเงิน
  4. คลิกเผยแพร่แอป
  5. ขั้นตอนการสร้างคอนเทนเนอร์ การลงทะเบียนคอนเทนเนอร์ และการติดตั้งใช้งานบริการจะเกิดขึ้นในเบื้องหลัง โดยปกติกระบวนการนี้จะใช้เวลา 2-4 นาที
  6. เมื่อการติดตั้งใช้งานเสร็จสิ้น ให้คัดลอกURL ของแอป ที่สร้างขึ้น แล้วไปที่ลิงก์แอปพลิเคชันที่ใช้งานจริงในแท็บเบราว์เซอร์
  7. ทดสอบเว็บแอปพลิเคชันที่ใช้งานจริงในเบราว์เซอร์

6. ตรวจสอบในคอนโซล Firebase

ดูเบื้องหลังเพื่อดูวิธีติดตามสคีมาข้อมูลและผู้ใช้

  1. ไปที่คอนโซล Firebase
  2. เลือกโปรเจ็กต์ (ที่มีป้ายกำกับ AI Studio หรือรหัสโปรเจ็กต์ที่คุณผูกด้วยตนเอง)
  3. ในแผงการนำทางด้านซ้าย ให้เลือกสร้าง > ฐานข้อมูล Firestore
    • ดูคอลเล็กชันและเอกสารฐานข้อมูลที่แอปพลิเคชันสร้างขึ้น
    • ตรวจสอบว่าเอกสารแต่ละรายการมีรหัสเจ้าของที่ตรงกับข้อมูลเข้าสู่ระบบการตรวจสอบสิทธิ์ของผู้ใช้ที่ใช้งานอยู่
  4. เลือกแท็บความปลอดภัย ในแผง Firestore เพื่อตรวจสอบคำสั่งความปลอดภัยที่สร้างขึ้นโดยอัตโนมัติซึ่งจำกัดสิทธิ์อ่านและเขียนสำหรับเจ้าของเอกสารที่ยืนยันแล้ว
  5. ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์ เพื่อดูรายการข้อมูลเข้าสู่ระบบของผู้ใช้ที่ใช้งานอยู่ซึ่งป้อนข้อมูลระหว่างการทดสอบการเข้าสู่ระบบ

7. ล้าง

วิธีหลีกเลี่ยงค่าใช้จ่ายในการเรียกเก็บเงินที่ไม่คาดคิดหรือล้างทรัพยากรพื้นที่ทำงาน

  1. ใน Google AI Studio ให้ไปที่หน้าแอป
  2. ค้นหาแอปพลิเคชันในตารางกริดหรือรายการ
  3. คลิกไอคอนถังขยะเพื่อลบสถานะแอปและยกเลิกการเผยแพร่บริการจาก Cloud Run
  4. หากคุณติดตั้งใช้งานโดยใช้โปรเจ็กต์มาตรฐานและต้องการปิดทรัพยากรทั้งหมด ให้ไปที่การตั้งค่าโปรเจ็กต์ของคอนโซล Google Cloud แล้วลบโปรเจ็กต์พื้นฐาน

8. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และติดตั้งใช้งานวิดีโอเกมแบบผลัดกันเล่นจาก Google AI Studio โดยตรง

ไปที่ ลิงก์นี้ เพื่อรับป้าย เส้นทางผู้สร้างเสร็จสมบูรณ์

หากต้องการเดินทางต่อ ให้ไปที่ goo.gle/builders เพื่อทำ Lab ถัดไป

ดูข้อมูลเพิ่มเติม