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

1. Wprowadzenie

Cele

W tym ćwiczeniu z programowania dodasz do aplikacji internetowej z platformą handlową nowe funkcje za pomocą rozszerzeń Firebase. Dzięki temu ćwiczeniu dowiesz się, jak rozszerzenia mogą pomóc Ci zaoszczędzić czas na tworzenie aplikacji i zarządzanie nimi.

Co utworzysz

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

• Wczytywanie obrazów szybciej, aby zwiększyć utrzymanie użytkowników
• Ogranicz wpisy w bazie danych, aby zwiększyć wydajność i obniżyć rachunek
• Wdrożenie automatycznego usuwania starych danych użytkowników w celu zwiększenia ochrony tych danych

Czego się nauczysz

• Jak odkrywać rozszerzenia do typowych zastosowań
• Jak zainstalować i skonfigurować rozszerzenie w projekcie
• Jak zarządzać rozszerzeniami w projekcie (monitorować je, aktualizować i odinstalowywać)

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

Czego potrzebujesz

• komputer z zainstalowaną nowoczesną przeglądarką internetową (zalecana przeglądarka Chrome),
• konto Google,

2. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. W konsoli Firebase kliknij Dodaj projekt i nazwij projekt Firebase FriendlyMarket.
2. Przejrzyj opcje tworzenia projektu. Zaakceptuj warunki korzystania z Firebase. Pomiń konfigurowanie Google Analytics, ponieważ nie będziesz używać tej usługi w tej aplikacji.
3. Poczekaj, aż projekt zostanie przygotowany, a następnie kliknij Dalej.

Aplikacja, którą utworzysz, korzysta z kilku usług Firebase dostępnych dla aplikacji internetowych:

• Uwierzytelnianie Firebase do łatwego identyfikowania użytkowników
• Baza danych czasu rzeczywistego Firebase do zapisywania ustrukturyzowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o ich aktualizacjach
• Cloud Storage dla Firebase do zapisywania obrazów w chmurze.

Teraz skonfiguruj te usługi Firebase i je włącz w konsoli Firebase.

Przejdź na wyższy abonament Firebase

Aby korzystać z rozszerzeń Firebase i podstawowych usług w chmurze, a także z Cloud Storage dla Firebase, projekt Firebase musi być w abonamentie opłat według wykorzystania (Blaze), co oznacza, że jest połączony z kontem płatności w Google Cloud.

• Konto Cloud Billing wymaga formy płatności, np. karty kredytowej.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania 300 USD środków i bezpłatnego okresu próbnego na koncie płatności Cloud.
• Jeśli wykonujesz to ćwiczenie w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Aby przenieść projekt na abonament Blaze:

1. W konsoli Firebase wybierz uaktualnienie abonamentu.
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 poziom abonamentu musisz utworzyć konto rozliczeniowe Cloud, konieczne może być powrót do procesu przejścia w konsoli Firebase, aby go dokończyć.

Włącz logowanie przez e-mail

Chociaż uwierzytelnianie nie jest tematem tego ćwiczenia, warto zastosować w aplikacji jakąś formę uwierzytelniania, aby jednoznacznie identyfikować wszystkich użytkowników. Użyjesz logowania e-mail.

1. W panelu po lewej stronie w konsoli Firebase 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 produktów na sprzedaż.

1. W panelu po lewej stronie w konsoli Firebase rozwiń Tworzenie, a potem kliknij Baza danych w czasie rzeczywistym.
2. Kliknij Utwórz bazę danych.
3. Wybierz lokalizację bazy danych, a potem kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację blisko użytkowników.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W kolejnych krokach tego laboratorium kodu dodasz reguły bezpieczeństwa, aby chronić swoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla bazy danych.
5. Kliknij Utwórz.

Konfigurowanie reguł zabezpieczeń bazy danych

Teraz skonfiguruj reguły zabezpieczeń potrzebne w przypadku tej aplikacji. Oto przykładowe podstawowe reguły, które pomogą Ci zabezpieczyć aplikację. Te reguły umożliwiają każdemu wyświetlanie produktów na sprzedaż, ale tylko zalogowanym użytkownikom pozwalają na wykonywanie innych operacji odczytu i zapisu. Nie musisz się martwić szczegółami tych zasad – wystarczy je skopiować i wkleić, aby uruchomić aplikację.

1. U góry panelu Realtime Database kliknij kartę Reguły.

2. Skopiuj i wklej ten zestaw reguł do pola 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 używa Cloud Storage dla Firebase do zapisywania zdjęć produktów do sprzedaży.

Oto jak skonfigurować Cloud Storage dla Firebase w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a potem kliknij 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 Always Free w Google Cloud Storage. Zasobniki w innych lokalizacjach podlegają cennikom i zasadom korzystania z Google Cloud Storage.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W kolejnych krokach tego laboratorium kodu dodasz reguły bezpieczeństwa, aby chronić swoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla zasobnika Storage.
5. Kliknij Utwórz.

Konfigurowanie reguł zabezpieczeń dla zasobnika Cloud Storage

Teraz skonfiguruj reguły bezpieczeństwa wymagane w przypadku tej aplikacji. Te reguły umożliwiają tylko uwierzytelnionych użytkowników do publikowania nowych zdjęć, ale pozwalają każdemu wyświetlić zdjęcie produktu w ofercie.

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

2. Skopiuj i wklej ten zestaw reguł do pola 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 Opublikuj.

3. Uruchamianie przykładowej aplikacji

Tworzenie kopii projektu StackBlitz

W tym ćwiczeniu tworzysz i wdrażasz aplikację za pomocą StackBlitz, edytora online z kilkoma zintegrowanymi przepływami pracy Firebase. Aby korzystać z Stackblitz, nie musisz instalować żadnego oprogramowania ani zakładać 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 stworzyć jego fork, ale nie mogą edytować Twojego projektu StackBlitz.

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

Masz teraz kopię kodu startowego jako swój własny projekt StackBlitz. Ponieważ nie zalogowano się na konto, jego nazwa to @anonymous, ale to nie problem. Projekt ma unikalną nazwę i niepowtarzalny adres URL. Wszystkie 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. Tutaj dodasz obiekt konfiguracji Firebase.
2. W konsoli Firebase otwórz stronę przeglądu projektu, klikając w lewym górnym rogu Przegląd projektu.
3. W środku strony Przegląd projektu kliknij ikonę internetową , aby utworzyć nową aplikację internetową Firebase.
4. Zarejestruj aplikację pod pseudonimem FriendlyMarket Codelab.
5. W tym ćwiczeniu 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 obiekt konfiguracji Firebase aplikacji do schowka. Nie kopiuj tagów <script>. Uwaga: jeśli chcesz później 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 fragment konfiguracji do pliku. Powinna ona wyglądać tak (ale z wartościami własnego projektu w obiekcie konfiguracji):

Jaki jest punkt wyjścia tej aplikacji?

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

W tym laboratorium kodu zaczynasz od kodu podstawowej aplikacji na platformie handlowej. Każdy użytkownik może wyświetlić listę produktów dostępnych w sprzedaży i kliknąć link, aby wyświetlić stronę z informacjami o produkcie. 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, nazwiska i 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 OBRAZ TWOJEGO ELEMENTU.

file_downloadPobierz obraz

7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj.
8. Znajdź nową stronę. Kliknij produkt, aby wyświetlić ekran z jego szczegółami, a potem 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 Storage znajdziesz też przesłany obraz na ścieżce friendlymarket.

4. Znajdowanie i instalowanie rozszerzenia

Problem

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

Ciekawie, czy testujesz swoją witrynę przy połączeniu z telefonu komórkowego. (tutaj dowiesz się, jak to zrobić). Wczytywanie obrazów trwa bardzo długo i w ogóle nie są one przechowywane w pamięci podręcznej przeglądarki. Długi czas wczytywania dotyczy każdej wyświetlonej strony.

Rozwiązanie

Po przeczytaniu artykułu Jak optymalizować obrazy decydujesz się na wykonanie 2 czynności, które mają poprawić wydajność wczytywania obrazów:

• Skompresuj obrazy. Nawet telefony komórkowe robią zdjęcia w znacznie wyższej rozdzielczości niż jest to potrzebne w tej aplikacji. Zmniejszenie rozmiaru pliku przyspieszy wczytywanie bez zauważalnego spadku rozdzielczości w aplikacji.
• Pamięć podręczna. Domyślnie obiekty Cloud Storage mają nagłówki, które informują przeglądarki, aby nie przechowywały obrazów w pamięci podręcznej. Oznacza to, ż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. Oba pakiety SDK (Cloud Storage SDK po stronie klienta i Firebase Admin SDK) umożliwiają ustawianie tych nagłówków.

Aby skompresować obrazy, musisz ograniczyć jakość przesyłania lub przeprowadzić proces na serwerze, który zmienia rozmiar obrazów. Rozważmy kompromisy:

• 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, że sprzedawcy muszą dowiedzieć się, jak zmienić rozmiar własnych zdjęć, co jest żmudną i nieintuicyjną barierą w tworzeniu nowych ofert.
• Po stronie serwera. Jeśli używasz Cloud Functions dla Firebase, możesz uruchomić 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 backendowa może płynnie zmieniać rozmiar obrazu. Dostępny jest nawet plik przykładowy tej funkcji.

Wygląda na to, że rozwiązaniem jest użycie funkcji po stronie serwera. W tym przypadku nadal trzeba sklonować przykład, postępując zgodnie z instrukcjami konfiguracji, a potem wdrożyć funkcję za pomocą wiersza poleceń Firebase. Zmiana rozmiaru obrazów wydaje się być typowym przypadkiem użycia. Czy nie ma prostszego rozwiązania?

Łatwiejsze rozwiązanie

Masz szczęście. Jest jednak łatwiejsze rozwiązanie: rozszerzenia w Firebase. Sprawdź katalog dostępnych rozszerzeń na stronie Firebase.

Patrz! Jest tam rozszerzenie o nazwie „Zmiana rozmiaru obrazu”. Wygląda to obiecująco.

Użyj tego rozszerzenia w swojej aplikacji.

Instalowanie rozszerzenia

1. Aby zobaczyć więcej informacji o tym rozszerzeniu, kliknij Zobacz szczegóły. W sekcji Co możesz skonfigurować rozszerzenie umożliwia ustawienie wymiarów, do których chcesz zmienić rozmiar, a nawet ustawić nagłówek pamięci podręcznej. Super!
2. Na stronie z informacjami o rozszerzeniu kliknij przycisk Zainstaluj w konsoli. Otworzy się strona konsoli Firebase z listą wszystkich Twoich projektów.
3. Wybierz projekt FriendlyMarket utworzony na potrzeby tego ćwiczenia.
4. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfigurowanie rozszerzenia. Instrukcje zawierają podstawowe podsumowanie rozszerzenia, a także wszelkie zasoby, które zostaną utworzone, oraz role dostępu, których wymaga.
5. W polu **Cache-Control** nagłówek dla zmienionych rozmiarów obrazów wpisz:

public, max-age=31536000

6. Pozostaw inne parametry w ich domyślnych wartościach.
7. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji…

Instalowanie za pomocą interfejsu wiersza poleceń Firebase

Jeśli czujesz się pewniej z narzędziami wiersza poleceń, rozszerzenia możesz instalować i nimi zarządzać też za pomocą wiersza poleceń Firebase. Wystarczy użyć polecenia firebase ext, które jest dostępne w najnowszej wersji interfejsu wiersza poleceń. 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 zostanie zapisany w pamięci podręcznej na maksymalnie 1 rok. Więcej informacji o nagłówku Cache-Control znajdziesz w tej dokumentacji.

Aktualizowanie kodu klienta

Zainstalowane przez Ciebie rozszerzenie zapisuje obraz po zmianie rozmiaru w tym samym zasobniku co obraz pierwotny. Do nazwy pliku z obrazem o zmienionym rozmiarze dołączane są skonfigurowane wymiary. Jeśli więc ścieżka do oryginalnego pliku wyglądała tak: friendlymarket/user1234-car.png, ścieżka do obrazu o zmienionym rozmiarze będzie wyglądać tak: friendlymarket/user1234-car_200x200.png.

Zaktualizuj aplikację, aby pobierała obrazy w zmienionym rozmiarze zamiast w pełnym rozmiarze.

1. W StackBlitz otwórz plik src/firebase-refs.js.
2. Aby utworzyć odwołanie do obrazu o zmienionym rozmiarze, zastąp dotychczasową funkcję getImageRef tym kodem:

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

Sprawdź

Ponieważ to rozszerzenie sprawdza nowe przesłane obrazy, nie zmieni rozmiaru dotychczasowego obrazu.

Aby zobaczyć rozszerzenie w działaniu, utwórz nowy post:

1. Aby przejść na ekran główny, na górnym pasku aplikacji kliknij Friendly Market.
2. Aby utworzyć ofertę, w prawym dolnym rogu aplikacji kliknij przycisk Sprzedaj coś.
3. W polu Tytuł wpisz Coffee.
4. W polu Cena wywoławcza 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 OBRAZ PRZEDMIOTU. file_downloadPobierz obraz
7. Po wypełnieniu wszystkich pól i przesłaniu obrazu kliknij Opublikuj. Poniżej Xylophone pojawi się informacja o kobiecie.
8. W panelu Funkcje w konsoli Firebase kliknij kartę Logi. Powinny się wyświetlić logi funkcji, które potwierdzają jej wykonanie.

9. Otwórz panel Pamięć, aby zobaczyć oryginalny obraz kawy i wersję o zmienionym rozmiarze na ścieżce friendlymarket.
10. W panelu podglądu StackBlitz kilkakrotnie ponownie wczytaj ekran główny aplikacji. Zauważysz, że obraz kawy wczytuje się znacznie szybciej niż obraz ksylofonu.

Obraz wczytuje się szybciej podczas pierwszego wczytania strony, ponieważ jest mniejszy, a podczas kolejnych odświeżeń strony wczytuje się z pamięci podręcznej przeglądarki zamiast wywoływać żądanie sieciowe.

5. Zmiana konfiguracji rozszerzenia

Problem

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

Rozwiązanie

Po krótkich obliczeniach na kartce papieru okazuje się, że wystarczy zapisać tylko 5 projektów.

Pamiętasz ten katalog Rozszerzeń w Firebase? Być może istnieje już rozwiązanie tego problemu. Zainstaluj rozszerzenie Limit Child Nodes, aby automatycznie ograniczyć liczbę zapisanych wersji roboczych do 5 lub mniej. Rozszerzenie usuwa najstarszą wersję roboczą, gdy dodasz nową.

1. Na stronie z informacjami o rozszerzeniu kliknij przycisk Zainstaluj.
2. Wybierz projekt Firebase, którego używasz do aplikacji internetowej na platformie handlowej.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfigurowanie rozszerzenia.
4. W polu Ścieżka do 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 dla każdego produktu zostanie zapisanych 5 projektów, a jeśli dodasz kolejny, najstarszy zostanie automatycznie usunięty.
6. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji...

Monitorowanie rozszerzeń

Podczas instalowania rozszerzenia proces tworzy kilka funkcji. Możesz sprawdzić, jak często te funkcje są wykonywane, lub wyświetlić dzienniki 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 Zmień rozmiar obrazu w poprzednim kroku, postępuj zgodnie z instrukcjami podanymi w dokumentacji.

Odinstalowywanie rozszerzeń

Aby usunąć rozszerzenie z projektu, możesz chcieć usunąć poszczególne funkcje utworzone przez to rozszerzenie, ale może to spowodować nieoczekiwane działanie, 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) oraz konta usługi utworzonego dla tej instancji rozszerzenia. Po odinstalowaniu rozszerzenia wszystkie artefakty utworzone przez nie (np. obrazy o zmienionym rozmiarze) pozostaną w Twoim projekcie.

Instalowanie wielu kopii rozszerzenia w pojedynczym projekcie

Nie musisz instalować w projekcie pojedynczej instancji danego rozszerzenia. Jeśli chcesz ograniczyć wpisy na innej ścieżce, możesz zainstalować kolejną instancję tego rozszerzenia. Jednak na potrzeby tego ćwiczenia zainstalujesz rozszerzenie tylko raz.

Jak to działa

1. Zaloguj się na konto, z którego opublikowano ksylofon lub latte.
2. Wygeneruj wersje robocze:
3. W prawym dolnym rogu aplikacji kliknij przycisk Sprzedaj coś.
4. Zmień tytuł na „Draft 1”.
5. Przewiń w dół do sekcji Napisy i sprawdź liczbę napisów. Powinny być co najmniej 2.
6. Kliknij przycisk FRIENDLY MARKET na górnym pasku aplikacji. Dzięki temu masz zapisaną wersję roboczą, ale nie musisz jej publikować.
7. Powtórz tę czynność w przypadku wersji „Draft 2”, „Draft 3” itd. aż do wersji „Draft 6”.
8. Gdy utworzysz „Wersja robocza 6”, zauważysz, że „Wersja robocza 1” zniknie z sekcji Wersje robocze.
9. Podobnie jak w przypadku rozszerzenia do zmiany rozmiaru obrazów, możesz sprawdzić dzienniki funkcji, aby zobaczyć, które funkcje zostały wywołane.

Ojej, limit przechowywanych wersji roboczych jest za mały

Zespół obsługi klienta 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 kolegą i odkrywasz, że były one nieprawidłowe o 10 tysięcy!

Jak możesz rozwiązać ten problem? Skonfigurujmy zainstalowane rozszerzenie.

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

To wszystko. Podczas aktualizacji rozszerzenia możesz skontaktować się z zespołem pomocy i poinformować go, że rozwiązanie jest już wdrażane.

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ą źli. Ci sprzedawcy oczekiwali, że ich adresy e-mail zostaną usunięte z Twoich systemów po usunięciu kont.

Na razie zespół pomocy ręcznie usuwa dane każdego użytkownika, ale musi istnieć lepszy sposób. Zastanawiasz się nad tym i rozważasz napisanie własnego zadania zbiorczego, które będzie okresowo wykonywane i usuwać adresy e-mail z usuniętych kont. Usuwanie danych użytkownika wydaje się jednak dość częstym problemem. Rozszerzenia Firebase mogą też pomóc w rozwiązaniu tego problemu.

Rozwiązanie

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

1. Na stronie z informacjami o rozszerzeniu kliknij przycisk Zainstaluj.
2. Wybierz projekt Firebase, którego używasz do aplikacji internetowej na platformie handlowej.
3. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do kroku Konfigurowanie rozszerzenia.
4. W polu Ścieżki w BDB wpisz sellers/{UID}. Część sellers to węzeł, którego 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 UID 1234 usunie swoje konto, rozszerzenie powinno usunąć z bazy danych sellers/1234.
5. Kliknij Zainstaluj rozszerzenie.

Podczas oczekiwania na zakończenie instalacji...

Porozmawiajmy o dostosowywaniu

Z tego ćwiczenia w KodLab dowiesz się, że rozszerzenia Firebase mogą Ci pomóc w rozwiązywaniu typowych problemów, a ich konfigurację możesz dostosować do potrzeb swojej aplikacji.

Rozszerzenia nie rozwiążą jednak wszystkich problemów. Przykładem może być tutaj usuwanie danych użytkownika. Chociaż rozszerzenie Usuń dane użytkownika rozwiązuje obecny problem, że e-maile są nadal widoczne po usunięciu konta przez użytkownika, nie usunie wszystkiego. Na przykład informacje o produkcie są nadal dostępne, a wszystkie obrazy w Cloud Storage pozostaną. Rozszerzenie „Delete User Data” umożliwia skonfigurowanie ścieżki do Cloud Storage, która ma zostać usunięta, ale ponieważ użytkownicy mogą przesyłać wiele różnych plików o różnych nazwach, nie możesz skonfigurować tego rozszerzenia tak, aby automatycznie usuwało te elementy. W takich sytuacjach lepiej sprawdzi się Cloud Functions dla Firebase, dzięki któremu możesz napisać kod dostosowany do modelu danych aplikacji.

Rozszerzenia i płatności

Rozszerzenia Firebase są bezpłatne (opłaty są naliczane tylko za używane zasoby), ale niektóre z tych zasobów mogą wymagać rozliczenia. To Codelab zostało zaprojektowane tak, aby można było je ukończyć bez konta rozliczeniowego. Jednak skonfigurowanie abonamentu Flame lub Blaze odblokowuje wiele naprawdę interesujących rozszerzeń Firebase.

Możesz na przykład skrócić adresy URL, wysłać e-maila, eksportować kolekcje do BigQuery i wykonywać inne działania. Pełny katalog rozszerzeń znajdziesz tutaj.

Jeśli chcesz mieć rozszerzenie, które jest obecnie niedostępne, daj nam znać. Aby zaproponować nowe rozszerzenie, prześlij prośbę o dodanie funkcji do Pomocy Firebase.

Jak to działa

Po zainstalowaniu rozszerzenia usuń użytkownika i obserwuj, 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 w czasie rzeczywistym. Informacje o sprzedawcy zostaną utracone.

7. Gratulacje!

Mimo że w ramach tego ćwiczenia nie napisano zbyt wiele kodu, udało Ci się dodać do aplikacji na platformie ważne funkcje.

Dowiedz się, jak znajdować, konfigurować, instalować i ponownie konfigurować rozszerzenia. Poznaliśmy też sposób monitorowania zainstalowanych rozszerzeń i ich odinstalowania w razie potrzeby.

Co dalej?

Zapoznaj się z tymi rozszerzeniami:

• 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 konto rozliczeniowe)

Potrzebujesz niestandardowego kodu po stronie serwera?

• Zapoznaj się z Codelab 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 działa zainstalowane rozszerzenie
• Aktualizowanie zainstalowanego rozszerzenia do nowej wersji
• Odinstalowywanie rozszerzenia

Więcej informacji o rozszerzeniach:

• wyświetlić kod źródłowy i dokumentację do poszczególnych rozszerzeń na GitHubie.
• Dowiedz się więcej o uprawnieniach i dostępie przyznanych rozszerzeniu.