1. ภาพรวม
ในโค้ดแล็บนี้ คุณจะได้สร้างเว็บแอปพลิเคชัน "Snake & Beats" ซึ่งเป็นเกมงูย้อนยุคที่มีมิวสิกเพลเยอร์ในตัว คุณจะใช้ Gemini เพื่อสร้างแอปพลิเคชัน React แบบไฟล์เดียวที่มีความสวยงามแบบนีออน จากนั้นจะควบคุมเวอร์ชันและติดตั้งใช้งานใน Cloud Run
สิ่งที่คุณต้องดำเนินการ
- สร้างและป้อนพรอมต์: ใช้โหมด "สร้าง" ของ Google AI Studio เพื่อสร้างเกมที่ใช้งานได้จากพรอมต์เดียว
- ปรับแต่งด้วยคำสั่งของระบบ: "ตรวจสอบความรู้สึก" ของ AI โดยการตั้งค่าลักษณะตัวตนแบบถาวรสำหรับการแก้ไขในอนาคต
- บันทึกลงใน GitHub: เริ่มต้นที่เก็บใหม่ได้โดยตรงจาก AI Studio
- ทำให้ใช้งานได้กับ Cloud Run: ส่งเกมไปยัง Google Cloud Run ได้ในคลิกเดียว
สิ่งที่คุณจะได้เรียนรู้
- วิธีใช้โหมดสร้างใน Google AI Studio เพื่อสร้างต้นแบบแอปอย่างรวดเร็ว
- วิธีใช้คำสั่งของระบบเพื่อรักษา "กลิ่นอายของการเขียนโค้ด" ที่สอดคล้องกันในระหว่างการทำซ้ำ
- วิธีเชื่อมต่อ Google AI Studio กับ GitHub และ Cloud Run
สิ่งที่คุณต้องมี
- เว็บเบราว์เซอร์ Chrome
- บัญชี Gmail
- โปรเจ็กต์ Cloud ที่เปิดใช้การเรียกเก็บเงิน
- คีย์ Gemini API
- บัญชี GitHub
2. ก่อนเริ่มต้น
- ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
- ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ 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 จะตีความเครื่องหมายภาพและคำสั่งข้อความเพื่ออัปเดตโค้ด
- ยืนยัน: ดูการอัปเดตเวอร์ชันตัวอย่างแบบสด ตอนนี้ความคิดเห็นด้านภาพของคุณควรแสดงในโค้ดแล้ว
ป้อนข้อมูลด้วยเสียง (The Spoken Vibe)
บางครั้งการพูดถึง "ฟีล" ก็ง่ายกว่าการเขียน
- การดำเนินการ: คลิกไอคอนไมโครโฟนในแถบป้อนข้อมูล (ข้างปุ่ม +)
- พูดว่า "เฮ้ ภาพเคลื่อนไหวของงูช้าเกินไป เร่งความเร็วและทำให้หางทิ้งร่องรอยเรืองแสงไว้"
- ส่ง: Gemini จะแปลงคำพูดของคุณเป็นข้อความและใช้การเปลี่ยนแปลง
5. ตั้งค่าคำสั่งของระบบและสร้างใหม่
คำสั่งของระบบจะคงอยู่ตลอดทั้งเซสชัน ซึ่งแตกต่างจากพรอมต์ปกติ ซึ่งเป็นที่ที่ดีที่สุดในการกำหนดมาตรฐานการเขียนโค้ด รูปแบบการตั้งชื่อ หรือลักษณะภาพที่เฉพาะเจาะจงซึ่งไม่ควรเปลี่ยนแปลง
- เปิดการตั้งค่าขั้นสูง: ในอินเทอร์เฟซ Google AI Studio (โหมดสร้าง) ให้มองหาช่องคำสั่งของระบบ หากไม่เห็น ให้คลิกการตั้งค่า (ไอคอนรูปเฟือง) หรือการตั้งค่าขั้นสูงที่ด้านบนหรือด้านข้างของแผงแชท
- เพิ่มคำสั่ง "ฟีล": วางคำสั่งต่อไปนี้ลงในกล่องข้อความ ซึ่งจะกำหนดลักษณะตัวตนของ "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 Run หมายเหตุ: ระบบจะสร้างชื่อบริการ Cloud Run โดยอัตโนมัติ
- การติดตั้งใช้งานจะเสร็จสมบูรณ์ในอีก 2-3 นาที และคุณจะได้รับ URL ของแอป เมื่อคลิก URL คุณจะเห็นเว็บแอปพลิเคชันที่ติดตั้งใช้งานจริงบนอินเทอร์เน็ต
8. ล้างข้อมูล
โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้
- ใน Google Cloud Console ให้ไปที่หน้าจัดการทรัพยากร
- ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
- ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์
9. ขอแสดงความยินดี
ยินดีด้วย คุณเขียนโค้ดแอปพลิเคชันใน AI Studio และนำไปใช้งานใน Cloud Run เรียบร้อยแล้ว
AI Studio เป็นแพลตฟอร์มที่เหมาะสำหรับการพัฒนาและทดสอบแอปพลิเคชัน ซึ่งช่วยให้ผู้ใช้เห็นภาพการออกแบบของตนเองได้ทันที
การผสานรวม AI Studio กับ Cloud Run อย่างราบรื่นช่วยให้ผู้ใช้สามารถทำให้แอปพลิเคชันใช้งานได้บน Google Cloud โดยตรงได้อย่างง่ายดาย การใช้ Cloud Run จะทำให้ได้รับประโยชน์ทั้งหมดจากสภาพแวดล้อมแบบ Serverless ซึ่งจะช่วยลดความซับซ้อนและค่าใช้จ่ายในการจัดการโครงสร้างพื้นฐาน