Codelab ของเว็บ AngularFire

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ AngularFire เพื่อสร้างเว็บแอปพลิเคชัน โดยนำโปรแกรมแชทไปใช้งานและปรับใช้ผลิตภัณฑ์และบริการของ Firebase

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

• สร้างเว็บแอปโดยใช้ Angular และ Firebase
• ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage for Firebase
• ตรวจสอบสิทธิ์ผู้ใช้โดยใช้การตรวจสอบสิทธิ์ Firebase
• ทำให้เว็บแอปใช้งานได้ในโฮสติ้งแอปของ Firebase
• ส่งการแจ้งเตือนด้วย Firebase Cloud Messaging
• รวบรวมข้อมูลประสิทธิภาพของเว็บแอป

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

• บัญชี GitHub
• ความสามารถในการอัปเกรดโปรเจ็กต์ Firebase เป็นแพ็กเกจราคา Blaze
• ตัวแก้ไข IDE/ข้อความที่ต้องการ เช่น WebStorm, Sublime หรือ VS Code
• ตัวจัดการแพ็กเกจ npm ซึ่งโดยทั่วไปจะมาพร้อมกับ Node.js
• เทอร์มินัล/คอนโซล
• เบราว์เซอร์ที่คุณต้องการ เช่น Chrome
• โค้ดตัวอย่างของ Codelab (ดูขั้นตอนถัดไปของ Codelab เพื่อดูวิธีรับโค้ด)

2. รับโค้ดตัวอย่าง

สร้างที่เก็บ GitHub

คุณดูแหล่งที่มาของ Codelab ได้ที่ https://github.com/firebase/codelab-friendlychat-web ที่เก็บนี้มีโปรเจ็กต์ตัวอย่างสำหรับหลายแพลตฟอร์ม แต่ Codelab นี้ใช้เฉพาะไดเรกทอรี angularfire-start

คัดลอกโฟลเดอร์ angularfire-start ไปยังที่เก็บของคุณเอง

1. ใช้เทอร์มินัล ให้สร้างโฟลเดอร์ใหม่ในคอมพิวเตอร์และเปลี่ยนเป็นไดเรกทอรีใหม่ ดังนี้

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. ใช้แพ็กเกจ giget npm เพื่อดึงข้อมูลเฉพาะโฟลเดอร์ angularfire-start ดังนี้

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. ติดตามการเปลี่ยนแปลงในเครื่องด้วย git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. สร้างที่เก็บ GitHub ใหม่: https://github.com/new ตั้งชื่อตามต้องการ
   1. GitHub จะให้ URL ของที่เก็บใหม่ซึ่งมีลักษณะเหมือน https://github.com/[user-name]/[repository-name].git หรือ git@github.com:[user-name]/[repository-name].git คัดลอก URL นี้
5. พุชการเปลี่ยนแปลงในเครื่องไปยังที่เก็บ GitHub ใหม่ เรียกใช้คำสั่งต่อไปนี้ โดยแทนที่ URL ที่เก็บสำหรับตัวยึดตำแหน่ง your-repository-url

   git remote add origin your-repository-url
   
   git push -u origin main
   

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

3. สร้างและตั้งค่าโปรเจ็กต์ Firebase

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

1. ลงชื่อเข้าใช้คอนโซล Firebase
2. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วตั้งชื่อโปรเจ็กต์ Firebase ของคุณว่า friendlyChat จำรหัสโปรเจ็กต์ของโปรเจ็กต์ Firebase
3. ยกเลิกการเลือกเปิดใช้ Google Analytics สำหรับโปรเจ็กต์นี้
4. คลิกสร้างโปรเจ็กต์

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

• การตรวจสอบสิทธิ์ของ Firebase เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปได้ง่ายๆ
• Cloud Firestore เพื่อบันทึก Structured Data ในระบบคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลมีการเปลี่ยนแปลง
• Cloud Storage for Firebase เพื่อบันทึกไฟล์ในระบบคลาวด์
• โฮสติ้งแอปของ Firebase เพื่อสร้าง โฮสต์ และบริการแอป
• Firebase Cloud Messaging เพื่อส่งข้อความ Push และแสดงการแจ้งเตือนแบบป๊อปอัปของเบราว์เซอร์
• การตรวจสอบประสิทธิภาพของ Firebase เพื่อรวบรวมข้อมูลประสิทธิภาพผู้ใช้สำหรับแอปของคุณ

ผลิตภัณฑ์เหล่านี้บางรายการต้องมีการกำหนดค่าพิเศษหรือต้องเปิดใช้โดยใช้คอนโซล Firebase

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

หากต้องการใช้โฮสติ้งแอป โปรเจ็กต์ Firebase ต้องใช้แพ็กเกจราคา Blaze ซึ่งหมายความว่าโปรเจ็กต์เชื่อมโยงกับบัญชีสำหรับการเรียกเก็บเงินใน Cloud

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

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

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

เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์

1. คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
2. ลงทะเบียนแอปด้วยชื่อเล่น friendly Chat ไม่ต้องเลือกช่องตั้งค่าโฮสติ้งของ Firebase สำหรับแอปนี้ด้วย คลิกลงทะเบียนแอป
3. คุณจะเห็นออบเจ็กต์การกำหนดค่าในขั้นตอนถัดไป คุณไม่จำเป็นต้องใช้งานในขณะนี้ คลิกดำเนินการต่อไปยังคอนโซล

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

หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google ให้ใช้วิธีลงชื่อเข้าใช้ของ Google

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

เปิดใช้ Cloud Firestore

เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

คุณจะต้องเปิดใช้ Cloud Firestore

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

เปิดใช้ Cloud Storage

โดยเว็บแอปนี้ใช้ Cloud Storage for Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ

คุณจะต้องเปิดใช้ Cloud Storage ตามขั้นตอนต่อไปนี้

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

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

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

1. ติดตั้ง CLI โดยเรียกใช้คำสั่ง npm ต่อไปนี้:

npm -g install firebase-tools@latest

2. ตรวจสอบว่าได้ติดตั้ง CLI อย่างถูกต้องแล้วโดยเรียกใช้คำสั่งต่อไปนี้

firebase --version

ตรวจสอบว่าเวอร์ชันของ Firebase CLI เป็น vv13.9.0 ขึ้นไป

3. ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้

firebase login

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

4. ตรวจสอบว่าบรรทัดคำสั่งกำลังเข้าถึงไดเรกทอรี angularfire-start ในเครื่องของแอป
5. เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้

firebase use --add

6. เมื่อมีข้อความแจ้ง ให้เลือกรหัสโปรเจ็กต์ แล้วตั้งชื่ออีเมลแทนให้โปรเจ็กต์ Firebase ของคุณ

ชื่อแทนจะมีประโยชน์หากคุณมีสภาพแวดล้อมหลายอย่าง (การผลิต การทดลองใช้ ฯลฯ) แต่สำหรับ Codelab นี้ โปรดใช้ชื่อแทนของ default

7. ทําตามวิธีการที่เหลือในบรรทัดคำสั่ง

5. ติดตั้ง AngularFire

ก่อนเรียกใช้โปรเจ็กต์ ให้ตรวจสอบว่าคุณได้ตั้งค่า Angular CLI และ AngularFire แล้ว

1. ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้

npm install -g @angular/cli

2. จากนั้นเรียกใช้คำสั่ง Angular CLI ในคอนโซลจากไดเรกทอรี angularfire-start

ng add @angular/fire

การดำเนินการนี้จะติดตั้งทรัพยากร Dependency ทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์ของคุณ

3. เมื่อได้รับแจ้ง ให้ยกเลิกการเลือก ng deploy -- hosting ด้วยแป้นเว้นวรรค เลือกฟีเจอร์ต่อไปนี้ด้วยแป้นลูกศรและแป้นเว้นวรรค
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. กด enter แล้วทำตามข้อความแจ้งที่เหลือ
5. สร้างคอมมิตที่มีข้อความคอมมิต "Install AngularFire" และพุชไปยังที่เก็บ GitHub ของคุณ

6. สร้างแบ็กเอนด์การโฮสต์แอป

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

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

1. ไปที่หน้าโฮสติ้งแอปในคอนโซล Firebase แล้วทำดังนี้

2. คลิก "เริ่มต้นใช้งาน" เพื่อเริ่มขั้นตอนการสร้างแบ็กเอนด์ กำหนดค่าแบ็กเอนด์ดังนี้
3. ทำตามข้อความแจ้งในขั้นตอนแรกเพื่อเชื่อมต่อที่เก็บ GitHub ที่คุณสร้างไว้ก่อนหน้านี้
4. กำหนดการตั้งค่าการนำไปใช้งาน:
   1. เก็บไดเรกทอรีรากเป็น /
   2. ตั้งค่า Branch แบบสดเป็น main
   3. เปิดใช้การเปิดตัวอัตโนมัติ
5. ตั้งชื่อแบ็กเอนด์ friendlychat-codelab
6. ใน "สร้างหรือเชื่อมโยงเว็บแอป Firebase" ให้เลือกเว็บแอปที่คุณกำหนดค่าไว้ก่อนหน้านี้จาก "เลือกเว็บแอป Firebase ที่มีอยู่" เมนูแบบเลื่อนลง
7. คลิก "เสร็จสิ้นและทำให้ใช้งานได้" หลังจากนั้นสักครู่ ระบบจะนำคุณไปยังหน้าใหม่ ซึ่งคุณสามารถดูสถานะของแบ็กเอนด์โฮสติ้งแอป!
8. เมื่อการเปิดตัวเสร็จสมบูรณ์ ให้คลิกโดเมนฟรีในส่วน "โดเมน" การดำเนินการนี้อาจใช้เวลาสักครู่จึงจะเริ่มทำงานได้เนื่องจากมีการเผยแพร่ DNS

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

คุณควรเห็นหน้าจอลงชื่อเข้าใช้ของแอป friendlyChat ซึ่ง (ยัง!) ไม่ทำงาน

แอปไม่สามารถดำเนินการใดๆ ได้ในขณะนี้ แต่ความช่วยเหลือของคุณจะดำเนินการได้ในเร็วๆ นี้

เรามาสร้างแอปแชทแบบเรียลไทม์กัน

7. นำเข้าและกำหนดค่า Firebase

กำหนดค่า Firebase

คุณจะต้องกำหนดค่า Firebase SDK เพื่อระบุว่ากำลังใช้โปรเจ็กต์ Firebase ใดอยู่

1. ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Firebase
2. ใน "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการออบเจ็กต์การกำหนดค่า
3. เลือก "Config" จากแผงข้อมูลโค้ด Firebase SDK

คุณจะเห็นว่าระบบสร้างไฟล์สภาพแวดล้อม /angularfire-start/src/environments/environment.ts ให้คุณ

4. คัดลอกข้อมูลโค้ดออบเจ็กต์การกำหนดค่า แล้วเพิ่มลงใน angularfire-start/src/firebase-config.js

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

ดูการตั้งค่า AngularFire

คุณจะเห็นว่าฟีเจอร์ที่เลือกในคอนโซลได้รับการเพิ่มในไฟล์ /angularfire-start/src/app/app.config.ts โดยอัตโนมัติ วิธีนี้ช่วยให้แอปของคุณใช้ฟีเจอร์และฟังก์ชันของ Firebase ได้

8. ตั้งค่าการลงชื่อเข้าใช้ของผู้ใช้

AngularFire ควรพร้อมใช้งานแล้วเพราะมีการนำเข้าและเริ่มต้นใน app.config.ts คุณกำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้การตรวจสอบสิทธิ์ของ Firebase

เพิ่มโดเมนที่ได้รับอนุญาต

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

1. ไปที่โฮสติ้งของแอป
2. คัดลอกโดเมนของแบ็กเอนด์
3. ไปที่ Authentication settings
4. เลือกแท็บโดเมนที่ได้รับอนุญาต
5. คลิกเพิ่มโดเมน และวางโดเมนของแบ็กเอนด์การโฮสต์แอป

ตรวจสอบสิทธิ์ผู้ใช้ด้วย Google Sign-In

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

1. เปิด chat.service.ts ในไดเรกทอรีย่อย /src/app/services/
2. หาฟังก์ชัน login
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

ฟังก์ชัน logout จะทริกเกอร์เมื่อผู้ใช้คลิกปุ่มออกจากระบบ

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. หาฟังก์ชัน logout
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

ติดตามสถานะการตรวจสอบสิทธิ์

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. ค้นหาการกำหนดตัวแปร user$

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

โค้ดด้านบนเรียกใช้ฟังก์ชัน AngularFire user ซึ่งแสดงผลผู้ใช้ที่สังเกตได้ โดยจะทริกเกอร์ทุกครั้งที่สถานะการตรวจสอบสิทธิ์เปลี่ยนแปลง (เมื่อผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบ) คอมโพเนนต์เทมเพลต Angular ใน friendlyChat จะใช้ระบบที่สังเกตได้นี้เพื่ออัปเดต UI เพื่อเปลี่ยนเส้นทาง แสดงผู้ใช้ในการนำทางส่วนหัว เป็นต้น

ทดสอบการเข้าสู่ระบบแอป

1. สร้างคอมมิตที่มีข้อความคอมมิต "การเพิ่มการตรวจสอบสิทธิ์ Google" และพุชไปยังที่เก็บ GitHub ของคุณ
2. เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
3. ในเว็บแอป ให้รีเฟรชหน้าเว็บและเข้าสู่ระบบแอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google หากเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า auth/operation-not-allowed ให้ตรวจสอบว่าเปิดใช้ Google Sign-In เป็นผู้ให้บริการการตรวจสอบสิทธิ์ในคอนโซล Firebase แล้ว
4. หลังจากเข้าสู่ระบบแล้ว รูปโปรไฟล์และชื่อผู้ใช้ของคุณควรปรากฏ:

9. เขียนข้อความไปยัง Cloud Firestore

ในส่วนนี้ คุณจะได้เขียนข้อมูลบางอย่างลงใน Cloud Firestore เพื่อสร้าง UI ของแอป ซึ่งสามารถทำได้ด้วยตนเองโดยใช้คอนโซล Firebase แต่คุณจะดำเนินการในแอปเพื่อแสดงการเขียนใน Cloud Firestore พื้นฐาน

โมเดลข้อมูล

ข้อมูล Cloud Firestore จะแบ่งออกเป็นคอลเล็กชัน เอกสาร ช่อง และคอลเล็กชันย่อย คุณจะจัดเก็บแต่ละข้อความของแชทเป็นเอกสารในคอลเล็กชันระดับบนสุดที่เรียกว่า messages

เพิ่มข้อความใน Cloud Firestore

หากต้องการจัดเก็บข้อความแชทที่ผู้ใช้เขียน ให้ใช้ Cloud Firestore

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันเพื่อให้ผู้ใช้เขียนข้อความใหม่ในฐานข้อมูล ผู้ใช้ที่คลิกปุ่มส่งจะเรียกใช้ข้อมูลโค้ดด้านล่าง โดยจะเพิ่มออบเจ็กต์ข้อความที่มีเนื้อหาของช่องข้อความไปยังอินสแตนซ์ Cloud Firestore ในคอลเล็กชัน messages เมธอด add() จะเพิ่มเอกสารใหม่ซึ่งมีรหัสที่สร้างขึ้นโดยอัตโนมัติลงในคอลเล็กชัน

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. หาฟังก์ชัน addMessage
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

ทดสอบการส่งข้อความ

1. สร้างคอมมิตที่มีข้อความคอมมิต "โพสต์แชทใหม่ไปที่ Firestore" และพุชไปยังที่เก็บ GitHub ของคุณ
2. เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
3. รีเฟรช friendlyChat หลังจากเข้าสู่ระบบแล้ว ให้ป้อนข้อความ เช่น "สวัสดี" แล้วคลิกส่ง การดำเนินการนี้จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงเนื่องจากยังคงต้องใช้การดึงข้อมูล (ส่วนถัดไปของ Codelab)
4. คุณจะดูข้อความที่เพิ่มใหม่ได้ในคอนโซล Firebase เปิด UI ชุดโปรแกรมจำลอง ในส่วน Build ให้คลิก Firestore Database (หรือคลิก ที่นี่ แล้วคุณจะเห็นคอลเล็กชัน ข้อความ พร้อมกับข้อความที่เพิ่มใหม่ ดังนี้

10. อ่านข้อความ

ซิงค์ข้อมูลข้อความ

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

คุณจะต้องเพิ่มโค้ดที่จะคอยฟังข้อความที่เพิ่มใหม่จากแอป คุณจะเรียกสแนปชอตของคอลเล็กชัน messages ได้ในโค้ดนี้ คุณจะแสดงเฉพาะข้อความ 12 ข้อความสุดท้ายของแชทเท่านั้น เพื่อหลีกเลี่ยงการแสดงประวัติที่ยาวนานมากเมื่อโหลด

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. หาฟังก์ชัน loadMessages
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

หากต้องการฟังข้อความในฐานข้อมูล คุณจะสร้างการค้นหาในคอลเล็กชันโดยใช้ฟังก์ชัน collection เพื่อระบุว่ามีคอลเล็กชันข้อมูลใดที่ต้องการฟังอยู่ ในโค้ดข้างต้น คุณกำลังฟังการเปลี่ยนแปลงภายในคอลเล็กชัน messages ซึ่งเป็นที่เก็บข้อความแชท นอกจากนี้ คุณยังใช้ขีดจำกัดโดยฟังเฉพาะ 12 ข้อความล่าสุดโดยใช้ limit(12) และเรียงลำดับข้อความตามวันที่โดยใช้ orderBy('timestamp', 'desc') เพื่อรับ 12 ข้อความล่าสุด

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

ทดสอบการซิงโครไนซ์ข้อความ

1. สร้างคอมมิตที่มีข้อความคอมมิต "แสดงแชทใหม่ใน UI" และพุชไปยังที่เก็บ GitHub ของคุณ
2. เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
3. รีเฟรช friendlyChat ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน friendlyChat UI (ดูด้านล่าง) เขียนข้อความใหม่ได้ตามใจชอบ โฆษณานั้นควรปรากฏในทันที
4. (ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน Firestore ของชุดโปรแกรมจำลอง การเปลี่ยนแปลงใดๆ ควรแสดงอยู่ใน UI

ยินดีด้วย คุณกำลังอ่านเอกสาร Cloud Firestore ในแอป

11. เพิ่มฟีเจอร์ AI

คุณจะใช้ AI ของ Google เพื่อเพิ่มฟีเจอร์ความช่วยเหลือที่เป็นประโยชน์ลงในแอปแชท

รับคีย์ AI API ของ Google

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

ติดตั้งส่วนขยาย

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

1. คลิกติดตั้งในคอนโซล Firebase ในหน้าส่วนขยายสร้างแชทบ็อตด้วย Gemini API
2. ทำตามคำแนะนำ เมื่อไปถึงขั้นตอนกำหนดค่าส่วนขยาย ให้ตั้งค่าพารามิเตอร์ต่อไปนี้
   • ผู้ให้บริการ Gemini API: Google AI
   • คีย์ AI API ของ Google: วางคีย์ที่คุณสร้างไว้ก่อนหน้านี้แล้วคลิกสร้างข้อมูลลับ
   • เส้นทางการรวบรวม Firestore: messages
   • ช่องพรอมต์: text
   • ช่องคำตอบ: response
   • ฟิลด์คำสั่งซื้อ: timestamp
   • บริบท: Keep your answers short, informal, and helpful. Use emojis when possible.
3. คลิกติดตั้งส่วนขยาย
4. รอให้ส่วนขยายติดตั้งเสร็จ

ฟีเจอร์ทดสอบ AI

friendlyChat มีโค้ดสำหรับอ่านคำตอบจากส่วนขยาย AI อยู่แล้ว เพียงคุณส่งข้อความแชทใหม่เพื่อทดสอบ

1. เปิด friendlyChat แล้วส่งข้อความ
2. หลังจากนั้นสักครู่ คุณจะเห็นคำตอบปรากฏขึ้นพร้อมกับข้อความ โดยมีหมายเหตุ ✨ ai generated ในตอนท้ายเพื่อความชัดเจนว่าระบบสร้างด้วย Generative AI ไม่ใช่ผู้ใช้จริง

12. ส่งรูปภาพ

ตอนนี้คุณจะเพิ่มฟีเจอร์ที่แชร์รูปภาพ

แม้ว่า Cloud Firestore จะใช้งานได้ดีสำหรับการจัดเก็บข้อมูลที่มีโครงสร้าง แต่ Cloud Storage จะเหมาะกับการจัดเก็บไฟล์มากกว่า Cloud Storage for Firebase เป็นบริการพื้นที่เก็บข้อมูลไฟล์/BLOB เพื่อเก็บรูปภาพที่ผู้ใช้แชร์โดยใช้แอปของเรา

บันทึกรูปภาพไปยัง Cloud Storage

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

1. สร้าง "ตัวยึดตำแหน่ง" ข้อความแชทในฟีดแชท เพื่อให้ผู้ใช้เห็นข้อความว่า "กำลังโหลด" ภาพเคลื่อนไหวขณะอัปโหลดรูปภาพ
2. อัปโหลดไฟล์ภาพไปยัง Cloud Storage ไปยังเส้นทางนี้: /<uid>/<file_name>
3. สร้าง URL ที่อ่านได้แบบสาธารณะสำหรับไฟล์ภาพ
4. อัปเดตข้อความแชทด้วย URL ของไฟล์ภาพที่เพิ่งอัปโหลดแทนรูปภาพชั่วคราวขณะโหลด

ในขั้นตอนนี้คุณจะต้องเพิ่มฟังก์ชันสำหรับการส่งรูปภาพ ดังนี้

1. กลับไปที่ไฟล์ src/chat.service.ts
2. หาฟังก์ชัน saveImageMessage
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

ทดสอบการส่งรูปภาพ

1. สร้างคอมมิตด้วยข้อความคอมมิต "เพิ่มความสามารถในการโพสต์รูปภาพ" และพุชไปยังที่เก็บ GitHub ของคุณ
2. เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
3. รีเฟรช friendlyChat หลังจากเข้าสู่ระบบแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพที่ด้านล่างซ้าย แล้วเลือกไฟล์ภาพโดยใช้เครื่องมือเลือกไฟล์ หากคุณกำลังหารูปภาพ คุณสามารถใช้รูปภาพถ้วยกาแฟสวยๆ นี้
4. ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมด้วยรูปภาพที่คุณเลือก:

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

13. แสดงการแจ้งเตือน

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

เพิ่มโปรแกรมทำงานของบริการ FCM

เว็บแอปต้องมี Service Worker ที่จะรับและแสดงการแจ้งเตือนบนเว็บได้

ควรตั้งค่าผู้ให้บริการรับส่งข้อความไว้แล้วเมื่อเพิ่ม AngularFire โปรดตรวจสอบว่ามีโค้ดต่อไปนี้ในส่วนการนำเข้าของ /angularfire-start/src/app/app.config.ts

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

โปรแกรมทำงานของบริการเพียงต้องโหลดและเริ่มต้น Firebase Cloud Messaging SDK ซึ่งจะดูแลการแสดงการแจ้งเตือน

รับโทเค็นอุปกรณ์ FCM

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

เมื่อผู้ใช้ลงชื่อเข้าใช้ คุณจะเรียกใช้ฟังก์ชัน saveMessagingDeviceToken ซึ่งคุณจะรับโทเค็นอุปกรณ์ FCM จากเบราว์เซอร์และบันทึกลงใน Cloud Firestore ได้

chat.service.ts

2. หาฟังก์ชัน saveMessagingDeviceToken
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

ขอสิทธิ์เพื่อแสดงการแจ้งเตือน

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

1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
2. หาฟังก์ชัน requestNotificationsPermissions
3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

รับโทเค็นอุปกรณ์

1. สร้างคอมมิตด้วยข้อความคอมมิต "เพิ่มความสามารถในการโพสต์รูปภาพ" และพุชไปยังที่เก็บ GitHub ของคุณ
2. เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
3. รีเฟรช friendlyChat หลังจากเข้าสู่ระบบ กล่องโต้ตอบสิทธิ์การแจ้งเตือนจะปรากฏขึ้น:
4. คลิกอนุญาต
5. เปิดคอนโซล JavaScript ของเบราว์เซอร์ คุณควรเห็นข้อความต่อไปนี้: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. คัดลอกโทเค็นอุปกรณ์ เนื่องจากคุณจำเป็นต้องใช้ในขั้นตอนถัดไปของ Codelab

ส่งการแจ้งเตือนไปยังอุปกรณ์ของคุณ

เมื่อคุณมีโทเค็นอุปกรณ์แล้ว คุณสามารถส่งการแจ้งเตือนได้

1. เปิดแท็บ Cloud Messaging ของคอนโซล Firebase
2. คลิก "การแจ้งเตือนใหม่"
3. ป้อนชื่อการแจ้งเตือนและข้อความแจ้งเตือน
4. ที่ด้านขวาของหน้าจอ ให้คลิก "ส่งข้อความทดสอบ"
5. ป้อนโทเค็นอุปกรณ์ที่คัดลอกจากคอนโซล JavaScript ของเบราว์เซอร์ แล้วคลิกเครื่องหมายบวก ("+")
6. คลิก "ทดสอบ"

หากแอปทำงานอยู่ในเบื้องหน้า คุณจะเห็นการแจ้งเตือนในคอนโซล JavaScript

หากแอปของคุณอยู่ในเบื้องหลัง การแจ้งเตือนควรปรากฏในเบราว์เซอร์ตามตัวอย่างนี้

14. กฎความปลอดภัยใน Cloud Firestore

ดูกฎความปลอดภัยของฐานข้อมูล

Cloud Firestore ใช้ภาษาของกฎเฉพาะเพื่อกำหนดสิทธิ์การเข้าถึง ความปลอดภัย และการตรวจสอบข้อมูล

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

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

คุณจะอัปเดตกฎเพื่อจำกัดสิ่งต่างๆ โดยใช้กฎต่อไปนี้

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

กฎความปลอดภัยควรอัปเดตเป็นชุดโปรแกรมจำลองโดยอัตโนมัติ

ดูกฎความปลอดภัยของ Cloud Storage

Cloud Storage for Firebase ใช้ภาษาของกฎที่เฉพาะเจาะจงเพื่อกำหนดสิทธิ์การเข้าถึง ความปลอดภัย และการตรวจสอบข้อมูล

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

คุณจะต้องอัปเดตกฎเพื่อดำเนินการต่อไปนี้

• อนุญาตให้ผู้ใช้แต่ละรายเขียนในโฟลเดอร์ที่ระบุของตนเองเท่านั้น
• อนุญาตให้ทุกคนอ่านจาก Cloud Storage
• ตรวจสอบว่าไฟล์ที่อัปโหลดเป็นรูปภาพ
• จำกัดขนาดของรูปภาพที่สามารถอัปโหลดได้ไม่เกิน 5 MB

คุณติดตั้งใช้งานได้โดยใช้กฎต่อไปนี้

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. ยินดีด้วย

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

หัวข้อที่ครอบคลุม

• Firebase App Hosting
• การตรวจสอบสิทธิ์ Firebase
• Cloud Firestore
• Firebase SDK สำหรับ Cloud Storage
• Firebase Cloud Messaging
• การตรวจสอบประสิทธิภาพ Firebase

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

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

• firebase.google.com

16. [ไม่บังคับ] บังคับใช้ด้วย App Check

App Check ของ Firebase ช่วยรักษาความปลอดภัยของบริการจากการเข้าชมที่ไม่พึงประสงค์และช่วยปกป้องแบ็กเอนด์จากการละเมิด ในขั้นตอนนี้ คุณจะต้องเพิ่มการตรวจสอบข้อมูลเข้าสู่ระบบและบล็อกไคลเอ็นต์ที่ไม่ได้รับอนุญาตด้วย App Check และ reCAPTCHA Enterprise

ก่อนอื่น คุณจะต้องเปิดใช้ App Check และ reCAPTCHA

การเปิดใช้ reCaptcha Enterprise

1. ใน Cloud Console ให้ค้นหาและเลือก reCaptcha Enterprise ในส่วนความปลอดภัย
2. เปิดใช้บริการตามข้อความแจ้ง แล้วคลิกสร้างคีย์
3. ป้อนชื่อที่แสดงตามข้อความแจ้ง แล้วเลือกเว็บไซต์เป็นประเภทแพลตฟอร์ม
4. เพิ่ม URL ที่ทำให้ใช้งานได้แล้วลงในรายการโดเมน และตรวจสอบว่า "ใช้คำถามในช่องทำเครื่องหมาย" มีการไม่ได้เลือกอยู่
5. คลิกสร้างคีย์และจัดเก็บคีย์ที่สร้างขึ้นไว้ที่ใดก็ได้เพื่อเก็บรักษาคีย์เอาไว้ ซึ่งคุณจะต้องใช้ภายหลังในขั้นตอนนี้

การเปิดใช้ App Check

1. ในคอนโซล Firebase ให้ค้นหาส่วนสร้างในแผงด้านซ้าย
2. คลิก App Check แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้เพื่อไปที่ App Check
3. คลิกลงทะเบียน แล้วป้อนคีย์ reCAPTCHA Enterprise เมื่อระบบแจ้ง แล้วคลิกบันทึก
4. ในมุมมอง API ให้เลือกพื้นที่เก็บข้อมูล แล้วคลิกบังคับใช้ ให้ทำแบบเดียวกันนี้กับ Cloud Firestore

ควรบังคับใช้ App Check แล้ว รีเฟรชแอปแล้วลองดูหรือส่งข้อความแชท คุณควรได้รับข้อความแสดงข้อผิดพลาดดังนี้

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

ซึ่งหมายความว่า App Check จะบล็อกคำขอที่ยังไม่ได้รับการตรวจสอบโดยค่าเริ่มต้น ตอนนี้มาเพิ่มการตรวจสอบลงในแอปกัน

ไปที่ไฟล์ environment.ts และเพิ่ม reCAPTCHAEnterpriseKey ลงในออบเจ็กต์ environment

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

แทนที่ค่าของ key ด้วยโทเค็น reCaptcha Enterprise

จากนั้นไปที่ไฟล์ app.config.ts แล้วเพิ่มการนําเข้าต่อไปนี้

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

ในไฟล์ app.config.ts เดียวกัน ให้เพิ่มการประกาศตัวแปรร่วมต่อไปนี้

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

ในการนำเข้า ให้เพิ่มการเริ่มต้น App Check ด้วย ReCaptchaEnterpriseProvider และตั้งค่า isTokenAutoRefreshEnabled เป็น true เพื่ออนุญาตให้โทเค็นรีเฟรชอัตโนมัติ

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

หากต้องการอนุญาตการทดสอบในเครื่อง ให้ตั้งค่า self.FIREBASE_APPCHECK_DEBUG_TOKEN เป็น true เมื่อคุณรีเฟรชแอปใน localhost ระบบจะบันทึกโทเค็นการแก้ไขข้อบกพร่องในคอนโซลในลักษณะเดียวกับรายการต่อไปนี้

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

จากนั้นไปที่มุมมองแอปของ App Check ในคอนโซล Firebase

คลิกเมนูรายการเพิ่มเติม แล้วเลือกจัดการโทเค็นการแก้ไขข้อบกพร่อง

จากนั้นคลิกเพิ่มโทเค็นการแก้ไขข้อบกพร่อง และวางโทเค็นการแก้ไขข้อบกพร่องจากคอนโซลตามข้อความแจ้ง

ไปที่ไฟล์ chat.service.ts แล้วเพิ่มการนำเข้าต่อไปนี้

import { AppCheck } from '@angular/fire/app-check';

ในไฟล์ chat.service.ts เดียวกัน ให้แทรก App Check ไปพร้อมกับบริการ Firebase อื่นๆ

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

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

ยินดีด้วย ตอนนี้ App Check ควรใช้งานได้ในแอปของคุณแล้ว