Szybko dodawaj nowe funkcje do aplikacji internetowej dzięki rozszerzeniom Firebase

1. Wprowadzenie

Cele

W tym ćwiczeniu z programowania dodasz funkcje do aplikacji na platformę handlową online za pomocą rozszerzeń Firebase. Z tego samouczka dowiesz się, jak rozszerzenia mogą pomóc Ci poświęcać mniej czasu na zadania związane z opracowywaniem aplikacji i zarządzaniem nią.

Co utworzysz

W tym ćwiczeniu dodasz do aplikacji internetowej platformy handlowej te funkcje:

• Szybsze wczytywanie obrazów w celu zwiększenia utrzymania użytkowników
• Ogranicz liczbę wpisów w bazie danych, aby zwiększyć wydajność i obniżyć rachunek
• Wdrażanie automatycznego usuwania starych danych użytkownika w celu zwiększenia ochrony danych użytkownika

Czego się nauczysz

• Jak odkrywać rozszerzenia w przypadku typowych zastosowań
• Instalowanie i konfigurowanie rozszerzenia w projekcie
• Jak utrzymywać rozszerzenia w projekcie (monitorować, aktualizować i odinstalowywać)

Ten codelab dotyczy rozszerzeń Firebase. Szczegółowe informacje o innych usługach Firebase wymienionych w tym ćwiczeniu znajdziesz w dokumentacji Firebase i innych ćwiczeniach.

Czego potrzebujesz

• Komputer z zainstalowaną nowoczesną przeglądarką (zalecamy Chrome).
• konto Google;

2. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase, korzystając ze swojego konta Google.
2. Kliknij przycisk, aby utworzyć nowy projekt, a potem wpisz jego nazwę (np. FriendlyMarket).
   
3. Kliknij Dalej.
4. Po wyświetleniu monitu przeczytaj i zaakceptuj warunki usługi Firebase, a potem kliknij Dalej.
5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”).
6. W tym samouczku nie potrzebujesz Google Analytics, więc wyłącz opcję Google Analytics.
7. Kliknij Utwórz projekt, poczekaj, aż projekt zostanie udostępniony, a następnie kliknij Dalej.

Aplikacja, którą utworzysz, będzie korzystać z kilku usług Firebase dostępnych w przypadku aplikacji internetowych:

• Uwierzytelnianie Firebase, aby łatwo identyfikować użytkowników.
• Baza danych czasu rzeczywistego Firebase do zapisywania danych strukturalnych w chmurze i otrzymywania natychmiastowych powiadomień o ich aktualizacji.
• Cloud Storage dla Firebase do zapisywania obrazów w chmurze.

Teraz włączysz i skonfigurujesz te usługi Firebase w konsoli Firebase.

Przejście na wyższy abonament Firebase

Aby korzystać z rozszerzeń Firebase i ich usług w chmurze oraz z Cloud Storage w Firebase, Twój projekt Firebase musi mieć abonament z opłatami według wykorzystania (Blaze), co oznacza, że musi być połączony z kontem rozliczeniowym Cloud.

• Konto rozliczeniowe Cloud wymaga formy płatności, np. karty kredytowej.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy możesz otrzymać środki w wysokości 300 USD i bezpłatne konto rozliczeniowe Cloud.
• Jeśli wykonujesz te ćwiczenia w ramach wydarzenia, zapytaj organizatora, czy są dostępne środki w Google Cloud.

Aby przenieść projekt na abonament Blaze:

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

Włącz logowanie przez e-maila

Chociaż uwierzytelnianie nie jest głównym tematem tego laboratorium, ważne jest, aby w aplikacji była jakaś forma uwierzytelniania, która umożliwia jednoznaczną identyfikację wszystkich użytkowników. Użyjesz logowania za pomocą adresu e-mail.

1. W konsoli Firebase w panelu po lewej stronie kliknij Tworzenie.
2. Kliknij Uwierzytelnianie, a następnie kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do karty Metoda logowania).
3. Na liście Dostawcy logowania kliknij E-mail/hasło, ustaw przełącznik Włącz w pozycji włączonej, a następnie kliknij Zapisz.

Włączanie Bazy danych czasu rzeczywistego

Aplikacja korzysta z Bazy danych czasu rzeczywistego Firebase do zapisywania przedmiotów na sprzedaż.

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie kliknij Baza danych czasu rzeczywistego.
2. Kliknij Utwórz bazę danych.
3. Wybierz lokalizację bazy danych i kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację, która jest blisko użytkowników.
4. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W kolejnych krokach tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć dane. Nierozpowszechniajani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa do bazy danych.
5. Kliknij Utwórz.

Ustawianie reguł zabezpieczeń dla bazy danych

Teraz skonfigurujesz reguły zabezpieczeń potrzebne w tej aplikacji. Oto kilka podstawowych przykładowych reguł, które pomogą Ci zabezpieczyć aplikację. Umożliwiają one każdemu wyświetlanie produktów na sprzedaż, ale tylko zalogowani użytkownicy mogą wykonywać inne odczyty i zapisy. Nie musisz się martwić szczegółami tych reguł. Wystarczy, że je skopiujesz i wkleisz, aby uruchomić aplikację.

1. U góry panelu Bazy danych w czasie rzeczywistym kliknij kartę Reguły.

2. Skopiuj i wklej ten 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 Opublikuj.

Konfigurowanie Cloud Storage dla Firebase

Aplikacja korzysta z Cloud Storage dla Firebase, aby zapisywać zdjęcia produktów na sprzedaż.

Aby skonfigurować Cloud Storage dla Firebase w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Storage.
2. Kliknij Rozpocznij.
3. Wybierz lokalizację domyślnego zasobnika Storage.
   Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu „Zawsze bezpłatny” w Google Cloud Storage. W przypadku zasobników w innych lokalizacjach obowiązuje cennik i wykorzystanie Google Cloud Storage.
4. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W kolejnych krokach tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć dane. Nieudostępniaj aplikacji publicznie bez dodania reguł bezpieczeństwa do zasobnika Storage.
5. Kliknij Utwórz.

Konfigurowanie reguł zabezpieczeń dla zasobnika Storage

Teraz skonfigurujesz reguły zabezpieczeń potrzebne tej aplikacji. Te reguły pozwalają tylko uwierzytelnionym użytkownikom publikować nowe obrazy, ale umożliwiają każdemu wyświetlanie obrazu dla wymienionego produktu.

1. U góry panelu Miejsce na dane kliknij kartę Reguły.

2. Skopiuj i wklej ten zestaw reguł w polu reguł na karcie Reguły:

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

3. Kliknij Opublikuj.

3. Uruchamianie przykładowej aplikacji

Rozwidlenie projektu StackBlitz

W tym laboratorium kodowania utworzysz i wdrożysz aplikację za pomocą StackBlitz, czyli edytora online, który ma zintegrowanych kilka przepływów pracy Firebase. Stackblitz nie wymaga instalacji oprogramowania ani specjalnego konta StackBlitz.

StackBlitz umożliwia udostępnianie projektów innym osobom. Inne osoby, które mają adres URL Twojego projektu StackBlitz, mogą zobaczyć Twój kod i utworzyć kopię projektu, ale nie mogą go edytować.

1. Aby uzyskać kod początkowy, otwórz ten adres URL: https://stackblitz.com/edit/friendlymarket-codelab.
2. U góry strony StackBlitz kliknij Fork (Rozwidlenie).

Masz teraz kopię kodu początkowego jako własny projekt StackBlitz. Ponieważ nie zalogowano się na konto, Twoje „konto” ma nazwę @anonymous, ale to nie problem. Projekt ma unikalną nazwę i unikalny adres URL. Wszystkie pliki i zmiany są zapisywane w tym projekcie StackBlitz.

Dodawanie aplikacji internetowej Firebase do projektu

1. W StackBlitz wyświetl plik src/firebase-config.js. W tym miejscu dodasz obiekt konfiguracji Firebase.
2. Wróć do konsoli Firebase i otwórz stronę przeglądu projektu, klikając Przegląd projektu w lewym górnym rogu.
3. Na środku strony przeglądu projektu kliknij ikonę internetu , aby utworzyć nową aplikację internetową Firebase.
4. Zarejestruj aplikację pod nazwą FriendlyMarket Codelab.
5. W tym samouczku nie zaznaczaj pola obok opcji Skonfiguruj również Hosting Firebase dla tej aplikacji. Zamiast tego użyjesz panelu podglądu StackBlitz.
6. Kliknij Zarejestruj aplikację.
7. Skopiuj do schowka obiekt konfigurujący Firebase w aplikacji. Nie kopiuj tagów <script>. Uwaga: jeśli później zechcesz znaleźć konfigurację, wykonaj czynności opisane tutaj.

8. Kliknij Przejdź do konsoli.

Dodaj konfigurację projektu do aplikacji:

1. Wróć do StackBlitz i otwórz plik src/firebase-config.js.
2. Wklej do pliku fragment konfiguracji. Po wykonaniu tej czynności powinna wyglądać tak (ale z wartościami Twojego projektu w obiekcie konfiguracji):

Od czego zaczyna się ta aplikacja?

Sprawdź interaktywny podgląd po prawej stronie ekranu StackBlitz:

W tym samouczku zaczniesz od kodu podstawowej aplikacji na platformę handlową. Każdy użytkownik może wyświetlić listę produktów na sprzedaż i kliknąć link, aby zobaczyć stronę ze szczegółami produktu. Jeśli użytkownik jest zalogowany, zobaczy dane kontaktowe sprzedawcy, aby móc negocjować cenę i kupić produkt.

Wypróbuj aplikację:

1. Zaloguj się, klikając przycisk u góry ekranu głównego. Możesz użyć fałszywego adresu e-mail, imienia i nazwiska oraz hasła.
2. Aby utworzyć ofertę, w prawym dolnym rogu kliknij przycisk Sprzedaj coś.
3. W polu Tytuł wpisz Xylophone.
4. W polu Cena wpisz 50.
5. W polu Opis produktu wpisz This high quality xylophone can be used to play music.
6. Pobierz ten obraz ksylofonu na komputer i prześlij go za pomocą przycisku ZDJĘCIE PRODUKTU.

file_downloadPobierz obraz

7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj.
8. Znajdź nową wizytówkę. Kliknij produkt, aby wyświetlić ekran szczegółów, a następnie rozwiń panel Dane kontaktowe sprzedawcy.
9. Wróć do konsoli Firebase. W panelu Baza danych zobaczysz teraz wpis dotyczący opublikowanego elementu w węźle forsale. W panelu Miejsce na dane znajdziesz też przesłany obraz w ścieżce friendlymarket.

4. Znajdowanie i instalowanie rozszerzenia

Problem

Po przeprowadzeniu badań użytkowników aplikacji okazuje się, że większość z nich odwiedza Twoją witrynę na smartfonie, a nie na komputerze. Statystyki pokazują jednak, że użytkownicy urządzeń mobilnych zwykle opuszczają Twoją witrynę („rezygnują”) po kilku sekundach.

Z ciekawości testujesz swoją witrynę przy różnych prędkościach połączenia mobilnego. (Dowiedz się, jak to zrobić, tutaj). Okazuje się, że wczytywanie obrazów trwa bardzo długo i nie są one w ogóle zapisywane w pamięci podręcznej przeglądarki. Ten długi czas wczytywania występuje przy każdym wyświetleniu strony.

Rozwiązanie

Po przeczytaniu artykułu o optymalizacji obrazów postanawiasz podjąć 2 kroki, aby poprawić wydajność wczytywania obrazów:

• Kompresuj obrazy. Nawet telefony komórkowe robią zdjęcia o znacznie wyższej rozdzielczości niż jest to konieczne w przypadku tej aplikacji. Zmniejszenie rozmiaru pliku przyspieszy czas ładowania bez zauważalnego spadku rozdzielczości w aplikacji.
• Zapisywanie w pamięci podręcznej Domyślnie obiekty Cloud Storage mają nagłówki, które informują przeglądarki, aby nie buforowały obrazów. Oznacza to, że przeglądarka użytkownika będzie wielokrotnie pobierać ten sam obraz. Na szczęście możesz zmienić te nagłówki, aby włączyć buforowanie. Zarówno pakiet SDK Cloud Storage po stronie klienta, jak i pakiet Firebase Admin SDK umożliwiają ustawianie tych nagłówków.

Aby skompresować obrazy, musisz ograniczyć jakość przesyłania lub mieć proces po stronie serwera, który zmienia rozmiar obrazów. Rozważmy zalety i wady każdego rozwiązania:

• Po stronie klienta W przypadku procesu po stronie klienta możesz po prostu ograniczyć rozmiar przesyłanych obrazów. Oznacza to, że nie musisz pisać ani utrzymywać żadnej nowej logiki serwera. Oznacza to jednak również, że sprzedawcy muszą sami zmieniać rozmiar obrazów, co jest uciążliwą i nieintuicyjną przeszkodą w tworzeniu nowej oferty.
• Po stronie serwera Jeśli korzystasz z Cloud Functions dla Firebase, możesz wywołać funkcję, która automatycznie zmienia rozmiar obrazu podczas przesyłania. Oznacza to, że sprzedawcy mogą przesyłać obrazy w dowolnym rozmiarze (bez dodatkowej pracy), a funkcja backendu może bezproblemowo zmieniać rozmiar obrazu. Dla tej funkcji dostępny jest nawet przykładowy kod.

Wygląda na to, że najlepszym rozwiązaniem jest użycie serwera. Jednak ta koncepcja nadal wymaga sklonowania przykładowej aplikacji, wykonania instrukcji konfiguracji, a następnie wdrożenia funkcji za pomocą wiersza poleceń Firebase. Zmiana rozmiaru obrazów wydaje się tak powszechnym przypadkiem użycia. Czy nie ma prostszego rozwiązania?

Łatwiejsze rozwiązanie

Masz szczęście. Jest prostsze rozwiązanie: Rozszerzenia w Firebase. Sprawdźmy katalog dostępnych rozszerzeń na stronie Firebase.

Spójrz na to! Istnieje rozszerzenie o nazwie „Resize Images”. Wygląda obiecująco.

Użyjmy tego rozszerzenia w Twojej aplikacji.

Instalowanie rozszerzenia

1. Aby wyświetlić więcej informacji o tym rozszerzeniu, kliknij Zobacz szczegóły. W sekcji Co możesz skonfigurować możesz ustawić wymiary, do których chcesz zmienić rozmiar, a nawet ustawić nagłówek pamięci podręcznej. Super!
2. Na stronie szczegółów rozszerzenia kliknij przycisk Zainstaluj w konsoli. Otworzy się strona konsoli Firebase z listą wszystkich Twoich projektów.
3. Wybierz projekt FriendlyMarket, który został utworzony na potrzeby tego laboratorium.
4. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Skonfiguruj rozszerzenie. Instrukcje będą zawierać podstawowe podsumowanie rozszerzenia, a także informacje o zasobach, które utworzy, i rolach dostępu, których wymaga.
5. W polu **Cache-Control** nagłówek obrazów o zmienionym rozmiarze wpisz:

public, max-age=31536000

6. W pozostałych parametrach pozostaw wartości domyślne.
7. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji…

Instalowanie za pomocą interfejsu wiersza poleceń Firebase

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

(Opcjonalnie) Więcej informacji o nagłówkach Cache-Control

Wartość nagłówka Cache-Control public, max-age=31536000 oznacza, że obraz będzie przechowywany w pamięci podręcznej przez maksymalnie rok. Więcej informacji o nagłówku Cache-Control znajdziesz w tej dokumentacji.

Aktualizowanie kodu klienta

Zainstalowane rozszerzenie zapisuje obraz o zmienionym rozmiarze w tym samym zasobniku co obraz oryginalny. Do nazwy pliku powiększonego obrazu zostaną dodane skonfigurowane wymiary. Jeśli więc ścieżka do oryginalnego pliku wyglądała tak: friendlymarket/user1234-car.png, ścieżka do zmienionego rozmiaru obrazu będzie wyglądać tak: 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 tym kodem, aby utworzyć odwołanie do 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)
  };
}

Wypróbuj

To rozszerzenie monitoruje nowe przesłane obrazy, więc rozmiar obecnego obrazu nie zostanie zmieniony.

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

1. Kliknij Friendly Market na pasku u góry aplikacji, aby przejść do ekranu głównego.
2. Aby utworzyć ofertę, kliknij przycisk Sprzedaj coś w prawym dolnym rogu aplikacji.
3. W polu Tytuł wpisz Coffee.
4. W polu Cena wpisz 1.
5. W polu Opis produktu wpisz Selling one cafe latte. It has foam art in the shape of a bear.
6. Pobierz ten obraz filiżanki kawy na komputer i prześlij go za pomocą przycisku ZDJĘCIE PRODUKTU. file_downloadPobierz obraz
7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj. Pod ksylofonem pojawi się lista kaw.
8. W panelu Funkcje w konsoli Firebase kliknij kartę Logi. Powinny być widoczne logi funkcji, które potwierdzają jej wykonanie.

9. Otwórz panel Miejsce na dane, aby zobaczyć oryginalne zdjęcie kawy i jego wersję o zmienionym rozmiarze w ścieżce friendlymarket.
10. W panelu podglądu StackBlitz kilka razy odśwież ekran główny aplikacji. Powinno być widać, że zdjęcie kawy ładuje się znacznie szybciej niż zdjęcie ksylofonu.

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

5. Ponowne konfigurowanie rozszerzenia

Problem

Aplikacja automatycznie zapisuje wersje robocze informacji o produkcie sprzedawcy. Użytkownicy lubią tę funkcję, ale Twoje statystyki są nieco niepokojące. Z raportów wynika, że tylko około 10% wersji roboczych jest publikowanych, a pozostałe 90% tylko zajmuje miejsce w bazie danych.

Rozwiązanie

Po szybkich obliczeniach okazuje się, że w danym momencie wystarczy zapisać około 5 wersji roboczych.

Pamiętasz katalog Rozszerzeń w Firebase? Być może istnieje już rozwiązanie tej sytuacji. Zainstalujmy rozszerzenie Limit Child Nodes, aby automatycznie ograniczać liczbę zapisanych wersji roboczych do 5 lub mniej. Gdy dodasz nową wersję roboczą, rozszerzenie usunie najstarszą.

1. Na stronie szczegółów rozszerzenia kliknij przycisk Zainstaluj.
2. Wybierz projekt Firebase, którego używasz w aplikacji internetowej platformy handlowej.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Skonfiguruj rozszerzenie.
4. W polu Ścieżka Bazy danych czasu rzeczywistego wpisz drafts. To ścieżka w bazie danych, w której są zapisywane wersje robocze.
5. W polu Maksymalna liczba węzłów do zachowania wpisz 5. Oznacza to, że zapisanych będzie 5 wersji roboczych informacji o każdym produkcie, a jeśli dodasz kolejną, najstarsza wersja robocza zostanie automatycznie usunięta.
6. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji…

Rozszerzenia monitorujące

Podczas instalowania rozszerzenia tworzonych jest kilka funkcji. Możesz sprawdzić, jak często te funkcje są uruchamiane, lub wyświetlić logi i wskaźniki błędów. Szczegółowe informacje o monitorowaniu rozszerzenia znajdziesz w artykule Zarządzanie zainstalowanymi rozszerzeniami. Aby wyświetlić funkcje utworzone przez rozszerzenie Resize Images w poprzednim kroku, postępuj zgodnie z instrukcjami w dokumentacji.

Odinstalowywanie rozszerzeń

Aby usunąć rozszerzenie z projektu, możesz usunąć poszczególne funkcje, które ono tworzy, ale może to prowadzić do nieoczekiwanych zachowań, ponieważ jedno rozszerzenie może tworzyć wiele funkcji. Więcej informacji o odinstalowywaniu rozszerzeń znajdziesz w dokumentacji.

Odinstalowanie spowoduje usunięcie wszystkich zasobów (np. funkcji rozszerzenia) i konta usługi utworzonych dla tej instancji rozszerzenia. Po odinstalowaniu rozszerzenia wszystkie utworzone przez nie artefakty (np. obrazy o zmienionym rozmiarze) pozostaną w Twoim projekcie.

Instalowanie wielu kopii rozszerzenia w jednym projekcie

W projekcie możesz zainstalować więcej niż 1 instancję danego rozszerzenia. Jeśli chcesz ograniczyć liczbę wpisów w innej ścieżce, możesz zainstalować kolejną instancję tego rozszerzenia. Na potrzeby tego laboratorium zainstalujesz rozszerzenie tylko raz.

Zobacz, jak to działa

1. Zaloguj się na konto, którego użyto do opublikowania zdjęcia ksylofonu lub latte.
2. Wygeneruj kilka wersji roboczych:
3. W prawym dolnym rogu aplikacji kliknij przycisk Sprzedaj coś.
4. Zmień tytuł na „Wersja 1”.
5. Przewiń w dół do sekcji Wersje robocze i sprawdź liczbę wersji roboczych. Muszą być co najmniej 2.
6. Na pasku aplikacji u góry kliknij przycisk PRZYJAZNY RYNEK. W ten sposób zapiszesz wersję roboczą, ale nie musisz jej publikować.
7. Powtórz te czynności dla wersji „Wersja robocza 2”, „Wersja robocza 3” itd. aż do „Wersja robocza 6”.
8. Gdy utworzysz „Wersję roboczą 6”, zauważysz, że „Wersja robocza 1” zniknie z sekcji Wersje robocze.
9. Podobnie jak w przypadku rozszerzenia Resize Images, możesz sprawdzić logi funkcji, aby zobaczyć, które funkcje zostały wywołane.

Ups, limit przechowywanych wersji roboczych jest zbyt mały

Twój zespół obsługi klienta kontaktuje się z Tobą i informuje, że niektórzy z Twoich najbardziej aktywnych sprzedawców skarżą się, że ich wersje robocze są usuwane, zanim zdążą je opublikować. Sprawdzasz obliczenia z członkiem zespołu i okazuje się, że pomyliłeś się o czynnik 10 000.

Jak możesz rozwiązać ten problem? Zmieńmy konfigurację zainstalowanego rozszerzenia.

1. W panelu po lewej stronie konsoli Firebase kliknij Rozszerzenia.
2. Na karcie zainstalowanego rozszerzenia kliknij Zarządzaj.
3. W prawym górnym rogu kliknij Ponownie skonfiguruj rozszerzenie.
4. Zmień wartość Maksymalna liczba węzłów do zachowania na 50000.
5. Kliknij Zapisz.

I to wszystko. Podczas aktualizacji rozszerzenia możesz porozmawiać z zespołem pomocy i poinformować go, że poprawka jest już wdrażana.

6. Automatyczne usuwanie danych użytkownika

Problem

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ą tym zdenerwowani. Sprzedawcy ci oczekiwali, że po usunięciu kont ich adresy e-mail zostaną usunięte z naszych systemów.

Obecnie zespół pomocy ręcznie usuwa dane każdego użytkownika, ale musi istnieć lepszy sposób. Zastanawiasz się nad napisaniem własnego zadania wsadowego, które będzie okresowo usuwać adresy e-mail z usuniętych kont. Usuwanie danych użytkownika wydaje się jednak dość powszechnym problemem. Być może Rozszerzenia w Firebase też pomogą rozwiązać ten problem.

Rozwiązanie

Skonfigurujesz rozszerzenie Delete User Data, aby automatycznie usuwać węzeł users/uid w bazie danych, gdy użytkownik usunie swoje konto.

1. Na stronie szczegółów rozszerzenia kliknij przycisk Zainstaluj.
2. Wybierz projekt Firebase, którego używasz w aplikacji internetowej platformy handlowej.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Skonfiguruj 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} to symbol wieloznaczny. Dzięki tej konfiguracji rozszerzenie będzie wiedzieć, że gdy użytkownik o identyfikatorze 1234 usunie swoje konto, rozszerzenie powinno usunąć sellers/1234 z bazy danych.
5. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji…

Porozmawiajmy o możliwościach dostosowywania

Z tego laboratorium dowiedziałeś się, że rozszerzenia Firebase mogą pomóc w rozwiązywaniu typowych problemów, a także że można je konfigurować pod kątem potrzeb aplikacji.

Rozszerzenia nie mogą jednak rozwiązać wszystkich problemów, a kwestia usuwania danych użytkowników jest tego dobrym przykładem. Rozszerzenie Delete User Data (Usuwanie danych użytkownika) rozwiązuje obecny problem, jakim jest pozostawianie e-maili po usunięciu konta przez użytkownika, ale nie usuwa wszystkiego. Na przykład oferta produktu jest nadal dostępna, a wszystkie obrazy w Cloud Storage również pozostaną. Rozszerzenie Delete User Data (Usuwanie danych użytkownika) umożliwia skonfigurowanie ścieżki Cloud Storage do usunięcia, ale ponieważ użytkownicy mogą przesyłać wiele różnych plików o różnych nazwach, nie można skonfigurować tego rozszerzenia tak, aby automatycznie usuwało te artefakty. W takich sytuacjach lepszym rozwiązaniem mogą być Cloud Functions dla Firebase, które umożliwiają pisanie kodu dostosowanego do modelu danych aplikacji.

Rozszerzenia i płatności

Korzystanie z rozszerzeń Firebase jest bezpłatne (opłaty są naliczane tylko za wykorzystywane zasoby bazowe), ale niektóre zasoby bazowe wymagane przez rozszerzenie mogą wymagać płatności. Ten przewodnik został opracowany tak, aby można było go ukończyć bez konta rozliczeniowego. Skonfigurowanie abonamentu Flame lub Blaze odblokowuje jednak wiele bardzo interesujących rozszerzeń Firebase.

Możesz na przykład skracać adresy URL, wysyłać e-maile, eksportować kolekcje do BigQuery i wykonywać inne czynności. Pełny katalog rozszerzeń znajdziesz tutaj.

Jeśli chcesz mieć rozszerzenie, które nie jest obecnie dostępne, daj nam znać. Aby zaproponować nowe rozszerzenie, prześlij prośbę o dodanie funkcji do zespołu pomocy Firebase.

Zobacz, jak to działa

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

1. W konsoli Firebase otwórz panel Bazy danych czasu rzeczywistego.
2. Rozwiń węzeł sellers.
3. Informacje o każdym sprzedawcy są powiązane z jego identyfikatorem użytkownika. Wybierz identyfikator UID użytkownika.
4. W konsoli Firebase otwórz panel Uwierzytelnianie i znajdź identyfikator UID użytkownika.
5. Rozwiń menu po prawej stronie identyfikatora UID i kliknij Usuń konto.

6. Wróć do panelu bazy danych czasu rzeczywistego. Informacje o sprzedawcy znikną.

7. Gratulacje!

Mimo że w tym ćwiczeniu nie napisano dużo kodu, dodano do aplikacji na platformę handlową ważne funkcje.

Dowiedziałeś(-aś) się, jak wyszukiwać, konfigurować, instalować i ponownie konfigurować rozszerzenia. Dowiedzieliśmy się też, jak monitorować zainstalowane rozszerzenia i w razie potrzeby je odinstalowywać.

Co dalej?

Sprawdź inne rozszerzenia:

• Tłumaczenie ciągów tekstowych w Cloud Firestore (wymagane konto rozliczeniowe)
• Dodawanie nowych użytkowników do list e-mailowych Mailchimp (wymagane konto rozliczeniowe)
• Skracanie adresów URL (wymagane jest konto rozliczeniowe)

Potrzebujesz więcej niestandardowego kodu po stronie serwera?

• Zapoznaj się z codelabem Cloud Functions dla Firebase

Inne przydatne dokumenty

Zarządzanie rozszerzeniami:

• Zarządzanie rozszerzeniami za pomocą wiersza poleceń Firebase
• Ustawianie alertów dotyczących budżetu
• Sprawdzanie, jak często jest uruchamiane zainstalowane rozszerzenie
• Aktualizowanie zainstalowanego rozszerzenia do nowej wersji
• Odinstalowywanie rozszerzenia

Szczegółowe informacje o rozszerzeniach:

• Wyświetl kod źródłowy i dokumentację każdego rozszerzenia na GitHubie
• Dowiedz się więcej o uprawnieniach i dostępie przyznanych rozszerzeniu