Ćwiczenie z programowania dotyczące aplikacji internetowych AngularFire

1. Omówienie

W tym ćwiczeniu dowiesz się, jak za pomocą pakietu AngularFire tworzyć aplikacje internetowe, wdrażając i implementując klienta czatu za pomocą usług Firebase.

Czego się nauczysz

• Utworzyć aplikację internetową za pomocą Angular i Firebase.
• Synchronizuj dane za pomocą Cloud Firestore i Cloud Storage dla Firebase.
• Uwierzytelniaj użytkowników za pomocą uwierzytelniania Firebase.
• Wdróż aplikację internetową w Firebase App Hosting.
• Wysyłanie powiadomień za pomocą Komunikacji w chmurze Firebase.
• Gromadzenie danych o wydajności aplikacji internetowej.

Czego potrzebujesz

• Konto GitHub
• możliwość uaktualnienia projektu Firebase do abonamentu Blaze,
• wybrany edytor IDE/tekst, taki jak WebStorm, Sublime lub VS Code;
• menedżer pakietów npm, który zwykle zawiera środowisko Node.js;
• Terminal/konsola
• przeglądarkę, np. Chrome;
• przykładowy kod z codelaba (aby pobrać kod, przejdź do następnego kroku w codelabie);

2. Pobieranie przykładowego kodu

Tworzenie repozytorium GitHub

Źródło ćwiczeń z programowania znajdziesz na stronie https://github.com/firebase/codelab-friendlychat-web. Repozytorium zawiera przykładowe projekty na wiele platform. Ten kodlab używa jednak tylko katalogu angularfire-start.

Skopiuj folder angularfire-start do swojego repozytorium:

1. W terminalu utwórz nowy folder na komputerze i przejdź do nowego katalogu:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. Użyj pakietu npm giget, aby pobrać tylko folder angularfire-start:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. Śledź zmiany lokalnie za pomocą git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. Utwórz nowe repozytorium GitHub: https://github.com/new. Możesz nadać mu dowolną nazwę.
   1. Serwis GitHub wyświetli nowy adres URL repozytorium, który wygląda podobnie do tego: https://github.com/[user-name]/[repository-name].git lub [e-mail]:[user-name]/[repository-name].git. Skopiuj ten adres URL.
5. Prześlij zmiany lokalne do nowego repozytorium GitHub. Uruchom to polecenie, zastępując adres URL repozytorium zmienną your-repository-url.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. W repozytorium GitHub powinien teraz być widoczny kod startowy.

3. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase.
2. W konsoli Firebase kliknij Dodaj projekt, a potem nadaj projektowi Firebase nazwę FriendlyChat. Zapamiętaj identyfikator projektu Firebase.
3. Odznacz pole Włącz Google Analytics w tym projekcie.
4. Kliknij Utwórz projekt.

Ważne: projekt Firebase będzie miał nazwę FriendlyChat, ale Firebase automatycznie przypisze mu unikalny identyfikator projektu w formie friendlychat-1234. Ten unikalny identyfikator jest identyfikowany przez projekt (również w interfejsie wiersza poleceń), a FriendsChat to po prostu wyświetlana nazwa.

Aplikacja, którą chcesz utworzyć, korzysta z usług Firebase dostępnych dla aplikacji internetowych:

• Uwierzytelnianie Firebase, aby umożliwić użytkownikom łatwe logowanie się w aplikacji.
• Cloud Firestore do zapisywania ustrukturyzowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianach danych.
• Cloud Storage dla Firebase, aby zapisywać pliki w chmurze.
• Firebase App Hosting służy do tworzenia, hostowania i udostępniania aplikacji.
• Komunikacja w chmurze Firebase – 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 aplikacji.

Niektóre z tych usług wymagają specjalnej konfiguracji lub trzeba włączyć je w konsoli Firebase.

Uaktualnij abonament Firebase

Jeśli chcesz korzystać z Firebase App Hosting i Cloud Storage dla Firebase, Twój projekt Firebase musi mieć abonament według wykorzystania (Blaze), co oznacza, że jest połączony z kontem rozliczeniowym Cloud.

• Do konta rozliczeniowego Cloud wymagana jest forma płatności, np. karta kredytowa.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania 300 USD środków i bezpłatnego okresu próbnego na koncie płatności Cloud.
• Jeśli wykonujesz to Codelab w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Aby przenieść projekt na abonament Blaze, wykonaj te czynności:

1. W konsoli Firebase wybierz Przejdź na większy pakiet.
2. Wybierz abonament Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
   Jeśli w ramach tego uaktualnienia konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrót do procesu uaktualniania w konsoli Firebase.

Uwaga: po zakończeniu tego ćwiczenia możesz obniżyć cenę projektu do bezpłatnego planu cenowego (Spark).

Dodawanie aplikacji internetowej Firebase do projektu

1. Aby utworzyć nową aplikację internetową Firebase, kliknij ikonę sieci .
2. Zarejestruj aplikację przy użyciu pseudonimu Friendly Chat. Nie zaznaczaj pola Skonfiguruj również Hosting Firebase dla tej aplikacji. Kliknij Zarejestruj aplikację.
3. W następnym kroku zobaczysz obiekt konfiguracji. Nie musisz tego robić teraz. Kliknij Przejdź do konsoli.

Skonfiguruj uwierzytelnianie

Aby umożliwić użytkownikom logowanie się w aplikacji internetowej za pomocą kont Google, musisz użyć metody logowania Google.

1. W konsoli Firebase otwórz Uwierzytelnianie.
2. Kliknij Rozpocznij.
3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz.
4. W polu tekstowym Publiczna nazwa projektu wpisz łatwą do zapamiętania nazwę, na przykład My Next.js app.
5. Z listy Adres e-mail pomocy dla projektu wybierz swój adres e-mail.
6. Kliknij Zapisz.

Konfigurowanie Cloud Firestore

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

Aby skonfigurować Cloud Firestore w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Build (Kompilacja), a potem wybierz Firestore database (Baza danych Firestore).
2. Kliknij Utwórz bazę danych.
3. W polu Identyfikator bazy danych pozostaw wartość (default).
4. Wybierz lokalizację bazy danych, a potem kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację blisko użytkowników.
5. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
   W dalszej części tego ćwiczenia z programowania dodasz reguły zabezpieczeń, aby zabezpieczyć swoje dane. Nie udostępniaj ani nie udostępniaj aplikacji publicznie bez dodawania reguł zabezpieczeń do bazy danych.
6. Kliknij Utwórz.

Konfigurowanie Cloud Storage dla Firebase

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

Aby skonfigurować Cloud Storage dla Firebase w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a potem kliknij Storage.
2. Kliknij Rozpocznij.
3. Wybierz lokalizację domyślnego zasobnika Cloud Storage.
   Zasobniki w usługach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu „Zawsze bezpłatne” w Google Cloud Storage. Zasobniki w pozostałych lokalizacjach są zgodne z cennikiem i wykorzystaniem Google Cloud Storage.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
   W dalszej części tego ćwiczenia z programowania dodasz reguły zabezpieczeń, aby zabezpieczyć swoje dane. Nie rozpowszechniaj ani nie udostępniaj aplikacji publicznie bez dodawania reguł zabezpieczeń do zasobnika na dane.
5. Kliknij Utwórz.

4. Instalowanie interfejsu wiersza poleceń Firebase

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

Uwaga: aby zainstalować interfejs wiersza poleceń, musisz zainstalować interfejs npm, który zwykle zawiera Node.js.

1. Zainstaluj interfejs wiersza poleceń, wykonując to polecenie npm:

npm -g install firebase-tools@latest

Nie działa? Może być konieczna zmiana uprawnień npm.

2. Aby sprawdzić, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchom to polecenie:

firebase --version

Upewnij się, że wersja wiersza poleceń Firebase to vv13.9.0 lub nowsza.

3. Autoryzuj interfejs wiersza poleceń Firebase, uruchamiając to polecenie:

firebase login

Ustawiono szablon aplikacji internetowej, aby pobrać konfigurację aplikacji dla Hostingu Firebase z katalogu lokalnego aplikacji (repozytorium, które zostało wcześniej sklonowane w ramach tego samouczka). Aby jednak pobrać konfigurację, musisz powiązać aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń ma dostęp do lokalnego katalogu angularfire-start aplikacji.
5. Powiąż aplikację z projektem Firebase, uruchamiając to polecenie:

firebase use --add

6. Gdy pojawi się odpowiedni komunikat, wybierz identyfikator projektu, a potem nadaj projektowi Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, przejściowych itp.). W tym ćwiczeniu użyjemy jednak aliasu default.

7. Postępuj zgodnie z instrukcjami wyświetlanymi w linii poleceń.

5. Instalowanie AngularFire

Zanim uruchomisz projekt, sprawdź, czy masz skonfigurowany interfejs wiersza poleceń Angular i AngularFire.

1. W konsoli uruchom to polecenie:

npm install -g @angular/cli

2. Następnie w konsoli z katalogu angularfire-start uruchom to polecenie interfejsu wiersza poleceń Angular:

ng add @angular/fire

Spowoduje to zainstalowanie wszystkich niezbędnych zależności projektu.

3. Gdy pojawi się odpowiedni komunikat, odznacz pole ng deploy -- hosting, naciskając spację. Za pomocą klawiszy strzałek i spacji wybierz te funkcje:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Naciśnij enter i postępuj zgodnie z pozostałymi instrukcjami.
5. Utwórz zatwierdzanie z komunikatem „Install AngularFire” i prześlij je do repozytorium GitHub.

6. Tworzenie backendu hostingu aplikacji

W tej sekcji skonfigurujesz backend App Hosting do obserwowania gałęzi w repozytorium Git.

Uwaga: Firebase App Hosting jest w wersji publicznej.

Na końcu tej sekcji połączysz się z backendem App Hosting z Twoim repozytorium w GitHubie, który będzie automatycznie ponownie skompilować i wdrożyć nową wersję Twojej aplikacji za każdym razem, gdy wypchniesz nowe zatwierdzenie do gałęzi main.

1. W konsoli Firebase otwórz stronę App Hosting (Hosting aplikacji):

2. Kliknij „Rozpocznij”, aby rozpocząć proces tworzenia backendu. Skonfiguruj backend w ten sposób:
3. Postępuj zgodnie z instrukcjami wyświetlanymi w pierwszym kroku, aby połączyć utworzone wcześniej repozytorium GitHub.
4. Ustaw ustawienia wdrażania:
   1. Zachowaj katalog główny jako /
   2. Ustaw aktywną gałąź na main
   3. Włączanie automatycznego wdrażania
5. Nazwij backend friendlychat-codelab.
6. W sekcji „Utwórz lub powiązaj aplikację internetową Firebase” wybierz wcześniej skonfigurowaną aplikację internetową z menu „Wybierz istniejącą aplikację internetową Firebase”.
7. Kliknij „Zakończ i wdróż”. Po chwili przeniesiemy Cię na nową stronę, na której możesz sprawdzić stan nowego backendu usługi Hostowanie aplikacji.

   Uwaga: możesz monitorować usługi Google Cloud, które stanowią podstawę usługi hostowania aplikacji, klikając linki w konsoli. Więcej informacji znajdziesz w artykule Wyświetlanie logów i danych.

8. Po zakończeniu wdrażania kliknij bezpłatną domenę w sekcji „domains” (domeny). Rozpoczęcie pracy może potrwać kilka minut z powodu rozpowszechnienia DNS.

Udało Ci się wdrożyć początkową aplikację internetową. Za każdym razem, gdy wypychasz nowe zatwierdzenie do gałęzi main w repozytorium GitHub, w konsoli Firebase rozpoczyna się nowe kompilowanie i wdrażanie. Po zakończeniu wdrażania Twoja witryna zostanie automatycznie zaktualizowana.

Powinien pojawić się ekran logowania do aplikacji FriendlyChat, który nie działa (jeszcze!).

Obecnie aplikacja nie może nic zrobić, ale z Twoją pomocą wkrótce to zrobi!

Stwórzmy teraz komunikator w czasie rzeczywistym.

7. Importowanie i konfigurowanie Firebase

Skonfiguruj Firebase

Musisz skonfigurować pakiet SDK Firebase, aby wskazać, którego projektu Firebase używasz.

1. Otwórz ustawienia projektu w konsoli Firebase.
2. Na karcie „Twoje aplikacje” wybierz nazwę aplikacji, dla której chcesz utworzyć obiekt konfiguracji.
3. W panelu fragmentu kodu pakietu SDK Firebase kliknij „Konfiguracja”.

Zobaczysz, że został dla Ciebie wygenerowany plik środowiska /angularfire-start/src/environments/environment.ts.

4. Skopiuj fragment kodu obiektu konfiguracyjnego, a następnie dodaj go do zbioru danych angularfire-start/src/firebase-config.js.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Powyższy kod powinien zawierać obiekt konfiguracji Firebase specyficzny dla aplikacji, a nie nasze wartości zastępcze.

Wyświetl konfigurację AngularFire

Funkcje wybrane w konsoli zostały automatycznie dodane w pliku /angularfire-start/src/app/app.config.ts. Dzięki temu aplikacja może korzystać z funkcji Firebase.

8. Konfigurowanie logowania użytkowników

AngularFire powinien być gotowy do użycia, ponieważ został zaimportowany i inicjowany w funkcji app.config.ts. Teraz zaimplementujesz logowanie użytkownika za pomocą Uwierzytelniania Firebase.

Dodaj autoryzowaną domenę

Usługa Uwierzytelnianie Firebase zezwala na logowanie się tylko z listy domen kontrolowanych przez Ciebie. Dodaj do listy domen swoją bezpłatną domenę z usługą Hosting aplikacji:

1. Otwórz App Hosting (Hosting aplikacji).
2. Skopiuj domenę backendu.
3. Otwórz Authentication settings (Ustawienia uwierzytelniania).
4. Kliknij kartę Domeny autoryzowane.
5. Kliknij Dodaj domenę i wklej domenę backendu App Hosting.

Uwierzytelnianie użytkowników za pomocą funkcji logowania Google

Gdy użytkownik kliknie w aplikacji przycisk Zaloguj się przez Google, zostanie uruchomiona funkcja login. W ramach tego ćwiczenia w Codelabs chcesz autoryzować Firebase do używania Google jako dostawcy tożsamości. Zobaczysz wyskakujące okienko, ale w Firebase dostępnych jest kilka innych metod.

1. W podkatalogu /src/app/services/ otwórz chat.service.ts.
2. Znajdź funkcję login.
3. Zastąp całą funkcję poniższym kodem.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

Funkcja logout jest wywoływana, gdy użytkownik kliknie przycisk Wyloguj.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj funkcję logout.
3. Zastąp całą funkcję tym kodem.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Śledzenie stanu uwierzytelniania

Aby zaktualizować interfejs, musisz sprawdzić, czy użytkownik jest zalogowany czy wylogowany. AngularFire udostępnia funkcję umożliwiającą uzyskanie observable, który aktualizuje się za każdym razem, gdy zmienia się stan uwierzytelniania. Ta funkcja została już wdrożona, ale warto się z nią zapoznać.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj przypisanie zmiennej user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Powyższy kod wywołuje funkcję AngularFire user, która zwraca obserwowalnego użytkownika. Będzie ona aktywowana za każdym razem, gdy zmieni się stan uwierzytelniania (gdy użytkownik się zaloguje lub wyloguje). Komponenty szablonów Angular w przyjaznym czacie używają tego elementu obserwacyjnego, aby aktualizować interfejs użytkownika tak, aby przekierowywał, wyświetlał użytkownika w nagłówku itp.

Testowanie logowania w aplikacji

1. Utwórz zatwierdzenie z komunikatem „Dodawanie uwierzytelniania Google” i prześlij je do repozytorium GitHub.
2. W konsoli Firebase otwórz stronę Hosting aplikacji i zaczekaj na zakończenie nowego wdrożenia.
3. W aplikacji internetowej odśwież stronę i zaloguj się, używając przycisku logowania i swojego konta Google. Jeśli zobaczysz komunikat o błędzie auth/operation-not-allowed, sprawdź, czy w konsoli Firebase masz włączone logowanie Google jako dostawcę uwierzytelniania.
4. Po zalogowaniu powinny wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika:

9. Pisanie wiadomości do Cloud Firestore

W tej sekcji zapiszesz w Cloud Firestore dane, aby wypełnić interfejs użytkownika aplikacji. Możesz to zrobić ręcznie za pomocą konsoli Firebase, ale musisz to zrobić w samej aplikacji, aby zademonstrować podstawowy zapis w Cloud Firestore.

Model danych

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

Wskazówka: aby dowiedzieć się więcej o modelu danych Cloud Firestore, przeczytaj o dokumentach i kolekcjach w dokumentacji.

Dodawanie wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu pisanych przez użytkowników użyjesz usługi Cloud Firestore.

W tej sekcji dodasz funkcję umożliwiającą użytkownikom zapisywanie nowych wiadomości do bazy danych. Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje wyświetlenie poniższego fragmentu kodu. Spowoduje to dodanie obiektu wiadomości z zawartością pól wiadomości do instancji Cloud Firestore w kolekcji messages. Metoda add() dodaje do kolekcji nowy dokument z automatycznie wygenerowanym identyfikatorem.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Znajdź funkcję addMessage.
3. Zastąp całą funkcję poniższym kodem.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Testowanie wysyłania wiadomości

1. Utwórz zatwierdzenie z komunikatem „Opublikuj nowe czaty w Firestore” i prześlij je do repozytorium GitHub.
2. Otwórz stronę App Hosting (Hosting aplikacji) w konsoli Firebase i poczekaj na zakończenie nowego wdrożenia.
3. Odśwież FriendlyChat. Po zalogowaniu się wpisz wiadomość (np. „Cześć!”) i kliknij WYŚLIJ. Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak w rzeczywistości nie będą jednak jeszcze widoczne dane w rzeczywistej aplikacji internetowej, ponieważ nadal musisz wdrożyć pobieranie danych (następna sekcja ćwiczeń z programowania).
4. Nowo dodaną wiadomość znajdziesz w konsoli Firebase. Otwórz interfejs pakietu emulatorów. W sekcji Build (Kompilacja) kliknij Firestore Database (Baza danych Firestore) (lub kliknij tutaj, aby wyświetlić kolekcję messages z nowo dodaną wiadomością):

10. Czytanie wiadomości

Synchronizowanie wiadomości

Aby czytać wiadomości w aplikacji, musisz dodać observable, który będzie się aktywować, gdy zmienią się dane, a potem utworzyć element interfejsu użytkownika, który będzie wyświetlać nowe wiadomości.

Dodasz kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. Ten kod pozwoli pobrać migawkę kolekcji messages. Wyświetlanych jest tylko 12 ostatnich wiadomości na czacie, aby uniknąć wyświetlania bardzo długiej historii po załadowaniu.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj funkcję loadMessages.
3. Zastąp całą funkcję tym kodem.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Aby nasłuchiwać wiadomości w bazie danych, utwórz zapytanie do kolekcji za pomocą funkcji collection w celu określenia, w którym zbiorze znajdują się dane, których chcesz nasłuchiwać. W powyższym kodzie słuchasz zmian w kolekcji messages, w której są przechowywane wiadomości czatu. Aby zastosować limit, odsłuchujesz tylko 12 ostatnich wiadomości za pomocą funkcji limit(12) i porządkujesz wiadomości według daty za pomocą parametru orderBy('timestamp', 'desc'), aby pobrać 12 najnowszych wiadomości.

Funkcja collectionData korzysta z migawek. Funkcja wywołania zwrotnego zostanie aktywowana po wprowadzeniu jakichkolwiek zmian w dokumentach, które pasują do zapytania. Może się tak zdarzyć, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej informacji znajdziesz w dokumentacji Cloud Firestore.

Testowanie synchronizacji wiadomości

1. Utwórz zatwierdzenie z komunikatem „Pokaż nowe czaty w interfejsie użytkownika” i prześlij je do repozytorium GitHub.
2. Otwórz stronę App Hosting (Hosting aplikacji) w konsoli Firebase i poczekaj na zakończenie nowego wdrożenia.
3. Odśwież FriendlyChat. Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie FriendlyChat (patrz poniżej). Możesz pisać nowe wiadomości. Powinny się one pojawiać natychmiast.
4. (Opcjonalnie) Możesz ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Firestore pakietu emulatorów. Wszelkie zmiany powinny być widoczne w interfejsie.

Gratulacje! W aplikacji odczytujesz dokumenty Cloud Firestore.

11. Dodawanie funkcji AI

Będziesz używać AI od Google, aby dodać do aplikacji do czatu przydatne funkcje wspomagające.

Uzyskiwanie klucza interfejsu API AI od Google

1. Otwórz Google AI Studio i kliknij Utwórz klucz interfejsu API.
2. Wybierz projekt Firebase utworzony na potrzeby tego Codelab. Prompt dotyczy projektu Google Cloud, ale każdy projekt Firebase jest projektem Google Cloud.
3. Kliknij Utwórz klucz interfejsu API w dotychczasowym projekcie.
4. Skopiuj uzyskany klucz interfejsu API.

Instalowanie rozszerzenia

To rozszerzenie wdroży funkcję w Cloud Functions, która jest aktywowana za każdym razem, gdy do kolekcji messages w Firestore dodawany jest nowy dokument. Funkcja wywoła Gemini i zapisze jego odpowiedź w polu response w dokumencie.

1. Na stronie rozszerzenia Tworzenie chatbota za pomocą interfejsu Gemini API kliknij Zainstaluj w konsoli Firebase.
2. Postępuj zgodnie z instrukcjami. Gdy dojdziesz do kroku Skonfiguruj rozszerzenie, ustaw te wartości parametrów:
   • Dostawca Gemini API: Google AI
   • Klucz interfejsu Google AI API: wklej utworzony wcześniej klucz i kliknij Utwórz obiekt tajny.
   • Ścieżka kolekcji Firestore: messages
   • Pole promptu: text
   • Pole odpowiedzi: response
   • Pole zamówienia: timestamp
   • Kontekst: Keep your answers short, informal, and helpful. Use emojis when possible.
3. Kliknij Zainstaluj rozszerzenie.
4. Poczekaj na zakończenie instalacji rozszerzenia.

Testowanie funkcji AI

Aplikacja FriendsChat ma już kod do odczytywania odpowiedzi z rozszerzenia AI. Wystarczy, że wyślesz nową wiadomość na czacie, aby przetestować tę funkcję.

1. Otwórz FriendlyChat i wyślij wiadomość.
2. Po chwili powinna pojawić się obok Twojej wiadomości odpowiedź w wyskakującym okienku. Na końcu znajduje się notatka ✨ ai generated, która informuje, że komentarz został utworzony za pomocą generatywnej AI, a nie przez prawdziwego użytkownika.

12. Wysyłanie obrazów

Dodaj funkcję, która udostępnia obrazy.

Cloud Firestore nadaje się do przechowywania uporządkowanych danych, ale Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików/blobów, która służy do przechowywania wszystkich obrazów udostępnionych przez użytkownika za pomocą naszej aplikacji.

Zapisywanie obrazów w Cloud Storage

W tym ćwiczeniu przycisk, który uruchamia okno wyboru pliku, został już przez Ciebie dodany. Po wybraniu pliku wywoływana jest funkcja saveImageMessage, dzięki której można uzyskać odniesienie do wybranego pliku. Funkcja saveImageMessage wykonuje te zadania:

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

Teraz dodasz funkcję wysyłania obrazu:

1. Wróć do pliku src/chat.service.ts.
2. Odszukaj funkcję saveImageMessage.
3. Zastąp całą funkcję poniższym kodem.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, 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.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Testowanie wysyłania zdjęć

1. Utwórz zatwierdzanie z komunikatem „Dodaj możliwość publikowania obrazów” i prześlij je do repozytorium GitHub.
2. W konsoli Firebase otwórz stronę Hosting aplikacji i zaczekaj na zakończenie nowego wdrożenia.
3. Odśwież FriendsChat. Po zalogowaniu się w lewym dolnym rogu kliknij przycisk przesyłania obrazu () i wybierz plik obrazu, korzystając z selektora plików. Jeśli szukasz zdjęcia, skorzystaj z tego ładnego zdjęcia filiżanki kawy.
4. W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem:

Jeśli spróbujesz dodać obraz bez logowania się, powinien pojawić się komunikat o błędzie z informacją, że musisz się zalogować, aby dodać obrazy.

13. Show notifications (Pokaż powiadomienia)

Teraz dodasz obsługę powiadomień w przeglądarce. Aplikacja będzie powiadamiała użytkowników o nowych wiadomościach w czacie. Komunikacja w chmurze Firebase (FCM) to rozwiązanie do przesyłania wiadomości obejmujące wiele platform, które umożliwia niezawodne dostarczanie wiadomości i powiadomień bezpłatnie.

Dodawanie instancji roboczej usługi FCM

Aplikacja internetowa wymaga skryptu service worker, który będzie otrzymywać i wyświetlać powiadomienia internetowe.

Dostawca do przesyłania wiadomości powinien być już skonfigurowany podczas dodawania AngularFire. Sprawdź, czy w sekcji importowania w /angularfire-start/src/app/app.config.ts znajduje się poniższy kod

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

Usługa wątek musi tylko załadować i inicjializować pakiet SDK Komunikacji w chmurze Firebase, który zajmie się wyświetlaniem powiadomień.

Uzyskiwanie tokenów urządzeń w FCM

Jeśli na urządzeniu lub w przeglądarce włączysz powiadomienia, otrzymasz token urządzenia. Token urządzenia służy do wysyłania powiadomień do konkretnych urządzeń lub przeglądarek.

Gdy użytkownik się zaloguje, wywołujesz funkcję saveMessagingDeviceToken. W tym miejscu możesz pobrać z przeglądarki token urządzenia Komunikacji w chmurze Firebase i zapisać go w Cloud Firestore.

chat.service.ts

2. Odszukaj funkcję saveMessagingDeviceToken.
3. Zastąp całą funkcję poniższym kodem.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Jednak ten kod na początku nie będzie działać. Aby aplikacja mogła pobrać token urządzenia, użytkownik musi zezwolić jej na wyświetlanie powiadomień (następny krok w codelab).

Wysyłanie prośby o uprawnienia do wyświetlania powiadomień

Jeśli użytkownik nie przyznał jeszcze aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W takim przypadku wywołujesz metodę requestPermission(), co powoduje wyświetlenie okna przeglądarki z prośbą o przyznanie tego uprawnienia ( w obsługiwanych przeglądarkach).

1. Wróć do pliku src/app/services/chat.service.ts.
2. Znajdź funkcję requestNotificationsPermissions.
3. Zastąp całą funkcję tym kodem.

chat.service.ts

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

Uzyskiwanie tokenu urządzenia

1. Utwórz zatwierdzanie z komunikatem „Dodaj możliwość publikowania obrazów” i prześlij je do repozytorium GitHub.
2. Otwórz stronę App Hosting (Hosting aplikacji) w konsoli Firebase i poczekaj na zakończenie nowego wdrożenia.
3. Odśwież FriendsChat. Po zalogowaniu się powinno wyświetlić się okno z prośbą o zgodę na wyświetlanie powiadomień:
4. Kliknij Zezwól.
5. Otwórz konsolę JavaScript w przeglądarce. Powinien wyświetlić się ten komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. Skopiuj token urządzenia. Będzie Ci ona potrzebna w następnym etapie ćwiczeń z programowania.

Wysyłanie powiadomienia na urządzenie

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

1. Otwórz kartę Cloud Messaging w konsoli Firebase.
2. Kliknij „Nowe powiadomienie”.
3. Wpisz tytuł i tekst powiadomienia.
4. Po prawej stronie ekranu kliknij „Wyślij wiadomość testową”.
5. Wpisz token urządzenia skopiowany z konsoli JavaScript Twojej przeglądarki i kliknij znak plusa („+”)
6. Kliknij „test”.

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

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

W ramach ćwiczenia w programie Pakiet SDK Firebase dla Cloud Functions dowiesz się, jak zautomatyzować wysyłanie powiadomień z backendu w przypadku każdej nowej wiadomości opublikowanej w aplikacji do obsługi czatu.

14. Reguły zabezpieczeń Cloud Firestore

Wyświetl reguły zabezpieczeń bazy danych

Cloud Firestore 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 Codelab wybrano domyślne reguły zabezpieczeń „Tryb testowy”, aby nie ograniczać dostępu do bazy danych. W konsoli Firebase na karcie Reguły w sekcji Baza danych możesz wyświetlać i modyfikować te reguły.

Obecnie powinny być widoczne reguły domyślne, które nie ograniczają dostępu do magazynu danych. Oznacza to, że każdy użytkownik może odczytywać i zapisywać dane w dowolnych kolekcjach w Twoim magazynie danych.

rules_version = '2';

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

Reguły zostaną zaktualizowane, aby ograniczyć zakres treści przez zastosowanie następujących reguł:

firestore.rules,

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

Zmienne reguły request.auth to specjalne zmienne zawierające informacje o uwierzytelnionym użytkowniku. Zmienna reguły request.resource wskazuje zapisywane nowe dane. Więcej informacji znajdziesz w dokumentacji.

Reguły zabezpieczeń powinny zostać automatycznie zaktualizowane w pakiecie emulatorów.

Wyświetlanie reguł zabezpieczeń Cloud Storage

Cloud Storage dla 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 Codelab wybrano domyślną regułę zabezpieczeń Cloud Storage, która zezwala na korzystanie z Cloud Storage tylko uwierzytelnionych użytkowników. W konsoli Firebase na karcie Reguły w sekcji Storage możesz wyświetlać i modyfikować reguły. Powinna pojawić się domyślna reguła, która umożliwia każdemu zalogowanemu użytkownikowi odczytywanie i zapisywanie dowolnych plików znajdujących się w Twoim zasobniku na dane.

rules_version = '2';

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

Aby zaktualizować reguły, wykonaj te czynności:

• Zezwalaj każdemu użytkownikowi na zapis tylko w jego własnych folderach
• Zezwól wszystkim na odczyt z Cloud Storage
• Upewnij się, że przesłane pliki są obrazami
• Ograniczenie rozmiaru przesyłanych obrazów do maksymalnie 5 MB

Można to zaimplementować za pomocą tych reguł:

storage.rules

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

Zmienna reguły request.auth to specjalna zmienna zawierająca informacje o uwierzytelnionym użytkowniku. Zmienna reguły request.resource zawiera informacje o przesłanym pliku. Więcej informacji znajdziesz w dokumentacji.

15. Gratulacje!

Udało Ci się wykorzystać Firebase do stworzenia aplikacji internetowej do obsługi czatu w czasie rzeczywistym.

Co zostało omówione

• Firebase App Hosting
• Uwierzytelnianie Firebase
• Cloud Firestore
• Pakiet SDK Firebase dla Cloud Storage
• Komunikacja w chmurze Firebase
• Monitorowanie wydajności Firebase

Dalsze kroki

Przejdź do kodlabu Cloud Functions dla Firebase, aby dowiedzieć się, jak używać pakietu SDK Firebase do Cloud Functions i dodawać do aplikacji do czatu zadania backendowe. Możesz zacząć od kroku 5 tego kodlabu, ponieważ masz już skonfigurowany projekt Firebase.

Chcesz dowiedzieć się więcej o Cloud Firestore? A może chcesz dowiedzieć się więcej o podkolekcjach i transakcjach? Przejdź do internetowych ćwiczeń z programowania w Cloud Firestore, gdzie znajdziesz więcej szczegółów dotyczących Cloud Firestore.

Chcesz dowiedzieć się więcej o monitorowaniu wydajności w Firebase na potrzeby internetu? Skorzystaj z ćwiczeń z programowania Firebase dotyczących monitorowania wydajności w Firebase, aby przeprowadzić bardziej szczegółowe ćwiczenia z programowania w Monitorowaniu wydajności Firebase.

Więcej informacji

• firebase.google.com

16. [Opcjonalnie] Egzekwuj za pomocą Sprawdzania aplikacji

Sprawdzanie aplikacji Firebase pomaga chronić usługi przed niechcianym ruchem i chronić backend przed nadużyciami. W tym kroku dodasz weryfikację danych logowania i zablokujesz nieautoryzowanych klientów za pomocą Sprawdzania aplikacji i reCAPTCHA Enterprise.

Ten krok zależy od wykonania poprzednich kroków. Upewnij się, że aplikacja FriendsChat działa lokalnie za pomocą emulatorów lub została wdrożona z usługami Firebase.

Najpierw musisz włączyć Sprawdzanie aplikacji i reCAPTCHA.

Włączanie reCaptcha Enterprise

1. W sekcji Zabezpieczenia w konsoli Cloud znajdź i wybierz reCaptcha Enterprise.
2. Włącz usługę zgodnie z instrukcjami i kliknij Utwórz klucz.
3. Wpisz wyświetlaną nazwę zgodnie z wyświetlaną prośbą i jako typ platformy wybierz Witryna.
4. Dodaj wdrożone adresy URL do listy domen i upewnij się, że opcja „Użyj testu zabezpieczającego pole wyboru” jest odznaczona.
5. Kliknij Utwórz klucz i zapisz wygenerowany klucz w bezpiecznym miejscu. Będzie Ci ona potrzebna na późniejszym etapie.

Włączanie Sprawdzania aplikacji

1. W konsoli Firebase w panelu po lewej stronie odszukaj sekcję Kompilacja.
2. Kliknij Sprawdzanie aplikacji, a następnie kartę Metoda logowania, aby przejść do sekcji Sprawdzanie aplikacji.
3. Kliknij Zarejestruj i wpisz klucz reCaptcha Enterprise, gdy pojawi się taka prośba, a potem kliknij Zapisz.
4. W widoku interfejsów API wybierz Storage i kliknij Wymusz. Wykonaj te same czynności z Cloud Firestore.

Sprawdzanie aplikacji powinno być teraz egzekwowane. Odśwież aplikację i spróbuj wyświetlić lub wysłać wiadomości na czacie. Powinien pojawić się komunikat o błędzie:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Oznacza to, że Sprawdzanie aplikacji domyślnie blokuje niezweryfikowane żądania. Teraz dodamy do aplikacji weryfikację.

Przejdź do pliku environment.ts i dodaj reCAPTCHAEnterpriseKey do obiektu environment.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Zastąp wartość key tokenem reCAPTCHA Enterprise.

Następnie otwórz plik app.config.ts i dodaj te instrukcje importu:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

W tym samym pliku app.config.ts dodaj tę deklarację zmiennej globalnej:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

W importach dodaj inicjalizację AppCheck za pomocą ReCaptchaEnterpriseProvider i ustaw isTokenAutoRefreshEnabled na true, aby umożliwić automatyczne odświeżanie tokenów.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Aby umożliwić testowanie lokalne, ustaw wartość self.FIREBASE_APPCHECK_DEBUG_TOKEN na true. Gdy odświeżysz aplikację w localhost, w konsoli zostanie zarejestrowany token debugowania podobny do tego:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

W konsoli Firebase otwórz widok Aplikacje w sekcji Sprawdzanie aplikacji.

Kliknij rozszerzone menu i wybierz Zarządzaj tokenami debugowania.

Następnie kliknij Dodaj token debugowania i wklej token debugowania z konsoli.

Otwórz plik chat.service.ts i dodaj te instrukcje importu:

import { AppCheck } from '@angular/fire/app-check';

W tym samym pliku chat.service.ts wstrzyknij App Check obok innych usług Firebase.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. Utwórz zatwierdzanie z wiadomością „Zablokuj nieautoryzowanych klientów za pomocą App Check” i prześlij je do repozytorium GitHub.
2. Otwórz stronę App Hosting (Hosting aplikacji) w konsoli Firebase i poczekaj na zakończenie nowego wdrożenia.

Gratulacje! Aplikacja App Check powinna teraz działać w Twojej aplikacji.