เปิดตัวเว็บแอปสิ่งที่ต้องทำด้วย AI

1. บทนำ

ภาพรวม

การสร้างด้วย AI เริ่มต้นที่ใดในปัจจุบัน สำหรับพวกเราส่วนใหญ่ การสร้างเริ่มต้นด้วยการค้นหาหรือการสร้างต้นแบบอย่างง่าย Google AI Studio มีโหมดสร้าง ที่มีประสิทธิภาพ (มักเรียกว่า "การเขียนโค้ดแบบสบายๆ") ซึ่งช่วยให้คุณออกแบบ ทดสอบ และสร้างเว็บแอปพลิเคชันแบบ Full-Stack ได้โดยใช้การสร้างโค้ดที่ขับเคลื่อนโดยโมเดล Gemini

ใน Codelab นี้ คุณจะได้สร้างเว็บแอปพลิเคชันรายการสิ่งที่ต้องทำแบบทำงานร่วมกันด้วยฐานข้อมูล Firestore สำหรับพื้นที่เก็บข้อมูลถาวร และการตรวจสอบสิทธิ์ Firebase สำหรับการเข้าสู่ระบบของผู้ใช้ Agent ของ AI Studio จะกำหนดค่าบริการแบ็กเอนด์ทั้งหมดและเขียนโค้ดการโต้ตอบของฟรอนท์เอนด์และฐานข้อมูล เมื่อแอปพร้อมใช้งานแล้ว คุณจะทำให้แอปใช้งานได้ใน Cloud Run ได้โดยตรงด้วยการคลิกเพียงครั้งเดียว

สิ่งที่คุณจะได้ทำ

• ใช้พรอมต์กับ Google AI Studio เพื่อสร้างต้นแบบเว็บแอปพลิเคชันรายการสิ่งที่ต้องทำแบบทำงานร่วมกัน
• กำหนดค่าและเปิดใช้การผสานรวม Firebase เพื่อจัดสรรฐานข้อมูล Firestore และตั้งค่าการตรวจสอบสิทธิ์ด้วย Google Sign-In
• ทดสอบแอปพลิเคชันในแซนด์บ็อกซ์การแสดงตัวอย่างแบบอินเทอร์แอกทีฟ
• ทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run โดยตรงจาก UI ของ Google AI Studio

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

• วิธีใช้โหมดสร้างของ Google AI Studio เพื่อสร้างต้นแบบบริการแบบ Full-Stack อย่างรวดเร็วโดยใช้ภาษาง่ายๆ
• วิธีที่ Google AI Studio กำหนดค่าการผสานรวม Firebase Firestore และการตรวจสอบสิทธิ์โดยอัตโนมัติ
• วิธีทำให้แอปพลิเคชัน AI Studio ใช้งานได้ในรูปแบบคอนเทนเนอร์แบบ Serverless ใน Cloud Run
• วิธีตรวจสอบบันทึกฐานข้อมูลและสถานะความปลอดภัยภายในคอนโซล Firebase

2. การตั้งค่าโปรเจ็กต์

ก่อนเปิดใช้ AI Studio ให้ตรวจสอบสถานะบัญชีและข้อกำหนดเบื้องต้น

บัญชี Google และข้อมูลระดับ

1. หากยังไม่มีบัญชี Google ให้สร้างบัญชี Google
   • เคล็ดลับ: ใช้บัญชี Google ส่วนตัวสำหรับ Codelab นี้หากเป็นไปได้ บัญชีของกลุ่ม องค์กร หรือโรงเรียนอาจบังคับใช้นโยบาย Workspace ที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการติดตั้งใช้งาน
   • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบ Full-Stack ได้สูงสุด 2 รายการในภูมิภาคที่เลือกโดยไม่มีค่าใช้จ่าย โดยไม่ต้องสร้างบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud แบบเต็ม
   • การติดตั้งใช้งานมาตรฐาน: เชื่อมต่อกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ที่ชำระเงินแล้วและขยายขีดจำกัดพื้นที่เก็บข้อมูล ทรัพยากร CPU และ API

3. สร้างแอปสิ่งที่ต้องทำในโหมดสร้างของ AI Studio

มาสร้างโครงสร้างแอปพลิเคชันและใช้พรอมต์กับผู้ช่วยเขียนโค้ด AI เพื่อสร้างเลเยอร์ความปลอดภัยและเลเยอร์การคงอยู่

1. ไปที่แผงแอปของ Google AI Studio แล้วคลิกแอปใหม่
2. ในกล่องพรอมต์แชท ให้ป้อนคำอธิบายสำหรับแอปพลิเคชันสิ่งที่ต้องทำ

   Build a collaborative to-do list application using Firebase as a
   backend. Users must be able to securely sign in using Google Sign-In,
   view their personal tasks, add new task items, toggle status as
   completed, and delete tasks. The database must isolate tasks so users
   can only view and modify their own records.
   

   ลิงก์นี้จะกรอกกล่องพรอมต์ให้คุณโดยอัตโนมัติ
3. คลิกสร้าง เพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

เมื่อ Agent ของ AI Studio ตระหนักถึงความจำเป็นในการจัดเก็บฐานข้อมูลและการเข้าสู่ระบบของผู้ใช้ที่ปลอดภัย ระบบจะทริกเกอร์โฟลว์การกำหนดค่า Firebase โดยอัตโนมัติ

1. หลังจากผ่านไปประมาณ 1 นาที การ์ดการผสานรวมเพื่อเปิดใช้ Firebase จะปรากฏขึ้นในพื้นที่ทำงาน
2. คลิกปุ่มเปิดใช้ Firebase เพื่อยืนยันและยอมรับข้อกำหนดในการให้บริการ
3. Agent จะดำเนินการตั้งค่าเบื้องหลัง สิ่งที่เกิดขึ้นเบื้องหลัง
   • มีการจัดสรรอินสแตนซ์ฐานข้อมูล Firestore
   • เปิดใช้การตรวจสอบสิทธิ์ Firebase โดยเปิดใช้การลงชื่อเข้าใช้ด้วยบัญชี Google
   • มีการสร้างการกำหนดค่าบัญชีบริการ (เช่น การสร้าง src/lib/firebase.ts ที่มีข้อมูลเข้าสู่ระบบ API)
   • มีการเพิ่ม firestore.rules ที่มีขอบเขตความปลอดภัยเริ่มต้น (กฎการแยกผู้ใช้)

4. ทดสอบและทำซ้ำ

ก่อนเปิดใช้บริการจริง ให้เรียกใช้การตรวจสอบการตรวจสอบในตัวอย่างแบบอินเทอร์แอกทีฟ

1. เปิดบานหน้าต่างแสดงตัวอย่างภายใน Google AI Studio
2. คลิกปุ่มเข้าสู่ระบบเพื่อทริกเกอร์การตรวจสอบสิทธิ์ Google Sign-In ในแซนด์บ็อกซ์
   • หมายเหตุเกี่ยวกับการแก้ไขข้อผิดพลาด: ระหว่างการสร้างหรือการทดสอบ คุณอาจพบปัญหาเกี่ยวกับรันไทม์ ข้อผิดพลาดในการคอมไพล์ หรือข้อผิดพลาดเกี่ยวกับสิทธิ์ Firestore เป็นครั้งคราวเนื่องจากกฎความปลอดภัยไม่สอดคล้องกัน หากเกิดเหตุการณ์นี้ขึ้น AI Studio จะแสดงปุ่มแก้ไข ในแชท ซึ่งช่วยให้คุณขอให้ Agent วินิจฉัยและแก้ไขปัญหาโดยอัตโนมัติได้
   
3. เมื่อเข้าสู่ระบบแล้ว ให้เพิ่มงานหลายรายการ (เช่น "ตรวจสอบเอกสาร Cloud Run", "ทำ Codelab ให้เสร็จสมบูรณ์")
4. สลับสถานะของงานบางรายการเป็น "เสร็จสมบูรณ์" และลบงาน 1 รายการเพื่อให้แน่ใจว่าแฮนเดิลอร์ฝั่งไคลเอ็นต์และการอัปเดตสถานะฐานข้อมูลทำงานอย่างถูกต้อง
5. หากต้องการเปลี่ยนสไตล์หรือลักษณะการทำงาน ให้สั่ง Agent ผ่านหน้าต่างแชท ตัวอย่างเช่น
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Show a count of remaining incomplete tasks at the footer of the task list."
6. รอให้ Agent อัปเดตฐานของโค้ดและตรวจสอบเบราว์เซอร์แสดงตัวอย่างเพื่อดูการอัปเดต

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

เมื่อต้นแบบทำงานได้อย่างสมบูรณ์แล้ว ให้ทำให้ต้นแบบใช้งานได้เป็นบริการสาธารณะใน Cloud Run

1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่ เพื่อเริ่มวิซาร์ดการติดตั้งใช้งาน
2. คลิกเริ่มต้นใช้งาน เพื่อกำหนดค่าโปรเจ็กต์ Google Cloud
   • ตรวจสอบว่าเมนูแบบเลื่อนลงโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์ที่คุณเชื่อมโยงกับพื้นที่ทำงาน
   • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
   • คุณเลือกที่จะระบุคำนำหน้า URL .ai.studio ที่กำหนดเอง (เช่น your-portfolio-name.ai.studio) เป็นส่วนหนึ่งของการกำหนดค่าการติดตั้งใช้งานได้
3. หากคุณติดตั้งใช้งานเป็นครั้งแรกและใช้พารามิเตอร์มาตรฐานของ Google Cloud ระบบอาจแจ้งให้คุณระบุประเภทองค์กรและระบุรายละเอียดการเรียกเก็บเงิน
4. คลิกเผยแพร่แอป
5. ขั้นตอนการสร้างคอนเทนเนอร์ การลงทะเบียนคอนเทนเนอร์ และการติดตั้งใช้งานบริการจะเกิดขึ้นในเบื้องหลัง โดยปกติกระบวนการนี้จะใช้เวลา 2-4 นาที
6. เมื่อการติดตั้งใช้งานเสร็จสิ้น ให้คัดลอกURL ของแอป ที่สร้างขึ้นแล้วไปที่ลิงก์แอปพลิเคชันที่ใช้งานจริงในแท็บเบราว์เซอร์
7. ทดสอบเว็บแอปพลิเคชันที่ใช้งานจริงในเบราว์เซอร์

6. ตรวจสอบในคอนโซล Firebase

ดูเบื้องหลังเพื่อดูวิธีติดตามสคีมาข้อมูลและผู้ใช้

1. ไปที่คอนโซล Firebase
2. เลือกโปรเจ็กต์ (ที่มีป้ายกำกับ AI Studio หรือรหัสโปรเจ็กต์ที่คุณผูกด้วยตนเอง)
3. ในแผงการนำทางด้านซ้าย ให้เลือกสร้าง > ฐานข้อมูล Firestore
   • ดูคอลเล็กชันและเอกสารของฐานข้อมูลที่แอปพลิเคชันสร้างขึ้น
   • ตรวจสอบว่าเอกสารแต่ละรายการมีรหัสเจ้าของที่ตรงกับข้อมูลเข้าสู่ระบบการตรวจสอบสิทธิ์ของผู้ใช้ที่ใช้งานอยู่
4. เลือกแท็บความปลอดภัย ในแผง Firestore เพื่อตรวจสอบคำสั่งความปลอดภัยที่สร้างขึ้นโดยอัตโนมัติซึ่งจำกัดสิทธิ์อ่านและเขียนสำหรับเจ้าของเอกสารที่ยืนยันแล้ว
5. ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์ เพื่อดูรายการข้อมูลเข้าสู่ระบบของผู้ใช้ที่ใช้งานอยู่ซึ่งป้อนข้อมูลระหว่างการทดสอบการเข้าสู่ระบบ

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

วิธีหลีกเลี่ยงค่าใช้จ่ายในการเรียกเก็บเงินที่ไม่คาดคิดหรือล้างข้อมูลทรัพยากรพื้นที่ทำงาน

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

8. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และติดตั้งใช้งานเว็บแอปพลิเคชันแบบ Full-Stack โดยตรงจาก Google AI Studio

ไปที่ ลิงก์นี้ เพื่อรับป้าย เส้นทางของ Builder ที่เสร็จสมบูรณ์

หากต้องการดำเนินการต่อ ให้ไปที่ goo.gle/builders เพื่อดู Codelab ถัดไป

ดูข้อมูลเพิ่มเติม

• คู่มือเกี่ยวกับกฎความปลอดภัยของ Firestore
• เอกสารประกอบของ Cloud Run
• สร้างแอปใน Google AI Studio