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

1. ภาพรวม

การสร้างด้วย AI เริ่มต้นจากที่ใดได้บ้างในวันนี้ สำหรับพวกเราส่วนใหญ่แล้ว มักจะเริ่มต้นด้วยคำถามง่ายๆ ว่า "ฉันจะสร้างต้นแบบโซลูชันสำหรับปัญหาที่คิดไว้ได้อย่างรวดเร็วไหม" Google AI Studio ช่วยคุณได้ ซึ่งเป็นพื้นที่ที่คุณสามารถสร้างต้นแบบได้อย่างรวดเร็ว ใน Codelab นี้ เราจะสร้างเว็บแอปพลิเคชันอย่างง่ายโดยใช้ Vibe Coding และติดตั้งใช้งานใน 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 ให้ไปที่หน้าจัดการทรัพยากร
2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์

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

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

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

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