Ćwiczenia z programowania internetowego Firebase

1. Przegląd

W tym laboratorium kodowania 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 dla Firebase.
  • Uwierzytelniaj użytkowników za pomocą uwierzytelniania Firebase.
  • Wdróż swoją aplikację internetową na Hostingu Firebase.
  • Wysyłaj powiadomienia za pomocą Firebase Cloud Messaging.
  • Zbieraj 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 zwykle jest dostarczany z Node.js
  • Terminal/konsola
  • Wybrana przeglądarka, na przykład Chrome
  • Przykładowy kod laboratorium kodu (Zobacz następny krok laboratorium kodu, aby dowiedzieć się, jak uzyskać kod).

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub Codelab z 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ą

Korzystając ze swojego IDE, otwórz lub zaimportuj katalog 📁 web-start ze sklonowanego repozytorium. Ten 📁 katalog web-start zawiera kod startowy dla codelab, który będzie w pełni funkcjonalną aplikacją internetową do czatu.

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 swojego projektu Firebase.
  3. Odznacz Włącz Google Analytics dla tego projektu
  4. Kliknij Utwórz projekt .

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

  • Uwierzytelnianie 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.
  • 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 wyskakujących powiadomień przeglądarki.
  • Monitorowanie wydajności Firebase do zbierania danych o wydajności użytkowników 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ę internetową 58d6543a156e56f9.png aby utworzyć nową aplikację internetową Firebase.
  2. Zarejestruj aplikację pod pseudonimem Friendly Chat , a następnie zaznacz pole wyboru Skonfiguruj także Hosting Firebase dla tej aplikacji . Kliknij Zarejestruj aplikację .
  3. W następnym kroku zobaczysz obiekt konfiguracji. Skopiuj tylko obiekt JS (nie otaczający kod HTML) do pliku firebase-config.js

Zarejestruj zrzut ekranu aplikacji internetowej

Włącz logowanie Google dla uwierzytelniania Firebase

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

Musisz włączyć logowanie przez Google :

  1. W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu.
  2. Kliknij Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj , aby przejść bezpośrednio do tej karty).
  3. Włącz dostawcę logowania Google , a następnie kliknij Zapisz .
  4. Ustaw publiczną nazwę swojej aplikacji na Przyjazny czat i wybierz e-mail pomocy technicznej projektu z menu rozwijanego.
  5. Skonfiguruj ekran zgody 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 Kompilacja konsoli Firebase kliknij opcję Baza danych Firestore .
  2. Kliknij Utwórz bazę danych w okienku Cloud Firestore.

729991a081e7cd5.png

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

Tryb testowy zapewnia, że ​​możemy swobodnie pisać do bazy danych podczas tworzenia. Później w tym laboratorium kodowania zwiększymy bezpieczeństwo naszej bazy danych.

77e4986cbeaf9dee.png

  1. Ustaw lokalizację, w której przechowywane są dane Cloud Firestore. Możesz pozostawić tę opcję jako domyślną 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 zastrzeżenie dotyczące reguł bezpieczeństwa dla Twojego projektu Firebase, a następnie kliknij Dalej .

Przy domyślnych regułach bezpieczeństwa każdy uwierzytelniony użytkownik może zapisywać dowolne dane w Cloud Storage. W dalszej części tego laboratorium kodowania 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 swojej 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 używanie Firebase Hosting do lokalnego udostępniania aplikacji internetowej, a także do wdrażania aplikacji internetowej w projekcie Firebase.

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

Upewnij się, że wersja Firebase CLI to v4.1.0 lub nowsza.

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

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

  1. Upewnij się, że wiersz polecenia 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 swój identyfikator projektu , a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjne, pomostowe itp.). Jednak w tym laboratorium kodu po prostu użyjmy aliasu default .

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

5. Uruchom aplikację startową lokalnie

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. Twoja linia poleceń powinna wyświetlić następującą odpowiedź:
✔  hosting: Local server: http://localhost:5000

Używamy emulatora Hostingu Firebase do obsługi naszej aplikacji lokalnie. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000 . Obsługiwane są wszystkie pliki znajdujące się w podkatalogu public .

  1. Za pomocą przeglądarki otwórz aplikację pod adresem http://localhost:5000 .

Powinieneś zobaczyć interfejs swojej 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! Do tej pory opracowaliśmy tylko interfejs użytkownika.

Zbudujmy teraz czat w czasie rzeczywistym!

6. Zaimportuj i skonfiguruj Firebase

Zaimportuj pakiet SDK Firebase

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

Zamierzamy pobrać Firebase SDK od npm i użyć Webpacka do spakowania naszego kodu. Robimy to, aby Webpack mógł usunąć niepotrzebny kod, utrzymując mały rozmiar naszego pakietu JS, aby nasza aplikacja ładowała się tak szybko, jak to możliwe. Na potrzeby tego laboratorium kodowania utworzyliśmy już plik web-start/package.json , który zawiera pakiet Firebase SDK jako zależność, a także zaimportowaliśmy potrzebne funkcje u góry pliku web-start/src/index.js .

pakiet.json

"dependencies": {
  "firebase": "^9.0.0"
}

indeks.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 laboratorium będziemy używać Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging i Performance Monitoring, więc importujemy wszystkie ich biblioteki. W swoich przyszłych aplikacjach upewnij się, że importujesz tylko potrzebne części Firebase, aby skrócić czas ładowania aplikacji.

Zainstaluj Firebase SDK i rozpocznij kompilację Webpacka

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ć Webpack. Webpack będzie teraz stale przebudowywał nasz kod źródłowy dla reszty laboratorium kodowania.

Skonfiguruj Firebase

Musimy również skonfigurować pakiet Firebase SDK, aby informował 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 konfiguracji.
  3. Wybierz „Konfiguracja” w okienku fragmentu kodu Firebase SDK.
  4. Skopiuj fragment kodu obiektu konfiguracji, 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:

indeks.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.js . Zamierzamy teraz zaimplementować logowanie użytkownika przy użyciu uwierzytelniania Firebase .

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

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , uruchamiana jest funkcja signIn . (Już to dla Ciebie skonfigurowaliśmy!) W tym laboratorium kodu chcemy upoważnić Firebase do korzystania z 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 plik index.js .
  2. Znajdź funkcję signIn .
  3. Zastąp całą funkcję następującym kodem.

indeks.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 wyzwalana, 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.

indeks.js

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

Śledź stan uwierzytelniania

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

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

indeks.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 uruchamiany 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świetlić lub ukryć 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świetlić zdjęcie profilowe i nazwę użytkownika 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 , aby uruchamiała się, gdy użytkownik się zaloguje, dzięki czemu nasz interfejs użytkownika zostanie odpowiednio zaktualizowany. 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.

indeks.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 wysłać wiadomość, gdy nie jest zalogowany. (Możesz jednak spróbować!). Dlatego musimy 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.

indeks.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 udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu polecenia, 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 logowanie przez Google zostało włączone jako dostawca uwierzytelniania w konsoli Firebase.
  3. Po zalogowaniu powinno wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika: c7401b3d44d0d78b.png

8. Pisz wiadomości do Cloud Firestore

W tej sekcji zapiszemy niektóre dane w Cloud Firestore, abyśmy mogli zapełnić interfejs aplikacji. Można to zrobić ręcznie za pomocą 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. Będziemy przechowywać każdą wiadomość z czatu 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 funkcję umożliwiającą użytkownikom pisanie nowych wiadomości do Twojej bazy danych. Kliknięcie przez użytkownika przycisku WYŚLIJ spowoduje uruchomienie poniższego fragmentu kodu. Dodaje obiekt wiadomości z zawartością pól wiadomości do Twojej 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.

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

Testuj wysyłanie wiadomości

  1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu polecenia, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce.
  2. Po zalogowaniu się wpisz wiadomość typu „Hej tam!”, a następnie kliknij WYŚLIJ . Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak nie zobaczysz jeszcze danych w rzeczywistej aplikacji internetowej, ponieważ nadal musimy zaimplementować pobieranie danych (następna sekcja laboratorium kodu).
  3. Możesz zobaczyć nowo dodaną wiadomość w konsoli Firebase. Otwórz konsolę Firebase. W sekcji Build kliknij Firestore Database (lub kliknij tutaj i wybierz swój projekt) i powinieneś zobaczyć kolekcję wiadomości z nowo dodaną wiadomością:

6812efe7da395692.png

9. Czytaj wiadomości

Synchronizuj wiadomości

Aby odczytywać wiadomości w aplikacji, musimy dodać odbiorniki uruchamiające się w przypadku zmiany danych, a następnie utworzyć element interfejsu użytkownika, który wyświetla 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 w danych. Wyświetlimy tylko 12 ostatnich wiadomości czatu, aby uniknąć wyświetlania bardzo długiej historii podczas ładowania.

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

indeks.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 słuchać. 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ę wywołania zwrotnego jako drugi. Funkcja wywołania zwrotnego zostanie uruchomiona, gdy nastąpią zmiany w dokumentach pasujących do zapytania. Może tak się stać, jeśli wiadomość zostanie usunięta, zmodyfikowana lub dodana. Możesz przeczytać więcej na ten temat w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

  1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu polecenia, 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 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 konsoli Firebase; wszelkie zmiany powinny zostać odzwierciedlone w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

2168dec79b573d07.png

10. Wyślij obrazy

Teraz dodamy funkcję, która udostępnia obrazy.

Podczas gdy Cloud Firestore jest dobre do przechowywania danych strukturalnych, 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 Cloud Storage

Na potrzeby tego laboratorium kodowania dodaliśmy już przycisk, który uruchamia okno wyboru pliku. Po wybraniu pliku wywoływana jest funkcja saveImageMessage i można uzyskać odniesienie do wybranego pliku. Funkcja saveImageMessage wykonuje następujące czynności:

  1. Tworzy komunikat czatu „zastępczy” w kanale czatu, dzięki czemu użytkownicy widzą animację „Ładowanie”, gdy przesyłamy obraz.
  2. Przesyła plik obrazu do Cloud Storage do tej ścieżki: /<uid>/<messageId>/<file_name>
  3. Generuje publicznie czytelny adres URL pliku obrazu.
  4. Aktualizuje wiadomość na czacie o adres URL nowo przesłanego pliku obrazu zamiast tymczasowego ładowania 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.

indeks.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 udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu polecenia, 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 obrazu, możesz użyć tego ładnego zdjęcia filiżanki kawy .
  3. W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem: 3b1284f5144b54f6.png

Jeśli spróbujesz dodać obraz, gdy nie jesteś zalogowany, powinieneś zobaczyć powiadomienie Toast z informacją, że musisz się zalogować, aby dodać obrazy.

11. Pokaż powiadomienia

Teraz dodamy obsługę powiadomień przeglądarki. Aplikacja powiadomi użytkowników, gdy na czacie zostaną opublikowane 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 usługi FCM

Aplikacja internetowa potrzebuje pracownika usługi , który będzie odbierał i wyświetlał powiadomienia internetowe.

  1. W katalogu web-start w katalogu src otwórz plik 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');

Pracownik serwisu musi po prostu załadować i zainicjować SDK Firebase Cloud Messaging, 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 tym, czego używamy do wysyłania powiadomień na określone urządzenie lub konkretną przeglądarkę.

Gdy użytkownik się loguje, wywołujemy funkcję saveMessagingDeviceToken . Stamtąd pobierzemy 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.

indeks.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 początkowo nie będzie działał. Aby Twoja aplikacja mogła pobrać token urządzenia, użytkownik musi przyznać Twojej aplikacji uprawnienia do wyświetlania powiadomień (następny krok laboratorium kodu).

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 takim przypadku wywołujemy metodę firebase.messaging().requestPermission() , która wyświetli okno dialogowe przeglądarki z pytaniem o to uprawnienie ( 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.

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

Zdobądź token urządzenia

  1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu polecenia, 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 swojej przeglądarki. Powinien zostać wyświetlony następujący komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Skopiuj token urządzenia. Będziesz go potrzebować do następnego etapu laboratorium kodów.

Wyślij powiadomienie na swoje urządzenie

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

  1. Otwórz kartę Cloud Messaging w konsoli Firebase .
  2. Kliknij „Nowe powiadomienie”
  3. Wprowadź tytuł powiadomienia i tekst powiadomienia.
  4. Po prawej stronie ekranu kliknij „wyślij wiadomość testową”
  5. Wprowadź token urządzenia, który skopiowałeś z konsoli JavaScript swojej przeglądarki, a następnie kliknij znak plus („+”)
  6. Kliknij „przetestuj”

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, jak w tym przykładzie:

de79e8638a45864c.png

12. Zasady bezpieczeństwa Cloud Firestore

Wyświetl reguły 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.

Podczas konfigurowania projektu Firebase na początku tego laboratorium postanowiliśmy użyć domyślnych reguł bezpieczeństwa „Tryb testowy”, 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 magazynie danych.

rules_version = '2';

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

Zaktualizujemy reguły, aby wprowadzić ograniczenia, korzystając z następujących zasad:

sklep.reguły

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 reguły bezpieczeństwa bazy danych

Istnieją dwa sposoby edytowania reguł bezpieczeństwa 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 kartę Reguły .
  2. Zastąp reguły domyślne, które są już w konsoli, regułami pokazanymi powyżej.
  3. Kliknij Opublikuj .

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

  1. W katalogu web-start otwórz firestore.rules .
  2. Zastąp reguły domyślne, które są już w pliku, regułami pokazanymi powyżej.
  3. W katalogu web-start otwórz plik 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ą Firebase CLI, uruchamiając następujące polecenie:
firebase deploy --only firestore
  1. Twoja linia poleceń powinna 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

Wyświetl reguły bezpieczeństwa Cloud Storage

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

Podczas konfigurowania projektu Firebase na początku tego laboratorium postanowiliśmy użyć domyślnej reguły bezpieczeństwa Cloud Storage, która zezwala tylko uwierzytelnionym użytkownikom na korzystanie z Cloud Storage. W konsoli Firebase na karcie Reguły w sekcji Pamięć możesz wyświetlać i modyfikować reguły. Powinna zostać wyświetlona reguła domyślna, która umożliwia każdemu zalogowanemu użytkownikowi odczytywanie i zapisywanie dowolnych plików w zasobniku na dane.

rules_version = '2';

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

Zaktualizujemy reguły, aby:

  • Zezwalaj każdemu użytkownikowi na zapisywanie tylko do jego własnych folderów
  • Zezwól każdemu na odczyt z Cloud Storage
  • Upewnij się, że przesyłane pliki to obrazy
  • Ogranicz rozmiar obrazów, które można przesyłać, do maksymalnie 5 MB

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

przechowywanie.reguły

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ł bezpieczeństwa pamięci masowej: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego za pomocą 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 kartę 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. W katalogu web-start otwórz storage.rules .
  2. Zastąp reguły domyślne, które są już w pliku, regułami pokazanymi powyżej.
  3. W katalogu web-start otwórz plik firebase.json .
  4. Dodaj atrybut storage.rules wskazujący na plik storage.rules , jak pokazano poniżej. (Atrybuty hosting i database powinny 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ą Firebase CLI, uruchamiając następujące polecenie:
firebase deploy --only storage
  1. Twoja linia poleceń powinna 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 swojej 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ą.

Istnieją różne sposoby integracji z zestawem SDK JavaScript do monitorowania wydajności Firebase. W tym laboratorium kodowania włączyliśmy monitorowanie wydajności z hostowanych adresów URL . Zapoznaj się z dokumentacją , aby zobaczyć inne metody włączania zestawu SDK.

Automatyczne ślady

Ponieważ importujemy już getPerformance na początku pliku web-start/src/index.js , musimy tylko dodać jeden wiersz, aby nakazać monitorowaniu wydajności automatyczne gromadzenie danych dotyczących obciążenia 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ć monitorowanie wydajności.

indeks.js

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

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

Opóźnienie przy pierwszym wprowadzeniu danych jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenia na temat czasu reakcji Twojej aplikacji.

Pierwsze opóźnienie wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, na przykład kliknięciem przycisku lub hiperłącza. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie zareagować na dane wejściowe, co oznacza, że ​​przeglądarka nie jest zajęta ładowaniem ani analizowaniem zawartości strony.

Jeśli chcesz zmierzyć pierwsze opóźnienie wejściowe, musisz bezpośrednio dołączyć następujący kod.

  1. Otwórz plik public/index.html .
  2. Usuń komentarz ze znacznika script w następnym wierszu.

indeks.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 o pierwszym wypełnianiu opóźnienia wejściowego, zajrzyj do dokumentacji .

Wyświetl dane dotyczące wydajności

Ponieważ Twoja 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 stron, 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 trzeba pisać żadnego innego kodu, zanim aplikacja zacznie automatycznie monitorować kilka krytycznych aspektów wydajności. W przypadku aplikacji internetowych pakiet SDK rejestruje takie aspekty, jak pierwsze malowanie zawartości, możliwość interakcji użytkowników z aplikacją i nie tylko.

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

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

Firebase oferuje usługę hostingową do obsługi Twoich zasobów i aplikacji internetowych. Możesz wdrożyć swoje pliki w Firebase Hosting za pomocą Firebase CLI. Przed wdrożeniem musisz określić w pliku firebase.json , które pliki lokalne mają zostać wdrożone. W przypadku tego laboratorium kodowania już to zrobiliśmy, ponieważ ten krok był wymagany do udostępnienia naszych plików podczas tego modułu. 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 polecenia uzyskuje dostęp do lokalnego katalogu web-start Twojej aplikacji.
  2. Wdróż swoje 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 Twoich 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 tym, jak działa Firebase Hosting .

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żyłeś Firebase do zbudowania aplikacji internetowej do czatowania w czasie rzeczywistym!

Co omówiliśmy

  • Uwierzytelnianie Firebase
  • Cloud Firestore
  • Firebase SDK do przechowywania w chmurze
  • Przesyłanie wiadomości w chmurze Firebase
  • Monitorowanie wydajności Firebase
  • Hosting Firebase

Następne kroki

Learn more