Poznaj Firebase w przeglądarce

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

1. Przegląd

Podczas tego ćwiczenia z programowania nauczysz się podstaw Firebase dotyczących tworzenia interaktywnych aplikacji internetowych. Zbudujesz aplikację odpowiedzi na pytania o wydarzenie i księgę gości, korzystając z kilku produktów Firebase.

zrzut ekranu tego kroku

Czego się nauczysz

  • Uwierzytelniaj użytkowników za pomocą Uwierzytelniania Firebase i FirebaseUI.
  • Synchronizuj dane za pomocą Cloud Firestore.
  • Napisz reguły zabezpieczeń Firebase, aby zabezpieczyć bazę danych.

Co będziesz potrzebował

  • Wybrana przeglądarka, taka jak Chrome.
  • Dostęp do stackblitz.com (bez konta lub logowania).
  • Konto Google, takie jak konto Gmail. Zalecamy konto e-mail, którego już używasz dla swojego konta GitHub. Pozwala to na korzystanie z zaawansowanych funkcji w StackBlitz.
  • Przykładowy kod ćwiczenia z programowania. Zobacz następny krok, aby dowiedzieć się, jak uzyskać kod.

2. Uzyskaj kod startowy

W tym ćwiczeniu z programowania tworzysz aplikację przy użyciu StackBlitz , edytora online, który ma kilka zintegrowanych przepływów pracy Firebase. Stackblitz nie wymaga instalacji oprogramowania ani specjalnego konta StackBlitz.

StackBlitz pozwala udostępniać projekty innym. Inne osoby, które mają adres URL Twojego projektu StackBlitz, mogą zobaczyć Twój kod i rozwidlić Twój projekt, ale nie mogą edytować Twojego projektu StackBlitz.

  1. Przejdź do tego adresu URL, aby uzyskać kod startowy: https://stackblitz.com/edit/firebase-gtk-web-start
  2. U góry strony StackBlitz kliknij rozwidlenie :

zrzut ekranu tego kroku

Masz teraz kopię kodu startowego jako swój własny projekt StackBlitz, który ma unikalną nazwę wraz z unikalnym adresem URL. Wszystkie twoje pliki i zmiany są zapisywane w tym projekcie StackBlitz.

3. Edytuj informacje o wydarzeniu

Materiały początkowe do tego ćwiczenia z programowania zapewniają pewną strukturę aplikacji sieci Web, w tym niektóre arkusze stylów i kilka kontenerów HTML dla aplikacji. W dalszej części tego ćwiczenia z programowania podłączysz te kontenery do Firebase.

Na początek zapoznajmy się trochę z interfejsem StackBlitz.

  1. W StackBlitz otwórz plik index.html .
  2. Znajdź event-details-container i description-container , a następnie spróbuj edytować niektóre szczegóły wydarzenia.

Gdy edytujesz tekst, automatyczne przeładowanie strony w StackBlitz wyświetla nowe szczegóły wydarzenia. Fajnie, tak?

<!-- ... -->

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

<!-- ... -->

Podgląd Twojej aplikacji powinien wyglądać mniej więcej tak:

Podgląd aplikacji

zrzut ekranu tego kroku

4. Utwórz i skonfiguruj projekt Firebase

Wyświetlanie informacji o wydarzeniu jest świetne dla gości, ale samo pokazywanie wydarzeń nie jest zbyt przydatne dla nikogo. Dodajmy do tej aplikacji dynamiczną funkcjonalność. W tym celu musisz podłączyć Firebase do swojej aplikacji. Aby rozpocząć korzystanie z Firebase, musisz utworzyć i skonfigurować projekt Firebase.

Utwórz projekt Firebase

  1. Zaloguj się do Firebase .
  2. W konsoli Firebase kliknij Dodaj projekt (lub Utwórz projekt ), a następnie nazwij swój projekt Firebase Firebase-Web-Codelab .

    zrzut ekranu tego kroku

  3. Przejrzyj opcje tworzenia projektu. Po wyświetleniu monitu zaakceptuj warunki Firebase. Na ekranie Google Analytics kliknij „Nie włączaj”, ponieważ nie będziesz używać Analytics dla tej aplikacji.

Aby dowiedzieć się więcej o projektach Firebase, zobacz Omówienie projektów Firebase .

Włącz i skonfiguruj produkty Firebase w konsoli

Tworzona aplikacja korzysta z kilku produktów Firebase dostępnych dla aplikacji internetowych:

  • Uwierzytelnianie Firebase i interfejs użytkownika Firebase , aby łatwo umożliwić użytkownikom logowanie się do Twojej aplikacji.
  • Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianie danych.
  • Reguły bezpieczeństwa Firebase, aby zabezpieczyć bazę danych.

Niektóre z tych produktów wymagają specjalnej konfiguracji lub muszą być włączone za pomocą konsoli Firebase.

Włącz logowanie przez e-mail na potrzeby Uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji internetowej, podczas tego ćwiczenia z programowania użyjesz metody logowania e- mail/hasło :

  1. W lewym panelu konsoli Firebase kliknij Kompiluj > Uwierzytelnianie . Następnie kliknij Rozpocznij . Jesteś teraz na pulpicie nawigacyjnym uwierzytelniania, w którym możesz zobaczyć zarejestrowanych użytkowników, skonfigurować dostawców logowania i zarządzać ustawieniami.

    zrzut ekranu tego kroku

  2. Wybierz kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do karty).

    zrzut ekranu tego kroku

  3. Kliknij E-mail/hasło w opcjach dostawcy, przełącz przełącznik na Włącz , a następnie kliknij Zapisz .

    zrzut ekranu tego kroku

Skonfiguruj Cloud Firestore

Aplikacja internetowa używa Cloud Firestore do zapisywania wiadomości na czacie i odbierania nowych wiadomości na czacie.

Oto jak skonfigurować Cloud Firestore:

  1. W lewym panelu konsoli Firebase kliknij Buduj > Baza danych Firestore . Następnie kliknij Utwórz bazę danych .
  2. Kliknij Utwórz bazę danych .

    zrzut ekranu tego kroku

  3. Wybierz opcję Uruchom w trybie testowym . Przeczytaj zastrzeżenie dotyczące zasad bezpieczeństwa. Tryb testowy zapewnia, że ​​możesz swobodnie pisać do bazy danych podczas tworzenia. Kliknij Dalej .

    zrzut ekranu tego kroku

  4. Wybierz lokalizację swojej bazy danych (możesz po prostu użyć domyślnej). Pamiętaj jednak, że tej lokalizacji nie można później zmienić.

    zrzut ekranu tego kroku

  5. Kliknij Gotowe .

5. Dodaj i skonfiguruj Firebase

Teraz, gdy masz już utworzony projekt Firebase i włączone są niektóre usługi, musisz podać kod, którego chcesz używać Firebase, a także jakiego projektu Firebase chcesz użyć.

Dodaj biblioteki Firebase

Aby Twoja aplikacja korzystała z Firebase, musisz dodać do niej biblioteki Firebase. Można to zrobić na wiele sposobów, zgodnie z opisem w dokumentacji Firebase . Na przykład możesz dodać biblioteki z sieci CDN Google lub zainstalować je lokalnie za pomocą npm, a następnie spakować je w swojej aplikacji, jeśli używasz Browserify.

StackBlitz zapewnia automatyczne łączenie, dzięki czemu możesz dodawać biblioteki Firebase za pomocą instrukcji importu. Będziesz używać modularnych (v9) wersji bibliotek, które pomagają zmniejszyć ogólny rozmiar strony internetowej dzięki procesowi zwanemu „potrząsaniem drzewa”. Więcej informacji o modułowych pakietach SDK znajdziesz w dokumentacji .

Aby utworzyć tę aplikację, użyj bibliotek Firebase Authentication, FirebaseUI i Cloud Firestore. W przypadku tego ćwiczenia z programowania na początku index.js znajdują się już następujące instrukcje importu, a w miarę postępów będziemy importować więcej metod z każdej biblioteki Firebase:

// 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';

Dodaj aplikację internetową Firebase do projektu Firebase

  1. Wróć do konsoli Firebase i przejdź do strony przeglądu projektu, klikając Przegląd projektu w lewym górnym rogu.
  2. Na środku strony przeglądu projektu kliknij ikonę sieci ikona aplikacji internetowej aby utworzyć nową aplikację internetową Firebase.

    zrzut ekranu tego kroku

  3. Zarejestruj aplikację pod pseudonimem Web App .
  4. W przypadku tego ćwiczenia z programowania NIE zaznaczaj pola obok Skonfiguruj również Hosting Firebase dla tej aplikacji . Na razie będziesz korzystać z okienka podglądu StackBlitz.
  5. Kliknij Zarejestruj aplikację .

    zrzut ekranu tego kroku

  6. Skopiuj obiekt konfiguracyjny Firebase do schowka.

    zrzut ekranu tego kroku

  7. Kliknij Przejdź do konsoli .Dodaj obiekt konfiguracji Firebase do swojej aplikacji:
  8. Wróć do StackBlitz, przejdź do index.js .
  9. Znajdź wiersz komentarza Add Firebase project configuration object here , a następnie wklej fragment kodu konfiguracji tuż pod komentarzem.
  10. Dodaj wywołanie funkcji initializeApp , aby skonfigurować Firebase przy użyciu unikalnej konfiguracji projektu Firebase.
    // ...
// 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. Dodaj logowanie użytkownika (RSVP)

Po dodaniu Firebase do aplikacji możesz skonfigurować przycisk RSVP, który rejestruje osoby korzystające z uwierzytelniania Firebase .

Uwierzytelnij swoich użytkowników za pomocą logowania e-mail i FirebaseUI

Będziesz potrzebować przycisku RSVP, który prosi użytkownika o zalogowanie się przy użyciu swojego adresu e-mail. Możesz to zrobić, podłączając FirebaseUI do przycisku RSVP.FirebaseUI to biblioteka, która zapewnia gotowy interfejs użytkownika na górze Firebase Auth.

FirebaseUI wymaga konfiguracji (zobacz opcje w dokumentacji ), która wykonuje dwie rzeczy:

  • Informuje FirebaseUI, że chcesz używać metody logowania przez e-mail/hasło .
  • Obsługuje wywołanie zwrotne dla pomyślnego logowania i zwraca wartość false, aby uniknąć przekierowania. Nie chcesz, aby strona się odświeżała, ponieważ tworzysz jednostronicową aplikację internetową.

Dodaj kod, aby zainicjować uwierzytelnianie FirebaseUI

  1. W StackBlitz przejdź do index.js .
  2. U góry znajdź instrukcję importu firebase/auth , a następnie dodaj getAuth i EmailAuthProvider , na przykład:
    // ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';
  3. Zapisz referencję do obiektu auth zaraz po initializeApp , na przykład:
    initializeApp(firebaseConfig);
auth = getAuth();
  4. Zwróć uwagę, że konfiguracja FirebaseUI jest już podana w kodzie początkowym. Jest już skonfigurowany do korzystania z dostawcy uwierzytelniania poczty e-mail.
  5. Na dole funkcji main() w index.js dodaj instrukcję inicjalizacji FirebaseUI, na przykład:
    async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

Dodaj przycisk RSVP do HTML

  1. W StackBlitz przejdź do pliku index.html .
  2. Dodaj kod HTML przycisku RSVP w event-details-container jak pokazano w poniższym przykładzie.

    Uważaj, aby użyć tych samych wartości id , jak pokazano poniżej, ponieważ w przypadku tego ćwiczenia z programowania istnieją już punkty zaczepienia dla tych konkretnych identyfikatorów w index.js .

    Zauważ, że w pliku index.html znajduje się kontener o identyfikatorze firebaseui-auth-container . To jest identyfikator, który przekażesz do FirebaseUI w celu przechowywania swojego loginu.
    <!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->
    Podgląd aplikacji

     zrzut ekranu tego kroku

  3. Skonfiguruj odbiornik na przycisku RSVP i wywołaj funkcję startową FirebaseUI. To informuje FirebaseUI, że chcesz zobaczyć okno logowania.

    Dodaj następujący kod na końcu funkcji main() w index.js :
    async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();

Przetestuj logowanie do aplikacji

  1. W oknie podglądu StackBlitz kliknij przycisk RSVP, aby zalogować się do aplikacji.
    • Do tego ćwiczenia z programowania możesz użyć dowolnego adresu e-mail, nawet fałszywego, ponieważ nie konfigurujesz kroku weryfikacji adresu e-mail dla tego ćwiczenia z programowania.
    • Jeśli zobaczysz komunikat o błędzie z informacją, że auth/operation-not-allowed lub The given sign-in provider is disabled for this Firebase project , upewnij się, że w konsoli Firebase włączono e-mail/hasło jako dostawcę logowania.
    Podgląd aplikacji

     zrzut ekranu tego kroku

  2. Przejdź do panelu Uwierzytelnianie w konsoli Firebase. Na karcie Użytkownicy powinieneś zobaczyć informacje o koncie, które wprowadziłeś, aby zalogować się do aplikacji.

    zrzut ekranu tego kroku

Dodaj stan uwierzytelniania do interfejsu użytkownika

Następnie upewnij się, że interfejs użytkownika odzwierciedla fakt, że jesteś zalogowany.

Użyjesz wywołania zwrotnego odbiornika stanu Uwierzytelniania Firebase, który jest powiadamiany o każdej zmianie stanu logowania użytkownika. Jeśli obecnie jest zalogowany użytkownik, Twoja aplikacja zmieni przycisk „RSVP” na przycisk „Wyloguj”.

  1. W StackBlitz przejdź do index.js .
  2. U góry znajdź instrukcję importu firebase/auth , a następnie dodaj signOut i onAuthStateChanged , na przykład:
    // ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';
  3. Dodaj następujący kod na dole funkcji main() :
    async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();
  4. W detektorze przycisków sprawdź, czy jest obecny użytkownik i wyloguj się. Aby to zrobić, zastąp bieżący startRsvpButton.addEventListener następującym:
    // ...
// 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);
  }
});

Teraz przycisk w Twojej aplikacji powinien pokazywać WYLOGUJ i powinien przełączyć się z powrotem na RSVP po kliknięciu.

Podgląd aplikacji

zrzut ekranu tego kroku

7. Napisz wiadomości do Cloud Firestore

Świadomość, że użytkownicy nadchodzą, jest świetna, ale dajmy gościom coś innego do zrobienia w aplikacji. A gdyby mogli zostawiać wiadomości w księdze gości? Mogą podzielić się, dlaczego są podekscytowani przyjazdem lub kim mają nadzieję spotkać.

Aby przechowywać wiadomości czatu, które użytkownicy piszą w aplikacji, użyj Cloud Firestore .

Model danych

Cloud Firestore to baza danych NoSQL, a dane przechowywane w bazie danych są podzielone na kolekcje, dokumenty, pola i podkolekcje. Każdą wiadomość z czatu będziesz przechowywać jako dokument w zbiorze najwyższego poziomu o nazwie guestbook .

Grafika modelu danych Firestore przedstawiająca kolekcję księgi gości z wieloma dokumentami wiadomości

Dodaj wiadomości do Firestore

W tej sekcji dodasz funkcjonalność umożliwiającą użytkownikom pisanie nowych wiadomości do bazy danych. Najpierw dodajesz kod HTML elementów interfejsu użytkownika (pole wiadomości i przycisk wysyłania). Następnie dodajesz kod, który łączy te elementy z bazą danych.

Aby dodać elementy interfejsu użytkownika pola wiadomości i przycisku wysyłania:

  1. W StackBlitz przejdź do pliku index.html .
  2. Znajdź guestbook-container , a następnie dodaj następujący kod HTML, aby utworzyć formularz z polem wprowadzania wiadomości i przyciskiem Wyślij.
    <!-- ... -->

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

<!-- ... -->

Podgląd aplikacji

zrzut ekranu tego kroku

Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje uruchomienie poniższego fragmentu kodu. Dodaje zawartość pola wejściowego wiadomości do kolekcji guestbook bazy danych. W szczególności metoda addDoc dodaje treść wiadomości do nowego dokumentu (z automatycznie wygenerowanym identyfikatorem) do kolekcji guestbook .

  1. W StackBlitz przejdź do index.js .
  2. U góry znajdź instrukcję importu firebase/firestore firestore, a następnie dodaj getFirestore , addDoc i collection , na przykład:
    // ...

// 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. Teraz zapiszemy odwołanie do obiektu db Firestore zaraz po initializeApp :
    initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
  4. Na dole funkcji main() dodaj następujący kod.

    Pamiętaj, że auth.currentUser.uid to odwołanie do automatycznie wygenerowanego unikalnego identyfikatora, który Uwierzytelnianie Firebase nadaje wszystkim zalogowanym użytkownikom.
    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();

Pokaż księgę gości tylko zalogowanym użytkownikom

Nie chcesz, żeby ktokolwiek widział czat gości. Jedną z rzeczy, które możesz zrobić, aby zabezpieczyć czat, jest zezwolenie tylko zalogowanym użytkownikom na przeglądanie księgi gości. To powiedziawszy, w przypadku własnych aplikacji warto również zabezpieczyć bazę danych za pomocą reguł zabezpieczeń Firebase . (Więcej informacji na temat reguł bezpieczeństwa znajduje się w dalszej części ćwiczenia z programowania).

  1. W StackBlitz przejdź do index.js .
  2. Edytuj odbiornik onAuthStateChanged , aby ukryć i wyświetlić księgę gości.
    // ...

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

Przetestuj wysyłanie wiadomości

  1. Upewnij się, że jesteś zalogowany w aplikacji.
  2. Wpisz wiadomość, na przykład „Cześć!”, a następnie kliknij WYŚLIJ .

To działanie zapisuje wiadomość w Twojej bazie danych Cloud Firestore. Jednak nie zobaczysz jeszcze komunikatu w rzeczywistej aplikacji internetowej, ponieważ nadal musisz zaimplementować pobieranie danych. Zrobisz to później.

Ale możesz zobaczyć nowo dodaną wiadomość w konsoli Firebase.

W konsoli Firebase, w panelu bazy danych Firestore , powinieneś zobaczyć kolekcję guestbook z nowo dodaną wiadomością. Jeśli będziesz nadal wysyłać wiadomości, Twoja kolekcja księgi gości będzie zawierać wiele dokumentów, takich jak:

Konsola Firebase

zrzut ekranu tego kroku

8. Przeczytaj wiadomości

Synchronizuj wiadomości

Fajnie, że goście mogą pisać wiadomości do bazy danych, ale nie widzą ich jeszcze w aplikacji.

Aby wyświetlać komunikaty, musisz dodać detektory, które uruchamiają się po zmianie danych, a następnie utworzyć element interfejsu użytkownika, który pokazuje nowe komunikaty.

Dodasz kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. Najpierw dodaj sekcję w kodzie HTML, aby wyświetlić wiadomości:

  1. W StackBlitz przejdź do pliku index.html .
  2. W guestbook-container dodaj nową sekcję z identyfikatorem guestbook .
    <!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Następnie zarejestruj odbiornik, który nasłuchuje zmian wprowadzonych do danych:

  1. W StackBlitz przejdź do index.js .
  2. U góry znajdź instrukcję importu firebase/firestore firestore, a następnie dodaj query , orderBy i onSnapshot , na przykład:
    // ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
  3. Na dole funkcji main() dodaj następujący kod, aby przejść przez wszystkie dokumenty (wiadomości księgi gości) w bazie danych. Aby dowiedzieć się więcej o tym, co dzieje się w tym kodzie, przeczytaj informacje pod fragmentem kodu.
    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();

Aby nasłuchiwać wiadomości w bazie danych, utworzyłeś zapytanie dotyczące określonej kolekcji za pomocą funkcji collection . Powyższy kod nasłuchuje zmian w kolekcji guestbook , w której przechowywane są wiadomości czatu. Wiadomości są również uporządkowane według daty, używając orderBy('timestamp', 'desc') do wyświetlania najnowszych wiadomości na górze.

Funkcja onSnapshot przyjmuje dwa parametry: zapytanie do użycia i funkcję zwrotną. Funkcja wywołania zwrotnego jest wyzwalana, gdy w dokumentach pasujących do zapytania zostaną wprowadzone jakiekolwiek zmiany. Może tak być, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej informacji znajdziesz w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

Cloud Firestore automatycznie i natychmiastowo synchronizuje dane z klientami subskrybowanymi do bazy danych.

  • Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w aplikacji. Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
  • Jeśli otworzysz obszar roboczy w wielu oknach lub kartach, wiadomości będą synchronizowane w czasie rzeczywistym między kartami.
  • (Opcjonalnie) Możesz spróbować ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Baza danych w konsoli Firebase; wszelkie zmiany powinny pojawić się w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

Podgląd aplikacji

zrzut ekranu tego kroku

9. Skonfiguruj podstawowe zasady bezpieczeństwa

Początkowo konfigurujesz Cloud Firestore do korzystania z trybu testowego, co oznacza, że ​​Twoja baza danych jest otwarta na odczyty i zapisy. Jednak należy używać trybu testowego tylko na bardzo wczesnych etapach rozwoju. Najlepszym rozwiązaniem jest skonfigurowanie reguł zabezpieczeń dla bazy danych podczas tworzenia aplikacji. Bezpieczeństwo powinno być integralną częścią struktury i zachowania Twojej aplikacji.

Reguły bezpieczeństwa pozwalają kontrolować dostęp do dokumentów i zbiorów w Twojej bazie danych. Elastyczna składnia reguł pozwala tworzyć reguły, które dopasowują wszystko, od wszystkich zapisów do całej bazy danych, po operacje na określonym dokumencie.

W konsoli Firebase możesz pisać reguły bezpieczeństwa dla Cloud Firestore:

  1. W sekcji Kompilacja konsoli Firebase kliknij Baza danych Firestore , a następnie wybierz kartę Reguły (lub kliknij tutaj, aby przejść bezpośrednio do karty Reguły ).
  2. Powinieneś zobaczyć następujące domyślne reguły bezpieczeństwa, z limitem czasu publicznego dostępu za kilka tygodni od dzisiaj.

zrzut ekranu tego kroku

Zidentyfikuj kolekcje

Najpierw zidentyfikuj kolekcje, w których aplikacja zapisuje dane.

  1. Usuń istniejącą klauzulę match /{document=**} , aby Twoje reguły wyglądały tak:
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
  2. W match /databases/{database}/documents wskaż kolekcję, którą chcesz zabezpieczyć:
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Dodaj zasady bezpieczeństwa

Ponieważ użyto UID uwierzytelniania jako pola w każdym dokumencie księgi gości, można uzyskać UID uwierzytelniania i sprawdzić, czy każda osoba próbująca pisać do dokumentu ma pasujący UID uwierzytelniania.

  1. Dodaj reguły odczytu i zapisu do swojego zestawu reguł, jak pokazano poniżej:
    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. Kliknij Opublikuj , aby wdrożyć nowe reguły.Teraz, w przypadku księgi gości, tylko zalogowani użytkownicy mogą czytać wiadomości (dowolne wiadomości!), ale możesz utworzyć wiadomość tylko przy użyciu swojego identyfikatora użytkownika. Nie zezwalamy również na edytowanie ani usuwanie wiadomości.

Dodaj reguły walidacji

  1. Dodaj walidację danych, aby upewnić się, że wszystkie oczekiwane pola są obecne w dokumencie:
    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. Kliknij Opublikuj , aby wdrożyć nowe reguły.

Zresetuj słuchaczy

Ponieważ Twoja aplikacja pozwala teraz logować się tylko uwierzytelnionym użytkownikom, powinieneś przenieść zapytanie firestore księgi gości do odbiornika uwierzytelniania. W przeciwnym razie wystąpią błędy uprawnień, a aplikacja zostanie rozłączona, gdy użytkownik się wyloguje.

  1. W StackBlitz przejdź do index.js .
  2. Przeciągnij kolekcję księgi gości onSnapshot listener do nowej funkcji o nazwie subscribeGuestbook . Przypisz również wyniki funkcji onSnapshot do zmiennej guestbookListener .

    Odbiornik Firestore onSnapshot zwraca funkcję anulowania subskrypcji, której można później użyć do anulowania nasłuchiwania migawek.
    // ...
// 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. Dodaj nową funkcję pod spodem o nazwie unsubscribeGuestbook . Sprawdź, czy zmienna guestbookListener nie ma wartości null, a następnie wywołaj funkcję, aby anulować słuchacza.
    // ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}

Na koniec dodaj nowe funkcje do wywołania zwrotnego onAuthStateChanged .

  1. Dodaj subscribeGuestbook() na dole if (user) .
  2. Dodaj unsubscribeGuestbook() na dole instrukcji 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. Dodatkowy krok: Przećwicz to, czego się nauczyłeś

Zapisz status RSVP uczestnika

W tej chwili Twoja aplikacja pozwala ludziom rozpocząć rozmowę, jeśli są zainteresowani wydarzeniem. Ponadto jedynym sposobem, aby dowiedzieć się, czy ktoś nadchodzi, jest opublikowanie tego na czacie. Zorganizujmy się i dajmy ludziom znać, ile osób przyjdzie.

Dodasz przełącznik, aby zarejestrować osoby, które chcą wziąć udział w wydarzeniu, a następnie zliczyć liczbę osób, które przyjdą.

  1. W StackBlitz przejdź do pliku index.html .
  2. W guestbook-container dodaj zestaw przycisków TAK i NIE , np.:
    <!-- ... -->
  <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>
<!-- ... -->

Podgląd aplikacji

zrzut ekranu tego kroku

Następnie zarejestruj słuchacza dla kliknięć przycisków. Jeśli użytkownik kliknie YES , użyj jego UID uwierzytelniania, aby zapisać odpowiedź w bazie danych.

  1. W StackBlitz przejdź do index.js .
  2. U góry znajdź instrukcję importu firebase/firestore firestore, a następnie dodaj doc , setDoc i where , na przykład:
    // ...
// 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. Na dole funkcji main() dodaj następujący kod, aby nasłuchiwać statusu RSVP:
    async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();
  4. Następnie utwórz nową kolekcję o nazwie attendees , a następnie zarejestruj odwołanie do dokumentu, jeśli zostanie kliknięty przycisk RSVP. Ustaw to odwołanie na true lub false w zależności od tego, który przycisk zostanie kliknięty.

    Najpierw dla 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);
  }
};
    Następnie to samo dla rsvpNo , ale z wartością 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);
  }
};

Zaktualizuj swoje zasady bezpieczeństwa

Ponieważ masz już skonfigurowane pewne reguły, nowe dane, które dodajesz za pomocą przycisków, zostaną odrzucone.

Zezwalaj na dodawanie do kolekcji attendees

Musisz zaktualizować reguły, aby umożliwić dodawanie do kolekcji attendees .

  1. W przypadku kolekcji attendees , ponieważ użyłeś identyfikatora UID uwierzytelnienia jako nazwy dokumentu, możesz go pobrać i sprawdzić, czy uid osoby przesyłającej jest taki sam, jak dokument, który piszą. Umożliwisz wszystkim odczytanie listy uczestników (ponieważ nie ma tam prywatnych danych), ale tylko twórca powinien mieć możliwość jej aktualizacji.
    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. Kliknij Opublikuj , aby wdrożyć nowe reguły.

Dodaj reguły walidacji

  1. Dodaj kilka reguł walidacji danych, aby upewnić się, że wszystkie oczekiwane pola są obecne w dokumencie:
    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. Nie zapomnij kliknąć Opublikuj , aby wdrożyć swoje reguły!

(Opcjonalnie) Możesz teraz wyświetlić wyniki kliknięcia przycisków. Przejdź do panelu Cloud Firestore w konsoli Firebase.

Przeczytaj status RSVP

Teraz, gdy masz już nagrane odpowiedzi, zobaczmy, kto przyjdzie, i uwzględnij to w interfejsie użytkownika.

  1. W StackBlitz przejdź do pliku index.html .
  2. W description-container dodaj nowy element z identyfikatorem number-attending .
    <!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Następnie zarejestruj słuchacza do kolekcji attendees i policz liczbę odpowiedzi TAK :

  1. W StackBlitz przejdź do index.js .
  2. Na dole funkcji main() dodaj następujący kod, aby nasłuchiwać statusu RSVP i policzyć kliknięcia TAK .
    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();

Na koniec podświetlmy przycisk odpowiadający aktualnemu statusowi.

  1. Utwórz funkcję, która sprawdza, czy bieżący UID uwierzytelniania ma wpis w kolekcji attendees , a następnie ustaw klasę clicked na click.
    // ...
// 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. Stwórzmy też funkcję do wypisania się. Będzie to używane, gdy użytkownik się wyloguje.
    // ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}
  3. Wywołaj funkcje z odbiornika uwierzytelniania.
    // ...
// 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. Spróbuj zalogować się jako wielu użytkowników i zobacz, jak liczba wzrasta z każdym dodatkowym kliknięciem przycisku TAK .

Podgląd aplikacji

zrzut ekranu tego kroku

11. Gratulacje!

Używasz Firebase do tworzenia interaktywnej aplikacji internetowej działającej w czasie rzeczywistym!

Co omówiliśmy

  • Uwierzytelnianie Firebase
  • FirebaseUI
  • Cloud Firestore
  • Zasady bezpieczeństwa Firebase

Następne kroki

  • Chcesz dowiedzieć się więcej o przepływie pracy dla programistów Firebase? Zapoznaj się z ćwiczeniem z kodowania emulatora Firebase , aby dowiedzieć się, jak testować i uruchamiać swoją aplikację całkowicie lokalnie.
  • Chcesz dowiedzieć się więcej o innych produktach Firebase? Może chcesz przechowywać pliki graficzne przesyłane przez użytkowników? Lub wysyłać powiadomienia do użytkowników? Zajrzyj do internetowego ćwiczenia z programowania Firebase, które zawiera więcej informacji na temat wielu innych produktów Firebase dla internetu.
  • Chcesz dowiedzieć się więcej o Cloud Firestore? A może chcesz poznać podkolekcje i transakcje? Przejdź do laboratorium programowania internetowego Cloud Firestore, aby zapoznać się z bardziej szczegółowymi ćwiczeniami na temat Cloud Firestore. Lub obejrzyj tę serię YouTube, aby poznać Cloud Firestore !

Ucz się więcej

Jak poszło?

Będziemy wdzięczni za Twoją opinię! Proszę wypełnić (bardzo) krótki formularz tutaj .