Codelab เว็บ Firebase

1. ภาพรวม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. ในส่วนการสร้าง Firebase คอนโซลคลิก FireStore ฐานข้อมูล
2. คลิกสร้างฐานข้อมูลในบานหน้าต่างเมฆ FireStore

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

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

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

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

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

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

1. ในส่วนการสร้าง Firebase คอนโซลคลิกการจัดเก็บข้อมูล
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. เมื่อได้รับแจ้งให้เลือกโครงการ ID ของคุณแล้วให้โครงการ 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 เพื่อดาวน์โหลด SDK Firebase
4. เรียกใช้ npm run start จะเริ่มต้นขึ้น Webpack ตอนนี้ Webpack จะสร้างรหัสหลักสูตรของเราใหม่อย่างต่อเนื่องสำหรับ Codelab ที่เหลือ

กำหนดค่า Firebase

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

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

ตรวจสอบผู้ใช้ของคุณด้วย 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 เข้าสู่ระบบในฐานะที่เป็นผู้ให้บริการการตรวจสอบในคอนโซล Firebase
3. หลังจากลงชื่อเข้าใช้แล้ว รูปภาพโปรไฟล์และชื่อผู้ใช้ของคุณควรแสดง:

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

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

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

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

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

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

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันให้ผู้ใช้เขียนข้อความใหม่ลงในฐานข้อมูลของคุณ ผู้ใช้คลิกที่ปุ่มส่งจะเรียกข้อมูลโค้ดข้างล่างนี้ มันจะเพิ่มวัตถุข้อความที่มีเนื้อหาของเขตข้อมูลข้อความไปเช่นเมฆ 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 ของคุณ ในส่วนการสร้างคลิก 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 ฟังก์ชั่นใช้เวลาแบบสอบถามเป็นพารามิเตอร์แรกของตนและฟังก์ชันการเรียกกลับเป็นที่สอง ฟังก์ชันเรียกกลับจะถูกทริกเกอร์เมื่อมีการเปลี่ยนแปลงเอกสารที่ตรงกับแบบสอบถาม อาจเป็นได้หากข้อความถูกลบ แก้ไข หรือเพิ่ม คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ใน เอกสารเมฆ FireStore

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

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

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

10. ส่งภาพ

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

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

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

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

1. สร้างข้อความแชท "ตัวยึด" ในฟีดแชท เพื่อให้ผู้ใช้เห็นภาพเคลื่อนไหว "กำลังโหลด" ในขณะที่เราอัปโหลดรูปภาพ
2. อัพโหลดไฟล์ภาพเพื่อการจัดเก็บเมฆไปยังเส้นทางนี้: /<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 โทเค็นจากเบราว์เซอร์และบันทึกไว้ในระบบคลาวด์ 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. เปิด เมฆแท็บ Messaging ของคอนโซล Firebase
2. คลิก "การแจ้งเตือนใหม่"
3. ป้อนชื่อการแจ้งเตือนและข้อความแจ้งเตือน
4. ที่ด้านขวาของหน้าจอ ให้คลิก "ส่งข้อความทดสอบ"
5. ป้อนโทเค็นอุปกรณ์ที่คุณคัดลอกจากคอนโซล JavaScript ของเบราว์เซอร์ จากนั้นคลิกเครื่องหมายบวก ("+")
6. คลิก "ทดสอบ"

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

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

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

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

เมฆ 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

การจัดเก็บข้อมูลแบบคลาวด์สำหรับ 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 นี้เราเปิดใช้งานการตรวจสอบประสิทธิภาพจาก URL โฮสติ้ง อ้างถึง เอกสาร เพื่อดูวิธีการอื่น ๆ ของการเปิดใช้ SDK ได้

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

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

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" )

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 โฮสติ้ง

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

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

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

สิ่งที่เราได้กล่าวถึง

• การตรวจสอบสิทธิ์ Firebase
• Cloud Firestore
• Firebase SDK สำหรับ Cloud Storage
• การส่งข้อความบนคลาวด์ของ Firebase
• การตรวจสอบประสิทธิภาพของ Firebase
• Firebase Hosting

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

Learn more

• firebase.google.com