เว็บ Codelab ของ Firebase

1. ภาพรวม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์

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

เปิดใช้งาน การลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase

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

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

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

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

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

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

1. ในส่วน บิล ด์ของคอนโซล Firebase ให้คลิก ฐานข้อมูล Firestore
2. คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore

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

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

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

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

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

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

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

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

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

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

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

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

npm -g install firebase-tools

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

firebase --version

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

3. อนุญาต Firebase CLI โดยรันคำสั่งต่อไปนี้:

firebase login

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

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

firebase use --add

6. เมื่อได้รับแจ้ง ให้เลือก รหัสโปรเจ็ กต์ จากนั้นให้ชื่อแทนโปรเจ็กต์ Firebase

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

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

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

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

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

firebase serve --only hosting

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

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

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

3. ใช้เบราว์เซอร์ของคุณ เปิดแอปที่ 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 ที่รวม Firebase SDK เป็นการพึ่งพา ตลอดจนนำเข้าฟังก์ชันที่จำเป็นที่ด้านบนสุดของ 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 build

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

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

กำหนดค่า Firebase

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

1. ไปที่ การตั้งค่าโปรเจ็กต์ของคุณในคอนโซล Firebase
2. ในการ์ด "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการอ็อบเจ็กต์การกำหนดค่า
3. เลือก "กำหนดค่า" จากบานหน้าต่างข้อมูลโค้ด Firebase SDK
4. คัดลอกข้อมูลโค้ดอ็อบเจ็กต์ 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.html ตอนนี้เรากำลังจะใช้งานการลงชื่อเข้าใช้ของผู้ใช้โดยใช้ Firebase Authentication

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

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

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

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 จะทำงานเมื่อผู้ใช้คลิกปุ่ม ออกจากระบบ

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

index.js

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

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

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

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

index.js

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

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

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

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

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

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;
}

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

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

index.js

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

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

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

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

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

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

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

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

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

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

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

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);
  }
}

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

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

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

ประสาน ข้อความ

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

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

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

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

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

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

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

10. ส่งภาพ

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

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

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

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

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

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

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

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);
  }
}

ทดลองส่งภาพ

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

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

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

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

เพิ่มเจ้าหน้าที่บริการ FCM

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

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

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

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

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() ซึ่งจะแสดงกล่องโต้ตอบของเบราว์เซอร์เพื่อขออนุญาตนี้ ( ในเบราว์เซอร์ที่รองรับ )

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

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.');
  }
}

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

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

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

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

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

หากแอปของคุณอยู่เบื้องหน้า คุณจะเห็นการแจ้งเตือนในคอนโซล 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:

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

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

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

firebase.json

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

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

firebase deploy --only firestore

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

=== 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 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:

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

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

1. จากไดเร็กทอรี web-start ให้เปิด storage.rules
2. แทนที่กฎเริ่มต้นที่มีอยู่แล้วในไฟล์ด้วยกฎที่แสดงด้านบน
3. จากไดเร็กทอรี web-start ให้เปิด firebase.json
4. เพิ่มแอตทริบิวต์ 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"
  }
}

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

firebase deploy --only storage

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

=== 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 การตรวจสอบประสิทธิภาพช่วยให้คุณเข้าใจว่าสามารถปรับปรุงประสิทธิภาพของแอปได้ที่ไหนและเมื่อใด เพื่อให้คุณสามารถใช้ข้อมูลนั้นเพื่อแก้ไขปัญหาด้านประสิทธิภาพได้

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

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

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

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

index.js

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

วัดการหน่วงเวลาอินพุตแรก (ตัวเลือก)

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

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

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

1. เปิด public/index.html
2. ยกเลิกการใส่เครื่องหมายแท็ก 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>

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

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

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

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

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

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

Firebase มีบริการ โฮสติ้ง เพื่อให้บริการเนื้อหาและเว็บแอปของคุณ คุณสามารถปรับใช้ไฟล์ของคุณกับโฮสติ้งของ Firebase โดยใช้ 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 "public": "./public" )

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

firebase deploy --except functions

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

=== 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

4. เยี่ยมชมเว็บแอปของคุณซึ่งขณะนี้โฮสต์อยู่บน CDN ทั่วโลกโดยใช้ Firebase Hosting ที่โดเมนย่อย 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 สำหรับ Cloud Storage
• การส่งข้อความบนคลาวด์ของ Firebase
• การตรวจสอบประสิทธิภาพของ Firebase
• Firebase Hosting

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

Learn more

• firebase.google.com