หน้านี้ได้รับการแปลโดย Cloud Translation API

เว็บ Codelab ของ Firebase

1. ภาพรวม

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

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

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

สิ่งที่คุณต้องการ

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

2. รับรหัสตัวอย่าง

โคลน ที่เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลดที่เก็บเป็นไฟล์ ZIP

พื้นที่เก็บ friendlychat-web มีโครงการตัวอย่างสำหรับหลายแพลตฟอร์ม

Codelab นี้ใช้ที่เก็บทั้งสองนี้เท่านั้น:

📁 web-start : โค้ดเริ่มต้นที่คุณจะต่อยอดระหว่าง codelab นี้
📁 เว็บ : รหัสที่สมบูรณ์สำหรับแอปตัวอย่างที่เสร็จแล้ว

หมายเหตุ : หากคุณต้องการเรียกใช้แอปที่เสร็จสมบูรณ์ คุณจะยังคงต้องสร้างโปรเจ็กต์ Firebase ในคอนโซล Firebase (ดูคำแนะนำในส่วน สร้างและตั้งค่าโปรเจ็กต์ Firebase ใน Codelab นี้)

นำเข้าแอปเริ่มต้น

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

3. สร้างและตั้งค่าโครงการ Firebase

สร้างโครงการ Firebase

ลงชื่อเข้าใช้ Firebase
ในคอนโซล Firebase ให้คลิก Add Project จากนั้นตั้งชื่อโปรเจ็กต์ Firebase ของคุณ FriendlyChat จำรหัสโครงการสำหรับโครงการ Firebase ของคุณ
ยกเลิก การเลือกเปิดใช้งาน Google Analytics สำหรับโครงการนี้
คลิก สร้างโครงการ

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

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

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

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

คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
ลงทะเบียนแอปด้วยชื่อเล่นว่า Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คลิก ลงทะเบียนแอป
ในขั้นตอนถัดไป คุณจะเห็นวัตถุการกำหนดค่า คัดลอกเฉพาะวัตถุ JS (ไม่ใช่ HTML โดยรอบ) ลงใน firebase-config.js

ลงทะเบียนภาพหน้าจอเว็บแอป

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

คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :

ในคอนโซล Firebase ค้นหาส่วน Build ในแผงด้านซ้าย
คลิก การรับรองความถูกต้อง จากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปที่นั่นโดยตรง)
เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Google แล้วคลิก บันทึก
ตั้งชื่อแอพของคุณที่เปิดเผยสู่สาธารณะเป็น Friendly Chat และเลือก อีเมลสนับสนุนโครงการ จากเมนูแบบเลื่อนลง
กำหนดค่าหน้าจอยินยอม OAuth ของคุณใน Google Cloud Console และเพิ่มโลโก้:

เปิดใช้งาน Cloud Firestore

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

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

ในส่วน Build ของคอนโซล Firebase ให้คลิก Firestore Database
คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore

เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก ถัดไป หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย

โหมดทดสอบช่วยให้แน่ใจว่าเราสามารถเขียนลงในฐานข้อมูลระหว่างการพัฒนาได้อย่างอิสระ เราจะทำให้ฐานข้อมูลของเราปลอดภัยยิ่งขึ้นในภายหลังใน Codelab นี้

ตั้งค่าตำแหน่งที่จัดเก็บข้อมูล Cloud Firestore ของคุณ คุณสามารถปล่อยให้เป็นค่าเริ่มต้นหรือเลือกภูมิภาคที่ใกล้เคียงกับคุณ คลิก เสร็จสิ้น เพื่อจัดเตรียม Firestore

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

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

คุณจะต้องเปิดใช้งาน Cloud Storage:

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

ด้วยกฎความปลอดภัยเริ่มต้น ผู้ใช้ที่ผ่านการรับรองความถูกต้องสามารถเขียนอะไรก็ได้ลงใน Cloud Storage เราจะทำให้ที่เก็บข้อมูลของเราปลอดภัยยิ่งขึ้นในภายหลังใน Codelab นี้

ตำแหน่ง Cloud Storage จะถูกเลือกไว้ล่วงหน้าด้วยภูมิภาคเดียวกับที่คุณเลือกสำหรับฐานข้อมูล Cloud Firestore ของคุณ คลิก เสร็จสิ้น เพื่อเสร็จสิ้นการตั้งค่า

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

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

ติดตั้ง CLI โดยรันคำสั่ง npm ต่อไปนี้:

npm -g install firebase-tools

ตรวจสอบว่ามีการติดตั้ง CLI อย่างถูกต้องโดยรันคำสั่งต่อไปนี้:

firebase --version

ตรวจสอบให้แน่ใจว่าเวอร์ชันของ Firebase CLI เป็น v4.1.0 หรือใหม่กว่า

อนุญาต Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase login

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

ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเร็กทอรี web-start ในเครื่องของแอป
เชื่อมโยงแอปของคุณกับโครงการ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase use --add

เมื่อได้รับแจ้ง ให้เลือก Project ID ของคุณ จากนั้นตั้งนามแฝงให้กับโปรเจ็กต์ Firebase

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

ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ

5. เรียกใช้แอปเริ่มต้นในเครื่อง

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

ในคอนโซลจากไดเร็กทอรี web-start ให้รันคำสั่ง Firebase CLI ต่อไปนี้:

firebase serve --only hosting

บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

✔  hosting: Local server: http://localhost:5000

เรากำลังใช้โปรแกรมจำลอง โฮสติ้งของ Firebase เพื่อให้บริการแอปของเราในเครื่อง เว็บแอปควรพร้อมใช้งานจาก http://localhost:5000 ไฟล์ทั้งหมดที่อยู่ในไดเร็กทอรี public จะได้รับบริการ

ใช้เบราว์เซอร์ของคุณ เปิดแอปของคุณที่ http://localhost:5000

คุณควรเห็น UI ของแอป FriendlyChat ซึ่งยังใช้งานไม่ได้ (ยัง!)

แอปไม่สามารถทำอะไรได้ในตอนนี้ แต่ด้วยความช่วยเหลือของคุณ ในไม่ช้านี้! เราได้วาง UI ให้คุณแล้วเท่านั้น

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

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

นำเข้า Firebase SDK

เราจำเป็นต้องนำเข้า Firebase SDK ลงในแอป มีหลายวิธีในการทำเช่นนี้ตามที่ อธิบายไว้ในเอกสารประกอบของเรา ตัวอย่างเช่น คุณสามารถนำเข้าไลบรารีจาก CDN ของเรา หรือคุณสามารถติดตั้งในเครื่องโดยใช้ npm จากนั้นจัดแพ็คเกจในแอปของคุณหากคุณใช้ Browserify

เรากำลังจะได้รับ Firebase SDK จาก npm และใช้ Webpack เพื่อรวมรหัสของเรา เรากำลังทำเช่นนี้เพื่อให้ Webpack สามารถลบโค้ดที่ไม่จำเป็นออก ทำให้ขนาดบันเดิล JS ของเรามีขนาดเล็กเพื่อให้แน่ใจว่าแอปของเราโหลดได้เร็วที่สุด สำหรับ Codelab นี้ เราได้สร้างไฟล์ web-start/package.json ที่มี SDK ของ Firebase เป็นข้อมูลอ้างอิง รวมทั้งนำเข้าฟังก์ชันที่จำเป็นที่ด้านบนสุดของ web-start/src/index.js

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

ระหว่าง Codelab นี้ เราจะใช้ Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging และ Performance Monitoring ดังนั้นเราจึงนำเข้าไลบรารีทั้งหมดของพวกเขา ในแอปในอนาคตของคุณ ตรวจสอบให้แน่ใจว่าคุณนำเข้าเฉพาะส่วนของ Firebase ที่คุณต้องการ เพื่อลดเวลาในการโหลดแอปของคุณ

ติดตั้ง Firebase SDK และเริ่มสร้าง Webpack

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

เปิดหน้าต่างเทอร์มินัลใหม่
ปล่อยให้เทอร์มินัลเปิด firebase serve นั่นคือสิ่งที่เราจะใช้เพื่อโฮสต์แอปในเครื่อง
ตรวจสอบว่าคุณอยู่ในไดเร็กทอรี web-start
เรียกใช้ npm install เพื่อดาวน์โหลด Firebase SDK
เรียกใช้ npm run start เพื่อเริ่มต้น Webpack ตอนนี้ Webpack จะสร้างซอร์สโค้ดของเราใหม่อย่างต่อเนื่องสำหรับโค้ดแล็บที่เหลือ

กำหนดค่า Firebase

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

ไปที่ การตั้งค่าโครงการของคุณในคอนโซล Firebase
ในการ์ด "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการวัตถุกำหนดค่า
เลือก "กำหนดค่า" จากแผงข้อมูลโค้ด Firebase SDK
คัดลอกส่วนย่อยของวัตถุ config จากนั้นเพิ่มไปยัง web-start/src/firebase-config.js

firebase-config.js

const config = {
  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",
};

ตอนนี้ ไปที่ด้านล่างของ web-start/src/index.js และเริ่มต้น Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

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

ขณะนี้ Firebase SDK ควรพร้อมใช้งานแล้ว เนื่องจากนำเข้าและเริ่มต้นใน index.js ขณะนี้เรากำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้ Firebase Authentication

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

ในไดเร็กทอรี web-start ในไดเร็กทอรีย่อย src/ ให้เปิด index.js
ค้นหาฟังก์ชัน signIn
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน signOutUser
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

ติดตามสถานะการรับรองความถูกต้อง

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน initFirebaseAuth
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

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

แสดงข้อมูลของผู้ใช้ที่ลงชื่อเข้าใช้

เราต้องการแสดงรูปโปรไฟล์ของผู้ใช้ที่ลงชื่อเข้าใช้และชื่อผู้ใช้ในแถบด้านบนของแอปของเรา ใน Firebase ข้อมูลของผู้ใช้ที่ลงชื่อเข้าใช้จะมีอยู่ในวัตถุ currentUser เสมอ ก่อนหน้านี้ เราได้ตั้งค่าฟังก์ชัน authStateObserver ให้ทริกเกอร์เมื่อผู้ใช้ลงชื่อเข้าใช้ เพื่อให้ UI ของเราอัปเดตตามนั้น มันจะเรียก getProfilePicUrl และ getUserName เมื่อทริกเกอร์

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน getProfilePicUrl และ getUserName
แทนที่ทั้งสองฟังก์ชันด้วยรหัสต่อไปนี้

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน isUserSignedIn
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

ทดสอบการลงชื่อเข้าใช้แอพ

หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase serve --only hosting บน command line เพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
ลงชื่อเข้าใช้แอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google ของคุณ หากคุณเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า auth/operation-not-allowed ให้ตรวจสอบว่าคุณได้เปิดใช้ Google Sign-in เป็นผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase
หลังจากลงชื่อเข้าใช้ รูปโปรไฟล์และชื่อผู้ใช้ของคุณควรจะแสดง:

8. เขียนข้อความไปที่ Cloud Firestore

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

แบบจำลองข้อมูล

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

เพิ่มข้อความไปยัง Cloud Firestore

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

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชั่น saveMessage
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

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

หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase serve --only hosting บน command line เพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
หลังจากลงชื่อเข้าใช้ ให้ป้อนข้อความเช่น "สวัสดี!" แล้วคลิก ส่ง สิ่งนี้จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากเรายังต้องใช้ การดึง ข้อมูล (ส่วนถัดไปของ Codelab)
คุณจะเห็นข้อความที่เพิ่มใหม่ในคอนโซล Firebase เปิดคอนโซล Firebase ของคุณ ภายใต้ส่วน Build ให้คลิก Firestore Database (หรือคลิก ที่นี่ และเลือกโครงการของคุณ) และคุณควรเห็นคอลเล็กชัน ข้อความ พร้อมกับข้อความที่เพิ่มใหม่ของคุณ:

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

ซิงโครไนซ์ ข้อความ

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

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน loadMessages
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

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

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

หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase serve --only hosting บน command line เพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน FriendlyChat UI (ดูด้านล่าง) อย่าลังเลที่จะเขียนข้อความใหม่ ควรปรากฏขึ้นทันที
(ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน ฐานข้อมูล ของคอนโซล Firebase การเปลี่ยนแปลงใด ๆ ควรมีผลใน UI

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

10. ส่งภาพ

ตอนนี้เราจะเพิ่มคุณสมบัติที่แบ่งปันรูปภาพ

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

บันทึกภาพไปยังที่เก็บข้อมูลบนคลาวด์

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

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

ตอนนี้ คุณจะเพิ่มฟังก์ชันเพื่อส่งรูปภาพ:

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชั่น saveImageMessage
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), 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.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

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

หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase serve --only hosting บน command line เพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
หลังจากลงชื่อเข้าใช้ ให้คลิกปุ่มอัปโหลดภาพ แล้วเลือกไฟล์ภาพโดยใช้ตัวเลือกไฟล์ หากคุณกำลังมองหารูปภาพ คุณสามารถใช้ รูปภาพถ้วยกาแฟสวยๆ นี้ได้ตามสบาย
ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก:

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

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

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

เพิ่มพนักงานบริการ FCM

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

จากไดเร็กทอรี web-start ในไดเร็กทอรี src ให้เปิด firebase-messaging-sw.js
เพิ่มเนื้อหาต่อไปนี้ลงในไฟล์นั้น

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

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

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

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

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน saveMessagingDeviceToken
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().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(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

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

ขออนุญาตแสดงการแจ้งเตือน

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

กลับไปที่ไฟล์ src/index.js
ค้นหาฟังก์ชัน requestNotificationsPermissions
แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

index.js

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

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

หากแอปของคุณยังให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase serve --only hosting บน command line เพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
หลังจากลงชื่อเข้าใช้ กล่องโต้ตอบการอนุญาตการแจ้งเตือนควรปรากฏขึ้น:
คลิก อนุญาต
เปิดคอนโซล JavaScript ของเบราว์เซอร์ของคุณ คุณควรเห็นข้อความต่อไปนี้: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
คัดลอกโทเค็นอุปกรณ์ของคุณ คุณจะต้องใช้มันสำหรับ Codelab ขั้นต่อไป

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

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

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

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

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

12. กฎความปลอดภัยของ 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;
    }
  }
}

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

มีสองวิธีในการแก้ไขกฎความปลอดภัยของฐานข้อมูล ทั้งในคอนโซล Firebase หรือจากไฟล์กฎในเครื่องที่ใช้งานโดยใช้ Firebase CLI

ในการอัปเดตกฎความปลอดภัยในคอนโซล Firebase:

ไปที่ส่วน ฐานข้อมูล จากแผงด้านซ้าย จากนั้นคลิกแท็บ กฎ
แทนที่กฎเริ่มต้นที่มีอยู่ในคอนโซลด้วยกฎที่แสดงด้านบน
คลิก เผยแพร่

ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:

จากไดเร็กทอรี web-start ให้เปิด firestore.rules
แทนที่กฎเริ่มต้นที่มีอยู่ในไฟล์ด้วยกฎที่แสดงด้านบน
จากไดเร็กทอรี web-start ให้เปิด firebase.json
เพิ่มแอตทริบิวต์ firestore.rules ที่ชี้ไปที่ firestore.rules ดังที่แสดงด้านล่าง (แอตทริบิวต์ hosting ควรอยู่ในไฟล์แล้ว)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --only firestore

บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

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

ดูกฎความปลอดภัยของ 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;
    }
  }
}

อัปเดตกฎความปลอดภัย Cloud Storage

มีสองวิธีในการแก้ไขกฎความปลอดภัยของพื้นที่เก็บข้อมูล: ในคอนโซล Firebase หรือจากไฟล์กฎในเครื่องที่ใช้งานโดยใช้ Firebase CLI

ในการอัปเดตกฎความปลอดภัยในคอนโซล Firebase:

ไปที่ส่วน การจัดเก็บ จากแผงด้านซ้าย จากนั้นคลิกแท็บ กฎ
แทนที่กฎเริ่มต้นที่มีอยู่ในคอนโซลด้วยกฎที่แสดงด้านบน
คลิก เผยแพร่

ในการอัปเดตกฎความปลอดภัยจากไฟล์ในเครื่อง:

จากไดเร็กทอรี web-start ให้เปิด storage.rules
แทนที่กฎเริ่มต้นที่มีอยู่ในไฟล์ด้วยกฎที่แสดงด้านบน
จากไดเร็กทอรี web-start ให้เปิด firebase.json
เพิ่มแอตทริบิวต์ storage.rules ที่ชี้ไปที่ไฟล์ storage.rules ดังที่แสดงด้านล่าง (แอตทริบิวต์ hosting และ database ควรอยู่ในไฟล์แล้ว)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

ปรับใช้กฎความปลอดภัยโดยใช้ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --only storage

บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. รวบรวมข้อมูลประสิทธิภาพ

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

มีหลายวิธีในการผสานรวมกับ JavaScript SDK การตรวจสอบประสิทธิภาพของ Firebase ใน Codelab นี้ เราเปิดใช้งานการตรวจสอบประสิทธิภาพจาก Hosting URL โปรดดู เอกสารประกอบ เพื่อดูวิธีอื่นๆ ในการเปิดใช้งาน SDK

การติดตามอัตโนมัติ

เนื่องจากเรานำเข้า getPerformance ที่ด้านบนสุดของ web-start/src/index.js แล้ว เราจึงจำเป็นต้องเพิ่มหนึ่งบรรทัดเพื่อบอกให้ Performance Monitoring รวบรวมการโหลดหน้าเว็บและเมตริกคำขอเครือข่ายให้คุณโดยอัตโนมัติเมื่อผู้ใช้เยี่ยมชมไซต์ที่ใช้งานของคุณ!

ใน web-start/src/index.js ให้เพิ่มบรรทัดต่อไปนี้ด้านล่าง TODO ที่มีอยู่เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

วัดความล่าช้าของอินพุตแรก (ไม่บังคับ)

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

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

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

เปิด public/index.html
ยกเลิกการแสดงความคิดเห็นแท็ก script ในบรรทัดต่อไปนี้

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

หากต้องการอ่านเพิ่มเติมเกี่ยวกับโพลีฟิลการหน่วงเวลาอินพุตแรก โปรดดูที่ เอกสารประกอบ

ดูข้อมูลประสิทธิภาพ

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

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

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

15. ปรับใช้แอปของคุณโดยใช้ Firebase Hosting

Firebase ให้ บริการโฮสติ้ง เพื่อให้บริการเนื้อหาและเว็บแอปของคุณ คุณทำให้ไฟล์ใช้งานได้กับ Firebase Hosting โดยใช้ Firebase CLI ก่อนปรับใช้ คุณต้องระบุในไฟล์ firebase.json ว่าไฟล์ในเครื่องใดควรนำไปใช้งาน สำหรับ Codelab นี้ เราได้ดำเนินการให้คุณแล้วเนื่องจากจำเป็นต้องมีขั้นตอนนี้ในการให้บริการไฟล์ของเราในระหว่าง Codelab นี้ การตั้งค่าการโฮสต์ระบุไว้ภายใต้แอตทริบิวต์ hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

การตั้งค่าเหล่านี้บอก CLI ว่าเราต้องการปรับใช้ไฟล์ทั้งหมดในไดเร็กทอรี ./public ( "public": "./public" )

ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเร็กทอรี web-start ในเครื่องของแอป
ปรับใช้ไฟล์ของคุณกับโครงการ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --except functions

คอนโซลควรแสดงสิ่งต่อไปนี้:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

เยี่ยมชมเว็บแอปของคุณที่ตอนนี้โฮสต์โดยสมบูรณ์บน CDN ทั่วโลกโดยใช้โฮสติ้ง Firebase ที่โดเมนย่อย Firebase สองโดเมนของคุณเอง:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

หรือคุณสามารถเรียกใช้ firebase open hosting:site ในบรรทัดคำสั่ง

ไปที่เอกสารประกอบเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ วิธีการทำงานของ Firebase Hosting

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

16. ยินดีด้วย!

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

สิ่งที่เราได้ครอบคลุม

การรับรองความถูกต้องของ Firebase
Cloud Firestore
Firebase SDK สำหรับที่เก็บข้อมูลบนคลาวด์
การส่งข้อความบนคลาวด์ของ Firebase
การตรวจสอบประสิทธิภาพ Firebase
โฮสติ้ง Firebase

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

Learn more

firebase.google.com

เว็บ Codelab ของ Firebase

1. ภาพรวม

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

สิ่งที่คุณต้องการ

2. รับรหัสตัวอย่าง

นำเข้าแอปเริ่มต้น

3. สร้างและตั้งค่าโครงการ Firebase

สร้างโครงการ Firebase

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

เปิดใช้งาน การลงชื่อเข้าใช้ Google สำหรับ Firebase Authentication

เปิดใช้งาน Cloud Firestore

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

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

5. เรียกใช้แอปเริ่มต้นในเครื่อง

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

นำเข้า Firebase SDK

ติดตั้ง Firebase SDK และเริ่มสร้าง Webpack

กำหนดค่า Firebase

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

ตรวจสอบผู้ใช้ของคุณด้วย Google Sign-In

ติดตามสถานะการรับรองความถูกต้อง

แสดงข้อมูลของผู้ใช้ที่ลงชื่อเข้าใช้

ทดสอบการลงชื่อเข้าใช้แอพ

8. เขียนข้อความไปที่ Cloud Firestore

แบบจำลองข้อมูล

เพิ่มข้อความไปยัง Cloud Firestore

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

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

ซิงโครไนซ์ ข้อความ

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

10. ส่งภาพ

บันทึกภาพไปยังที่เก็บข้อมูลบนคลาวด์

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

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

เพิ่มพนักงานบริการ FCM

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

ขออนุญาตแสดงการแจ้งเตือน

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

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

12. กฎความปลอดภัยของ Cloud Firestore

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

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

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

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

อัปเดตกฎความปลอดภัย Cloud Storage

14. รวบรวมข้อมูลประสิทธิภาพ

การติดตามอัตโนมัติ

วัดความล่าช้าของอินพุตแรก (ไม่บังคับ)

ดูข้อมูลประสิทธิภาพ

15. ปรับใช้แอปของคุณโดยใช้ Firebase Hosting

16. ยินดีด้วย!

สิ่งที่เราได้ครอบคลุม

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

Learn more