Ćwiczenia z programowania internetowego Firebase

W tym codelab, dowiesz się, jak korzystać z Firebase łatwe tworzenie aplikacji internetowych, poprzez wdrożenie i wdrażania klienta czat przy użyciu produktów i usług Firebase.

3b1284f5144b54f6.png

Czego się nauczysz

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

Co będziesz potrzebował

  • IDE / edytor tekstu do wyboru, takich jak WebStorm , Atom , Sublime , lub Kodeksu VS
  • Menedżer pakietów npm , która zazwyczaj pochodzi 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).

Sklonować codelab za GitHub repozytorium z wiersza poleceń:

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

Alternatywnie, jeśli nie zainstalowano git, można pobrać z repozytorium w postaci pliku ZIP .

Zaimportuj aplikację startową

Korzystanie z IDE, otwarte lub importować 📁 web-start katalog ze sklonowanego repozytorium. Ten 📁 web-start katalog zawiera kod początkowy dla codelab, który będzie w pełni funkcjonalny czat web app.

Utwórz projekt Firebase

  1. Zaloguj się do Firebase .
  2. W konsoli Firebase, kliknij Dodaj Project, a następnie nazwać Firebase FriendlyChat projektu. Zapamiętaj identyfikator projektu dla swojego projektu Firebase.
  3. Usuń zaznaczenie pola wyboru Włącz Google Analytics dla tego projektu
  4. Kliknij Utwórz projekt.

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

  • Uwierzytelnianie Firebase łatwo pozwalają użytkownikom zalogować się do aplikacji.
  • Chmura Firestore aby zapisać dane strukturalne na obłoku i uzyskać natychmiastowe powiadomienie, gdy zmiany danych.
  • Cloud Storage dla Firebase zapisywanie plików w chmurze.
  • Firebase Hosting przyjmującego i służyć swoje aktywa.
  • Firebase Cloud Messaging do wysyłania powiadomień push i powiadomień wyskakujące przeglądarki wyświetlacz.
  • Firebase Monitorowanie wydajności do zbierania danych o wydajności dla aplikacji użytkownika.

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

Dodaj do projektu aplikację internetową Firebase

  1. Kliknij ikonę sieci 58d6543a156e56f9.png aby utworzyć nową aplikację internetową Firebase.
  2. Zarejestruj aplikację z przydomkiem pogawędkę, a następnie zaznacz pole wyboru obok również skonfigurować Firebase Hosting dla tej aplikacji. Kliknij Register aplikację.
  3. W następnym kroku zobaczysz obiekt konfiguracyjny. Wystarczy skopiować obiekt JS (nie otaczający HTML) do Firebase-config.js

Zarejestruj zrzut ekranu aplikacji internetowej

Włącz Google logowania do uwierzytelniania Firebase

Aby zezwolić użytkownikom na logowanie się do aplikacji internetowej ze swoich kont Google, użyjemy metody logowania Google.

Musisz włączyć logowania Google:

  1. W konsoli Firebase znajdź sekcję budować w lewym panelu.
  2. Kliknij uwierzytelniania, a następnie kliknij logowania w zakładce Metoda (lub kliknij tutaj , aby przejść bezpośrednio tam).
  3. Umożliwienia logowania dostawcy Google, a następnie kliknij przycisk Zapisz.
  4. Ustaw nazwę publiczną skierowaną swojej aplikacji na pogawędkę i wybrać e-mail wsparcia projektu z menu rozwijanego.
  5. Skonfigurować ekran zgody OAuth w konsoli Google Cloud i dodać logo:

d89fb3873b5d36ae.png

Włącz Cloud Firestore

Aplikacja internetowa korzysta Chmura FireStore zapisać wiadomości czatu i odbierać nowe wiadomości czatu.

Musisz włączyć Cloud Firestore:

  1. W sekcji zbudować konsoli Firebase, kliknij FireStore Database.
  2. Kliknij przycisk Utwórz bazę danych w panelu Chmura FireStore.

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

  1. Ustaw lokalizację, w której przechowywane są Twoje dane Cloud Firestore. Możesz pozostawić to ustawienie domyślne lub wybrać region blisko Ciebie. Kliknij Gotowe, aby przepis 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 zbudować konsoli Firebase, kliknij Storage.
  2. Jeśli nie ma przycisk Get Started, to znaczy, że przechowywanie Chmura jest już włączony, a ty nie musisz wykonać następujące kroki.
  3. Kliknij Get Started.
  4. Przeczytaj zastrzeżenie dotyczące zasad bezpieczeństwa dla projektu Firebase, a następnie kliknij przycisk Dalej.

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

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

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

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

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

  1. Upewnij się, że linia poleceń korzysta z lokalnym swojej aplikacji web-start katalog.
  2. Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:
firebase use --add
  1. Gdy pojawi się monit, wybierz swój projekt identyfikatora, a następnie dać Firebase projektowi aliasu.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjnych, tymczasowych itp.). Jednak do tej codelab, niech po prostu użyć alias default .

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

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

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

Używamy Hosting Firebase emulator służyć naszą aplikację lokalnie. Aplikacja internetowa powinna być dostępna od http: // localhost: 5000 . Wszystkie pliki, które znajdują się pod public podkatalogu są serwowane.

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

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

4c23f9475228cef4.png

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

Zbudujmy teraz czat w czasie rzeczywistym!

Zaimportuj pakiet SDK Firebase

Musimy zaimportować pakiet Firebase SDK do aplikacji. Istnieje wiele sposobów, aby to zrobić, jak to opisano 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.

Mamy zamiar uzyskać Firebase SDK z KMP i używać WebPACK do pęczka nasz kod. Robimy to, aby Webpack mógł usunąć niepotrzebny kod, utrzymując mały rozmiar pakietu JS, aby zapewnić jak najszybsze ładowanie naszej aplikacji. Z tego codelab, mamy już utworzony web-start/package.json plik, który zawiera Firebase SDK jako zależność, jak również importowane potrzebne funkcje w górnej części web-start/src/index.js .

pakiet.json

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

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

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

Zainstaluj pakiet Firebase SDK i rozpocznij tworzenie pakietu Webpack

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

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

Skonfiguruj Firebase

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

  1. Przejdź do ustawień projektu w konsoli Firebase
  2. Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracyjnego.
  3. Wybierz „Konfiguracja” w okienku fragmentu kodu SDK Firebase.
  4. Skopiuj fragment obiektu config, a następnie dodać 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ź do dolnej części web-start/src/index.js i zainicjować Firebase:

index.js

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

Firebase SDK powinien być gotowy do użytku, ponieważ jest importowany i inicjowany w index.html . Jesteśmy teraz zamierza wdrożyć użytkownika logowania się przy użyciu uwierzytelniania Firebase .

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

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się z Google, w signIn funkcja jest wyzwalany. (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 popup, ale kilka innych metod są dostępne Firebase.

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

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

signOut funkcja jest wyzwalany, gdy użytkownik kliknie przycisk Zarejestruj się.

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

index.js

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

Śledź stan uwierzytelniania

Aby odpowiednio zaktualizować nasz interfejs użytkownika, potrzebujemy sposobu na sprawdzenie, czy użytkownik jest zalogowany, czy wylogowany. Dzięki Uwierzytelnianiu Firebase możesz zarejestrować obserwatora w stanie uwierzytelniania, który będzie wyzwalany przy każdej zmianie stanu uwierzytelniania.

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

index.js

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

Powyższy kod funkcji rejestru authStateObserver jako obserwator 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, podpisany w danych użytkownika jest zawsze dostępny w currentUser obiektu. Wcześniej możemy skonfigurować authStateObserver funkcję spustu gdy użytkownik tak, że w naszych aktualizacjach UI odpowiednio. Będzie ona nazywać getProfilePicUrl i getUserName gdy uruchomiony.

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

index.js

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

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

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

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

index.js

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

Przetestuj logowanie do aplikacji

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym wypadku, należy uruchomić firebase serve --only hosting w wierszu polecenia, aby rozpocząć wyświetlanie app od http: // localhost: 5000 , a następnie otworzyć go w przeglądarce.
  2. Zaloguj się do aplikacji za pomocą przycisku logowania i swojego konta Google. Jeśli zobaczysz komunikat o błędzie informujący auth/operation-not-allowed , sprawdzić, aby upewnić się, że masz włączone Google Sign-in jako dostawcy uwierzytelniania w konsoli Firebase.
  3. Po zalogowaniu się powinno wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika: c7401b3d44d0d78b.png

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

Model danych

Dane Cloud Firestore są podzielone na kolekcje, dokumenty, pola i podkolekcje. Będziemy przechowywać każdą wiadomość na czacie jako dokumentu w kolekcji najwyższego poziomu o nazwie messages .

688d7bc5fb662b57.png

Dodaj wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu, które są zapisywane przez użytkowników użyjemy Chmura FireStore .

W tej sekcji dodasz funkcjonalność umożliwiającą użytkownikom pisanie nowych wiadomości w Twojej bazie danych. Użytkownik, klikając przycisk WYŚLIJ spowoduje fragment kodu poniżej. Dodaje obiekt wiadomość z zawartością pól wiadomości na przykład Chmura FireStore w messages kolekcji. add() metoda dodaje nowy dokument za pomocą automatycznie generowanego identyfikatora kolekcji.

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

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Przetestuj wysyłanie wiadomości

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym wypadku, należy uruchomić firebase serve --only hosting w wierszu polecenia, aby rozpocząć wyświetlanie app od http: // localhost: 5000 , a następnie otworzyć go w przeglądarce.
  2. Po zalogowaniu się, wprowadź wiadomość, takich jak „Hej!”, A następnie kliknij przycisk Wyślij. Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak nie będzie jeszcze zobaczyć dane w aktualnej aplikacji internetowych, ponieważ wciąż musimy wdrożyć pobierania danych (następny odcinek codelab).
  3. Nowo dodaną wiadomość możesz zobaczyć w konsoli Firebase. Otwórz konsolę Firebase. W sekcji budowy kliknij FireStore bazy danych (lub kliknij tutaj i wybierz projekt) i powinieneś zobaczyć zbiór wiadomości z nowo dodanym komunikatem:

6812efe7da395692.png

Synchronizacja wiadomości

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

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

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

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Aby odsłuchać wiadomości w bazie danych, tworzymy zapytanie o kolekcji za pomocą collection funkcję, aby określić zbiór danych, które chcemy słuchać w. W kodzie powyżej, jesteśmy odsłuchu do zmian w obrębie messages kolekcja, w której przechowywane są wiadomości czatu. Jesteśmy również zastosowanie limit tylko przez słuchanie ostatnich 12 komunikatów przy użyciu .limit(12) i uporządkowanie wiadomości według daty użyciu orderBy('timestamp', 'desc') , aby uzyskać 12 najnowszych wiadomości.

onSnapshot funkcja wykonuje zapytanie jako pierwszy parametr i funkcję wywołania zwrotnego jako drugi. Funkcja wywołania zwrotnego zostanie wyzwolona, ​​gdy nastąpią jakiekolwiek zmiany w dokumentach pasujących do zapytania. Może tak być, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Możesz przeczytać więcej na ten temat w dokumentacji Chmura FireStore .

Przetestuj synchronizację wiadomości

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym wypadku, należy uruchomić firebase serve --only hosting w wierszu polecenia, aby rozpocząć wyświetlanie app od http: // localhost: 5000 , a następnie otworzyć go w przeglądarce.
  2. Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie użytkownika FriendlyChat (patrz poniżej). Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
  3. (Opcjonalnie) Można spróbować ręcznego usuwania, modyfikowania lub dodając nowe wiadomości bezpośrednio w sekcji Database konsoli Firebase; wszelkie zmiany powinny być odzwierciedlone w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

2168dec79b573d07.png

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

Chociaż Cloud Firestore dobrze nadaje się do przechowywania uporządkowanych danych, Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików / blob, a użyjemy go przechowywać żadnych obrazów że akcje użytkowników za pomocą naszej aplikacji.

Zapisz obrazy w Cloud Storage

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

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

Teraz dodasz funkcję wysyłania obrazu:

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

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Przetestuj wysyłanie obrazów

  1. Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym wypadku, należy uruchomić firebase serve --only hosting w wierszu polecenia, aby rozpocząć wyświetlanie app od http: // localhost: 5000 , a następnie otworzyć go 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, zachęcamy do korzystania z tego piękny obraz filiżanki kawy .
  3. W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem: 3b1284f5144b54f6.png

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

Dodamy teraz obsługę powiadomień przeglądarki. Aplikacja powiadomi użytkowników, gdy na czacie pojawią się nowe wiadomości. Firebase Cloud Messaging (FCM) jest wieloplatformowym rozwiązaniem komunikacyjnym, który pozwala niezawodnie dostarczać wiadomości i powiadomień za darmo.

Dodaj pracownika serwisu FCM

Aplikacja internetowa potrzebuje pracownik serwisu , który będzie odbierać i powiadomień wyświetlania internetowej.

  1. Z web-start katalogu, w src katalogu, otwarte 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ć pakiet Firebase Cloud Messaging SDK, który zajmie się wyświetlaniem powiadomień.

Uzyskaj tokeny urządzeń FCM

Kiedy powiadomienia zostały włączone na urządzeniu lub w przeglądarce, będziesz mieć urządzenie tokenu. Ten token urządzenia jest używany do wysyłania powiadomień do określonego urządzenia lub określonej przeglądarki.

Kiedy objawy-in użytkownika, nazywamy saveMessagingDeviceToken funkcję. To miejsce, gdzie dostaniemy urządzenie FCM Reklamowe z przeglądarki i zapisać go do Cloud FireStore.

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

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

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

Poproś o uprawnienia do wyświetlania powiadomień

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

8b9d0c66dc36153d.png

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

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Uzyskaj token urządzenia

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

Wyślij powiadomienie na swoje urządzenie

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

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

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

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

de79e8638a45864c.png

Zobacz zasady bezpieczeństwa bazy danych

Chmura Firestore wykorzystuje specyficzne zasady językowe do definiowania praw dostępu, bezpieczeństwo i walidacji 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 w karcie Reguły w sekcji bazy danych, można 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:

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

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

  1. Z web-start katalogu, otwarte firestore.rules .
  2. Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
  3. Z web-start katalogu, otwartego firebase.json .
  4. Dodać firestore.rules przypisują wskazując firestore.rules , jak pokazano poniżej. (The hosting atrybut powinien być już w pliku).

firebase.json

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

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

✔  Deploy complete!

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

Zobacz zasady bezpieczeństwa Cloud Storage

Cloud Storage dla Firebase wykorzystuje specyficzne zasady językowe do definiowania praw dostępu, bezpieczeństwo i walidacji 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 zakładce Reguły sekcja przechowywania, można 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 folderów
  • Zezwalaj wszystkim na czytanie z Cloud Storage
  • Upewnij się, że przesłane pliki są obrazami
  • Ogranicz rozmiar przesyłanych obrazów do maksymalnie 5 MB

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

zasady.magazynowania

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Zaktualizuj reguły bezpieczeństwa Cloud Storage

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

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

  1. Przejdź do sekcji Storage z panelu po lewej stronie, 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 Publish.

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

  1. Z web-start katalogu, otwarte storage.rules .
  2. Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
  3. Z web-start katalogu, otwartego firebase.json .
  4. Dodać storage.rules atrybutu wskazuje na storage.rules pliku, jak pokazano poniżej. (The hosting i database atrybut powinien być już w pliku).

firebase.json

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

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

✔  Deploy complete!

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

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 codelab, umożliwiliśmy Monitorowanie wydajności od Hosting adresów URL. Zapoznać się z dokumentacją , aby zobaczyć inne metody umożliwiające SDK.

Automatyczne ślady

Ponieważ mamy już importować getPerformance w górnej web-start/src/index.js , musimy tylko dodać jedną linię powiedzieć Monitorowanie wydajności do automatycznego zbierania i ładowania strony sieci żądanie metryk dla ciebie, gdy użytkownicy odwiedzają wdrożony stronę!

  1. W web-start/src/index.js , dodaj następującą linię poniżej istniejącego TODO zainicjować monitorowanie wydajności.

index.js

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

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

Opóźnienie pierwsze wejście jest przydatna, ponieważ przeglądarka reagowanie na interakcji użytkownika daje swoim użytkownikom swoje pierwsze wrażenia na temat wrażliwości swojej 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.

  1. Otwarte public/index.html .
  2. Odkomentuj script tag na poniższej linii.

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 opóźnienia wejścia PolyFill, warto zapoznać się z dokumentacją .

Wyświetl dane o wydajności

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

29389131150f33d7.png

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

Możesz także skonfigurować niestandardowe ślady, metryki i atrybuty, aby mierzyć określone aspekty swojej aplikacji. Odwiedź dokumentacji aby dowiedzieć się więcej o niestandardowych śladów i metryki i atrybutów niestandardowych .

Firebase oferty usługa hostingu służyć swoje aktywa i aplikacji internetowych. Możesz wdrożyć swoje pliki w Hostingu Firebase za pomocą interfejsu wiersza polecenia Firebase. Przed wdrożeniem, trzeba podać w firebase.json pliku, który lokalne pliki powinny zostać wykorzystane. 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 hostingowych są określone zgodnie z hosting atrybutu:

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 CLI powiedzieć, że chcemy, aby wdrożyć wszystkie pliki w ./public katalogu ( "public": "./public" ).

  1. Upewnij się, że linia poleceń korzysta z lokalnym swojej aplikacji web-start katalog.
  2. Wdróż pliki w projekcie Firebase, uruchamiając następujące polecenie:
firebase deploy --except functions
  1. Konsola powinna wyświetlić następujące informacje:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana w globalnej sieci CDN przy użyciu Hostingu Firebase w dwóch własnych subdomenach Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternatywnie, można uruchomić firebase open hosting:site w linii poleceń.

Odwiedź dokumentację, aby dowiedzieć się więcej na temat jak Firebase Hosting prace .

Idź do konsoli Firebase dziale Hosting projektu aby zobaczyć przydatnych informacji hosting i narzędzi, w tym historii swoich wykorzystuje funkcjonalność przywrócić do poprzednich wersjach aplikacji i przepływu pracy, aby skonfigurować domenę niestandardową.

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

Co omówiliśmy

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

Następne kroki

Ucz się więcej