สร้างเว็บแอปที่ใช้ฐานข้อมูลแอปแรกด้วย Google AI Studio และ Cloud SQL

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

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

ใน Codelab นี้ คุณจะได้แก้ปัญหานี้ที่เกิดขึ้นทุกวันด้วยการสร้างRunning Club ซึ่งเป็นเว็บแอปที่ต้อนรับนักวิ่งในพื้นที่ให้สามารถเรียกดูเส้นทางโปรด กำหนดเวลาการพบปะในช่วงสุดสัปดาห์ ตอบรับคำเชิญได้ด้วยคลิกเดียว และแชทกับเพื่อนนักวิ่ง

เหตุใดแอปนี้จึงต้องมีฐานข้อมูล

แอปชุมชนต้องมีหน่วยความจำที่เชื่อถือได้ ซึ่งเรียกว่าฐานข้อมูล เมื่อนักวิ่งเพิ่มเส้นทางใหม่ที่สวยงาม ตอบรับคำเชิญเข้าร่วมการวิ่งช่วงเช้าของวันเสาร์ หรือโพสต์ความคิดเห็นเพื่อสอบถามเรื่องที่จอดรถ ข้อมูลดังกล่าวจะไม่หายไปเมื่อนักวิ่งปิดโทรศัพท์หรือปิดคอมพิวเตอร์ ฐานข้อมูลจะจัดเก็บและจัดระเบียบเส้นทาง รายชื่อผู้เข้าร่วม และข้อความของสมาชิกทั้งหมดไว้อย่างปลอดภัย เพื่อให้ทุกคนในคลับเห็นข้อมูลล่าสุดทุกครั้งที่เปิดแอป

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

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

คุณจะสร้างและเปิดตัว Running Club ซึ่งเป็นเว็บแอปชุมชนที่มีฟีเจอร์ต่อไปนี้

  • Google Sign-In: เข้าสู่ระบบอย่างรวดเร็วและปลอดภัยโดยใช้บัญชี Google ที่มีอยู่
  • โปรไฟล์นักวิ่ง: โปรไฟล์สมาชิกที่แสดงค่ากำหนดการวิ่งและเพซเป้าหมาย
  • คลังเส้นทาง: คอลเล็กชันเส้นทางโปรดในย่านที่มีระยะทาง ความยากของเนินเขา และจุดนัดพบ
  • กำหนดการวิ่งที่กำลังจะเกิดขึ้น: กระดานกิจกรรมสำหรับจัดระเบียบการวิ่งกลุ่มที่กำลังจะเกิดขึ้นและลิงก์กับการวิ่ง
  • การตอบกลับที่ง่ายดาย: ปุ่มคลิกเดียวสำหรับสมาชิกที่ต้องการบอกว่า "ฉันจะไป" และดูว่าใครจะมาบ้าง
  • จัดการการสนทนา: พื้นที่แสดงความคิดเห็นในแต่ละการวิ่งเพื่อประสานงานรายละเอียด ถามคำถาม และแชร์ข้อมูลอัปเดต

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

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

สิ่งที่คุณต้องมี

  • เว็บเบราว์เซอร์สมัยใหม่ เช่น Google Chrome
  • บัญชี Google มาตรฐานเพื่อลงชื่อเข้าใช้ Google AI Studio

การมีสิทธิ์และขีดจำกัดของ Cloud SQL Starter Edition

Google AI Studio มีระดับเริ่มต้นของ Google Cloud เพื่อช่วยให้ผู้สร้างได้ทดลองใช้แอป Generative และฐานข้อมูลที่มีการจัดการ

  • การมีสิทธิ์:
    • พร้อมให้บริการสำหรับบุคคลที่ใช้บัญชี Google มาตรฐาน
    • บัญชีที่ไม่มีสิทธิ์ ได้แก่ ผู้ใช้ที่มีบัญชีสำหรับการเรียกเก็บเงินใน Cloud ของ Google อยู่แล้วหรือเคยมี รวมถึงบัญชีที่เชื่อมโยงกับ Google Workspace, Google Workspace for Education หรือ Google เพื่อการกุศล
    • หากบัญชีของคุณไม่มีสิทธิ์ใช้ระดับเริ่มต้น คุณยังคงทำตาม Codelab นี้ได้โดยเลือกโปรเจ็กต์ Google Cloud ที่มีอยู่ซึ่งเปิดใช้การเรียกเก็บเงินใน AI Studio
  • ข้อกำหนดของทรัพยากร:
    • จัดสรรอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL Developer Edition ที่ใช้ PostgreSQL 18
    • ประกอบด้วย vCPU 0.5, RAM 2 GB และพื้นที่เก็บข้อมูล 1 GB ซึ่งควรเพียงพอให้คุณเรียกใช้การเข้าชมรายวันหลายร้อยครั้งเป็นเวลา 2-3 เดือนหรือนานกว่านั้น ทั้งนี้ขึ้นอยู่กับกิจกรรม
    • รองรับการปรับขนาดเป็น 0 โดยจะหยุดการประมวลผลชั่วคราวโดยอัตโนมัติเมื่อไม่มีการเชื่อมต่อฐานข้อมูลที่ใช้งานอยู่เพื่อรักษาโควต้า
  • Quota:
    • รวมโควต้าฟรีรายเดือนของหน่วยประมวลผล 50 หน่วยและพื้นที่เก็บข้อมูล 10 GB

2. เปิด Google AI Studio แล้วเริ่มแอปใหม่

หากต้องการเริ่มต้นใช้งาน ให้เปิด Google AI Studio ในเบราว์เซอร์ นี่คือพื้นที่ทำงานสำหรับการสร้างสรรค์ที่คุณสามารถสร้างและทดสอบแอปได้ง่ายๆ เพียงอธิบายสิ่งที่คุณต้องการ

ขั้นตอนที่ 1: ลงชื่อเข้าใช้ Google AI Studio

  1. เปิดเว็บเบราว์เซอร์ (เช่น Google Chrome) แล้วไปที่ aistudio.google.com
  2. คลิกเริ่มต้นใช้งาน แล้วเข้าสู่ระบบด้วยบัญชี Google มาตรฐาน (เช่น บัญชี Gmail)

เริ่มต้นใช้งาน

  1. หากได้รับแจ้งข้อกำหนดในการให้บริการเมื่อเข้าชมเป็นครั้งแรก ให้อ่านและยอมรับเพื่อดำเนินการต่อ

ขั้นตอนที่ 2: เริ่มสมัครใหม่

  1. ในแผงด้านล่างตรงกลาง ให้คลิกเริ่มสร้าง (หรือคลิก +แอปใหม่ในแผงด้านขวา)

เริ่มสร้าง

3. เริ่มต้นด้วยพรอมต์ง่ายๆ และการตรวจสอบสิทธิ์ Firebase

คุณไม่จำเป็นต้องมีแผนภาพสถาปัตยกรรมที่ซับซ้อนเพื่อเริ่มต้นใช้งาน คุณสามารถเปิดตัวแอปพลิเคชันเริ่มต้น กำหนดค่า Google Sign-In และเชื่อมต่อฐานข้อมูลได้ด้วยประโยคเดียว

ป้อนพรอมต์เริ่มต้น

ในช่องพรอมต์ของโหมดสร้างใน AI Studio ให้ป้อนพรอมต์ต่อไปนี้ แล้วกด Enter

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

แอปใหม่ของ AI Studio

ลิงก์นี้จะเติมช่องพรอมต์ให้คุณโดยอัตโนมัติ

ทำความเข้าใจพื้นที่ทำงาน

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

พื้นที่ทำงานของ AI Studio

  • กล่องแชท / พรอมต์ (ด้านล่าง): คุณสามารถแชทกับ AI ต่อในกล่องนี้ด้วยภาษาธรรมดาเพื่อเพิ่มฟีเจอร์ ปรับดีไซน์ หรือถามคำถาม
  • พื้นที่ไฟล์และโค้ด (ด้านซ้าย): แสดงไฟล์ที่ AI สร้างขึ้นเบื้องหลัง คุณไม่จำเป็นต้องเขียนหรือแก้ไขโค้ดด้วยตนเอง แต่แผงนี้จะช่วยให้คุณดู AI สร้างชิ้นส่วนของแอปได้
  • หน้าต่างแสดงตัวอย่างแบบเรียลไทม์ (ด้านขวา): แสดงแอปที่ใช้งานจริงแบบเรียลไทม์ คุณคลิกปุ่ม พิมพ์ในช่องข้อความ และทดสอบแอปได้โดยตรงในหน้าต่างนี้ทันทีที่ระบบสร้างแอป
  • โปรแกรมแก้ไขโค้ด (ด้านขวา): แสดงโค้ดจริงที่ AI สร้างขึ้น คุณแก้ไขได้หากต้องการ แต่ไม่จำเป็นต้องแก้ไข
  • การติดตั้งใช้งานและการแชร์ (ด้านขวาบน): ส่วนนี้เป็นที่ที่คุณติดตั้งใช้งานแอปบนอินเทอร์เน็ตและแชร์กับผู้อื่นได้

สิ่งที่ Google AI Studio ทำโดยอัตโนมัติ

ขณะที่ AI ประมวลผลคำขอ คุณจะเห็นขั้นตอนการสร้างแอปทีละขั้น

  1. ตั้งค่า Google Sign-In: AI จะผสานรวม Google Sign-In โดยอัตโนมัติเพื่อให้ผู้เข้าร่วมสามารถเข้าสู่ระบบได้อย่างปลอดภัยด้วยบัญชี Google โดยไม่ต้องจัดการรหัสผ่านของผู้ใช้หรือการตั้งค่าความปลอดภัย
  2. เชื่อมต่อฐานข้อมูลจริง: AI จะตั้งค่าฐานข้อมูล Cloud SQL ที่มีการจัดการเพื่อจัดเก็บข้อมูลของชุมชน หากได้รับข้อความแจ้ง ให้คลิกเพื่อเปิดใช้ฐานข้อมูลสำหรับโปรเจ็กต์

แอปใหม่ของ AI Studio

  1. จัดระเบียบตารางข้อมูล (schema.ts): ลองนึกถึงสคีมาฐานข้อมูลเป็นชุดของสเปรดชีตที่จัดระเบียบแล้ว AI จะสร้างโครงสร้างพื้นที่เก็บข้อมูลสำหรับแอปของคุณโดยอัตโนมัติ ดังนี้
    • users ตาราง: จัดเก็บโปรไฟล์ ชื่อ รูปโปรไฟล์ และเพซการวิ่งของสมาชิก
    • runs ตาราง: จัดเก็บกิจกรรมที่กำหนดเวลาไว้พร้อมชื่อ ระยะทาง เพซเป้าหมาย สถานที่ และวันที่
    • commentsตาราง: จัดเก็บข้อความและคำถามที่นักวิ่งทิ้งไว้ในการวิ่งแต่ละครั้ง
    การเปลี่ยนแปลงทั้งหมดนี้จะดำเนินการโดยอัตโนมัติในส่วนโค้ด และคุณจะเห็นว่าหมวดหมู่เหล่านี้จัดระเบียบอย่างไรหากเปลี่ยนจากตัวอย่างเป็นแท็บโค้ด แต่คุณไม่จำเป็นต้องเขียนโค้ดด้วยตนเอง เนื่องจากระบบจะดำเนินการให้โดยอัตโนมัติแอปใหม่ของ AI Studio(หมายเหตุ: คุณไม่จำเป็นต้องเขียนหรือแก้ไขโค้ดนี้ด้วยตนเอง เนื่องจาก AI จะอัปเดตให้คุณทุกครั้งที่คุณขอฟีเจอร์ใหม่)
  2. สร้างอินเทอร์เฟซภาพ: AI จะสร้างหน้าเว็บที่คุณเห็นบนหน้าจอ ซึ่งรวมถึงส่วนหัว รายการการวิ่งที่กำลังจะจัดขึ้น แบบฟอร์มสร้างกิจกรรม และส่วนความคิดเห็น

ยืนยันการตรวจสอบสิทธิ์และเรียกใช้การโพสต์

เมื่อสร้างเสร็จแล้ว ให้ทดสอบแอปใหม่ในแผงแสดงตัวอย่างโดยทำดังนี้

  1. ในหน้าต่างแสดงตัวอย่าง ให้คลิกลงชื่อเข้าใช้สำหรับสมาชิก (หรือคลิกปุ่มโพสต์การวิ่งที่กำลังจะมีขึ้น ซึ่งจะทริกเกอร์การตรวจสอบสิทธิ์)
  2. ตรวจสอบสิทธิ์ด้วยบัญชี Google โดยใช้กล่องโต้ตอบ Firebase Auth
  3. เมื่อลงชื่อเข้าใช้แล้ว ชื่อและรูปโปรไฟล์ Google จะปรากฏในแถบนำทาง และระบบจะจัดการค่ากำหนดเพซของคุณโดยอัตโนมัติ
  4. ในแบบฟอร์ม "โพสต์การวิ่งที่กำลังจะมีขึ้น" ให้ป้อนชื่อ (เช่น Morning 5K Shakeout)
  5. เลือกวันที่และเวลา แล้วป้อนสถานที่ประชุม (เช่น Central Park West Entrance)
  6. คลิก PublishRun แอปใหม่ของ AI Studio
  7. ยืนยันว่าการวิ่งใหม่ปรากฏในฟีดการวิ่งที่กำลังจะมีขึ้นทันที โดยแสดงชื่อโปรไฟล์ที่ได้รับการตรวจสอบสิทธิ์และป้ายเพซในฐานะผู้จัด แอปใหม่ของ AI Studio
  8. โพสต์ข้อความสั้นๆ ในส่วนการสนทนาของการวิ่ง (เช่น Bringing extra water bottles!) และตรวจสอบว่าข้อความปรากฏในชุดความคิดเห็น

4. สร้างคลังเส้นทาง

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

ขอให้ AI เพิ่มคลังเส้นทาง

ในช่องพรอมต์แชท ให้พิมพ์คำขอต่อไปนี้แล้วกด Enter

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

แอปใหม่ของ AI Studio

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

(อีกครั้งที่คุณไม่จำเป็นต้องแตะต้องโค้ดนี้ เนื่องจาก AI จะอัปเดตโครงสร้างฐานข้อมูลให้คุณ)

ทดสอบคลังเส้นทางใหม่ในเวอร์ชันตัวอย่าง

เมื่อ AI อัปเดตแอปเสร็จแล้ว ให้ลองใช้ฟีเจอร์เส้นทางใหม่ในหน้าต่างแสดงตัวอย่างแบบสดโดยทำดังนี้

  1. ในการนำทางของแอป ให้คลิกแท็บคลังเส้นทาง หากไม่มีแท็บดังกล่าว ให้ตรวจสอบที่ด้านล่างของตัวอย่างไลฟ์สด ระบบอาจขอให้คุณกดปุ่มบันทึกเพื่อรีเฟรชตัวอย่าง หรือหากไม่ได้ผล ให้ลองโต้ตอบกับ AI ในหน้าต่างแชทและถามว่าคลังเส้นทางของคุณอยู่ที่ไหน
  2. คลิกบันทึกเส้นทางใหม่ (หรือเพิ่มเส้นทาง) แล้วกรอกรายละเอียดตัวอย่างบางส่วน
    • ชื่อเส้นทาง: Riverfront Trail Loop
    • ระยะทาง: 8.5 km
    • ความยาก: Moderate
    • สถานที่เริ่มต้น: Waterfront Pier 4
  3. คลิกบันทึกลงในคลัง
  4. ตอนนี้คุณสามารถกำหนดเวลาการวิ่งโดยใช้เส้นทางนี้ได้โดยคลิกปุ่มกำหนดเวลาการวิ่งบนการ์ดเส้นทางใหม่โดยตรง แอปใหม่ของ AI Studio
  5. สังเกตว่าระบบจะกรอกรายละเอียดระยะทาง ความยาก และสถานที่ให้คุณโดยอัตโนมัติ
  6. คลิกเผยแพร่การวิ่งและตรวจสอบว่าการวิ่งกลุ่มใหม่ปรากฏในฟีดหน้าแรก

5. ใช้การตอบกลับคำเชิญและคำเชิญสำหรับสมาชิก

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

ขอให้ AI เพิ่มการตอบกลับคำเชิญและคำเชิญ

ในช่องพรอมต์แชท ให้พิมพ์คำขอต่อไปนี้แล้วกด Enter

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

วิธีที่ AI ติดตามผู้เข้าร่วมในเบื้องหลัง

AI จะสร้างตาราง rsvps ในฐานข้อมูลโดยอัตโนมัติเพื่อติดตามว่านักวิ่งคนใดจะมาวิ่งในแต่ละครั้ง ให้คิดว่านี่คือแบบฟอร์มลงชื่อสมัครใช้ดิจิทัลที่ลิงก์ชื่อนักวิ่งกับกิจกรรมที่เฉพาะเจาะจง

(คุณไม่จำเป็นต้องเขียนหรือแก้ไขโค้ดนี้ เนื่องจาก AI จะจัดการสเปรดชีตการลงชื่อสมัครใช้นี้ในฐานข้อมูลโดยอัตโนมัติ)

ทดสอบการตอบกลับคำเชิญในเวอร์ชันตัวอย่าง

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

  1. ในหน้าต่างแสดงตัวอย่าง ให้ค้นหาการวิ่งที่กำลังจะมีขึ้นในฟีดหน้าแรก
  2. คลิกปุ่มเข้าร่วมการวิ่ง (หรือตอบรับคำเชิญ)
  3. ตรวจสอบว่าชื่อและอวตารของคุณปรากฏในส่วนนักวิ่งที่เข้าร่วม และตัวนับผู้เข้าร่วมเพิ่มขึ้น 1
  4. คลิกคัดลอกลิงก์คำเชิญและตรวจสอบว่าระบบสร้างลิงก์ที่แชร์ได้

แอปใหม่ของ AI Studio

6. ทดสอบการคงอยู่ของข้อมูลและ Cloud SQL Scale-to-Zero

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

ในขั้นตอนนี้ คุณจะได้ทดสอบว่าระบบได้บันทึกข้อมูลไว้อย่างปลอดภัยในฐานข้อมูล Cloud SQL และเรียนรู้วิธีที่ Google Cloud ประหยัดพลังงานและค่าใช้จ่ายเมื่อแอปไม่ได้ใช้งาน

ทดสอบการรีเฟรชแอป

  1. คลิกปุ่มโหลดซ้ำภายในหน้าต่างตัวอย่าง AI Studio (หรือรีเฟรชแท็บเบราว์เซอร์)

แอปใหม่ของ AI Studio

  1. ดูแอปในตัวอย่าง คุณจะเห็นว่าทุกอย่างที่คุณสร้างไว้ ไม่ว่าจะเป็นโปรไฟล์สมาชิก เส้นทางที่บันทึกไว้ การวิ่งที่กำหนดเวลาไว้ การตอบรับ และความคิดเห็น ยังคงอยู่ที่เดิม
  2. แอปไม่ได้จัดเก็บข้อมูลไว้ชั่วคราวบนหน้าจอเท่านั้น แต่ยังจัดเก็บข้อมูลไว้อย่างปลอดภัยในฐานข้อมูล Cloud SQL ด้วย

วิธีที่ Cloud SQL ช่วยประหยัดพลังงานและค่าใช้จ่าย (การลดขนาดเหลือศูนย์)

จะเกิดอะไรขึ้นเมื่อไม่มีใครใช้แอปชมรมวิ่งของคุณในช่วงกลางดึก

  • โหมดสลีปอัตโนมัติ ("การลดขนาดเหลือศูนย์"): เมื่อไม่มีใครเข้าชมแอปหรือลงชื่อสมัครใช้การวิ่ง ฐานข้อมูลจะหยุดชั่วคราวโดยอัตโนมัติเพื่อประหยัดทรัพยากร
  • การปลุกทันที: ทันทีที่นักวิ่งเปิดแอปหรือคลิกลิงก์คำเชิญ ฐานข้อมูลจะปลุกขึ้นทันทีพร้อมข้อมูลทั้งหมดที่คุณบันทึกไว้
  • ไม่มีค่าใช้จ่ายเมื่อไม่ได้ใช้งาน: เนื่องจากจะเข้าสู่โหมดพักเมื่อไม่มีการใช้งาน คุณจึงไม่ต้องใช้ทรัพยากรการประมวลผลเมื่อแอปไม่ได้ทำงาน

7. เผยแพร่และติดตั้งใช้งานใน Cloud Run

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

เผยแพร่แอปแบบเรียลไทม์ไปยังเว็บ

  1. คลิกปุ่มเผยแพร่ที่มุมขวาบนของ Google AI Studio
  2. หน้าต่างสรุปจะปรากฏขึ้นเพื่อยืนยันรายละเอียดต่อไปนี้
    • การโฮสต์: โฮสต์และติดตั้งใช้งานใน Google Cloud Run แอปใหม่ของ AI Studio
    • บริการที่เชื่อมต่อ: Google Sign-In และฐานข้อมูล Cloud SQL แอปใหม่ของ AI Studio
  3. คลิกเผยแพร่เพื่อเปิดตัวแอป แอปใหม่ของ AI Studio

เปิดและแชร์แอปที่ใช้งานจริง

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

8. (โบนัส) ตรวจสอบทรัพยากรในคอนโซล Google Cloud

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

ขั้นตอนที่ 1: เปิดคอนโซล Google Cloud

  1. เปิด คอนโซล Google Cloud ในแท็บเบราว์เซอร์ใหม่
  2. ที่ด้านบนของหน้าจอ ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่สร้างไว้สำหรับแอป AI Studio (โดยปกติชื่อจะขึ้นต้นด้วย continual-run-)

ขั้นตอนที่ 2: ดูว่าเว็บแอปทำงานที่ใด (Cloud Run)

  1. พิมพ์ Cloud Run ในแถบค้นหาด้านบน แล้วเลือกจากผลการค้นหา แอปใหม่ของ AI Studio
  2. คลิกชื่อแอป (เช่น running-club) แอปใหม่ของ AI Studio
  3. คุณสามารถสำรวจเครื่องมือที่โฮสต์เว็บไซต์ได้ที่นี่
    • เมตริก: กราฟที่เป็นประโยชน์ซึ่งแสดงจำนวนผู้เข้าชมเว็บไซต์
    • บันทึก: บันทึกกิจกรรมแบบเรียลไทม์ที่แสดงสิ่งที่เกิดขึ้นเมื่อผู้เข้าชมโต้ตอบกับแอป

ขั้นตอนที่ 3: ดูฐานข้อมูลของคุณทำงาน (Cloud SQL)

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

9. ล้างข้อมูลทรัพยากร

หากสร้างแอปนี้เป็นโปรเจ็กต์ฝึกหัด คุณก็ลบแอปได้อย่างง่ายดาย หากวางแผนที่จะใช้แอป Running Club กับชุมชนต่อไป คุณก็ปล่อยให้แอปทำงานต่อไปได้

  1. ใน Google AI Studio ให้คลิกแอปของฉันในแถบด้านข้างซ้าย
  2. ค้นหาแอป Running Club
  3. คลิกลบแอป (หรือไอคอนถังขยะ) การดำเนินการนี้จะปิดหน้าเว็บที่เผยแพร่อยู่และนำฐานข้อมูลทดสอบออกให้คุณในขั้นตอนเดียว แอปใหม่ของ AI Studio

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

คุณได้สร้าง ปรับแต่ง และเผยแพร่เว็บแอปที่ใช้ฐานข้อมูลแอปแรกโดยใช้ Google AI Studio และ Cloud SQL แล้ว

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

หากต้องการเดินทางต่อ โปรดไปที่ goo.gle/builders เพื่อเข้าสู่แล็บถัดไป

สิ่งที่คุณทำสำเร็จ

  • สร้างแอปด้วยภาษาที่เข้าใจง่าย: สร้างแอปชมรมวิ่งชุมชนที่สมบูรณ์ด้วยพรอมต์ง่ายๆ
  • เปิดใช้ Google Sign-In: ตั้งค่าการเข้าสู่ระบบที่ปลอดภัยด้วยบัญชี Google โดยอัตโนมัติ
  • เชื่อมต่อฐานข้อมูลจริง: จัดเก็บเส้นทางที่บันทึกไว้ การวิ่งที่กำหนดเวลาไว้ การตอบรับ และการสนทนาอย่างปลอดภัยใน Cloud SQL
  • เพิ่มฟีเจอร์ผ่านการสนทนา: สร้างคลังเส้นทางและติดตามการตอบกลับได้ง่ายๆ เพียงแค่แชทกับ AI
  • เผยแพร่แบบเรียลไทม์ไปยังเว็บ: คุณได้ติดตั้งใช้งานแอปบนอินเทอร์เน็ตด้วยการคลิกเพียงครั้งเดียวและทดสอบแอปในอุปกรณ์ต่างๆ
  • ดูเบื้องหลัง: สำรวจวิธีที่ Google Cloud โฮสต์เว็บแอปและฐานข้อมูลแบบสด

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

คุณสามารถแชทกับ AI ใน Google AI Studio ต่อเพื่อขยายแอปด้วยฟีเจอร์ใหม่ๆ ได้โดยทำดังนี้

  • แผนที่แบบอินเทอร์แอกทีฟ: พรอมต์ AI ให้เพิ่มตัวอย่างแผนที่และเส้นทาง GPS
  • การจับคู่เพื่อนวิ่ง: พรอมต์ AI ให้แนะนำเพื่อนวิ่งที่มีเป้าหมายด้านความเร็วที่คล้ายกัน
  • พยากรณ์อากาศ: พรอมต์ AI ให้แสดงพยากรณ์อากาศช่วงสุดสัปดาห์ในการ์ดการวิ่งที่กำลังจะมาถึง
  • การแชร์รูปภาพ: พรอมต์ AI เพื่ออนุญาตให้นักวิ่งแชร์รูปภาพหลังจากการวิ่งกลุ่ม

อ่านเพิ่มเติม