Ako ukladať, aktualizovať, odstraňovať a získavať údaje z databázy Firebase pomocou Angular

Firebase je platforma, ktorá vám poskytuje množstvo služieb na pomoc pri vytváraní a škálovaní aplikácie. Niektoré z týchto funkcií zahŕňajú hostingové služby, ukladanie údajov a schopnosť sledovať analýzu údajov.

Tento tutoriál sa zameriava hlavne na to, ako vytvárať a pridávať údaje do databázy Firebase a ako vykonávať operácie vytvárania, čítania, zápisu a odstraňovania do databázy z lokálnej aplikácie Angular.

Ako vytvoriť a pridať údaje do databázy Firebase

Za predpokladu, že už máte aplikáciu Angular nastavenú a spustenú lokálne, bude potrebné, aby bola pripojená k databáze Firebase, aby bolo možné ukladať údaje a pristupovať k nim. Ak nepoznáte Angular, môžete si prečítať viac o Angular koncepty, komponenty a celková štruktúra Angular projektu.

Ak ešte nemáte databázu Firebase, môžete použiť poverenia svojho účtu Google na prihlásenie do Firebase a postupovať podľa pokynov. Po nastavení vytvorte projekt:

1. Od Domovská stránka Firebase, vyberte Prejdite do konzoly v pravom hornom rohu stránky.
instagram viewer
2. V časti Vaše projekty Firebase vyberte Pridať projekt.
3. Podľa pokynov vytvorte nový projekt.
4. Po dokončení sa projekt otvorí. Na ľavej strane obrazovky sa nachádza panel so zoznamom funkcií, ktoré Firebase poskytuje. Umiestnite kurzor myši na ikony, kým sa nezobrazí Databáza Firestorea vyberte ju.
5. Vyberte Vytvorte databázu, a postupujte podľa pokynov na vytvorenie databázy.
6. Pri výbere bezpečnostných pravidiel vyberte Spustite v testovacom režime. Toto je možné neskôr zmeniť, aby boli údaje bezpečnejšie. Viac informácií o bezpečnostných pravidlách Firestore si môžete prečítať v nasledujúcom texte Firebase dokumentácia.
7. Po dokončení sa databáza otvorí. Štruktúra databázy používa kolekcie, čo je v podstate rovnaký koncept ako databázové tabuľky. Ak by ste napríklad potrebovali dve tabuľky, jednu na ukladanie informácií o účte a druhú na ukladanie informácií o používateľovi, vytvorili by ste dve kolekcie s názvom Účet a Používateľ.
8. Vyberte Začať zber a pridajte ID zbierky s názvom Používateľ.
9. Pridajte prvý záznam s informáciami o jednom používateľovi. Kliknite na Pridať pole pridať tri nové polia: firstName (reťazec), lastName (reťazec) a vipMember (boolean). ID dokumentu je možné vygenerovať automaticky.
10. Kliknite Uložiť.
11. Ak chcete pridať ďalšie záznamy do kolekcie „Používateľ“, kliknite na Pridať dokument (pridať dokument je ekvivalent pridania nového záznamu alebo používateľa). Pridajte ďalších štyroch používateľov s rovnakými tromi poľami.

Databáza je teraz nastavená s niektorými testovacími údajmi.

Ako integrovať Firebase do vašej aplikácie Angular

Ak chcete získať prístup k týmto údajom vo svojej miestnej aplikácii Angular, najprv nakonfigurujte niektoré nastavenia aplikácie na pripojenie k databáze Firebase:

1. Vo Firebase prejdite na ľavý panel a kliknite na Prehľad projektu.
2. Vyberte Web tlačidlo (označené lomenými zátvorkami).
3. Zaregistrujte svoju miestnu aplikáciu pridaním názvu aplikácie.
4. Nainštalujte si Firebase do miestnej aplikácie Angular.

   npm a firebase
   

5. Firebase potom zobrazí niektoré podrobnosti o konfigurácii. Uložte tieto podrobnosti a kliknite Pokračujte do konzoly.
6. Na základe podrobností uvedených v predchádzajúcom kroku skopírujte nasledujúci kód do environment.prod.ts a environment.ts v aplikácii Angular.

   export const environment = {
    výroba: pravda,
    firebaseConfig: {
    apiKey: "your-api-key",
    authDomain: "vaša-auth-doména",
    projectId: "id-vasho-projektu",
    storageBucket: "your-storage-buckey",
    messagingSenderId: "identifikátor-vašeho-odosielateľa",
    appId: "vaše-api-id",
    measurementId: "vaše-id-merania"
    }
   };
   

7. AngularFirestore od @angular/fire/firestore sa použije na konfiguráciu Firebase v Angular. Upozorňujeme, že AngularFirestore nie je kompatibilný s verziou Angular 9 a novšou. V miestnej aplikácii Angular spustite:

   npm i @angular/fire
   

8. Pridajte moduly Firestore a prostredie do sekcie importov v app.module.ts.

   import { AngularFireModule } z "@angular/fire";
   import { AngularFirestoreModule } z "@angular/fire/firestore";
   import { prostredie } z "../prostredia/prostredie";
   

9. Moduly Firestore je tiež potrebné zahrnúť do poľa importov v app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Ako získať údaje z Firebase pomocou služby

Zvyčajne je dobrou praxou mať jeden alebo viacero services.ts súbory, ktoré používate na špecifickú interakciu s databázou. Funkcie, ktoré pridáte do súboru services, možno potom volať v iných súboroch TypeScript, stránkach alebo iných komponentoch v rámci aplikácie.

1. Vytvorte súbor s názvom service.ts v src/app/services priečinok.
2. Pridajte modul AngularFirestore do sekcie importov a zahrňte ho do konštruktora.

   import { Injectable } z '@angular/core';
   import { AngularFirestore } z '@angular/fire/firestore';
   @Injekčné ({
    poskytnuté v: 'root'
   })
   export class Service {
    konštruktor (súkromná databáza: AngularFirestore) { }
   }
   

3. Pridajte funkciu, ktorá vráti prísľub obsahujúci zoznam všetkých používateľov. "this.db.collection('Používateľ')“ označuje kolekciu „Používateľ“ v databáze.

   getAllUsers() {
    vrátiť nový prísľub((vyriešiť)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. Ak chcete použiť túto funkciu v inom súbore TypeScript, importujte novú službu a pridajte ju do konštruktora.

   importovať { Service } z 'src/app/services/service
   konštruktor (súkromná služba: služba) {}
   

5. Získajte zoznam všetkých používateľov pomocou funkcie vytvorenej v súbore služieb.

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

Ako pridať nový záznam do databázy Firebase

Pridajte nový záznam pre používateľa do databázy Firebase.

1. V services.ts pridajte novú funkciu na vytvorenie nového záznamu. Táto funkcia prevezme ID nového používateľa a všetky jeho podrobnosti. Používa funkciu nastavenia Firestore na odoslanie týchto informácií do Firebase a vytvorenie nového záznamu.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("Používateľ").doc (_newId).set({firstName: _fMeno, priezvisko: _lName, vipMember: _vip});
   }

2. Zavolajte funkciu addNewUser() v inom súbore TypeScript. Nezabudnite importovať službu a zahrnúť ju do konštruktora, ako je uvedené vyššie. Na vytvorenie nového ID pre používateľa môžete použiť generátor náhodných identifikátorov.

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

Ako aktualizovať údaje v databáze Firebase

Firebase má veľa funkcií, ktoré urobiť z neho jeden z najlepších dostupných nástrojov. Ak chcete aktualizovať určité polia v konkrétnom zázname, použite funkciu aktualizácie Firestore.

1. V súbore service.ts vytvorte funkciu s názvom updateUserFirstName(). Táto funkcia aktualizuje krstné meno vybraného záznamu používateľa. Funkcia prevezme ID záznamu, ktorý je potrebné aktualizovať, a novú hodnotu krstného mena používateľa.

   updateUserFirstName (_id: any, _firstName: string) {
    this.db.doc(`Používateľ/${_id}`).update({firstName: _firstName});
   }

2. Ak chcete aktualizovať viacero polí pre rovnaký záznam, rozbaľte polia, ktoré sa zadávajú vo funkcii aktualizácie Firestore. Namiesto krstného mena pridajte aj priezvisko, aby ste ho aktualizovali aj novou hodnotou.

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`Používateľ/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Ktorúkoľvek z vyššie uvedených funkcií možno použiť v iných súboroch TypeScript.

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

Ako odstrániť záznam z databázy Firebase

Ak chcete odstrániť záznam, použite funkciu vymazania Firestore.

1. V súbore service.ts vytvorte funkciu s názvom deleteUser(). Táto funkcia prevezme ID záznamu, ktorý je potrebné vymazať.

   deleteUser (_id: any) {
    this.db.doc(`Používateľ/${_id}`).delete();
    }
   

2. Vyššie uvedená funkcia sa potom môže použiť v iných súboroch TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Získajte údaje Firebase pomocou dopytov a filtrov

Filter „kde“ môže filtrovať výsledky, ktoré sa vrátia na základe konkrétnej podmienky.

1. V services.ts vytvorte funkciu, ktorá získa všetkých VIP používateľov (to je, ak je pole vipMember nastavené na hodnotu true). Označuje to časť „ref.where('vipMember', '==', true)“ vo volaní Firebase nižšie.

   getAllVipMembers() {
    vrátiť nový prísľub((vyriešiť)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolve (users))
    })
    }

2. Použite túto funkciu v inom súbore TypseScript.

   async getAllVipMembers() {
    this.vipUsers = čaká na this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Dotaz možno upraviť tak, aby sa pridali ďalšie operácie, ako napríklad Objednať podľa, Začať od alebo Obmedziť. Upravte funkciu getAllVipMembers() v súbore services.ts tak, aby sa zoradila podľa priezviska. Operácia Order By môže vyžadovať vytvorenie indexu vo Firebase. Ak je to tak, kliknite na odkaz uvedený v chybovom hlásení v konzole.

   getAllVipMembers() {
    vrátiť nový prísľub((vyriešiť)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (users) )
    })
    }

4. Upravte dotaz tak, aby vrátil iba prvé tri záznamy. Na to možno použiť operácie Štart na a Limit. Je to užitočné, ak potrebujete implementovať stránkovanie, čo je prípad, keď sa na stránke zobrazuje určitý počet záznamov.

   getAllVipMembers() {
    vrátiť nový prísľub((vyriešiť)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (users => vyriešiť (users))
    })
    }

Pridajte ďalšie údaje do Firebase a ďalšie požiadavky v aplikácii Angular

Existuje mnoho ďalších kombinácií dopytov, ktoré môžete preskúmať pri pokuse o načítanie údajov z databázy Firebase. Dúfajme, že teraz chápete, ako nastaviť jednoduchú databázu Firebase, ako ju pripojiť k lokálnej aplikácii Angular a ako čítať a zapisovať do databázy.

Môžete sa tiež dozvedieť viac o ďalších službách, ktoré Firebase poskytuje. Firebase je jednou z mnohých platforiem, ktoré môžete integrovať s Angular, a bez ohľadu na to, či ste na úrovni začiatočníkov alebo pokročilých, vždy sa môžete naučiť oveľa viac.

8 najlepších uhlových kurzov pre začiatočníkov a pokročilých používateľov

Prečítajte si ďalej

O autorovi