Ինչպես պահել, թարմացնել, ջնջել և առբերել տվյալները Firebase տվյալների բազայից Angular-ի միջոցով

Տվյալների բազան այժմ ստեղծվել է փորձարկման որոշ տվյալների հետ:

Ինչպես ինտեգրել Firebase-ը ձեր անկյունային հավելվածում

Ձեր տեղական Angular հավելվածում այս տվյալները մուտք գործելու համար նախ կարգավորեք հավելվածի որոշ կարգավորումներ Firebase տվյալների բազայի հետ միանալու համար.

1. Firebase-ում անցեք ձախ կողմի վահանակ և սեղմեք Նախագծի ընդհանուր տեսություն:
2. Ընտրեք Web կոճակը (նշված է Անկյունային փակագծերով):

3. Գրանցեք ձեր տեղական հավելվածը՝ ավելացնելով հավելվածի անունը:

   

4. Տեղադրեք Firebase-ը ձեր տեղական Angular հավելվածում:

   npm i firebase
   

5. Այնուհետև Firebase-ը կցուցադրի կազմաձևման որոշ մանրամասներ: Պահպանեք այս մանրամասները և սեղմեք Շարունակել կոնսոլին:

6. Ելնելով նախորդ քայլում տրված մանրամասներից՝ պատճենեք հետևյալ կոդը Angular հավելվածի միջավայրում.prod.ts և ambient.ts:

   export const environment = {
     production: true,
     firebaseConfig: {
       apiKey: "your-api-key",
       authDomain: "your-auth-domain",
       projectId: "your-project-id",
       storageBucket: "your-storage-buckey",
       messagingSenderId: "your-messaging-sender-id",
       appId: "your-api-id",
       measurementId: "your-measurement-id"
     }
   };
   

7. AngularFirestore-ը @angular/fire/firestore-ից կօգտագործվի Firebase-ը Angular-ում կարգավորելու համար: Նկատի ունեցեք, որ AngularFirestore-ը համատեղելի չէ Angular 9-րդ և ավելի բարձր տարբերակի հետ: Տեղական Angular հավելվածում գործարկեք՝

   npm i @angular/fire
   

8. Ավելացրեք Firestore և շրջակա միջավայրի մոդուլները app.module.ts-ի ներմուծման բաժնում:

   import { AngularFireModule } from "@angular/fire";
   import { AngularFirestoreModule } from "@angular/fire/firestore";
   import { environment } from "../environments/environment";
   

9. Firestore մոդուլները նույնպես պետք է ներառվեն app.module.ts-ի ներմուծման զանգվածում:

   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,

Ինչպես ստանալ տվյալներ Firebase-ից՝ օգտագործելով ծառայությունը

Սովորաբար լավ պրակտիկա է ունենալ մեկ կամ մի քանի services.ts ֆայլ, որոնք դուք օգտագործում եք տվյալների բազայի հետ հատուկ փոխազդեցության համար: Գործառույթները, որոնք ավելացնում եք ծառայությունների ֆայլում, այնուհետև կարող են կանչվել այլ TypeScript ֆայլերում, էջերում կամ այլ բաղադրիչներում ամբողջ հավելվածում:

1. src/app/services պանակում ստեղծեք service.ts անունով ֆայլ:

2. Ներմուծման բաժնում ավելացրեք AngularFirestore մոդուլը և ներառեք այն կոնստրուկտորում:

   import { Injectable } from '@angular/core';
   import { AngularFirestore } from '@angular/fire/firestore';
   @Injectable({
     providedIn: 'root'
   })
   export class Service {
     constructor(private db: AngularFirestore) { }
   }
   

3. Ավելացրեք գործառույթ, որը վերադարձնում է խոստում, որը պարունակում է բոլոր օգտագործողների ցուցակը: «this.db.collection('User')»-ը վերաբերում է տվյալների բազայի «Օգտատեր» հավաքածուին:

   getAllUsers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User').valueChanges({ idField: 'id' }).subscribe(users => resolve(users));
       })
   }
   

4. Այս ֆունկցիան մեկ այլ TypeScript ֆայլում օգտագործելու համար ներմուծեք նոր ծառայությունը և ավելացրեք այն կոնստրուկտորին:

   import { Service } from 'src/app/services/service
   constructor(private service: Service) {}
   

5. Ստացեք ծառայությունների ֆայլում ստեղծված գործառույթից օգտվող բոլոր օգտատերերի ցանկը:

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

Ինչպես ավելացնել նոր գրառում Firebase տվյալների բազայում

Օգտատիրոջ համար նոր գրառում ավելացրեք Firebase տվյալների բազայում:

1. Services.ts-ում ավելացրեք նոր գործառույթ՝ նոր գրառում ստեղծելու համար: Այս ֆունկցիան ընդունում է նոր օգտվողի ID-ն և նրա բոլոր տվյալները: Այն օգտագործում է Firestore-ի set ֆունկցիան այդ տեղեկատվությունը Firebase-ին ուղարկելու և նոր գրառում ստեղծելու համար:

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

2. Կանչեք addNewUser() ֆունկցիան մեկ այլ TypeScript ֆայլում: Մի մոռացեք ներմուծել ծառայությունը և ներառել այն կոնստրուկտորում, ինչպես ցույց է տրված ավելի վաղ: Ազատորեն օգտագործեք պատահական ID գեներատոր՝ օգտագործողի համար նոր ID-ն ստեղծելու համար:

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

Ինչպես թարմացնել տվյալները Firebase տվյալների բազայում

Firebase-ն ունի բազմաթիվ գործառույթներ, որոնք այն դարձնում են լավագույն հասանելի գործիքներից մեկը: Որոշակի գրառումներում որոշակի դաշտեր թարմացնելու համար օգտագործեք Firestore-ի թարմացման գործառույթը:

1. Service.ts ֆայլում ստեղծեք գործառույթ, որը կոչվում է updateUserFirstName(): Այս գործառույթը կթարմացնի ընտրված օգտվողի գրառումների անունը: Ֆունկցիան ընդունում է թարմացման կարիք ունեցող գրառման ID-ն և օգտագործողի անվան նոր արժեքը:

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

2. Միևնույն գրառման համար մի քանի դաշտեր թարմացնելու համար պարզապես ընդարձակեք այն դաշտերը, որոնք մուտքագրվում են Firestore-ի թարմացման գործառույթի ներսում: Պարզապես firstName-ի փոխարեն ավելացրեք ազգանունը, որպեսզի այն նույնպես թարմացվի նոր արժեքով:

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

3. Վերոնշյալ գործառույթներից որևէ մեկը կարող է օգտագործվել այլ TypeScript ֆայլերում:

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

Ինչպես ջնջել գրառումը Firebase տվյալների բազայից

Գրառումը ջնջելու համար օգտագործեք Firestore-ի ջնջման գործառույթը:

1. Service.ts ֆայլում ստեղծեք գործառույթ, որը կոչվում է deleteUser(): Այս ֆունկցիան ընդունում է այն գրառման ID-ն, որը պետք է ջնջվի:

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

2. Վերոնշյալ գործառույթը կարող է օգտագործվել այլ TypeScript ֆայլերում:

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Առբերեք Firebase-ի տվյալները՝ օգտագործելով հարցումներ և զտիչներ

«Որտեղ» ֆիլտրը կարող է զտել արդյունքները, որոնք վերադարձվում են կոնկրետ պայմանի հիման վրա:

1. Services.ts-ում ստեղծեք գործառույթ, որը ստանում է բոլոր VIP օգտվողներին (սա այն դեպքում, եթե vipMember դաշտը սահմանված է true-ի): Սա նշվում է ստորև Firebase զանգի «ref.where('vipMember', '==', true)» մասով:

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe(users => resolve(users))
       })
     }

2. Օգտագործեք այս գործառույթը մեկ այլ TypseScript ֆայլում:

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

3. Հարցումը կարող է փոփոխվել՝ ավելացնելու այլ գործողություններ, ինչպիսիք են՝ Պատվիրել, Սկսել ժամը կամ Սահմանափակել: Փոփոխեք getAllVipMembers() ֆունկցիան services.ts-ում՝ ազգանունով պատվիրելու համար: «Պատվեր ըստ գործողության» կարող է պահանջվել Firebase-ում ինդեքս ստեղծել: Եթե դա այդպես է, սեղմեք վահանակի սխալի հաղորդագրության մեջ նշված հղման վրա:

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe(users => resolve(users))
       })
     }

4. Փոփոխեք հարցումը՝ վերադարձնելու միայն առաջին երեք գրառումները: Դրա համար կարող են օգտագործվել Start At և Limit գործողությունները: Սա օգտակար է, եթե դուք պետք է իրականացնեք փեյջինգ, որն այն դեպքում, երբ յուրաքանչյուր էջում ցուցադրվում է որոշակի թվով գրառումներ:

   getAllVipMembers() {
       return new Promise<any>((resolve)=> {
         this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt(0).limit(3)).valueChanges().subscribe(users => resolve(users))
       })
     }

Ավելացրեք ավելի շատ տվյալներ Firebase-ին և ավելի շատ հարցումներ Angular հավելվածում

Կան բազմաթիվ այլ հարցումների համակցություններ, որոնք կարող եք ուսումնասիրել Firebase տվյալների բազայից տվյալներ առբերելիս: Հուսով ենք, որ դուք հիմա հասկանում եք, թե ինչպես ստեղծել պարզ Firebase տվյալների բազա, ինչպես միացնել այն տեղական Angular հավելվածին և ինչպես կարդալ և գրել տվյալների բազայում:

Դուք կարող եք նաև ավելին իմանալ Firebase-ի տրամադրած այլ ծառայությունների մասին: Firebase-ը այն բազմաթիվ հարթակներից մեկն է, որը կարող եք ինտեգրվել Angular-ի հետ, և անկախ նրանից՝ դուք սկսնակ կամ առաջադեմ մակարդակի վրա եք, միշտ շատ ավելին կա սովորելու: