Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.

Bảng mã web Firebase

Trong codelab này, bạn sẽ học cách sử dụng căn cứ hỏa lực để dễ dàng tạo ra các ứng dụng web bằng cách thực hiện và triển khai một ứng dụng trò chuyện sử dụng sản phẩm và dịch vụ căn cứ hỏa lực.

3b1284f5144b54f6.png

Những gì bạn sẽ học

  • Đồ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 Lưu trữ Firebase.
  • Gửi thông báo bằng Nhắn tin qua đám mây của Firebase.
  • 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 / soạn thảo văn bản mà bạn lựa chọn, chẳng hạn như WebStorm , Atom , Sublime , hoặc VS Mã
  • Người quản lý gói NPM , mà 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 codelab (Xem bước tiếp theo của codelab để biết cách lấy mã.)

Clone của codelab kho GitHub từ dòng lệnh:

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

Ngoài ra, nếu bạn không có cài đặt git, bạn có thể tải về các kho lưu trữ dưới dạng file ZIP .

Nhập ứng dụng dành cho người mới bắt đầu

Sử dụng IDE của bạn, mở hoặc nhập 📁 web-start thư mục từ kho nhân bản. 📁 này web-start thư mục chứa mã bắt đầu cho codelab, đó sẽ là một ứng dụng web chat đầy đủ chức năng.

Tạo dự án Firebase

  1. Đăng nhập để căn cứ hỏa lực .
  2. Trong căn cứ hỏa lực điều khiển, nhấp vào Thêm dự án, và sau đó đặt tên FriendlyChat dự án căn cứ hỏa lực của bạn. Hãy nhớ ID dự án cho dự án Firebase của bạn.
  3. Bỏ chọn Enable Google Analytics cho dự án này
  4. 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 các ứng dụng web:

  • Căn cứ hỏa lực xác thực để dễ dàng cho phép người dùng đăng nhập vào ứng dụng của bạn.
  • Đám mây FireStore để lưu dữ liệu cấu trúc trên đám mây và nhận được thông báo ngay lập tức khi dữ liệu thay đổi.
  • Cloud Storage cho căn cứ hỏa lực để lưu các tập tin trong đám mây.
  • Căn cứ hỏa lực Hosting để lưu trữ và phục vụ tài sản của bạn.
  • Căn cứ hỏa lực Cloud Messaging gửi thông báo đẩy và thông báo cửa sổ bật lên trình duyệt hiển thị.
  • Căn cứ hỏa lực Hiệu suất giám sát để thu thập dữ liệu hiệu suất người dùng cho ứng dụng của bạn.

Một số sản phẩm trong số này cần có 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

  1. Nhấp vào biểu tượng web 58d6543a156e56f9.png để tạo ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng với nickname thân thiện trò chuyện, sau đó đánh dấu vào ô bên cạnh Ngoài ra thiết lập căn cứ hỏa lực Hosting cho ứng dụng này. Bấm vào Đăng ký ứng dụng.
  3. Ở bước tiếp theo, bạn sẽ thấy một đối tượng cấu hình. Sao chép chỉ là đối tượng JS (không phải là xung quanh HTML) vào căn cứ hỏa lực-config.js

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

Kích hoạt tính năng Google đăng nhập cho căn cứ hỏa lực xác thực

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

Bạn sẽ cần phải kích hoạt Google đăng nhập:

  1. Trong căn cứ hỏa lực điều khiển, xác định vị trí phần xây dựng trong bảng điều khiển bên trái.
  2. Nhấn Xác thực, sau đó nhấp vào Sign-in tab phương pháp (hoặc bấm vào đây để đi trực tiếp ở đó).
  3. Kích hoạt tính năng đăng nhập Google cung cấp dịch vụ, sau đó nhấn Save.
  4. Đặt tên công phải đối mặt với các ứng dụng của bạn để thân thiện trò chuyện và chọn một email hỗ trợ dự án từ menu thả xuống.
  5. Cấu hình màn hình có sự đồng ý OAuth của bạn trong Google Cloud Bảng điều khiển và thêm một biểu tượng:

d89fb3873b5d36ae.png

Bật Cloud Firestore

Các ứng dụng web sử dụng đám mây FireStore để lưu tin nhắn chat và nhận tin nhắn trò chuyện mới.

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

  1. Trong phần xây dựng các căn cứ hỏa lực console của, nhấp vào Cơ sở dữ liệu FireStore.
  2. Nhấp vào Tạo cơ sở dữ liệu trong cửa sổ Mây FireStore.

729991a081e7cd5.png

  1. Chọn Start trong tùy chọn chế độ kiểm tra, sau đó nhấn Next sau khi đọc từ chối trách nhiệm về các quy tắc an ninh.

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

Bậ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:

  1. Trong phần xây dựng các căn cứ hỏa lực console của, nhấp vào lưu trữ.
  2. Nếu không có nút Get Started, nó có nghĩa là bộ nhớ đám mây đã được kích hoạt, và bạn không cần phải làm theo các bước dưới đây.
  3. Bấm Bắt đầu.
  4. Đọc từ chối trách nhiệm về quy tắc an ninh cho dự án căn cứ hỏa lực của bạn, sau đó nhấn Next.

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ộ nhớ của mình an toàn hơn sau này trong bảng mã này.

62f1afdcd1260127.png

  1. Vị trí Cloud Storage đượ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ấn Done để hoàn thành việc cài đặt.

1d7f49ebaddb32fc.png

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

  1. Cài đặt CLI bằng cách chạy lệnh npm sau:
npm -g install firebase-tools
  1. 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 của Firebase CLI là v4.1.0 trở lên.

  1. 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 để kéo cấu hình ứng dụng của bạn cho 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 bảng 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 của bạn.

  1. Hãy chắc chắn rằng dòng lệnh của bạn được truy cập vào địa phương của ứng dụng của bạn web-start thư mục.
  2. 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
  1. Khi được nhắc, chọn ID dự án của bạn, sau đó cung cấp cho dự án căn cứ hỏa lực của bạn một bí danh.

Bí danh rất 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 codelab này, chúng ta hãy chỉ sử dụng bí danh của default .

  1. Làm theo các hướng dẫn còn lại trên dòng lệnh của bạn.

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.

  1. Trong một giao diện điều khiển từ web-start thư mục, chạy sau lệnh căn cứ hỏa lực CLI:
firebase serve --only hosting
  1. 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 căn cứ hỏa lực Hosting giả lập để phục vụ ứng dụng của chúng tôi tại địa phương. Các ứng dụng web sẽ hiện hữu từ http: // localhost: 5000 . Tất cả các tập tin được đặt dưới sự public thư mục con được phục vụ.

  1. 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 của mình, giao diện người dùng vẫn chưa (chưa!) Hoạt động:

4c23f9475228cef4.png

Ứ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 ra mắt! Chúng tôi chỉ cung cấp giao diện người dùng cho bạn cho đến nay.

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

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 hướng dẫn của chúng tôi . Ví dụ: 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 đó gói nó trong ứng dụng của bạn nếu bạn đang sử dụng Browserify.

Chúng tôi đang đi để có được những căn cứ hỏa lực SDK từ NPM và sử dụng Webpack bó 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ữ kích thước gói JS của chúng tôi nhỏ để đảm bảo ứng dụng của chúng tôi tải nhanh nhất có thể. Đối với codelab này, chúng tôi đã tạo một web-start/package.json tập tin đó bao gồm các căn cứ hỏa lực SDK như một sự phụ thuộc, cũng như nhập khẩu các chức năng cần thiết ở phía trên cùng của 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';

Trong chương trình codelab này, chúng tôi sẽ sử dụng Xác thực Firebase, Cloud Firestore, Cloud Storage, Cloud Messaging 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 chúng. Trong các ứng dụng tương lai 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 ứng dụng của mình.

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 tiếp tục.

  1. Mở một cửa sổ đầu cuối mới
  2. Hãy chắc chắn rằng bạn đang ở trong web-start thư mục
  3. Chạy npm install để tải về các căn cứ hỏa lực SDK
  4. Chạy npm run start khởi động Webpack. Webpack bây giờ sẽ liên tục xây dựng lại mã phiên tòa của chúng tôi cho phần còn lại của bảng mã.

Định cấu hình Firebase

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.

  1. Tới bạn thiết lập dự án trong giao diện điều khiển căn cứ hỏa lực
  2. Trong thẻ "Ứng dụng của bạn", chọn biệt hiệu của ứng dụng mà bạn cần đối tượng cấu hình.
  3. Chọn "Cấu hình" từ ngăn đoạn mã SDK Firebase.
  4. Sao chép đoạn đối tượng cấu hình, sau đó thêm nó 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ờ, đi đến dưới cùng của web-start/src/index.js và khởi tạo căn cứ hỏa lực:

index.js

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

Hiện tại căn cứ hỏa lực SDK nên sẵn sàng để sử dụng vì nó được nhập khẩu và khởi tạo trong index.html . Hiện chúng tôi đang đi để thực hiện đăng nhập người dùng trong việc sử dụng căn cứ hỏa lực xác thực .

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

Trong ứng dụng, khi người dùng nhấp vào nút Đăng nhập bằng Google, signIn chức năng được kích hoạt. (Chúng tôi đã thiết lập điều đó cho bạn!) Đối với codelab này, chúng tôi muốn cho phép Firebase sử dụng Google làm nhà cung cấp danh tính. Chúng tôi sẽ sử dụng một popup, nhưng một số phương pháp khác có sẵn từ căn cứ hỏa lực.

  1. Trong web-start mục, trong thư mục con src/ , mở index.js .
  2. Tìm chức năng signIn .
  3. 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);
}

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

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng signOutUser .
  3. 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.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng initFirebaseAuth .
  3. 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 thanh ghi chức năng authStateObserver như người 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ơ của người dùng đã đăng nhập và tên người dùng trên thanh trên cùng của ứng dụng của chúng tôi. Trong căn cứ hỏa lực, các đăng nhập dữ liệu của người dùng luôn luôn có sẵn trong currentUser đối tượng. Trước đó, chúng tôi thiết lập authStateObserver chức năng để kích hoạt khi người dùng đăng nhập để cập nhật giao diện người dùng của chúng tôi phù hợp. Nó sẽ gọi getProfilePicUrlgetUserName khi được kích hoạt.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng getProfilePicUrlgetUserName .
  3. Thay thế cả hai hàm 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 tin nhắn 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.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng isUserSignedIn .
  3. 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

  1. Nếu ứng dụng của bạn vẫn đang được phân phối, 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ục vụ các ứng dụng từ http: // localhost: 5000 , và sau đó mở nó trong trình duyệt của bạn.
  2. Đă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 auth/operation-not-allowed , kiểm tra để đảm bảo rằng bạn đã kích hoạt Google Đăng-in như một nhà cung cấp chứng thực trong các căn cứ hỏa lực console.
  3. Sau khi đăng nhập, ảnh hồ sơ và tên người dùng của bạn sẽ được hiển thị: c7401b3d44d0d78b.png

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ể điền 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 bằng tay với các căn cứ hỏa lực console , nhưng chúng tôi sẽ làm điều đó trong ứng dụng riêng của mình để chứng minh một cơ bản đám mây FireStore ghi.

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ữ mỗi tin nhắn của trò chuyện như một tài liệu trong một bộ sưu tập cấp cao nhất được gọi là messages .

688d7bc5fb662b57.png

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

Để lưu trữ các tin nhắn trò chuyện được viết bởi người sử dụng, chúng tôi sẽ sử dụng đám mây 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. Một người sử dụng nhấn vào nút SEND sẽ kích hoạt đoạn mã dưới đây. Nó cho biết thêm một đối tượng tin nhắn với nội dung của các lĩnh vực tin nhắn đến dụ Mây FireStore của bạn trong messages bộ sưu tập. Các add() phương pháp bổ sung thêm một tài liệu mới với một ID tự động tạo ra để bộ sưu tập.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng saveMessage .
  3. 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);
  }
}

Kiểm tra gửi tin nhắn

  1. Nếu ứng dụng của bạn vẫn đang được phân phối, 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ục vụ các ứng dụng từ http: // localhost: 5000 , và sau đó mở nó trong trình duyệt của bạn.
  2. Sau khi đăng nhập, nhập một thông điệp như "Hey there!", Và sau đó 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 sự của bạn vì chúng tôi vẫn cần phải thực hiện lấy dữ liệu (phần tiếp theo của codelab).
  3. Bạn có thể xem thông báo mới được thêm 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 cơ sở dữ liệu nhấp 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 tin nhắn với thông điệp mới được bổ sung của bạn:

6812efe7da395692.png

thông điệp Synchronize

Để đọc tin nhắn trong ứng dụng, chúng tôi sẽ cần thêm trình nghe kích hoạt khi dữ liệu thay đổi và sau đó tạo phần tử giao diện người dùng hiển thị các 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 lắng nghe để lắng nghe các 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.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng loadMessages .
  3. 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 tin nhắn trong cơ sở dữ liệu, chúng tôi tạo ra một truy vấn trên một bộ sưu tập bằng cách sử dụng các collection chức năng để xác định các bộ sưu tập dữ liệu mà chúng tôi muốn nghe là trong. Trong đoạn mã trên, chúng ta đang 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ởi chỉ nghe 12 thông điệp cuối cùng sử dụng .limit(12) và ra lệnh cho các tin nhắn theo ngày sử dụng orderBy('timestamp', 'desc') để có được 12 thư mới nhất.

Các onSnapshot chức năng phải mất một truy vấn như tham số đầu tiên của nó, và một hàm callback như thứ hai của mình. 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 hướng dẫn của Cloud FireStore .

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

  1. Nếu ứng dụng của bạn vẫn đang được phân phối, 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ục vụ các ứng dụng từ http: // localhost: 5000 , và sau đó mở nó trong trình duyệt của bạn.
  2. Các thông báo 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 thân thiện với trò chuyện (xem bên dưới). Thoải mái viết tin nhắn mới; chúng sẽ xuất hiện ngay lập tức.
  3. (Tùy chọn) Bạn có thể thử bằng tay xóa, sửa đổi, hoặc thêm thư mới trực tiếp trong phần Cơ sở dữ liệu của các firebase console; bất kỳ thay đổi nào sẽ được phản ánh trong giao diện người dùng.

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

2168dec79b573d07.png

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

Trong khi Cloud Firestore tốt để lưu trữ dữ liệu có cấu trúc, Cloud Storage phù hợp hơn để lưu trữ tệp. Cloud Storage cho căn cứ hỏa lực là một dịch vụ lưu trữ tập tin / blob, và chúng tôi sẽ sử dụng nó để lưu trữ bất kỳ hình ảnh mà một cổ phiếu người dùng sử dụng ứng dụng của chúng tôi.

Lưu hình ảnh vào Bộ nhớ đám mây

Đối với bảng mã này, chúng tôi đã thêm cho bạn một nút kích hoạt hộp thoại bộ chọn tệp. Sau khi chọn một tập tin, các saveImageMessage hàm được gọi, và bạn có thể nhận được một tham chiếu đến tập tin được chọn. Các saveImageMessage chức năng hoàn thành những điều sau đây:

  1. Tạo 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.
  2. Cập nhật các tập tin hình ảnh để Cloud Storage vào đường dẫn này: /<uid>/<messageId>/<file_name>
  3. Tạo một URL có thể đọc được công khai cho tệp hình ảnh.
  4. 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 tải tạm thời.

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

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng saveImageMessage .
  3. 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);
  }
}

Thử nghiệm gửi hình ảnh

  1. Nếu ứng dụng của bạn vẫn đang được phân phối, 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ục vụ các ứng dụng từ http: // localhost: 5000 , và sau đó mở nó trong trình duyệt của bạn.
  2. Sau khi đăng nhập, hãy nhấp vào nút tải lên hình ảnh 13734cb66773e5a3.png và chọn tệp hình ảnh bằng công cụ chọn tệp. Nếu bạn đang tìm kiếm một hình ảnh, cảm thấy tự do để sử dụng này hình ảnh tốt đẹp của một tách cà phê .
  3. 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: 3b1284f5144b54f6.png

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

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 được đăng trong cuộc trò chuyện. Căn cứ hỏa lực Cloud Messaging (FCM) là một giải pháp tin nhắn đa nền tảng cho phép bạn đáng tin cậy cung cấp các thông điệp và thông báo miễn phí.

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

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

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

firebase-message-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 của Firebase, SDK này sẽ đảm nhận 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 kích hoạt trên thiết bị hoặc trình duyệt, bạn sẽ được cấp một thiết bị token. 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 những dấu hiệu trong người sử dụng, chúng ta gọi là saveMessagingDeviceToken chức năng. Đó là nơi mà chúng ta sẽ nhận được thiết bị FCM token từ trình duyệt và tiết kiệm nó với Cloud FireStore.

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng saveMessagingDeviceToken .
  3. 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 sẽ không hoạt động ban đầu. Để ứ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 bảng mã).

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 ta gọi là firebase.messaging().requestPermission() phương pháp, trong đó sẽ hiển thị một hộp thoại trình duyệt xin phép này ( trong các trình duyệt được hỗ trợ ).

8b9d0c66dc36153d.png

  1. Quay trở lại file src/index.js .
  2. Tìm chức năng requestNotificationsPermissions .
  3. 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

  1. Nếu ứng dụng của bạn vẫn đang được phân phối, 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ục vụ các ứng dụng từ http: // localhost: 5000 , và sau đó mở nó trong trình duyệt của bạn.
  2. Sau khi đăng nhập, hộp thoại quyền thông báo sẽ xuất hiện: bd3454e6dbfb6723.png
  3. Nhấp vào Allow.
  4. 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
  5. 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 mã hóa.

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.

  1. Mở tab Cloud Messaging của các firebase console .
  2. Nhấp vào "Thông báo mới"
  3. Nhập tiêu đề thông báo và văn bản thông báo.
  4. Ở phía bên phải của màn hình, nhấp vào "gửi tin nhắn kiểm tra"
  5. Nhập mã thông báo thiết bị 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 ("+")
  6. 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:

de79e8638a45864c.png

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

Đám mây FireStore sử dụng cụ thể ngôn ngữ quy tắc để xác định quyền truy cập, an ninh và kiểm chứng thực dữ liệu.

Khi thiết lập dự án Firebase ở đầu bảng mã này, chúng tôi đã chọn sử dụng các 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 căn cứ hỏa lực console , trong tab Rules phần cơ sở dữ liệu, bạn có thể xem và chỉnh sửa các quy tắc.

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 các 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 các quy tắc bảo mật trong bảng điều khiển Firebase:

  1. Đi tới phần cơ sở dữ liệu từ bảng điều khiển bên trái, và sau đó nhấp vào tab Quy tắc.
  2. 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 được hiển thị ở trên.
  3. Bấm Publish.

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

  1. Từ web-start thư mục, mở firestore.rules .
  2. Thay thế các quy tắc mặc định đã có trong tệp bằng các quy tắc được hiển thị ở trên.
  3. Từ web-start thư mục, mở firebase.json .
  4. Thêm firestore.rules thuộc tính trỏ đến firestore.rules , như hình dưới đây. (Các hosting thuộc tính nên đã được trong file.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 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
  1. 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

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

Cloud Storage cho căn cứ hỏa lực sử dụng một cụ ngôn ngữ quy tắc để xác định quyền truy cập, an ninh và kiểm chứng thực dữ liệu.

Khi thiết lập dự án Firebase ở phần đầu của codelab 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 đã xác thực sử dụng Cloud Storage. Trong căn cứ hỏa lực console , trong tab Rules phần của lưu trữ, bạn có thể xem và chỉnh sửa quy tắc. Bạn sẽ thấy quy tắc mặc định cho phép bất kỳ người dùng đã đăng nhập nào đọc và ghi bất kỳ tệp nào trong bộ 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ể được tải lên tối đa 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:

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

Cập nhật các quy tắc bảo mật của 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 các quy tắc bảo mật trong bảng điều khiển Firebase:

  1. Đi tới phần lưu trữ từ bảng điều khiển bên trái, và sau đó nhấp vào tab Quy tắc.
  2. Thay thế quy tắc mặc định đã có trong bảng điều khiển bằng các quy tắc được hiển thị ở trên.
  3. Bấm Publish.

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

  1. Từ web-start thư mục, mở storage.rules .
  2. Thay thế các quy tắc mặc định đã có trong tệp bằng các quy tắc được hiển thị ở trên.
  3. Từ web-start thư mục, mở firebase.json .
  4. Thêm storage.rules thuộc tính trỏ đến các storage.rules tập tin, như hình dưới đây. (Các hostingdatabase thuộc tính nên đã được trong file.)

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

Bạn có thể sử dụng SDK theo dõi 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 hiểu vị trí và thời điểm có thể cải thiện hiệu suất của ứng dụng để 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 giám sát hiệu suất Firebase. Trong codelab này, chúng tôi cho phép hiệu suất giám sát từ các URL Hosting. Tham khảo các tài liệu để xem các phương pháp khác tạo điều kiện cho SDK.

Dấu vết tự động

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

  1. Trong web-start/src/index.js , thêm dòng sau dưới hiện TODO để khởi tạo 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)

Chậm trễ đầu vào đầu tiên là hữu ích vì các trình duyệt đối phó với một tương tác người dùng cung cấp cho người dùng của bạn ấn tượng đầu tiên của họ về tính hiệu quả của ứng dụng của bạn.

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

  1. Mở public/index.html .
  2. Bỏ ghi chú các script thẻ 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ề người đầu tiên polyfill chậm trễ đầu vào, hãy xem các tài liệu hướng dẫn .

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 nó ở bước tiếp theo), đây là ảnh chụp màn hình hiển thị các chỉ số 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 kể từ khi người dùng tương tác với trang web đã triển khai của bạn :

29389131150f33d7.png

Khi tích hợp SDK theo dõi hiệu suất vào ứng dụng của mình, bạn không cần 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 theo dõi một số khía cạnh quan trọng của hiệu suất. Đối với ứng dụng web, SDK ghi nhật ký các khía cạnh như sơn nội dung đầ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 của bạn. Hãy truy cập vào tài liệu hướng dẫn để tìm hiểu thêm về dấu vết tùy chỉnh và số liệuthuộc tính tùy chỉnh .

Mời căn cứ hỏa lực một dịch vụ lưu trữ để phục vụ tài sản của bạn và các ứng dụng web. Bạn có thể triển khai tệp của mình lên Lưu trữ Firebase bằng Firebase CLI. Trước khi triển khai, bạn cần phải xác định trong bạn firebase.json tập tin các tập tin địa phương nên được triển khai. Đối với bảng 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 để cung cấp tệp của chúng tôi trong bảng mã này. Các thiết lập lưu trữ được quy định dưới sự hosting thuộc tính:

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 thiết lập này nói CLI mà chúng ta muốn triển khai tất cả các file trong ./public thư mục ( "public": "./public" ).

  1. Hãy chắc chắn rằng dòng lệnh của bạn được truy cập vào địa phương của ứng dụng của bạn web-start thư mục.
  2. Triển khai tệp của bạn cho dự án Firebase bằng cách chạy lệnh sau:
firebase deploy --except functions
  1. 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
  1. 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.

Hãy truy cập vào tài liệu hướng dẫn để tìm hiểu thêm về cách căn cứ hỏa lực Hosting công trình .

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

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

Những gì chúng tôi đã đề cập

  • Xác thực Firebase
  • Cloud Firestore
  • SDK Firebase cho Bộ nhớ đám mây
  • Nhắn tin qua đám mây Firebase
  • Giám sát hiệu suất Firebase
  • Lưu trữ Firebase

Bước tiếp theo

Learn more