Adatok tárolása, frissítése, törlése és visszakeresése Firebase adatbázisból az Angular használatával

A Firebase egy olyan platform, amely számos szolgáltatást kínál az alkalmazások felépítéséhez és méretezéséhez. Néhány ilyen szolgáltatás magában foglalja a hosting szolgáltatásokat, az adattárolást és az adatelemzés nyomon követésének lehetőségét.

Ez az oktatóanyag elsősorban arra összpontosít, hogyan hozhat létre és adhat hozzá adatokat egy Firebase-adatbázishoz, valamint hogyan hajthat végre létrehozási, olvasási, írási és törlési műveleteket az adatbázisban egy helyi Angular alkalmazásból.

Adatok létrehozása és hozzáadása Firebase adatbázishoz

Feltéve, hogy már be van állítva és helyileg fut egy Angular alkalmazás, akkor azt egy Firebase-adatbázishoz kell csatlakoztatni az adatok tárolásához és eléréséhez. Ha nem ismeri az Angular-t, akkor többet olvashat róla Az Angular projekt szögfogalmai, összetevői és általános felépítése.

Ha még nem rendelkezik Firebase-adatbázissal, Google-fiókja hitelesítő adataival bejelentkezhet a Firebase-be, és követheti az utasításokat. Ha ez be van állítva, hozzon létre egy projektet:

1. Tól től A Firebase kezdőlapja, válassza ki Menjen a Konzolra a webhely jobb felső sarkában.
2. A „Firebase-projektjei” részben válassza ki a lehetőséget Projekt hozzáadása.
3. Kövesse az utasításokat egy új projekt létrehozásához.
4. Ha elkészült, a projekt megnyílik. A képernyő bal oldalán található egy panel, amely felsorolja a Firebase által biztosított funkciókat. Vigye az egérmutatót az ikonok fölé, amíg meg nem jelenik Firestore adatbázis, és válassza ki azt.
5. Válassza ki adatbázis létrehozása, és kövesse az utasításokat az adatbázis létrehozásához.
6. A biztonsági szabályok kiválasztásakor válassza a lehetőséget Indítsa el teszt üzemmódban. Ez később módosítható az adatok nagyobb biztonsága érdekében. A Firestore biztonsági szabályairól bővebben az alábbiakban olvashat Firebase dokumentáció.
7. Ha elkészült, megnyílik az adatbázis. Az adatbázis-struktúra gyűjteményeket használ, ami lényegében ugyanaz, mint az adatbázistáblák koncepciója. Például, ha két táblára van szüksége, egy a fiókadatok tárolására, egy pedig a felhasználói adatok tárolására, akkor két gyűjteményt kell létrehoznia Fiók és Felhasználó néven.
8. Válassza ki Indítsa el a gyűjtést és adjon hozzá egy „Felhasználó” nevű gyűjteményazonosítót.
9. Adja hozzá az első rekordot egy felhasználó adataival. Kattintson Mező hozzáadása három új mező hozzáadásához: keresztnév (karakterlánc), vezetéknév (karakterlánc) és vipMember (logikai érték). A dokumentumazonosító automatikusan generálható.
10. Kattintson Megment.
11. Ha további rekordokat szeretne hozzáadni a "Felhasználó" gyűjteményhez, kattintson a gombra Dokumentum hozzáadása (A dokumentum hozzáadása egyenértékű egy új rekord vagy felhasználó hozzáadásával). Adjon hozzá további négy felhasználót ugyanazzal a három mezővel.

Az adatbázis most be van állítva néhány tesztadatokkal.

A Firebase integrálása az Angular alkalmazásba

Az adatok helyi Angular alkalmazásban való eléréséhez először konfiguráljon néhány alkalmazásbeállítást a Firebase adatbázishoz való csatlakozáshoz:

1. A Firebase alkalmazásban lépjen a bal oldali panelre, és kattintson a gombra A projekt áttekintése.
2. Válaszd ki a Web gombot (szögzárójelek jelzik).
3. Regisztrálja helyi alkalmazását az alkalmazás nevének hozzáadásával.
4. Telepítse a Firebase-t a helyi Angular alkalmazásban.

   npm és Firebase
   

5. A Firebase ezután megjelenít néhány konfigurációs részletet. Mentse el ezeket az adatokat, és kattintson Tovább a konzolhoz.
6. Az előző lépésben megadott adatok alapján másolja a következő kódot az Environment.prod.ts és Environment.ts fájlba az Angular alkalmazásban.

   export const környezet = {
    gyártás: igaz,
    firebaseConfig: {
    apiKey: "api-kulcs",
    authDomain: "a-auth-domain",
    projektazonosító: "a projekt-azonosító",
    storageBucket: "your-storage-bckey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "api-azonosító",
    mérésazonosító: "mérésazonosító"
    }
   };
   

7. AngularFirestore from @angular/fire/firestore a Firebase szögletes beállításához lesz használva. Vegye figyelembe, hogy az AngularFirestore nem kompatibilis az Angular 9-es és újabb verziójával. A helyi Angular alkalmazásban futtassa:

   npm i @szögletes/tűz
   

8. Adja hozzá a Firestore- és környezetmodulokat az app.module.ts importálási szakaszához.

   import { AngularFireModule } innen: "@angular/fire";
   import { AngularFirestoreModule } innen: "@angular/fire/firestore";
   import { környezet } innen: "../environments/environments";
   

9. A Firestore modulokat az app.module.ts importálási tömbjében is szerepeltetni kell.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Adatok lekérése a Firebase-ből szolgáltatás használatával

Általában jó gyakorlat egy vagy több szolgáltatások.ts fájlok, amelyeket kifejezetten az adatbázissal való interakcióhoz használ. A szolgáltatások fájlhoz hozzáadott funkciók ezután más TypeScript-fájlokban, oldalakon vagy más összetevőkben hívhatók meg az alkalmazásban.

1. Hozzon létre egy service.t nevű fájlt a src/app/services mappát.
2. Adja hozzá az AngularFirestore modult az importálási szakaszhoz, és foglalja bele a konstruktorba.

   import { Injectable } from "@angular/core";
   import { AngularFirestore } innen: '@angular/fire/firestore';
   @Injektálható({
    provideIn: 'root'
   })
   export class szolgáltatás {
    konstruktor (privát db: AngularFirestore) { }
   }
   

3. Adjon hozzá egy olyan függvényt, amely ígéretet ad vissza, amely tartalmazza az összes felhasználó listáját. "this.db.collection('Felhasználó')" a "Felhasználó" gyűjteményre utal az adatbázisban.

   getAllUsers() {
    adja vissza az új ígéretet((megold)=> {
    this.db.collection('Felhasználó').valueChanges({ idField: 'id' }).subscribe (felhasználók => felbontás (felhasználók));
    })
   }
   

4. Ha ezt a funkciót egy másik TypeScript-fájlban szeretné használni, importálja az új szolgáltatást, és adja hozzá a konstruktorhoz.

   importáljon { Service } innen: 'src/app/services/service
   kivitelező (magánszolgáltatás: szolgáltatás) {}
   

5. Szerezze meg az összes felhasználó listáját a Services fájlban létrehozott függvény használatával.

   async getUsers() {
    this.allUsers = várja ezt.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Új rekord hozzáadása a Firebase adatbázishoz

Adjon hozzá egy új rekordot egy felhasználóhoz a Firebase-adatbázishoz.

1. Új rekord létrehozásához adjon hozzá egy új függvényt a services.ts fájlhoz. Ez a funkció egy új felhasználói azonosítót és annak összes adatát veszi fel. A Firestore beállított funkcióját használja, hogy elküldje ezeket az információkat a Firebase-nek, és új rekordot hozzon létre.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: logikai érték) {
    this.db.collection("Felhasználó").doc (_newId).set({keresztnév: _fName, vezetéknév: _lName, vipMember: _vip});
   }

2. Hívja meg az addNewUser() függvényt egy másik TypeScript-fájlban. Ne felejtse el importálni a szolgáltatást, és belefoglalni a konstruktorba, ahogy korábban is mutattuk. Nyugodtan használjon véletlenszerű azonosító generátort az új azonosító létrehozásához a felhasználó számára.

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

Adatok frissítése a Firebase adatbázisban

A Firebase számos funkcióval rendelkezik hogy az egyik legjobb elérhető eszköz legyen. Egy adott rekord bizonyos mezőinek frissítéséhez használja a Firestore frissítési funkcióját.

1. A service.ts fájlban hozzon létre egy updateUserFirstName() függvényt. Ez a funkció frissíti a kiválasztott felhasználói rekord keresztnevét. A függvény beveszi a frissítendő rekord azonosítóját és a felhasználó keresztnevének új értékét.

   updateUserFirstName (_id: any, _firstName: string) {
    this.db.doc(`Felhasználó/${_id}`).update({firstName: _firstName});
   }

2. Ha több mezőt szeretne frissíteni ugyanahhoz a rekordhoz, csak bontsa ki a Firestore frissítési funkciójában beírandó mezőket. A keresztnév helyett adja hozzá a vezetéknevet, hogy azt is új értékkel frissítse.

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`Felhasználó/${_id}`).update({keresztnév: _keresztnév, vezetéknév: _lastName});
   }

3. A fenti funkciók bármelyike ​​használható más TypeScript-fájlokban.

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

Rekord törlése a Firebase adatbázisból

Rekord törléséhez használja a Firestore törlés funkcióját.

1. A service.ts fájlban hozzon létre egy deleteUser() nevű függvényt. Ez a funkció beveszi a törölni kívánt rekord azonosítóját.

   deleteUser (_id: any) {
    this.db.doc(`Felhasználó/${_id}`).delete();
    }
   

2. A fenti függvény ezután más TypeScript-fájlokban is használható.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Firebase-adatok lekérése lekérdezések és szűrők segítségével

A „hol” szűrő egy adott feltétel alapján szűrheti a visszaadott eredményeket.

1. A services.ts fájlban hozzon létre egy függvényt, amely megkapja az összes VIP felhasználót (ez akkor van, ha a vipMember mező igazra van állítva). Ezt az alábbi Firebase-hívás "ref.where('vipMember', '==', true)" része jelzi.

   getAllVipMembers() {
    adja vissza az új ígéretet((megold)=> {
    this.db.collection('Felhasználó', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => felbontás (felhasználók))
    })
    }

2. Használja ezt a funkciót egy másik TypeScript fájlban.

   async getAllVipMembers() {
    this.vipUsers = várja ezt.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. A lekérdezés módosítható további műveletek hozzáadásához, például Rendezési alap, Kezdés időpontja vagy Korlátozás. Módosítsa a getAllVipMembers() függvényt a services.ts fájlban a vezetéknév szerinti sorrendbe. A Rendezés szerint művelethez szükség lehet egy index létrehozására a Firebase-ben. Ha ez a helyzet, kattintson a konzol hibaüzenetében található hivatkozásra.

   getAllVipMembers() {
    adja vissza az új ígéretet((megold)=> {
    this.db.collection('Felhasználó', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (felhasználók => felbontás (felhasználók) )
    })
    }

4. Módosítsa a lekérdezést úgy, hogy csak az első három rekordot adja vissza. Ehhez a Start At és Limit műveletek használhatók. Ez akkor hasznos, ha lapozást kell megvalósítania, vagyis amikor bizonyos számú rekord jelenik meg oldalanként.

   getAllVipMembers() {
    adja vissza az új ígéretet((megold)=> {
    this.db.collection('Felhasználó', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (felhasználók => feloldás (felhasználók))
    })
    }

További adatok hozzáadása a Firebase-hez és további kérések az Angular alkalmazásban

Számos más lekérdezési kombinációt is felfedezhet, amikor adatokat próbál lekérni egy Firebase-adatbázisból. Remélhetőleg most már megérti, hogyan állíthat be egy egyszerű Firebase-adatbázist, hogyan csatlakoztathatja azt egy helyi Angular-alkalmazáshoz, és hogyan lehet olvasni és írni az adatbázisba.

További információ a Firebase által nyújtott egyéb szolgáltatásokról is. A Firebase egyike a sok platformnak, amelyeket integrálhat az Angular-ral, és függetlenül attól, hogy kezdő vagy haladó szinten van-e, mindig van még mit tanulni.

A legjobb 8 szögtanfolyam kezdőknek és haladóknak

Olvassa el a következőt

A szerzőről