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

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

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

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

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

การใช้แพ็กเกจ npm

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

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

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

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

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

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

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

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

การตั้งค่า OAuth

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

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

รันไทม์แบบฟูลสแต็กช่วยให้ใช้ฟีเจอร์การทำงานร่วมกันแบบเรียลไทม์ได้

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

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

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

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

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

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

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

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