Как да използвате сложни Firebase заявки в Angular

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

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

Настройте вашето приложение Angular и база данни на Firebase

Преди да напишете вашите заявки за Firebase, ще трябва да създадете приложение Angular и база данни на Firebase. Вие също ще трябва да конфигурирате вашето Angular приложение, за да се свърже с вашата база данни.

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

   нг новнов-ъглово-приложение

2. Създавам нова база данни на Firebase за приложението Angular като влезете във Firebase и следвате подканите, за да създадете нов проект във Firebase.
3. Във вашата нова база данни Cloud Firestore създайте две колекции (известни също като таблици) за „Продукт“ и „Доставчик“. Един доставчик може да достави множество продукти. Всеки продукт също е свързан с доставчика чрез полето "supplierId".
4. Въведете следните данни в таблицата "Продукт". Въведете полетата за име, productId и providerId като низове. Въведете полетата цена и inStock като числа.

   ID на документа	Полета
   продукт1	име: "ленти" цена: 12.99 в наличност: 10 productId: "P1" доставчикId: "S1"
   продукт2	име: "Балони" цена: 1.5 в наличност: 2 productId: "P2" доставчикId: "S1"
   продукт3	име: "хартия" цена: 2.99 в наличност: 20 productId: "P3" доставчикId: "S1"
   продукт4	име: "Таблица" цена: 199лв в наличност: 1 productId: "P4" доставчикИд: "S2"

   Ето пример, показващ как трябва да изглежда това:
5. Въведете следните данни в таблицата "Доставчик". Въведете всички полета като низове.

   ID на документа	Полета
   доставчик1	име: "Доставчик на изкуства и занаяти" местоположение: "Калифорния, САЩ" доставчикId: "S1"
   доставчик2	име: "Невероятни маси" местоположение: "Сидни, Австралия" доставчикИд: "S2"

   Ето как трябва да изглежда записът доставчик1:
6. Инсталирай ъглов/огън във вашето приложение.

   npm i @ъглов/fire

7. Във Firebase отворете Настройки на проекта. Кликнете върху логото с ъглови скоби, за да добавите Firebase към вашето Angular приложение.
8. Firebase ще ви предостави подробности за конфигурацията, които можете да използвате, за да свържете вашето Angular приложение към Firebase Database.
9. Заменете съдържанието в среди/околна среда.ц със следния код. Ще трябва да промените стойностите вътре firebaseConfig. Променете ги, за да съответстват на конфигурацията, която Firebase ви предостави в предишната стъпка.

   износконст среда = {
    производство: невярно,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIandlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Импортирайте средата отгоре, заедно с модулите на Angular Firebase src/app/app.module.ts.

    импортиране { околен свят } от "../environments/environment";
    импортиране { AngularFireModule } от '@angular/fire/compat';
    импортиране { AngularFirestoreModule } от "@angular/fire/compat/firestore";

11. Добавете модулите Firebase към масива за импортиране:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(околен свят.firebaseConfig)

Как да напишете сложна заявка за Firebase във файл за услуги

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

1. Създайте нова папка, наречена „услуги“. В папката създайте нов файл, наречен "service.ts".
2. Добавете импортирането, конструктора и класа на AngularFirestore във файла.

   импортиране { Инжекционен } от '@angular/core';
   импортиране { AngularFirestore } от '@angular/fire/compat/firestore';
   @Инжекционен({
    предоставено В: 'корен'
   })
   износкласОбслужване{
   конструктор(частна база данни: AngularFirestore) {}
   }

3. В този пример за заявка избройте продуктите въз основа на име на доставчик. Освен това филтрирайте списъка, за да показва само артикула с най-ниска наличност. Тъй като Firebase не е рационална база данни, ще трябва да отправим заявка към двете отделни таблици, използвайки повече от една заявка.
4. За да направите това, създайте нова функция, наречена getSupplier(), за да обработите първата заявка. Функцията ще върне реда в таблицата „Доставчик“, който съответства на името.

   getSupplier (име: низ) {
   връщаненовобещание((разреши)=> {
    this.db.collection('Доставчик', ref => ref.where('име', '==', име)).valueChanges().subscribe (доставчик => решавам (доставчик))
    })
    }

5. Създайте друга функция, наречена getProductsFromSupplier(). Тази заявка прави заявка в базата данни за продукти, свързани с определен доставчик. Освен това заявката също подрежда резултатите по полето „в наличност“ и показва само първия запис в списъка. С други думи, той ще върне продукта за конкретен доставчик с най-нисък брой „inStock“.

   getProductsFromSupplier (supplierId: низ) {
   връщаненовобещание((разреши)=> {
    this.db.collection('Продукт', ref => ref.where('доставчикИд', '==', доставчикId).orderBy('в наличност').startAt (0).limit (1)).valueChanges().subscribe (продукт => разреши (продукт))
    })
    }

6. В src/app/app.component.ts файл, импортирайте услугата.

   импортиране { Обслужване } от 'src/приложение/услуги/услуга';

7. Добавете конструктор в класа AppComponent и добавете услугата към конструктора.

   конструктор(частна услуга: Услуга) { }

8. Създайте нова функция, наречена getProductStock(). Тази функция ще отпечата продукта с най-ниската наличност, която даден доставчик предлага. Не забравяйте да извикате новата функция в ngOnInit() функция и декларирайте променлива за съхраняване на резултата.

   продукти: всякакви;
   ngOnInit(): невалиден {
   това.getProductStock();
   }
   асинхронен getProductStock() {
   }

9. Вътре в getProductStock() функция, използвайте двете заявки от файла на услугите. Използвайте първата заявка, за да получите записа на доставчик въз основа на името. След това използвайте доставчика като аргумент за втората заявка, която ще намери продукта от този доставчик с най-ниска наличност.

   позволявам доставчик = чакамтова.service.getSupplier('Доставчик на изкуства и занаяти'); 
   това.продукти = чакамтова.service.getProductsFromSupplier (доставчик[0].supplierId);

10. Премахнете съдържанието в src/app/app.component.html файл и го заменете със следното:

    <h2> Продукти с най-ниска наличност от "Доставчик на изкуства и занаяти"</h2>
    <div *ngFor="нека т. продукти">
    <стр> Име: {{item.name}} </стр>
    <стр> Брой на склад: {{item.inStock}} </стр>
    <стр> Цена: ${{item.price}} </стр>
    </div>

11. Стартирайте приложението в уеб браузър, като използвате ng служи команда.

    ng служи

12. Отворете уебсайта си с помощта на който и да е уеб браузър. По подразбиране Angular хоства приложението на локален хост: 4200.
13. Вашите данни няма да се показват правилно на екрана. Щракнете с десния бутон върху уеб страницата и щракнете върху Инспектирайте за да отворите инструментите за разработчици на вашия браузър.
14. Навигирайте до Конзола раздел. Ще се покаже грешка, за да ви уведоми, че заявката ще изисква индекс.

Как да създадете съставен индекс за вашата заявка

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

1. В конзолата щракнете върху връзката, която показва грешката.
2. Влезте във вашия акаунт във Firebase.
3. Ще се покаже подкана с молба да създадете индекс за заявката на Firebase. Кликнете върху Създаване на индекс.
4. Firebase ще индексира полетата, които вашата заявка използва. Изчакайте няколко минути, докато състоянието се промени от „Сграда“ на „Активирано“.
5. Обновете уеб браузъра си. Заявката ще се изпълни и ще върне правилния резултат на началната страница. Ако отворите конзолния дебъгер с помощта на инструментите за разработчици на браузъра си, грешката вече не трябва да е там.

Запитване към вашата база данни на Firebase

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

Когато създадете заявка, която използва множество полета, опитът да я изпълните ще доведе до грешка. Ще трябва да индексирате комбинацията от полета, използвана в заявката, така че Firebase да може лесно да я търси, когато изпълнявате заявката.

Можете също така да научите за други начини за настройка на NoSQL база данни, като например как да настроите база данни с помощта на MongoDB.