Ćwiczenie z programowania dotyczące aplikacji internetowych AngularFire

1. Przegląd

Z tego ćwiczenia w programowaniu dowiesz się, jak w języku AngularFire tworzyć aplikacje internetowe, implementując i wdrażając klienta czatu za pomocą produktów i usług Firebase.

Czego się nauczysz

• Utwórz aplikację internetową za pomocą Angular i Firebase.
• Synchronizowanie danych za pomocą Cloud Firestore i Cloud Storage dla Firebase.
• Uwierzytelniaj użytkowników za pomocą Uwierzytelniania Firebase.
• Wdróż swoją aplikację internetową w Hostingu aplikacji Firebase.
• Wysyłaj powiadomienia przez Firebase Cloud Messaging.
• Gromadź dane o działaniu aplikacji internetowej.

Czego potrzebujesz

• Konto GitHub
• możliwość przeniesienia projektu Firebase na abonament Blaze,
• wybrany edytor IDE/tekstu, na przykład WebStorm, Sublime lub VS Code;
• menedżer pakietów npm, który zwykle zawiera Node.js;
• Terminal/konsoli
• wybraną przeglądarkę, np. Chrome;
• Przykładowy kod ćwiczenia w Codelabs (aby pobrać kod, zapoznaj się z następnym krokiem ćwiczenia z programowania).

2. Pobieranie przykładowego kodu

Tworzenie repozytorium GitHub

Kod źródłowy ćwiczeń z programowania znajdziesz na stronie https://github.com/firebase/codelab-friendchat-web. Repozytorium zawiera przykładowe projekty na wielu platformach. W tym ćwiczeniu w programowaniu wykorzystywany jest jednak tylko katalog angularfire-start.

Skopiuj folder angularfire-start do swojego repozytorium:

1. Za pomocą terminala utwórz na komputerze nowy folder i przejdź do nowego katalogu:

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

2. Użyj pakietu npm giget do pobrania tylko folderu angularfire-start:

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

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

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

4. Utwórz nowe repozytorium GitHub: https://github.com/new. Nadaj mu dowolną nazwę.
   1. GitHub udostępni Ci nowy adres URL repozytorium, który wygląda tak: https://github.com/[user-name]/[repository-name].git lub [e-mail]:[user-name]/[repository-name].git. Skopiuj ten adres URL.
5. Przekaż zmiany lokalne do nowego repozytorium GitHub. Uruchom poniższe polecenie, zastępując URL repozytorium zmienną your-repository-url.

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

6. W Twoim repozytorium GitHub powinien 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 następnie nazwij projekt Firebase FriendsChat. Zapamiętaj identyfikator projektu Firebase.
3. Odznacz opcję Włącz Google Analytics w tym projekcie.
4. Kliknij Utwórz projekt.

Ważne: projekt Firebase otrzyma nazwę FriendsChat, ale Firebase automatycznie przypisze do niego unikalny identyfikator w postaci friendchat-1234. Ten unikalny identyfikator jest używany do identyfikacji projektu (również w interfejsie wiersza poleceń), natomiast friendChat jest po prostu wyświetlaną nazwą.

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

• Uwierzytelnianie Firebase, aby ułatwić użytkownikom logowanie się w aplikacji.
• Cloud Firestore – pozwala zapisywać uporządkowane dane w chmurze i otrzymywać natychmiastowe powiadomienia o zmianach danych.
• Cloud Storage dla Firebase, aby zapisywać pliki w chmurze.
• Hosting aplikacji Firebase 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 w celu zbierania danych o wydajności aplikacji.

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

Uaktualnij abonament Firebase

Aby korzystać z hostingu aplikacji, projekt Firebase musi być objęty abonamentem Blaze, co oznacza, że jest powiązany z kontem rozliczeniowym Cloud.

• Konto rozliczeniowe Cloud wymaga formy płatności, takiej jak karta kredytowa.
• Jeśli jesteś nowym użytkownikiem Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania środków w wysokości 300 USD i bezpłatnego próbnego konta rozliczeniowego Cloud.

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

1. W konsoli Firebase wybierz przejdź na wyższą wersję abonamentu.
2. W oknie wybierz abonament Blaze i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby powiązać swój projekt z kontem rozliczeniowym Cloud.
   Jeśli musisz utworzyć konto rozliczeniowe Cloud, być może trzeba będzie wrócić do procesu uaktualniania w konsoli Firebase.

Uwaga: po ukończeniu tego ćwiczenia w Codelabs możesz zmienić wersję projektu na Spark.

Dodaj do projektu aplikację internetową Firebase

1. Kliknij ikonę aplikacji internetowej , by utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację, używając pseudonimu Przyjazny czat. Nie zaznaczaj pola obok opcji Skonfiguruj także Hosting Firebase dla tej aplikacji. Kliknij Zarejestruj aplikację.
3. W następnym kroku zobaczysz obiekt konfiguracji. Nie potrzebujesz jej teraz. Kliknij Przejdź do konsoli.

Skonfiguruj uwierzytelnianie

Aby umożliwić użytkownikom logowanie się w aplikacji internetowej przy użyciu ich kont Google, musisz użyć metody logowania Google.

1. W konsoli Firebase otwórz Authentication (Uwierzytelnianie).
2. Kliknij Rozpocznij.
3. W kolumnie Dostawcy dodatkowi kliknij Google > Włącz.
4. W polu tekstowym Nazwa projektu widoczna publicznie wpisz łatwą do zapamiętania nazwę, na przykład My Next.js app.
5. Z listy Adres e-mail pomocy technicznej związanej z projektem wybierz swój adres e-mail.
6. Kliknij Zapisz.

Włączanie Cloud Firestore

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

Musisz włączyć Cloud Firestore:

1. W konsoli Firebase otwórz Firestore.
2. Kliknij Utwórz bazę danych > Dalej > Rozpocznij w trybie testowym > Dalej.
   Później w tym ćwiczeniu w Codelabs dodasz reguły zabezpieczeń, aby zabezpieczyć swoje dane. Nie rozpowszechniaj ani nie udostępniaj aplikacji publicznie bez dodawania reguł zabezpieczeń do bazy danych.
3. Użyj domyślnej lokalizacji lub wybierz inną.
   W przypadku prawdziwej aplikacji powinno być miejsce w pobliżu użytkowników. Pamiętaj, że tej lokalizacji nie można później zmienić. Stanie się ona też automatycznie lokalizacją domyślnego zasobnika Cloud Storage (następny krok).
4. Kliknij Gotowe.

Włączanie Cloud Storage

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

Musisz włączyć Cloud Storage:

1. W konsoli Firebase otwórz Miejsce na dane.
2. Kliknij Rozpocznij > Rozpocznij w trybie testowym > Dalej.
   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.
3. Lokalizacja zasobnika powinna już być wybrana (ze względu na skonfigurowanie Firestore w poprzednim kroku).
4. Kliknij Gotowe.

4. Instalowanie interfejsu wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia korzystanie z Hostingu Firebase do lokalnego wyświetlania aplikacji internetowej oraz wdrażania jej w projekcie Firebase.

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

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

npm -g install firebase-tools@latest

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

2. Sprawdź, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchamiając to polecenie:

firebase --version

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

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

firebase login

Szablon aplikacji internetowej został skonfigurowany tak, aby pobierał konfigurację aplikacji pod kątem Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w ramach ćwiczenia z programowania). Aby pobrać konfigurację, musisz powiązać aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń uzyskuje 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ę prośba, wybierz Identyfikator projektu, a potem nadaj projektowi Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, testowych itp.). Jednak w tym ćwiczeniu w programie użyjemy aliasu default.

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

5. Instalowanie AngularFire

Przed uruchomieniem projektu upewnij się, że masz skonfigurowane 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 zależności wymaganych w projekcie.

3. Gdy pojawi się komunikat, odznacz ng deploy -- hosting przy użyciu spacji. Klawisze strzałek i spacja pozwalają wybrać następujące funkcje:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Naciśnij enter i postępuj zgodnie z pozostałymi instrukcjami.
5. Utwórz zatwierdzenie z komunikatem zatwierdzenia „Zainstaluj AngularFire” i wypchnij je do repozytorium GitHub.

6. Tworzenie backendu usługi App Hosting

W tej sekcji skonfigurujesz backend Hostingu aplikacji, aby obserwować gałąź w repozytorium Git.

Uwaga: hosting aplikacji Firebase jest dostępny w publicznej wersji przedpremierowej.

Pod koniec tej sekcji połączysz z repozytorium w GitHubie backend App Hosting, który będzie automatycznie ponownie skompilować i wdrożyć nową wersję aplikacji za każdym razem, gdy wypchniesz nowe zatwierdzenie do gałęzi main.

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

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

   Uwaga: korzystając z linków w konsoli, możesz monitorować bazowe usługi Google Cloud na potrzeby backendu Hostingu aplikacji. Więcej informacji znajdziesz w artykule Wyświetlanie logów i wskaźników.

8. Po zakończeniu wdrożenia kliknij bezpłatną domenę w sekcji „domains” (domeny). Rozpoczęcie pracy może zająć kilka minut ze względu na propagację DNS.

Pierwsza aplikacja internetowa została wdrożona. Za każdym razem, gdy wypchniesz nowe zatwierdzenie do gałęzi main repozytorium GitHub, w konsoli Firebase rozpocznie się nowa kompilacja i wdrożenie, a Twoja witryna zostanie automatycznie zaktualizowana po zakończeniu wdrażania.

Powinien wyświetlić się ekran logowania do aplikacji FriendsChat, który jeszcze nie działa.

Aplikacja nie może teraz nic robić, ale z Twoją pomocą wkrótce stanie się to możliwe.

Teraz utwórzmy aplikację do obsługi czatu w czasie rzeczywistym.

7. Importowanie i konfigurowanie Firebase

Skonfiguruj Firebase

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

1. Przejdź do ustawień projektu w konsoli Firebase.
2. Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, w przypadku której potrzebujesz obiektu konfiguracji.
3. W panelu kodu pakietu SDK Firebase wybierz „Konfiguracja”.

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

4. Skopiuj fragment kodu obiektu konfiguracji, a następnie dodaj go do zasobu 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.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

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

Wyświetlanie konfiguracji AngularFire

Funkcje wybrane przez Ciebie w konsoli zostały automatycznie dodane do pliku /angularfire-start/src/app/app.config.ts. Umożliwi to aplikacji korzystanie z funkcji Firebase.

8. Konfigurowanie logowania użytkowników

AngularFire powinien być teraz gotowy do użycia, ponieważ został zaimportowany i zainicjowany w app.config.ts. Chcesz wdrożyć logowanie użytkowników za pomocą uwierzytelniania Firebase.

Dodaj autoryzowaną domenę

Uwierzytelnianie Firebase umożliwia logowanie się tylko z określonej listy domen, które kontrolujesz. Dodaj swoją domenę bezpłatnego hostingu aplikacji do listy domen:

1. Otwórz App Hosting (Hosting aplikacji).
2. Obsługiwanie domeny backendu.
3. Otwórz Ustawienia uwierzytelniania.
4. Kliknij kartę Autoryzowane domeny.
5. Kliknij Dodaj domenę i wklej domenę backendu App Hosting.

Uwierzytelnianie użytkowników za pomocą Logowania przez Google

Gdy użytkownik kliknie przycisk Zaloguj się przez Google w aplikacji, wywołana jest funkcja login. Na potrzeby tych ćwiczeń z programowania musisz zezwolić Firebase na używanie Google jako dostawcy tożsamości. Użyjesz wyskakującego okienka, ale w Firebase masz dostęp do wielu innych metod.

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

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 odpowiednio zaktualizować nasz interfejs, musisz mieć sposób na sprawdzenie, czy użytkownik jest zalogowany. AngularFire udostępnia funkcję pobierającą obserwowalny element, który aktualizuje się przy każdej zmianie stanu uwierzytelniania. Funkcja ta 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. Jest uruchamiana po każdej zmianie stanu uwierzytelniania (gdy użytkownik się zaloguje lub się wyloguje). Komponenty szablonów Angular w interfejsie FriendsChat wykorzystują go do aktualizacji interfejsu użytkownika, np. przekierowania czy wyświetlania użytkownika w nagłówku.

Testuj logowanie w aplikacji

1. Utwórz zatwierdzenie z komunikatem „Dodawanie uwierzytelniania Google” i wypchnij je do repozytorium GitHub.
2. Otwórz stronę App Hosting w konsoli Firebase i poczekaj na zakończenie wdrożenia.
3. W aplikacji internetowej odśwież stronę i zaloguj się w aplikacji, korzystając z przycisku logowania oraz swojego konta Google. Jeśli zobaczysz komunikat o błędzie auth/operation-not-allowed, sprawdź, czy w konsoli Firebase masz włączoną Logowanie przez Google jako dostawcę uwierzytelniania.
4. Po zalogowaniu się powinno być wyświetlane Twoje zdjęcie profilowe i nazwa użytkownika:

9. Zapisywanie wiadomości w Cloud Firestore

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

Model danych

Dane Cloud Firestore są dzielone na kolekcje, dokumenty, pola i podkolekcje. Każda wiadomość z czatu będzie przechowywana jako dokument w kolekcji 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 napisanych przez użytkowników używaj Cloud Firestore.

W tej sekcji dodasz funkcję umożliwiającą użytkownikom zapisywanie nowych wiadomości w bazie danych. Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje wyświetlenie fragmentu kodu widocznego poniżej. Spowoduje to dodanie do Twojej instancji Cloud Firestore w kolekcji messages obiektu wiadomości z zawartością pól wiadomości. Metoda add() dodaje do kolekcji nowy dokument z automatycznie generowanym 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 „Publikuj nowe czaty w Firestore” i wypchnij je do repozytorium GitHub.
2. Otwórz stronę App Hosting w konsoli Firebase i poczekaj na zakończenie wdrożenia.
3. Odśwież FriendsChat. Po zalogowaniu się wpisz komunikat, na przykład „Cześć!”, a następnie kliknij WYŚLIJ. Spowoduje to zapisanie wiadomości w Cloud Firestore. Nie zobaczysz jeszcze danych w samej aplikacji internetowej, ponieważ nadal musisz zaimplementować funkcję pobierania danych (następna sekcja ćwiczeń z programowania).
4. Nowo dodaną wiadomość zobaczysz w konsoli Firebase. Otwórz interfejs pakietu emulatorów. W sekcji Kompilacja kliknij Baza danych Firestore (lub kliknij tutaj. Powinna pojawić się kolekcja wiadomości z nowo dodaną wiadomością:

10. Przeczytaj wiadomości

Synchronizuj wiadomości

Aby odczytywać wiadomości w aplikacji, musisz dodać obserwowalny element, który będzie wyzwalany po zmianie danych, a następnie utworzyć element interfejsu wyświetlający nowe wiadomości.

Dodajesz kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. Ten kod umożliwia pobranie zrzutu kolekcji messages. Aby uniknąć wyświetlania bardzo długiej historii podczas wczytywania czatu, wyświetlisz tylko 12 ostatnich wiadomości.

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 nasłuchiwać wiadomości w bazie danych, utwórz zapytanie dotyczące kolekcji przy użyciu funkcji collection do określenia, w którym zbiorze znajdują się dane, których chcesz nasłuchiwać. W kodzie powyżej wsłuchujesz się w zmiany w kolekcji messages, w której przechowywane są wiadomości czatu. Stosujesz też limit, odsłuchując tylko 12 ostatnich wiadomości za pomocą limit(12) i uporządkując wiadomości według daty, używając orderBy('timestamp', 'desc'), aby otrzymać 12 najnowszych wiadomości.

Funkcja collectionData używa szczegółowych zrzutów. Funkcja wywołania zwrotnego jest aktywowana po wprowadzeniu zmian w dokumentach, które pasują do zapytania. Przyczyną może być usunięcie, zmodyfikowanie lub dodanie wiadomości. Więcej informacji na ten temat znajdziesz w dokumentacji Cloud Firestore.

Testuj synchronizację wiadomości

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

Gratulacje! Odczytujesz dokumenty Cloud Firestore w swojej aplikacji.

11. Dodaj funkcje AI

Sztuczna inteligencja Google doda do aplikacji Google Chat przydatne funkcje wspomagające osoby z niepełnosprawnością.

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 ćwiczenia w Codelabs. Prompt dotyczy projektu Google Cloud, ale każdy projekt Firebase jest projektem Google Cloud.
3. Kliknij Utwórz klucz interfejsu API w istniejącym projekcie.
4. Skopiuj otrzymany klucz interfejsu API

Instalowanie rozszerzenia

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

1. Na stronie Tworzenie czatbota przy użyciu interfejsu Gemini API kliknij Zainstaluj w konsoli Firebase.
2. Postępuj zgodnie z wyświetlanymi instrukcjami. Gdy dojdziesz do kroku Skonfiguruj rozszerzenie, ustaw te wartości parametrów:
   • Dostawca interfejsu Gemini API: Google AI
   • Klucz interfejsu API AI od Google: 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.

Przetestuj funkcję AI

Przyjazny Chat ma już kod do odczytu odpowiedzi z rozszerzenia AI. Aby ją przetestować, musisz tylko wysłać nową wiadomość na czacie.

1. Otwórz FriendsChat i wyślij wiadomość.
2. Po chwili obok wiadomości powinien pojawić się wyskakujące okienko z odpowiedzią. Na końcu znajduje się notatka ✨ ai generated wskazująca, że aplikacja została utworzona przy użyciu generatywnej AI, a nie rzeczywistego użytkownika.

12. Wyślij zdjęcia

Teraz dodasz funkcję udostępniającą obrazy.

Cloud Firestore świetnie sprawdza się w przechowywaniu uporządkowanych danych, natomiast Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików i blobów, w której możesz przechowywać wszystkie obrazy udostępnione przez użytkownika w naszej aplikacji.

Zapisywanie obrazów w Cloud Storage

Na potrzeby tego ćwiczenia w Codelabs masz już dodany przycisk otwierający okno wyboru plików. Po wybraniu pliku wywoływana jest funkcja saveImageMessage, dzięki której możesz uzyskać odniesienie do wybranego pliku. Funkcja saveImageMessage osiąga te wyniki:

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

Teraz dodaj 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 zdjęć

1. Utwórz zatwierdzenie z komunikatem zatwierdzenia „Dodaj możliwość publikowania obrazów” i wypchnij je do repozytorium GitHub.
2. Otwórz stronę App Hosting w konsoli Firebase i poczekaj na zakończenie wdrożenia.
3. Odśwież FriendsChat. Po zalogowaniu się kliknij przycisk przesyłania obrazu w lewym dolnym rogu i wybierz plik obrazu za pomocą 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ę błąd z informacją, że musisz się zalogować.

13. Show notifications (Pokaż powiadomienia)

Dodano obsługę powiadomień w przeglądarce. Aplikacja będzie powiadamiać użytkowników o nowych wiadomościach na czacie. Komunikacja w chmurze Firebase (FCM) to rozwiązanie do przesyłania wiadomości na wielu platformach, które umożliwia niezawodne dostarczanie wiadomości i powiadomień bez opłat.

Dodawanie skryptu service worker FCM

Aplikacja internetowa wymaga skryptu service worker, który może odbierać i wyświetlać powiadomienia internetowe.

Dostawca usług komunikacyjnych powinien być już skonfigurowany po dodaniu AngularFire. Sprawdź, czy w sekcji importów w /angularfire-start/src/app/app.module.ts znajduje się poniższy kod.

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

app/app.module.ts

Wystarczy, że załaduje on i zainicjuje pakiet SDK Firebase Cloud Messaging, który zajmie się wyświetlaniem powiadomień.

Uzyskiwanie tokenów urządzeń FCM

Po włączeniu powiadomień na urządzeniu lub w przeglądarce otrzymasz token urządzenia. Token urządzenia służy do wysyłania powiadomień na określone urządzenie lub konkretną przeglądarkę.

Gdy użytkownik się zaloguje, wywołujesz funkcję saveMessagingDeviceToken. W tym miejscu otrzymasz z przeglądarki token urządzenia FCM i zapiszesz 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);
    };
}

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

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

Jeśli użytkownik nie przyznał Twojej aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W takim przypadku wywołujesz metodę requestPermission(), która wyświetla okno przeglądarki z prośbą o przyznanie tych uprawnień ( 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 tokena urządzenia

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

Wysyłanie powiadomienia na urządzenie

Masz już token urządzenia, więc możesz wysłać powiadomienie.

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

Jeśli aplikacja działa na pierwszym planie, zobaczysz powiadomienie w konsoli JavaScriptu.

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

Z kolejnego ćwiczenia z programowania Firebase SDK for 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 weryfikacji danych.

Podczas konfigurowania projektu Firebase na początku tego ćwiczenia w Codelabs wybrano domyślne reguły zabezpieczeń „Trybu testowego”, aby nie ograniczyć dostępu do magazynu danych. W konsoli Firebase na karcie Reguły w sekcji Baza danych możesz wyświetlać i modyfikować te reguły.

Powinny być teraz 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ć dowolne kolekcje w Twoim magazynie danych.

rules_version = '2';

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

Zaktualizuj reguły tak, aby wprowadzać ograniczenia, używając 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;
    }
  }
}

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

Reguły zabezpieczeń powinny zostać automatycznie zaktualizowane do Twojego zestawu 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 walidacji danych.

Podczas konfigurowania projektu Firebase na początku tego ćwiczenia w Codelabs wybierasz domyślną regułę zabezpieczeń Cloud Storage, która zezwala na korzystanie z Cloud Storage tylko uwierzytelnionym użytkownikom. W konsoli Firebase na karcie Reguły w sekcji Miejsce na dane możesz wyświetlać i modyfikować reguły. Powinna być widoczna reguła domyślna, która umożliwia zalogowanym użytkownikom 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;
    }
  }
}

Zaktualizujesz reguły, aby:

• Zezwalaj każdemu użytkownikowi na zapisywanie tylko w jego określonych folderach
• Zezwalaj wszystkim na odczyt z Cloud Storage
• Upewnij się, że przesłane pliki to obrazy
• Ogranicz rozmiar obrazów, które można przesyłać, do 5 MB.

Można to zaimplementować, korzystając z 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ę użyć Firebase do stworzenia aplikacji internetowej do czatowania w czasie rzeczywistym.

Omówione zagadnienia

• 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 ćwiczeń z programowania Cloud Functions dla Firebase, aby dowiedzieć się, jak używać pakietu SDK Firebase dla Cloud Functions i dodawać zadania backendu do aplikacji do obsługi czatu. Możesz zacząć bezpośrednio od kroku 5 tego ćwiczenia w programowaniu, ponieważ projekt Firebase jest już skonfigurowany.

Chcesz dowiedzieć się więcej o Cloud Firestore? A może chcesz dowiedzieć się więcej o kolekcjach podrzędnych i transakcjach? Przejdź do ćwiczenia z programowania w przeglądarce Cloud Firestore, aby skorzystać z bardziej szczegółowych informacji o Cloud Firestore.

Chcesz dowiedzieć się więcej o Monitorowaniu wydajności Firebase w przypadku aplikacji internetowych? Przejdź do ćwiczenia z programowania w zakresie monitorowania wydajności Firebase w Firebase, gdzie znajdziesz bardziej szczegółowe informacje o Monitorowaniu wydajności Firebase.

Więcej informacji

• firebase.google.com

16. [Opcjonalnie] Wymuszanie przy użyciu Sprawdzania aplikacji

Sprawdzanie aplikacji Firebase pomaga zabezpieczyć usługi przed niechcianym ruchem i chronić Twój 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 ukończenia poprzednich kroków. Upewnij się, że Preferowany czat działa lokalnie za pomocą emulatorów lub jest wdrażany przy użyciu usług Firebase.

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

Włączanie reCAPTCHA Enterprise

1. W konsoli Google Cloud w sekcji Zabezpieczenia odszukaj i wybierz reCaptcha Enterprise.
2. Włącz usługę w odpowiedzi na prośbę i kliknij Utwórz klucz.
3. Wpisz wyświetlaną nazwę zgodnie z instrukcjami 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 w postaci pola wyboru” jest odznaczona.
5. Kliknij Create Key (Utwórz klucz) i zapisz wygenerowany klucz w bezpiecznym miejscu. Będzie on potrzebny w dalszej części tego kroku.

Włączanie Sprawdzania aplikacji

1. W konsoli Firebase znajdź w panelu po lewej stronie 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 komunikacie wpisz klucz reCaptcha Enterprise, a następnie kliknij Save (Zapisz).
4. W widoku interfejsów API wybierz Miejsce na dane i kliknij Wymuś. Zrób to samo w Cloud Firestore.

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

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.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Zastąp wartość key swoim tokenem reCaptcha Enterprise.

Następnie otwórz plik app.module.ts i dodaj te importowane dane:

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

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

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

W importach dodaj inicjowanie Sprawdzania aplikacji 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ć testy lokalne, ustaw self.FIREBASE_APPCHECK_DEBUG_TOKEN na true. Gdy odświeżysz aplikację w localhost, zostanie zarejestrowany w konsoli 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.

Teraz w konsoli Firebase przejdź do widoku aplikacji na stronę Sprawdzanie aplikacji.

Kliknij rozszerzone menu i wybierz Zarządzaj tokenami debugowania.

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

Przejdź do pliku chat.service.ts i dodaj ten import:

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

W tym samym pliku chat.service.ts wstrzyknij Sprawdzanie aplikacji obok innych usług Firebase.

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

1. Utwórz zatwierdzenie z komunikatem „Blokuj nieautoryzowanych klientów za pomocą Sprawdzania aplikacji” i wypchnij je do repozytorium GitHub.
2. Otwórz stronę App Hosting w konsoli Firebase i poczekaj na zakończenie wdrożenia.

Gratulacje! Sprawdzanie aplikacji powinno już działać w Twojej aplikacji.