Trang này được dịch bởi Cloud Translation API.

Bảng mã web Firebase

1. Khái quát chung

Trong phòng thí nghiệm lập trình này, bạn sẽ tìm hiểu cách sử dụng Firebase để dễ dàng tạo các ứng dụng web bằng cách triển khai và triển khai ứng dụng khách trò chuyện bằng cách sử dụng các sản phẩm và dịch vụ của Firebase.

Bạn sẽ học được gì

Đồng bộ hóa dữ liệu bằng Cloud Firestore và Cloud Storage cho Firebase.
Xác thực người dùng của bạn bằng Xác thực Firebase.
Triển khai ứng dụng web của bạn trên Firebase Hosting.
Gửi thông báo với Firebase Cloud Messaging.
Thu thập dữ liệu hiệu suất của ứng dụng web của bạn.

Những gì bạn cần

IDE/trình soạn thảo văn bản do bạn chọn, chẳng hạn như WebStorm , Atom , Sublime hoặc VS Code
Trình quản lý gói npm thường đi kèm với Node.js
Một thiết bị đầu cuối/bảng điều khiển
Trình duyệt bạn chọn, chẳng hạn như Chrome
Mã mẫu của phòng thí nghiệm lập mã (Xem bước tiếp theo của phòng thí nghiệm lập mã để biết cách lấy mã.)

2. Lấy mã mẫu

Sao chép kho lưu trữ GitHub của phòng thí nghiệm mã từ dòng lệnh:

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

Ngoài ra, nếu bạn chưa cài đặt git, bạn có thể tải xuống kho lưu trữ dưới dạng tệp ZIP .

Nhập ứng dụng khởi động

Sử dụng IDE của bạn, mở hoặc nhập 📁 thư mục web-start từ kho lưu trữ nhân bản. 📁 thư mục web-start này chứa mã bắt đầu cho phòng thí nghiệm viết mã, đây sẽ là một ứng dụng web trò chuyện đầy đủ chức năng.

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Đăng nhập vào Firebase .
Trong bảng điều khiển Firebase, nhấp vào Thêm dự án rồi đặt tên cho dự án Firebase của bạn là FriendlyChat . Ghi nhớ ID dự án cho dự án Firebase của bạn.
Bỏ chọn Bật Google Analytics cho dự án này
Nhấp vào Tạo dự án .

Ứng dụng mà chúng tôi sẽ xây dựng sử dụng các sản phẩm Firebase có sẵn cho ứng dụng web:

Xác thực Firebase để dễ dàng cho phép người dùng đăng nhập vào ứng dụng của bạn.
Cloud Firestore để lưu dữ liệu có cấu trúc trên đám mây và nhận thông báo tức thì khi dữ liệu thay đổi.
Lưu trữ đám mây cho Firebase để lưu tệp trên đám mây.
Firebase Hosting để lưu trữ và phục vụ nội dung của bạn.
Firebase Cloud Messaging để gửi thông báo đẩy và hiển thị thông báo bật lên của trình duyệt.
Giám sát hiệu suất Firebase để thu thập dữ liệu hiệu suất của người dùng cho ứng dụng của bạn.

Một số sản phẩm này cần cấu hình đặc biệt hoặc cần được bật bằng bảng điều khiển Firebase.

Thêm ứng dụng web Firebase vào dự án

Nhấp vào biểu tượng web để tạo ứng dụng web Firebase mới.
Đăng ký ứng dụng với biệt hiệu Trò chuyện thân thiện , sau đó chọn hộp bên cạnh Đồng thời thiết lập Lưu trữ Firebase cho ứng dụng này . Nhấp vào Đăng ký ứng dụng .
Ở bước tiếp theo, bạn sẽ thấy một đối tượng cấu hình. Chỉ sao chép đối tượng JS (không phải HTML xung quanh) vào firebase-config.js

Đăng ký ảnh chụp màn hình ứng dụng web

Để cho phép người dùng đăng nhập vào ứng dụng web bằng tài khoản Google của họ, chúng tôi sẽ sử dụng phương thức đăng nhập bằng Google .

Bạn sẽ cần bật đăng nhập bằng Google :

Trong bảng điều khiển Firebase, tìm phần Bản dựng trong bảng điều khiển bên trái.
Nhấp vào Xác thực , sau đó nhấp vào tab Phương thức đăng nhập (hoặc nhấp vào đây để truy cập trực tiếp vào đó).
Bật nhà cung cấp dịch vụ đăng nhập Google , sau đó nhấp vào Lưu .
Đặt tên hiển thị công khai cho ứng dụng của bạn thành Trò chuyện thân thiện và chọn email hỗ trợ Dự án từ menu thả xuống.
Định cấu hình màn hình chấp thuận OAuth của bạn trong Google Cloud Console và thêm biểu trưng:

Kích hoạt Cloud Firestore

Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.

Bạn sẽ cần bật Cloud Firestore:

Trong phần Bản dựng của bảng điều khiển Firebase, nhấp vào Cơ sở dữ liệu Firestore .
Nhấp vào Tạo cơ sở dữ liệu trong khung Cloud Firestore.

Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm , sau đó nhấp vào Tiếp theo sau khi đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.

Chế độ kiểm tra đảm bảo rằng chúng tôi có thể tự do ghi vào cơ sở dữ liệu trong quá trình phát triển. Chúng ta sẽ làm cho cơ sở dữ liệu của mình an toàn hơn sau này trong phòng thí nghiệm lập trình này.

Đặt vị trí lưu trữ dữ liệu Cloud Firestore của bạn. Bạn có thể để mặc định hoặc chọn một khu vực gần bạn. Nhấp vào Xong để cung cấp Firestore.

Kích hoạt lưu trữ đám mây

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ ảnh.

Bạn sẽ cần bật Lưu trữ đám mây:

Trong phần Bản dựng của bảng điều khiển Firebase, nhấp vào Lưu trữ .
Nếu không có nút Bắt đầu , điều đó có nghĩa là Lưu trữ đám mây đã được bật và bạn không cần thực hiện theo các bước bên dưới.
Nhấp vào Bắt đầu .
Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật cho dự án Firebase của bạn, sau đó nhấp vào Tiếp theo .

Với các quy tắc bảo mật mặc định, bất kỳ người dùng được xác thực nào cũng có thể ghi bất kỳ thứ gì vào Cloud Storage. Chúng tôi sẽ làm cho bộ lưu trữ của chúng tôi an toàn hơn sau trong phòng thí nghiệm lập trình này.

Vị trí Lưu trữ đám mây được chọn trước với cùng khu vực bạn đã chọn cho cơ sở dữ liệu Cloud Firestore của mình. Nhấp vào Xong để hoàn tất thiết lập.

4. Cài đặt giao diện dòng lệnh Firebase

Giao diện dòng lệnh Firebase (CLI) cho phép bạn sử dụng Dịch vụ lưu trữ Firebase để phân phối ứng dụng web của bạn cục bộ, cũng như để triển khai ứng dụng web cho dự án Firebase của bạn.

Cài đặt CLI bằng cách chạy lệnh npm sau:

npm -g install firebase-tools

Xác minh rằng CLI đã được cài đặt đúng cách bằng cách chạy lệnh sau:

firebase --version

Đảm bảo rằng phiên bản Firebase CLI là v4.1.0 trở lên.

Cấp quyền cho Firebase CLI bằng cách chạy lệnh sau:

firebase login

Chúng tôi đã thiết lập mẫu ứng dụng web để lấy cấu hình ứng dụng của bạn cho Dịch vụ lưu trữ Firebase từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong phòng thí nghiệm mã). Nhưng để kéo cấu hình, chúng tôi cần liên kết ứng dụng của bạn với dự án Firebase.

Đảm bảo rằng dòng lệnh của bạn đang truy cập thư mục web-start cục bộ của ứng dụng.
Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:

firebase use --add

Khi được nhắc, hãy chọn ID dự án của bạn , sau đó đặt bí danh cho dự án Firebase của bạn.

Bí danh sẽ hữu ích nếu bạn có nhiều môi trường (sản xuất, dàn dựng, v.v.). Tuy nhiên, đối với codelab này, chúng ta hãy chỉ sử dụng bí danh là default .

Thực hiện theo các hướng dẫn còn lại trên dòng lệnh của bạn.

5. Chạy ứng dụng khởi động cục bộ

Bây giờ bạn đã nhập và định cấu hình dự án của mình, bạn đã sẵn sàng chạy ứng dụng web lần đầu tiên.

Trong bảng điều khiển từ thư mục web-start , hãy chạy lệnh Firebase CLI sau:

firebase serve --only hosting

Dòng lệnh của bạn sẽ hiển thị phản hồi sau:

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

Chúng tôi đang sử dụng trình giả lập Lưu trữ Firebase để phân phát ứng dụng của chúng tôi cục bộ. Ứng dụng web hiện có sẵn từ http://localhost:5000 . Tất cả các tệp nằm trong thư mục con public đều được phục vụ.

Sử dụng trình duyệt của bạn, mở ứng dụng của bạn tại http://localhost:5000 .

Bạn sẽ thấy giao diện người dùng của ứng dụng FriendlyChat chưa (chưa!) hoạt động:

Ứng dụng không thể làm bất cứ điều gì ngay bây giờ, nhưng với sự giúp đỡ của bạn, nó sẽ sớm thôi! Cho đến nay, chúng tôi chỉ trình bày giao diện người dùng cho bạn.

Bây giờ chúng ta hãy xây dựng một cuộc trò chuyện thời gian thực!

6. Nhập và định cấu hình Firebase

Nhập SDK Firebase

Chúng tôi cần nhập SDK Firebase vào ứng dụng. Có nhiều cách để làm điều này như được mô tả trong tài liệu của chúng tôi . Chẳng hạn, bạn có thể nhập thư viện từ CDN của chúng tôi. Hoặc bạn có thể cài đặt nó cục bộ bằng npm, sau đó đóng gói nó trong ứng dụng của bạn nếu bạn đang sử dụng Browserify.

Chúng tôi sẽ lấy SDK Firebase từ npm và sử dụng Webpack để đóng gói mã của chúng tôi. Chúng tôi đang làm điều này để Webpack có thể xóa mọi mã không cần thiết, giữ cho kích thước gói JS của chúng tôi ở mức nhỏ để đảm bảo ứng dụng của chúng tôi tải nhanh nhất có thể. Đối với phòng thí nghiệm mã này, chúng tôi đã tạo một tệp web-start/package.json bao gồm SDK Firebase dưới dạng phần phụ thuộc, cũng như đã nhập các chức năng cần thiết ở đầu web-start/src/index.js .

gói.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';

Trong buổi học mã này, chúng tôi sẽ sử dụng Xác thực Firebase, Cloud Firestore, Lưu trữ đám mây, Nhắn tin qua đám mây và Giám sát hiệu suất, vì vậy chúng tôi sẽ nhập tất cả các thư viện của họ. Trong các ứng dụng sau này của bạn, hãy đảm bảo rằng bạn chỉ nhập các phần của Firebase mà bạn cần để rút ngắn thời gian tải của ứng dụng.

Cài đặt SDK Firebase và bắt đầu xây dựng Webpack của bạn

Chúng tôi cần chạy một vài lệnh để quá trình xây dựng ứng dụng của chúng tôi diễn ra.

Mở một cửa sổ đầu cuối mới
Để thiết bị đầu cuối chạy firebase serve mở. Đó vẫn là những gì chúng tôi sẽ sử dụng để lưu trữ ứng dụng cục bộ
Đảm bảo rằng bạn đang ở trong thư mục web-start
Chạy npm install để tải xuống SDK Firebase
Chạy npm run start để khởi động Webpack. Giờ đây, Webpack sẽ liên tục xây dựng lại mã nguồn của chúng tôi cho phần còn lại của phòng thí nghiệm mã.

Định cấu hình căn cứ hỏa lực

Chúng tôi cũng cần định cấu hình SDK Firebase để cho nó biết chúng tôi đang sử dụng dự án Firebase nào.

Chuyển đến cài đặt Dự án của bạn trong bảng điều khiển Firebase
Trong thẻ "Ứng dụng của bạn", hãy chọn biệt hiệu của ứng dụng mà bạn cần đối tượng cấu hình.
Chọn "Cấu hình" từ ngăn đoạn mã SDK Firebase.
Sao chép đoạn mã đối tượng cấu hình, sau đó thêm đoạn mã đó vào 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",
};

Bây giờ, hãy đi đến cuối web-start/src/index.js và khởi tạo Firebase:

index.js

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

7. Thiết lập đăng nhập người dùng

SDK Firebase hiện đã sẵn sàng để sử dụng vì nó được nhập và khởi chạy trong index.js . Bây giờ chúng tôi sẽ triển khai đăng nhập người dùng bằng Xác thực Firebase .

Trong ứng dụng, khi người dùng nhấp vào nút Đăng nhập bằng Google , chức năng signIn sẽ được kích hoạt. (Chúng tôi đã thiết lập tính năng đó cho bạn!) Đối với phòng thí nghiệm lập trình này, chúng tôi muốn ủy quyền cho Firebase sử dụng Google làm nhà cung cấp danh tính. Chúng tôi sẽ sử dụng cửa sổ bật lên, nhưng một số phương pháp khác có sẵn từ Firebase.

Trong thư mục web-start , trong thư mục con src/ , hãy mở index.js .
Tìm chức năng signIn .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Chức năng signOut được kích hoạt khi người dùng nhấp vào nút Đăng xuất .

Quay lại tệp src/index.js .
Tìm chức năng signOutUser .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

index.js

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

Theo dõi trạng thái xác thực

Để cập nhật giao diện người dùng của chúng tôi cho phù hợp, chúng tôi cần một cách để kiểm tra xem người dùng đã đăng nhập hay đăng xuất. Với Xác thực Firebase, bạn có thể đăng ký một người quan sát về trạng thái xác thực sẽ được kích hoạt mỗi khi trạng thái xác thực thay đổi.

Quay lại tệp src/index.js .
Tìm hàm initFirebaseAuth .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

index.js

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

Đoạn mã trên đăng ký hàm authStateObserver làm trình quan sát trạng thái xác thực. Nó sẽ kích hoạt mỗi khi trạng thái xác thực thay đổi (khi người dùng đăng nhập hoặc đăng xuất). Tại thời điểm này, chúng tôi sẽ cập nhật giao diện người dùng để hiển thị hoặc ẩn nút đăng nhập, nút đăng xuất, ảnh hồ sơ của người dùng đã đăng nhập, v.v. Tất cả các phần giao diện người dùng này đã được triển khai.

Hiển thị thông tin của người dùng đã đăng nhập

Chúng tôi muốn hiển thị ảnh hồ sơ và tên người dùng của người dùng đã đăng nhập ở thanh trên cùng của ứng dụng của chúng tôi. Trong Firebase, dữ liệu của người dùng đã đăng nhập luôn có sẵn trong đối tượng currentUser . Trước đó, chúng tôi đã thiết lập chức năng authStateObserver để kích hoạt khi người dùng đăng nhập để giao diện người dùng của chúng tôi cập nhật tương ứng. Nó sẽ gọi getProfilePicUrl và getUserName khi được kích hoạt.

Quay lại tệp src/index.js .
Tìm các hàm getProfilePicUrl và getUserName .
Thay thế cả hai chức năng bằng đoạn mã sau.

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

Chúng tôi hiển thị thông báo lỗi nếu người dùng cố gắng gửi thư khi người dùng chưa đăng nhập. (Tuy nhiên, bạn có thể thử!) Vì vậy, chúng tôi cần phát hiện xem người dùng có thực sự đăng nhập hay không.

Quay lại tệp src/index.js .
Tìm hàm isUserSignedIn .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

index.js

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

Kiểm tra đăng nhập vào ứng dụng

Nếu ứng dụng của bạn vẫn đang được phân phát, hãy làm mới ứng dụng của bạn trong trình duyệt. Nếu không, hãy chạy firebase serve --only hosting trên dòng lệnh để bắt đầu phân phát ứng dụng từ http://localhost:5000 , sau đó mở ứng dụng đó trong trình duyệt của bạn.
Đăng nhập vào ứng dụng bằng nút đăng nhập và tài khoản Google của bạn. Nếu bạn thấy thông báo lỗi cho biết auth/operation-not-allowed , hãy kiểm tra để đảm bảo rằng bạn đã bật Đăng nhập bằng Google với tư cách là nhà cung cấp dịch vụ xác thực trong bảng điều khiển Firebase.
Sau khi đăng nhập, ảnh hồ sơ và tên người dùng của bạn sẽ được hiển thị:

8. Viết tin nhắn lên Cloud Firestore

Trong phần này, chúng tôi sẽ ghi một số dữ liệu vào Cloud Firestore để chúng tôi có thể đưa vào giao diện người dùng của ứng dụng. Điều này có thể được thực hiện thủ công với bảng điều khiển Firebase nhưng chúng tôi sẽ thực hiện việc này trong chính ứng dụng để minh họa cách ghi Cloud Firestore cơ bản.

Mô hình dữ liệu

Dữ liệu Cloud Firestore được chia thành các bộ sưu tập, tài liệu, trường và bộ sưu tập con. Chúng tôi sẽ lưu trữ từng tin nhắn của cuộc trò chuyện dưới dạng tài liệu trong bộ sưu tập cấp cao nhất có tên là messages .

Thêm tin nhắn vào Cloud Firestore

Để lưu trữ các tin nhắn trò chuyện do người dùng viết, chúng tôi sẽ sử dụng Cloud Firestore .

Trong phần này, bạn sẽ thêm chức năng để người dùng viết thư mới vào cơ sở dữ liệu của bạn. Người dùng nhấp vào nút GỬI sẽ kích hoạt đoạn mã bên dưới. Nó thêm một đối tượng thông báo có nội dung của các trường thông báo vào phiên bản Cloud Firestore của bạn trong bộ sưu tập messages . Phương thức add() thêm tài liệu mới có ID được tạo tự động vào bộ sưu tập.

Quay lại tệp src/index.js .
Tìm hàm saveMessage .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Thử gửi tin nhắn

Nếu ứng dụng của bạn vẫn đang được phân phát, hãy làm mới ứng dụng của bạn trong trình duyệt. Nếu không, hãy chạy firebase serve --only hosting trên dòng lệnh để bắt đầu phân phát ứng dụng từ http://localhost:5000 , sau đó mở ứng dụng đó trong trình duyệt của bạn.
Sau khi đăng nhập, hãy nhập một tin nhắn chẳng hạn như "Xin chào!", rồi nhấp vào GỬI . Thao tác này sẽ ghi thông báo vào Cloud Firestore. Tuy nhiên, bạn sẽ chưa thấy dữ liệu trong ứng dụng web thực tế của mình vì chúng tôi vẫn cần triển khai truy xuất dữ liệu (phần tiếp theo của phòng thí nghiệm lập trình).
Bạn có thể thấy thông báo mới được thêm vào trong Bảng điều khiển Firebase của mình. Mở Bảng điều khiển Firebase của bạn. Trong phần Xây dựng , nhấp vào Cơ sở dữ liệu Firestore (hoặc nhấp vào đây và chọn dự án của bạn) và bạn sẽ thấy bộ sưu tập thư với thông báo mới được thêm vào của mình:

9. Đọc tin nhắn

đồng bộ hóa tin nhắn

Để đọc tin nhắn trong ứng dụng, chúng ta cần thêm trình nghe kích hoạt khi dữ liệu thay đổi, sau đó tạo phần tử giao diện người dùng hiển thị tin nhắn mới.

Chúng tôi sẽ thêm mã lắng nghe các tin nhắn mới được thêm vào từ ứng dụng. Trong mã này, chúng tôi sẽ đăng ký trình nghe lắng nghe những thay đổi được thực hiện đối với dữ liệu. Chúng tôi sẽ chỉ hiển thị 12 tin nhắn cuối cùng của cuộc trò chuyện để tránh hiển thị lịch sử rất dài khi tải.

Quay lại tệp src/index.js .
Tìm hàm loadMessages .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Để nghe các thông báo trong cơ sở dữ liệu, chúng tôi tạo một truy vấn trên một bộ sưu tập bằng cách sử dụng chức năng collection để chỉ định bộ sưu tập mà dữ liệu mà chúng tôi muốn nghe nằm trong đoạn mã trên, chúng tôi đang lắng nghe những thay đổi trong messages bộ sưu tập, là nơi lưu trữ các tin nhắn trò chuyện. Chúng tôi cũng đang áp dụng giới hạn bằng cách chỉ nghe 12 tin nhắn gần đây nhất bằng cách sử dụng .limit(12) và sắp xếp các tin nhắn theo ngày bằng cách sử dụng orderBy('timestamp', 'desc') để nhận 12 tin nhắn mới nhất.

Hàm onSnapshot lấy truy vấn làm tham số đầu tiên và hàm gọi lại làm tham số thứ hai. Chức năng gọi lại sẽ được kích hoạt khi có bất kỳ thay đổi nào đối với tài liệu phù hợp với truy vấn. Điều này có thể xảy ra nếu một tin nhắn bị xóa, sửa đổi hoặc thêm vào. Bạn có thể đọc thêm về điều này trong tài liệu về Cloud Firestore .

Kiểm tra đồng bộ hóa tin nhắn

Nếu ứng dụng của bạn vẫn đang được phân phát, hãy làm mới ứng dụng của bạn trong trình duyệt. Nếu không, hãy chạy firebase serve --only hosting trên dòng lệnh để bắt đầu phân phát ứng dụng từ http://localhost:5000 , sau đó mở ứng dụng đó trong trình duyệt của bạn.
Các tin nhắn mà bạn đã tạo trước đó trong cơ sở dữ liệu sẽ được hiển thị trong giao diện người dùng FriendlyChat (xem bên dưới). Hãy viết tin nhắn mới; chúng sẽ xuất hiện ngay lập tức.
(Tùy chọn) Bạn có thể thử xóa, sửa đổi hoặc thêm thông báo mới theo cách thủ công trực tiếp trong phần Cơ sở dữ liệu của bảng điều khiển Firebase; mọi thay đổi sẽ được phản ánh trong giao diện người dùng.

Chúc mừng! Bạn đang đọc tài liệu Cloud Firestore trong ứng dụng của mình!

10. Gửi hình ảnh

Bây giờ chúng ta sẽ thêm một tính năng chia sẻ hình ảnh.

Mặc dù Cloud Firestore phù hợp để lưu trữ dữ liệu có cấu trúc, nhưng Cloud Storage phù hợp hơn để lưu trữ tệp. Lưu trữ đám mây cho Firebase là dịch vụ lưu trữ tệp/blob và chúng tôi sẽ sử dụng dịch vụ này để lưu trữ bất kỳ hình ảnh nào mà người dùng chia sẻ bằng ứng dụng của chúng tôi.

Lưu hình ảnh vào Cloud Storage

Đối với phòng thí nghiệm lập trình này, chúng tôi đã thêm cho bạn một nút kích hoạt hộp thoại chọn tệp. Sau khi chọn một tệp, hàm saveImageMessage được gọi và bạn có thể lấy tham chiếu đến tệp đã chọn. Hàm saveImageMessage thực hiện những điều sau:

Tạo một tin nhắn trò chuyện "giữ chỗ" trong nguồn cấp dữ liệu trò chuyện để người dùng nhìn thấy hoạt ảnh "Đang tải" trong khi chúng tôi tải hình ảnh lên.
Tải tệp hình ảnh lên Cloud Storage theo đường dẫn sau: /<uid>/<messageId>/<file_name>
Tạo một URL có thể đọc công khai cho tệp hình ảnh.
Cập nhật tin nhắn trò chuyện bằng URL của tệp hình ảnh mới tải lên thay cho hình ảnh đang tải tạm thời.

Bây giờ bạn sẽ thêm chức năng gửi ảnh:

Quay lại tệp src/index.js .
Tìm hàm saveImageMessage .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Kiểm tra gửi hình ảnh

Nếu ứng dụng của bạn vẫn đang được phân phát, hãy làm mới ứng dụng của bạn trong trình duyệt. Nếu không, hãy chạy firebase serve --only hosting trên dòng lệnh để bắt đầu phân phát ứng dụng từ http://localhost:5000 , sau đó mở ứng dụng đó trong trình duyệt của bạn.
Sau khi đăng nhập, nhấp vào nút tải lên hình ảnh và chọn một tệp hình ảnh bằng bộ chọn tệp. Nếu bạn đang tìm kiếm một hình ảnh, vui lòng sử dụng hình ảnh đẹp này về tách cà phê .
Một thông báo mới sẽ xuất hiện trong giao diện người dùng của ứng dụng với hình ảnh bạn đã chọn:

Nếu thử thêm hình ảnh khi chưa đăng nhập, bạn sẽ thấy thông báo Toast cho bạn biết rằng bạn phải đăng nhập để thêm hình ảnh.

11. Hiển thị thông báo

Bây giờ chúng tôi sẽ thêm hỗ trợ cho các thông báo của trình duyệt. Ứng dụng sẽ thông báo cho người dùng khi có tin nhắn mới trong cuộc trò chuyện. Nhắn tin qua đám mây Firebase (FCM) là một giải pháp nhắn tin đa nền tảng cho phép bạn gửi tin nhắn và thông báo một cách đáng tin cậy mà không mất phí.

Thêm nhân viên dịch vụ FCM

Ứng dụng web cần một nhân viên dịch vụ sẽ nhận và hiển thị thông báo web.

Từ thư mục web-start , trong thư mục src , mở firebase-messaging-sw.js .
Thêm nội dung sau vào tập tin đó.

firebase-nhắn tin-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');

Nhân viên dịch vụ chỉ cần tải và khởi chạy SDK nhắn tin qua đám mây Firebase, SDK này sẽ đảm nhiệm việc hiển thị thông báo.

Nhận mã thông báo thiết bị FCM

Khi thông báo đã được bật trên thiết bị hoặc trình duyệt, bạn sẽ nhận được mã thông báo thiết bị . Mã thông báo thiết bị này là những gì chúng tôi sử dụng để gửi thông báo đến một thiết bị cụ thể hoặc trình duyệt cụ thể.

Khi người dùng đăng nhập, chúng tôi gọi hàm saveMessagingDeviceToken . Đó là nơi chúng tôi sẽ lấy mã thông báo thiết bị FCM từ trình duyệt và lưu nó vào Cloud Firestore.

Quay lại tệp src/index.js .
Tìm hàm saveMessagingDeviceToken .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Tuy nhiên, mã này ban đầu sẽ không hoạt động. Để ứng dụng của bạn có thể truy xuất mã thông báo thiết bị, người dùng cần cấp cho ứng dụng của bạn quyền hiển thị thông báo (bước tiếp theo của lớp học lập trình).

Yêu cầu quyền để hiển thị thông báo

Khi người dùng chưa cấp cho ứng dụng của bạn quyền hiển thị thông báo, bạn sẽ không được cấp mã thông báo thiết bị. Trong trường hợp này, chúng tôi gọi phương thức firebase.messaging().requestPermission() , phương thức này sẽ hiển thị hộp thoại trình duyệt yêu cầu quyền này ( trong các trình duyệt được hỗ trợ ).

Quay lại tệp src/index.js .
Tìm hàm requestNotificationsPermissions .
Thay thế toàn bộ chức năng bằng đoạn mã sau.

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

Nhận mã thông báo thiết bị của bạn

Nếu ứng dụng của bạn vẫn đang được phân phát, hãy làm mới ứng dụng của bạn trong trình duyệt. Nếu không, hãy chạy firebase serve --only hosting trên dòng lệnh để bắt đầu phân phát ứng dụng từ http://localhost:5000 , sau đó mở ứng dụng đó trong trình duyệt của bạn.
Sau khi đăng nhập, hộp thoại cấp phép thông báo sẽ xuất hiện:
Nhấp vào Cho phép .
Mở bảng điều khiển JavaScript của trình duyệt của bạn. Bạn sẽ thấy thông báo sau: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Sao chép mã thông báo thiết bị của bạn. Bạn sẽ cần nó cho giai đoạn tiếp theo của codelab.

Gửi thông báo đến thiết bị của bạn

Bây giờ bạn đã có mã thông báo thiết bị của mình, bạn có thể gửi thông báo.

Mở tab Nhắn tin qua đám mây của bảng điều khiển Firebase .
Nhấp vào "Thông báo mới"
Nhập tiêu đề thông báo và văn bản thông báo.
Ở bên phải màn hình, nhấp vào "gửi tin nhắn kiểm tra"
Nhập mã thông báo thiết bị mà bạn đã sao chép từ bảng điều khiển JavaScript của trình duyệt, sau đó nhấp vào dấu cộng ("+")
Nhấp vào "kiểm tra"

Nếu ứng dụng của bạn ở nền trước, bạn sẽ thấy thông báo trong bảng điều khiển JavaScript.

Nếu ứng dụng của bạn ở chế độ nền, một thông báo sẽ xuất hiện trong trình duyệt của bạn, như trong ví dụ sau:

12. Quy tắc bảo mật của Cloud Firestore

Xem quy tắc bảo mật cơ sở dữ liệu

Cloud Firestore sử dụng ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, bảo mật và xác thực dữ liệu.

Khi thiết lập dự án Firebase ở phần đầu của phòng thí nghiệm lập trình này, chúng tôi đã chọn sử dụng quy tắc bảo mật mặc định "Chế độ thử nghiệm" để chúng tôi không hạn chế quyền truy cập vào kho dữ liệu. Trong bảng điều khiển Firebase , trong tab Quy tắc của phần Cơ sở dữ liệu , bạn có thể xem và sửa đổi các quy tắc này.

Ngay bây giờ, bạn sẽ thấy các quy tắc mặc định không hạn chế quyền truy cập vào kho dữ liệu. Điều này có nghĩa là bất kỳ người dùng nào cũng có thể đọc và ghi vào bất kỳ bộ sưu tập nào trong kho dữ liệu của bạn.

rules_version = '2';

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

Chúng tôi sẽ cập nhật các quy tắc để hạn chế mọi thứ bằng cách sử dụng các quy tắc sau:

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

Cập nhật quy tắc bảo mật cơ sở dữ liệu

Có hai cách để chỉnh sửa quy tắc bảo mật cơ sở dữ liệu của bạn, trong bảng điều khiển Firebase hoặc từ tệp quy tắc cục bộ được triển khai bằng Firebase CLI.

Để cập nhật quy tắc bảo mật trong bảng điều khiển Firebase:

Chuyển đến phần Cơ sở dữ liệu từ bảng điều khiển bên trái, sau đó nhấp vào tab Quy tắc .
Thay thế các quy tắc mặc định đã có trong bảng điều khiển bằng các quy tắc hiển thị ở trên.
Nhấp vào Xuất bản .

Để cập nhật quy tắc bảo mật từ tệp cục bộ:

Từ thư mục web-start , mở firestore.rules .
Thay thế các quy tắc mặc định đã có trong tệp bằng các quy tắc hiển thị ở trên.
Từ thư mục web-start , mở firebase.json .
Thêm thuộc tính firestore.rules trỏ đến firestore.rules , như hình bên dưới. (Thuộc tính hosting phải có sẵn trong tệp.)

firebase.json

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

Triển khai các quy tắc bảo mật bằng Firebase CLI bằng cách chạy lệnh sau:

firebase deploy --only firestore

Dòng lệnh của bạn sẽ hiển thị phản hồi sau:

=== 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. Quy tắc bảo mật Lưu trữ đám mây

Xem các quy tắc bảo mật của Cloud Storage

Lưu trữ đám mây cho Firebase sử dụng ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, bảo mật và xác thực dữ liệu.

Khi thiết lập dự án Firebase ở phần đầu của lớp học lập trình này, chúng tôi đã chọn sử dụng quy tắc bảo mật Cloud Storage mặc định chỉ cho phép người dùng được xác thực sử dụng Cloud Storage. Trong bảng điều khiển Firebase , trong tab Quy tắc của phần Lưu trữ , bạn có thể xem và sửa đổi các quy tắc. Bạn sẽ thấy quy tắc mặc định cho phép mọi người dùng đã đăng nhập đọc và ghi bất kỳ tệp nào trong bộ chứa lưu trữ của bạn.

rules_version = '2';

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

Chúng tôi sẽ cập nhật các quy tắc để thực hiện những điều sau:

Cho phép mỗi người dùng chỉ ghi vào các thư mục cụ thể của riêng họ
Cho phép mọi người đọc từ Cloud Storage
Đảm bảo rằng các tệp được tải lên là hình ảnh
Hạn chế kích thước của hình ảnh có thể tải lên tối đa là 5 MB

Điều này có thể được thực hiện bằng cách sử dụng các quy tắc sau:

lưu trữ.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;
    }
  }
}

Cập nhật quy tắc bảo mật Cloud Storage

Có hai cách để chỉnh sửa quy tắc bảo mật bộ nhớ của bạn: trong bảng điều khiển Firebase hoặc từ tệp quy tắc cục bộ được triển khai bằng Firebase CLI.

Để cập nhật quy tắc bảo mật trong bảng điều khiển Firebase:

Chuyển đến phần Lưu trữ từ bảng điều khiển bên trái, sau đó nhấp vào tab Quy tắc .
Thay thế quy tắc mặc định đã có trong bảng điều khiển bằng các quy tắc hiển thị ở trên.
Nhấp vào Xuất bản .

Để cập nhật quy tắc bảo mật từ tệp cục bộ:

Từ thư mục web-start , mở storage.rules .
Thay thế các quy tắc mặc định đã có trong tệp bằng các quy tắc hiển thị ở trên.
Từ thư mục web-start , mở firebase.json .
Thêm thuộc tính storage.rules trỏ đến tệp storage.rules , như hình bên dưới. (Thuộc hosting và database phải có sẵn trong tệp.)

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

Triển khai các quy tắc bảo mật bằng Firebase CLI bằng cách chạy lệnh sau:

firebase deploy --only storage

Dòng lệnh của bạn sẽ hiển thị phản hồi sau:

=== 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. Thu thập dữ liệu hiệu suất

Bạn có thể sử dụng SDK giám sát hiệu suất để thu thập dữ liệu hiệu suất trong thế giới thực từ ứng dụng của mình, sau đó xem xét và phân tích dữ liệu đó trong bảng điều khiển Firebase. Giám sát hiệu suất giúp bạn biết hiệu suất của ứng dụng có thể được cải thiện ở đâu và khi nào để bạn có thể sử dụng thông tin đó để khắc phục các vấn đề về hiệu suất.

Có nhiều cách khác nhau để tích hợp với SDK JavaScript theo dõi hiệu suất Firebase. Trong phòng thí nghiệm mã này, chúng tôi đã bật Giám sát hiệu suất từ URL lưu trữ . Tham khảo tài liệu để xem các phương pháp kích hoạt SDK khác.

dấu vết tự động

Vì chúng tôi đã nhập getPerformance ở đầu web-start/src/index.js , nên chúng tôi chỉ cần thêm một dòng để thông báo cho Giám sát hiệu suất tự động thu thập số liệu tải trang và yêu cầu mạng cho bạn khi người dùng truy cập trang web đã triển khai của bạn!

Trong web-start/src/index.js , hãy thêm dòng sau bên dưới TODO hiện có để khởi chạy Giám sát hiệu suất.

index.js

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

Đo độ trễ đầu vào đầu tiên (tùy chọn)

Độ trễ đầu vào đầu tiên rất hữu ích vì trình duyệt phản hồi tương tác của người dùng mang lại cho người dùng của bạn ấn tượng đầu tiên về khả năng phản hồi của ứng dụng của bạn.

Độ trễ đầu vào đầu tiên bắt đầu khi người dùng tương tác lần đầu với một phần tử trên trang, chẳng hạn như nhấp vào nút hoặc siêu liên kết. Nó dừng ngay sau khi trình duyệt có thể phản hồi đầu vào, nghĩa là trình duyệt không bận tải hoặc phân tích nội dung trang của bạn.

Nếu bạn muốn đo độ trễ đầu vào đầu tiên, bạn cần phải bao gồm trực tiếp mã sau đây.

Mở public/index.html .
Bỏ ghi chú thẻ script trên dòng sau.

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>

Để đọc thêm về polyfill độ trễ đầu vào đầu tiên, hãy xem tài liệu .

Xem dữ liệu hiệu suất

Vì bạn chưa triển khai trang web của mình (bạn sẽ triển khai trang web đó trong bước tiếp theo), đây là ảnh chụp màn hình hiển thị các số liệu về hiệu suất tải trang mà bạn sẽ thấy trong bảng điều khiển Firebase trong vòng 30 phút sau khi người dùng tương tác với trang web đã triển khai của bạn :

Khi bạn tích hợp SDK giám sát hiệu suất vào ứng dụng của mình, bạn không cần phải viết bất kỳ mã nào khác trước khi ứng dụng của bạn bắt đầu tự động giám sát một số khía cạnh quan trọng của hiệu suất. Đối với các ứng dụng web, SDK ghi nhật ký các khía cạnh như nội dung vẽ đầu tiên, khả năng người dùng tương tác với ứng dụng của bạn, v.v.

Bạn cũng có thể thiết lập dấu vết, chỉ số và thuộc tính tùy chỉnh để đo lường các khía cạnh cụ thể của ứng dụng. Truy cập tài liệu để tìm hiểu thêm về dấu vết và chỉ số tùy chỉnh cũng như thuộc tính tùy chỉnh .

15. Triển khai ứng dụng của bạn bằng Firebase Hosting

Firebase cung cấp dịch vụ lưu trữ để phục vụ nội dung và ứng dụng web của bạn. Bạn có thể triển khai các tệp của mình lên Dịch vụ lưu trữ Firebase bằng Firebase CLI. Trước khi triển khai, bạn cần chỉ định trong tệp firebase.json tệp cục bộ nào sẽ được triển khai. Đối với phòng thí nghiệm mã này, chúng tôi đã thực hiện việc này cho bạn vì bước này là bắt buộc để phân phối các tệp của chúng tôi trong phòng thí nghiệm mã này. Cài đặt lưu trữ được chỉ định trong thuộc tính 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"
  }
}

Các cài đặt này cho CLI biết rằng chúng tôi muốn triển khai tất cả các tệp trong thư mục ./public ( "public": "./public" ).

Đảm bảo rằng dòng lệnh của bạn đang truy cập thư mục web-start cục bộ của ứng dụng.
Triển khai các tệp của bạn vào dự án Firebase bằng cách chạy lệnh sau:

firebase deploy --except functions

Bảng điều khiển sẽ hiển thị như sau:

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

Truy cập ứng dụng web của bạn hiện được lưu trữ đầy đủ trên CDN toàn cầu bằng Lưu trữ Firebase tại hai trong số các miền phụ Firebase của riêng bạn:

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

Ngoài ra, bạn có thể chạy firebase open hosting:site trong dòng lệnh.

Truy cập tài liệu để tìm hiểu thêm về cách thức hoạt động của Firebase Hosting .

Chuyển đến phần Lưu trữ bảng điều khiển Firebase của dự án để xem thông tin và công cụ lưu trữ hữu ích, bao gồm lịch sử triển khai của bạn, chức năng quay lại các phiên bản trước của ứng dụng và quy trình thiết lập miền tùy chỉnh.

16. Xin chúc mừng!

Bạn đã sử dụng Firebase để xây dựng ứng dụng web trò chuyện thời gian thực!

Những gì chúng tôi đã bảo hiểm

Xác thực căn cứ hỏa lực
Cửa hàng lửa trên đám mây
SDK Firebase cho Lưu trữ đám mây
Nhắn tin qua đám mây Firebase
Giám sát hiệu suất Firebase
Lưu trữ căn cứ hỏa lực

Bước tiếp theo

Learn more

firebase.google.com

Bảng mã web Firebase

1. Khái quát chung

Bạn sẽ học được gì

Những gì bạn cần

2. Lấy mã mẫu

Nhập ứng dụng khởi động

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Thêm ứng dụng web Firebase vào dự án

Bật đăng nhập Google cho Xác thực Firebase

Kích hoạt Cloud Firestore

Kích hoạt lưu trữ đám mây

4. Cài đặt giao diện dòng lệnh Firebase

5. Chạy ứng dụng khởi động cục bộ

6. Nhập và định cấu hình Firebase

Nhập SDK Firebase

Cài đặt SDK Firebase và bắt đầu xây dựng Webpack của bạn

Định cấu hình căn cứ hỏa lực

7. Thiết lập đăng nhập người dùng

Xác thực người dùng của bạn bằng Đăng nhập bằng Google

Theo dõi trạng thái xác thực

Hiển thị thông tin của người dùng đã đăng nhập

Kiểm tra đăng nhập vào ứng dụng

8. Viết tin nhắn lên Cloud Firestore

Mô hình dữ liệu

Thêm tin nhắn vào Cloud Firestore

Thử gửi tin nhắn

9. Đọc tin nhắn

đồng bộ hóa tin nhắn

Kiểm tra đồng bộ hóa tin nhắn

10. Gửi hình ảnh

Lưu hình ảnh vào Cloud Storage

Kiểm tra gửi hình ảnh

11. Hiển thị thông báo

Thêm nhân viên dịch vụ FCM

Nhận mã thông báo thiết bị FCM

Yêu cầu quyền để hiển thị thông báo

Nhận mã thông báo thiết bị của bạn

Gửi thông báo đến thiết bị của bạn

12. Quy tắc bảo mật của Cloud Firestore

Xem quy tắc bảo mật cơ sở dữ liệu

Cập nhật quy tắc bảo mật cơ sở dữ liệu

13. Quy tắc bảo mật Lưu trữ đám mây

Xem các quy tắc bảo mật của Cloud Storage

Cập nhật quy tắc bảo mật Cloud Storage

14. Thu thập dữ liệu hiệu suất

dấu vết tự động

Đo độ trễ đầu vào đầu tiên (tùy chọn)

Xem dữ liệu hiệu suất

15. Triển khai ứng dụng của bạn bằng Firebase Hosting

16. Xin chúc mừng!

Những gì chúng tôi đã bảo hiểm

Bước tiếp theo

Learn more