Как использовать сложные запросы Firebase в Angular

Одной из особенностей Firebase является то, что вы можете создать базу данных NoSQL, хранящуюся в облаке. Вы также можете интегрировать эту базу данных в разрабатываемые вами приложения и хранить, обновлять и удалять данные внутри базы данных.

Вы также можете запросить базу данных Firebase из своего приложения Angular. Firebase требует, чтобы вы индексировали комбинации полей для запроса, который использует несколько полей. Это позволяет Firebase легко находить их, когда вы вызываете запрос в другой момент времени.

Настройте приложение Angular и базу данных Firebase

Прежде чем писать запросы к Firebase, вам необходимо создать угловое приложение и база данных Firebase. Вам также потребуется настроить приложение Angular для подключения к базе данных.

1. Если у вас нет существующего приложения Angular, вы можете использовать
   instagram viewer
   новый Команда для создания нового проекта со всеми необходимыми файлами Angular.

   нг новыйновый-угловое-приложение

2. Создать новая база данных Firebase для приложения Angular войдя в Firebase и следуя инструкциям по созданию нового проекта Firebase.
3. В вашей новой базе данных Cloud Firestore создайте две коллекции (также известные как таблицы) для «Продукта» и «Поставщика». Поставщик может поставлять несколько товаров. Каждый товар также связан с поставщиком с помощью поля «supplierId».
4. Введите следующие данные в таблицу «Товар». Введите поля 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"

   Вот пример, показывающий, как это должно выглядеть:
5. Внесите следующие данные в таблицу «Поставщик». Введите все поля в виде строк.

   Идентификатор документа	Поля
   поставщик1	название: "Поставщик декоративно-прикладного искусства" место: "Калифорния, США" идентификатор поставщика: "S1"
   поставщик2	название: "Удивительные столы" место: "Сидней, Австралия" идентификатор поставщика: "S2"

   Вот как должна выглядеть запись supplier1:
6. Установить угловой/огонь в ваше приложение.

   нпм я @угловой/fire

7. В Firebase откройте Настройки проекта. Нажмите на логотип угловых скобок, чтобы добавить Firebase в ваше приложение Angular.
8. Firebase предоставит вам информацию о конфигурации, которую вы можете использовать для подключения вашего приложения Angular к базе данных Firebase.
9. Замените содержимое в среды/environment.ts со следующим кодом. Вам нужно будет изменить значения внутри firebaseconfig. Измените их, чтобы они соответствовали конфигурации, которую Firebase предоставил вам на предыдущем шаге.

   экспортконстанта среда = {
    производство: ЛОЖЬ,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37УБИАНДИМ",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "муо-firebase-запросы",
    storageBucket: "muo-firebase-queries.appspot.com",
    идентификатор отправителя сообщения: "569911365044",
    идентификатор приложения: "1:569911365044:веб:9557bfef800caa5cdaf6e1"
    }
   };

10. Импортируйте окружение сверху вместе с модулями Angular Firebase в источник/приложение/приложение.модуль.тс.

    импорт { Окружающая среда } из "../окружение/окружение";
    импорт {AngularFireModule} из '@angular/fire/compat';
    импорт {AngularFirestoreModule} из "@angular/fire/compat/firestore";

11. Добавьте модули Firebase в массив импорта:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(Окружающая среда.firebaseConfig)

Как написать сложный запрос Firebase в файле служб

Вы можете запрашивать таблицы в своей базе данных Firebase с помощью файла сервисов.

1. Создайте новую папку под названием «services». Внутри папки создайте новый файл с именем «service.ts».
2. Добавьте в файл импорт, конструктор и класс AngularFirestore.

   импорт { Инъекционный } из '@угловой/ядро';
   импорт {AngularFirestore} из '@angular/fire/compat/firestore';
   @Инъекционный({
    предоставлено в: 'корень'
   })
   экспортучебный классобслуживание{
   конструктор(частная база данных: AngularFirestore) {}
   }

3. В этом примере запроса перечислите продукты на основе имени поставщика. Кроме того, отфильтруйте список, чтобы отображались только товары с наименьшим запасом. Поскольку Firebase не является рациональной базой данных, нам нужно будет запросить две отдельные таблицы, используя более одного запроса.
4. Для этого создайте новую функцию с именем получитьПоставщик(), чтобы обработать первый запрос. Функция вернет строку в таблице «Поставщик», соответствующую названию.

   getSupplier (имя: строка) {
   возвращатьсяновыйОбещать((решить)=> {
    эта.дб.коллекция('Поставщик', ссылка => ссылка где('имя', '==', имя)).valueChanges().subscribe (поставщик => решить (поставщик))
    })
    }

5. Создайте еще одну функцию с именем получитьПродуктыОтПоставщика(). Этот запрос запрашивает базу данных для продуктов, связанных с конкретным поставщиком. Кроме того, запрос также упорядочивает результаты по полю «inStock» и отображает только первую запись в списке. Другими словами, он вернет продукт для конкретного поставщика с наименьшим количеством «на складе».

   getProductsFromSupplier (supplierId: строка) {
   возвращатьсяновыйОбещать((решить)=> {
    эта.дб.коллекция('Товар', ссылка => ссылка где('идентификатор поставщика', '==', идентификатор поставщика).orderBy('в наличии').startAt (0).limit (1)).valueChanges().subscribe (продукт => решить (продукт))
    })
    }

6. в источник/приложение/приложение.component.ts файл, импортируйте сервис.

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

7. Добавьте конструктор внутри класса AppComponent и добавьте службу в конструктор.

   конструктор(частный сервис: сервис) { }

8. Создайте новую функцию с именем getProductStock(). Эта функция будет печатать продукт с наименьшим запасом, который предоставляет конкретный поставщик. Обязательно вызовите новую функцию в нгонинит() функцию и объявить переменную для хранения результата.

   продукты: любые;
   нгонинит(): пустота {
   это.getProductStock();
   }
   асинхронный получитьProductStock() {
   }

9. Внутри получитьProductStock() используйте два запроса из файла services. Используйте первый запрос, чтобы получить запись поставщика на основе имени. Затем используйте supplierId в качестве аргумента для второго запроса, который найдет продукт от этого поставщика с наименьшим запасом.

   позволять поставщик = Ждитеэто.service.getSupplier('Поставщик декоративно-прикладного искусства'); 
   это.продукты = Ждитеэто.service.getProductsFromSupplier (поставщик[0].supplierId);

10. Удалите содержимое в источник/приложение/приложение.компонент.html файл и замените его следующим:

    <h2> Товары с наименьшим запасом от "Поставщик декоративно-прикладного искусства"</h2>
    <div *ngFor="пусть товар">
    <п> Название: {{item.name}} </п>
    <п> Количество на складе: {{item.inStock}} </п>
    <п> Цена: ${{item.price}} </п>
    </div>

11. Запустите приложение в веб-браузере, используя нг служить команда.

    нг служить

12. Откройте свой сайт с помощью любого веб-браузера. По умолчанию Angular размещает приложение по адресу локальный: 4200.
13. Ваши данные не будут правильно отображаться на экране. Щелкните правой кнопкой мыши веб-страницу и выберите Осмотреть чтобы открыть инструменты разработчика вашего браузера.
14. Перейдите к Приставка вкладка Появится сообщение об ошибке, чтобы вы знали, что для запроса потребуется индекс.

Как создать составной индекс для вашего запроса

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

1. В консоли щелкните ссылку, отображаемую при ошибке.
2. Войдите в свою учетную запись Firebase.
3. Появится приглашение с просьбой создать индекс для запроса Firebase. Нажмите на Создать индекс.
4. Firebase проиндексирует поля, которые использует ваш запрос. Подождите несколько минут, пока статус не изменится с «Строительство» на «Включено».
5. Обновите веб-браузер. Запрос будет запущен и вернет правильный результат на главной странице. Если вы откроете отладчик консоли с помощью инструментов разработчика вашего браузера, ошибки больше не должно быть.

Запрос вашей базы данных Firebase

Firebase позволяет создать базу данных NoSQL в облаке. Затем вы можете интегрировать эту базу данных в разрабатываемые вами приложения Angular. Вы можете создавать различные типы запросов для хранения, обновления или удаления данных. Вы также можете создать запрос, который использует несколько полей одновременно.

Когда вы создаете запрос, который использует несколько полей, попытка его выполнения приведет к ошибке. Вам нужно будет проиндексировать комбинацию полей, используемую в запросе, чтобы Firebase мог легко найти ее всякий раз, когда вы запускаете запрос.

Вы также можете узнать о других способах настройки базы данных NoSQL, например о том, как настроить базу данных с помощью MongoDB.