Szybko dodaj nowe funkcje do swojej aplikacji internetowej dzięki rozszerzeniom Firebase

1. Wstęp

Cele

Podczas tych zajęć z programowania dodasz funkcjonalność do aplikacji w sklepie internetowym za pomocą rozszerzeń Firebase . Dzięki tym ćwiczeniom z programowania zrozumiesz, jak rozszerzenia mogą pomóc Ci spędzać mniej czasu na zadaniach związanych z tworzeniem aplikacji i zarządzaniem.

Co zbudujesz

Podczas tych zajęć z programowania dodasz następujące funkcje do aplikacji internetowej w witrynie Marketplace:

• Szybciej ładuj obrazy, aby zwiększyć retencję użytkowników
• Ogranicz wpisy w swojej bazie danych, aby poprawić wydajność i obniżyć rachunki
• Wdrożyć automatyczne usuwanie starych danych użytkownika, aby zwiększyć ochronę danych użytkownika

Czego się dowiesz

• Jak odkryć rozszerzenia dla typowych przypadków użycia
• Jak zainstalować i skonfigurować rozszerzenie w swoim projekcie
• Jak utrzymywać (monitorować, aktualizować i odinstalowywać) rozszerzenia w projekcie

To ćwiczenie z programowania koncentruje się na rozszerzeniach Firebase. Aby uzyskać szczegółowe informacje na temat innych produktów Firebase wspomnianych w tym ćwiczeniu z programowania, zapoznaj się z dokumentacją Firebase i innymi ćwiczeniami z programowania .

Co będziesz potrzebował

• Komputer z zainstalowaną nowoczesną przeglądarką internetową (zalecany Chrome)
• Konto Google

2. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

1. W konsoli Firebase kliknij Dodaj projekt i nadaj projektowi Firebase nazwę FriendlyMarket .
2. Kliknij opcje tworzenia projektu. Zaakceptuj warunki Firebase. Pomiń konfigurowanie Google Analytics, ponieważ nie będziesz używać Analytics w tej aplikacji.
3. Poczekaj na udostępnienie projektu i kliknij Kontynuuj .

Aplikacja, którą utworzysz, korzysta z kilku produktów Firebase dostępnych dla aplikacji internetowych:

• Uwierzytelnianie Firebase umożliwiające łatwą identyfikację użytkowników
• Baza danych Firebase Realtime do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o aktualizacjach danych
• Cloud Storage dla Firebase do zapisywania obrazów w chmurze

Teraz włączysz i skonfigurujesz te produkty Firebase za pomocą konsoli Firebase.

Włącz logowanie e-mailem

Chociaż uwierzytelnianie nie jest głównym tematem tego ćwiczenia z programowania, ważne jest, aby mieć jakąś formę uwierzytelniania w aplikacji, aby jednoznacznie identyfikować każdego, kto z niej korzysta. Będziesz korzystać z logowania e-mailowego.

1. W konsoli Firebase kliknij opcję Programuj w lewym panelu.
2. Kliknij opcję Uwierzytelnianie , a następnie kliknij zakładkę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do zakładki Metoda logowania ).
3. Kliknij opcję E-mail/hasło na liście dostawców logowania , ustaw przełącznik Włącz w pozycji włączonej, a następnie kliknij przycisk Zapisz .

Włącz bazę danych czasu rzeczywistego

Aplikacja korzysta z bazy danych Firebase Realtime Database do zapisywania przedmiotów na sprzedaż.

1. W sekcji Programowanie w lewym panelu konsoli Firebase kliknij Baza danych .
2. Przewiń stronę w dół obok panelu Cloud Firestore i kliknij Utwórz bazę danych w panelu Baza danych czasu rzeczywistego .

3. Wybierz opcję Uruchom w trybie zablokowanym , a następnie kliknij opcję Włącz .

Ustaw zasady bezpieczeństwa

Teraz ustawisz reguły bezpieczeństwa potrzebne dla tej aplikacji. Oto kilka podstawowych przykładowych reguł pomagających zabezpieczyć aplikację. Reguły te pozwalają każdemu przeglądać przedmioty na sprzedaż, ale pozwalają tylko zalogowanym użytkownikom na wykonywanie innych operacji odczytu i zapisu. Nie przejmuj się szczegółami tych zasad; wystarczy je skopiować i wkleić, aby uruchomić aplikację.

1. W górnej części panelu Baza danych czasu rzeczywistego kliknij kartę Reguły .

2. Skopiuj i wklej następujący zestaw reguł w polu reguł na karcie Reguły :

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

3. Kliknij opcję Publikuj .

Włącz przechowywanie w chmurze

Aplikacja korzysta z Cloud Storage dla Firebase do zapisywania obrazów przedmiotów na sprzedaż.

1. W sekcji Programowanie w lewym panelu konsoli Firebase kliknij Pamięć masowa .
2. Kliknij Rozpocznij .

3. Zaakceptuj ustawienia domyślne dotyczące tworzenia domyślnego zasobnika pamięci (kliknij Dalej , zachowaj domyślną lokalizację i kliknij Gotowe ).

Teraz ustawisz reguły bezpieczeństwa potrzebne dla tej aplikacji. Reguły te pozwalają tylko uwierzytelnionym użytkownikom publikować nowe obrazy, ale pozwalają każdemu zobaczyć obraz wystawionego przedmiotu.

1. W górnej części panelu Magazyn kliknij kartę Reguły .

2. Skopiuj i wklej następujący zestaw reguł w polu reguł na karcie Reguły :

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

3. Kliknij opcję Publikuj .

3. Uruchom przykładową aplikację

Rozwiń projekt StackBlitz

Podczas tych zajęć z programowania będziesz budować i wdrażać aplikację za pomocą StackBlitz , edytora online, w którym zintegrowanych jest kilka przepływów pracy Firebase. Stackblitz nie wymaga instalacji oprogramowania ani specjalnego konta StackBlitz.

StackBlitz pozwala udostępniać projekty innym. Inne osoby posiadające adres URL Twojego projektu StackBlitz mogą zobaczyć Twój kod i rozwidlić Twój projekt, ale nie mogą edytować Twojego projektu StackBlitz.

1. Przejdź do tego adresu URL, aby uzyskać kod początkowy: https://stackblitz.com/edit/Friendlymarket-codelab .
2. Na górze strony StackBlitz kliknij Widelec .

Masz teraz kopię kodu startowego jako swój własny projekt StackBlitz. Ponieważ się nie zalogowałeś, Twoje „konto” nazywa się @anonymous , ale nie ma w tym nic złego. Projekt ma unikalną nazwę i unikalny adres URL. Wszystkie Twoje pliki i zmiany są zapisywane w tym projekcie StackBlitz.

Dodaj aplikację internetową Firebase do projektu

1. W StackBlitz wyświetl plik src/firebase-config.js . W tym miejscu dodasz obiekt konfiguracyjny Firebase.
2. Wróć do konsoli Firebase i przejdź do strony przeglądu projektu, klikając Przegląd projektu w lewym górnym rogu.
3. Na środku strony przeglądu projektu kliknij ikonę sieci aby utworzyć nową aplikację internetową Firebase.
4. Zarejestruj aplikację pod pseudonimem FriendlyMarket Codelab .
5. W przypadku tych zajęć z programowania nie zaznaczaj pola obok Skonfiguruj także hosting Firebase dla tej aplikacji . Zamiast tego będziesz używać panelu podglądu StackBlitz.
6. Kliknij opcję Zarejestruj aplikację .
7. Skopiuj obiekt konfiguracji Firebase swojej aplikacji do schowka. Nie kopiuj tagów <script> . Uwaga: jeśli chcesz później znaleźć konfigurację, postępuj zgodnie z instrukcjami tutaj .

8. Kliknij Kontynuuj, aby skorzystać z konsoli .

Dodaj konfigurację swojego projektu do swojej aplikacji:

1. Wróć do StackBlitz i przejdź do pliku src/firebase-config.js .
2. Wklej fragment konfiguracji do pliku. Gdy to zrobisz, powinno to wyglądać tak (ale z wartościami własnego projektu w obiekcie konfiguracyjnym):

Jaki jest punkt wyjścia dla tej aplikacji?

Spójrz na interaktywny podgląd po prawej stronie ekranu StackBlitz:

Te ćwiczenia z programowania rozpoczną Cię od kodu podstawowej aplikacji z Marketplace. Każdy użytkownik może wyświetlić listę przedmiotów na sprzedaż i kliknąć łącze, aby wyświetlić stronę ze szczegółami przedmiotu. Jeśli użytkownik jest zalogowany, zobaczy dane kontaktowe sprzedającego, dzięki czemu będzie mógł negocjować cenę i kupić przedmiot.

Wypróbuj aplikację:

1. Zaloguj się za pomocą przycisku u góry ekranu głównego. Możesz użyć fałszywego adresu e-mail, nazwy i hasła.
2. Kliknij przycisk Sprzedaj coś w prawym dolnym rogu, aby utworzyć aukcję.
3. W polu Tytuł wpisz Xylophone .
4. W polu Cena wywoławcza wpisz 50 .
5. W polu Opis przedmiotu wprowadź następujące informacje: This high quality xylophone can be used to play music.
6. Pobierz ten obraz ksylofonu na swój komputer i prześlij go za pomocą przycisku OBRAZ SWOJEGO PRZEDMIOTU .

file_download Pobierz obraz

7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj .
8. Znajdź swój nowy wpis. Kliknij swój przedmiot, aby wyświetlić jego ekran szczegółów, a następnie rozwiń panel informacji kontaktowych sprzedającego .
9. Wróć do konsoli Firebase. W panelu bazy danych zobaczysz teraz wpis dotyczący przedmiotu, który zamieściłeś w węźle forsale . W panelu Storage znajdziesz także przesłany obraz w ścieżce friendlymarket .

4. Znajdź i zainstaluj rozszerzenie

Problem

Po przeprowadzeniu badań użytkowników na temat Twojej aplikacji okazuje się, że większość użytkowników odwiedza Twoją witrynę ze smartfonów, a nie z komputerów stacjonarnych. Jednak Twoje statystyki pokazują również, że użytkownicy mobilni mają tendencję do opuszczania Twojej witryny („rezygnacji”) już po kilku sekundach.

Ciekawe, testujesz swoją witrynę z szybkością połączenia mobilnego. (Dowiedz się, jak to zrobić tutaj .) Zauważasz, że obrazy ładują się bardzo długo i w ogóle nie są zapisywane w pamięci podręcznej przeglądarki. Tak długi czas ładowania występuje przy każdym odsłonięciu strony!

Rozwiązanie

Po przeczytaniu, jak optymalizować obrazy , decydujesz się wykonać dwa kroki, aby poprawić wydajność ładowania obrazów:

• Kompresuj obrazy. Nawet telefony komórkowe wykonują zdjęcia w znacznie wyższej rozdzielczości, niż jest to konieczne na potrzeby tej aplikacji. Zmniejszenie rozmiaru pliku przyspieszy czas ładowania bez zauważalnego spadku rozdzielczości w aplikacji.
• Buforowanie . Domyślnie obiekty Cloud Storage mają nagłówki informujące przeglądarki, aby nie buforowały obrazów, co oznacza, że ​​przeglądarka użytkownika będzie wielokrotnie pobierać ten sam obraz! Na szczęście możesz zmienić te nagłówki, aby umożliwić buforowanie. Zarówno pakiet SDK Cloud Storage po stronie klienta, jak i pakiet SDK administratora Firebase umożliwiają ustawienie tych nagłówków.

Aby skompresować obrazy, musisz albo ograniczyć jakość przesyłania, albo wdrożyć proces po stronie serwera, który zmienia rozmiar obrazów. Rozważmy kompromisy:

• Strona klienta . W przypadku procesu po stronie klienta można po prostu ograniczyć rozmiar pliku przesyłanych obrazów. Oznacza to, że nie musisz pisać ani utrzymywać żadnej nowej logiki serwera. Oznacza to jednak również, że sprzedawcy muszą dowiedzieć się, jak zmienić rozmiar własnych zdjęć, co stanowi bolesną i nieintuicyjną przeszkodę w tworzeniu nowej oferty.
• Po stronie serwera . Jeśli korzystasz z Cloud Functions dla Firebase, możesz uruchomić funkcję , która automatycznie zmienia rozmiar obrazu po przesłaniu. Oznacza to, że sprzedawcy mogą przesyłać obrazy o dowolnym rozmiarze (nie wymagają one dodatkowej pracy), a funkcja backendu może bezproblemowo zmieniać rozmiar obrazu. Dostępna jest nawet próbka tej funkcji!

Wygląda na to, że najlepszym rozwiązaniem będzie po stronie serwera. Ale ten pomysł nadal obejmuje klonowanie próbki , postępując zgodnie z instrukcjami konfiguracji , a następnie wdrażanie funkcji za pomocą interfejsu wiersza polecenia Firebase. Zmiana rozmiaru obrazów wydaje się częstym przypadkiem użycia. Czy nie ma prostszego rozwiązania?

Łatwiejsze rozwiązanie

Masz szczęście. Istnieje prostsze rozwiązanie: rozszerzenia Firebase! Sprawdźmy katalog dostępnych rozszerzeń na stronie Firebase .

Spójrz na to! Istnieje rozszerzenie o nazwie „Zmień rozmiar obrazów”. Wygląda obiecująco.

Użyjmy tego rozszerzenia w Twojej aplikacji!

Zainstaluj rozszerzenie

1. Kliknij Zobacz szczegóły , aby wyświetlić więcej informacji o tym rozszerzeniu. W sekcji Co możesz skonfigurować rozszerzenie umożliwia ustawienie wymiarów, do których chcesz zmienić rozmiar, a nawet ustawienie nagłówka pamięci podręcznej. Doskonały!
2. Kliknij przycisk Zainstaluj w konsoli na stronie szczegółów rozszerzenia . Zostaniesz przeniesiony na stronę konsoli Firebase, która zawiera listę wszystkich Twoich projektów.
3. Wybierz projekt FriendlyMarket utworzony na potrzeby tego ćwiczenia z programowania.
4. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfiguruj rozszerzenie . Instrukcje pokażą podstawowe podsumowanie rozszerzenia, a także wszelkie zasoby, które utworzy, i wymagane role dostępu.
5. W polu ** Cache-Control **nagłówek obrazów o zmienionym rozmiarze wpisz:

public, max-age=31536000

6. Pozostałe parametry pozostaw na wartościach domyślnych.
7. Kliknij opcję Zainstaluj rozszerzenie .

Podczas oczekiwania na zakończenie instalacji...

Instalacja za pomocą interfejsu wiersza poleceń Firebase

Jeśli wolisz narzędzia wiersza poleceń, rozszerzenia można instalować i zarządzać nimi również za pomocą interfejsu CLI Firebase! Wystarczy użyć polecenia firebase ext , dostępnego w najnowszej wersji CLI. Więcej informacji można znaleźć tutaj .

(Opcjonalnie) Dowiedz się więcej o nagłówkach Cache-Control

Wartość nagłówka Cache-Control public, max-age=31536000 oznacza, że ​​obraz będzie buforowany przez maksymalnie 1 rok. Aby dowiedzieć się więcej o nagłówku Cache-Control, zapoznaj się z tą dokumentacją .

Zaktualizuj kod klienta

Zainstalowane rozszerzenie zapisuje obraz o zmienionym rozmiarze w tym samym zasobniku, co obraz oryginalny. Obraz o zmienionym rozmiarze ma skonfigurowane wymiary dołączone do nazwy pliku. Tak więc, jeśli oryginalna ścieżka pliku wyglądała tak: friendlymarket/user1234-car.png , ścieżka pliku obrazu o zmienionym rozmiarze będzie wyglądać tak jak friendlymarket/user1234-car_200x200.png .

Zaktualizujmy aplikację, aby pobierała obrazy o zmienionym rozmiarze zamiast obrazów w pełnym rozmiarze.

1. W StackBlitz otwórz plik src/firebase-refs.js .
2. Zastąp istniejącą funkcję getImageRef następującym kodem, aby utworzyć odnośnik dla obrazu o zmienionym rozmiarze:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Przetestuj to

Ponieważ to rozszerzenie monitoruje przesyłanie nowych obrazów, rozmiar istniejącego obrazu nie zostanie zmieniony.

Utwórz nowy post, aby zobaczyć rozszerzenie w działaniu:

1. Kliknij Przyjazny Rynek na górnym pasku aplikacji, aby przejść do ekranu głównego.
2. Kliknij przycisk Sprzedaj coś w prawym dolnym rogu aplikacji, aby utworzyć ofertę.
3. W polu Tytuł wpisz Coffee
4. W polu Cena wywoławcza wpisz 1
5. W polu Opis przedmiotu wprowadź następujące informacje: Selling one cafe latte. It has foam art in the shape of a bear .
6. Pobierz ten obraz filiżanki kawy na swój komputer i prześlij go za pomocą przycisku OBRAZ SWOJEGO PRZEDMIOTU . file_download Pobierz obraz
7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj . Lista kaw pojawi się pod ksylofonem!
8. W panelu Funkcje w konsoli Firebase kliknij kartę Dzienniki . Powinieneś zobaczyć logi z funkcji, które pokazują, że została wykonana.

9. Przejdź do panelu Storage , aby zobaczyć zarówno oryginalny obraz kawy, jak i wersję o zmienionym rozmiarze na ścieżce friendlymarket .
10. W okienku podglądu StackBlitz załaduj ponownie ekran główny aplikacji kilka razy. Powinieneś zauważyć, że obraz kawy ładuje się znacznie szybciej niż obraz ksylofonu.

Obraz ładuje się szybciej przy pierwszym ładowaniu strony, ponieważ jest mniejszy, a przy kolejnych odświeżeniach strony ładuje się z pamięci podręcznej przeglądarki zamiast wyzwalać żądanie sieciowe.

5. Skonfiguruj ponownie rozszerzenie

Problem

Twoja aplikacja automatycznie zapisuje wersje robocze aukcji sprzedawcy. Twoi użytkownicy lubią tę funkcję, ale Twoje statystyki są nieco niepokojące. Z Twoich raportów wynika, że ​​tylko około 10% wersji roboczych jest faktycznie publikowanych, a pozostałe 90% po prostu zajmuje miejsce w Twojej bazie danych.

Rozwiązanie

Po kilku obliczeniach z tyłu koperty zdajesz sobie sprawę, że w danym momencie wystarczy zapisać tylko około pięciu wersji roboczych.

Pamiętasz ten katalog rozszerzeń Firebase? Być może istnieje już rozwiązanie tej sytuacji. Zainstalujmy rozszerzenie Limit węzłów podrzędnych , aby automatycznie utrzymywać liczbę zapisanych wersji roboczych na poziomie pięciu lub mniej. Rozszerzenie usunie najstarszą wersję roboczą za każdym razem, gdy zostanie dodana nowa wersja robocza.

1. Kliknij przycisk Instaluj na stronie szczegółów rozszerzenia .
2. Wybierz projekt Firebase, którego używasz w aplikacji internetowej w witrynie Marketplace.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfiguruj rozszerzenie .
4. W polu Ścieżka bazy danych czasu rzeczywistego wpisz drafts . Jest to ścieżka w bazie danych, gdzie zapisywane są wersje robocze.
5. W polu Maksymalna liczba zachowanych węzłów wpisz 5 . Oznacza to, że dla każdej aukcji każdego przedmiotu zostanie zapisanych pięć wersji roboczych, a jeśli zostanie dodana kolejna, najstarsza wersja robocza zostanie automatycznie usunięta.
6. Kliknij opcję Zainstaluj rozszerzenie .

Podczas oczekiwania na zakończenie instalacji...

Rozszerzenia monitorowania

Podczas instalowania rozszerzenia proces tworzy kilka funkcji. Możesz sprawdzić, jak często te funkcje są uruchamiane lub wyświetlić dzienniki i poziomy błędów. Aby uzyskać szczegółowe informacje na temat monitorowania rozszerzenia, zobacz Zarządzanie zainstalowanymi rozszerzeniami . Postępuj zgodnie ze wskazówkami zawartymi w dokumentacji, aby wyświetlić funkcje utworzone przez rozszerzenie Resize Images w poprzednim kroku.

Odinstalowywanie rozszerzeń

Aby usunąć rozszerzenie z projektu, możesz ulec pokusie usunięcia poszczególnych funkcji tworzonych przez rozszerzenie, ale może to prowadzić do nieoczekiwanego zachowania, ponieważ jedno rozszerzenie może utworzyć wiele funkcji. Dowiedz się, jak odinstalować rozszerzenie w dokumentacji.

Odinstalowanie usuwa wszystkie zasoby (takie jak funkcje rozszerzenia) i konto usługi utworzone dla tej instancji rozszerzenia. Jednakże wszelkie artefakty utworzone przez rozszerzenie (takie jak obrazy o zmienionym rozmiarze) pozostaną w projekcie po odinstalowaniu rozszerzenia.

Instalowanie wielu kopii rozszerzenia w jednym projekcie

Nie jesteś ograniczony do zainstalowania pojedynczej instancji danego rozszerzenia w projekcie. Jeśli chcesz ograniczyć wpisy w innej ścieżce, możesz zainstalować inną instancję tego rozszerzenia. Jednak na potrzeby tego ćwiczenia z programowania rozszerzenie zainstalujesz tylko raz.

Zobacz to w akcji

1. Upewnij się, że jesteś zalogowany na konto, którego użyłeś do opublikowania ksylofonu lub latte
2. Wygeneruj kilka wersji roboczych:
3. Kliknij przycisk Sprzedaj coś w prawym dolnym rogu aplikacji
4. Zmień tytuł na „Draft 1”.
5. Przewiń w dół do sekcji Wersje robocze i wyświetl liczbę wersji roboczych. Powinny być co najmniej dwa.
6. Kliknij przycisk PRZYJAZNY RYNEK na górnym pasku aplikacji. Dzięki temu będziesz mieć zapisaną wersję roboczą, ale nie będziesz musiał jej publikować.
7. Powtórz dla „Wersja robocza 2”, „Wersja robocza 3” i tak dalej, aż do „Wersja robocza 6”.
8. Kiedy tworzysz „Wersję roboczą 6”, zauważ, że „Wersja robocza 1 znika z sekcji Wersje robocze .
9. Podobnie jak w przypadku rozszerzenia Zmień rozmiar obrazów, możesz sprawdzić dzienniki funkcji, aby zobaczyć, jakie funkcje zostały uruchomione.

Ups, limit wersji roboczych jest za mały

Twój zespół obsługi klienta skontaktuje się z Tobą i poinformuje Cię, że niektórzy z Twoich najbardziej produktywnych sprzedawców skarżą się, że ich wersje robocze są usuwane, zanim będą mogły je opublikować. Sprawdzasz obliczenia ze swoim kolegą z drużyny i zdajesz sobie sprawę, że Twoje obliczenia zawiniły 10 000 razy!

Jak możesz to naprawić? Skonfigurujmy ponownie zainstalowane rozszerzenie!

1. W lewym panelu konsoli Firebase kliknij Rozszerzenia .
2. Na karcie zainstalowanego rozszerzenia kliknij Zarządzaj .
3. W prawym górnym rogu kliknij opcję Skonfiguruj ponownie rozszerzenie .
4. Zmień maksymalną liczbę węzłów, aby zachować ją na 50000 .
5. Kliknij Zapisz .

I to wszystko, co musisz zrobić! W czasie, gdy rozszerzenie będzie aktualizowane, możesz porozmawiać ze swoim zespołem pomocy technicznej i poinformować go, że poprawka jest już wdrażana.

6. Automatycznie usuwaj dane użytkownika

Problem

Twój zespół obsługi klienta ponownie się z Tobą skontaktował. Sprzedawcy, którzy usunęli swoje konta, nadal otrzymują e-maile od innych użytkowników i są wściekli! Sprzedawcy ci spodziewali się, że ich adresy e-mail zostaną usunięte z Twoich systemów, gdy usuną swoje konta.

Na razie zespół pomocy usuwał dane każdego użytkownika ręcznie, ale musi być lepszy sposób! Myślisz o tym i rozważasz napisanie własnego zadania wsadowego, które działa okresowo i usuwa adresy e-mail z usuniętych kont. Jednak usuwanie danych użytkownika wydaje się dość powszechnym problemem. Być może rozszerzenia Firebase również mogą pomóc w rozwiązaniu tego problemu.

Rozwiązanie

Skonfigurujesz rozszerzenie Usuń dane użytkownika , aby automatycznie usuwało węzeł users/uid w bazie danych, gdy użytkownik usunie swoje konto.

1. Kliknij przycisk Instaluj na stronie szczegółów rozszerzenia .
2. Wybierz projekt Firebase, którego używasz w aplikacji internetowej w witrynie Marketplace.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfiguruj rozszerzenie .
4. W polu Ścieżki bazy danych czasu rzeczywistego wpisz sellers/{UID} . Część sellers to węzeł, którego elementy podrzędne zawierają adresy e-mail użytkowników, a {UID} jest symbolem wieloznacznym. Dzięki tej konfiguracji rozszerzenie będzie wiedziało, że gdy użytkownik o UID 1234 usunie swoje konto, rozszerzenie powinno usunąć z bazy danych sellers/1234 .
5. Kliknij opcję Zainstaluj rozszerzenie .

Podczas oczekiwania na zakończenie instalacji...

Porozmawiajmy o możliwości dostosowania

Podczas tych zajęć z programowania przekonałeś się, że rozszerzenia Firebase mogą pomóc w rozwiązywaniu typowych przypadków użycia i że rozszerzenia można konfigurować tak, aby odpowiadały potrzebom Twojej aplikacji.

Rozszerzenia nie rozwiążą jednak każdego problemu, czego dobrym przykładem jest kwestia usuwania danych użytkownika. Chociaż rozszerzenie Usuń dane użytkownika odpowiada na obecną skargę dotyczącą nadal ujawniania wiadomości e-mail po usunięciu konta przez użytkownika, rozszerzenie nie usunie wszystkiego. Na przykład lista przedmiotów jest nadal dostępna, a wszelkie obrazy w Cloud Storage również pozostaną. Rozszerzenie Usuń dane użytkownika pozwala nam skonfigurować ścieżkę Cloud Storage do usunięcia, ale ponieważ użytkownicy mogą przesyłać wiele różnych plików o wielu różnych nazwach, nie będzie można skonfigurować tego rozszerzenia tak, aby automatycznie usuwało te artefakty. W takich sytuacjach Cloud Functions dla Firebase może być lepszym rozwiązaniem, ponieważ umożliwia pisanie kodu specyficznego dla modelu danych Twojej aplikacji.

Rozszerzenia i rozliczenia

Korzystanie z rozszerzeń Firebase jest bezpłatne (opłata jest naliczana tylko za wykorzystywane zasoby), ale niektóre zasoby wymagane przez rozszerzenie mogą wymagać rozliczenia. Te ćwiczenia z programowania zaprojektowano tak, aby można je było ukończyć bez konta rozliczeniowego. Jednak skonfigurowanie planu Flame lub Blaze odblokowuje wiele naprawdę interesujących rozszerzeń Firebase.

Możesz na przykład skracać adresy URL , uruchamiać pocztę e-mail , eksportować zbiory do BigQuery i nie tylko! Sprawdź pełny katalog rozszerzeń tutaj .

Jeśli jest jakieś rozszerzenie, które chciałbyś mieć, ale nie jest ono obecnie dostępne, chętnie o nim usłyszymy! Złóż prośbę o dodanie funkcji do pomocy technicznej Firebase , aby zasugerować nowe rozszerzenie.

Zobacz to w akcji

Po zakończeniu instalacji rozszerzenia usuń użytkownika i zobacz, co się stanie:

1. W konsoli Firebase przejdź do pulpitu nawigacyjnego Bazy danych czasu rzeczywistego .
2. Rozwiń węzeł sellers .
3. Informacje o każdym sprzedającym są zapisywane w jego UID użytkownika. Wybierz UID użytkownika.
4. W konsoli Firebase przejdź do panelu uwierzytelniania i znajdź identyfikator UID użytkownika.
5. Rozwiń menu po prawej stronie identyfikatora UID i wybierz opcję Usuń konto .

6. Wróć do pulpitu nawigacyjnego Bazy danych czasu rzeczywistego . Informacje o sprzedającym znikną!

7. Gratulacje!

Mimo że w ramach tych zajęć z programowania nie napisałeś zbyt wiele kodu, dodałeś ważne funkcje do swojej aplikacji w witrynie Marketplace.

Dowiedziałeś się, jak wykrywać, konfigurować, instalować i ponownie konfigurować rozszerzenia. Ponadto dowiedziałeś się, jak monitorować zainstalowane rozszerzenia i jak je odinstalować, jeśli zajdzie taka potrzeba.

Co dalej?

Sprawdź niektóre z tych innych rozszerzeń:

• Tłumaczenie ciągów tekstowych w Cloud Firestore (wymagane konto rozliczeniowe)
• Dodaj nowych użytkowników do list e-mailowych Mailchimp (wymagane konto rozliczeniowe)
• Skróć adresy URL (wymagane konto rozliczeniowe)

Potrzebujesz więcej niestandardowego kodu po stronie serwera?

• Zapoznaj się z ćwiczeniami z programowania Cloud Functions dla Firebase

Inne przydatne dokumenty

Zarządzanie rozszerzeniami:

• Spróbuj zarządzać rozszerzeniami za pomocą interfejsu CLI Firebase
• Ustaw alerty budżetowe
• Sprawdź, jak często działa zainstalowane rozszerzenie
• Zaktualizuj zainstalowane rozszerzenie do nowej wersji
• Odinstaluj rozszerzenie

Poznanie drobniejszych szczegółów na temat rozszerzeń:

• Zobacz kod źródłowy i dokumentację każdego rozszerzenia w serwisie GitHub
• Dowiedz się o uprawnieniach i dostępie przyznanym rozszerzeniu