Как да съхранявате, актуализирате, изтривате и извличате данни от база данни на Firebase с помощта на Angular

Firebase е платформа, която ви предоставя множество услуги за подпомагане при изграждането и мащабирането на приложение. Някои от тези функции включват хостинг услуги, съхранение на данни и възможност за проследяване на анализ на данни.

Този урок се фокусира главно върху това как да създавате и добавяте данни към база данни на Firebase и как да извършвате операции за създаване, четене, запис и изтриване в базата данни от локално приложение на Angular.

Как да създадете и добавите данни към база данни на Firebase

Ако приемем, че вече имате настроено и работещо локално приложение Angular, то ще трябва да бъде свързано към база данни на Firebase, за да съхранява и осъществява достъп до данни. Ако не сте запознати с Angular, можете да прочетете повече за Angular концепции, компоненти и цялостната структура на Angular проект.

Ако все още нямате база данни на Firebase, можете да използвате идентификационните данни на вашия акаунт в Google, за да влезете във Firebase и да следвате подканите. След като това е настроено, създайте проект:

1. От Начална страница на Firebase, изберете Отидете на конзолата в горния десен ъгъл на сайта.
2. Под „Вашите проекти на Firebase“ изберете Добавяне на проект.
3. Следвайте подканите, за да създадете нов проект.
4. След като бъде завършен, проектът ще бъде отворен. От лявата страна на екрана има панел, който изброява функциите, които Firebase предоставя. Задръжте курсора на мишката върху иконите, докато видите База данни на Firestore, и го изберете.
5. Изберете Създайте база данни, и следвайте подканите, за да създадете база данни.
6. Когато избирате правилата за сигурност, изберете Стартирайте в тестов режим. Това може да бъде променено по-късно, за да се гарантира, че данните са по-сигурни. Можете да прочетете повече за правилата за сигурност на Firestore, като следвате Документация на Firebase.
7. След като приключите, базата данни ще се отвори. Структурата на базата данни използва колекции, което по същество е същата концепция като таблиците на базата данни. Например, ако имате нужда от две таблици, една за съхраняване на информация за акаунта и една за съхраняване на информация за потребителя, ще създадете две колекции с име Account и User.
8. Изберете Започнете събиране и добавете идентификатор на колекция, наречен "Потребител".
9. Добавете първия запис с информация за един потребител. Кликнете върху Добавяне на поле за да добавите три нови полета: firstName (низ), lastName (низ) и vipMember (булев). Идентификаторът на документа може да бъде генериран автоматично.
10. Щракнете върху Запазете.
11. За да добавите още записи към колекцията „Потребител“, щракнете върху Добавете документ (добавянето на документ е еквивалентно на добавяне на нов запис или потребител). Добавете още четирима потребители със същите три полета.

Базата данни вече е настроена с някои тестови данни.

Как да интегрирате Firebase във вашето Angular приложение

За достъп до тези данни във вашето локално приложение Angular, първо конфигурирайте някои настройки на приложението, за да се свържете с базата данни на Firebase:

1. Във Firebase отидете на панела отляво и щракнете върху Резюме на Проекта.
2. Изберете уеб бутон (обозначен с ъглови скоби).
3. Регистрирайте местното си приложение, като добавите името на приложението.
4. Инсталирайте Firebase във вашето локално приложение Angular.

   npm i firebase
   

5. След това Firebase ще покаже някои подробности за конфигурацията. Запазете тези подробности и щракнете Продължете към конзолата.
6. Въз основа на подробностите, предоставени в предишната стъпка, копирайте следния код в environment.prod.ts и environment.ts в приложението Angular.

   експортиране на константна среда = {
    производство: вярно,
    firebaseConfig: {
    apiKey: "вашият-api-ключ",
    authDomain: "вашият-auth-domain",
    projectId: "идентификатор на вашия проект",
    StorageBucket: "вашият-storage-buckey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "вашият-api-id",
    идентификатор на измерване: "вашият идентификатор на измерване"
    }
   };
   

7. AngularFirestore от @angular/fire/firestore ще се използва за конфигуриране на Firebase в Angular. Имайте предвид, че AngularFirestore не е съвместим с Angular версия 9 и по-нова. В локалното приложение Angular стартирайте:

   npm i @angular/fire
   

8. Добавете модулите Firestore и средата към секцията за импортиране в app.module.ts.

   импортирайте { AngularFireModule } от "@angular/fire";
   импортирайте { AngularFirestoreModule } от "@angular/fire/firestore";
   import { среда } от "../environments/environment";
   

9. Модулите на Firestore също трябва да бъдат включени в масива за импортиране в app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Как да извлечете данни от Firebase с помощта на услуга

Обикновено е добра практика да имате един или няколко услуги.ts файлове, които използвате за конкретно взаимодействие с базата данни. Функциите, които добавяте във файла с услуги, могат да бъдат извикани в други TypeScript файлове, страници или други компоненти в цялото приложение.

1. Създайте файл, наречен service.ts в src/app/services папка.
2. Добавете модула AngularFirestore към секцията за импортиране и го включете в конструктора.

   import { Injectable } от '@angular/core';
   импортирайте { AngularFirestore } от '@angular/fire/firestore';
   @Injectable({
    предоставено в: 'root'
   })
   експортиране на клас услуга {
    конструктор (частен db: AngularFirestore) { }
   }
   

3. Добавете функция, която връща обещание, съдържащо списък с всички потребители. "this.db.collection('Потребител')" се отнася до колекцията "Потребител" в базата данни.

   getAllUsers() {
    върнете ново обещание((разрешен)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (потребители => разрешаване (потребители));
    })
   }
   

4. За да използвате тази функция в друг TypeScript файл, импортирайте новата услуга и я добавете към конструктора.

   импортирайте { Service } от 'src/app/services/service
   конструктор (частна услуга: услуга) {}
   

5. Вземете списъка с всички потребители, използвайки функцията, създадена във файла с услуги.

   async getUsers() {
    this.allUsers = чакам this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Как да добавите нов запис към базата данни на Firebase

Добавете нов запис за потребител в базата данни на Firebase.

1. В services.ts добавете нова функция, за да създадете нов запис. Тази функция приема нов потребителски идентификатор и всички негови данни. Той използва функцията set на Firestore, за да изпрати тази информация до Firebase и да създаде нов запис.

   addNewUser (_newId: произволен, _fName: низ, _lName: низ, _vip: булев) {
    this.db.collection("Потребител").doc (_newId).set({firstName: _fName, фамилия: _lName, vipMember: _vip});
   }

2. Извикайте функцията addNewUser() в друг TypeScript файл. Не забравяйте да импортирате услугата и да я включите в конструктора, както е показано по-рано. Чувствайте се свободни да използвате генератор на случаен идентификатор, за да създадете новия ID за потребителя.

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

Как да актуализирате данни в базата данни на Firebase

Firebase има много функции, които направи го един от най-добрите налични инструменти. За да актуализирате определени полета в конкретен запис, използвайте функцията за актуализиране на Firestore.

1. Във файла service.ts създайте функция, наречена updateUserFirstName(). Тази функция ще актуализира първото име на избран потребителски запис. Функцията приема идентификатора на записа, който трябва да бъде актуализиран, и новата стойност за първото име на потребителя.

   updateUserFirstName (_id: всеки, _firstName: низ) {
    this.db.doc(`Потребител/${_id}`).update({firstName: _firstName});
   }

2. За да актуализирате множество полета за един и същи запис, просто разширете полетата, които се въвеждат във функцията за актуализиране на Firestore. Вместо само първо име, добавете фамилия, за да актуализирате и това с нова стойност.

   updateUserFullName (_id: всеки, _firstName: низ, _lastName: низ) {
    this.db.doc(`Потребител/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Всяка от горните функции може да се използва в други TypeScript файлове.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Кей");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Кей", "Джоунс");

Как да изтриете запис от базата данни на Firebase

За да изтриете запис, използвайте функцията за изтриване на Firestore.

1. Във файла service.ts създайте функция, наречена deleteUser(). Тази функция приема идентификатора на записа, който трябва да бъде изтрит.

   deleteUser (_id: всеки) {
    this.db.doc(`Потребител/${_id}`).delete();
    }
   

2. След това горната функция може да се използва в други TypeScript файлове.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Извличане на данни от Firebase с помощта на заявки и филтри

Филтърът "къде" може да филтрира резултатите, които се връщат въз основа на конкретно условие.

1. В services.ts създайте функция, която получава всички VIP потребители (това е, ако полето vipMember е настроено на true). Това е посочено от частта "ref.where('vipMember', '==', true)" от извикването на Firebase по-долу.

   getAllVipMembers() {
    върнете ново обещание((разрешен)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (потребители => разрешаване (потребители))
    })
    }

2. Използвайте тази функция в друг TypseScript файл.

   async getAllVipMembers() {
    this.vipUsers = изчакайте this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Заявката може да бъде променена, за да добавите други операции, като Поръчай по, Старт от или Ограничи. Променете функцията getAllVipMembers() в services.ts, за да подредите по фамилно име. Операцията Order By може да изисква създаване на индекс във Firebase. Ако случаят е такъв, щракнете върху връзката, предоставена в съобщението за грешка в конзолата.

   getAllVipMembers() {
    върнете ново обещание((разрешен)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (потребители => разрешаване (потребители) )
    })
    }

4. Променете заявката, за да върне само първите три записа. За това могат да се използват операциите Start At и Limit. Това е полезно, ако трябва да внедрите пейджинг, което е, когато определен брой записи се показват на страница.

   getAllVipMembers() {
    върнете ново обещание((разрешен)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (потребители => разрешаване (потребители))
    })
    }

Добавете повече данни към Firebase и още заявки в приложението Angular

Има много други комбинации от заявки, които можете да изследвате, когато се опитвате да извлечете данни от база данни на Firebase. Надяваме се, че вече разбирате как да настроите проста база данни на Firebase, как да я свържете с локално приложение на Angular и как да четете и записвате в базата данни.

Можете също да научите повече за другите услуги, които Firebase предоставя. Firebase е една от многото платформи, които можете да интегрирате с Angular, и независимо дали сте на ниво начинаещ или напреднал, винаги има още много какво да научите.

Топ 8 Angular курсове за начинаещи и напреднали потребители

Прочетете Следващото

За автора