ติดตั้งใช้งานจาก AI Studio ไปยัง Cloud Run

1. ภาพรวม

การสร้างด้วย AI เริ่มต้นจากที่ใดได้บ้างในวันนี้ สำหรับพวกเราส่วนใหญ่แล้ว มักจะเริ่มต้นด้วยคำถามง่ายๆ ว่า "ฉันจะสร้างต้นแบบโซลูชันสำหรับปัญหาที่คิดไว้ได้อย่างรวดเร็วไหม" Google AI Studio ช่วยคุณได้ เป็นพื้นที่ที่คุณสามารถสร้างต้นแบบได้อย่างรวดเร็ว ใน Codelab นี้ เราจะสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้การเขียนโค้ดด้วย Vibe และติดตั้งใช้งานใน Cloud Run

สิ่งที่คุณจะสร้าง

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

1. สร้างเว็บแอปพลิเคชันแบบง่ายๆ โดยใช้ Vibe Coding
2. ทดสอบว่าแอปพลิเคชันทำงานตามที่คาดไว้
3. ทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run

ข้อกำหนด

• เบราว์เซอร์ เช่น Chrome หรือ Firefox
• โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงิน

2. ก่อนเริ่มต้น

1. ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Cloud แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่
3. ในกรณีที่คุณมีลิงก์เพื่อแลกรับเครดิต ให้ทำตามวิธีการที่นี่ เพื่อแลกรับ

3. ต้นแบบ

ไปที่ Google AI Studio เริ่มพิมพ์พรอมต์ที่อธิบายแอปพลิเคชันที่คุณต้องการสร้าง พรอมต์ที่ฉันใช้มีดังนี้

Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

เลือกโมเดลที่ต้องการ ในที่นี้เราใช้ Gemini 3 Pro เวอร์ชันตัวอย่าง คลิกปุ่มสร้าง

จากคำอธิบายง่ายๆ นี้ AI Studio จะสร้างเว็บแอปพลิเคชันที่ตรงกับคำอธิบายที่คุณระบุไว้ทุกประการ ระบบจะใช้เวลา 2-3 นาทีในการสร้างแอปพลิเคชัน

หากพบปัญหาใดๆ เกี่ยวกับแอปพลิเคชัน โปรดป้อนพรอมต์เพิ่มเติมเพื่อแก้ไขลักษณะการทำงานของแอปพลิเคชัน เช่น เพิ่มขนาดของเกล็ดหิมะเป็น 2 เท่าของขนาดปัจจุบัน

ดูสแนปชอตของแอปพลิเคชันที่สร้างขึ้นด้านล่าง

4. ทำให้ใช้งานได้กับ Cloud Run

เมื่อแอปพลิเคชันพร้อมแล้ว เรามาทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run กัน

1. คลิกปุ่มคล้ายจรวดที่มุมขวาบนของหน้า AI Studio ปุ่มจะแสดง "Deploy app" เมื่อวางเมาส์เหนือปุ่ม
2. ซึ่งจะเปิดป๊อปอัป "**Deploy app on Google Cloud"

3. คลิกเมนูแบบเลื่อนลงเลือกโปรเจ็กต์ที่อยู่ในระบบคลาวด์
4. เลือกโปรเจ็กต์จากเมนูแบบเลื่อนลง หากไม่พบโปรเจ็กต์ในเมนูแบบเลื่อนลง ให้คลิกนำเข้าโปรเจ็กต์ แล้วเลือกโปรเจ็กต์จากแผงนำเข้าโปรเจ็กต์
5. เมื่อเลือกโปรเจ็กต์แล้ว ระบบจะยืนยันว่าโปรเจ็กต์ได้เปิดใช้การเรียกเก็บเงินแล้ว การยืนยันนี้จะผ่านเนื่องจากเราได้แนบบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ในขั้นตอนแรกแล้ว
6. คลิกปุ่มทำให้แอปใช้งานได้ แล้วรอให้ระบบทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run

โปรดทราบว่าระบบจะสร้างชื่อบริการ Cloud Run โดยอัตโนมัติ

7. การติดตั้งใช้งานจะเสร็จสมบูรณ์ในอีก 2-3 นาที และคุณจะได้รับURL ของแอป เมื่อคลิก URL คุณจะเห็นเว็บแอปพลิเคชันที่ติดตั้งใช้งาน

5. ล้างข้อมูล

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้

1. ใน Google Cloud Console ให้ไปที่หน้าจัดการทรัพยากร
2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์

6. ขอแสดงความยินดี

ยินดีด้วย คุณเขียนโค้ดแอปพลิเคชันใน AI Studio และนำไปใช้งานใน Cloud Run เรียบร้อยแล้ว

AI Studio เป็นแพลตฟอร์มที่เหมาะสำหรับการพัฒนาและทดสอบแอปพลิเคชัน ซึ่งช่วยให้ผู้ใช้เห็นภาพการออกแบบของตนเองได้ทันที

การผสานรวม AI Studio กับ Cloud Run อย่างราบรื่นช่วยให้ผู้ใช้สามารถทำให้แอปพลิเคชันใช้งานได้บน Google Cloud โดยตรงได้อย่างง่ายดาย การใช้ Cloud Run จะทำให้ได้รับประโยชน์ทั้งหมดจากสภาพแวดล้อมแบบ Serverless ซึ่งจะช่วยลดความซับซ้อนและค่าใช้จ่ายในการจัดการโครงสร้างพื้นฐาน