Ć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

• Utwórz aplikację internetową przy użyciu Angulara 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.
• Zbieraj dane o działaniu aplikacji internetowej.

Czego potrzebujesz

• Konto GitHub
• Możliwość przejścia na abonament Blaze w projekcie Firebase.
• Wybrane środowisko IDE lub edytor tekstu, np. WebStorm, Sublime lub VS Code.
• Menedżer pakietów npm, który jest zwykle dostarczany z Node.js.
• terminal lub konsola;
• przeglądarkę, np. Chrome;
• przykładowy kod z codelab (jak go pobrać, dowiesz się z następnego kroku w codelab);

2. Pobieranie przykładowego kodu

Tworzenie repozytorium GitHub

Źródło kodu ć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. Za pomocą terminala utwórz nowy folder na komputerze i przejdź do nowego katalogu:

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

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

   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. GitHub poda Ci nowy adres URL repozytorium, który wygląda tak: https://github.com/[user-name]/[repository-name].git lub git@github.com:[user-name]/[repository-name].git. Skopiuj ten adres URL.
5. Prześlij zmiany lokalne do nowego repozytorium GitHub. Uruchom to polecenie, zastępując miejsce your-repository-url wskaźnik zastępczy URL repozytorium.

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

Aplikacja, którą zamierzasz 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 do tworzenia, hostowania i obsługi aplikacji.
• Komunikacja w chmurze Firebase do wysyłania powiadomień push i wyświetlania powiadomień wyskakujących w przeglądarce.
• Monitorowanie wydajności Firebase, aby zbierać dane o wydajności aplikacji dla użytkowników.

Niektóre z tych usług wymagają specjalnej konfiguracji lub ich włączenie musi nastąpić w konsoli Firebase.

Przejdź na wyższy abonament Firebase

Aby korzystać z hostingu aplikacji i Cloud Storage w Firebase, musisz mieć projekt Firebase w abonamentie płatność według wykorzystania (Blaze), co oznacza, że jest on połączony z kontem płatności Google Cloud.

• Konto Cloud Billing wymaga formy płatności, np. karty kredytowej.
• 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 ćwiczenie w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Aby przenieść projekt na abonament Blaze:

1. W konsoli Firebase wybierz uaktualnienie abonamentu.
2. Wybierz pakiet Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
   Jeśli w ramach tego przejścia na wyższy poziom abonamentu musisz utworzyć konto rozliczeniowe Cloud, konieczne może być powrót do procesu przejścia w konsoli Firebase, aby go dokończyć.

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.

Konfigurowanie uwierzytelniania

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

1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
2. Kliknij Rozpocznij.
3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz.
4. W polu tekstowym Nazwa projektu widoczna publicznie wpisz zapadającą w pamięć nazwę, np. My Next.js app.
5. W menu Adres e-mail pomocy dla projektu wybierz swój adres e-mail.
6. Kliknij Zapisz.

Konfigurowanie Cloud Firestore

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

Aby skonfigurować Cloud Firestore w projekcie Firebase:

1. W panelu po lewej stronie w konsoli Firebase rozwiń Kompilacja, a potem wybierz Baza danych Firestore.
2. Kliknij Utwórz bazę danych.
3. Pozostaw wartość (default) w polu Identyfikator bazy danych.
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ł bezpieczeństwa.
   W dalszej części tego Codelab dodasz reguły bezpieczeństwa, aby chronić swoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla bazy danych.
6. Kliknij Utwórz.

Konfigurowanie Cloud Storage dla Firebase

Aplikacja internetowa używa Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Oto jak 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 Storage.
   Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu Always Free w Google Cloud Storage. Zasobniki w innych lokalizacjach podlegają cennikom i zasadom korzystania z Google Cloud Storage.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego Codelab dodasz reguły bezpieczeństwa, które ochronią Twoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla zasobnika Storage.
5. Kliknij Utwórz.

4. Instalowanie interfejsu wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia korzystanie z Hostingu Firebase do obsługi aplikacji internetowej lokalnie, a także do jej wdrażania w projekcie Firebase.

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

npm -g install firebase-tools@latest

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. Połącz aplikację z projektem Firebase, uruchamiając to polecenie:

firebase use --add

6. Gdy pojawi się taka prośba, 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

Przed uruchomieniem projektu upewnij się, że masz skonfigurowane narzędzia Angular CLI 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 w Angular CLI:

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 instrukcjami wyświetlanymi na ekranie.
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 usługi tworzenia aplikacji, aby obserwować gałąź w repozytorium Git.

Po zakończeniu tej sekcji będziesz mieć backend usługi osadzania połączony z Twoim repozytorium w GitHub, który automatycznie ponownie skompiluje i wprowadzi nową wersję aplikacji za każdym razem, gdy prześlesz nowe zatwierdzenie do gałęzi main.

1. Otwórz w konsoli Firebase stronę Hosting aplikacji:

2. Aby rozpocząć proces tworzenia backendu, kliknij „Rozpocznij”. 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 skonfigurowaną wcześniej 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.
8. Po zakończeniu wdrażania kliknij swoją bezpłatną domenę w sekcji „Domeny”. Z powodu propagacji DNS może minąć kilka minut, zanim zmiany zaczną działać.

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

Aplikacja nie może teraz nic zrobić, ale z Twoją pomocą wkrótce będzie mogła.

Teraz zbudujemy aplikację do czatu 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 pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracji.
3. W panelu fragmentu kodu pakietu SDK Firebase kliknij „Konfiguracja”.

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

4. Skopiuj fragment kodu obiektu konfiguracji, a potem dodaj go do 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",
  },
};

Wyświetl konfigurację AngularFire

Funkcje wybrane w konsoli zostały automatycznie dodane do 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ą Hostingu aplikacji:

1. Otwórz Hosting aplikacji.
2. Skopiuj domenę backendu.
3. Otwórz Ustawienia uwierzytelniania.
4. Kliknij kartę Domeny autoryzowane.
5. Kliknij Dodaj domenę i wklej domenę zaplecza hostingu aplikacji.

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 tym ćwiczeniu musisz autoryzować Firebase do korzystania z Google jako dostawcy tożsamości. Użyjesz do tego wyskakującego okienka, ale dostępne są też inne metody w Firebase.

1. W podkatalogu /src/app/services/ otwórz chat.service.ts.
2. Znajdź funkcję login.
3. Zastąp całą funkcję tym 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. Znajdź 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 użytkownika, musisz sprawdzić, czy jest on 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. Znajdź 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. Zostanie ono wywołane za każdym razem, gdy zmieni się stan uwierzytelniania (gdy użytkownik się zaloguje lub wyloguje). Komponenty szablonów Angulara w FriendlyChat używają tego observable do aktualizowania interfejsu w celu przekierowania, wyświetlania użytkownika w menu nagłówka 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 w konsoli Firebase, ale aby zademonstrować podstawowe zapisywanie w Cloud Firestore, wykonasz to w samej aplikacji.

Model danych

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

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 w Twojej bazie danych. Gdy użytkownik kliknie przycisk WYŚLIJ, zostanie uruchomiony podany niżej fragment kodu. Dodaje obiekt 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ę tym 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. W konsoli Firebase otwórz stronę Hosting aplikacji i zaczekaj 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. Nie zobaczysz jednak jeszcze tych danych w aplikacji internetowej, ponieważ musisz jeszcze zaimplementować pobieranie danych (w następnej sekcji tego CodeLab).
4. Nowo dodaną wiadomość znajdziesz w konsoli Firebase. Otwórz interfejs pakietu emulatorów. W sekcji Tworzenie kliknij Baza danych Firestore (lub kliknij tutaj). Powinieneś zobaczyć 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 będzie nasłuchiwać nowo dodanych wiadomości z aplikacji. W tym kodzie pobierzesz migawkę kolekcji messages. Aby uniknąć wyświetlania bardzo długiej historii podczas wczytywania, wyświetlane są tylko ostatnie 12 wiadomości czatu.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Znajdź 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 odsłuchać wiadomości w bazie danych, utwórz zapytanie dotyczące kolekcji, używając funkcji collection, aby określić, w której kolekcji znajdują się dane, które chcesz odsłuchać. W powyższym kodzie słuchasz zmian w kolekcji messages, w której są przechowywane wiadomości na czacie. Stosujesz też limit, słuchając tylko ostatnich 12 wiadomości za pomocą limit(12) i sortując je według daty za pomocą orderBy('timestamp', 'desc'), aby uzyskać 12 najnowszych wiadomości.

Funkcja collectionData korzysta z migawek. Funkcja wywołania zwrotnego zostanie uruchomiona, gdy w dokumentach dopasowanych do zapytania pojawią się jakiekolwiek zmiany. Może się tak zdarzyć, jeśli wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej informacji znajdziesz w dokumentacji Cloud Firestore.

Testowanie synchronizacji wiadomości

1. Utwórz zatwierdzenie z wiadomością „Pokaż nowe czaty w interfejsie” 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ż 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 usuwać, modyfikować lub dodawać nowe wiadomości bezpośrednio w sekcji Firestore w pakiecie emulatorów. Wszelkie zmiany powinny być odzwierciedlone w interfejsie.

Gratulacje! W aplikacji odczytujesz dokumenty Cloud Firestore.

11. Dodawanie funkcji AI

Użyjesz sztucznej inteligencji Google, aby dodać do aplikacji czatu przydatne funkcje ułatwiające korzystanie z aplikacji.

Pobieranie klucza interfejsu Google AI API

1. Otwórz Google AI Studio i kliknij Utwórz klucz interfejsu API.
2. Wybierz projekt Firebase utworzony na potrzeby tego Codelab. Prośba 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 wdraża funkcję w chmurze, która jest wywoływana 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 Konfigurowanie rozszerzenia, ustaw te wartości parametrów:
   • Dostawca Gemini API: Google AI
   • Klucz interfejsu AI od Google: wklej utworzony wcześniej klucz i kliknij Utwórz obiekt tajny.
   • Ścieżka kolekcji Firestore: messages
   • Pole prompta: 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

FriendlyChat zawiera 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 obok wiadomości powinna pojawić się odpowiedź. 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

Teraz dodasz funkcję udostępniania obrazów.

Cloud Firestore nadaje się do przechowywania uporządkowanych danych, ale Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage for Firebase to usługa do przechowywania plików i obiektów blob. Użyjesz jej do przechowywania wszystkich obrazów, które użytkownik udostępnia 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ć odwołanie do wybranego pliku. Funkcja saveImageMessage wykonuje te czynności:

1. Tworzy „zastępczy” komunikat na czacie w strumieniach czatu, aby użytkownicy widzieli animację „Ładowanie” podczas przesyłania obrazu.
2. Przesyła plik obrazu do Cloud Storage na tę ścieżkę: /<uid>/<file_name>
3. Generuje publicznie dostępny URL pliku obrazu.
4. Aktualizuje wiadomość czatu, zastępując tymczasowo wczytywany obraz adresem URL nowo przesłanego pliku obrazu.

Teraz dodasz funkcję wysyłania obrazu:

1. Wróć do pliku src/chat.service.ts.
2. Znajdź funkcję saveImageMessage.
3. Zastąp całą funkcję tym 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 obrazów

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ż FriendlyChat. Po zalogowaniu się kliknij przycisk przesyłania obrazu w lewym dolnym rogu  i wybierz plik obrazu za pomocą selektora plików. Jeśli szukasz obrazu, możesz użyć tego ładnego zdjęcia filiżanki kawy.
4. W interfejsie aplikacji powinno pojawić się nowe okno z wybranym obrazem:

Jeśli spróbujesz dodać obraz, gdy nie jesteś zalogowany(-a), powinien(-a)eś zobaczyć komunikat o błędzie informujący, że musisz się zalogować, aby dodawać 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 bezpłatne rozwiązanie do przesyłania wiadomości na różnych platformach, które umożliwia niezawodne przesyłanie wiadomości i powiadomień.

Dodawanie instancji roboczej usługi FCM

Aplikacja internetowa potrzebuje skryptu service worker, który będzie odbierał i wyświetlał powiadomienia internetowe.

Dostawca wiadomości powinien być już skonfigurowany, gdy dodano AngularFire. Sprawdź, czy w sekcji importów w pliku /angularfire-start/src/app/app.config.ts znajduje się ten 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ń FCM

Gdy powiadomienia zostaną włączone na urządzeniu lub w przeglądarce, otrzymasz token urządzenia. Ten token urządzenia służy do wysyłania powiadomienia na konkretne urządzenie lub do konkretnej przeglądarki.

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 zapisz go w Cloud Firestore.

chat.service.ts

2. Znajdź funkcję saveMessagingDeviceToken.
3. Zastąp całą funkcję tym 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 na początku ten kod nie zadział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 wyświetlanie 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(), która wyświetla okno przeglądarki z prośbą o to uprawnienie ( 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. W konsoli Firebase otwórz stronę Hosting aplikacji i zaczekaj na zakończenie nowego wdrożenia.
3. Odśwież FriendlyChat. Po zalogowaniu się powinno pojawić się okno z prośbą o przyznanie uprawnień do wysyłania 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ędziesz go potrzebować na następnym etapie ćwiczenia.

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 JavaScriptu w przeglądarce, a potem kliknij znak plusa („+”).
6. Kliknij „test”.

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

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

14. Reguły zabezpieczeń Cloud Firestore

Wyświetlanie reguł 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 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;
    }
  }
}

Aby wprowadzić ograniczenia, zaktualizuj reguły, używając tych 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;
    }
  }
}

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

Wyświetlanie reguł bezpieczeństwa 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 ćwiczenia kodu 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. Powinieneś zobaczyć regułę domyślną, która zezwala każdemu zalogowanemu użytkownikowi na odczyt i zapis dowolnych plików w zasobniku miejsca 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:

• Zezwalanie każdemu użytkownikowi na zapisywanie danych tylko w określonych folderach
• Zezwalanie wszystkim na odczytywanie danych z Cloud Storage
• Upewnij się, że przesyłane pliki to obrazy
• 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;
    }
  }
}

15. Gratulacje!

Udało Ci się utworzyć za pomocą Firebase internetową aplikację do 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

Więcej informacji

• firebase.google.com

16. [Opcjonalnie] Wymuszenie Sprawdzania aplikacji

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

Najpierw musisz włączyć sprawdzanie aplikacji i reCaptcha.

Włączanie reCaptcha Enterprise

1. W konsoli Google Cloud znajdź i wybierz reCaptcha Enterprise w sekcji Zabezpieczenia.
2. Włącz usługę zgodnie z wyświetlanymi instrukcjami i kliknij Utwórz klucz.
3. Wpisz wyświetlaną nazwę zgodnie z wytycznymi i jako typ platformy wybierz Witryna.
4. Dodaj wdrożone adresy URL do listy domen i upewnij się, że opcja „Użyj polecenia weryfikacyjnego” jest odznaczona.
5. Kliknij Utwórz klucz i zapisz wygenerowany klucz w bezpiecznym miejscu. Będzie on potrzebny w jednym z kolejnych kroków.

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 w wyświetlonym okienku wpisz klucz reCaptcha Enterprise, a potem kliknij Zapisz.
4. W widoku interfejsów API wybierz Storage i kliknij Wykonaj. Zrób to samo w przypadku Cloud Firestore.

Sprawdzanie aplikacji powinno być teraz wymuszane. Odśwież aplikację i spróbuj wyświetlić lub wysłać wiadomości czatu. Powinien wyświetlić 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 niepotwierdzone żądania. Teraz dodamy do aplikacji weryfikację.

Otwórz plik environment.ts i dodaj element 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 menu dodatkowych opcji i wybierz Zarządzaj tokenami debugowania.

Następnie kliknij Dodaj token debugowania i w odpowiednim miejscu 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. W konsoli Firebase otwórz stronę Hosting aplikacji i zaczekaj na zakończenie nowego wdrożenia.

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