Ćwiczenie z programowania dotyczące aplikacji internetowych AngularFire

1. Omówienie

Z tego modułu dowiesz się, jak używać AngularFire do tworzenia aplikacji internetowych przez wdrożenie i wdrażanie klienta czatu za pomocą produktów i usług Firebase.

Czego się nauczysz

• Utworzyć aplikację internetową za pomocą Angular i Firebase.
• Synchronizowanie danych przy użyciu 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 (FCM).
• 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
• wybraną przeglądarkę, np. Chrome;
• Przykładowy kod z tej ćwiczeń (aby dowiedzieć się, jak pobrać kod, zapoznaj się z następnym krokiem tej ćwiczenia)

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. Jednak w tym ćwiczeniu w Codelabs używany jest tylko katalog 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. Śledzenie zmian lokalnie przez 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 ją nazwać dowolnie.
   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 git@github.com:[user-name]/[repository-name].git. Skopiuj ten adres URL.
5. Prześlij lokalne zmiany 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. Kod startowy powinien pojawić się w Twoim repozytorium GitHub.

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 FriendsChat. Zapamiętaj identyfikator projektu Firebase.
3. Odznacz opcję Włącz Google Analytics dla tego projektu.
4. Kliknij Utwórz projekt.

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

• Uwierzytelnianie Firebase, które ułatwia użytkownikom logowanie się w Twojej 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.
• 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

Aby korzystać z App Hosting, Twój projekt Firebase musi być objęty abonamentem Blaze, co oznacza, że jest powiązany 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 środków w wysokości 300 USD i bezpłatnego okresu próbnego konta rozliczeniowego Cloud.

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

1. W konsoli Firebase wybierz Przejdź na większy pakiet.
2. W oknie wybierz abonament Blaze i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby powiązać projekt z kontem rozliczeniowym Cloud.
   Jeśli konieczne jest utworzenie konta rozliczeniowego Cloud, może być konieczne powrót do procesu uaktualniania w konsoli Firebase.

Dodaj aplikację internetową Firebase do projektu

1. Kliknij ikonę witryny , aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod nazwą Przyjazny czat. Nie zaznaczaj pola Skonfiguruj też Hosting Firebase dla tej aplikacji. Kliknij Zarejestruj aplikację.
3. W następnym kroku zobaczysz obiekt konfiguracji. Nie potrzebujesz go 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.

Włączanie Cloud Firestore

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

Musisz włączyć Cloud Firestore:

1. W konsoli Firebase otwórz Firestore.
2. Kliknij Utwórz bazę danych > Dalej > Uruchom w trybie testowym > Dalej.
   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.
3. Użyj lokalizacji domyślnej lub wybierz lokalizację.
   W przypadku prawdziwej aplikacji wybierz lokalizację znajdującą się w pobliżu użytkowników. Pamiętaj, że tej lokalizacji nie można później zmienić. Będzie to również automatycznie lokalizacja domyślnego zasobnika Cloud Storage (następny krok).
4. Kliknij Gotowe.

Włącz Cloud Storage

Aplikacja internetowa korzysta z 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 > Uruchom 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 konfigurowanie 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 udostępniania aplikacji internetowej oraz wdrażania aplikacji internetowej w projekcie Firebase.

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

npm -g install firebase-tools@latest

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

firebase --version

Upewnij się, że interfejs wiersza poleceń Firebase ma wersję 13.9.0 lub nowszą.

3. Autoryzuj interfejs wiersza poleceń Firebase, uruchamiając następujące polecenie:

firebase login

Szablon aplikacji internetowej został skonfigurowany tak, aby pobierał z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w ramach ćwiczenia z programowania) konfigurację aplikacji na potrzeby Hostingu Firebase. 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.). Jednak w tym ćwiczeniu z programowania użyjemy aliasu default.

7. Postępuj zgodnie z pozostałymi instrukcjami podanymi w wierszu 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 zależności wymaganych w projekcie.

3. Gdy pojawi się odpowiedni komunikat, odznacz ng deploy -- hosting, naciskając spację. Użyj klawiszy strzałek i spacji, aby 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 „Zainstaluj AngularFire” i wypchnij go do repozytorium GitHub.

6. Tworzenie backendu App Hosting

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

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 w pierwszym kroku, aby połączyć utworzone wcześniej repozytorium GitHub.
4. Skonfiguruj ustawienia wdrożenia:
   1. Zachowaj katalog główny jako /
   2. Ustaw aktywną gałąź na main
   3. Włącz automatyczne wdrażanie
5. Nazwij swój backend friendlychat-codelab.
6. W sekcji „Utwórz lub powiąż aplikację internetową Firebase” w sekcji „Wybierz istniejącą aplikację internetową Firebase” wybierz skonfigurowaną wcześniej aplikację internetową. listę rozwijaną.
7. Kliknij „Zakończ i wdróż”. Po chwili otworzy się nowa strona, na której możesz sprawdzić stan nowego backendu App Hostingu.
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 wypchniesz nowe zatwierdzenie do gałęzi main repozytorium GitHub, w konsoli Firebase rozpocznie się nowa kompilacja i wdrażanie, a Twoja witryna zostanie automatycznie zaktualizowana po zakończeniu wdrażania.

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

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

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

7. Importowanie i konfigurowanie Firebase

Skonfiguruj Firebase

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

1. Otwórz ustawienia projektu w konsoli Firebase.
2. W sekcji „Twoje aplikacje” wybierz pseudonim aplikacji, dla której chcesz utworzyć obiekt konfiguracji.
3. Wybierz „Konfiguracja” z panelu fragmentu kodu pakietu SDK Firebase.

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.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Wyświetl konfigurację AngularFire

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

8. Konfigurowanie logowania użytkowników

Usługa AngularFire powinna być już gotowa do użycia, ponieważ została zaimportowana i zainicjowana w app.config.ts. Zaimplementujesz logowanie użytkowników za pomocą Uwierzytelniania Firebase.

Dodaj autoryzowaną domenę

Uwierzytelnianie Firebase zezwala wyłącznie na logowanie się z zestawu domen, które kontrolujesz. Dodaj swoją bezpłatną domenę App Hosting do listy domen:

1. Otwórz App Hosting (Hosting aplikacji).
2. Skopiuj domenę backendu.
3. Otwórz Authentication settings (Ustawienia uwierzytelniania).
4. Wybierz 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 w aplikacji przycisk Zaloguj się przez Google, uruchomi się 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. Odszukaj 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 wyzwalana, gdy użytkownik kliknie przycisk Wyloguj się.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj funkcję logout.
3. Zastąp całą funkcję poniższym 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ę generującą obiekt obserwacyjny, który aktualizuje się po każdej zmianie stanu uwierzytelniania. Został on już wdrożony, ale warto się temu przyjrzeć.

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 zauważalnego 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 się w aplikacji

1. Utwórz zatwierdzenie z komunikatem „Dodawanie uwierzytelniania Google” i wypchnij go do repozytorium GitHub.
2. Otwórz stronę App Hosting (Hosting aplikacji) w konsoli Firebase i poczekaj na zakończenie nowego wdrożenia.
3. W aplikacji internetowej odśwież stronę i zaloguj się w niej za pomocą przycisku logowania i konta Google. Jeśli pojawi się komunikat o błędzie auth/operation-not-allowed, sprawdź, czy w konsoli Firebase jest włączone Logowanie przez Google jako dostawca uwierzytelniania.
4. Po zalogowaniu się powinno wyświetlać się Twoje zdjęcie profilowe i nazwa użytkownika:

9. Zapisywanie wiadomości w Cloud Firestore

W tej sekcji zapiszesz w Cloud Firestore niektóre dane, co pozwoli Ci wypełnić interfejs 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 Cloud Firestore są dzielone na kolekcje, dokumenty, pola i kolekcje podrzędne. Każda wiadomość z czatu będzie przechowywana jako dokument w kolekcji najwyższego poziomu o nazwie messages.

Dodawanie wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu napisanych przez użytkowników będziesz używać 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 generowanym identyfikatorem.

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj 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 „Publikuj nowe czaty w Firestore” i wypchnij go 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ę 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ść zobaczysz 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

Synchronizuj wiadomości

Aby odczytywać wiadomości w aplikacji, musisz dodać obiekt obserwacyjny, który będzie się aktywować w przypadku zmiany danych, a następnie utworzyć element interfejsu pokazujący nowe wiadomości.

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

1. Wróć do pliku src/app/services/chat.service.ts.
2. Odszukaj funkcję loadMessages.
3. Zastąp całą funkcję poniższym 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 ze zrzutów działających w tle. 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 na ten temat znajdziesz w dokumentacji Cloud Firestore.

Test synchronizacji wiadomości

1. Utwórz zatwierdzenie z komunikatem „Pokaż nowe czaty w interfejsie” i wypchnij go 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. Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie FriendsChat (patrz poniżej). Możesz pisać nowe wiadomości. powinna pojawić się od razu.
4. (Opcjonalnie) Możesz ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Firestore pakietu emulatorów. wszystkie zmiany powinny być widoczne w interfejsie.

Gratulacje! Odczytujesz dokumenty z Cloud Firestore w swojej aplikacji.

11. Dodaj funkcje 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 ćwiczenia z programowania. 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 powstały 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 odpowiedź w polu response w dokumencie.

1. Na stronie Utwórz 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 Gemini API: Google AI
   • Klucz interfejsu API Google AI: 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

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

1. Otwórz aplikację FriendsChat i wyślij wiadomość.
2. Po chwili powinna pojawić się obok Twojej wiadomości odpowiedź w wyskakującym okienku. Na końcu tekstu znajduje się notatka ✨ ai generated z informacją, że została ona utworzona przy użyciu generatywnej AI, a nie przez prawdziwego użytkownika.

12. Wyślij zdjęcia

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

Cloud Firestore dobrze 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

Do tych ćwiczeń w Codelabs został już dodany przycisk, który uruchamia okno wyboru plików. 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 obiekt zastępczy w oknie czatu, wyświetla się komunikat „Wczytuję” animacje podczas przesyłania obrazu.
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 obrazu zamiast tymczasowego obrazu wczytywania.

Następnie dodaj 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 zatwierdzenie z komunikatem „Dodaj możliwość publikowania obrazów” i wypchnij go 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ę 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ć użytkowników o nowych wiadomościach na 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 skryptu service worker FCM

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

Dostawca 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

Skrypt service worker musi tylko załadować i zainicjować pakiet SDK Firebase Cloud Messaging, 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ę loguje, wywołujesz funkcję saveMessagingDeviceToken. Pobierz z przeglądarki token urządzenia FCM i zapisz 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 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ł 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. Odszukaj funkcję requestNotificationsPermissions.
3. Zastąp całą funkcję poniższym 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 „Dodaj możliwość publikowania obrazów” i wypchnij go 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 ono potrzebne w następnym etapie ćwiczeń z programowania.

Wysyłanie powiadomienia na urządzenie

Skoro masz już token urządzenia, 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 JavaScript Twojej przeglądarki i kliknij znak plusa („+”)
6. Kliknij przycisk „Przetestuj”

Jeśli Twoja aplikacja będzie działać 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ś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.

Konfigurując projekt Firebase na początku tego ćwiczenia z programowania, wybierasz „Tryb testowy” domyślnych reguł zabezpieczeń, dzięki czemu nie ograniczysz dostępu do magazynu danych. W konsoli Firebase na karcie Reguły w sekcji Baza danych możesz przeglądać i modyfikować te reguły.

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

Reguły zabezpieczeń powinny być automatycznie aktualizowane zgodnie z pakietem 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.

Konfigurując projekt Firebase na początku tego ćwiczenia z programowania, 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 przeglądać 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;
    }
  }
}

Reguły zostaną zaktualizowane w taki sposób:

• 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
• Ogranicz rozmiar obrazów, które można przesyłać, do maksymalnie 5 MB.

Aby to zrobić, stosuj się do 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ę wykorzystać Firebase do stworzenia aplikacji internetowej do obsługi czatu w czasie rzeczywistym.

Zakres omówiony

• 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] 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 nieautoryzowane klienty za pomocą Sprawdzania aplikacji i reCAPTCHA Enterprise.

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 jest zaznaczone pole wyboru „Użyj testu zabezpieczającego”. ta opcja jest odznaczona.
5. Kliknij Utwórz klucz i przechowuj wygenerowany klucz w bezpiecznym miejscu. Będzie Ci ona potrzebna na późniejszym etapie.

Włączanie Sprawdzania aplikacji

1. W konsoli Firebase znajdź w panelu po lewej stronie sekcję Kompilacja.
2. Kliknij Sprawdzanie aplikacji, a następnie wybierz 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 Miejsce na dane i kliknij Egzekwuj. 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 dodajmy weryfikację do Twojej 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 przejdź do pliku app.config.ts i dodaj te importy:

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 zainicjowanie Sprawdzania aplikacji za pomocą parametru 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 systemie localhost, spowoduje to zarejestrowanie w konsoli tokena debugowania podobnego do:

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 otwórz widok aplikacji 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 zgodnie z instrukcjami.

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

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

W tym samym pliku chat.service.ts wstrzyknij Sprawdzanie aplikacji razem z innymi usługami Firebase.

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

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

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