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

Как хранить, обновлять, удалять и извлекать данные из базы данных База данных

Установите соединение с базой данных 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.

export const environment = {
production: true,
firebaseConfig: {
apiKey: «your-api-key»,
authDomain: «your-auth-domain»,
projectId: «your-project-id»,
storageBucket: «your-storage-buckey»,
messagingSenderId: «your-messaging-sender-id»,
appId: «your-api-id»,
measurementId: «your-measurement-id»
}
};

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

npm i @angular/fire

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

import { AngularFireModule } from «@angular/fire»;
import { AngularFirestoreModule } from «@angular/fire/firestore»;
import { environment } from «../environments/environment»;

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

AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,

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

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

1. Создайте файл с именем service.ts в папке src/app/services.

2. Добавьте модуль AngularFirestore в раздел импорта и включите его в конструктор.

import { Injectable } from ‘@angular/core’;
import { AngularFirestore } from ‘@angular/fire/firestore’;
@Injectable({
providedIn: ‘root’
})
export class Service {
constructor(private db: AngularFirestore) { }
}

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

getAllUsers() {
return new Promise<any>((resolve)=> {
this.db.collection(‘User’).valueChanges({ idField: ‘id’ }).subscribe(users => resolve(users));
})
}

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

import { Service } from ‘src/app/services/service
constructor(private service: Service) {}

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

async getUsers() {
this.allUsers = await this.service.getAllUsers();
console.log(this.allUsers);
}

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

Добавьте новую запись для пользователя в базу данных Firebase.

1. В services.ts добавьте новую функцию для создания новой записи. Эта функция принимает идентификатор нового пользователя и все его данные. Он использует функцию set Firestore для отправки этой информации в Firebase и создания новой записи.

addNewUser(_newId:any, _fName:string, _lName:string, _vip:boolean) {
this.db.collection(«User»).doc(_newId).set({firstName:_fName,lastName:_lName,vipMember:_vip});
}

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

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

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

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

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

updateUserFirstName(_id:any, _firstName:string) {
this.db.doc(`User/${_id}`).update({firstName:_firstName});
}

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

updateUserFullName(_id:any, _firstName:string, _lastName:string) {
this.db.doc(`User/${_id}`).update({firstName:_firstName,lastName:_lastName});
}

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

this.service.updateUserFirstName(«vLBnSegFl1pD7XQ42TBv», «Kay»);
this.service.updateUserFullName(«vLBnSegFl1pD7XQ42TBv», «Kay», «Jones»);

Как удалить запись из базы данных Firebase

Чтобы удалить запись, используйте функцию удаления Firestore.

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

deleteUser(_id:any) {
this.db.doc(`User/${_id}`).delete();
}

Затем указанную выше функцию можно использовать в других файлах TypeScript.

this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Получение данных Firebase с помощью запросов и фильтров

Фильтр «где» может фильтровать возвращаемые результаты на основе определенного условия.

1. В services.ts создайте функцию, которая получает всех пользователей VIP (это если для поля vipMember установлено значение true). На это указывает часть «ref.where(’vipMember’, ’==’, true)» вызова Firebase ниже.

getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection(‘User’, ref => ref.where(‘vipMember’, ‘==’, true)).valueChanges().subscribe(users => resolve(users))
})
}

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

async getAllVipMembers() {
this.vipUsers = await this.service.getAllVipMembers();
console.log(this.vipUsers);
}

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

getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection(‘User’, ref => ref.where(‘vipMember’, ‘==’, true).orderBy(‘lastName’)).valueChanges().subscribe(users => resolve(users))
})
}

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

getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection(‘User’, ref => ref.where(‘vipMember’, ‘==’, true).orderBy(‘lastName’).startAt(0).limit(3)).valueChanges().subscribe(users => resolve(users))
})
}

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

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

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

Оцените статью
bestprogrammer.ru
Добавить комментарий