Jak ukládat, aktualizovat, mazat a získávat data z databáze Firebase pomocí Angular

Firebase je platforma, která vám poskytuje množství služeb, které vám pomohou s vytvářením a škálováním aplikace. Některé z těchto funkcí zahrnují hostingové služby, úložiště dat a možnost sledovat analýzu dat.

Tento tutoriál se zaměřuje hlavně na to, jak vytvářet a přidávat data do databáze Firebase a jak provádět operace vytváření, čtení, zápisu a mazání databáze z místní aplikace Angular.

Jak vytvořit a přidat data do databáze Firebase

Za předpokladu, že již máte aplikaci Angular nastavenou a spuštěnou lokálně, bude nutné ji připojit k databázi Firebase, aby bylo možné ukládat data a přistupovat k nim. Pokud neznáte Angular, můžete si přečíst více o Angular koncepty, komponenty a celková struktura Angular projektu.

Pokud ještě nemáte databázi Firebase, můžete se pomocí přihlašovacích údajů k účtu Google přihlásit do Firebase a postupovat podle pokynů. Jakmile je toto nastaveno, vytvořte projekt:

1. Z Domovská stránka Firebase, vyberte Přejděte do konzoly v pravém horním rohu webu.
2. V části Vaše projekty Firebase vyberte Přidat projekt.
instagram viewer
3. Podle pokynů vytvořte nový projekt.
4. Po dokončení se projekt otevře. Na levé straně obrazovky je panel se seznamem funkcí, které Firebase poskytuje. Najeďte na ikony, dokud se nezobrazí Databáze Firestorea vyberte jej.
5. Vybrat Vytvořit databázi, a postupujte podle pokynů k vytvoření databáze.
6. Při výběru pravidel zabezpečení vyberte Spusťte v testovacím režimu. To lze později změnit, aby byla data bezpečnější. Další informace o bezpečnostních pravidlech Firestore si můžete přečíst v následující části Dokumentace Firebase.
7. Po dokončení se databáze otevře. Struktura databáze používá kolekce, což je v podstatě stejný koncept jako databázové tabulky. Pokud byste například potřebovali dvě tabulky, jednu pro uložení informací o účtu a druhou pro uložení informací o uživateli, vytvořili byste dvě kolekce s názvem Účet a Uživatel.
8. Vybrat Zahájit sběr a přidejte ID sbírky s názvem „Uživatel“.
9. Přidejte první záznam s informacemi o jednom uživateli. Klikněte na Přidat pole přidat tři nová pole: firstName (řetězec), lastName (řetězec) a vipMember (boolean). ID dokumentu lze vygenerovat automaticky.
10. Klikněte Uložit.
11. Chcete-li přidat další záznamy do kolekce „Uživatel“, klikněte na Přidat dokument (přidat dokument je ekvivalent přidání nového záznamu nebo uživatele). Přidejte další čtyři uživatele se stejnými třemi poli.

Databáze je nyní nastavena s některými testovacími daty.

Jak integrovat Firebase do vaší Angular aplikace

Chcete-li získat přístup k těmto datům v místní aplikaci Angular, nejprve nakonfigurujte některá nastavení aplikace pro připojení k databázi Firebase:

1. Ve Firebase přejděte na levý panel a klikněte na Přehled projektu.
2. Vybrat Web tlačítko (označeno lomenými závorkami).
3. Zaregistrujte svou místní aplikaci přidáním názvu aplikace.
4. Nainstalujte Firebase do místní aplikace Angular.

   npm i firebase
   

5. Firebase poté zobrazí některé podrobnosti o konfiguraci. Uložte tyto údaje a klikněte Pokračujte do konzole.
6. Na základě podrobností uvedených v předchozím kroku zkopírujte následující kód do environment.prod.ts a environment.ts v aplikaci Angular.

   export const environment = {
    výroba: pravda,
    firebaseConfig: {
    apiKey: "your-api-key",
    authDomain: "vaše-auth-doména",
    projectId: "id-vašeho-projektu",
    storageBucket: "your-storage-buckey",
    messagingSenderId: "id-vašeho-odesílatele-zprávy",
    appId: "vaše-api-id",
    measurementId: "vaše-id-měření"
    }
   };
   

7. AngularFirestore od @angular/fire/firestore se použije ke konfiguraci Firebase v Angular. Všimněte si, že AngularFirestore není kompatibilní s Angular verze 9 a vyšší. V místní aplikaci Angular spusťte:

   npm i @angular/fire
   

8. Přidejte moduly Firestore a prostředí do sekce importů v app.module.ts.

   import { AngularFireModule } z "@angular/fire";
   import { AngularFirestoreModule } z "@angular/fire/firestore";
   import { prostředí } z "../prostředí/prostředí";
   

9. Moduly Firestore musí být také zahrnuty do pole imports v app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Jak načíst data z Firebase pomocí služby

Obvykle je dobrou praxí mít jeden nebo více services.ts soubory, které používáte ke konkrétní interakci s databází. Funkce, které přidáte do souboru služeb, lze pak volat v jiných souborech TypeScript, stránkách nebo jiných komponentách v rámci aplikace.

1. Vytvořte soubor s názvem service.ts v src/app/services složka.
2. Přidejte modul AngularFirestore do sekce importů a zahrňte jej do konstruktoru.

   import { Injectable } z '@angular/core';
   import { AngularFirestore } z '@angular/fire/firestore';
   @Injekční({
    poskytnuto v: 'kořen'
   })
   exportní třída Service {
    konstruktor (soukromá databáze: AngularFirestore) { }
   }
   

3. Přidejte funkci, která vrací příslib obsahující seznam všech uživatelů. "this.db.collection('Uživatel')"" odkazuje na kolekci "Uživatel" v databázi.

   getAllUsers() {
    vrátit nový slib((vyřešit)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. Chcete-li tuto funkci použít v jiném souboru TypeScript, importujte novou službu a přidejte ji do konstruktoru.

   import { Service } z 'src/app/services/service
   konstruktor (soukromá služba: Služba) {}
   

5. Získejte seznam všech uživatelů pomocí funkce vytvořené v souboru služeb.

   async getUsers() {
    this.allUsers = čekat this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Jak přidat nový záznam do databáze Firebase

Přidejte nový záznam pro uživatele do databáze Firebase.

1. V services.ts přidejte novou funkci pro vytvoření nového záznamu. Tato funkce převezme ID nového uživatele a všechny jeho podrobnosti. K odeslání těchto informací do Firebase a vytvoření nového záznamu používá funkci set Firestore.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("User").doc (_newId).set({firstName: _fName, lastName: _lName, VIPMember: _vip});
   }

2. Zavolejte funkci addNewUser() v jiném souboru TypeScript. Nezapomeňte importovat službu a zahrnout ji do konstruktoru, jak bylo uvedeno výše. K vytvoření nového ID pro uživatele můžete použít generátor náhodných ID.

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

Jak aktualizovat data v databázi Firebase

Firebase má spoustu funkcí, které udělat z něj jeden z nejlepších dostupných nástrojů. Chcete-li aktualizovat určitá pole v konkrétním záznamu, použijte funkci aktualizace Firestore.

1. V souboru service.ts vytvořte funkci s názvem updateUserFirstName(). Tato funkce aktualizuje křestní jméno vybraného uživatelského záznamu. Funkce převezme ID záznamu, který je třeba aktualizovat, a novou hodnotu křestního jména uživatele.

   updateUserFirstName (_id: any, _firstName: string) {
    this.db.doc(`Uživatel/${_id}`).update({firstName: _firstName});
   }

2. Chcete-li aktualizovat více polí pro stejný záznam, stačí rozbalit pole zadávaná ve funkci aktualizace Firestore. Místo pouhého křestního jména přidejte příjmení a aktualizujte jej také novou hodnotou.

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

3. Kteroukoli z výše uvedených funkcí lze použít v jiných souborech TypeScript.

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

Jak odstranit záznam z databáze Firebase

Chcete-li odstranit záznam, použijte funkci odstranění ve Firestore.

1. V souboru service.ts vytvořte funkci s názvem deleteUser(). Tato funkce převezme ID záznamu, který je třeba smazat.

   deleteUser (_id: any) {
    this.db.doc(`Uživatel/${_id}`).delete();
    }
   

2. Výše uvedenou funkci pak lze použít v jiných souborech TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Získejte data Firebase pomocí dotazů a filtrů

Filtr "kde" může filtrovat výsledky vrácené na základě konkrétní podmínky.

1. V services.ts vytvořte funkci, která získá všechny VIP uživatele (pokud je pole vipMember nastaveno na hodnotu true). To je označeno částí „ref.where('vipMember', '==', true)“ níže uvedeného volání Firebase.

   getAllVipMembers() {
    vrátit nový slib((vyřešit)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolve (users))
    })
    }

2. Použijte tuto funkci v jiném souboru TypseScript.

   async getAllVipMembers() {
    this.vipUsers = čekat this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Dotaz lze upravit a přidat další operace, jako je Order By, Start at nebo Limit. Upravte funkci getAllVipMembers() v services.ts tak, aby seřadila podle příjmení. Operace Order By může vyžadovat vytvoření indexu ve Firebase. V takovém případě klikněte na odkaz uvedený v chybové zprávě v konzole.

   getAllVipMembers() {
    vrátit nový slib((vyřešit)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (users) )
    })
    }

4. Upravte dotaz tak, aby vrátil pouze první tři záznamy. K tomu lze použít operace Start At a Limit. To je užitečné, pokud potřebujete implementovat stránkování, což znamená, že se na stránce zobrazí určitý počet záznamů.

   getAllVipMembers() {
    vrátit nový slib((vyřešit)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (uživatelé => vyřešit (uživatelé))
    })
    }

Přidejte další data do Firebase a více požadavků v aplikaci Angular

Při pokusu o načtení dat z databáze Firebase můžete prozkoumat mnoho dalších kombinací dotazů. Doufáme, že nyní chápete, jak nastavit jednoduchou databázi Firebase, jak ji připojit k místní aplikaci Angular a jak číst a zapisovat do databáze.

Můžete se také dozvědět více o dalších službách, které Firebase poskytuje. Firebase je jednou z mnoha platforem, které můžete integrovat s Angular, a bez ohledu na to, zda jste na úrovni začátečníka nebo pokročilého, vždy se toho můžete naučit mnohem víc.

Top 8 úhlových kurzů pro začátečníky a pokročilé uživatele

Přečtěte si další

O autorovi