Ćwiczenia z programowania internetowego Firebase

1. Przegląd

W tym laboratorium z programowania dowiesz się, jak używać Firebase do łatwego tworzenia aplikacji internetowych poprzez implementację i wdrażanie klienta czatu przy użyciu produktów i usług Firebase.

3b1284f5144b54f6.png

Czego się nauczysz

  • Synchronizuj dane za pomocą Cloud Firestore i Cloud Storage for Firebase.
  • Uwierzytelnij swoich użytkowników za pomocą Uwierzytelniania Firebase.
  • Wdróż swoją aplikację internetową w Hostingu Firebase.
  • Wysyłaj powiadomienia za pomocą Firebase Cloud Messaging.
  • Zbierz dane o wydajności swojej aplikacji internetowej.

Co będziesz potrzebował

  • Wybrany edytor IDE/tekstu, taki jak WebStorm , Atom , Sublime lub VS Code
  • Menedżer pakietów npm , który zazwyczaj jest dostarczany z Node.js
  • Terminal/konsola
  • Wybrana przeglądarka, taka jak Chrome
  • Przykładowy kod ćwiczenia z programowania (zobacz następny krok ćwiczenia z programowania, aby dowiedzieć się, jak uzyskać kod).

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub laboratorium z poziomu wiersza poleceń:

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

Alternatywnie, jeśli nie masz zainstalowanego git, możesz pobrać repozytorium jako plik ZIP .

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj katalog 📁 web-start ze sklonowanego repozytorium. Ten katalog web-start zawiera kod startowy do ćwiczenia z programowania, które będzie w pełni funkcjonalną aplikacją internetową do czatowania.

3. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

  1. Zaloguj się do Firebase .
  2. W konsoli Firebase kliknij Dodaj projekt , a następnie nazwij swój projekt Firebase FriendlyChat . Zapamiętaj identyfikator projektu dla swojego projektu Firebase.
  3. Odznacz Włącz Google Analytics dla tego projektu
  4. Kliknij opcję Utwórz projekt .

Aplikacja, którą zamierzamy zbudować, korzysta z produktów Firebase dostępnych dla aplikacji internetowych:

  • Uwierzytelnianie Firebase , aby łatwo umożliwić użytkownikom logowanie się w Twojej aplikacji.
  • Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianie danych.
  • Cloud Storage dla Firebase do zapisywania plików w chmurze.
  • Hosting Firebase do hostowania i obsługi Twoich zasobów.
  • Firebase Cloud Messaging do wysyłania powiadomień push i wyświetlania powiadomień w wyskakujących okienkach przeglądarki.
  • Monitorowanie wydajności Firebase do zbierania danych o wydajności użytkowników dla Twojej aplikacji.

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

Dodaj aplikację internetową Firebase do projektu

  1. Kliknij ikonę sieci 58d6543a156e56f9.png aby utworzyć nową aplikację internetową Firebase.
  2. Zarejestruj aplikację pod pseudonimem Przyjazny czat , a następnie zaznacz pole obok opcji Skonfiguruj również Hosting Firebase dla tej aplikacji . Kliknij Zarejestruj aplikację .
  3. W następnym kroku zobaczysz obiekt konfiguracyjny. Skopiuj tylko obiekt JS (nie otaczający go HTML) do firebase-config.js

Zarejestruj zrzut ekranu aplikacji internetowej

Włącz logowanie przez Google na potrzeby Uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji internetowej przy użyciu ich kont Google, użyjemy metody logowania Google .

Musisz włączyć logowanie przez Google :

  1. W konsoli Firebase znajdź sekcję Build w lewym panelu.
  2. Kliknij Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do tego miejsca).
  3. Włącz dostawcę logowania Google , a następnie kliknij Zapisz .
  4. Ustaw publiczną nazwę swojej aplikacji na Przyjazny czat i wybierz z menu rozwijanego adres e-mail wsparcia projektu .
  5. Skonfiguruj ekran akceptacji OAuth w Google Cloud Console i dodaj logo:

d89fb3873b5d36ae.png

Włącz Cloud Firestore

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

Musisz włączyć Cloud Firestore:

  1. W sekcji Buduj w konsoli Firebase kliknij Baza danych Firestore .
  2. Kliknij Utwórz bazę danych w panelu Cloud Firestore.

729991a081e7cd5.png

  1. Wybierz opcję Uruchom w trybie testowym , a następnie kliknij Dalej po przeczytaniu zastrzeżenia dotyczącego reguł bezpieczeństwa.

Tryb testowy zapewnia, że ​​możemy swobodnie pisać do bazy danych podczas tworzenia. W dalszej części tego ćwiczenia z programowania nasza baza danych będzie bezpieczniejsza.

77e4986cbeaf9dee.png

  1. Ustaw lokalizację, w której przechowywane są Twoje dane Cloud Firestore. Możesz pozostawić to ustawienie domyślne lub wybrać region blisko Ciebie. Kliknij Gotowe , aby udostępnić Firestore.

9f2bb0d4e7ca49c7.png

Włącz przechowywanie w chmurze

Aplikacja internetowa korzysta z Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Musisz włączyć Cloud Storage:

  1. W sekcji Kompilacja konsoli Firebase kliknij Pamięć .
  2. Jeśli nie ma przycisku Rozpocznij , oznacza to, że przechowywanie w chmurze jest już włączone i nie musisz wykonywać poniższych czynności.
  3. Kliknij Rozpocznij .
  4. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa dla swojego projektu Firebase, a następnie kliknij Dalej .

Dzięki domyślnym regułom bezpieczeństwa każdy uwierzytelniony użytkownik może zapisywać wszystko w Cloud Storage. W dalszej części tego ćwiczenia z programowania zwiększymy bezpieczeństwo naszego magazynu.

62f1afdcd1260127.png

  1. Lokalizacja Cloud Storage jest wstępnie wybrana z tym samym regionem, który wybrałeś dla bazy danych Cloud Firestore. Kliknij Gotowe , aby zakończyć konfigurację.

1d7f49ebaddb32fc.png

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza poleceń (CLI) Firebase umożliwia korzystanie z Hostingu Firebase do lokalnego udostępniania aplikacji internetowej, a także do wdrażania aplikacji internetowej w projekcie Firebase.

  1. Zainstaluj CLI, uruchamiając następujące polecenie npm:
npm -g install firebase-tools
  1. Sprawdź, czy interfejs wiersza polecenia został poprawnie zainstalowany, uruchamiając następujące polecenie:
firebase --version

Upewnij się, że wersja interfejsu Firebase CLI to 4.1.0 lub nowsza.

  1. Autoryzuj Firebase CLI, uruchamiając następujące polecenie:
firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację Twojej aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w laboratorium programowania). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.

  1. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu web-start Twojej aplikacji.
  2. Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:
firebase use --add
  1. Po wyświetleniu monitu wybierz identyfikator projektu , a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjnych, pomostowych itp.). Jednak w tym ćwiczeniu z programowania użyjmy po prostu aliasu default .

  1. Postępuj zgodnie z pozostałymi instrukcjami w wierszu poleceń.

5. Uruchom aplikację startową lokalnie

Teraz, po zaimportowaniu i skonfigurowaniu projektu, możesz po raz pierwszy uruchomić aplikację internetową.

  1. W konsoli z katalogu web-start uruchom następujące polecenie Firebase CLI:
firebase serve --only hosting
  1. Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
✔  hosting: Local server: http://localhost:5000

Korzystamy z emulatora Firebase Hosting , aby lokalnie obsługiwać naszą aplikację. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000 . Obsługiwane są wszystkie pliki znajdujące się w podkatalogu public .

  1. W przeglądarce otwórz aplikację pod adresem http://localhost:5000 .

Powinieneś zobaczyć interfejs użytkownika aplikacji FriendlyChat, który (jeszcze!) nie działa:

4c23f9475228cef4.png

Aplikacja nie może teraz nic zrobić, ale z Twoją pomocą wkrótce to zrobi! Jak dotąd przygotowaliśmy dla Ciebie tylko interfejs użytkownika.

Zbudujmy teraz czat w czasie rzeczywistym!

6. Importuj i konfiguruj Firebase

Zaimportuj pakiet Firebase SDK

Musimy zaimportować pakiet Firebase SDK do aplikacji. Można to zrobić na wiele sposobów, zgodnie z opisem w naszej dokumentacji . Na przykład możesz zaimportować bibliotekę z naszego CDN. Możesz też zainstalować go lokalnie za pomocą npm, a następnie spakować w swojej aplikacji, jeśli używasz Browserify.

Pozyskamy pakiet Firebase SDK od npm i użyjemy pakietu Webpack do spakowania naszego kodu. Robimy to, aby Webpack mógł usunąć niepotrzebny kod, utrzymując mały rozmiar pakietu JS, aby zapewnić jak najszybsze wczytanie naszej aplikacji. Na potrzeby tego ćwiczenia z programowania utworzyliśmy już plik web-start/package.json , który zawiera pakiet SDK Firebase jako zależność, a także zaimportowaliśmy potrzebne funkcje u góry web-start/src/index.js .

pakiet.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';

Podczas tego ćwiczenia z programowania będziemy używać uwierzytelniania Firebase, Cloud Firestore, Cloud Storage, Cloud Messaging i monitorowania wydajności, więc importujemy wszystkie ich biblioteki. W przyszłych aplikacjach upewnij się, że importujesz tylko te części Firebase, których potrzebujesz, aby skrócić czas ładowania aplikacji.

Zainstaluj pakiet Firebase SDK i rozpocznij tworzenie pakietu Webpack

Musimy uruchomić kilka poleceń, aby uruchomić kompilację naszej aplikacji.

  1. Otwórz nowe okno terminala
  2. Upewnij się, że jesteś w katalogu web-start
  3. Uruchom npm install , aby pobrać pakiet Firebase SDK
  4. Uruchom npm run start , aby uruchomić pakiet Webpack. Webpack będzie teraz stale przebudowywał nasz kod źródłowy na resztę ćwiczeń z kodowania.

Skonfiguruj Firebase

Musimy też skonfigurować pakiet Firebase SDK, aby poinformować go, którego projektu Firebase używamy.

  1. Przejdź do ustawień projektu w konsoli Firebase
  2. Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracyjnego.
  3. Wybierz „Konfiguracja” w okienku fragmentu kodu SDK Firebase.
  4. Skopiuj fragment kodu obiektu config, a następnie dodaj go do 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",
};

Teraz przejdź na dół web-start/src/index.js i zainicjuj Firebase:

index.js

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

7. Skonfiguruj logowanie użytkownika

Pakiet Firebase SDK powinien być teraz gotowy do użycia, ponieważ został zaimportowany i zainicjowany w index.html . Teraz zaimplementujemy logowanie użytkowników przy użyciu uwierzytelniania Firebase .

Uwierzytelnij swoich użytkowników za pomocą Google Sign-In

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , signIn jest funkcja logowania. (Już to dla Ciebie skonfigurowaliśmy!) Na potrzeby tego ćwiczenia z programowania chcemy zezwolić Firebase na używanie Google jako dostawcy tożsamości. Użyjemy wyskakującego okienka, ale w Firebase dostępnych jest kilka innych metod .

  1. W katalogu web-start , w podkatalogu src/ otwórz index.js .
  2. Znajdź funkcję signIn .
  3. Zastąp całą funkcję następującym kodem.

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

Funkcja signOut jest uruchamiana, gdy użytkownik kliknie przycisk Wyloguj .

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję signOutUser .
  3. Zastąp całą funkcję następującym kodem.

index.js

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

Śledź stan uwierzytelniania

Aby odpowiednio zaktualizować nasz interfejs użytkownika, potrzebujemy sposobu na sprawdzenie, czy użytkownik jest zalogowany, czy wylogowany. Dzięki Uwierzytelnianiu Firebase możesz zarejestrować obserwatora w stanie uwierzytelniania, który będzie wyzwalany za każdym razem, gdy stan uwierzytelniania się zmieni.

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję initFirebaseAuth .
  3. Zastąp całą funkcję następującym kodem.

index.js

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

Powyższy kod rejestruje funkcję authStateObserver jako obserwatora stanu uwierzytelniania. Będzie wyzwalane za każdym razem, gdy zmieni się stan uwierzytelniania (gdy użytkownik zaloguje się lub wyloguje). W tym momencie zaktualizujemy interfejs użytkownika, aby wyświetlał lub ukrywał przycisk logowania, przycisk wylogowania, zdjęcie profilowe zalogowanego użytkownika i tak dalej. Wszystkie te części interfejsu użytkownika zostały już zaimplementowane.

Wyświetl informacje o zalogowanym użytkowniku

Chcemy wyświetlać zdjęcie profilowe i nazwę zalogowanego użytkownika na górnym pasku naszej aplikacji. W Firebase dane zalogowanego użytkownika są zawsze dostępne w obiekcie currentUser . Wcześniej skonfigurowaliśmy funkcję authStateObserver , która będzie wyzwalana, gdy użytkownik się zaloguje, aby nasz interfejs użytkownika odpowiednio się zaktualizował. Po uruchomieniu wywoła getProfilePicUrl i getUserName .

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcje getProfilePicUrl i getUserName .
  3. Zastąp obie funkcje następującym kodem.

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

Wyświetlamy komunikat o błędzie, jeśli użytkownik próbuje wysyłać wiadomości, gdy użytkownik nie jest zalogowany. (Możesz jednak spróbować!). Musimy więc wykryć, czy użytkownik jest rzeczywiście zalogowany.

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję isUserSignedIn .
  3. Zastąp całą funkcję następującym kodem.

index.js

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

Przetestuj logowanie do aplikacji

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Zaloguj się do aplikacji za pomocą przycisku logowania i swojego konta Google. Jeśli zobaczysz komunikat o błędzie z informacją, że auth/operation-not-allowed , upewnij się, że w konsoli Firebase włączono Logowanie przez Google jako dostawcę uwierzytelniania.
  3. Po zalogowaniu się powinno wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika: c7401b3d44d0d78b.png

8. Napisz wiadomości do Cloud Firestore

W tej sekcji zapiszemy pewne dane w Cloud Firestore, abyśmy mogli wypełnić interfejs aplikacji. Można to zrobić ręcznie w konsoli Firebase , ale zrobimy to w samej aplikacji, aby zademonstrować podstawowy zapis w Cloud Firestore.

Model danych

Dane Cloud Firestore są podzielone na kolekcje, dokumenty, pola i kolekcje podrzędne. Każdą wiadomość z czatu będziemy przechowywać jako dokument w zbiorze najwyższego poziomu o nazwie messages .

688d7bc5fb662b57.png

Dodaj wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu napisanych przez użytkowników użyjemy Cloud Firestore .

W tej sekcji dodasz funkcjonalność umożliwiającą użytkownikom pisanie nowych wiadomości w Twojej bazie danych. Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje uruchomienie poniższego fragmentu kodu. Dodaje obiekt wiadomości z zawartością pól wiadomości do instancji Cloud Firestore w kolekcji messages . Metoda add() dodaje do kolekcji nowy dokument z automatycznie wygenerowanym identyfikatorem.

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję saveMessage .
  3. Zastąp całą funkcję następującym kodem.

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

Przetestuj wysyłanie wiadomości

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Po zalogowaniu wpisz wiadomość, taką jak „Cześć!”, a następnie kliknij WYŚLIJ . Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak nie zobaczysz jeszcze danych w swojej rzeczywistej aplikacji internetowej , ponieważ nadal musimy zaimplementować pobieranie danych (następna sekcja ćwiczenia z programowania).
  3. Nowo dodaną wiadomość możesz zobaczyć w konsoli Firebase. Otwórz konsolę Firebase. W sekcji Budowanie kliknij Baza danych Firestore (lub kliknij tutaj i wybierz swój projekt) i powinieneś zobaczyć kolekcję wiadomości z nowo dodaną wiadomością:

6812efe7da395692.png

9. Przeczytaj wiadomości

Synchronizuj wiadomości

Aby czytać wiadomości w aplikacji, musimy dodać detektory, które uruchamiają się po zmianie danych, a następnie utworzyć element interfejsu użytkownika, który pokazuje nowe wiadomości.

Dodamy kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. W tym kodzie zarejestrujemy odbiornik, który nasłuchuje zmian wprowadzonych do danych. Wyświetlimy tylko 12 ostatnich wiadomości czatu, aby uniknąć wyświetlania bardzo długiej historii po załadowaniu.

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję loadMessages .
  3. Zastąp całą funkcję następującym kodem.

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

Aby nasłuchiwać wiadomości w bazie danych, tworzymy zapytanie dotyczące kolekcji, używając funkcji collection , aby określić, w której kolekcji znajdują się dane, których chcemy nasłuchiwać. W powyższym kodzie nasłuchujemy zmian w messages kolekcja, w której przechowywane są wiadomości czatu. Stosujemy również limit, słuchając tylko ostatnich 12 wiadomości za pomocą .limit(12) i porządkując wiadomości według daty za pomocą orderBy('timestamp', 'desc') aby uzyskać 12 najnowszych wiadomości.

Funkcja onSnapshot przyjmuje zapytanie jako pierwszy parametr, a funkcję zwrotną jako drugi. Funkcja wywołania zwrotnego zostanie wyzwolona, ​​gdy nastąpią jakiekolwiek zmiany w dokumentach pasujących do zapytania. Może tak być, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej informacji na ten temat znajdziesz w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie użytkownika FriendlyChat (patrz poniżej). Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
  3. (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 być odzwierciedlone w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

2168dec79b573d07.png

10. Wyślij obrazy

Dodamy teraz funkcję, która udostępnia obrazy.

Chociaż Cloud Firestore dobrze nadaje się do przechowywania uporządkowanych danych, Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików/obiektów BLOB, której będziemy używać do przechowywania wszelkich obrazów udostępnianych przez użytkownika za pomocą naszej aplikacji.

Zapisz obrazy w chmurze

Na potrzeby tego ćwiczenia z programowania dodaliśmy już dla Ciebie przycisk, który uruchamia okno wyboru plików. Po wybraniu pliku wywoływana jest funkcja saveImageMessage i można uzyskać odwołanie do wybranego pliku. Funkcja saveImageMessage realizuje następujące czynności:

  1. Tworzy „zastępczą” wiadomość czatu w kanale czatu, dzięki czemu użytkownicy zobaczą animację „Ładowanie” podczas przesyłania obrazu.
  2. Przesyła plik obrazu do Cloud Storage na tę ścieżkę: /<uid>/<messageId>/<file_name>
  3. Generuje publicznie dostępny adres URL dla pliku obrazu.
  4. Aktualizuje wiadomość czatu o adres URL nowo przesłanego pliku obrazu zamiast tymczasowego wczytywania obrazu.

Teraz dodasz funkcję wysyłania obrazu:

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję saveImageMessage .
  3. Zastąp całą funkcję następującym kodem.

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

Przetestuj wysyłanie obrazów

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Po zalogowaniu kliknij przycisk przesyłania obrazu 13734cb66773e5a3.png i wybierz plik obrazu za pomocą selektora plików. Jeśli szukasz zdjęcia, możesz użyć tego ładnego zdjęcia filiżanki do kawy .
  3. W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem: 3b1284f5144b54f6.png

Jeśli spróbujesz dodać obraz, nie będąc zalogowanym, powinieneś zobaczyć powiadomienie Toast z informacją, że musisz się zalogować, aby dodać obrazy.

11. Pokaż powiadomienia

Dodamy teraz obsługę powiadomień przeglądarki. Aplikacja powiadomi użytkowników, gdy na czacie pojawią się nowe wiadomości. Firebase Cloud Messaging (FCM) to wieloplatformowe rozwiązanie do przesyłania wiadomości, które umożliwia niezawodne dostarczanie wiadomości i powiadomień bez żadnych kosztów.

Dodaj pracownika serwisu FCM

Aplikacja internetowa potrzebuje pracownika serwisu, który będzie odbierać i wyświetlać powiadomienia internetowe.

  1. Z katalogu web-start , w katalogu src , otwórz firebase-messaging-sw.js .
  2. Dodaj następującą zawartość do tego pliku.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Service worker po prostu musi załadować i zainicjować pakiet Firebase Cloud Messaging SDK, który zajmie się wyświetlaniem powiadomień.

Uzyskaj tokeny urządzeń FCM

Po włączeniu powiadomień na urządzeniu lub w przeglądarce otrzymasz token urządzenia . Ten token urządzenia jest używany do wysyłania powiadomień do określonego urządzenia lub określonej przeglądarki.

Gdy użytkownik się loguje, wywołujemy funkcję saveMessagingDeviceToken . Tam otrzymamy token urządzenia FCM z przeglądarki i zapiszemy go w Cloud Firestore.

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję saveMessagingDeviceToken .
  3. Zastąp całą funkcję następującym kodem.

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

Jednak ten kod nie będzie działał początkowo. Aby Twoja aplikacja mogła pobrać token urządzenia, użytkownik musi przyznać Twojej aplikacji uprawnienia do wyświetlania powiadomień (następny krok ćwiczenia z programowania).

Poproś o uprawnienia do wyświetlania powiadomień

Jeśli użytkownik nie przyznał jeszcze Twojej aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W tym przypadku wywołujemy metodę firebase.messaging().requestPermission() , która wyświetli okno dialogowe przeglądarki z prośbą o zezwolenie ( w obsługiwanych przeglądarkach ).

8b9d0c66dc36153d.png

  1. Wróć do pliku src/index.js .
  2. Znajdź funkcję requestNotificationsPermissions .
  3. Zastąp całą funkcję następującym kodem.

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

Uzyskaj token urządzenia

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Po zalogowaniu powinno pojawić się okno dialogowe uprawnień do powiadomień: bd3454e6dbfb6723.png
  3. Kliknij Zezwól .
  4. Otwórz konsolę JavaScript w swojej przeglądarce. Powinien pojawić się następujący komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Skopiuj token urządzenia. Będziesz go potrzebować w następnym etapie ćwiczenia z programowania.

Wyślij powiadomienie na swoje urządzenie

Teraz, gdy masz już token urządzenia, możesz wysłać powiadomienie.

  1. Otwórz kartę Wiadomości w chmurze w konsoli Firebase .
  2. Kliknij „Nowe powiadomienie”
  3. Wprowadź tytuł i tekst powiadomienia.
  4. Po prawej stronie ekranu kliknij „wyślij wiadomość testową”
  5. Wprowadź token urządzenia skopiowany z konsoli JavaScript przeglądarki, a następnie kliknij znak plus („+”)
  6. Kliknij "testuj"

Jeśli Twoja aplikacja jest na pierwszym planie, zobaczysz powiadomienie w konsoli JavaScript.

Jeśli Twoja aplikacja działa w tle, w przeglądarce powinno pojawić się powiadomienie, tak jak w tym przykładzie:

de79e8638a45864c.png

12. Zasady bezpieczeństwa Cloud Firestore

Zobacz zasady bezpieczeństwa bazy danych

Cloud Firestore używa określonego języka reguł do definiowania praw dostępu, bezpieczeństwa i sprawdzania poprawności danych.

Konfigurując projekt Firebase na początku tego ćwiczenia z programowania, zdecydowaliśmy się użyć domyślnych reguł bezpieczeństwa „Trybu testowego”, aby nie ograniczać dostępu do magazynu danych. W konsoli Firebase na karcie Reguły w sekcji Baza danych możesz przeglądać i modyfikować te reguły.

W tej chwili powinieneś zobaczyć domyślne reguły, które nie ograniczają dostępu do datastore. Oznacza to, że każdy użytkownik może odczytywać i zapisywać dowolne kolekcje w Twoim magazynie danych.

rules_version = '2';

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

Zaktualizujemy zasady, aby ograniczyć pewne rzeczy, korzystając z następujących zasad:

firestore.zasady

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

Zaktualizuj zasady bezpieczeństwa bazy danych

Istnieją dwa sposoby edytowania reguł zabezpieczeń bazy danych: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego przy użyciu interfejsu wiersza polecenia Firebase.

Aby zaktualizować reguły bezpieczeństwa w konsoli Firebase:

  1. Przejdź do sekcji Baza danych z lewego panelu, a następnie kliknij zakładkę Reguły .
  2. Zastąp domyślne reguły, które są już w konsoli, regułami pokazanymi powyżej.
  3. Kliknij Opublikuj .

Aby zaktualizować reguły bezpieczeństwa z pliku lokalnego:

  1. Z katalogu web-start otwórz firestore.rules .
  2. Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
  3. Z katalogu web-start otwórz firebase.json .
  4. Dodaj atrybut firestore.rules wskazujący na firestore.rules , jak pokazano poniżej. (Atrybut hosting powinien już znajdować się w pliku).

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Wdróż reguły bezpieczeństwa za pomocą interfejsu Firebase CLI, uruchamiając następujące polecenie:
firebase deploy --only firestore
  1. Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. Zasady bezpieczeństwa Cloud Storage

Zobacz zasady bezpieczeństwa Cloud Storage

Cloud Storage for Firebase używa określonego języka reguł do definiowania praw dostępu, zabezpieczeń i sprawdzania poprawności danych.

Podczas konfigurowania projektu Firebase na początku tego ćwiczenia z programowania zdecydowaliśmy się użyć domyślnej reguły zabezpieczeń Cloud Storage, która zezwala na korzystanie z Cloud Storage tylko uwierzytelnionym użytkownikom. W konsoli Firebase na karcie Reguły w sekcji Pamięć masowa możesz przeglądać i modyfikować reguły. Powinieneś zobaczyć domyślną regułę, która umożliwia każdemu zalogowanemu użytkownikowi odczytywanie i zapisywanie dowolnych plików w Twoim zasobniku na dane.

rules_version = '2';

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

Zaktualizujemy zasady, aby wykonać następujące czynności:

  • Pozwól każdemu użytkownikowi pisać tylko do jego własnych, określonych folderów
  • Zezwalaj wszystkim na czytanie z Cloud Storage
  • Upewnij się, że przesłane pliki są obrazami
  • Ogranicz rozmiar przesyłanych obrazów do maksymalnie 5 MB

Można to zrealizować za pomocą następujących zasad:

zasady.magazynowania

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

Zaktualizuj reguły bezpieczeństwa Cloud Storage

Istnieją dwa sposoby edytowania reguł zabezpieczeń magazynu: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego przy użyciu interfejsu wiersza polecenia Firebase.

Aby zaktualizować reguły bezpieczeństwa w konsoli Firebase:

  1. Przejdź do sekcji Przechowywanie z lewego panelu, a następnie kliknij zakładkę Reguły .
  2. Zastąp domyślną regułę, która jest już w konsoli, regułami pokazanymi powyżej.
  3. Kliknij Opublikuj .

Aby zaktualizować reguły bezpieczeństwa z pliku lokalnego:

  1. Z katalogu web-start otwórz storage.rules .
  2. Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
  3. Z katalogu web-start otwórz firebase.json .
  4. Dodaj atrybut storage.rules wskazujący na plik storage.rules , jak pokazano poniżej. (Atrybut hosting i database powinien już znajdować się w pliku).

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. Wdróż reguły bezpieczeństwa za pomocą interfejsu Firebase CLI, uruchamiając następujące polecenie:
firebase deploy --only storage
  1. Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. Zbierz dane dotyczące wydajności

Możesz użyć pakietu SDK do monitorowania wydajności, aby zbierać rzeczywiste dane o wydajności aplikacji, a następnie przeglądać i analizować te dane w konsoli Firebase. Monitorowanie wydajności pomaga zrozumieć, gdzie i kiedy można poprawić wydajność aplikacji, dzięki czemu można wykorzystać te informacje do rozwiązania problemów z wydajnością.

Istnieje wiele sposobów integracji z pakietem SDK Firebase Performance Monitoring JavaScript. W tym laboratorium programowania włączyliśmy monitorowanie wydajności z hostowanych adresów URL . Zapoznaj się z dokumentacją , aby poznać inne metody włączania zestawu SDK.

Automatyczne ślady

Ponieważ już importujemy getPerformance na górze web-start/src/index.js , musimy tylko dodać jedną linię, aby powiedzieć Monitoringowi wydajności, aby automatycznie zbierał metryki ładowania strony i żądań sieciowych, gdy użytkownicy odwiedzają wdrożoną witrynę!

  1. W web-start/src/index.js dodaj następujący wiersz poniżej istniejącego TODO , aby zainicjować Performance Monitoring.

index.js

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

Zmierz opóźnienie pierwszego wejścia (opcjonalnie)

Opóźnienie pierwszego wejścia jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenie na temat responsywności aplikacji.

Opóźnienie pierwszego wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, na przykład klikając przycisk lub hiperłącze. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie odpowiedzieć na dane wejściowe, co oznacza, że ​​przeglądarka nie jest zajęta ładowaniem ani analizowaniem zawartości Twojej strony.

Jeśli chcesz zmierzyć opóźnienie pierwszego wejścia, musisz bezpośrednio dołączyć poniższy kod.

  1. Otwórz public/index.html .
  2. Odkomentuj tag script w następnym wierszu.

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>

Aby dowiedzieć się więcej na temat pierwszego wypełnienia z opóźnieniem wejściowym, zajrzyj do dokumentacji .

Wyświetl dane o wydajności

Ponieważ witryna nie została jeszcze wdrożona (wdrożysz ją w następnym kroku), oto zrzut ekranu przedstawiający dane dotyczące wydajności wczytywania strony, które zobaczysz w konsoli Firebase w ciągu 30 minut od interakcji użytkowników z wdrożoną witryną :

29389131150f33d7.png

Po zintegrowaniu zestawu SDK monitorowania wydajności z aplikacją nie musisz pisać żadnego innego kodu, zanim aplikacja zacznie automatycznie monitorować kilka krytycznych aspektów wydajności. W przypadku aplikacji internetowych zestaw SDK rejestruje takie aspekty, jak pierwsze malowanie treści, możliwość interakcji użytkowników z Twoją aplikacją i nie tylko.

Możesz także skonfigurować niestandardowe ślady, metryki i atrybuty, aby mierzyć określone aspekty swojej aplikacji. Odwiedź dokumentację, aby dowiedzieć się więcej o niestandardowych śladach i metrykach oraz niestandardowych atrybutach .

15. Wdróż aplikację za pomocą Hostingu Firebase

Firebase oferuje usługę hostingu do obsługi Twoich zasobów i aplikacji internetowych. Możesz wdrożyć swoje pliki w Hostingu Firebase za pomocą interfejsu wiersza polecenia Firebase. Przed wdrożeniem musisz określić w pliku firebase.json , które pliki lokalne mają zostać wdrożone. W przypadku tego ćwiczenia z programowania zrobiliśmy to już za Ciebie, ponieważ ten krok był wymagany do obsługi naszych plików podczas tego ćwiczenia z programowania. Ustawienia hostingu są określone w atrybucie hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Te ustawienia informują CLI, że chcemy wdrożyć wszystkie pliki w katalogu ./public ( "public": "./public" ).

  1. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu web-start Twojej aplikacji.
  2. Wdróż pliki w projekcie Firebase, uruchamiając następujące polecenie:
firebase deploy --except functions
  1. Konsola powinna wyświetlić następujące informacje:
=== 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. Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana w globalnej sieci CDN przy użyciu Hostingu Firebase w dwóch własnych subdomenach Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternatywnie możesz uruchomić firebase open hosting:site w wierszu poleceń.

Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o działaniu Hostingu Firebase .

Przejdź do sekcji Hosting konsoli Firebase swojego projektu, aby wyświetlić przydatne informacje i narzędzia dotyczące hostingu, w tym historię wdrożeń, funkcję przywracania poprzednich wersji aplikacji oraz przepływ pracy w celu skonfigurowania domeny niestandardowej.

16. Gratulacje!

Używasz Firebase do tworzenia aplikacji internetowej do czatu w czasie rzeczywistym!

Co omówiliśmy

  • Uwierzytelnianie Firebase
  • Cloud Firestore
  • Firebase SDK do przechowywania w chmurze
  • Wiadomości w chmurze Firebase
  • Monitorowanie wydajności Firebase
  • Hosting Firebase

Następne kroki

Learn more