Kā uzglabāt, atjaunināt, dzēst un izgūt datus no Firebase datu bāzes, izmantojot Angular

Firebase ir platforma, kas nodrošina daudzus pakalpojumus, lai palīdzētu izveidot un mērogot lietojumprogrammu. Dažas no šīm funkcijām ietver mitināšanas pakalpojumus, datu glabāšanu un iespēju izsekot datu analīzi.

Šī apmācība galvenokārt ir vērsta uz to, kā izveidot un pievienot datus Firebase datu bāzei, kā arī veikt izveides, lasīšanas, rakstīšanas un dzēšanas darbības datu bāzē no vietējās Angular lietojumprogrammas.

Kā izveidot un pievienot datus Firebase datu bāzei

Pieņemot, ka Angular lietojumprogramma jau ir iestatīta un darbojas lokāli, tai būs jābūt savienotai ar Firebase datu bāzi, lai saglabātu un piekļūtu datiem. Ja neesat pazīstams ar Angular, varat lasīt vairāk par to Angular projekta leņķiskās koncepcijas, komponenti un vispārējā struktūra.

Ja jums vēl nav Firebase datu bāzes, varat izmantot sava Google konta akreditācijas datus, lai pieteiktos Firebase un izpildītu uzvednēs. Kad tas ir iestatīts, izveidojiet projektu:

1. No Firebase sākumlapa, atlasiet Dodieties uz konsoli vietnes augšējā labajā stūrī.
instagram viewer
2. Sadaļā “Jūsu Firebase projekti” atlasiet Pievienot projektu.
3. Izpildiet norādījumus, lai izveidotu jaunu projektu.
4. Pēc pabeigšanas projekts tiks atvērts. Ekrāna kreisajā pusē ir panelis, kurā uzskaitītas Firebase piedāvātās funkcijas. Virziet kursoru virs ikonām, līdz redzat Firestore datu bāzeun atlasiet to.
5. Izvēlieties Izveidot datu bāzi, un izpildiet norādījumus, lai izveidotu datu bāzi.
6. Atlasot drošības noteikumus, atlasiet Sāciet testa režīmā. To vēlāk var mainīt, lai nodrošinātu datu drošību. Vairāk par Firestore drošības noteikumiem varat lasīt, sekojot Firebase dokumentācija.
7. Kad tas būs pabeigts, tiks atvērta datu bāze. Datu bāzes struktūrā tiek izmantotas kolekcijas, kas būtībā ir tāds pats jēdziens kā datu bāzes tabulas. Piemēram, ja jums ir vajadzīgas divas tabulas, viena konta informācijas glabāšanai un viena lietotāja informācijas glabāšanai, jums ir jāizveido divas kolekcijas ar nosaukumu Konts un Lietotājs.
8. Izvēlieties Sāciet savākšanu un pievienojiet kolekcijas ID ar nosaukumu “Lietotājs”.
9. Pievienojiet pirmo ierakstu ar informāciju par vienu lietotāju. Klikšķiniet uz Pievienot lauku lai pievienotu trīs jaunus laukus: firstName (virkne), LastName (virkne) un vipMember (būla). Dokumenta ID var tikt ģenerēts automātiski.
10. Klikšķis Saglabāt.
11. Lai kolekcijai "Lietotājs" pievienotu citus ierakstus, noklikšķiniet uz Pievienojiet dokumentu (pievienot dokumentu ir līdzvērtīgs jauna ieraksta vai lietotāja pievienošanai). Pievienojiet vēl četrus lietotājus ar tiem pašiem trim laukiem.

Datubāze tagad ir iestatīta ar dažiem testa datiem.

Kā integrēt Firebase savā Angular lietojumprogrammā

Lai piekļūtu šiem datiem vietējā Angular lietojumprogrammā, vispirms konfigurējiet dažus lietotnes iestatījumus, lai izveidotu savienojumu ar Firebase datu bāzi.

1. Programmā Firebase atveriet kreiso paneli un noklikšķiniet uz projekta pārskats.
2. Izvēlieties Web pogu (norādīts ar leņķa iekavām).
3. Reģistrējiet savu vietējo lietotni, pievienojot tās nosaukumu.
4. Instalējiet Firebase vietējā Angular lietojumprogrammā.

   npm i Firebase
   

5. Pēc tam Firebase parādīs noteiktu konfigurācijas informāciju. Saglabājiet šo informāciju un noklikšķiniet uz Turpiniet uz konsoli.
6. Pamatojoties uz iepriekšējā darbībā sniegto informāciju, kopējiet tālāk norādīto kodu lietojumprogrammas Angular failos Environment.prod.ts un Environment.ts.

   eksportēt const vidi = {
    ražošana: patiesa,
    firebaseConfig: {
    apiKey: "jūsu-api-key",
    authDomain: "jūsu-auth-domain",
    projekta ID: "jūsu projekta ID",
    storageBucket: "jūsu-krātuve-bickey",
    messagingSenderId: "jūsu ziņojumapmaiņas sūtītāja ID",
    appId: "jūsu-api-id",
    mérés ID: "jūsu mērījuma ID"
    }
   };
   

7. AngularFirestore no @angular/fire/firestore tiks izmantots, lai konfigurētu Firebase režīmā Angular. Ņemiet vērā, ka AngularFirestore nav saderīgs ar Angular versiju 9 un jaunākām versijām. Vietējā Angular lietotnē palaidiet:

   npm i @angular/fire
   

8. Pievienojiet Firestore un vides moduļus faila app.module.ts importēšanas sadaļai.

   importēt { AngularFireModule } no "@angular/fire";
   importēt { AngularFirestoreModule } no "@angular/fire/firestore";
   importēt { vidi } no "../environments/environments";
   

9. Firestore moduļi ir jāiekļauj arī importēšanas masīvā failā app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Kā izgūt datus no Firebase, izmantojot pakalpojumu

Parasti laba prakse ir viena vai vairākas pakalpojumi.ts failus, kurus izmantojat, lai īpaši mijiedarbotos ar datu bāzi. Funkcijas, ko pievienojat pakalpojumu failam, var izsaukt citos TypeScript failos, lapās vai citos komponentos visā lietojumprogrammā.

1. Izveidojiet failu ar nosaukumu service.ts src/app/services mapi.
2. Pievienojiet AngularFirestore moduli importēšanas sadaļai un iekļaujiet to konstruktorā.

   importēt { Injectable } no '@angular/core';
   importēt { AngularFirestore } no '@angular/fire/firestore';
   @Injicējams({
    provideIn: 'sakne'
   })
   eksporta klases pakalpojums {
    konstruktors (privāts db: AngularFirestore) { }
   }
   

3. Pievienojiet funkciju, kas atgriež solījumu, kurā ir visu lietotāju saraksts. "this.db.collection('Lietotājs')" attiecas uz datubāzes kolekciju "Lietotājs".

   getAllUsers() {
    atgriezt jaunu solījumu((atrisināt)=> {
    this.db.collection('Lietotājs').valueChanges({ idField: 'id' }).subscribe (lietotāji => atrisināt (lietotāji));
    })
   }
   

4. Lai izmantotu šo funkciju citā TypeScript failā, importējiet jauno pakalpojumu un pievienojiet to konstruktoram.

   importēt { Service} no 'src/app/services/service
   konstruktors (privātais pakalpojums: pakalpojums) {}
   

5. Iegūstiet visu lietotāju sarakstu, izmantojot pakalpojumu failā izveidoto funkciju.

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

Kā Firebase datu bāzei pievienot jaunu ierakstu

Pievienojiet jaunu lietotāja ierakstu Firebase datu bāzē.

1. Vietnē services.t pievienojiet jaunu funkciju, lai izveidotu jaunu ierakstu. Šī funkcija uzņem jaunu lietotāja ID un visu informāciju par to. Tas izmanto Firestore iestatīto funkciju, lai nosūtītu šo informāciju uz Firebase un izveidotu jaunu ierakstu.

   addNewUser (_newId: jebkurš, _fName: virkne, _lName: virkne, _vip: Būla) {
    this.db.collection("Lietotājs").doc (_newId).set({firstName: _fName, uzvārds: _lVārds, vipMember: _vip});
   }

2. Izsauciet funkciju addNewUser() citā TypeScript failā. Neaizmirstiet importēt pakalpojumu un iekļaut to konstruktorā, kā parādīts iepriekš. Izmantojiet nejaušu ID ģeneratoru, lai izveidotu jaunu lietotāja ID.

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

Kā atjaunināt datus Firebase datu bāzē

Firebase ir daudz funkciju, kas padariet to par vienu no labākajiem pieejamajiem rīkiem. Lai atjauninātu noteiktus laukus konkrētā ierakstā, izmantojiet Firestore atjaunināšanas funkciju.

1. Failā service.ts izveidojiet funkciju updateUserFirstName(). Šī funkcija atjauninās izvēlētā lietotāja ieraksta vārdu. Funkcija ņem tā ieraksta ID, kas ir jāatjaunina, un lietotāja vārda jauno vērtību.

   updateUserFirstName (_id: jebkurš, _firstName: virkne) {
    this.db.doc(`Lietotājs/${_id}`).update({firstName: _firstName});
   }

2. Lai atjauninātu vairākus laukus vienam ierakstam, vienkārši izvērsiet laukus, kas tiek ievadīti Firestore atjaunināšanas funkcijā. Tikai vārda vietā pievienojiet uzvārdu, lai atjauninātu to ar jaunu vērtību.

   updateUserFullName (_id: jebkurš, _firstName: virkne, _lastName: virkne) {
    this.db.doc(`Lietotājs/${_id}`).update({vārds: _vārds, uzvārds: _uzvārds});
   }

3. Jebkuru no iepriekšminētajām funkcijām var izmantot citos TypeScript failos.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kejs", "Džounss");

Kā izdzēst ierakstu no Firebase datu bāzes

Lai dzēstu ierakstu, izmantojiet Firestore dzēšanas funkciju.

1. Failā service.ts izveidojiet funkciju deleteUser(). Šī funkcija uzņem tā ieraksta ID, kas ir jāizdzēš.

   deleteUser (_id: any) {
    this.db.doc(`Lietotājs/${_id}`).delete();
    }
   

2. Iepriekš minēto funkciju var izmantot citos TypeScript failos.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Izgūstiet Firebase datus, izmantojot vaicājumus un filtrus

Filtrs “kur” var filtrēt rezultātus, kas tiek atgriezti, pamatojoties uz konkrētu nosacījumu.

1. Vietnē services.t izveidojiet funkciju, kas iegūst visus VIP lietotājus (tas ir, ja vipMember lauks ir iestatīts uz True). To norāda tālāk esošā Firebase izsaukuma daļa “ref.where('vipMember', '==', true)”.

   getAllVipMembers() {
    atgriezt jaunu solījumu((atrisināt)=> {
    this.db.collection('Lietotājs', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (lietotāji => atrisināt (lietotāji))
    })
    }

2. Izmantojiet šo funkciju citā TypseScript failā.

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

3. Vaicājumu var modificēt, lai pievienotu citas darbības, piemēram, Pasūtījuma pēc, Sākums vai Limits. Pārveidojiet funkciju getAllVipMembers() vietnē services.ts, lai sakārtotu pēc uzvārda. Lai veiktu pasūtījumu pēc darbības, pakalpojumā Firebase var būt nepieciešams izveidot indeksu. Ja tas tā ir, noklikšķiniet uz saites, kas norādīta konsoles kļūdas ziņojumā.

   getAllVipMembers() {
    atgriezt jaunu solījumu((atrisināt)=> {
    this.db.collection('Lietotājs', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (lietotāji => atrisināt (lietotāji) )
    })
    }

4. Modificējiet vaicājumu, lai atgrieztu tikai pirmos trīs ierakstus. Šim nolūkam var izmantot darbības Start At un Limit. Tas ir noderīgi, ja nepieciešams ieviest peidžeru, proti, vienā lapā tiek parādīts noteikts ierakstu skaits.

   getAllVipMembers() {
    atgriezt jaunu solījumu((atrisināt)=> {
    this.db.collection('Lietotājs', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (lietotāji => atrisināt (lietotāji))
    })
    }

Pievienojiet vairāk datu Firebase un citus pieprasījumus lietotnē Angular

Ir daudzas citas vaicājumu kombinācijas, kuras varat izpētīt, mēģinot izgūt datus no Firebase datu bāzes. Cerams, ka tagad saprotat, kā iestatīt vienkāršu Firebase datu bāzi, kā to savienot ar vietējo Angular lietojumprogrammu un kā lasīt un rakstīt datu bāzē.

Varat arī uzzināt vairāk par citiem Firebase piedāvātajiem pakalpojumiem. Firebase ir viena no daudzajām platformām, ko varat integrēt ar Angular, un neatkarīgi no tā, vai esat iesācēja vai progresīva līmenī, vienmēr ir vēl daudz ko mācīties.

8 labākie leņķiskie kursi iesācējiem un pieredzējušiem lietotājiem

Lasiet Tālāk

Par autoru