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

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

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

Как создать и добавить данные в базу данных Firebase

Предполагая, что у вас уже есть приложение Angular, настроенное и работающее локально, его необходимо будет подключить к базе данных Firebase, чтобы хранить данные и получать к ним доступ. Если вы не знакомы с 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.

   нпм я firebase
   

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

   экспорт константной среды = {
    производство: правда,
    firebaseConfig: {
    apiKey: "ваш-api-ключ",
    authDomain: "ваш-домен авторизации",
    идентификатор проекта: "идентификатор вашего проекта",
    storageBucket: "ваше хранилище",
    messageSenderId: "ваш-идентификатор-отправителя-сообщения",
    appId: "ваш-api-id",
    MeasurementId: "идентификатор вашего измерения"
    }
   };
   

7. AngularFirestore из @угловой/огонь/firestore будет использоваться для настройки Firebase в Angular. Обратите внимание, что AngularFirestore несовместим с Angular версии 9 и выше. В локальном приложении Angular запустите:

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

8. Добавьте модули Firestore и среды в раздел импорта в app.module.ts.

   импортировать {AngularFireModule} из "@angular/fire";
   импортировать {AngularFirestoreModule} из "@angular/fire/firestore";
   импортировать {среду} из "../среды/среда";
   

9. Модули Firestore также необходимо включить в массив импорта в app.module.ts.

   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,

Как получить данные из Firebase с помощью службы

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

1. Создайте файл с именем service.ts в источник/приложение/услуги папка.
2. Добавьте модуль AngularFirestore в раздел импорта и включите его в конструктор.

   импортировать {Injectable} из '@angular/core';
   импортировать {AngularFirestore} из '@angular/fire/firestore';
   @Injectable({
    при условии: «корень»
   })
   экспортный класс службы {
    конструктор (частная БД: AngularFirestore) {}
   }
   

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

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

4. Чтобы использовать эту функцию в другом файле TypeScript, импортируйте новую службу и добавьте ее в конструктор.

   импортировать { Сервис } из 'src/app/services/service
   конструктор (частная служба: служба) {}
   

5. Получите список всех пользователей, используя функцию, созданную в файле services.

   асинхронный getUsers () {
    this.allUsers = await 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, lastName: _lName, vipMember: _vip});
   }

2. Вызовите функцию addNewUser() в другом файле TypeScript. Не забудьте импортировать сервис и включить его в конструктор, как показано ранее. Не стесняйтесь использовать генератор случайных идентификаторов, чтобы создать новый идентификатор для пользователя.

   this.service.addNewUser("62289836", "Джейн", "Доу", правда);
   

Как обновить данные в базе данных Firebase

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

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

   updateUserFirstName (_id: любой, _firstName: строка) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Чтобы обновить несколько полей для одной и той же записи, просто разверните поля, введенные внутри функции обновления Firestore. Вместо просто firstName добавьте lastName, чтобы также обновить его новым значением.

   updateUserFullName (_id: любой, _firstName: строка, _lastName: строка) {
    this.db.doc(`User/${_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('Пользователь', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (пользователи => разрешение (пользователи))
    })
    }

2. Используйте эту функцию в другом файле TypseScript.

   асинхронный getAllVipMembers () {
    this.vipUsers = await this.service.getAllVipMembers();
    console.log(this.vipUsers);
    }

3. Запрос можно изменить, добавив другие операции, такие как «Упорядочить по», «Начать с» или «Ограничение». Измените функцию getAllVipMembers() в services.ts, чтобы упорядочить по фамилии. Для операции Order By может потребоваться создание индекса в Firebase. В этом случае щелкните ссылку, указанную в сообщении об ошибке в консоли.

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

4. Измените запрос, чтобы он возвращал только первые три записи. Для этого можно использовать операции Start At и Limit. Это полезно, если вам нужно реализовать пейджинг, когда на странице отображается определенное количество записей.

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

Добавьте больше данных в Firebase и больше запросов в приложение Angular

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

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

8 лучших курсов по Angular для начинающих и опытных пользователей

Читать дальше

Об авторе