1. ภาพรวม
ใน Codelab นี้ คุณจะได้สร้างเว็บแอปพลิเคชัน "Snake & Beats" ซึ่งเป็นเกมงูย้อนยุคที่มีมิวสิกเพลเยอร์ในตัว คุณจะใช้ Gemini เพื่อสร้างแอปพลิเคชัน React แบบไฟล์เดียวที่มีความสวยงามแบบนีออน จากนั้นควบคุมเวอร์ชันและติดตั้งใช้งานใน Cloud Run
สิ่งที่คุณจะได้ทำ
- สร้างและพรอมต์: ใช้โหมด "สร้าง" ของ Google AI Studio เพื่อสร้างเกมที่ใช้งานได้จากพรอมต์เดียว
- ปรับแต่งด้วยคำแนะนำของระบบ: "Vibe Check" AI ของคุณโดยกำหนดบุคลิกที่คงอยู่สำหรับการแก้ไขในอนาคต
- บันทึกลงใน GitHub: บูตสแตรปที่เก็บใหม่จาก AI Studio โดยตรง
- ติดตั้งใช้งานใน Cloud Run: ส่งเกมของคุณไปยัง Google Cloud Run ได้ด้วยการคลิกเพียงครั้งเดียว
สิ่งที่คุณจะได้เรียนรู้
- วิธีใช้โหมดสร้างใน Google AI Studio เพื่อสร้างต้นแบบแอปอย่างรวดเร็ว
- วิธีใช้คำแนะนำของระบบเพื่อรักษา "Vibe การเขียนโค้ด" ที่สอดคล้องกันระหว่างการทำซ้ำ
- วิธีเชื่อมต่อ Google AI Studio กับ GitHub และ Cloud Run
สิ่งที่คุณต้องมี
- เว็บเบราว์เซอร์ Chrome
- บัญชี Gmail
- โปรเจ็กต์ Cloud ที่เปิดใช้การเรียกเก็บเงิน
- คีย์ Gemini API
- บัญชี GitHub
2. ก่อนเริ่มต้น
- ใน คอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้เลือกหรือสร้าง โปรเจ็กต์ Google Cloud
- ตรวจสอบว่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์เปิดใช้การเรียกเก็บเงินแล้ว ดูวิธีตรวจสอบว่าโปรเจ็กต์เปิดใช้การเรียกเก็บเงินแล้วหรือไม่
3. สร้างและพรอมต์ (ส่วนหลัก)
เราจะเริ่มต้นด้วยการสร้างแอปพลิเคชันทั้งหมดในคราวเดียว เข้าสู่ระบบ Google AI Studio และตรวจสอบว่าคุณอยู่ใน อินเทอร์เฟซการสร้าง
- ป้อนพรอมต์การสร้าง: วางพรอมต์โดยละเอียดต่อไปนี้ลงในกล่องแชท
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- เลือกโมเดล: ในแผงการตั้งค่าทางด้านขวา ให้เลือก Gemini 3.0 Pro (หรือโมเดลเวอร์ชันตัวอย่างล่าสุด) เพื่อให้สร้างโค้ดได้เร็วที่สุด
- เรียกใช้: กด สร้าง (หรือกด Cmd + Enter)
- แสดงตัวอย่าง: Gemini จะสร้างโค้ดและโดยปกติจะแสดงตัวอย่างแบบสดทางด้านขวา (ดังที่แสดงด้านล่าง)
4. ปรับแต่งด้วยคำอธิบายประกอบ รูปภาพ และเสียง
บางครั้งการอธิบายการเปลี่ยนแปลงภาพด้วยคำพูดก็ทำได้ยาก โหมดคำอธิบายประกอบช่วยให้คุณวาดบนตัวอย่างแอปเพื่อสื่อสารวิสัยทัศน์ของคุณได้ทันที
ใช้โหมดคำอธิบายประกอบ
- เปิดใช้งานโหมดคำอธิบายประกอบ: ในอินเทอร์เฟซ AI Studio (ตรวจสอบแผงด้านซ้ายหรือแถบเครื่องมือด้านล่างของหน้าต่างแสดงตัวอย่าง) ให้เลือกเครื่องมือคำอธิบายประกอบหรือเครื่องมือปรับแต่ง
- ทำเครื่องหมายแอป:
- วาด: ใช้เครื่องมือกล่องเพื่อวาดสี่เหลี่ยมผืนผ้ารอบตัวนับคะแนน
- แสดงความคิดเห็น: พิมพ์พรอมต์ที่แนบกับกล่องนั้นว่า "ทำให้แบบอักษรนี้ใหญ่ขึ้น เป็นแบบดิจิทัล และมีลักษณะผิดเพี้ยน"
- ร่าง: ใช้เครื่องมือลูกศรเพื่อชี้ไปที่ปุ่มเล่น/หยุดชั่วคราว
- แสดงความคิดเห็น: พิมพ์ว่า "เปลี่ยนปุ่มเหล่านี้ให้เป็นไอคอนนีออนเรืองแสง"
- ทำซ้ำ: คลิก "เพิ่มลงในแชท" แล้วกดส่งพรอมต์ Gemini จะตีความเครื่องหมายภาพและคำสั่งข้อความเพื่ออัปเดตโค้ด
- ยืนยัน: ดูการแสดงตัวอย่างอัปเดตแบบเรียลไทม์ ตอนนี้ความคิดเห็นที่เป็นภาพของคุณควรแสดงในโค้ดแล้ว
ป้อนข้อมูลด้วยเสียง (Vibe ที่พูด)
บางครั้งการพูด "Vibe" ก็ง่ายกว่าการเขียน
- การดำเนินการ: คลิกไอคอนไมโครโฟนในแถบป้อนข้อมูล (ข้างปุ่ม +)
- พูดว่า "เฮ้ ภาพเคลื่อนไหวของงูช้าเกินไป เร่งความเร็วขึ้นและทำให้หางทิ้งร่องรอยเรืองแสงไว้"
- ส่ง: Gemini จะแปลงคำพูดของคุณเป็นข้อความและใช้การเปลี่ยนแปลง
5. ตั้งค่าคำแนะนำของระบบและสร้างใหม่
คำแนะนำของระบบจะคงอยู่ตลอดทั้งเซสชัน ซึ่งแตกต่างจากพรอมต์ปกติ คำแนะนำของระบบเป็นตำแหน่งที่ดีที่สุดในการกำหนดมาตรฐานการเขียนโค้ด อนุสัญญาการตั้งชื่อ หรือบุคลิกภาพเฉพาะที่มองเห็นได้ซึ่งไม่ควรเปลี่ยนแปลง
- เปิดการตั้งค่าขั้นสูง: ในอินเทอร์เฟซ Google AI Studio (โหมดสร้าง) ให้มองหากล่องคำแนะนำของระบบ หากไม่เห็น ให้คลิกการตั้งค่า (ไอคอนรูปเฟือง) หรือการตั้งค่าขั้นสูงที่ด้านบนหรือด้านข้างของแผงแชท
- เพิ่มคำแนะนำ "Vibe": วางคำแนะนำต่อไปนี้ลงในกล่องข้อความ ซึ่งจะกำหนดบุคลิกภาพ "Glitch Art" สำหรับเกมของเรา
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- การทริกเกอร์การเปลี่ยนแปลง: การเปลี่ยนคำแนะนำของระบบไม่ได้เขียนโค้ดใหม่โดยอัตโนมัติ คุณต้องบอกให้ Gemini ใช้กฎใหม่เหล่านี้
- ปิดแผงการตั้งค่า
- ในอินพุตแชท/พรอมต์ ให้พิมพ์ว่า "สร้าง UI ของแอปพลิเคชันใหม่เพื่อให้เป็นไปตามคำแนะนำของระบบใหม่โดยเคร่งครัด"
- คลิกเรียกใช้ / ส่ง
- สังเกตการอัปเดต: Gemini จะรับทราบการเปลี่ยนแปลง
6. บันทึกลงใน GitHub
แทนที่จะดาวน์โหลดไฟล์และจัดการกับบรรทัดคำสั่ง เราจะใช้การผสานรวม GitHub ในตัวเพื่อบูตสแตรปที่เก็บได้ทันที
- ค้นหาการผสานรวม: ในแถบเครื่องมือด้านบนของอินเทอร์เฟซ Google AI Studio ให้มองหาไอคอน GitHub ที่อยู่ระหว่างไอคอนดาวน์โหลดและไอคอนติดตั้งใช้งาน
- เชื่อมต่อบัญชี: คลิกไอคอน หากใช้เป็นครั้งแรก ระบบจะขอให้คุณให้สิทธิ์ Google AI Studio ในการเข้าถึงบัญชี GitHub
- สร้างที่เก็บ: กล่องโต้ตอบจะปรากฏขึ้นโดยมีชื่อว่า "กรอกข้อมูลด้านล่างเพื่อสร้างที่เก็บ"
- ชื่อที่เก็บ: ป้อนชื่อ เช่น "เกมงูที่สร้างโดย AI ด้วย React"
- คำอธิบายที่เก็บ: ป้อนคำอธิบายที่เก็บ
- ระดับการเข้าถึง: เลือกสาธารณะ (เพื่อให้แชร์ได้ง่าย) หรือส่วนตัว
- พุชไปยัง GitHub: คลิกปุ่ม "สร้างที่เก็บ Git"
7. ติดตั้งใช้งานใน Cloud Run
ตอนนี้แอปพลิเคชันพร้อมแล้วและบันทึกลงใน GitHub แล้ว เรามาติดตั้งใช้งานใน Cloud Run กัน
- เริ่มการติดตั้งใช้งาน: คลิกปุ่มที่ไฮไลต์ด้านล่าง ปุ่มนี้จะอยู่ที่มุมขวาบนของหน้า AI Studio
- เลือกโปรเจ็กต์: คลิกเมนูแบบเลื่อนลง "เลือกโปรเจ็กต์ Cloud" แล้วเลือกโปรเจ็กต์จากเมนูแบบเลื่อนลง
- การแก้ปัญหา: หากไม่พบโปรเจ็กต์ในเมนูแบบเลื่อนลง ให้คลิก "นำเข้าโปรเจ็กต์" แล้วเลือกโปรเจ็กต์จากแผง "นำเข้าโปรเจ็กต์"
- การยืนยันการเรียกเก็บเงิน: เมื่อคุณเลือกโปรเจ็กต์แล้ว ระบบจะยืนยันว่าโปรเจ็กต์เปิดใช้การเรียกเก็บเงินแล้ว การยืนยันนี้จะผ่านไปโดยอัตโนมัติเนื่องจากเราแนบบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ในส่วน "ก่อนเริ่มต้น"
- ติดตั้งใช้งาน: คลิกปุ่ม "ติดตั้งใช้งานแอป" แล้วรอให้แอปพลิเคชันติดตั้งใช้งานใน Cloud Run หมายเหตุ: ระบบจะสร้างชื่อบริการ Cloud Run โดยอัตโนมัติ
- การติดตั้งใช้งานควรจะเสร็จสมบูรณ์ในอีก 2-3 นาที และคุณจะได้รับ URL ของแอป เมื่อคลิก URL คุณจะเห็นเว็บแอปพลิเคชันที่ติดตั้งใช้งานจริงบนอินเทอร์เน็ต
8. ล้างข้อมูล
โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้
- ในคอนโซล Google Cloud ให้ไปที่หน้า จัดการทรัพยากร
- ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
- ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์
9. ขอแสดงความยินดี
ขอแสดงความยินดี คุณได้เขียนโค้ด Vibe ให้แอปพลิเคชันใน AI Studio และติดตั้งใช้งานใน Cloud Run เรียบร้อยแล้ว!!
AI Studio เป็นแพลตฟอร์มที่เหมาะที่สุดสำหรับการพัฒนาและทดสอบแอปพลิเคชัน ซึ่งช่วยให้ผู้ใช้เห็นภาพการออกแบบของตนเองได้ทันที
การผสานรวม AI Studio กับ Cloud Run อย่างราบรื่นช่วยให้ผู้ใช้ติดตั้งใช้งานแอปพลิเคชันของตนเองใน Google Cloud ได้อย่างง่ายดาย การใช้ Cloud Run จะมอบสิทธิประโยชน์ทั้งหมดของสภาพแวดล้อมแบบ Serverless ซึ่งจะช่วยลดความซับซ้อนและค่าใช้จ่ายในการจัดการโครงสร้างพื้นฐาน