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

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

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

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

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

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

ระบบจะสร้างอะไร

เมื่อคุณเรียกใช้พรอมต์ 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 รันไทม์ฝั่งเซิร์ฟเวอร์จะจัดการสถานะและการเชื่อมต่อที่จำเป็น เพื่อให้ผู้ใช้โต้ตอบกันได้
  • การผสานรวม Firebase: จัดสรรและตั้งค่า Firebase โดยอัตโนมัติ รวมถึงฐานข้อมูล Firestore (ที่เก็บข้อมูลแบบถาวร) และ การตรวจสอบสิทธิ์ Firebase (ขั้นตอนการลงชื่อเข้าใช้ โดยเฉพาะ "ลงชื่อเข้าใช้ด้วย Google") เอเจนต์จะจัดการกระบวนการตั้งค่าทั้งหมดและเขียนโค้ดในแอปสำหรับบริการเหล่านี้ด้วย

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

สร้างต่อไป

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

สร้างใน Google AI Studio

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

พัฒนาภายนอก

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

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

ฟีเจอร์หลัก

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

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

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

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

  • 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 อาจบล็อกแอป ให้ปิดใช้ส่วนขยายเพื่อหลีกเลี่ยงข้อผิดพลาด
  • ปัญหาในการสร้าง: โค้ดปัจจุบันอาจมีปัญหา แจ้งให้ Agent "แก้ไขปัญหาการบิลด์ด้วยโค้ดปัจจุบัน" แล้วแชร์ URL อีกครั้ง

คำถามที่พบบ่อย

Build ใน AI Studio คืออะไร

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

เหตุใดฟีเจอร์สร้างจึงเรียกใช้ Gemini API จากโค้ดฝั่งไคลเอ็นต์

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

คีย์ API ของฉันจะแสดงเมื่อแชร์แอปไหม

อย่าใช้คีย์ API จริงในแอป ให้ใช้ค่าตัวยึดตำแหน่งแทน process.env.GEMINI_API_KEY จะตั้งค่าเป็นค่าตัวยึดตําแหน่งที่คุณใช้ได้ เมื่อผู้ใช้รายอื่นใช้แอปของคุณ AI Studio จะพร็อกซีการเรียกไปยัง Gemini API โดยแทนที่ค่าตัวยึดตำแหน่งด้วยคีย์ API ของผู้ใช้ (ไม่ใช่ของคุณ) อย่าใช้คีย์ API จริงในแอป เนื่องจากโค้ดจะแสดงต่อทุกคนที่ดูแอปของคุณได้

ใครจะเห็นแอปของฉันได้บ้าง

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

ฉันจะเรียกใช้แอปภายนอก AI Studio ได้ไหม

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

ฉันจะพัฒนาแอปในเครื่องด้วยเครื่องมือของตัวเองแล้วแชร์ที่นี่ได้ไหม

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

ฉันจะใช้ฐานข้อมูลหรือพื้นที่เก็บข้อมูลอื่นๆ กับแอปได้อย่างไร

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

เรากำลังดำเนินการเพื่อเพิ่มการรองรับพื้นที่เก็บข้อมูลโดยตรงในอนาคต ซึ่งคุณจะกำหนดค่าได้โดยตรงภายใน AI Studio

เรากำหนดให้มีการรับทราบเพิ่มเติมก่อนที่แอปจะเข้าถึง Navigator API เหล่านี้ได้ เพื่อให้มั่นใจว่าผู้ชมจะทราบว่าแอปใช้เว็บแคมหรืออุปกรณ์อื่นๆ ของตน ผู้สร้างแอปสามารถเพิ่มคำขอสิทธิ์เหล่านี้ลงในไฟล์ metadata.json ของแอป เช่น

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

ค่าที่รองรับสำหรับ requestFramePermissions เป็นชุดย่อยของฟีเจอร์ที่ควบคุมโดยนโยบายมาตรฐาน

ฉันจะใช้ GitHub กับแอปของฉันได้อย่างไร

การผสานรวม GitHub ของ AI Studio ช่วยให้คุณสร้างที่เก็บสำหรับ งานและคอมมิตการเปลี่ยนแปลงล่าสุดได้ ขณะนี้เรายังไม่รองรับการดึง การเปลี่ยนแปลงจากระยะไกล

ฉันจะให้สิทธิ์แก้ไขแอปแก่ผู้ใช้คนอื่นได้ไหม

ระบบยังไม่รองรับการดำเนินการนี้ แต่จะรองรับเร็วๆ นี้

เหตุใดแอปของฉันจึงถูกแจ้งว่าละเมิดนโยบาย

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

  • แอปที่มีมัลแวร์ ฟิชชิง หรือการแอบอ้างเป็นบุคคลอื่น
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายภาพการล่วงละเมิดทางเพศเด็ก
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายการคุกคาม
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายวาจาสร้างความเกลียดชัง
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายการค้ามนุษย์
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายเนื้อหาเกี่ยวกับเรื่องเพศอย่างโจ่งแจ้ง
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายความรุนแรงและการนองเลือด
  • แอปที่แสดงหรือเผยแพร่เนื้อหาที่ละเมิดนโยบายที่เป็นอันตรายหรือเป็นภัย

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

ในฐานะนักพัฒนาแอป ฉันมีความรับผิดชอบอะไรบ้าง

โปรดทราบว่าในฐานะเจ้าของแอปพลิเคชัน คุณมีหน้าที่รับผิดชอบต่อ ลักษณะการทำงานและข้อมูลทั้งหมดที่แอปพลิเคชันจัดการ ซึ่งรวมถึงเนื้อหาต่อไปนี้

  • การปฏิบัติตามกฎหมายและสิทธิของบุคคลที่สาม: ตรวจสอบว่าแอปของคุณเป็นไปตามกฎหมายและกฎระเบียบที่เกี่ยวข้องทั้งหมด และไม่ละเมิดสิทธิของผู้อื่น ซึ่งรวมถึงสิทธิในทรัพย์สินทางปัญญาและสิทธิด้านความเป็นส่วนตัว
  • การตรวจสอบเนื้อหา: การปฏิบัติตามข้อกำหนดเพิ่มเติมอาจมีผลกับ บริการอื่นๆ ที่แอปของคุณใช้ เช่น ข้อกำหนดในการให้บริการของ Google Cloud ซึ่งมีผลกับ Firestore กำหนดให้ลูกค้าที่โฮสต์เนื้อหาของบุคคลที่สามต้อง เผยแพร่นโยบายที่กำหนดเนื้อหาที่ห้าม (เช่น เนื้อหาที่ผิดกฎหมาย) และตรวจสอบว่ามีเนื้อหาที่ผิดกฎหมายดังกล่าวหรือไม่
  • การติดตั้งใช้งานที่ปลอดภัย: การใช้มาตรการป้องกันที่จำเป็นและ เครื่องมือการกลั่นกรองเพื่อป้องกันไม่ให้มีการนำแอปพลิเคชันไปใช้ในทางที่ผิด

โปรดทราบข้อจำกัดในการใช้ ในข้อกำหนดในการให้บริการ

ข้อกำหนดในการให้บริการเพิ่มเติมของ Gemini API มีผลกับการใช้แอปที่แนะนำในแกลเลอรีแอปใน AI Studio เว้นแต่จะ ระบุไว้เป็นอย่างอื่น

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