Web Codelab Firebase

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

Czego się nauczysz

Synchronizuj dane przy użyciu 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 dotyczące wydajności 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 codelab (zobacz następny krok codelab, aby dowiedzieć się, jak uzyskać kod).

Sklonuj repozytorium Codelab GitHub 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 the 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.

Utwórz projekt Firebase

Zaloguj się do Firebase .
W konsoli Firebase kliknij Dodaj projekt , a następnie nazwij projekt Firebase FriendlyChat . Zapamiętaj identyfikator projektu dla swojego projektu Firebase.
Kliknij opcję 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, aby zapisywać uporządkowane dane w chmurze i otrzymywać natychmiastowe powiadomienia o zmianie danych.
Cloud Storage for Firebase do zapisywania plików w chmurze.
Hosting Firebase do hostowania i udostępniania 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ą zostać włączone za pomocą konsoli Firebase.

Dodaj aplikację internetową Firebase do projektu

Kliknij ikonę sieci aby utworzyć nową aplikację internetową Firebase.
Zarejestruj aplikację, używając pseudonimu Czat przyjazny , a następnie zaznacz pole obok Skonfiguruj także 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 kodeksu.

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

Musisz włączyć logowanie Google :

W konsoli Firebase znajdź sekcję Build w lewym panelu.
Kliknij opcję 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 adres e-mail pomocy technicznej projektu z menu rozwijanego.
Skonfiguruj ekran akceptacji OAuth w Google Cloud Console i dodaj logo:

Włącz Cloud Firestore

Aplikacja internetowa korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Musisz włączyć Cloud Firestore:

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

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

Tryb testowy zapewnia, że podczas programowania możemy swobodnie pisać do bazy danych. W dalszej części tego kodowania poprawimy bezpieczeństwo naszej bazy danych.

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

Włącz przechowywanie w chmurze

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

Musisz włączyć Cloud Storage:

W sekcji Develop konsoli Firebase kliknij Storage .
Kliknij Rozpocznij .
Przeczytaj zastrzeżenie dotyczące reguł bezpieczeństwa dla projektu Firebase, a następnie kliknij Dalej .

Dzięki domyślnym regułom bezpieczeństwa każdy uwierzytelniony użytkownik może zapisać wszystko w Cloud Storage. W dalszej części tego kodowania 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 polecenia (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ącą komendę npm:

npm -g install firebase-tools

Sprawdź, czy interfejs CLI został poprawnie zainstalowany, uruchamiając następujące polecenie:

firebase --version

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

Autoryzuj interfejs wiersza polecenia Firebase, uruchamiając następujące polecenie:

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację Twojej aplikacji dla Hostingu Firebase z lokalnego katalogu Twojej aplikacji (repozytorium, które sklonowałeś wcześniej w codelab). Jednak aby pobrać konfigurację, musimy powiązać Twoją aplikację z Twoim projektem Firebase.

Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu web-start aplikacji.
Skojarz 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 (produkcyjne, przejściowe itp.). Jednak w tym codelab użyjmy po prostu aliasu default .

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

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

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

firebase serve --only hosting

Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:

✔  hosting: Local server: http://localhost:5000

Używamy emulatora Hostingu Firebase do lokalnego udostępniania naszej aplikacji. Aplikacja internetowa powinna być teraz dostępna pod adresem http: // localhost: 5000 . Obsługiwane są wszystkie pliki, które znajdują 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ą to zrobi wkrótce! 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ć go w swojej aplikacji, jeśli używasz Browserify.

Ponieważ używamy Hostingu Firebase do obsługi naszej aplikacji, zamierzamy zaimportować lokalne adresy URL, które znajdują się w pliku index.html (znajdującym się w katalogu web-start/public/ ). W przypadku tego codelab 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/6.4.0/firebase-app.js"></script>
<script src="/__/firebase/6.4.0/firebase-auth.js"></script>
<script src="/__/firebase/6.4.0/firebase-storage.js"></script>
<script src="/__/firebase/6.4.0/firebase-messaging.js"></script>
<script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
<script src="/__/firebase/6.4.0/firebase-performance.js"></script>

Podczas tego kodowania będziemy używać uwierzytelniania Firebase, Cloud Firestore, Cloud Storage, Cloud Messaging i Performance Monitoring, 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 również skonfigurować pakiet SDK Firebase, 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, dla tego codelab, dodaliśmy już dla ciebie następujący wiersz na dole pliku public/index.html , ale sprawdź dokładnie, 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 .

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

/__/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 . Zamierzamy teraz zaimplementować logowanie użytkowników przy użyciu uwierzytelniania Firebase .

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , zostanie signIn funkcja signIn . (Już to dla Ciebie skonfigurowaliśmy!) W przypadku tego codelab 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 .

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 wyzwalana, gdy użytkownik kliknie przycisk Wyloguj się .

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, aby sprawdzić, czy użytkownik jest zalogowany, czy wylogowany. Dzięki uwierzytelnianiu Firebase możesz zarejestrować obserwatora na temat stanu uwierzytelniania, który będzie wyzwalany za każdym razem, gdy zmieni się stan 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 się zaloguje 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świetlać zdjęcie profilowe zalogowanego użytkownika i nazwę 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 aby wyzwalała się, gdy użytkownik się zaloguje, aby nasz interfejs użytkownika był odpowiednio aktualizowany. Po getUserName 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 wysłać wiadomość, gdy użytkownik nie jest zalogowany (chociaż możesz spróbować!). Musimy więc wykryć, 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 udostępniana, 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.
Zaloguj się do aplikacji za pomocą przycisku logowania i konta Google. Jeśli zobaczysz komunikat o błędzie informujący, że auth/operation-not-allowed , upewnij się, że włączono Logowanie Google jako dostawcę uwierzytelniania w konsoli Firebase.
Po zalogowaniu się powinno wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika:

W tej sekcji napiszemy pewne dane w Cloud Firestore, abyśmy mogli wypełnić interfejs użytkownika 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 zbiory, dokumenty, pola i podkolekcje. Będziemy przechowywać każdą wiadomość czatu jako dokument w kolekcji najwyższego poziomu zwanej messages .

Dodaj wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu napisanych przez użytkowników będziemy używać Cloud Firestore .

W tej sekcji dodasz funkcję umożliwiającą użytkownikom pisanie nowych wiadomości w Twojej bazie danych. Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje wyświetlenie 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.

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 udostępniana, 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 się wprowadź wiadomość, taką jak „Hej!”, 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 codelab).
Możesz zobaczyć nowo dodaną wiadomość w konsoli Firebase. Otwórz konsolę Firebase. W sekcji Develop kliknij Database (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 wyzwalają się, gdy dane się zmieniają, 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. Będziemy wyświetlać tylko ostatnie 12 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 odsłuchać komunikaty w bazie danych, tworzymy zapytanie dotyczące kolekcji za pomocą 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 kolekcja messages , w której przechowywane są wiadomości czatu. Stosujemy również limit, słuchając tylko ostatnich 12 wiadomości przy użyciu .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 to mieć miejsce, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Możesz przeczytać więcej na ten temat w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

Jeśli Twoja aplikacja jest nadal udostępniana, 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 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 konsoli Firebase; wszelkie zmiany powinny zostać odzwierciedlone w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

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

Chociaż Cloud Firestore jest dobry do przechowywania ustrukturyzowanych danych, Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage for Firebase to usługa przechowywania plików / obiektów blob, której będziemy używać do przechowywania wszelkich obrazów udostępnionych przez użytkownika za pomocą naszej aplikacji.

Zapisz obrazy w Cloud Storage

W tym programie kodowym dodaliśmy już przycisk, który uruchamia okno dialogowe wyboru plików. Po wybraniu pliku saveImageMessage jest funkcja saveImageMessage i można uzyskać odniesienie do wybranego pliku. Funkcja saveImageMessage wykonuje następujące czynności:

Tworzy „zastępczą” wiadomość czatu w kanale czatu, tak aby użytkownicy widzieli animację „Ładowanie”, gdy przesyłamy obraz.
Przesyła plik obrazu do Cloud Storage na tę ścieżkę: /<uid>/<messageId>/<file_name>
Generuje publicznie czytelny adres URL pliku obrazu.
Aktualizuje wiadomość czatu o adres URL nowo przesłanego pliku obrazu zamiast tymczasowego obrazu wczytywania.

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 udostępniana, 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 się 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 kawy .
W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem:

Jeśli spróbujesz dodać obraz bez zalogowania, 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 zostaną opublikowane nowe wiadomości. Firebase Cloud Messaging (FCM) to wieloplatformowe rozwiązanie do przesyłania wiadomości, które pozwala niezawodnie dostarczać wiadomości i powiadomienia bez żadnych kosztów.

Umieść identyfikator nadawcy GCM na białej liście

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.

W katalogu web-start , w katalogu public , otwórz manifest.json .
Dodaj wartość identyfikatora nadawcy przeglądarki do atrybutu gcm_sender_id dokładnie tak, jak pokazano poniżej. Nie zmieniaj wartości przedstawionej 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 usługi FCM

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

W katalogu web-start , w 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();

Service Worker musi po prostu załadować i zainicjować pakiet 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 służy do wysyłania powiadomienia do określonego urządzenia lub określonej przeglądarki.

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

Poproś o uprawnienia do wyświetlania powiadomień

Jeśli użytkownik nie przyznał Twojej aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W tym przypadku wywołujemy metodę firebase.messaging().requestPermission() , co spowoduje wyświetlenie okna dialogowego przeglądarki z pytaniem o to pozwolenie ( 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 udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase serve --only hosting w wierszu poleceń, aby rozpocząć obsługę aplikacji z adresu http: // localhost: 5000 , a następnie otwórz ją w przeglądarce.
Po zalogowaniu się powinno pojawić się okno dialogowe uprawnień do powiadomień:
Kliknij Zezwól .
Otwórz konsolę JavaScript swojej przeglądarki. Powinien zostać wyświetlony następujący komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Skopiuj token urządzenia. Będziesz go potrzebować na następnym etapie codelab.

Wyślij powiadomienie na swoje urządzenie

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

Oprócz tokena urządzenia będziesz również potrzebować 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 poleceń uruchom następującą komendę 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 powiadomienie zostało wyświetlone, musisz wyjść 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:

Wyświetl reguły bezpieczeństwa bazy danych

Cloud Firestore używa określonego języka reguł do definiowania praw dostępu, zabezpieczeń i weryfikacji danych.

Podczas konfigurowania projektu Firebase na początku tej biblioteki kodów zdecydowaliśmy się użyć domyślnych reguł zabezpieczeń „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 magazynu danych. Oznacza to, że każdy użytkownik może czytać i zapisywać w dowolnych kolekcjach w Twoim magazynie danych.

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

Zaktualizujemy reguły, aby ograniczyć rzeczy, stosując następujące zasady:

firestore.rules

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, albo w konsoli Firebase, albo z poziomu 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 kartę Reguły .
Zastąp reguły domyślne, 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 reguły domyślne, które są już 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 zabezpieczeń 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

Wyświetl reguły bezpieczeństwa Cloud Storage

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

Podczas konfigurowania projektu Firebase na początku tego poradnika zdecydowaliśmy się 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ęć masowa , możesz przeglądać i modyfikować reguły. Powinieneś zobaczyć domyślną regułę, która umożliwia każdemu zalogowanemu użytkownikowi odczyt i zapis dowolnych plików w Twoim zasobniku na dane.

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

Zaktualizujemy reguły, aby wykonać następujące czynności:

Zezwalaj każdemu użytkownikowi na zapis tylko w swoich określonych folderach
Zezwól wszystkim na czytanie z Cloud Storage
Upewnij się, że przesłane pliki to obrazy
Ogranicz rozmiar obrazów, które można przesłać, do maksymalnie 5 MB

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

storage.rules

// 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 magazynu: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego przy użyciu interfejsu wiersza polecenia Firebase.

Aby zaktualizować reguły zabezpieczeń w konsoli Firebase:

Przejdź do sekcji Pamięć w lewym 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:

W katalogu web-start otwórz storage.rules .
Zastąp reguły domyślne, które są już 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 zabezpieczeń za pomocą interfejsu wiersza polecenia Firebase, 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ć zestawu SDK do monitorowania wydajności, aby zebrać rzeczywiste dane o wydajności z aplikacji, a następnie przejrzeć i przeanalizować te dane w konsoli Firebase. Monitorowanie wydajności pomaga zrozumieć, gdzie i kiedy można poprawić wydajność aplikacji, dzięki czemu można użyć tych informacji do rozwiązania problemów z wydajnością.

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

Automatyczne ślady

Ponieważ umieściliśmy firebase-performance.js i init.js na wcześniejszym etapie codelab, musimy tylko dodać jeden wiersz, aby poinstruować monitorowanie wydajności, aby automatycznie zbierało wskaźniki 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: Initialize Firebase Performance Monitoring.
firebase.performance();

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

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

Pierwsze opóźnienie wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. Po kliknięciu przycisku lub hiperłącza. 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 strony.

Jeśli chcesz zmierzyć pierwsze opóźnienie wejścia, musisz bezpośrednio dołączyć następujący 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 o pierwszym wypełnieniu opóźnienia wejścia, zajrzyj do dokumentacji .

Wyświetl dane dotyczące wydajności

Ponieważ nie wdrożyłeś jeszcze swojej witryny (wdrożysz ją w następnym kroku), oto zrzut ekranu przedstawiający wskaźniki wydajności ładowania strony, które zobaczysz w konsoli Firebase w ciągu 12 godzin 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 pakiet SDK rejestruje takie aspekty, jak pierwsza zawartość, 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 atrybutach niestandardowych .

Firebase oferuje usługę hostingową do obsługi Twoich zasobów i aplikacji internetowych. Możesz wdrożyć pliki w Hostingu Firebase za pomocą interfejsu wiersza polecenia Firebase. Przed wdrożeniem należy określić w pliku firebase.json , które pliki lokalne mają zostać wdrożone. W przypadku tego codelab zrobiliśmy to już za Ciebie, ponieważ ten krok był wymagany do obsługi naszych plików podczas tego codelab. 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 poleceń uzyskuje dostęp do lokalnego katalogu web-start aplikacji.
Wdróż pliki w projekcie Firebase, uruchamiając następujące polecenie:

firebase deploy --except functions

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

Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana 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ń.

Odwiedź dokumentację, aby dowiedzieć się więcej o tym, jak działa Hosting Firebase .

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
Firebase Cloud Messaging
Firebase Performance Monitoring
Firebase Hosting

Next steps

Learn more

firebase.google.com

Web Codelab Firebase

Czego się nauczysz

Co będziesz potrzebował

Zaimportuj aplikację startową

Utwórz projekt Firebase

Dodaj aplikację internetową Firebase do projektu

Włącz logowanie Google do uwierzytelniania Firebase

Włącz Cloud Firestore

Włącz przechowywanie w chmurze

Zaimportuj pakiet SDK Firebase

Skonfiguruj Firebase

Uwierzytelnij swoich użytkowników za pomocą logowania Google

Ś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

Przetestuj wysyłanie obrazów

Umieść identyfikator nadawcy GCM na białej liście

Dodaj pracownika usługi FCM

Uzyskaj tokeny urządzeń FCM

Poproś o uprawnienia do wyświetlania powiadomień

Uzyskaj token urządzenia

Wyślij powiadomienie na swoje urządzenie

Wyświetl reguły bezpieczeństwa bazy danych

Zaktualizuj reguły bezpieczeństwa bazy danych

Wyświetl reguły bezpieczeństwa Cloud Storage

Zaktualizuj reguły bezpieczeństwa Cloud Storage

Automatyczne ślady

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

Wyświetl dane dotyczące wydajności

What we've covered

Next steps

Learn more