ทำให้ใช้งานได้กับโฮสติ้งแอปของ Firebase ด้วยแอป Next.js

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

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีการทําให้ใช้งานได้ใน App Hosting ของ Firebase โดยใช้เว็บแอป Next.js ที่ชื่อ Friendly Eats ซึ่งเป็นเว็บไซต์สําหรับรีวิวร้านอาหาร

เว็บแอปที่สร้างเสร็จแล้วมีฟีเจอร์ที่มีประโยชน์ซึ่งแสดงให้เห็นว่า Firebase ช่วยคุณสร้างแอป Next.js ได้อย่างไร

• การสร้างและติดตั้งใช้งานอัตโนมัติ: Codelab นี้จะแสดงวิธีใช้ Firebase App Hosting เพื่อสร้างและติดตั้งใช้งานโค้ด Next.js โดยอัตโนมัติทุกครั้งที่คุณพุชไปยังกิ่งที่กำหนดค่าไว้
• การลงชื่อเข้าใช้และออกจากระบบ: เว็บแอปที่สร้างเสร็จแล้วจะช่วยให้ผู้ใช้ลงชื่อเข้าใช้/ออกจากระบบด้วย Google ได้ ระบบจะจัดการการเข้าสู่ระบบและการคงอยู่ของผู้ใช้ผ่าน Firebase Authentication ทั้งหมด
• รูปภาพ: เว็บแอปที่เสร็จสมบูรณ์แล้วจะช่วยให้ผู้ใช้ที่ลงชื่อเข้าใช้สามารถอัปโหลดรูปภาพร้านอาหารได้ ระบบจะจัดเก็บชิ้นงานรูปภาพไว้ใน Cloud Storage for Firebase Firebase JavaScript SDK มี URL สาธารณะสำหรับรูปภาพที่อัปโหลด จากนั้นระบบจะจัดเก็บ URL สาธารณะนี้ไว้ในเอกสารร้านอาหารที่เกี่ยวข้องใน Cloud Firestore
• ตัวกรอง: เว็บแอปที่เสร็จสมบูรณ์แล้วจะช่วยให้ผู้ใช้ที่ลงชื่อเข้าใช้กรองรายชื่อร้านอาหารตามหมวดหมู่ สถานที่ตั้ง และราคาได้ นอกจากนี้ คุณยังปรับแต่งวิธีการจัดเรียงที่ใช้ได้ด้วย ระบบจะเข้าถึงข้อมูลจาก Cloud Firestore และใช้การค้นหา Firestore ตามตัวกรองที่ใช้
• รีวิว: เว็บแอปที่เสร็จสมบูรณ์แล้วจะช่วยให้ผู้ใช้ที่ลงชื่อเข้าใช้โพสต์รีวิวร้านอาหารซึ่งประกอบด้วยการให้คะแนนเป็นดาวและข้อความที่เป็นข้อความได้ ระบบจะจัดเก็บข้อมูลรีวิวไว้ใน Cloud Firestore
• สรุปรีวิว: เว็บแอปที่เสร็จสมบูรณ์จะสรุปรีวิวโดยอัตโนมัติโดยใช้โมเดล Gemini ระบบจะจัดเก็บข้อมูลสรุปที่ AI สร้างขึ้นไว้ใน Cloud Firestore

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

• มีความรู้เกี่ยวกับ Next.js และ JavaScript

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

• วิธีใช้ Firebase กับ App Router ของ Next.js และการแสดงผลฝั่งเซิร์ฟเวอร์
• วิธีให้สิทธิ์การเรียกใช้ Gemini API โดยใช้เฉพาะความลับฝั่งเซิร์ฟเวอร์

สิ่งที่ต้องมี

• เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
• สิทธิ์เข้าถึง IDX.dev (พื้นที่ทำงานบนเว็บ)
• บัญชี Google สำหรับการสร้างและการจัดการโปรเจ็กต์ Firebase
• บัญชี GitHub (ไม่จำเป็นต้องเป็นบัญชีอีเมลเดียวกันกับด้านบน)

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาและที่เก็บ GitHub

Codelab นี้มีโค้ดเบสเริ่มต้นของแอป และใช้ Firebase CLI และ IDX.dev

สร้างที่เก็บ GitHub ใหม่และนำเข้าไปยัง IDX

Firebase App Hosting ช่วยให้คุณตั้งค่าที่เก็บ GitHub เพื่อให้ระบบสร้างและติดตั้งใช้งานโค้ด Next.js ทุกครั้งที่คุณพุชไปยังกิ่งที่กำหนดค่าไว้

1. สร้างที่เก็บ GitHub ใหม่สำหรับ Codelab นี้: https://github.com/new ตั้งชื่ออะไรก็ได้ เช่น MyFriendlyEatsCodelab
2. คัดลอก URL ของที่เก็บใหม่ โดยจะมีลักษณะดังนี้
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. ไปที่ https://idx.google.com แล้วลงชื่อเข้าใช้
4. คลิกนำเข้าที่เก็บ แล้ววาง URL ของ GitHub ที่คัดลอกไว้
   IDX จะแจ้งให้คุณลิงก์กับ GitHub จากนั้นจะโคลนที่เก็บ (ว่างเปล่า) ของคุณ

ดูที่เก็บซอร์สโค้ดของ Codelab

ดูแหล่งที่มาของ Codelab ได้ที่ https://github.com/firebase/friendlyeats-web friendlyeats-web ที่เก็บมีโปรเจ็กต์ตัวอย่างสำหรับหลายแพลตฟอร์ม

Codelab ที่คุณกำลังทำอยู่นี้มุ่งเน้นเฉพาะโฮสติ้งแอป Firebase และ Gemini API และเป็นเวอร์ชันย่อของ codelab แบบเต็ม "ผสานรวม Firebase กับแอป Next.js" Codelab แบบย่อนี้กำหนดให้คุณทำงานกับซอร์สโค้ดในสาขา #io-connect ของที่เก็บ friendlyeats-web เท่านั้น โดยเฉพาะไดเรกทอรี nextjs-step10

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

• nextjs-start: มีโค้ดเริ่มต้นสำหรับโค้ดแล็บฉบับเต็ม "ผสานรวม Firebase กับแอป Next.js"
• nextjs-end: มีโค้ดโซลูชันสำหรับเว็บแอปที่เสร็จสมบูรณ์

คัดลอกแหล่งที่มาของ Codelab ไปยังที่เก็บใหม่

วิธีคัดลอกไดเรกทอรี nextjs-step10 ลงในที่เก็บของคุณเองมีดังนี้

1. ใน IDX ให้เปิดเทอร์มินัลโดยใช้เมนู > เทอร์มินัล > เทอร์มินัลใหม่
2. ใช้แพ็กเกจ npm giget เพื่อดึงเฉพาะไดเรกทอรี nextjs-step10 จากสาขา io-connect

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

3. ติดตามการเปลี่ยนแปลงในเครื่องด้วย Git โดยทำดังนี้

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

ตอนนี้คุณควรเห็นโค้ดเริ่มต้นในที่เก็บ GitHub แล้ว

3. ตรวจสอบโค้ดเบสเริ่มต้น

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

โครงสร้างโฟลเดอร์และไฟล์

ตารางต่อไปนี้แสดงภาพรวมของโครงสร้างโฟลเดอร์และไฟล์ของแอป

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

แอปนี้เป็นเว็บแอป Next.js ที่ใช้App Router การแสดงผลฝั่งเซิร์ฟเวอร์ใช้ทั่วทั้งแอป ตัวอย่างเช่น ไฟล์ src/app/page.js เป็นคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ที่รับผิดชอบหน้าหลัก src/components/RestaurantListings.jsx เป็นคอมโพเนนต์ไคลเอ็นต์ที่ระบุโดยคำสั่ง "use client" ที่จุดเริ่มต้นของไฟล์

นำเข้าใบแจ้งยอด

ในบางไฟล์ คุณอาจเห็นคำสั่งนำเข้า เช่น คำสั่งต่อไปนี้

import RatingPicker from "@/src/components/RatingPicker.jsx";

แอปใช้สัญลักษณ์ @ เพื่อหลีกเลี่ยงเส้นทางการนำเข้าแบบสัมพัทธ์ที่ซับซ้อน และใช้นามแฝงของเส้นทาง

API เฉพาะของ Firebase

โค้ด Firebase API ทั้งหมดจะอยู่ในไดเรกทอรี src/lib/firebase จากนั้นคอมโพเนนต์ React แต่ละรายการจะนำเข้าฟังก์ชันที่ห่อไว้จากไดเรกทอรี src/lib/firebase แทนที่จะนำเข้าฟังก์ชัน Firebase โดยตรง

ข้อมูลจำลอง

ข้อมูลร้านอาหารและรีวิวจำลองจะอยู่ในไฟล์ src/lib/randomData.js ระบบจะรวบรวมข้อมูลจากไฟล์นั้นไว้ในโค้ดในไฟล์ src/lib/fakeRestaurants.js

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

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

สร้างโปรเจ็กต์ Firebase

1. ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google เดียวกับที่คุณใช้ในขั้นตอนก่อนหน้า
2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น FriendlyEats Codelab)
   
3. คลิกต่อไป
4. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
5. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
6. สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
7. คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกดำเนินการต่อ

อัปเกรดแพ็กเกจราคาของ Firebase

หากต้องการใช้ Firebase App Hosting และ Cloud Storage สำหรับ Firebase โปรเจ็กต์ Firebase ของคุณต้องอยู่ในแพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าต้องลิงก์กับบัญชีการเรียกเก็บเงินในระบบคลาวด์

• บัญชีสำหรับการเรียกเก็บเงินของ Cloud ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
• หากเพิ่งเริ่มใช้ Firebase และ Google Cloud โปรดตรวจสอบว่าคุณมีสิทธิ์รับเครดิต$300 และบัญชีสำหรับการเรียกเก็บเงินในระบบคลาวด์แบบทดลองใช้ฟรีหรือไม่
• หากคุณกำลังทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม โปรดสอบถามผู้จัดว่ามีเครดิต Cloud ให้หรือไม่

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

1. ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
2. เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
   หากคุณต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดใน Firebase Console เพื่อทำการอัปเกรดให้เสร็จสมบูรณ์

5. สร้างแบ็กเอนด์ App Hosting

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

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

สร้างแบ็กเอนด์

1. ในคอนโซล Firebase ให้ไปที่หน้า App Hosting
2. คลิกเริ่มต้นใช้งานเพื่อเริ่มขั้นตอนการสร้างแบ็กเอนด์
3. ทำตามข้อความแจ้งเพื่อนำเข้าและเชื่อมต่อที่เก็บ GitHub ที่คุณสร้างไว้ก่อนหน้านี้
4. ตั้งค่าการทำให้ใช้งานได้
   • เก็บไดเรกทอรีรากไว้เป็น /
   • ตั้งค่าสาขาที่ใช้งานจริงเป็น main
   • เปิดใช้การเปิดตัวอัตโนมัติ
5. ตั้งชื่อแบ็กเอนด์ friendlyeats-codelab (หรือชื่อแบ็กเอนด์ที่คุณเลือก) ซึ่งจะกลายเป็นส่วนหนึ่งของโดเมนที่ใช้เพื่อเข้าถึงแบ็กเอนด์
   เวิร์กโฟลว์นี้ยังสร้าง Firebase Web App ในโปรเจ็กต์ Firebase โดยอัตโนมัติด้วย ในภายหลังใน Codelab นี้ คุณจะได้ใช้ค่าการกำหนดค่าของเว็บแอปนี้เพื่อเชื่อมต่อโค้ดเบสกับโปรเจ็กต์ Firebase
6. คลิกเสร็จสิ้นและนำไปใช้ หลังจากนั้น ระบบจะนำคุณไปยังหน้าใหม่ซึ่งคุณจะเห็นสถานะของแบ็กเอนด์ App Hosting ใหม่
7. จากแดชบอร์ดการโฮสต์แอป ให้คัดลอกโดเมนใหม่
   โดยจะมีรูปแบบคล้ายกับ BACKEND_ID--PROJECT_ID.REGION.hosted.app คุณจะต้องใช้โดเมนนี้เพื่อตั้งค่าการตรวจสอบสิทธิ์ Firebase ในภายหลัง

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

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

6. ตั้งค่าบริการอื่นๆ ของ Firebase

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

ตั้งค่าการตรวจสอบสิทธิ์

1. ในคอนโซล Firebase ให้ไปที่การตรวจสอบสิทธิ์
2. คลิกเริ่มต้นใช้งาน
3. ในคอลัมน์ผู้ให้บริการเพิ่มเติม ให้คลิก Google > เปิดใช้
   1. ในกล่องข้อความชื่อที่เปิดเผยต่อสาธารณะสำหรับโปรเจ็กต์ ให้ป้อนชื่อ เช่น My FriendlyEatsCodelab app
   2. เลือกอีเมลของคุณจากเมนูแบบเลื่อนลงอีเมลสนับสนุนสำหรับโปรเจ็กต์
   3. คลิกบันทึก
4. คลิกแท็บการตั้งค่าในหน้าการตรวจสอบสิทธิ์
   1. คลิกโดเมนที่ได้รับอนุญาตจากเมนูด้านซ้ายของหน้าจอ
   2. คลิกเพิ่มโดเมน แล้วเพิ่มโดเมน App Hosting ที่สร้างขึ้นใหม่ (ลงท้ายด้วย .hosted.app)
   3. คลิกเพิ่มเพื่อบันทึก

ตั้งค่า Cloud Firestore

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

ตั้งค่า Cloud Storage for Firebase

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือก Storage
2. คลิกเริ่มต้นใช้งาน
3. เลือกตำแหน่งสำหรับที่เก็บข้อมูลเริ่มต้น
   ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 จะใช้ประโยชน์จากระดับ"ใช้งานฟรีเสมอ" สำหรับ Google Cloud Storage ได้ ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในภายหลังใน Codelab นี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยของข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่ได้เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
5. คลิกสร้าง

7. กำหนดค่าเว็บแอป

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

เข้าสู่ระบบ Firebase CLI ภายใน IDX

IDX ติดตั้ง Node.js และ Firebase CLI ไว้แล้ว คุณจึงข้ามการติดตั้งและเริ่มตั้งค่า CLI ได้เลย

1. ในเทอร์มินัลภายใน IDX ให้เรียกใช้คำสั่งต่อไปนี้เพื่อกำหนดค่า CLI ให้ใช้โปรเจ็กต์ Firebase ที่คุณสร้างไว้ก่อนหน้านี้

   firebase login --no-localhost
   firebase use --add
   

   เมื่อได้รับข้อความแจ้งให้ระบุชื่อแทน ให้ป้อน codelab
2. ป้อน Y หรือ N ขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูลหรือไม่ ตัวเลือกใดก็ได้ใช้ได้กับโค้ดแล็บนี้
3. ในเบราว์เซอร์ ให้เลือกบัญชี Google แล้วคลิกอนุญาต

ติดตั้งใช้งานกฎการรักษาความปลอดภัยและดัชนี

โค้ดที่คุณคัดลอกลงในที่เก็บข้อมูล GitHub มีชุดกฎความปลอดภัยสำหรับ Firestore (ใน firestore.rules) และสำหรับ Cloud Storage สำหรับ Firebase (ใน storage.rules) อยู่แล้ว หลังจากที่คุณทําการติดตั้งใช้งานกฎความปลอดภัย ข้อมูลในฐานข้อมูลและที่เก็บข้อมูลจะได้รับการปกป้องจากการละเมิดได้ดียิ่งขึ้น

นอกจากนี้ คุณยังใช้ CLI เพื่อติดตั้งใช้งานชุดดัชนีสำหรับ Firestore (ใน firestore.indexes.json) เพื่อเปิดใช้การค้นหาขั้นสูงได้ด้วย

1. ในเทอร์มินัลภายใน IDX ให้เรียกใช้คำสั่งนี้เพื่อทำให้ Security Rules และดัชนีเหล่านี้ใช้งานได้

   firebase deploy --only firestore,storage
   

2. หากระบบถามว่า "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ให้กด Enter เพื่อเลือกใช่

เพิ่มการกำหนดค่า Firebase ลงในโค้ดเว็บแอป

1. ในคอนโซล Firebase ให้ทำดังนี้
   1. ไปที่การตั้งค่าโปรเจ็กต์
   2. เลื่อนลงไปที่ส่วนแอปของคุณ แล้วเลือกแอปที่มีชื่อเดียวกับแบ็กเอนด์การโฮสต์แอป
   3. ในส่วนการตั้งค่าและการกำหนดค่า SDK ให้เลือกตัวเลือก Config จากนั้นคัดลอกพร็อพเพอร์ตี้ของตัวแปร firebaseConfig และค่าของพร็อพเพอร์ตี้
2. ใน IDX ให้ทำดังนี้
   1. เปิดไฟล์ apphosting.yaml คุณจะตั้งค่าตัวแปรสภาพแวดล้อมใน App Hosting รวมถึงการกำหนดค่าลับและรันไทม์ได้ที่นี่
   2. กรอกค่าตัวแปรสภาพแวดล้อมที่ระบุด้วยค่าการกำหนดค่าที่คุณคัดลอกจากคอนโซล Firebase เช่น (แทนที่ด้วยค่าของคุณเอง)

      runConfig:
          minInstances: 0
          maxInstances: 2
      env:
          # Get these values from the Firebase console
          - variable: NEXT_PUBLIC_FIREBASE_API_KEY
              value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
          - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
              value: project-id.firebaseapp.com
          - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
              value: project-id
          - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
              value: project-id.firebasestorage.app
          - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
              value: 111111111111
          - variable: NEXT_PUBLIC_FIREBASE_APP_ID
              value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
      

   3. บันทึกไฟล์ จากนั้นในเทอร์มินัลภายใน IDX ให้เรียกใช้คำสั่งต่อไปนี้เพื่อพุชการเปลี่ยนแปลงไปยัง GitHub

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. กลับไปที่คอนโซล Firebase แล้วไปที่หน้า App Hosting จากนั้นทำดังนี้
   1. คลิกดูแดชบอร์ดสำหรับแบ็กเอนด์
   2. สังเกตว่าระบบได้ทริกเกอร์บิลด์ใหม่จากการ Git Push ของคุณแล้ว การสร้างและเปิดตัวไปยัง Cloud Run ควรใช้เวลาประมาณ 3 นาที คุณตรวจสอบความคืบหน้าได้โดยคลิกชิป build-ID
   3. รีเฟรชหน้าคอนโซลเพื่อตรวจสอบว่าการเปิดตัวเสร็จสมบูรณ์แล้วหรือไม่ เมื่อดำเนินการเสร็จแล้ว ให้คลิกลิงก์สำหรับโดเมน (ลงท้ายด้วย .hosted.app) ในส่วนโดเมนเพื่อเปิดและดูแอปที่เพิ่งทำให้ใช้งานได้

ยินดีด้วย คุณได้ติดตั้งใช้งานเว็บแอปเริ่มต้นแล้ว มาดูรายละเอียดกัน

8. ลองใช้เว็บแอปในเบราว์เซอร์

ยืนยันว่าคุณเข้าสู่ระบบด้วยการตรวจสอบสิทธิ์ Firebase ได้

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

ดูข้อมูลร้านอาหาร

เว็บแอปมีข้อมูลจำลองสำหรับร้านอาหารและรีวิว

หากต้องการแทรกข้อมูลร้านอาหารจำลองลงในฐานข้อมูล Cloud Firestore ให้เลือก > เพิ่มร้านอาหารตัวอย่าง

ตรวจสอบว่าข้อมูลร้านอาหารโหลดที่รันไทม์ของเซิร์ฟเวอร์

การใช้เฟรมเวิร์ก Next.js อาจไม่ชัดเจนเมื่อมีการโหลดข้อมูลในเวลาเรียกใช้เซิร์ฟเวอร์หรือเวลาเรียกใช้ฝั่งไคลเอ็นต์

หากต้องการยืนยันว่าข้อมูลร้านอาหารโหลดที่รันไทม์ของเซิร์ฟเวอร์ ให้ทำตามขั้นตอนต่อไปนี้

1. ในเว็บแอป ให้เปิด DevTools แล้วปิดใช้ JavaScript
2. รีเฟรชเว็บแอป ข้อมูลร้านอาหารจะยังคงโหลดอยู่ ข้อมูลร้านอาหารจะแสดงในการตอบกลับของเซิร์ฟเวอร์ เมื่อเปิดใช้ JavaScript ระบบจะไฮเดรตข้อมูลร้านอาหารผ่านโค้ด JavaScript ฝั่งไคลเอ็นต์
3. เปิดใช้ JavaScript อีกครั้งในเครื่องมือสำหรับนักพัฒนาเว็บ
4. ในเว็บแอป ให้เลือก > เพิ่มร้านอาหารตัวอย่าง หากใช้ฟังก์ชันสแนปชอตอย่างถูกต้อง ร้านอาหารจะปรากฏแบบเรียลไทม์โดยไม่ต้องรีเฟรชหน้าเว็บ

เพิ่มรีวิวร้านอาหาร

หากต้องการเพิ่มรีวิวและยืนยันว่ารีวิวได้รับการแทรกลงใน Cloud Firestore แล้ว ให้ทำตามขั้นตอนต่อไปนี้

1. รีเฟรชเว็บแอป แล้วเลือกร้านอาหารจากหน้าแรก
2. คลิก ในหน้าของร้านอาหาร
3. เลือกการให้ดาว
4. เขียนรีวิว
5. คลิกส่ง รีวิวของคุณจะปรากฏที่ด้านบนของรายการรีวิว

9. สรุปรีวิวร้านอาหารด้วย Generative AI

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

จัดเก็บคีย์ Gemini API ใน Cloud Secret Manager

App Hosting ผสานรวมกับ Cloud Secret Manager เพื่อให้คุณจัดเก็บค่าที่ละเอียดอ่อน เช่น คีย์ API ได้อย่างปลอดภัย

1. หากต้องการใช้ Gemini API คุณจะต้องมีคีย์ API สร้างคีย์ใน Google AI Studio
   เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์เดียวกันกับที่คุณใช้สำหรับโค้ดแล็บนี้ (เบื้องหลัง โปรเจ็กต์ Firebase คือโปรเจ็กต์ Google Cloud)
2. ในเทอร์มินัลภายใน IDX ให้เรียกใช้คำสั่งนี้เพื่อสร้างข้อมูลลับใหม่

   firebase apphosting:secrets:set gemini-api-key
   

3. เมื่อระบบแจ้งให้ระบุค่าลับ ให้คัดลอกและวางคีย์ Gemini API จาก Google AI Studio
4. หากระบบถามว่า "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" ให้กด Enter เพื่อเลือกใช่
5. เมื่อระบบถามว่าควรเพิ่มข้อมูลลับใหม่ลงใน apphosting.yaml หรือไม่ ให้ป้อน Y เพื่อยอมรับ จากนั้นกด Enter เพื่อเลือก GEMINI_API_KEY เป็นชื่อตัวแปรสภาพแวดล้อม

ตอนนี้ระบบได้จัดเก็บคีย์ Gemini API ของคุณไว้อย่างปลอดภัยใน Cloud Secret Manager และแบ็กเอนด์ App Hosting ของคุณสามารถเข้าถึงได้ นอกจากนี้ คุณยังดูค่าได้ในแดชบอร์ด Secrets Manager ใน Google Cloud Console

6. เปิดไฟล์ apphosting.yaml แล้วสังเกตว่าระบบได้บันทึกชื่อของข้อมูลลับไว้ แต่ไม่ได้บันทึกค่า โดยควรมีลักษณะดังนี้

   runConfig:
       minInstances: 0
       maxInstances: 2
   env:
       # Get these values from the Firebase console
       - variable: NEXT_PUBLIC_FIREBASE_API_KEY
           value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
       - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
           value: project-id.firebaseapp.com
       - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
           value: project-id
       - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
           value: project-id.firebasestorage.app
       - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
           value: 111111111111
       - variable: NEXT_PUBLIC_FIREBASE_APP_ID
           value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
       - variable: GEMINI_API_KEY
           secret: gemini-api-key
   

ติดตั้งใช้งานคอมโพเนนต์สรุปรีวิว

1. เปิด src/components/Reviews/ReviewSummary.jsx ใน IDX
2. แทนที่ฟังก์ชัน GeminiSummary ด้วยโค้ดต่อไปนี้

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
       safety_settings: [
           {
           category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
           threshold: HarmBlockThreshold.BLOCK_NONE,
           },
       ],
       });
       const reviewSeparator = "@";
       const prompt = `
           Based on the following restaurant reviews,
           where each review is separated by a '${reviewSeparator}' character,
           create a one-sentence summary of what people think of the restaurant.
   
           Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
       `;
   
       try {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

3. ในเทอร์มินัลภายใน IDX ให้เรียกใช้คำสั่งเหล่านี้เพื่อสร้างคอมมิตและพุชไปยังที่เก็บ GitHub

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. ในคอนโซล Firebase ให้เปิดหน้า App Hosting แล้วรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
5. คลิกการ์ดร้านอาหารในเบราว์เซอร์ ที่ด้านบนของหน้าจอ คุณจะเห็นข้อมูลสรุปแบบ 1 ประโยคของรีวิวทั้งหมดสำหรับร้านอาหาร
6. เพิ่มรีวิวใหม่และรีเฟรชหน้าเว็บ คุณควรเห็นการเปลี่ยนแปลงสรุป

10. บทสรุป

ยินดีด้วย คุณได้เรียนรู้วิธีใช้ Firebase App Hosting เพื่อทําให้แอป Next.js ใช้งานได้และใช้ Gemini API เพื่อสรุปข้อความ โดยคุณใช้สิ่งต่อไปนี้

• Firebase App Hosting เพื่อสร้างและติดตั้งใช้งานโค้ด Next.js โดยอัตโนมัติทุกครั้งที่คุณพุชไปยังสาขา GitHub ที่กำหนดค่าไว้
• Cloud Secret Manager (ผสานรวมกับ App Hosting) เพื่อจัดเก็บคีย์ Gemini API อย่างปลอดภัยเพื่อให้คุณสร้างฟีเจอร์ Generative AI ในแอปได้

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

ดูโค้ดแล็บฉบับเต็ม "ผสานรวม Firebase กับแอป Next.js" เพื่อดูวิธีที่เราเพิ่มการตรวจสอบสิทธิ์ Firebase, Cloud Firestore และ Cloud Storage สำหรับ Firebase ลงในแอปนี้

นอกจากนี้ โปรดดู Codelab เพิ่มเติม

• Codelab ของ Cloud Firestore Web
• Codelab ของเฟรมเวิร์กเว็บ Angular ของ Firebase
• ปกป้องข้อมูล Firestore ด้วย Codelab กฎความปลอดภัยของ Firebase