Ta strona została przetłumaczona przez Cloud Translation API.

Ćwiczenia z programowania internetowego Firebase

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.

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

Sklonuj repozytorium GitHub laboratorium kodowania 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ą

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

Utwórz projekt Firebase

Zaloguj się do Firebase .
W konsoli Firebase kliknij Dodaj projekt , a następnie nadaj projektowi Firebase nazwę FriendlyChat . Zapamiętaj identyfikator projektu dla swojego projektu Firebase.
Odznacz Włącz Google Analytics dla tego projektu
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 Twojej aplikacji.

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

Dodaj do projektu aplikację internetową Firebase

Kliknij ikonę sieci aby utworzyć nową aplikację internetową Firebase.
Zarejestruj aplikację pod pseudonimem Przyjazny czat , a następnie zaznacz pole obok opcji Skonfiguruj też Hosting Firebase dla tej aplikacji . Kliknij Zarejestruj aplikację .
Kliknij pozostałe kroki. Nie musisz teraz postępować zgodnie z instrukcjami; zostaną one omówione w dalszych krokach tego ćwiczenia z programowania.

Aby umożliwić użytkownikom logowanie się do aplikacji internetowej za pomocą swoich kont Google, użyjemy metody logowania Google .

Musisz włączyć logowanie przez Google :

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

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:

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

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.

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.

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:

W sekcji Kompilacja konsoli Firebase kliknij Pamięć .
Jeśli nie ma przycisku Rozpocznij , oznacza to, że przechowywanie w chmurze jest już włączone i nie musisz wykonywać poniższych czynności.
Kliknij Rozpocznij .
Przeczytaj zastrzeżenie 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.

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

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.

Zainstaluj interfejs wiersza polecenia, uruchamiając następujące polecenie npm:

npm -g install firebase-tools

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.

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.

Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu web-start Twojej aplikacji.
Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:

firebase use --add

Po wyświetleniu monitu wybierz identyfikator projektu , a następnie nadaj projektowi Firebase alias.

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

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

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

W konsoli z katalogu web-start uruchom następujące polecenie Firebase CLI:

firebase serve --only hosting

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 .

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

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

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

Zbudujmy teraz czat w czasie rzeczywistym!

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

Ponieważ do obsługi naszej aplikacji używamy Hostingu Firebase, zamierzamy zaimportować lokalne adresy URL znajdujące się w pliku index.html (znajdującym się w katalogu web-start/public/ ). Na potrzeby tego ćwiczenia z programowania dodaliśmy już dla Ciebie następujące wiersze na dole pliku index.html , ale możesz dokładnie sprawdzić, czy tam są.

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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.

Skonfiguruj Firebase

Musimy też skonfigurować pakiet Firebase SDK, aby poinformować go, którego projektu Firebase używamy. Ponieważ korzystamy z Hostingu Firebase, możesz zaimportować specjalny skrypt, który wykona tę konfigurację za Ciebie. Ponownie, w tym ćwiczeniu z programowania dodaliśmy już dla Ciebie następujący wiersz na końcu pliku public/index.html , ale sprawdź, czy tam jest.

index.html

<script src="/__/firebase/init.js"></script>

Ten skrypt zawiera konfigurację projektu Firebase opartą na projekcie Firebase określonym wcześniej podczas uruchamiania firebase use --add .

Zachęcamy do sprawdzenia pliku init.js aby zobaczyć, jak wygląda konfiguracja Twojego projektu. Aby to zrobić, otwórz http://localhost:5000/__/firebase/init.js w swojej przeglądarce. Powinieneś zobaczyć coś, co wygląda tak:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

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 .

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , uruchamiana jest funkcja signIn . (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 .

W katalogu web-start , w podkatalogu public/scripts/ otwórz main.js .
Znajdź funkcję signIn .
Zastąp całą funkcję następującym kodem.

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

Wróć do pliku public/scripts/main.js .
Znajdź funkcję signOut .
Zastąp całą funkcję następującym kodem.

main.js

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

Ś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 przy każdej zmianie stanu uwierzytelniania.

Wróć do pliku public/scripts/main.js .
Znajdź funkcję initFirebaseAuth .
Zastąp całą funkcję następującym kodem.

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(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 firebase.auth().currentUser . Wcześniej skonfigurowaliśmy funkcję authStateObserver która ma być wyzwalana, gdy użytkownik się zaloguje, aby nasz interfejs użytkownika odpowiednio się zaktualizował. Po uruchomieniu wywoła getProfilePicUrl i getUserName .

Wróć do pliku public/scripts/main.js .
Znajdź funkcje getProfilePicUrl i getUserName .
Zastąp obie funkcje następującym kodem.

main.js

// Returns the signed-in user's profile pic URL.
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().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 sprawdzić, czy użytkownik jest rzeczywiście zalogowany.

Wróć do pliku public/scripts/main.js .
Znajdź funkcję isUserSignedIn .
Zastąp całą funkcję następującym kodem.

main.js

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

Przetestuj logowanie do aplikacji

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 http://localhost:5000 , a następnie otwórz ją w przeglądarce.
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.
Po zalogowaniu powinno zostać wyświetlone Twoje zdjęcie profilowe i nazwa użytkownika:

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 podkolekcje. Każdą wiadomość z czatu będziemy przechowywać jako dokument w zbiorze najwyższego poziomu o nazwie messages .

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 komunikatu z zawartością pól komunikatów do instancji Cloud Firestore w kolekcji messages . Metoda add() dodaje do kolekcji nowy dokument z automatycznie wygenerowanym identyfikatorem.

Wróć do pliku public/scripts/main.js .
Znajdź funkcję saveMessage .
Zastąp całą funkcję następującym kodem.

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

Przetestuj wysyłanie wiadomości

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 http://localhost:5000 , a następnie otwórz ją w przeglądarce.
Po zalogowaniu wpisz wiadomość, na przykład „Cześć!”, 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 ćwiczenia z programowania).
Nowo dodaną wiadomość możesz zobaczyć w konsoli Firebase. Otwórz konsolę Firebase. W sekcji Budowanie kliknij Baza danych (lub kliknij tutaj i wybierz swój projekt) i powinieneś zobaczyć kolekcję wiadomości z nowo dodaną 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.

Wróć do pliku public/scripts/main.js .
Znajdź funkcję loadMessages .
Zastąp całą funkcję następującym kodem.

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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 w 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 obrębie kolekcja messages , 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 jeden parametr: funkcję zwrotną. 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 na ten temat możesz przeczytać w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

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.
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.
(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!

Dodamy teraz funkcję udostępniającą obrazy.

Cloud Firestore nadaje się do przechowywania uporządkowanych danych, natomiast 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 Cloud

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

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

Teraz dodasz funkcję wysyłania obrazu:

Wróć do pliku public/scripts/main.js .
Znajdź funkcję saveImageMessage .
Zastąp całą funkcję następującym kodem.

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

Przetestuj wysyłanie obrazów

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.
Po zalogowaniu kliknij przycisk przesyłania obrazu 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 .
W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem:

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

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 identyfikator nadawcy GCM do białej listy

W manifeście aplikacji internetowej musisz określić gcm_sender_id , czyli zakodowaną na gcm_sender_id wartość wskazującą, że FCM ma uprawnienia do wysyłania wiadomości do tej aplikacji.

Z katalogu web-start katalogu public otwórz manifest.json .
Dodaj wartość identyfikatora nadawcy przeglądarki w atrybucie gcm_sender_id dokładnie tak, jak pokazano poniżej. Nie zmieniaj wartości pokazanej poniżej.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

Dodaj pracownika serwisu FCM

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

W katalogu web-start katalogu public utwórz nowy plik o nazwie firebase-messaging-sw.js .
Dodaj następującą zawartość do tego nowego pliku.

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

Pracownik serwisu musi po prostu 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.

Wróć do pliku public/scripts/main.js .
Znajdź funkcję saveMessagingDeviceToken .
Zastąp całą funkcję następującym kodem.

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(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 ).

Wróć do pliku public/scripts/main.js .
Znajdź funkcję requestNotificationsPermissions .
Zastąp całą funkcję następującym kodem.

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

Uzyskaj token urządzenia

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.
Po zalogowaniu powinno pojawić się okno dialogowe uprawnień do powiadomień:
Kliknij Zezwól .
Otwórz konsolę JavaScript w swojej przeglądarce. Powinien pojawić się następujący komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Skopiuj token urządzenia. Będziesz go potrzebować w następnym etapie ćwiczenia z kodowania.

Wyślij powiadomienie na swoje urządzenie

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

Oprócz tokena urządzenia potrzebujesz też klucza serwera aplikacji Firebase . Aby uzyskać ten klucz, przejdź do Konsola Firebase > Ustawienia projektu > Komunikacja w chmurze , a następnie skopiuj klucz serwera .

Aby wysłać powiadomienie, musisz wysłać następujące żądanie HTTP:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}

W wierszu polecenia uruchom następujące polecenie cURL .

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

Pamiętaj, że powiadomienie pojawi się tylko wtedy, gdy aplikacja FriendlyChat będzie działać w tle. Aby wyświetlić powiadomienie, musisz odejść lub wyświetlić inną kartę. Gdy aplikacja jest na pierwszym planie, istnieje sposób na przechwycenie wiadomości wysyłanych przez FCM .

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

Zobacz zasady bezpieczeństwa bazy danych

Cloud Firestore używa określonego języka reguł do definiowania praw dostępu, zabezpieczeń 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 reguły 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:

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

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

Z katalogu web-start otwórz firestore.rules .
Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
Z katalogu web-start otwórz firebase.json .
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"
  }
}

Wdróż reguły bezpieczeństwa za pomocą interfejsu wiersza polecenia Firebase, uruchamiając następujące polecenie:

firebase deploy --only firestore

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

Zobacz zasady bezpieczeństwa Cloud Storage

Cloud Storage dla 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. Powinna być widoczna domyślna reguła, 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 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:

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

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

Z katalogu web-start otwórz storage.rules .
Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
Z katalogu web-start otwórz firebase.json .
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"
  }
}

Wdróż reguły bezpieczeństwa za pomocą interfejsu Firebase CLI, uruchamiając następujące polecenie:

firebase deploy --only storage

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

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 kilka 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ż uwzględniliśmy firebase-performance.js i init.js we wcześniejszym kroku ćwiczenia z kodowania, wystarczy dodać jeden wiersz, aby poinformować monitorowanie wydajności, aby automatycznie zbierał dane dotyczące obciążenia strony i żądań sieciowych, gdy użytkownicy odwiedzają wdrożoną witrynę!

W public/scripts/main.js dodaj następujący wiersz poniżej istniejącego TODO aby zainicjować monitorowanie wydajności.

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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, np. klika 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.

Otwórz public/index.html .
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ą :

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. Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o niestandardowych śladach i metrykach oraz niestandardowych atrybutach .

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" ).

Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu web-start Twojej aplikacji.
Deploy your files to your Firebase project by running the following command:

firebase deploy --except functions

The console should display the following:

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

Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

Firebase Authentication
Cloud Firestore
Firebase SDK for Cloud Storage
Wiadomości w chmurze Firebase
Firebase Performance Monitoring
Firebase Hosting

Next steps

Learn more

firebase.google.com

Ćwiczenia z programowania internetowego Firebase

Czego się nauczysz

Co będziesz potrzebował

Zaimportuj aplikację startową

Utwórz projekt Firebase

Dodaj do projektu aplikację internetową Firebase

Włącz logowanie przez Google na potrzeby Uwierzytelniania Firebase

Włącz Cloud Firestore

Włącz przechowywanie w chmurze

Zaimportuj pakiet SDK Firebase

Skonfiguruj Firebase

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

Śledź stan uwierzytelniania

Wyświetl informacje o zalogowanym użytkowniku

Przetestuj logowanie do aplikacji

Model danych

Dodaj wiadomości do Cloud Firestore

Przetestuj wysyłanie wiadomości

Synchronizuj wiadomości

Przetestuj synchronizację wiadomości

Zapisz obrazy w Cloud Storage Cloud

Przetestuj wysyłanie obrazów

Dodaj identyfikator nadawcy GCM do białej listy

Dodaj pracownika serwisu FCM

Uzyskaj tokeny urządzeń FCM

Poproś o uprawnienia do wyświetlania powiadomień

Uzyskaj token urządzenia

Wyślij powiadomienie na swoje urządzenie

Zobacz zasady bezpieczeństwa bazy danych

Zaktualizuj reguły bezpieczeństwa bazy danych

Zobacz zasady bezpieczeństwa Cloud Storage

Zaktualizuj reguły bezpieczeństwa Cloud Storage

Automatyczne ślady

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

Wyświetl dane o wydajności

What we've covered

Next steps

Learn more