Jak używać złożonych zapytań Firebase w Angular

Jedną z funkcji Firebase jest możliwość tworzenia bazy danych NoSQL przechowywanej w chmurze. Tę bazę danych można również zintegrować z tworzonymi przez siebie aplikacjami, a także przechowywać, aktualizować i usuwać dane w bazie danych.

Możesz także wysyłać zapytania do bazy danych Firebase z aplikacji Angular. Firebase wymaga indeksowania kombinacji pól dla zapytania, które używa wielu pól. Dzięki temu Firebase może je łatwo wyszukać, gdy wywołasz zapytanie w innym momencie.

Skonfiguruj swoją aplikację Angular i bazę danych Firebase

Przed napisaniem zapytań Firebase musisz utworzyć aplikacja kątowa oraz bazę danych Firebase. Będziesz także musiał skonfigurować swoją aplikację Angular do łączenia się z bazą danych.

1. Jeśli nie masz istniejącej aplikacji Angular, możesz użyć nowy
   instagram viewer
   polecenie, aby utworzyć nowy projekt ze wszystkimi niezbędnymi plikami Angular.

   ng NowyNowy-aplikacja-kątowa

2. Stwórz nowa baza danych Firebase dla aplikacji Angular logując się do Firebase i postępując zgodnie z wyświetlanymi instrukcjami, aby utworzyć nowy projekt Firebase.
3. W nowej bazie danych Cloud Firestore utwórz dwie kolekcje (nazywane również tabelami) dla „Produktu” i „Dostawcy”. Dostawca może dostarczyć wiele produktów. Każdy produkt jest również połączony z dostawcą za pomocą pola „supplierId”.
4. Wprowadź następujące dane do tabeli „Produkt”. Wprowadź pola name, productId i providerId jako ciągi. Wprowadź ceny i inStock jako liczby.

   Identyfikator dokumentu	Pola
   produkt1	nazwa: "Wstążki" cena: 12,99 w magazynie: 10 identyfikator produktu: "P1" identyfikator dostawcy: "S1"
   produkt2	nazwa: "Balony" cena: 1,5 w magazynie: 2 identyfikator produktu: "P2" identyfikator dostawcy: "S1"
   produkt3	nazwa: "Papier" cena: 2,99 w magazynie: 20 identyfikator produktu: "P3" identyfikator dostawcy: "S1"
   produkt4	nazwa: "Tabela" cena: 199 w magazynie: 1 identyfikator produktu: "P4" identyfikator dostawcy: "S2"

   Oto przykład pokazujący, jak to powinno wyglądać:
5. Wprowadź następujące dane do tabeli „Dostawca”. Wprowadź wszystkie pola jako ciągi.

   Identyfikator dokumentu	Pola
   dostawca1	nazwa: "Dostawca wyrobów artystycznych i rzemieślniczych" lokalizacja: "Kalifornia, USA" identyfikator dostawcy: "S1"
   dostawca2	nazwa: "Niesamowite Stoły" lokalizacja: "Sydney, Australia" identyfikator dostawcy: "S2"

   Oto jak powinien wyglądać wpis provider1:
6. zainstalować kątowe/ogniste do Twojej aplikacji.

   npm i @kątowy/fire

7. W Firebase otwórz Ustawienia projektu. Kliknij logo nawiasów kątowych, aby dodać Firebase do swojej aplikacji Angular.
8. Firebase dostarczy Ci szczegóły konfiguracji, których możesz użyć do połączenia swojej aplikacji Angular z bazą danych Firebase.
9. Wymień zawartość w środowiska/środowisko.ts z następującym kodem. Będziesz musiał zmienić wartości w ciągu FirebaseConfig. Zmień je, aby były zgodne z konfiguracją podaną przez Firebase w poprzednim kroku.

   eksportstały środowisko = {
    produkcja: fałszywy,
    FirebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    StorageBucket: "muo-firebase-queries.appspot.com",
    messageSenderId: "569911365044",
    identyfikator aplikacji: "1:569911365044:sieć:9557bfef800caa5cdaf6e1"
    }
   };

10. Zaimportuj środowisko z góry wraz z modułami Angular Firebase do src/app/app.module.ts.

    import { środowisko } z „../środowiska/środowisko”;
    import { Moduł AngularFire } z „@kątowy/ogniowy/kompatybilny”;
    import { Moduł AngularFirestore } z "@kątowy/ogniowy/kompatybilny/firestore";

11. Dodaj moduły Firebase do tablicy importów:

    Moduł AngularFirestore,
    Moduł AngularFire.initializeApp(środowisko.firebaseConfig)

Jak napisać złożone zapytanie Firebase w pliku usług

Za pomocą pliku usług możesz wysyłać zapytania do tabel w bazie danych Firebase.

1. Utwórz nowy folder o nazwie „usługi”. Wewnątrz folderu utwórz nowy plik o nazwie „service.ts”.
2. Dodaj do pliku import, konstruktor i klasę AngularFirestore.

   import { do wstrzykiwania } z „@kątowy/rdzeń”;
   import { AngularFirestore } z „@angular/fire/compat/firestore”;
   @do wstrzykiwania({
    opatrzony w: 'źródło'
   })
   eksportklasaUsługa{
   konstruktor(baza danych prywatnych: AngularFirestore) { }
   }

3. W tym przykładzie zapytania wyświetl listę produktów na podstawie nazwy dostawcy. Dodatkowo przefiltruj listę, aby wyświetlić tylko towar z najniższym stanem magazynowym. Ponieważ Firebase nie jest racjonalną bazą danych, będziemy musieli wykonać zapytania do dwóch oddzielnych tabel przy użyciu więcej niż jednego zapytania.
4. Aby to zrobić, utwórz nową funkcję o nazwie pobierzdostawcę(), aby obsłużyć pierwsze zapytanie. Funkcja zwróci wiersz w tabeli „Dostawca”, który odpowiada nazwie.

   getSupplier (nazwa: ciąg) {
   zwrócićNowyObietnica((rozwiąż)=> {
    ta kolekcja.db.('Dostawca', ref => ref.gdzie('Nazwa', '==', nazwa)).valueChanges().subscribe (dostawca => rozwiązać (dostawca))
    })
    }

5. Utwórz kolejną funkcję o nazwie pobierzProduktyOdDostawcy(). To zapytanie wysyła zapytanie do bazy danych o Produkty powiązane z konkretnym dostawcą. Dodatkowo zapytanie porządkuje również wyniki według pola "w magazynie" i wyświetla tylko pierwszy rekord na liście. Innymi słowy, zwróci produkt dla konkretnego dostawcy, z najniższą liczbą „w magazynie”.

   getProductsFromSupplier (identyfikator dostawcy: ciąg) {
   zwrócićNowyObietnica((rozwiąż)=> {
    ta kolekcja.db.('Produkt', ref => ref.gdzie('identyfikator dostawcy', '==', identyfikator dostawcy).orderBy('w magazynie').startAt (0).limit (1)).valueChanges().subscribe (produkt => rozwiązać (produkt))
    })
    }

6. w src/app/app.component.ts pliku, zaimportuj usługę.

   import { Usługa } z „źródło/aplikacja/usługi/usługa”;

7. Dodaj konstruktora wewnątrz klasy AppComponent i dodaj usługę do konstruktora.

   konstruktor(usługa prywatna: Serwis) { }

8. Utwórz nową funkcję o nazwie pobierzZapas Produktu(). Ta funkcja wydrukuje produkt z najniższym stanem, jaki zapewnia dany dostawca. Pamiętaj, aby wywołać nową funkcję w ngOnInit() funkcji i zadeklaruj zmienną do przechowywania wyniku.

   produkty: dowolne;
   ngOnInit(): próżnia {
   ten.getProductStock();
   }
   asynchroniczny pobierzZapasProduktu() {
   }

9. W środku pobierzZapasProduktu() funkcji, użyj dwóch zapytań z pliku services. Użyj pierwszego zapytania, aby uzyskać rekord dostawcy na podstawie nazwy. Następnie użyj identyfikatora dostawcy jako argumentu dla drugiego zapytania, które spowoduje znalezienie produktu od tego dostawcy o najniższym zapasie.

   wynajmować dostawca = czekać naten.service.getSupplier('Dostawca wyrobów artystycznych i rzemieślniczych'); 
   ten.produkty = czekać naten.service.getProductsFromSupplier (dostawca[0].identyfikator dostawcy);

10. Usuń zawartość w src/app/app.component.html plik i zastąp go następującym:

    <h2> Produkty z najniższym stanem magazynowym od "Dostawca wyrobów artystycznych i rzemieślniczych"</h2>
    <div *ngDla="niech pozycja produktów">
    <p> Imię i nazwisko: {{nazwa.elementu}} </p>
    <p> Numer w magazynie: {{item.inStock}} </p>
    <p> Cena: {{item.price}} $ </p>
    </div>

11. Uruchom aplikację w przeglądarce internetowej za pomocą ng służyć Komenda.

    ng służyć

12. Otwórz swoją witrynę za pomocą dowolnej przeglądarki internetowej. Domyślnie Angular obsługuje aplikację pod adresem Lokalny Gospodarz: 4200.
13. Twoje dane nie będą poprawnie wyświetlane na ekranie. Kliknij prawym przyciskiem myszy stronę internetową i kliknij Sprawdzać aby otworzyć narzędzia programistyczne w przeglądarce.
14. Przejdź do Konsola patka. Wyświetlony zostanie błąd informujący, że zapytanie będzie wymagało indeksu.

Jak utworzyć indeks złożony dla zapytania

Firebase tworzy indeksy dla zapytań, które mogą zawierać wiele pól. Według Dokumentacja Firebase, działa jak mapa, dzięki czemu Firebase może wyszukać lokalizację pól zawartych w zapytaniu.

1. W konsoli kliknij łącze, które wyświetla błąd.
2. Zaloguj się na swoje konto Firebase.
3. Zostanie wyświetlony monit z prośbą o utworzenie indeksu dla zapytania Firebase. Kliknij Utwórz indeks.
4. Firebase zindeksuje pola używane w zapytaniu. Poczekaj kilka minut, aż stan zmieni się z „Budynek” na „Włączony”.
5. Odśwież przeglądarkę internetową. Zapytanie zostanie uruchomione i zwróci poprawny wynik na stronie głównej. Jeśli otworzysz debuger konsoli za pomocą narzędzi programistycznych przeglądarki, błąd nie powinien już tam być.

Wysyłanie zapytań do bazy danych Firebase

Firebase umożliwia tworzenie bazy danych NoSQL w chmurze. Następnie możesz zintegrować tę bazę danych z rozwijanymi aplikacjami Angular. Możesz tworzyć różne typy zapytań do przechowywania, aktualizowania lub usuwania danych. Możesz także utworzyć zapytanie, które używa wielu pól naraz.

Gdy tworzysz zapytanie, które używa wielu pól, próba jego uruchomienia spowoduje błąd. Musisz zindeksować kombinację pól używaną w zapytaniu, aby Firebase mógł ją łatwo wyszukiwać po każdym uruchomieniu zapytania.

Możesz również dowiedzieć się o innych sposobach konfigurowania bazy danych NoSQL, na przykład o tym, jak skonfigurować bazę danych za pomocą MongoDB.