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

1. ภาพรวม

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

ข้อกำหนดเบื้องต้น

• ความเข้าใจพื้นฐานเกี่ยวกับเว็บแอปพลิเคชัน

สิ่งที่คุณจะได้เรียนรู้

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีทำสิ่งต่อไปนี้

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

ข้อกำหนด

• เว็บเบราว์เซอร์ เช่น Chrome หรือ Firefox

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

1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
   • ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจำกัดที่ทำให้คุณเปิดใช้ API ที่จำเป็นสำหรับ Lab นี้ไม่ได้
2. ไปที่ Google AI Studio แล้วอ่านข้อกำหนดในการให้บริการ
3. โปรดทราบว่าเนื่องจากคุณอยู่ใน Google Cloud Starter Tier คุณจึงสามารถติดตั้งใช้งานแอปพลิเคชันแบบฟูลสแต็ก 2 รายการได้โดยไม่มีค่าใช้จ่าย

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.

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

หากพบปัญหาเกี่ยวกับแอปพลิเคชัน คุณสามารถป้อนพรอมต์เพิ่มเติมเพื่อปรับแต่งลักษณะการทำงานของแอปได้ (เช่น Increase the size of the snowflakes to twice their current size)

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

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

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

1. คลิกเผยแพร่ที่มุมขวาบนของหน้า

2. ซึ่งจะเปิดกล่องโต้ตอบติดตั้งใช้งานแอปใน Google Cloud

โปรดทราบว่าบัญชี Google Cloud Starter Tier ทุกบัญชีจะได้รับการติดตั้งใช้งาน 2 รายการโดยไม่มีค่าใช้จ่าย

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

6. คลิกเผยแพร่แอป แล้วรอให้แอปพลิเคชันทําให้ใช้งานได้ใน Cloud Run โปรดทราบว่า AI Studio จะสร้างชื่อบริการ Cloud Run โดยอัตโนมัติ

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

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

หากต้องการหลีกเลี่ยงการเรียกเก็บเงินจากบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ใน Codelab นี้ ให้คลิกเลิกเผยแพร่แอป

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

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

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

ขั้นตอนถัดไป

ยินดีด้วยที่ทำแล็บนี้เสร็จ ตอนนี้เมื่อเฟรมเวิร์กแอปพลิเคชันพร้อมแล้ว ให้สำรวจคำแนะนำอย่างเป็นทางการเหล่านี้เพื่อขยายขีดความสามารถของโปรเจ็กต์

เอกสารและคำแนะนำที่แนะนำ

• กลยุทธ์การออกแบบพรอมต์: เรียนรู้หลักการสำคัญของการจัดโครงสร้างพรอมต์ การใช้คำสั่งของระบบ การใช้ตัวอย่างแบบไม่กี่ช็อต และการควบคุมรูปแบบเอาต์พุต
• การเรียกใช้ฟังก์ชันด้วย Gemini API: เชื่อมต่อการทำให้ใช้งานได้กับเครื่องมือและ API ภายนอก เพื่อให้โมเดล Gemini แสดงผล Structured Data และทริกเกอร์ตรรกะของแอปพลิเคชันในโลกแห่งความเป็นจริง
• การสร้างการอ่านออกเสียงข้อความ: ดูวิธีสร้างเสียงพูดโดยใช้ Gemini API, ควบคุมรูปแบบการพูด และทดสอบเสียงโดยใช้คลังเสียงใน Google AI Studio