สร้างแอปใน Google AI Studio

หน้านี้อธิบายวิธีใช้ Google AI Studio เพื่อสร้าง (หรือ "vibe code") และติดตั้งใช้งานแอปอย่างรวดเร็วเพื่อทดสอบความสามารถล่าสุดของ Gemini เช่น Nano Banana และ Live API ตอนนี้ Google AI Studio รองรับรันไทม์แบบฟูลสแต็กแล้ว ซึ่งช่วยให้คุณสร้างแอปพลิเคชันที่มีประสิทธิภาพด้วยตรรกะฝั่งเซิร์ฟเวอร์ การจัดการข้อมูลลับที่ปลอดภัย และการรองรับแพ็กเกจ npm ทั้งหมดนี้ผ่านการป้อนพรอมต์เป็นภาษาธรรมชาติ

เริ่มต้นใช้งาน

เริ่มเขียนโค้ดฟีเจอร์ Vibe ในโหมดสร้างของ Google AI Studio คุณ เริ่มสร้างได้หลายวิธี ดังนี้

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

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

มีการสร้างอะไรบ้าง

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

  • ฝั่งไคลเอ็นต์: ส่วนหน้าของเว็บ (React เป็นค่าเริ่มต้น)
  • ฝั่งเซิร์ฟเวอร์: รันไทม์ Node.js ที่อนุญาตให้เรียกใช้ API ที่ปลอดภัย การเชื่อมต่อฐานข้อมูล และการใช้แพ็กเกจ npm

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

The Antigravity Agent

Antigravity Agent เป็นฟังก์ชันการทำงานหลักของ AI ใน Google Antigravity และตอนนี้คอมโพเนนต์หลักของ agent harness กำลังขับเคลื่อนประสบการณ์โหมดสร้างใน Google AI Studio โดยจะทำงานได้มากกว่าการสร้างโค้ดอย่างง่ายด้วยการรักษาบริบทของทั้งโปรเจ็กต์ การจัดการไฟล์หลายไฟล์ และการทำความเข้าใจคำสั่งที่ซับซ้อนเพื่อสร้างแอปพลิเคชันแบบฟูลสแต็กที่แข็งแกร่ง

ความสามารถหลักๆ มีดังนี้

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

ความสามารถแบบ Full Stack

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาแอปแบบฟูลสแต็ก

สร้างต่อไป

เมื่อ Google AI Studio สร้างโค้ดเริ่มต้นสำหรับแอปพลิเคชันแล้ว คุณจะ ปรับแต่งโค้ดต่อไปได้โดยทำดังนี้

สร้างใน Google AI Studio

  • ทำซ้ำกับ Gemini: ใช้แผงแชทในโหมดสร้างเพื่อขอให้ Gemini ทำการแก้ไข เพิ่มฟีเจอร์ใหม่ หรือเปลี่ยนสไตล์
  • แก้ไขโค้ดโดยตรง: เปิดแท็บโค้ดในแผงแสดงตัวอย่างเพื่อ ทำการแก้ไขแบบเรียลไทม์

พัฒนาภายนอก

สำหรับเวิร์กโฟลว์ขั้นสูง คุณสามารถส่งออกโค้ดและทำงานในสภาพแวดล้อมที่ต้องการได้

  • ดาวน์โหลดและพัฒนาในเครื่อง: ส่งออกโค้ดที่สร้างเป็นไฟล์ ZIP แล้วนำเข้าไปยังโปรแกรมแก้ไขโค้ด
  • พุชไปยัง GitHub: ผสานรวมโค้ดกับกระบวนการพัฒนาและการ ติดตั้งใช้งานที่มีอยู่โดยการพุชไปยังที่เก็บ GitHub

ฟีเจอร์หลัก

Google AI Studio มีฟีเจอร์หลายอย่างที่จะช่วยให้กระบวนการสร้าง เป็นไปอย่างง่ายดายและเห็นภาพ

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

สร้างและทำซ้ำแอปแบบ Full Stack: ข้อมูลสั้นๆ เกี่ยวกับการรองรับรันไทม์ ทำซ้ำด้วยโหมดคำอธิบายประกอบ แชร์และติดตั้งใช้งาน - แชร์แอปของคุณภายใน AI Studio หรือติดตั้งใช้งานใน Cloud Run สำรวจแกลเลอรีแอป

ติดตั้งใช้งานหรือเก็บถาวรแอป

เมื่อแอปพลิเคชันพร้อมแล้ว คุณจะนําไปใช้งานได้โดยทําดังนี้

  • Google Cloud Run: ทำให้แอปพลิเคชันใช้งานได้ในรูปแบบบริการที่ปรับขนาดได้ อาจมีการกำหนดราคาสำหรับ Google Cloud Run ตามการใช้งาน
  • GitHub: ส่งออกโปรเจ็กต์ไปยังที่เก็บ GitHub

ข้อจำกัด

ส่วนนี้แสดงข้อจำกัดปัจจุบันของโหมดสร้างใน Google AI Studio

ความปลอดภัยของคีย์ API

  • ฝั่งไคลเอ็นต์: ห้ามใช้คีย์ API จริงในโค้ดฝั่งไคลเอ็นต์โดยตรง
  • ฝั่งเซิร์ฟเวอร์: ใช้ฟีเจอร์การจัดการลับเพื่อจัดการคีย์ที่ละเอียดอ่อนอย่างปลอดภัยในรันไทม์ฝั่งเซิร์ฟเวอร์

การติดตั้งใช้งานภายนอก Google AI Studio

  • แม้ว่าคุณจะทําให้แอปใช้งานได้ใน Cloud Run สําหรับ URL สาธารณะ แต่การตั้งค่านี้จะ ใช้คีย์ API สําหรับการเรียก Gemini API ของผู้ใช้ทั้งหมด
    • แอป JavaScript ทำงานฝั่งไคลเอ็นต์ ดังนั้นโปรดตรวจสอบว่าคีย์ API มีสิทธิ์เข้าถึงเพียงเล็กน้อยเพื่อป้องกันข้อมูลรั่วไหลหรือการละเมิด เช่น ผู้ใช้จะเข้าถึงร้านค้าอื่นๆ ของการค้นหาไฟล์ จากโปรเจ็กต์เดียวกันได้ผ่านกลไกนี้
  • การติดตั้งใช้งานภายนอกที่ปลอดภัย: หากต้องการเรียกใช้แอปอย่างปลอดภัยภายนอก AI Studio (เช่น หลังจากดาวน์โหลดไฟล์ ZIP) คุณต้องย้ายตรรกะที่ใช้คีย์ API ไปยังคอมโพเนนต์ฝั่งเซิร์ฟเวอร์เพื่อป้องกันไม่ให้คีย์เปิดเผยต่อผู้ใช้ปลายทาง ไม่จำเป็นหากคุณ ทําให้ใช้งานได้โดยใช้ Cloud Run
  • คำเตือนเรื่องการเปิดเผยคีย์: เราไม่แนะนำให้แทนที่ตัวยึดตำแหน่งด้วยคีย์ API จริงในสภาพแวดล้อมฝั่งไคลเอ็นต์โดยเด็ดขาด เนื่องจากคีย์จะปรากฏต่อผู้ใช้ทุกคน

ข้อผิดพลาดเมื่อแชร์แอป

หากคุณแชร์แอปและผู้ใช้ปลายทางพบข้อผิดพลาด 403 Access Restricted เมื่อใช้ URL ที่แชร์ อาจเกิดจากสาเหตุใดสาเหตุหนึ่งต่อไปนี้

  • ส่วนขยายเบราว์เซอร์: ส่วนขยายความเป็นส่วนตัว เช่น Privacy Badger อาจบล็อกแอป ให้ปิดใช้ส่วนขยายเพื่อหลีกเลี่ยงข้อผิดพลาด
  • ปัญหาในการสร้าง: โค้ดปัจจุบันอาจมีปัญหา แจ้งให้เอเจนต์ "แก้ไขปัญหาการบิลด์ด้วยโค้ดปัจจุบัน" แล้วแชร์ URL อีกครั้ง

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