Tìm hiểu về Firebase cho web

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Sơ lượt

Trong bảng mã này, bạn sẽ tìm hiểu một số kiến ​​thức cơ bản về Firebase để tạo các ứng dụng web tương tác. Bạn sẽ tạo RSVP sự kiện và ứng dụng trò chuyện sổ lưu bút bằng cách sử dụng một số sản phẩm Firebase.

ảnh chụp màn hình của bước này

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

  • Xác thực người dùng bằng Xác thực Firebase và FirebaseUI.
  • Đồng bộ hóa dữ liệu bằng Cloud Firestore.
  • Viết Quy tắc bảo mật Firebase để bảo mật cơ sở dữ liệu.

Những gì bạn cần

  • Trình duyệt bạn chọn, chẳng hạn như Chrome.
  • Truy cập vào stackblitz.com (không cần tài khoản hoặc đăng nhập).
  • Tài khoản Google, giống như tài khoản gmail. Chúng tôi đề xuất tài khoản email mà bạn đã sử dụng cho tài khoản GitHub của mình. Điều này cho phép bạn sử dụng các tính năng nâng cao trong StackBlitz.
  • Mã mẫu của codelab. Xem bước tiếp theo để biết cách lấy mã.

2. Nhận mã bắt đầu

Trong bảng mã này, bạn xây dựng một ứng dụng bằng StackBlitz , một trình chỉnh sửa trực tuyến có một số quy trình làm việc của Firebase được tích hợp vào đó. Stackblitz không yêu cầu cài đặt phần mềm hoặc tài khoản StackBlitz đặc biệt.

StackBlitz cho phép bạn chia sẻ dự án với những người khác. Những người khác có URL dự án StackBlitz của bạn có thể thấy mã của bạn và phân nhánh dự án của bạn, nhưng họ không thể chỉnh sửa dự án StackBlitz của bạn.

  1. Truy cập URL này để biết mã bắt đầu: https://stackblitz.com/edit/firebase-gtk-web-start
  2. Ở đầu trang StackBlitz, nhấp vào Fork :

ảnh chụp màn hình của bước này

Bây giờ bạn có một bản sao của mã bắt đầu làm dự án StackBlitz của riêng bạn, có một tên duy nhất, cùng với một URL duy nhất. Tất cả các tệp và thay đổi của bạn được lưu trong dự án StackBlitz này.

3. Chỉnh sửa thông tin sự kiện

Các tài liệu ban đầu cho bảng mã này cung cấp một số cấu trúc cho ứng dụng web, bao gồm một số bảng định kiểu và một vài vùng chứa HTML cho ứng dụng. Sau đó trong bảng mã này, bạn sẽ kết nối các vùng chứa này với Firebase.

Để bắt đầu, chúng ta hãy làm quen một chút với giao diện StackBlitz.

  1. Trong StackBlitz, mở index.html .
  2. Định event-details-container và vùng chứa description-container , sau đó thử chỉnh sửa một số chi tiết sự kiện.

Khi bạn chỉnh sửa văn bản, quá trình tải lại trang tự động trong StackBlitz sẽ hiển thị chi tiết sự kiện mới. Hay quá, phải không?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

Bản xem trước ứng dụng của bạn sẽ trông giống như sau:

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

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

Hiển thị thông tin sự kiện là rất tốt cho khách của bạn, nhưng chỉ hiển thị các sự kiện không phải là rất hữu ích cho bất kỳ ai. Hãy thêm một số chức năng động vào ứng dụng này. Đối với điều này, bạn sẽ cần kết nối Firebase với ứng dụng của mình. Để bắt đầu với Firebase, bạn cần tạo và thiết lập một dự án Firebase.

Tạo dự án Firebase

  1. Đăng nhập vào Firebase .
  2. Trong bảng điều khiển Firebase, nhấp vào Thêm dự án (hoặc Tạo dự án ), sau đó đặt tên cho dự án Firebase của bạn là Firebase-Web-Codelab .

    ảnh chụp màn hình của bước này

  3. Nhấp qua các tùy chọn tạo dự án. Chấp nhận các điều khoản của Firebase nếu được nhắc. Trên màn hình Google Analytics, hãy nhấp vào "Không bật", vì bạn sẽ không sử dụng Analytics cho ứng dụng này.

Để tìm hiểu thêm về các dự án Firebase, hãy xem Hiểu các dự án Firebase .

Bật và thiết lập các sản phẩm Firebase trong bảng điều khiển

Ứng dụng bạn đang xây dựng sử dụng một số sản phẩm Firebase có sẵn cho các ứng dụng web:

  • Xác thực Firebase và giao diện người dùng 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.
  • Quy tắc bảo mật Firebase để bảo mật cơ sở dữ liệu của bạn.

Một số sản phẩm 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.

Bật đăng nhập email để Xác thực Firebase

Để cho phép người dùng đăng nhập vào ứng dụng web, bạn sẽ sử dụng phương pháp đăng nhập Email / Mật khẩu cho bảng mã này:

  1. Trong bảng điều khiển bên trái của bảng điều khiển Firebase, nhấp vào Xây dựng > Xác thực . Sau đó nhấp vào Bắt đầu . Bây giờ bạn đang ở trong trang tổng quan Xác thực, nơi bạn có thể thấy những người dùng đã đăng ký, định cấu hình nhà cung cấp dịch vụ đăng nhập và quản lý cài đặt.

    ảnh chụp màn hình của bước này

  2. Chọn tab Phương thức đăng nhập (hoặc nhấp vào đây để chuyển trực tiếp đến tab).

    ảnh chụp màn hình của bước này

  3. Bấm Email / Mật khẩu từ các tùy chọn của nhà cung cấp, chuyển nút gạt sang Bật , sau đó bấm Lưu .

    ảnh chụp màn hình của bước này

Thiết lập 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.

Đây là cách thiết lập Cloud Firestore:

  1. Trong bảng điều khiển bên trái của bảng điều khiển Firebase, nhấp vào Xây dựng > Cơ sở dữ liệu Firestore . Sau đó nhấp vào Tạo cơ sở dữ liệu .
  2. Nhấp vào Tạo cơ sở dữ liệu .

    ảnh chụp màn hình của bước này

  3. Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm . Đọ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 bạn có thể tự do ghi vào cơ sở dữ liệu trong quá trình phát triển. Nhấp vào Tiếp theo .

    ảnh chụp màn hình của bước này

  4. Chọn vị trí cho cơ sở dữ liệu của bạn (bạn chỉ có thể sử dụng mặc định). Tuy nhiên, lưu ý rằng bạn không thể thay đổi vị trí này sau đó.

    ảnh chụp màn hình của bước này

  5. Nhấp vào Xong .

5. Thêm và định cấu hình Firebase

Bây giờ bạn đã tạo dự án Firebase và bật một số dịch vụ, bạn cần cho biết mã mà bạn muốn sử dụng Firebase, cũng như dự án Firebase nào sẽ sử dụng.

Thêm thư viện Firebase

Để ứng dụng của bạn sử dụng Firebase, bạn cần thêm các thư viện Firebase vào ứng dụng. Có nhiều cách để thực hiện việc này, như được mô tả trong tài liệu Firebase . Ví dụ: bạn có thể thêm các thư viện từ CDN của Google hoặc bạn có thể cài đặt chúng cục bộ bằng cách sử dụng npm và sau đó đóng gói chúng trong ứng dụng của bạn nếu bạn đang sử dụng Browserify.

StackBlitz cung cấp tính năng tự động đóng gói, vì vậy bạn có thể thêm các thư viện Firebase bằng cách sử dụng các câu lệnh nhập. Bạn sẽ sử dụng các phiên bản mô-đun (v9) của các thư viện, giúp giảm kích thước tổng thể của trang web thông qua một quá trình được gọi là "rung cây". Bạn có thể tìm hiểu thêm về SDK mô-đun trong tài liệu .

Để tạo ứng dụng này, bạn sử dụng các thư viện Firebase Authentication, FirebaseUI và Cloud Firestore. Đối với codelab này, các câu lệnh nhập sau đã được bao gồm ở đầu index.js và chúng tôi sẽ nhập nhiều phương thức hơn từ mỗi thư viện Firebase khi chúng tôi tiếp tục:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Thêm ứng dụng web Firebase vào dự án Firebase của bạn

  1. Quay lại bảng điều khiển Firebase, điều hướng đến trang tổng quan về dự án của bạn bằng cách nhấp vào Tổng quan về dự án ở trên cùng bên trái.
  2. Ở giữa trang tổng quan về dự án của bạn, hãy nhấp vào biểu tượng web biểu tượng ứng dụng web để tạo ứng dụng web Firebase mới.

    ảnh chụp màn hình của bước này

  3. Đăng ký ứng dụng với biệt hiệu Ứng dụng web .
  4. Đối với bảng mã này, KHÔNG 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 . Bạn sẽ sử dụng ngăn xem trước của StackBlitz ngay bây giờ.
  5. Bấm Đăng ký ứng dụng .

    ảnh chụp màn hình của bước này

  6. Sao chép đối tượng cấu hình Firebase vào khay nhớ tạm của bạn.

    ảnh chụp màn hình của bước này

  7. Nhấp vào Tiếp tục đến bảng điều khiển . Thêm đối tượng cấu hình Firebase vào ứng dụng của bạn:
  8. Quay lại StackBlitz, truy cập index.js .
  9. Định vị dòng nhận xét Add Firebase project configuration object here , sau đó dán đoạn mã cấu hình của bạn ngay bên dưới nhận xét.
  10. Thêm lệnh gọi hàm initializeApp để thiết lập Firebase bằng cách sử dụng cấu hình dự án Firebase duy nhất của bạn.
    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

6. Thêm đăng nhập của người dùng (RSVP)

Bây giờ bạn đã thêm Firebase vào ứng dụng, bạn có thể thiết lập nút RSVP để đăng ký mọi người bằng Xác thực Firebase .

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

Bạn sẽ cần một nút RSVP nhắc người dùng đăng nhập bằng địa chỉ email của họ. Bạn có thể thực hiện việc này bằng cách kết nối FirebaseUI với một nút RSVP. FirebaseUI là một thư viện cung cấp cho bạn một giao diện người dùng được tạo sẵn trên Firebase Auth.

FirebaseUI yêu cầu cấu hình (xem các tùy chọn trong tài liệu ) thực hiện hai việc:

  • Cho FirebaseUI biết rằng bạn muốn sử dụng phương thức đăng nhập Email / Mật khẩu .
  • Xử lý lệnh gọi lại để đăng nhập thành công và trả về false để tránh chuyển hướng. Bạn không muốn trang làm mới bởi vì bạn đang xây dựng một ứng dụng web một trang.

Thêm mã để khởi chạy FirebaseUI Auth

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở trên cùng, hãy tìm câu lệnh nhập firebase/auth , sau đó thêm getAuthEmailAuthProvider , như sau:
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Lưu một tham chiếu đến đối tượng auth ngay sau khi initializeApp , như sau:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Lưu ý rằng cấu hình FirebaseUI đã được cung cấp trong mã bắt đầu. Nó đã được thiết lập để sử dụng nhà cung cấp dịch vụ xác thực email.
  5. Ở cuối hàm main() trong index.js , hãy thêm câu lệnh khởi tạo FirebaseUI, như sau:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

Thêm nút RSVP vào HTML

  1. Trong StackBlitz, hãy chuyển đến index.html .
  2. Thêm HTML cho nút RSVP bên trong vùng event-details-container như được hiển thị trong ví dụ bên dưới.

    Hãy cẩn thận sử dụng các giá trị id tương tự như được hiển thị bên dưới vì đối với bảng mã này, đã có sẵn các móc cho các ID cụ thể này trong index.js .

    Lưu ý rằng trong index.html , có một vùng chứa với ID firebaseui-auth-container . Đây là ID mà bạn sẽ chuyển đến FirebaseUI để giữ thông tin đăng nhập của mình. Bản xem trước ứng dụng
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    


    ảnh chụp màn hình của bước này

  3. Thiết lập trình lắng nghe trên nút RSVP và gọi chức năng khởi động FirebaseUI. Điều này cho FirebaseUI biết rằng bạn muốn xem cửa sổ đăng nhập.

    Thêm mã sau vào cuối hàm main() trong index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

  1. Trong cửa sổ xem trước của StackBlitz, nhấp vào nút RSVP để đăng nhập vào ứng dụng.
    • Đối với bảng mã này, bạn có thể sử dụng bất kỳ địa chỉ email nào, ngay cả địa chỉ email giả mạo, vì bạn không thiết lập bước xác minh email cho bảng mã này.
    • Nếu bạn thấy thông báo lỗi cho biết auth/operation-not-allowed hoặc The given sign-in provider is disabled for this Firebase project , hãy kiểm tra để đảm bảo rằng bạn đã bật Email / Mật khẩu làm nhà cung cấp dịch vụ đăng nhập trong bảng điều khiển Firebase.
    Bản xem trước ứng dụng

    ảnh chụp màn hình của bước này

  2. Đi tới trang tổng quan Xác thực trong bảng điều khiển Firebase. Trong tab Người dùng , bạn sẽ thấy thông tin tài khoản mà bạn đã nhập để đăng nhập vào ứng dụng.

    ảnh chụp màn hình của bước này

Thêm trạng thái xác thực vào giao diện người dùng

Tiếp theo, hãy đảm bảo rằng giao diện người dùng phản ánh thực tế là bạn đã đăng nhập.

Bạn sẽ sử dụng lệnh gọi lại trình nghe trạng thái Xác thực Firebase, sẽ được thông báo bất cứ khi nào trạng thái đăng nhập của người dùng thay đổi. Nếu hiện có người dùng đã đăng nhập, ứng dụng của bạn sẽ chuyển nút "RSVP" thành nút "đăng xuất".

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở trên cùng, hãy tìm câu lệnh nhập firebase/auth , sau đó thêm signOutonAuthStateChanged , như sau:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Thêm mã sau vào cuối hàm main() :
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. Trong trình nghe nút, hãy kiểm tra xem có người dùng hiện tại hay không và đăng xuất họ. Để thực hiện việc này, hãy thay thế startRsvpButton.addEventListener hiện tại bằng như sau:
    // ...
    // Called when the user clicks the RSVP button
    startRsvpButton.addEventListener('click', () => {
      if (auth.currentUser) {
        // User is signed in; allows user to sign out
        signOut(auth);
      } else {
        // No user is signed in; allows user to sign in
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    });
    

Bây giờ, nút trong ứng dụng của bạn sẽ hiển thị LOGOUT và nó sẽ chuyển về RSVP khi được nhấp.

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

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

Biết rằng người dùng đang đến là điều tuyệt vời, nhưng hãy cung cấp cho khách một việc khác để làm trong ứng dụng. Điều gì sẽ xảy ra nếu họ có thể để lại lời nhắn trong một cuốn sổ lưu bút? Họ có thể chia sẻ lý do tại sao họ hào hứng đến hoặc người mà họ hy vọng sẽ gặp.

Để lưu trữ các tin nhắn trò chuyện mà người dùng viết trong ứng dụng, bạn sẽ sử dụng Cloud Firestore .

Mô hình dữ liệu

Cloud Firestore là một cơ sở dữ liệu NoSQL và dữ liệu được lưu trữ trong cơ sở dữ liệu được chia thành các bộ sưu tập, tài liệu, trường và bộ sưu tập con. Bạn 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 một bộ sưu tập cấp cao nhất được gọi là guestbook .

Đồ họa mô hình dữ liệu Firestore hiển thị bộ sưu tập sổ lưu bút với nhiều tài liệu tin nhắn

Thêm tin nhắn vào 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. Đầu tiên, bạn thêm HTML cho các phần tử giao diện người dùng (trường tin nhắn và nút gửi). Sau đó, bạn thêm mã nối các phần tử này vào cơ sở dữ liệu.

Để thêm các phần tử giao diện người dùng của trường tin nhắn và nút gửi:

  1. Trong StackBlitz, hãy chuyển đến index.html .
  2. Tìm vùng guestbook-container , sau đó thêm HTML sau để tạo biểu mẫu với trường nhập tin nhắn và nút gửi.
    <!-- ... -->
    
     <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form id="leave-message">
         <label>Leave a message: </label>
         <input type="text" id="message">
         <button type="submit">
           <i class="material-icons">send</i>
           <span>SEND</span>
         </button>
       </form>
    
     </section>
    
    <!-- ... -->
    

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

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 nội dung của trường nhập tin nhắn vào bộ sưu tập guestbook của cơ sở dữ liệu. Cụ thể, phương thức addDoc thêm nội dung thư vào tài liệu mới (với ID được tạo tự động) vào bộ sưu tập guestbook .

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở trên cùng, hãy tìm câu lệnh nhập firebase/firestore , sau đó thêm getFirestore , addDoccollection , như sau:
    // ...
    
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {
      getFirestore,
      addDoc,
      collection
    } from 'firebase/firestore';
    
  3. Bây giờ chúng ta sẽ lưu một tham chiếu đến đối tượng db của Firestore ngay sau khi initializeApp tạoApp:
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. Ở cuối hàm main() , hãy thêm đoạn mã sau.

    Lưu ý rằng auth.currentUser.uid là tham chiếu đến ID duy nhất được tạo tự động mà Xác thực Firebase cung cấp cho tất cả người dùng đã đăng nhập.
    async function main() {
      // ...
    
      // Listen to the form submission
      form.addEventListener('submit', async e => {
        // Prevent the default form redirect
        e.preventDefault();
        // Write a new message to the database collection "guestbook"
        addDoc(collection(db, 'guestbook'), {
          text: input.value,
          timestamp: Date.now(),
          name: auth.currentUser.displayName,
          userId: auth.currentUser.uid
        });
        // clear message input field
        input.value = '';
        // Return false to avoid redirect
        return false;
      });
    }
    main();
    

Chỉ hiển thị sổ lưu bút cho người dùng đã đăng nhập

Bạn không muốn chỉ có ai đó xem cuộc trò chuyện của khách. Một điều bạn có thể làm để bảo mật cuộc trò chuyện là chỉ cho phép những người dùng đã đăng nhập mới có thể xem sổ lưu bút. Điều đó nói rằng, đối với các ứng dụng của riêng bạn, bạn cũng sẽ muốn bảo mật cơ sở dữ liệu của mình bằng Quy tắc bảo mật của Firebase . (Có thêm thông tin về các quy tắc bảo mật sau này trong bảng mã.)

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Chỉnh sửa trình nghe onAuthStateChanged để ẩn và hiển thị sổ lưu bút.
    // ...
    
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
      }
    });
    

Kiểm tra gửi tin nhắn

  1. Đảm bảo rằng bạn đã đăng nhập vào ứng dụng.
  2. Nhập một thông báo chẳng hạn như "Này đó!", Sau đó nhấp vào GỬI .

Hành động này ghi thông báo vào cơ sở dữ liệu Cloud Firestore của bạn. Tuy nhiên, bạn sẽ không thấy thông báo trong ứng dụng web thực tế của mình vì bạn vẫn cần triển khai truy xuất dữ liệu. Bạn sẽ làm điều đó tiếp theo.

Nhưng bạn có thể thấy thông báo mới được thêm trong bảng điều khiển Firebase.

Trong bảng điều khiển Firebase, trong bảng điều khiển Cơ sở dữ liệu Firestore , bạn sẽ thấy bộ sưu tập guestbook với thông điệp mới được thêm vào của bạn. Nếu bạn tiếp tục gửi tin nhắn, bộ sưu tập lưu bút của bạn sẽ chứa nhiều tài liệu, như sau:

Bảng điều khiển Firebase

ảnh chụp màn hình của bước này

8. Đọc tin nhắn

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

Thật tuyệt khi khách có thể viết tin nhắn vào cơ sở dữ liệu nhưng họ chưa thể nhìn thấy chúng trong ứng dụng.

Để hiển thị thông báo, bạn sẽ 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ị thông báo mới.

Bạn sẽ thêm mã lắng nghe các tin nhắn mới được thêm vào từ ứng dụng. Đầu tiên, hãy thêm một phần trong HTML để hiển thị thông báo:

  1. Trong StackBlitz, hãy chuyển đến index.html .
  2. Trong guestbook-container , hãy thêm một phần mới với ID của guestbook .
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

Tiếp theo, đăng ký bộ lắng nghe lắng nghe các thay đổi được thực hiện đối với dữ liệu:

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở trên cùng, hãy tìm câu lệnh nhập firebase/firestore , sau đó thêm query , orderByonSnapshot , như sau:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Ở cuối hàm main() , thêm mã sau để lặp qua tất cả các tài liệu (thông báo sổ lưu bút) trong cơ sở dữ liệu. Để tìm hiểu thêm về những gì đang xảy ra trong mã này, hãy đọc thông tin bên dưới đoạn mã.
    async function main() {
      // ...
    
      // Create query for messages
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    main();
    

Để nghe thư trong cơ sở dữ liệu, bạn đã tạo một truy vấn trên một bộ sưu tập cụ thể bằng cách sử dụng chức năng collection . Đoạn mã trên lắng nghe những thay đổi trong bộ sưu tập guestbook , là nơi lưu trữ các tin nhắn trò chuyện. Các tin nhắn cũng được sắp xếp theo ngày tháng, sử dụng orderBy('timestamp', 'desc') để hiển thị các tin nhắn mới nhất ở trên cùng.

Hàm onSnapshot nhận hai tham số: truy vấn để sử dụng và một hàm gọi lại. Chức năng gọi lại đượ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. Để biết thêm thông tin, hãy xem tài liệu Cloud Firestore .

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

Cloud Firestore đồng bộ hóa dữ liệu tự động và tức thì với các khách hàng đã đăng ký cơ sở dữ liệu.

  • Các thông báo bạn đã tạo trước đó trong cơ sở dữ liệu sẽ được hiển thị trong ứng dụng. Thoải mái viết tin nhắn mới; chúng sẽ xuất hiện ngay lập tức.
  • Nếu bạn mở không gian làm việc của mình trong nhiều cửa sổ hoặc tab, tin nhắn sẽ đồng bộ hóa trong thời gian thực giữa các tab.
  • (Tùy chọn) Bạn có thể thử xóa, sửa đổi hoặc thêm thư 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; bất kỳ thay đổi nào sẽ xuất hiện 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!

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

9. Thiết lập các quy tắc bảo mật cơ bản

Ban đầu, bạn thiết lập Cloud Firestore để sử dụng chế độ thử nghiệm, nghĩa là cơ sở dữ liệu của bạn đang mở để đọc và ghi. Tuy nhiên, bạn chỉ nên sử dụng chế độ thử nghiệm trong giai đoạn phát triển rất sớm. Cách tốt nhất, bạn nên thiết lập các quy tắc bảo mật cho cơ sở dữ liệu của mình khi bạn phát triển ứng dụng của mình. Bảo mật phải là yếu tố không thể thiếu trong cấu trúc và hành vi ứng dụng của bạn.

Quy tắc bảo mật cho phép bạn kiểm soát quyền truy cập vào tài liệu và bộ sưu tập trong cơ sở dữ liệu của bạn. Cú pháp quy tắc linh hoạt cho phép bạn tạo quy tắc phù hợp với bất kỳ thứ gì từ tất cả các lần ghi vào toàn bộ cơ sở dữ liệu đến các hoạt động trên một tài liệu cụ thể.

Bạn có thể viết các quy tắc bảo mật cho Cloud Firestore trong bảng điều khiển Firebase:

  1. Trong phần Xây dựng của bảng điều khiển Firebase, nhấp vào Cơ sở dữ liệu Firestore , sau đó chọn tab Quy tắc (hoặc nhấp vào đây để chuyển trực tiếp đến tab Quy tắc ).
  2. Bạn sẽ thấy các quy tắc bảo mật mặc định sau đây, với giới hạn thời gian truy cập công khai là vài tuần kể từ hôm nay.

ảnh chụp màn hình của bước này

Xác định bộ sưu tập

Đầu tiên, xác định các bộ sưu tập mà ứng dụng ghi dữ liệu.

  1. Xóa mệnh đề match /{document=**} hiện có, để các quy tắc của bạn trông giống như sau:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. Trong match /databases/{database}/documents , hãy xác định bộ sưu tập mà bạn muốn bảo mật:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
         // You'll add rules here in the next step.
      }
    }
    

Thêm quy tắc bảo mật

Vì bạn đã sử dụng UID Xác thực làm trường trong mỗi tài liệu sổ lưu bút, bạn có thể lấy UID Xác thực và xác minh rằng bất kỳ ai cố gắng ghi vào tài liệu đều có UID Xác thực phù hợp.

  1. Thêm quy tắc đọc và ghi vào bộ quy tắc của bạn như được hiển thị bên dưới:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
            if request.auth.uid == request.resource.data.userId;
        }
      }
    }
    
  2. Nhấp vào Xuất bản để triển khai các quy tắc mới của bạn. Chúng tôi cũng không cho phép chỉnh sửa hoặc xóa tin nhắn.

Thêm quy tắc xác thực

  1. Thêm xác thực dữ liệu để đảm bảo rằng tất cả các trường mong đợi đều có trong tài liệu:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
          if request.auth.uid == request.resource.data.userId
              && "name" in request.resource.data
              && "text" in request.resource.data
              && "timestamp" in request.resource.data;
        }
      }
    }
    
  2. Nhấp vào Xuất bản để triển khai các quy tắc mới của bạn.

Đặt lại người nghe

Vì ứng dụng của bạn hiện chỉ cho phép người dùng đã xác thực đăng nhập, bạn nên di chuyển truy vấn lưu trữ sổ lưu firestore bên trong trình nghe Xác thực. Nếu không, lỗi quyền sẽ xảy ra và ứng dụng sẽ bị ngắt kết nối khi người dùng đăng xuất.

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Kéo bộ sưu tập lưu bút trên trình nghe onSnapshot vào một chức năng mới có tên subscribeGuestbook . Ngoài ra, hãy gán kết quả của hàm onSnapshot cho biến guestbookListener .

    Trình nghe Firestore onSnapshot trả về một chức năng hủy đăng ký mà bạn sẽ có thể sử dụng để hủy trình nghe ảnh chụp nhanh sau này.
    // ...
    // Listen to guestbook updates
    function subscribeGuestbook() {
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      guestbookListener = onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    
  3. Thêm một chức năng mới bên dưới có tên là unsubscribeGuestbook . Kiểm tra xem biến guestbookListener có rỗng không, sau đó gọi hàm để hủy trình nghe.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Cuối cùng, thêm các chức năng mới vào lệnh gọi lại onAuthStateChanged .

  1. Thêm subscribeGuestbook() ở cuối if (user) .
  2. Thêm unsubscribeGuestbook() ở cuối câu lệnh else .
    // ...
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
        // Subscribe to the guestbook collection
        subscribeGuestbook();
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
        // Unsubscribe from the guestbook collection
        unsubscribeGuestbook();
      }
    });
    

10. Bước bổ sung: Thực hành những gì bạn đã học

Ghi lại trạng thái RSVP của người tham dự

Hiện tại, ứng dụng của bạn chỉ cho phép mọi người bắt đầu trò chuyện nếu họ quan tâm đến sự kiện. Ngoài ra, cách duy nhất để bạn biết liệu ai đó có đến hay không là nếu họ đăng nó trong cuộc trò chuyện. Hãy tổ chức và cho mọi người biết có bao nhiêu người sẽ đến.

Bạn sẽ thêm một nút chuyển đổi để đăng ký những người muốn tham dự sự kiện, sau đó thu thập số lượng người sẽ đến.

  1. Trong StackBlitz, hãy chuyển đến index.html .
  2. Trong guestbook-container , hãy thêm một tập hợp các nút KHÔNG , như sau:
    <!-- ... -->
      <section id="guestbook-container">
       <h2>Are you attending?</h2>
         <button id="rsvp-yes">YES</button>
         <button id="rsvp-no">NO</button>
    
       <h2>Discussion</h2>
    
       <!-- ... -->
    
     </section>
    <!-- ... -->
    

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

Tiếp theo, đăng ký người nghe cho các lần nhấp vào nút. Nếu người dùng nhấp vào , sau đó sử dụng UID xác thực của họ để lưu phản hồi vào cơ sở dữ liệu.

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở trên cùng, hãy tìm câu lệnh nhập firebase/firestore , sau đó thêm doc , setDocwhere , như sau:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. Ở cuối hàm main() , thêm mã sau để lắng nghe trạng thái RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Tiếp theo, tạo một bộ sưu tập mới được gọi là attendees , sau đó đăng ký tham chiếu tài liệu nếu một trong hai nút RSVP được nhấp. Đặt tham chiếu đó thành true hoặc false tùy thuộc vào nút nào được nhấp.

    Đầu tiên, đối với rsvpYes :
    // ...
    // Listen to RSVP responses
    rsvpYes.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attendi()ng: true
      try {
        await setDoc(userRef, {
          attending: true
        });
      } catch (e) {
        console.error(e);
      }
    };
    
    Sau đó, tương tự đối với rsvpNo , nhưng với giá trị false :
    rsvpNo.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attending: true
      try {
        await setDoc(userRef, {
          attending: false
        });
      } catch (e) {
        console.error(e);
      }
    };
    

Cập nhật Quy tắc bảo mật của bạn

Vì bạn đã thiết lập một số quy tắc nên dữ liệu mới mà bạn đang thêm bằng các nút sẽ bị từ chối.

Cho phép bổ sung vào bộ sưu tập attendees

Bạn sẽ cần cập nhật các quy tắc để cho phép thêm vào bộ sưu tập attendees .

  1. Đối với bộ sưu tập attendees , vì bạn đã sử dụng UID xác thực làm tên tài liệu, bạn có thể lấy nó và xác minh rằng uid của người gửi giống với tài liệu họ đang viết. Bạn sẽ cho phép mọi người đọc danh sách người tham dự (vì không có dữ liệu riêng tư ở đó), nhưng chỉ người tạo mới có thể cập nhật danh sách đó.
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId;
        }
      }
    }
    
  2. Nhấp vào Xuất bản để triển khai các quy tắc mới của bạn.

Thêm quy tắc xác thực

  1. Thêm một số quy tắc xác thực dữ liệu để đảm bảo rằng tất cả các trường mong đợi đều có trong tài liệu:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId
              && "attending" in request.resource.data;
    
        }
      }
    }
    
  2. Đừng quên nhấp vào Xuất bản để triển khai các quy tắc của bạn!

(Tùy chọn) Bây giờ bạn có thể xem kết quả của việc nhấp vào các nút. Truy cập trang tổng quan Cloud Firestore của bạn trong bảng điều khiển Firebase.

Đọc trạng thái RSVP

Bây giờ bạn đã ghi lại các phản hồi, hãy xem ai sẽ đến và phản ánh nó trong giao diện người dùng.

  1. Trong StackBlitz, hãy chuyển đến index.html .
  2. Trong description-container , hãy thêm một phần tử mới với ID của number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Tiếp theo, đăng ký người nghe cho bộ sưu tập attendees và đếm số lượng câu trả lời :

  1. Trong StackBlitz, hãy chuyển đến index.js .
  2. Ở cuối hàm main() , hãy thêm đoạn mã sau để lắng nghe trạng thái RSVP và đếm lần nhấp chuột.
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

Cuối cùng, hãy đánh dấu nút tương ứng với trạng thái hiện tại.

  1. Tạo một chức năng kiểm tra xem UID xác thực hiện tại có mục nhập trong bộ sưu tập attendees hay không, sau đó đặt lớp nút để được clicked .
    // ...
    // Listen for attendee list
    function subscribeCurrentRSVP(user) {
      const ref = doc(db, 'attendees', user.uid);
      rsvpListener = onSnapshot(ref, doc => {
        if (doc && doc.data()) {
          const attendingResponse = doc.data().attending;
    
          // Update css classes for buttons
          if (attendingResponse) {
            rsvpYes.className = 'clicked';
            rsvpNo.className = '';
          } else {
            rsvpYes.className = '';
            rsvpNo.className = 'clicked';
          }
        }
      });
    }
    
  2. Ngoài ra, hãy tạo một chức năng để hủy đăng ký. Điều này sẽ được sử dụng khi người dùng đăng xuất.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Gọi các chức năng từ trình nghe Xác thực.
    // ...
    // Listen to the current Auth state
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
          // Show guestbook to logged-in users
          guestbookContainer.style.display = 'block';
    
          // Subscribe to the guestbook collection
          subscribeGuestbook();
          // Subcribe to the user's RSVP
          subscribeCurrentRSVP(user);
        } else {
          startRsvpButton.textContent = 'RSVP';
          // Hide guestbook for non-logged-in users
          guestbookContainer.style.display = 'none'
          ;
          // Unsubscribe from the guestbook collection
          unsubscribeGuestbook();
          // Unsubscribe from the guestbook collection
          unsubscribeCurrentRSVP();
        }
      });
    
  4. Hãy thử đăng nhập với tư cách nhiều người dùng và xem số lượng tăng lên với mỗi lần nhấp vào nút thêm.

Bản xem trước ứng dụng

ảnh chụp màn hình của bước này

11. Xin chúc mừng!

Bạn đã sử dụng Firebase để xây dựng một ứng dụng web tương tác, thời gian thực!

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

  • Xác thực Firebase
  • FirebaseUI
  • Cloud Firestore
  • Quy tắc bảo mật của Firebase

Bước tiếp theo

  • Bạn muốn tìm hiểu thêm về Quy trình làm việc dành cho nhà phát triển Firebase? Xem bộ mã trình mô phỏng Firebase để tìm hiểu về cách kiểm tra và chạy ứng dụng của bạn hoàn toàn cục bộ.
  • Bạn muốn tìm hiểu thêm về các sản phẩm Firebase khác? Có thể bạn muốn lưu trữ các tệp hình ảnh mà người dùng tải lên? Hoặc gửi thông báo cho người dùng của bạn? Xem bảng mã web Firebase để biết bảng mã hỗ trợ chuyên sâu hơn về nhiều sản phẩm Firebase khác dành cho web.
  • Bạn muốn tìm hiểu thêm về Cloud Firestore? Có thể bạn muốn tìm hiểu về các bộ sưu tập con và giao dịch? Hãy truy cập trang web codelab Cloud Firestore để có một phần mã codelab chuyên sâu hơn về Cloud Firestore. Hoặc xem chuỗi video này trên YouTube để tìm hiểu về Cloud Firestore !

Tìm hiểu thêm

Nó diễn ra như thế nào?

Chúng tôi rất thích những phản hồi của bạn! Vui lòng điền vào một (rất) mẫu ngắn ở đây .