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

1. บทนำ

ภาพรวม

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

ในโค้ดแล็บนี้ คุณจะได้สร้างแอปพลิเคชันรายการสิ่งที่ต้องทำแบบทำงานร่วมกันด้วยฐานข้อมูล Firestore สำหรับพื้นที่เก็บข้อมูลถาวร และการตรวจสอบสิทธิ์ Firebase สำหรับการเข้าสู่ระบบของผู้ใช้ เอเจนต์ 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 ส่วนตัวสำหรับ Lab นี้หากเป็นไปได้ บัญชีกลุ่ม บัญชีบริษัท หรือบัญชีโรงเรียนอาจบังคับใช้นโยบาย Workspace ที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
  2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการติดตั้งใช้งาน
    • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบฟูลสแต็กได้สูงสุด 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. คลิกสร้างเพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

เมื่อเอเจนต์ 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 ใน Sandbox
    • หมายเหตุเกี่ยวกับการแก้ไขข้อผิดพลาด: ระหว่างการสร้างหรือการทดสอบ คุณอาจพบปัญหาเกี่ยวกับรันไทม์ ข้อผิดพลาดในการคอมไพล์ หรือการให้สิทธิ์ Firestore ไม่สำเร็จเนื่องจากกฎความปลอดภัยไม่สอดคล้องกันในบางครั้ง หากเกิดกรณีนี้ขึ้น AI Studio จะแสดงปุ่มแก้ไขในแชท ซึ่งช่วยให้คุณขอให้เอเจนต์วินิจฉัยและแก้ไขปัญหาโดยอัตโนมัติได้
    ตำแหน่งปุ่มแก้ไขใน Google AI Studio
  3. เมื่อเข้าสู่ระบบแล้ว ให้เพิ่มงานหลายอย่าง (เช่น "อ่านเอกสาร Cloud Run" "ทำ Codelab ให้เสร็จ")
  4. สลับสถานะของงานบางอย่างเป็น "เสร็จแล้ว" และลบงาน 1 รายการเพื่อให้มั่นใจว่าตัวแฮนเดิลฝั่งไคลเอ็นต์และการอัปเดตสถานะฐานข้อมูลจะทำงานอย่างถูกต้อง
  5. หากต้องการเปลี่ยนสไตล์หรือลักษณะการทำงาน ให้สั่งเอเจนต์ผ่านหน้าต่างแชท เช่น
    • "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. รอให้ตัวแทนอัปเดตฐานของโค้ดและตรวจสอบเบราว์เซอร์แสดงตัวอย่างเพื่อดูการอัปเดต

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

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

  1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่เพื่อเริ่มวิซาร์ดการติดตั้งใช้งานตำแหน่งปุ่มเผยแพร่ของ Google AI Studio
  2. คลิกเริ่มต้นใช้งานเพื่อกำหนดค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google
    • ตรวจสอบว่าเมนูแบบเลื่อนลงของโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์ที่คุณเชื่อมโยงกับพื้นที่ทำงาน
    • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
  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. หากคุณติดตั้งใช้งานโดยใช้โปรเจ็กต์ Standard และต้องการปิดทรัพยากรทั้งหมดโดยสมบูรณ์ ให้ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Google Cloud แล้วลบโปรเจ็กต์พื้นฐาน

8. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และติดตั้งใช้งานเว็บแอปพลิเคชันแบบฟูลสแต็กที่ทำงานร่วมกันได้โดยตรงจาก Google AI Studio

หากต้องการรับป้ายจากการทำ Builders Lab ให้เสร็จสมบูรณ์และค้นหา Lab อื่นเพื่อดำเนินการต่อ โปรดไปที่ goo.gle/builders

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