Jak przechowywać, aktualizować, usuwać i pobierać dane z bazy danych Firebase za pomocą Angular

Firebase to platforma oferująca wiele usług wspomagających tworzenie i skalowanie aplikacji. Niektóre z tych funkcji obejmują usługi hostingowe, przechowywanie danych i możliwość śledzenia analizy danych.

Ten samouczek koncentruje się głównie na tworzeniu i dodawaniu danych do bazy danych Firebase oraz wykonywaniu operacji tworzenia, odczytu, zapisu i usuwania w bazie danych z lokalnej aplikacji Angular.

Jak tworzyć i dodawać dane do bazy danych Firebase

Zakładając, że masz już skonfigurowaną i uruchomioną lokalnie aplikację Angular, będzie ona musiała być połączona z bazą danych Firebase, aby przechowywać dane i uzyskiwać do nich dostęp. Jeśli nie znasz Angulara, możesz przeczytać więcej o Koncepcje Angular, komponenty i ogólna struktura projektu Angular.

Jeśli nie masz jeszcze bazy danych Firebase, możesz użyć danych logowania do konta Google, aby zalogować się do Firebase i postępować zgodnie z instrukcjami. Po skonfigurowaniu utwórz projekt:

1. Od Strona główna Firebase, Wybierz Przejdź do konsoli w prawym górnym rogu witryny.
instagram viewer
2. W sekcji „Twoje projekty Firebase” wybierz Dodaj projekt.
3. Postępuj zgodnie z instrukcjami, aby utworzyć nowy projekt.
4. Po zakończeniu projekt zostanie otwarty. Po lewej stronie ekranu znajduje się panel z listą funkcji udostępnianych przez Firebase. Najedź kursorem na ikony, aż zobaczysz Baza danych Firestorei wybierz go.
5. Wybierz Utwórz bazę danych, i postępuj zgodnie z monitami, aby utworzyć bazę danych.
6. Wybierając reguły bezpieczeństwa, wybierz Uruchom w trybie testowym. Można to później zmienić, aby zapewnić większe bezpieczeństwo danych. Więcej informacji o regułach bezpieczeństwa Firestore znajdziesz tutaj Dokumentacja Firebase.
7. Po zakończeniu otworzy się baza danych. Struktura bazy danych wykorzystuje kolekcje, co jest zasadniczo tym samym pojęciem, co tabele bazy danych. Na przykład, jeśli potrzebujesz dwóch tabel, jednej do przechowywania informacji o koncie, a drugiej do przechowywania informacji o użytkowniku, utworzysz dwie kolekcje o nazwach Konto i Użytkownik.
8. Wybierz Rozpocznij zbiórkę i dodaj identyfikator kolekcji o nazwie „Użytkownik”.
9. Dodaj pierwszy rekord z informacjami o jednym użytkowniku. Kliknij Dodaj pole aby dodać trzy nowe pola: firstName (ciąg), lastName (ciąg) i vipMember (wartość logiczna). Identyfikator dokumentu może być generowany automatycznie.
10. Kliknij Zapisać.
11. Aby dodać więcej rekordów do kolekcji „Użytkownik”, kliknij Dodaj dokument (dodaj dokument jest równoznaczne z dodaniem nowego rekordu lub użytkownika). Dodaj czterech kolejnych użytkowników z tymi samymi trzema polami.

Baza danych jest teraz skonfigurowana z pewnymi danymi testowymi.

Jak zintegrować Firebase z aplikacją Angular

Aby uzyskać dostęp do tych danych w lokalnej aplikacji Angular, najpierw skonfiguruj niektóre ustawienia aplikacji, aby połączyć się z bazą danych Firebase:

1. W Firebase przejdź do panelu po lewej stronie i kliknij Przegląd projektu.
2. Wybierz Sieć przycisk (oznaczony nawiasami ostrymi).
3. Zarejestruj swoją lokalną aplikację, dodając nazwę aplikacji.
4. Zainstaluj Firebase w lokalnej aplikacji Angular.

   npm i baza ogniowa
   

5. Firebase wyświetli wtedy niektóre szczegóły konfiguracji. Zapisz te dane i kliknij Przejdź do konsoli.
6. Na podstawie szczegółów podanych w poprzednim kroku skopiuj następujący kod do środowiska environment.prod.ts i environment.ts w aplikacji Angular.

   eksportuj środowisko const = {
    produkcja: prawda,
    FirebaseConfig: {
    apiKey: "twój-klucz-api",
    authDomain: "twoja-domena-auth",
    projectId: "identyfikator-twojego-projektu",
    StorageBucket: "twój-zasobnik-magazynowy",
    messagingSenderId: "twój-identyfikator-nadawcy-wiadomości",
    appId: "twój-id-api",
    MeasurementId: "identyfikator-twojego-pomiaru"
    }
   };
   

7. AngularFirestore od @kątowe/ogniste/firestore posłuży do skonfigurowania Firebase w Angularze. Zauważ, że AngularFirestore nie jest kompatybilny z Angular w wersji 9 i nowszych. W lokalnej aplikacji Angular uruchom:

   npm i @kątowe/ogniste
   

8. Dodaj moduły Firestore i środowiska do sekcji importów w app.module.ts.

   import { AngularFireModule } z "@angular/fire";
   import { AngularFirestoreModule } z "@angular/fire/firestore";
   importuj { środowisko } z "../environments/environment";
   

9. Moduły Firestore również muszą być uwzględnione w tablicy importów w app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   Moduł AngularFirestore,

Jak pobrać dane z Firebase za pomocą usługi

Zwykle dobrą praktyką jest posiadanie jednego lub wielu services.ts pliki używane do interakcji z bazą danych. Funkcje dodane do pliku services można następnie wywoływać w innych plikach TypeScript, stronach lub innych składnikach w całej aplikacji.

1. Utwórz plik o nazwie service.ts w src/aplikacja/usługi teczka.
2. Dodaj moduł AngularFirestore do sekcji importów i dołącz go do konstruktora.

   importuj { Injectable } z „@angular/core”;
   importuj { AngularFirestore } z „@angular/fire/firestore”;
   @Do wstrzykiwania({
    pod warunkiem w: 'root'
   })
   klasa eksportowa Usługa {
    konstruktor (prywatna baza danych: AngularFirestore) { }
   }
   

3. Dodaj funkcję, która zwraca obietnicę zawierającą listę wszystkich użytkowników. "this.db.collection('Użytkownik')” odnosi się do kolekcji „Użytkownik” w bazie danych.

   pobierzWszystkichUżytkowników() {
    zwróć nową obietnicę((rozwiąż)=> {
    this.db.collection('Użytkownik').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. Aby użyć tej funkcji w innym pliku TypeScript, zaimportuj nową usługę i dodaj ją do konstruktora.

   importuj { Service } z 'src/app/services/service
   konstruktor (usługa prywatna: Serwis) {}
   

5. Pobierz listę wszystkich użytkowników korzystających z funkcji utworzonej w pliku services.

   asynchroniczne pobieranie użytkowników () {
    this.allUsers = czekaj na this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Jak dodać nowy rekord do bazy danych Firebase

Dodaj nowy rekord użytkownika do bazy danych Firebase.

1. W services.ts dodaj nową funkcję, aby utworzyć nowy rekord. Ta funkcja pobiera identyfikator nowego użytkownika i wszystkie jego szczegóły. Wykorzystuje funkcję ustawiania Firestore, aby wysłać te informacje do Firebase i utworzyć nowy rekord.

   addNewUser (_newId: dowolne, _fName: ciąg, _lName: ciąg, _vip: wartość logiczna) {
    this.db.collection("Użytkownik").doc (_newId).set({imię: _fName, lastName: _lName, vipMember: _vip});
   }

2. Wywołaj funkcję addNewUser() w innym pliku TypeScript. Nie zapomnij zaimportować usługi i uwzględnić ją w konstruktorze, jak pokazano wcześniej. Zachęcamy do skorzystania z generatora losowych identyfikatorów, aby utworzyć nowy identyfikator dla użytkownika.

   this.service.addNewUser("62289836", "Jane", "Doe", prawda);
   

Jak zaktualizować dane w bazie danych Firebase

Firebase ma wiele funkcji, które: uczynić go jednym z najlepszych dostępnych narzędzi. Aby zaktualizować niektóre pola w konkretnym rekordzie, użyj funkcji aktualizacji Firestore.

1. W pliku service.ts utwórz funkcję o nazwie updateUserFirstName(). Ta funkcja zaktualizuje imię wybranego rekordu użytkownika. Funkcja przyjmuje identyfikator rekordu, który należy zaktualizować, oraz nową wartość imienia użytkownika.

   updateUserFirstName (_id: dowolna, _firstName: ciąg) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Aby zaktualizować wiele pól dla tego samego rekordu, po prostu rozwiń pola wprowadzane w funkcji aktualizacji Firestore. Zamiast po prostu imię, dodaj nazwisko, aby zaktualizować to również o nową wartość.

   updateUserFullName (_id: dowolne, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Każda z powyższych funkcji może być używana w innych plikach TypeScript.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Jak usunąć rekord z bazy danych Firebase

Aby usunąć rekord, użyj funkcji usuwania Firestore.

1. W pliku service.ts utwórz funkcję o nazwie deleteUser(). Ta funkcja pobiera identyfikator rekordu, który należy usunąć.

   usuńUżytkownika (_id: dowolny) {
    this.db.doc(`Użytkownik/${_id}`).delete();
    }
   

2. Powyższej funkcji można następnie użyć w innych plikach TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Pobieranie danych Firebase za pomocą zapytań i filtrów

Filtr „gdzie” może filtrować zwracane wyniki na podstawie określonego warunku.

1. W services.ts utwórz funkcję, która pobiera wszystkich użytkowników VIP (jest tak, jeśli pole vipMember jest ustawione na true). Wskazuje na to poniższa część wywołania Firebase „ref.where('vipMember', '==', true)”.

   getAllVipMembers() {
    zwróć nową obietnicę((rozwiąż)=> {
    this.db.collection('Użytkownik', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolve (users))
    })
    }

2. Użyj tej funkcji w innym pliku TypeScript.

   async getAllVipMembers() {
    this.vipUsers = czekaj na this.service.getAllVipMembers();
    console.log (ten.vipUsers);
    }

3. Zapytanie można zmodyfikować, aby dodać inne operacje, takie jak Order By, Start At lub Limit. Zmodyfikuj funkcję getAllVipMembers() w services.ts, aby uporządkować według nazwiska. Operacja Sortuj według może wymagać utworzenia indeksu w Firebase. W takim przypadku kliknij link podany w komunikacie o błędzie w konsoli.

   getAllVipMembers() {
    zwróć nową obietnicę((rozwiąż)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (users) )
    })
    }

4. Zmodyfikuj zapytanie, aby zwracało tylko pierwsze trzy rekordy. W tym celu można użyć operacji Start At i Limit. Jest to przydatne, jeśli musisz zaimplementować stronicowanie, czyli gdy na stronie wyświetlana jest pewna liczba rekordów.

   getAllVipMembers() {
    zwróć nową obietnicę((rozwiąż)=> {
    this.db.collection('Użytkownik', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (użytkownicy => rozwiązać (użytkownicy))
    })
    }

Dodaj więcej danych do Firebase i więcej żądań w aplikacji Angular

Istnieje wiele innych kombinacji zapytań, które możesz poznać, próbując pobrać dane z bazy danych Firebase. Mamy nadzieję, że teraz rozumiesz, jak skonfigurować prostą bazę danych Firebase, jak połączyć ją z lokalną aplikacją Angular oraz jak czytać i zapisywać w bazie danych.

Możesz też dowiedzieć się więcej o innych usługach oferowanych przez Firebase. Firebase to jedna z wielu platform, które możesz zintegrować z Angularem i niezależnie od tego, czy jesteś na poziomie początkującym, czy zaawansowanym, zawsze jest o wiele więcej do nauczenia się.

8 najlepszych kursów kątowych dla początkujących i zaawansowanych

Czytaj dalej

O autorze