หน้านี้อธิบายวิธีใช้โหมดสร้างใน Google AI Studio เพื่อ สร้าง (หรือเขียนโค้ด) และทำให้แอปใช้งานได้รวดเร็ว ซึ่งจะทดสอบความสามารถล่าสุดของ Gemini เช่น nano banana และ Live API
เริ่มต้นใช้งาน
เริ่มเขียนโค้ดฟีเจอร์ Vibe ในโหมดสร้างของ Google AI Studio คุณ เริ่มสร้างได้หลายวิธี ดังนี้
- เริ่มต้นด้วยพรอมต์: ในโหมดสร้าง ให้ใช้ช่องป้อนข้อมูลเพื่อป้อนคำอธิบายของสิ่งที่คุณต้องการสร้าง เลือกชิป AI เพื่อเพิ่มฟีเจอร์ที่เฉพาะเจาะจง เช่น การสร้างรูปภาพหรือข้อมูล Google Maps ลงในพรอมต์ คุณยัง พูดสิ่งที่ต้องการได้โดยใช้ปุ่มการแปลงเสียงเป็นข้อความ
- ปุ่ม "ดีใจจัง เขียนมาให้เลย": หากต้องการแรงบันดาลใจในการสร้างสรรค์ ให้ใช้ปุ่ม "ดีใจจัง เขียนมาให้เลย" แล้ว Gemini จะสร้างพรอมต์พร้อมไอเดียโปรเจ็กต์ เพื่อช่วยให้คุณเริ่มต้นได้
- รีมิกซ์โปรเจ็กต์จากแกลเลอรี: เปิดโปรเจ็กต์จากแกลเลอรี แอป แล้วเลือกคัดลอกแอป
เมื่อเรียกใช้พรอมต์แล้ว คุณจะเห็นโค้ดและไฟล์ที่จำเป็นถูกสร้างขึ้น พร้อมตัวอย่างแอปแบบเรียลไทม์ที่ปรากฏทางด้านขวามือ
มีการสร้างอะไรบ้าง
เมื่อเรียกใช้พรอมต์ AI Studio จะสร้างเว็บแอป โดยค่าเริ่มต้นจะสร้างเว็บแอป React แต่คุณเลือกสร้างแอป Angular ได้ในเมนูการตั้งค่า คุณดูโค้ดที่สร้างขึ้นได้โดยเลือกแท็บโค้ดในบานหน้าต่างแสดงตัวอย่างทางด้านขวา
ไฟล์ที่ควรทราบมีดังนี้
- geminiService.ts: ไฟล์นี้มีตรรกะหลักสำหรับแอปของคุณ ตั้งแต่ การสร้างพรอมต์ไปจนถึงการเรียกใช้ Gemini API และการแยกวิเคราะห์คำตอบ คุณ แก้ไขพรอมต์พื้นฐานในไฟล์นี้หรือแก้ไขฟังก์ชันการทำงานของคอมโพเนนต์ ได้โดยตรงหรือโดยการแชทกับ Gemini แบบอินเทอร์แอกทีฟในโหมดสร้าง โปรดทราบว่าโค้ดในไฟล์นี้ใช้ GenAI TS SDK เพื่อโต้ตอบกับ Gemini API
สร้างต่อไป
เมื่อ Google AI Studio สร้างโค้ดเริ่มต้นสำหรับเว็บแอปพลิเคชันแล้ว คุณจะมีตัวเลือกหลัก 2 อย่างในการทำโปรเจ็กต์ต่อ ได้แก่ สร้างใน AI Studio หรือพัฒนาภายนอก
สร้างใน Google AI Studio
คุณสามารถปรับแต่งและขยายแอปพลิเคชันต่อได้โดยตรงภายในสภาพแวดล้อมของ Google AI Studio โดยทำดังนี้
- ทำซ้ำกับ Gemini: ใช้แผงแชทในโหมดสร้างเพื่อขอให้ Gemini แก้ไข เพิ่มฟีเจอร์ใหม่ หรือเปลี่ยนสไตล์ เช่น คุณ อาจขอว่า "เพิ่มปุ่มที่แจ้งเตือนผู้ใช้" หรือ "เปลี่ยนรูปแบบสีเป็น สีน้ำเงินและสีขาว"
- แก้ไขโค้ดโดยตรง: เปิดแท็บโค้ดในแผงแสดงตัวอย่างเพื่อทำการแก้ไข แบบเรียลไทม์ คุณสามารถบันทึกโปรเจ็กต์ไปยัง GitHub เพื่อใช้การควบคุมเวอร์ชัน ขณะพัฒนา
พัฒนาภายนอก
สำหรับเวิร์กโฟลว์ขั้นสูง คุณสามารถส่งออกโค้ดและทำงานในสภาพแวดล้อมที่ต้องการได้โดยทำดังนี้
- ดาวน์โหลดและพัฒนาในเครื่อง: ส่งออกโค้ดที่สร้างเป็นไฟล์ ZIP แล้วนำเข้าไปยังโปรแกรมแก้ไขโค้ด ซึ่งช่วยให้คุณใช้เครื่องมือที่คุ้นเคย สร้างระบบ และใช้แนวทางปฏิบัติในการควบคุมเวอร์ชันในเครื่องเพื่อสร้างต่อจาก ต้นแบบเริ่มต้นได้
- พุชไปยัง GitHub: ผสานรวมโค้ดกับกระบวนการพัฒนาและการ ติดตั้งใช้งานที่มีอยู่โดยการพุชไปยังที่เก็บ GitHub
ฟีเจอร์หลัก
Google AI Studio มีฟีเจอร์หลายอย่างที่จะช่วยให้กระบวนการสร้างเป็นไปอย่าง เป็นธรรมชาติและมองเห็นได้ ดังนี้
- โหมดคำอธิบายประกอบ: โหมดคำอธิบายประกอบช่วยให้คุณไฮไลต์ส่วนใดก็ได้ใน UI ของแอปและอธิบายการเปลี่ยนแปลงที่ต้องการได้ แทนที่จะเขียนโค้ดเพื่อเปลี่ยนลักษณะที่ปรากฏของแอป เช่น คุณเลือกคอมโพเนนต์แล้วพิมพ์ว่า "เปลี่ยนปุ่มนี้ เป็นสีน้ำเงิน" หรือ "ทำให้รูปภาพนี้เคลื่อนที่จากด้านซ้าย" เมื่อคุณเลือกเพิ่มลงในแชท ระบบจะสร้างพรอมต์พร้อมภาพหน้าจอของแอปที่มี คำอธิบายประกอบ
- แชร์แอปของคุณ: คุณสามารถแชร์ผลงานกับผู้อื่นเพื่อ ทำงานร่วมกันหรือแสดงผลงานของคุณ
- แกลเลอรีแอป: แกลเลอรีแอปมีคลังภาพไอเดียโปรเจ็กต์ คุณสามารถเรียกดูสิ่งที่ Gemini ทำได้ ดูตัวอย่างแอปพลิเคชันได้ทันที และรีมิกซ์แอปพลิเคชันเหล่านั้นให้เป็นของคุณเอง
ติดตั้งใช้งานหรือเก็บถาวรแอป
เมื่อแอปพลิเคชันพร้อมแล้ว คุณจะนำไปใช้งานได้โดยตรงจาก AI Studio ตัวเลือกสำหรับการติดตั้งใช้งานมีดังนี้
- Google Cloud Run: ทำให้แอปพลิเคชันใช้งานได้ในรูปแบบบริการที่ปรับขนาดได้ โปรดทราบว่าอาจมี ราคาสำหรับ Google Cloud Run ตามการใช้งาน
- GitHub: ส่งออกโปรเจ็กต์ไปยังที่เก็บ GitHub เพื่อผสานรวมเข้ากับ เวิร์กโฟลว์การพัฒนาและการติดตั้งใช้งานที่มีอยู่
ข้อจำกัด
ส่วนนี้ระบุข้อจำกัดที่สำคัญเมื่อใช้โหมดสร้างใน Google AI Studio
ความปลอดภัยและการเปิดเผยคีย์ API
- โค้ดของแอปที่แชร์จะปรากฏต่อทุกคนที่ดู อย่านำคีย์ API จริงไปใช้ในโค้ดของแอปโดยตรง
- โดยค่าเริ่มต้น แอปจะใช้ตัวยึดตำแหน่ง (เช่น process.env.GEMINI_API_KEY) สำหรับ คีย์ API เมื่อผู้ใช้เรียกใช้แอปที่แชร์ภายใน AI Studio แล้ว AI Studio จะทำหน้าที่เป็น พร็อกซี โดยแทนที่ตัวยึดตำแหน่งด้วยคีย์ API ของผู้ใช้ปลายทาง เพื่อให้มั่นใจว่า คีย์ของคุณจะยังคงเป็นส่วนตัว
ระดับการเข้าถึงและการแชร์แอป
- ระบบจะจัดเก็บแอปไว้ใน Google ไดรฟ์และรับช่วงรูปแบบสิทธิ์ของไดรฟ์ ซึ่งหมายความว่า แอปจะเป็นแบบส่วนตัวโดยค่าเริ่มต้น
- สิทธิ์การแชร์: เมื่อแชร์แอปกับผู้ใช้รายอื่น
- ผู้ใช้ที่แชร์จะดูโค้ดและแยกแอปเพื่อใช้เองได้
- หากได้รับสิทธิ์แก้ไข ผู้ใช้ที่แชร์จะแก้ไขโค้ดของแอปได้
การทำให้ใช้งานได้ภายนอก AI Studio
- แม้ว่าคุณจะทําให้แอปใช้งานได้ใน Cloud Run สําหรับ URL สาธารณะ แต่การตั้งค่านี้จะ
ใช้คีย์ API สําหรับการเรียก Gemini API ของผู้ใช้ทั้งหมด
- แอป JavaScript ทำงานฝั่งไคลเอ็นต์ ดังนั้นโปรดตรวจสอบว่าคีย์ API มีสิทธิ์เข้าถึงเพียงเล็กน้อยเพื่อป้องกันการรั่วไหลหรือการละเมิดข้อมูล ตัวอย่างเช่น ผู้ใช้จะเข้าถึงที่เก็บการค้นหาไฟล์อื่นๆ จากโปรเจ็กต์เดียวกันได้ผ่านกลไกนี้
- การติดตั้งใช้งานภายนอกที่ปลอดภัย: หากต้องการเรียกใช้แอปอย่างปลอดภัยภายนอก AI Studio (เช่น หลังจากดาวน์โหลดไฟล์ ZIP) คุณต้องย้ายตรรกะที่ใช้คีย์ API ไปยังคอมโพเนนต์ฝั่งเซิร์ฟเวอร์เพื่อป้องกันไม่ให้คีย์เปิดเผยต่อผู้ใช้ปลายทาง ไม่จำเป็นหากคุณ ทําให้ใช้งานได้โดยใช้ Cloud Run
- คำเตือนเรื่องการเปิดเผยคีย์: เราไม่แนะนำให้แทนที่ตัวยึดตำแหน่งด้วยคีย์ API จริงในสภาพแวดล้อมฝั่งไคลเอ็นต์โดยเด็ดขาด เนื่องจากคีย์จะปรากฏต่อผู้ใช้ทุกคน
การรองรับเครื่องมือและฟีเจอร์
- การนำเข้าเพื่อการพัฒนาในเครื่อง: ปัจจุบันคุณยังพัฒนาแอปในเครื่องด้วย เครื่องมือภายนอกและนำเข้าไปยัง AI Studio ไม่ได้
ขั้นตอนต่อไปคือ
- ดูสิ่งที่คนอื่นๆ สร้างขึ้นและรับแรงบันดาลใจด้วยการรีมิกซ์โปรเจ็กต์ที่มีอยู่แล้วในApp Gallery
- ดูเพลย์ลิสต์ YouTube เพื่อดูคอลเล็กชันบทแนะนำการเขียนโค้ดสไตล์ AI Studio ที่จะช่วยให้คุณเริ่มต้นใช้งานได้