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

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

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

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

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

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

สิ่งที่สร้างขึ้น

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

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

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

Antigravity Agent

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

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

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

ความสามารถแบบเต็มรูปแบบ

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

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

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

สร้างต่อ

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

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

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

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

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

โหมดสร้างใน 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 จริงในแอป เนื่องจากโค้ดจะปรากฏให้ทุกคนที่ดูแอปของคุณได้เห็น

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

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

ฉันเรียกใช้แอปนอก 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 อื่นๆ ได้อย่างไร

เพื่อให้ผู้ชมทราบว่าแอปใช้เว็บแคมหรืออุปกรณ์อื่นๆ ของตน เราจึงกำหนดให้มีการรับทราบเพิ่มเติมก่อนที่แอปจะเข้าถึง เหล่านี้ 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 กำหนดให้ลูกค้าที่โฮสต์เนื้อหาของบุคคลที่สามต้อง เผยแพร่นโยบายที่กำหนดเนื้อหาที่ไม่อนุญาต (เช่น เนื้อหาที่ผิดกฎหมาย) และตรวจสอบการมีอยู่ของเนื้อหาที่ผิดกฎหมายดังกล่าว
• การติดตั้งใช้งานอย่างปลอดภัย: ติดตั้งใช้งานการป้องกันและเครื่องมือการกลั่นกรองที่จำเป็นเพื่อป้องกันไม่ให้มีการใช้แอปพลิเคชันในทางที่ผิด

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

ข้อกำหนดใดบ้างที่มีผลกับแอปในแกลเลอรีแอปใน AI Studio

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

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

• การพัฒนาแอปแบบเต็มรูปแบบ
• ดูตัวอย่างใน แกลเลอรีแอป