Последнее обновление 07.01.2023 — Василий Иванов
Одной из особенностей Firebase является то, что вы можете создать базу данных NoSQL, хранящуюся в облаке. Вы также можете интегрировать эту базу данных в разрабатываемые вами приложения и хранить, обновлять и удалять данные внутри базы данных.
Вы также можете запросить базу данных Firebase из своего приложения Angular. Firebase требует, чтобы вы индексировали комбинации полей для запроса, который использует несколько полей. Это позволяет Firebase легко находить их, когда вы вызываете запрос в другой момент времени.
Настройте приложение Angular и базу данных Firebase
Прежде чем писать запросы к Firebase, вам необходимо создать приложение Angular и базу данных Firebase. Вам также потребуется настроить приложение Angular для подключения к базе данных.
- Если у вас нет существующего приложения Angular, вы можете использовать команду ng new для создания нового проекта со всеми необходимыми файлами Angular.
ng new new-angular-app
- Создайте новую базу данных Firebase для приложения Angular, войдя в Firebase и следуя инструкциям по созданию нового проекта Firebase.
- В вашей новой базе данных Cloud Firestore создайте две коллекции (также известные как таблицы) для «Продукта» и «Поставщика». Поставщик может поставлять несколько товаров. Каждый товар также связан с поставщиком с помощью поля «supplierId».
- Введите следующие данные в таблицу «Товар». Введите поля name, productId и supplierId в виде строк. Введите цены и поля inStock в виде чисел.
Поля идентификатора документа продукт1 - Название: «Ленты»
- цена: 12,99
- в наличии: 10
- идентификатор продукта: «P1»
- идентификатор поставщика: «S1»
продукт2 - Название: «Воздушные шары»
- цена: 1,5
- в наличии: 2
- идентификатор продукта: «P2»
- идентификатор поставщика: «S1»
продукт3 - Название: «Бумага»
- цена: 2,99
- в наличии: 20
- идентификатор продукта: «P3»
- идентификатор поставщика: «S1»
продукт4 - название: «Таблица»
- цена: 199
- в наличии: 1
- идентификатор продукта: «P4»
- идентификатор поставщика: «S2»
Вот пример, показывающий, как это должно выглядеть:
- Внесите следующие данные в таблицу «Поставщик». Введите все поля в виде строк.
Поля идентификатора документа поставщик1 - название: «Поставщик декоративно-прикладного искусства»
- место: «Калифорния, США»
- идентификатор поставщика: «S1»
поставщик2 - название: «Удивительные столы»
- место: «Сидней, Австралия»
- идентификатор поставщика: «S2»
Вот как должна выглядеть запись supplier1:
- Установите angular/fire в свое приложение.
npm i @angular/fire
- В Firebase откройте настройки проекта. Нажмите на логотип угловых скобок, чтобы добавить Firebase в ваше приложение Angular.
- Firebase предоставит вам информацию о конфигурации, которую вы можете использовать для подключения вашего приложения Angular к базе данных Firebase.
- Замените содержимое в environments/environment.ts следующим кодом. Вам нужно будет изменить значения в firebaseConfig. Измените их, чтобы они соответствовали конфигурации, которую Firebase предоставил вам на предыдущем шаге.
export const environment = {
production: false,
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"
}
}; - Импортируйте среду сверху вместе с модулями Angular Firebase в src/app/app.module.ts.
import { environment } from "../environments/environment";
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from "@angular/fire/compat/firestore"; - Добавьте модули Firebase в массив импорта:
AngularFirestoreModule,
AngularFireModule.initializeApp(environment.firebaseConfig)
Как написать сложный запрос Firebase в файле служб
Вы можете запрашивать таблицы в своей базе данных Firebase с помощью файла сервисов.
- Создайте новую папку под названием «services». Внутри папки создайте новый файл с именем «service.ts».
- Добавьте в файл импорт, конструктор и класс AngularFirestore.
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
@Injectable({
providedIn: 'root'
})
export class Service {
constructor(private db: AngularFirestore) { }
} - В этом примере запроса перечислите продукты на основе имени поставщика. Кроме того, отфильтруйте список, чтобы отображались только товары с наименьшим запасом. Поскольку Firebase не является рациональной базой данных, нам нужно будет запросить две отдельные таблицы, используя более одного запроса.
- Для этого создайте новую функцию с именем getSupplier() для обработки первого запроса. Функция вернет строку в таблице «Поставщик», соответствующую названию.
getSupplier(name: string) {
return new Promise<any>((resolve)=> {
this.db.collection('Supplier', ref => ref.where('name', '==', name)).valueChanges().subscribe(supplier => resolve(supplier))
})
} - Создайте еще одну функцию с именем getProductsFromSupplier(). Этот запрос запрашивает базу данных для продуктов, связанных с конкретным поставщиком. Кроме того, запрос также упорядочивает результаты по полю «inStock» и отображает только первую запись в списке. Другими словами, он вернет продукт для конкретного поставщика с наименьшим количеством «на складе».
getProductsFromSupplier(supplierId: string) {
return new Promise<any>((resolve)=> {
this.db.collection('Product', ref => ref.where('supplierId', '==', supplierId).orderBy('inStock').startAt(0).limit(1)).valueChanges().subscribe(product => resolve(product))
})
} - В файле src/app/app.component.ts импортируйте сервис.
import { Service } from 'src/app/services/service'; - Добавьте конструктор внутри класса AppComponent и добавьте службу в конструктор.
constructor(private service: Service) { } - Создайте новую функцию с именем getProductStock(). Эта функция будет печатать продукт с наименьшим запасом, который предоставляет конкретный поставщик. Обязательно вызовите новую функцию в функции ngOnInit() и объявите переменную для хранения результата.
products: any;
ngOnInit(): void {
this.getProductStock();
}
async getProductStock() {
} - Внутри функции getProductStock() используйте два запроса из файла services. Используйте первый запрос, чтобы получить запись поставщика на основе имени. Затем используйте supplierId в качестве аргумента для второго запроса, который найдет продукт от этого поставщика с наименьшим запасом.
let supplier = await this.service.getSupplier('Arts and Crafts Supplier');
this.products = await this.service.getProductsFromSupplier(supplier[0].supplierId); - Удалите содержимое файла src/app/app.component.html и замените его следующим:
<h2> Products with lowest stock from "Arts and Crafts Supplier" </h2>
<div *ngFor="let item of products">
<p> Name: {{item.name}} </p>
<p> Number in stock: {{item.inStock}} </p>
<p> Price: ${{item.price}} </p>
</div> - Запустите приложение в веб-браузере с помощью команды ng serve.
ng serve
- Откройте свой сайт с помощью любого веб-браузера. По умолчанию Angular размещает приложение на локальном хосте: 4200.
- Ваши данные не будут правильно отображаться на экране. Щелкните правой кнопкой мыши веб-страницу и выберите «Проверить», чтобы открыть инструменты разработчика вашего браузера.
- Перейдите на вкладку Консоль. Появится сообщение об ошибке, чтобы вы знали, что для запроса потребуется индекс.
Как создать составной индекс для вашего запроса
Firebase создает индексы для запросов, которые могут содержать несколько полей. Согласно документации Firebase, это действует как карта, так что Firebase может искать расположение полей, содержащихся в запросе.
- В консоли щелкните ссылку, отображаемую при ошибке.
- Войдите в свою учетную запись Firebase.
- Появится приглашение с просьбой создать индекс для запроса Firebase. Нажмите Создать индекс.
- Firebase проиндексирует поля, которые использует ваш запрос. Подождите несколько минут, пока статус не изменится с «Строительство» на «Включено».
- Обновите веб-браузер. Запрос будет запущен и вернет правильный результат на главной странице. Если вы откроете отладчик консоли с помощью инструментов разработчика вашего браузера, ошибки больше не должно быть.
Запрос вашей базы данных Firebase
Firebase позволяет создать базу данных NoSQL в облаке. Затем вы можете интегрировать эту базу данных в разрабатываемые вами приложения Angular. Вы можете создавать различные типы запросов для хранения, обновления или удаления данных. Вы также можете создать запрос, который использует несколько полей одновременно.
Когда вы создаете запрос, который использует несколько полей, попытка его выполнения приведет к ошибке. Вам нужно будет проиндексировать комбинацию полей, используемую в запросе, чтобы Firebase мог легко найти ее всякий раз, когда вы запускаете запрос.
Вы также можете узнать о других способах настройки базы данных NoSQL, например о том, как настроить базу данных с помощью MongoDB.
