พัฒนาแอปแบบฟูลสแต็กใน Google AI Studio

ตอนนี้ Google AI Studio รองรับการพัฒนาแบบ Full-Stack แล้ว ซึ่งช่วยให้คุณสร้างแอปพลิเคชันที่มากกว่าต้นแบบฝั่งไคลเอ็นต์ได้ เมื่อมีรันไทม์ฝั่งเซิร์ฟเวอร์ คุณจะจัดการข้อมูลลับ เชื่อมต่อกับ API ภายนอก และสร้างประสบการณ์การใช้งานแบบผู้เล่นหลายคนแบบเรียลไทม์ได้

รันไทม์ฝั่งเซิร์ฟเวอร์

ตอนนี้แอปพลิเคชัน Google AI Studio สามารถมีคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ (Node.js) ได้แล้ว ซึ่งจะช่วยให้คุณ

  • เรียกใช้ตรรกะฝั่งเซิร์ฟเวอร์: เรียกใช้โค้ดที่ไม่ควรเปิดเผยต่อ ไคลเอ็นต์
  • เข้าถึงแพ็กเกจ npm: Antigravity Agent สามารถติดตั้งและใช้แพ็กเกจจากระบบนิเวศ npm ขนาดใหญ่ได้
  • จัดการข้อมูลลับ: ใช้คีย์ API และข้อมูลเข้าสู่ระบบอย่างปลอดภัย

ใช้แพ็กเกจ npm

คุณไม่จำเป็นต้องเรียกใช้ npm install ด้วยตนเอง เพียงขอให้ Agent เพิ่มฟังก์ชันการทำงานที่ต้องใช้แพ็กเกจ แล้ว Agent จะจัดการการติดตั้งและการนำเข้าให้

ตัวอย่าง: > "ใช้ axios เพื่อดึงข้อมูลจาก API ภายนอก"

จัดการข้อมูลลับอย่างปลอดภัย

เมื่อมีโค้ดฝั่งเซิร์ฟเวอร์และการจัดการข้อมูลลับ ตอนนี้คุณสามารถสร้างแอปที่โต้ตอบกับโลกภายนอกได้แล้ว

คีย์ Gemini API

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

คีย์ API ของบุคคลที่สาม

สำหรับบริการอื่นๆ คุณสามารถเพิ่มคีย์ API ด้วยตนเองได้ดังนี้

  • API ของบุคคลที่สาม: เชื่อมต่อกับบริการต่างๆ เช่น Stripe, SendGrid หรือ REST API ที่กำหนดเอง
  • ฐานข้อมูล: เชื่อมต่อกับฐานข้อมูลภายนอก (เช่น ผ่าน Supabase, Firebase, หรือ MongoDB Atlas) เพื่อเก็บข้อมูลไว้นานกว่าเซสชัน

เมื่อสร้างแอปในโลกแห่งความเป็นจริง คุณมักจะต้องเชื่อมต่อกับบริการของบุคคลที่สาม (เช่น Twilio, Slack หรือฐานข้อมูล) ที่ต้องใช้คีย์ API คุณสามารถเพิ่มคีย์ด้วยตนเองได้โดยทำตามขั้นตอนต่อไปนี้

  1. เพิ่มข้อมูลลับ: ไปที่เมนูการตั้งค่า ใน Google AI Studio แล้วมองหา ส่วนข้อมูลลับ
  2. จัดเก็บคีย์: เพิ่มคีย์ API หรือโทเค็นลับที่นี่
  3. เข้าถึงในโค้ด: Agent สามารถเขียนโค้ดฝั่งเซิร์ฟเวอร์ที่เข้าถึงข้อมูลลับเหล่านี้ ได้อย่างปลอดภัย (โดยปกติจะผ่านตัวแปรสภาพแวดล้อม) เพื่อให้มั่นใจว่าจะไม่มีการเปิดเผยต่อเบราว์เซอร์ฝั่งไคลเอ็นต์

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

การผสานรวม Firebase สำหรับฐานข้อมูลและการตรวจสอบสิทธิ์

ตอนนี้ Google AI Studio ช่วยให้คุณเพิ่มฐานข้อมูลหรือการตรวจสอบสิทธิ์ลงใน แอปได้อย่างง่ายดายผ่าน การผสานรวม Firebase Antigravity Agent สามารถจัดเตรียมและตั้งค่าบริการต่อไปนี้ให้คุณโดยอัตโนมัติ

  • ฐานข้อมูล Firestore: ฐานข้อมูล NoSQL บนระบบคลาวด์ที่ยืดหยุ่นและปรับขนาดได้เพื่อจัดเก็บ และซิงค์ข้อมูลสำหรับการพัฒนาฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์
  • การตรวจสอบสิทธิ์ Firebase: อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ แอปพลิเคชันของคุณได้อย่างปลอดภัยโดยใช้โฟลว์ "ลงชื่อเข้าใช้ด้วย Google"

เพียงขอให้ Agent "เพิ่มฐานข้อมูลลงในแอปของฉัน" หรือ "ตั้งค่าการลงชื่อเข้าใช้ด้วยบัญชี Google" แล้ว Agent จะจัดการการกำหนดค่าและการสร้างโค้ดที่จำเป็นให้คุณ

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

Google Workspace API

Google AI Studio ช่วยให้คุณสร้างแอปที่เชื่อมต่อกับ Google Workspace API ได้ เพื่อให้ผู้ใช้ทำงานกับข้อมูลจริงของตนเองได้ เช่น อีเมล สเปรดชีต เอกสาร กิจกรรมในปฏิทิน และอื่นๆ อีกมากมาย ทั้งหมดนี้ทำได้ภายในแอปของคุณ คุณจึงไม่จำเป็นต้องตั้งค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google, กำหนดค่า OAuth หรือจัดการ API ด้วยตนเองอีกต่อไป

วิธีการทำงาน

คุณสามารถเพิ่มการผสานรวม Workspace ได้ 2 วิธีดังนี้

  • อธิบายในแผงแชท: เพียงบอก Agent สิ่งที่คุณต้องการในแผงแชทที่ด้านล่าง เช่น "สร้างเครื่องมือติดตามค่าใช้จ่ายที่บันทึกใบเสร็จลงใน Google ชีตของฉัน" หรือ "สร้างแดชบอร์ดที่สรุปข้อความ Gmail ที่ยังไม่ได้อ่านของฉัน"
  • เลือกจากแผงการผสานรวม: เปิดแผงการผสานรวม ในแถบด้านข้างทางด้านขวาของโหมดสร้าง แล้วเปิดใช้แอปใน Workspace ที่ต้องการเชื่อมต่อ

เมื่อคุณเพิ่มแอปใน Workspace, AI Studio จะดำเนินการต่อไปนี้โดยอัตโนมัติ

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

แอปที่รองรับ

แอป Google Workspace ต่อไปนี้พร้อมให้บริการ

แอป สิ่งที่คุณสร้างได้
Google ปฏิทิน อ่าน สร้าง และจัดการกิจกรรมและปฏิทิน
Google Chat อ่านและโต้ตอบกับการสนทนาและพื้นที่ทำงานแบบกลุ่ม
Google เอกสาร สร้าง อ่าน อัปเดต และจัดรูปแบบเอกสาร
Google ไดรฟ์ จัดระเบียบ ค้นหา และจัดการไฟล์และโฟลเดอร์
Google ฟอร์ม สร้างแบบสำรวจ อัปเดตคำถาม และดึงข้อมูลคำตอบ
Gmail อ่าน ส่ง และจัดการเนื้อหาอีเมล
Google Keep จัดการโน้ต ลิสต์ และไฟล์แนบ
Google Meet กำหนดเวลาและจัดการวิดีโอคอล
รายชื่อติดต่อ ซิงค์และจัดการรายชื่อติดต่อ
Google ชีต อ่าน เขียน และจัดรูปแบบข้อมูลสเปรดชีต
Google สไลด์ สร้างและแก้ไขงานนำเสนอ
Google Tasks สร้าง จัดการ และจัดระเบียบงาน

การตรวจสอบสิทธิ์และสิทธิ์

ในฐานะผู้สร้าง คุณไม่จำเป็นต้องกำหนดค่าไคลเอ็นต์ OAuth, จัดการข้อมูลเข้าสู่ระบบ หรือตั้งค่าโปรเจ็กต์ Google Cloud AI Studio จะจัดการทุกอย่างให้คุณ

แอปที่มีการผสานรวม Workspace API จะใช้ "ลงชื่อเข้าใช้ด้วย Google" เพื่อตรวจสอบสิทธิ์ผู้ใช้ปลายทาง เมื่อผู้ใช้เปิดแอป ระบบจะแจ้งให้ผู้ใช้ลงชื่อเข้าใช้และให้สิทธิ์เฉพาะที่แอปต้องการ (เช่น สิทธิ์เข้าถึงปฏิทินแบบอ่านอย่างเดียว หรือความสามารถในการแก้ไขสเปรดชีต) แอปของคุณจะเข้าถึงเฉพาะข้อมูลของบุคคลที่ใช้แอปเท่านั้น ผู้ใช้แต่ละรายจะให้สิทธิ์เข้าถึงบัญชีของตนเอง

ตัวอย่างพรอมต์

ต่อไปนี้คือแนวคิดบางส่วนในการเริ่มต้นใช้งานการผสานรวม Workspace

  • "สร้างแอปที่อ่าน Google ปฏิทินของฉันและร่างอีเมลเตรียมการใน Gmail สำหรับการประชุมแต่ละครั้ง"
  • "สร้างเครื่องมือที่รับ Google เอกสารและสร้างงานนำเสนอสรุป 5 สไลด์ ใน Google สไลด์"
  • "สร้างเครื่องมือติดตามค่าใช้จ่ายที่ฉันอัปโหลดใบเสร็จ Gemini แยก รายละเอียด และระบบบันทึกแถวใหม่ใน Google ชีตของฉัน"

ตั้งค่า OAuth

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

สร้างประสบการณ์การใช้งานแบบผู้เล่นหลายคน

รันไทม์แบบ Full-Stack ช่วยให้ฟีเจอร์การทำงานร่วมกันแบบเรียลไทม์ทำงานได้

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

ตัวอย่างพรอมต์: > "ทำให้เกมนี้เป็นเกมแบบผู้เล่นหลายคนซึ่งผู้เล่นจะเห็นเคอร์เซอร์ของกันและกันได้"

เคล็ดลับสำหรับการทดสอบแอปแบบผู้เล่นหลายคน

คุณสามารถทดสอบโหมดผู้เล่นหลายคนได้ 2 วิธีก่อนที่จะติดตั้งใช้งานแอป

  1. เปิดแอปในโหมดสร้างของ Google AI Studio ในหลายแท็บ เมื่อพัฒนาในโหมดสร้าง แอปของคุณจะอยู่ในคอนเทนเนอร์สำหรับนักพัฒนาแอป การเปิดแอปในหลายแท็บจะช่วยให้คุณจำลองผู้เล่นหลายคนที่ใช้แอปของคุณได้
  2. แชร์แอปกับผู้อื่นโดยใช้เมนูแชร์ ที่ด้านขวาบน จากนั้นใช้ URL ที่แชร์ จากแท็บการผสานรวม ของเมนูแชร์ เพื่อใช้แอปกับผู้เล่นที่คุณแชร์แอปด้วย

แนวทางปฏิบัติแนะนำ

  • การเรียก Gemini API: ระบบจะกำหนดค่า GEMINI_API_KEY เป็น ข้อมูลลับฝั่งเซิร์ฟเวอร์โดยอัตโนมัติ เรียก Gemini API จากโค้ดฝั่งเซิร์ฟเวอร์โดยใช้คีย์นี้ คุณดูคีย์นี้ได้ในแผงข้อมูลลับ
  • ความปลอดภัยของข้อมูลลับ: ใช้ Secret Manager สำหรับคีย์ที่ละเอียดอ่อนเสมอ และอย่าฮาร์ดโค้ดคีย์เหล่านั้นในไฟล์
  • การแยกความกังวล: เก็บตรรกะ UI ไว้ในเฟรมเวิร์กฝั่งไคลเอ็นต์ (React/Angular) และเก็บตรรกะทางธุรกิจ/การจัดการข้อมูลไว้ฝั่งเซิร์ฟเวอร์
  • การจัดการข้อผิดพลาด: ตรวจสอบว่าโค้ดฝั่งเซิร์ฟเวอร์จัดการข้อผิดพลาด จากการเรียก API ภายนอกได้อย่างมีประสิทธิภาพเพื่อป้องกันไม่ให้แอปขัดข้อง

ขั้นตอนต่อไปคือ