Webowe laboratorium kodu AngularFire

1. Przegląd

W tym laboratorium kodowania dowiesz się, jak używać AngularFire do tworzenia aplikacji internetowych poprzez implementację i wdrażanie klienta czatu przy użyciu produktów i usług Firebase.

Czego się nauczysz

• Zbuduj aplikację internetową przy użyciu Angular i Firebase.
• Synchronizuj dane za pomocą Cloud Firestore i Cloud Storage dla Firebase.
• Uwierzytelniaj użytkowników za pomocą uwierzytelniania Firebase.
• Wdróż swoją aplikację internetową na Hostingu Firebase.
• Wysyłaj powiadomienia za pomocą Firebase Cloud Messaging.
• Zbieraj dane o wydajności swojej aplikacji internetowej.

Co będziesz potrzebował

• Wybrany edytor IDE/tekstu, taki jak WebStorm , Atom , Sublime lub VS Code
• Menedżer pakietów npm , który zwykle jest dostarczany z Node.js
• Terminal/konsola
• Wybrana przeglądarka, na przykład Chrome
• Przykładowy kod laboratorium kodu (Zobacz następny krok laboratorium kodu, aby dowiedzieć się, jak uzyskać kod).

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub Codelab z wiersza poleceń:

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

Alternatywnie, jeśli nie masz zainstalowanego git, możesz pobrać repozytorium jako plik ZIP .

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj katalog 📁 angularfire-start ze sklonowanego repozytorium. Ten katalog 📁 angularfire-start zawiera kod startowy dla codelab, który będzie w pełni funkcjonalną aplikacją internetową do czatowania.

3. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

1. Zaloguj się do Firebase .
2. W konsoli Firebase kliknij Dodaj projekt , a następnie nazwij swój projekt Firebase FriendlyChat . Zapamiętaj identyfikator projektu swojego projektu Firebase.
3. Odznacz Włącz Google Analytics dla tego projektu
4. Kliknij Utwórz projekt .

Aplikacja, którą zamierzasz zbudować, korzysta z produktów Firebase, które są dostępne dla aplikacji internetowych:

• Uwierzytelnianie Firebase , aby łatwo umożliwić użytkownikom logowanie się do Twojej aplikacji.
• Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianie danych.
• Cloud Storage dla Firebase do zapisywania plików w chmurze.
• Hosting Firebase do hostowania i obsługi Twoich zasobów.
• Firebase Cloud Messaging do wysyłania powiadomień push i wyświetlania wyskakujących powiadomień przeglądarki.
• Monitorowanie wydajności Firebase do zbierania danych o wydajności użytkowników Twojej aplikacji.

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

Dodaj aplikację internetową Firebase do projektu

1. Kliknij ikonę internetową aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod pseudonimem Friendly Chat , a następnie zaznacz pole wyboru Skonfiguruj także Hosting Firebase dla tej aplikacji . Kliknij Zarejestruj aplikację .
3. W następnym kroku zobaczysz obiekt konfiguracji. Skopiuj tylko obiekt JS (nie otaczający kod HTML) do pliku firebase-config.js

Włącz logowanie Google dla uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji internetowej przy użyciu kont Google, użyj metody logowania Google .

Musisz włączyć logowanie przez Google :

1. W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu.
2. Kliknij Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj , aby przejść bezpośrednio do tej karty).
3. Włącz dostawcę logowania Google , a następnie kliknij Zapisz .
4. Ustaw publiczną nazwę swojej aplikacji na Przyjazny czat i wybierz e-mail pomocy technicznej projektu z menu rozwijanego.
5. Skonfiguruj ekran zgody OAuth w Google Cloud Console i dodaj logo:

Włącz Cloud Firestore

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

Musisz włączyć Cloud Firestore:

1. W sekcji Kompilacja konsoli Firebase kliknij opcję Baza danych Firestore .
2. Kliknij Utwórz bazę danych w okienku Cloud Firestore.

3. Wybierz opcję Uruchom w trybie testowym , a następnie po przeczytaniu zastrzeżenia dotyczącego zasad bezpieczeństwa kliknij Dalej .

Tryb testowy zapewnia, że ​​możesz swobodnie pisać do bazy danych podczas programowania. Poprawisz bezpieczeństwo naszej bazy danych później w tym laboratorium kodowania.

4. Ustaw lokalizację, w której przechowywane są dane Cloud Firestore. Możesz pozostawić tę opcję jako domyślną lub wybrać region blisko Ciebie. Kliknij Gotowe , aby udostępnić Firestore.

Włącz przechowywanie w chmurze

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

Musisz włączyć Cloud Storage:

1. W sekcji Kompilacja konsoli Firebase kliknij Pamięć .
2. Jeśli nie ma przycisku Rozpocznij , oznacza to, że przechowywanie w chmurze jest już włączone i nie musisz wykonywać poniższych czynności.
3. Kliknij Rozpocznij .
4. Przeczytaj zastrzeżenie dotyczące reguł bezpieczeństwa dla Twojego projektu Firebase, a następnie kliknij Dalej .

Przy domyślnych regułach bezpieczeństwa każdy uwierzytelniony użytkownik może zapisywać dowolne dane w Cloud Storage. W dalszej części tego laboratorium kodowania zwiększysz bezpieczeństwo naszego magazynu.

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

4. Zainstaluj interfejs wiersza poleceń Firebase

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

1. Zainstaluj interfejs CLI, uruchamiając następujące polecenie npm:

npm -g install firebase-tools

2. Sprawdź, czy interfejs CLI został poprawnie zainstalowany, uruchamiając następujące polecenie:

firebase --version

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

3. Autoryzuj Firebase CLI, uruchamiając następujące polecenie:

firebase login

Skonfigurowałeś szablon aplikacji internetowej, aby pobrać konfigurację aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w laboratorium kodu). Ale aby pobrać konfigurację, musisz powiązać swoją aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu angularfire-start Twojej aplikacji.
5. Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:

firebase use --add

6. Po wyświetleniu monitu wybierz swój identyfikator projektu , a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjne, pomostowe itp.). Jednak w tym laboratorium kodu po prostu użyjmy aliasu default .

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

5. Zainstaluj AngularFire

Przed uruchomieniem projektu upewnij się, że masz skonfigurowane Angular CLI i AngularFire.

1. W konsoli uruchom następujące polecenie:

npm install -g @angular/cli

2. Następnie w konsoli z katalogu angularfire-start uruchom następującą komendę Angular CLI:

ng add @angular/fire

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

3. Po wyświetleniu monitu wybierz funkcje, które zostały skonfigurowane w konsoli Firebase ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) i postępuj zgodnie z monitami wyświetlanymi na konsoli.

6. Uruchom aplikację startową lokalnie

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

1. W konsoli z katalogu angularfire-start uruchom następującą komendę Firebase CLI:

firebase emulators:start

2. Twoja linia poleceń powinna wyświetlić następującą odpowiedź:

✔  hosting: Local server: http://localhost:5000

Używasz emulatora Hostingu Firebase do lokalnego udostępniania naszej aplikacji. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000 . Obsługiwane są wszystkie pliki znajdujące się w podkatalogu src .

3. Za pomocą przeglądarki otwórz aplikację pod adresem http://localhost:5000 .

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

Aplikacja nie może teraz nic zrobić, ale z Twoją pomocą wkrótce to zrobi! Do tej pory opracowałeś tylko interfejs użytkownika.

Stwórzmy teraz czat w czasie rzeczywistym!

7. Zaimportuj i skonfiguruj Firebase

Skonfiguruj Firebase

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

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

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

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

środowisko.ts

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

Zaimportuj AngularFire

Przekonasz się, że funkcje wybrane w konsoli zostały automatycznie przekierowane do pliku /angularfire-start/src/app/app.module.ts . Dzięki temu Twoja aplikacja może korzystać z funkcji i funkcji Firebase. Aby jednak rozwijać się w środowisku lokalnym, należy je połączyć, aby korzystać z pakietu Emulator.

1. W /angularfire-start/src/app/app.module.ts znajdź sekcję imports i zmodyfikuj dostarczone funkcje, aby połączyć się z pakietem emulatorów w środowiskach nieprodukcyjnych.

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

aplikacja.moduł.ts

Podczas tego laboratorium będziesz używać uwierzytelniania Firebase, Cloud Firestore, Cloud Storage, Cloud Messaging i Performance Monitoring, więc importujesz wszystkie ich biblioteki. W swoich przyszłych aplikacjach upewnij się, że importujesz tylko potrzebne części Firebase, aby skrócić czas ładowania aplikacji.

8. Skonfiguruj logowanie użytkownika

AngularFire powinien być teraz gotowy do użycia, ponieważ został zaimportowany i zainicjowany w app.module.ts . Teraz zaimplementujesz logowanie użytkowników przy użyciu uwierzytelniania Firebase .

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

W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , uruchamiana jest funkcja login . (Już to skonfigurowałeś!) W tym laboratorium kodu chcesz zezwolić Firebase na korzystanie z Google jako dostawcy tożsamości. Użyjesz wyskakującego okienka, ale w Firebase dostępnych jest kilka innych metod .

1. W katalogu angularfire-start w podkatalogu /src/app/services/ otwórz chat.service.ts .
2. Znajdź funkcję login .
3. Zastąp całą funkcję następującym 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 uruchamiana jest w momencie kliknięcia przez użytkownika przycisku Wyloguj .

1. Wróć do pliku src/app/services/chat.service.ts .
2. Znajdź funkcję logout .
3. Zastąp całą funkcję następującym 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);
    })
}

Śledź stan uwierzytelniania

Aby odpowiednio zaktualizować nasz interfejs użytkownika, potrzebujesz sposobu sprawdzenia, czy użytkownik jest zalogowany, czy wylogowany. Dzięki uwierzytelnianiu Firebase możesz pobierać dane obserwowalne w stanie użytkownika, które będą uruchamiane za każdym razem, gdy zmieni się stan uwierzytelniania.

1. Wróć do pliku src/app/services/chat.service.ts .
2. Znajdź przypisanie zmiennej user$ .
3. Zastąp całe przypisanie następującym kodem.

chat.service.ts

// Observable user
user$ = user(this.auth);

Powyższy kod wywołuje user funkcji AngularFire, który zwraca obserwowalnego użytkownika. Będzie uruchamiany za każdym razem, gdy zmieni się stan uwierzytelniania (gdy użytkownik zaloguje się lub wyloguje). W tym momencie zaktualizujesz interfejs użytkownika, aby przekierowywał, wyświetlał użytkownika w nawigacji nagłówka i tak dalej. Wszystkie te części interfejsu użytkownika zostały już zaimplementowane.

Przetestuj logowanie do aplikacji

1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase emulators:start w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z http://localhost:5000 , a następnie otwórz ją w przeglądarce.
2. Zaloguj się do aplikacji za pomocą przycisku logowania i swojego konta Google. Jeśli zobaczysz komunikat o błędzie z informacją, że auth/operation-not-allowed , upewnij się, że logowanie przez Google zostało włączone jako dostawca uwierzytelniania w konsoli Firebase.
3. Po zalogowaniu powinno wyświetlić się Twoje zdjęcie profilowe i nazwa użytkownika:

9. Pisz wiadomości do Cloud Firestore

W tej sekcji zapiszesz niektóre dane w Cloud Firestore, aby można było wypełnić interfejs aplikacji. Można to zrobić ręcznie za pomocą konsoli Firebase , ale zrobisz to w samej aplikacji, aby zademonstrować podstawowy zapis w Cloud Firestore.

Model danych

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

Dodaj wiadomości do Cloud Firestore

Do przechowywania wiadomości czatu napisanych przez użytkowników użyjesz Cloud Firestore .

W tej sekcji dodasz funkcję umożliwiającą użytkownikom pisanie nowych wiadomości do Twojej bazy danych. Kliknięcie przez użytkownika przycisku WYŚLIJ spowoduje uruchomienie poniższego fragmentu kodu. Dodaje obiekt wiadomości z zawartością pól wiadomości do Twojej 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ę następującym 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>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

Testuj wysyłanie wiadomości

1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase emulators:start w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z http://localhost:5000 , a następnie otwórz ją w przeglądarce.
2. Po zalogowaniu wprowadź wiadomość typu „Hej tam!”, a następnie kliknij WYŚLIJ . Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak nie zobaczysz jeszcze danych w rzeczywistej aplikacji internetowej, ponieważ nadal musisz zaimplementować pobieranie danych (następna sekcja laboratorium kodu).
3. Możesz zobaczyć nowo dodaną wiadomość w konsoli Firebase. Otwórz interfejs użytkownika pakietu emulatorów. W sekcji Build kliknij Firestore Database (lub kliknij tutaj , a powinieneś zobaczyć kolekcję wiadomości z nowo dodaną wiadomością:

10. Czytaj wiadomości

Synchronizuj wiadomości

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

Dodasz kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. W tym kodzie pobierzesz migawkę kolekcji messages . Wyświetlisz tylko 12 ostatnich wiadomości czatu, aby uniknąć wyświetlania bardzo długiej historii podczas ładowania.

1. Wróć do pliku src/app/services/chat.service.ts .
2. Znajdź funkcję loadMessages .
3. Zastąp całą funkcję następującym 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, tworzysz zapytanie dotyczące kolekcji, używając funkcji collection , aby określić, w której kolekcji znajdują się dane, których chcesz słuchać. W powyższym kodzie nasłuchujesz zmian w messages kolekcja, w której przechowywane są wiadomości czatu. Stosujesz również limit, odsłuchując tylko 12 ostatnich wiadomości za pomocą limit(12) i porządkując wiadomości według daty za pomocą orderBy('timestamp', 'desc') , aby uzyskać 12 najnowszych wiadomości.

Funkcja collectionData używa migawek pod maską. Funkcja wywołania zwrotnego zostanie uruchomiona, gdy nastąpią zmiany w dokumentach pasujących do zapytania. Może tak się stać, jeśli wiadomość zostanie usunięta, zmodyfikowana lub dodana. Możesz przeczytać więcej na ten temat w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase emulators:start w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z http://localhost:5000 , a następnie otwórz ją w przeglądarce.
2. Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie FriendlyChat (patrz poniżej). Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
3. (Opcjonalnie) Możesz spróbować ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Firestore pakietu Emulator; wszelkie zmiany powinny zostać odzwierciedlone w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

11. Wyślij obrazy

Teraz dodasz funkcję, która udostępnia obrazy.

Podczas gdy Cloud Firestore jest dobre do przechowywania danych strukturalnych, Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików/obiektów blob, której będziesz używać do przechowywania wszelkich obrazów udostępnianych przez użytkownika za pomocą naszej aplikacji.

Zapisz obrazy w Cloud Storage

Na potrzeby tego laboratorium kodowania masz już dodany przycisk, który uruchamia okno dialogowe selektora plików. Po wybraniu pliku wywoływana jest funkcja saveImageMessage i można uzyskać odniesienie do wybranego pliku. Funkcja saveImageMessage wykonuje następujące czynności:

1. Tworzy „zastępczą” wiadomość czatu w kanale czatu, dzięki czemu użytkownicy widzą animację „Ładowanie” podczas przesyłania obrazu.
2. Przesyła plik obrazu do Cloud Storage do tej ścieżki: /<uid>/<file_name>
3. Generuje publicznie czytelny adres URL pliku obrazu.
4. Aktualizuje wiadomość na czacie o adres URL nowo przesłanego pliku obrazu zamiast tymczasowego ładowania obrazu.

Teraz dodasz funkcję wysyłania obrazu:

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

indeks.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You 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);
  }
}

Przetestuj wysyłanie obrazów

1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase emulators:start w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z http://localhost:5000 , a następnie otwórz ją w przeglądarce.
2. Po zalogowaniu 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 .
3. W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem:

Jeśli spróbujesz dodać obraz, gdy nie jesteś zalogowany, powinien zostać wyświetlony komunikat o błędzie z informacją, że musisz się zalogować, aby dodać obrazy.

12. Pokaż powiadomienia

Teraz dodasz obsługę powiadomień przeglądarki. Aplikacja powiadomi użytkowników, gdy na czacie zostaną opublikowane nowe wiadomości. Firebase Cloud Messaging (FCM) to wieloplatformowe rozwiązanie do przesyłania wiadomości, które umożliwia niezawodne dostarczanie wiadomości i powiadomień bez żadnych kosztów.

Dodaj pracownika usługi FCM

Aplikacja internetowa potrzebuje pracownika usługi , który będzie odbierał i wyświetlał powiadomienia internetowe.

Dostawca wiadomości powinien być już skonfigurowany podczas dodawania AngularFire. Upewnij się, że w sekcji importu pliku /angularfire-start/src/app/app.module.ts istnieje następujący kod

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

app/app.module.ts

Pracownik serwisu musi po prostu załadować i zainicjować SDK Firebase Cloud Messaging, który zajmie się wyświetlaniem powiadomień.

Uzyskaj tokeny urządzeń FCM

Po włączeniu powiadomień na urządzeniu lub w przeglądarce otrzymasz token urządzenia . Ten 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 . Tam pobierzesz token urządzenia FCM z przeglądarki i zapiszesz go w Cloud Firestore.

chat.service.ts

2. Znajdź funkcję saveMessagingDeviceToken .
3. Zastąp całą funkcję następującym 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 początkowo nie będzie działał. Aby Twoja aplikacja mogła pobrać token urządzenia, użytkownik musi przyznać Twojej aplikacji uprawnienia do wyświetlania powiadomień (kolejny krok laboratorium kodu).

Poproś o uprawnienia do wyświetlania powiadomień

Jeśli użytkownik nie przyznał jeszcze Twojej aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W takim przypadku wywołujesz metodę requestPermission() , która wyświetli okno dialogowe przeglądarki z pytaniem o to pozwolenie ( w obsługiwanych przeglądarkach ).

1. Wróć do pliku src/app/services/chat.service.ts .
2. Znajdź funkcję requestNotificationsPermissions .
3. Zastąp całą funkcję następującym 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.');
    }
}

Zdobądź token urządzenia

1. Jeśli Twoja aplikacja jest nadal udostępniana, odśwież ją w przeglądarce. W przeciwnym razie uruchom firebase emulators:start w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z http://localhost:5000 , a następnie otwórz ją w przeglądarce.
2. Po zalogowaniu powinno pojawić się okno uprawnień do powiadomień:
3. Kliknij Zezwól .
4. Otwórz konsolę JavaScript swojej przeglądarki. Powinien zostać wyświetlony następujący komunikat: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. Skopiuj token urządzenia. Będziesz go potrzebować do następnego etapu laboratorium kodów.

Wyślij powiadomienie na swoje 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. Wprowadź tytuł powiadomienia i tekst powiadomienia.
4. Po prawej stronie ekranu kliknij „wyślij wiadomość testową”
5. Wprowadź token urządzenia, który skopiowałeś z konsoli JavaScript swojej przeglądarki, a następnie kliknij znak plus („+”)
6. Kliknij „przetestuj”

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

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

13. Zasady bezpieczeństwa Cloud Firestore

Wyświetl reguły bezpieczeństwa bazy danych

Cloud Firestore używa określonego języka reguł do definiowania praw dostępu, bezpieczeństwa i sprawdzania poprawności danych.

Podczas konfigurowania projektu Firebase na początku tego laboratorium kodowania zdecydowałeś się użyć domyślnych reguł bezpieczeństwa „Tryb testowy”, aby nie ograniczać 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.

W tej chwili powinieneś zobaczyć domyślne reguły, które nie ograniczają dostępu do datastore. Oznacza to, że każdy użytkownik może odczytywać i zapisywać dowolne kolekcje w magazynie danych.

rules_version = '2';

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

Zaktualizujesz reguły, aby wprowadzić ograniczenia, korzystając z następujących reguł:

sklep.reguły

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 bezpieczeństwa powinny automatycznie zaktualizować się w twoim pakiecie emulatorów.

Wyświetl reguły bezpieczeństwa Cloud Storage

Cloud Storage for Firebase używa określonego języka reguł do definiowania praw dostępu, bezpieczeństwa i sprawdzania poprawności danych.

Podczas konfigurowania projektu Firebase na początku tego laboratorium kodowania wybrałeś domyślną regułę bezpieczeństwa Cloud Storage, która zezwala tylko uwierzytelnionym użytkownikom na korzystanie z Cloud Storage. W konsoli Firebase na karcie Reguły w sekcji Pamięć możesz wyświetlać i modyfikować reguły. Powinna zostać wyświetlona reguła domyślna, która umożliwia każdemu zalogowanemu użytkownikowi odczytywanie i zapisywanie dowolnych plików w zasobniku na dane.

rules_version = '2';

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

Zaktualizujesz reguły, aby:

• Zezwalaj każdemu użytkownikowi na zapisywanie tylko do jego własnych folderów
• Zezwól każdemu na odczyt z Cloud Storage
• Upewnij się, że przesłane pliki to obrazy
• Ogranicz rozmiar obrazów, które można przesyłać, do maksymalnie 5 MB

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

przechowywanie.reguły

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

14. Wdróż swoją aplikację za pomocą Hostingu Firebase

Firebase oferuje usługę hostingową do obsługi Twoich zasobów i aplikacji internetowych. Możesz wdrożyć swoje pliki w Firebase Hosting za pomocą Firebase CLI. Przed wdrożeniem musisz określić w pliku firebase.json , które pliki lokalne mają zostać wdrożone. W przypadku tego laboratorium kodowania już to zrobiłeś, ponieważ ten krok był wymagany do udostępnienia naszych plików podczas tego modułu. Ustawienia hostingu są określone w atrybucie hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Te ustawienia informują interfejs wiersza polecenia, że ​​chcesz wdrożyć wszystkie pliki w katalogu ./public ( "public": "./public" ).

1. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu angularfire-start Twojej aplikacji.
2. Wdróż swoje pliki w projekcie Firebase, uruchamiając następujące polecenie:

ng deploy

Następnie wybierz opcję Firebase i postępuj zgodnie z monitami w wierszu poleceń.

3. Konsola powinna wyświetlić następujące informacje:

=== Deploying to 'friendlychat-1234'...

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

✔  Deploy complete!

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

4. Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana w globalnej sieci CDN przy użyciu Hostingu Firebase w dwóch Twoich własnych subdomenach Firebase:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

Alternatywnie możesz uruchomić firebase open hosting:site w wierszu poleceń.

Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o tym, jak działa Firebase Hosting .

Przejdź do sekcji Hosting konsoli Firebase swojego projektu, aby wyświetlić przydatne informacje i narzędzia dotyczące hostingu, w tym historię wdrożeń, funkcję przywracania poprzednich wersji aplikacji oraz przepływ pracy w celu skonfigurowania domeny niestandardowej.

15. Gratulacje!

Użyłeś Firebase do zbudowania aplikacji internetowej do czatowania w czasie rzeczywistym!

Co omówiłeś

• Uwierzytelnianie Firebase
• Cloud Firestore
• Firebase SDK do przechowywania w chmurze
• Przesyłanie wiadomości w chmurze Firebase
• Monitorowanie wydajności Firebase
• Hosting Firebase

Następne kroki

Ucz się więcej

• firebase.google.com