Angular 2 + Firebase Введение

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Онлайн-курс №1: Angular 2 с TypeScript для начинающих
Онлайн-курс №2: Angular 2 - Полное руководство
Онлайн-курс №3: Angular 2 - С нуля

Вступление

Firebase - это платформа для мобильных и веб-приложений, поддерживающая разработчиков с помощью различных инструментов и сервисов для создания высококачественных приложений. Центральной особенностью Firebase является база данных в реальном времени. Используя Firebase API, базу данных в реальном времени можно использовать для хранения и синхронизации данных между несколькими клиентами и платформами. Веб-сайт Firebase доступен по адресу: https://firebase.google.com/.

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

Для интеграции сервисов Firebase с приложением Angular 2 можно использовать библиотеку AngularFire2. . Это официальная библиотека для Firebase и Angular 2. Далее вы узнаете, как настроить базу данных Firebase в реальном времени и выполнить привязку к данным в реальном времени в приложении Angular 2 с помощью библиотеки AngularFire2, шаг за шагом.

Настройка Firebase

Чтобы настроить Firebase, вам сначала нужно перейти на https://firebase.google.com/, создать учетную запись и войти в консоль Firebase. Консоль Firebase дает вам доступ ко всем службам Firebase и параметрам конфигурации. Во-первых, нам нужно создать новый проект Firebase:

После создания проекта вы можете нажать на плитку проекта, и вы будете перенаправлены в консоль проекта Firebase:

Консоль проекта - это центральное место для настроек конфигурации Firebase. В меню слева вы можете получить доступ к различным службам Firebase. Щелкните ссылку База данных, чтобы получить доступ к просмотру базы данных в реальном времени:

По умолчанию открыта вкладка Данные. Здесь вы можете увидеть URL-адрес данных и содержимого в реальном времени. Вы можете использовать онлайн-редактор для добавления контента в базу данных:

Как видите, данные в базе данных реального времени организованы в виде иерархического дерева, которое содержит узлы и пары ключ-значение. Это похоже на структуру данных JSON. Под корневым узлом добавьте подузел items. В разделе элементы создайте несколько пар "ключ-значение", как показано на снимке экрана. Позже мы будем использовать эти элементы данных в нашем примере приложения.

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

{
"rules": {
".read": true,
".write": true
}
}

Теперь доступ для чтения и записи к базе данных возможен без аутентификации.

Настройка проекта с помощью Angular 2 CLI

Теперь, когда доступна база данных Firebase, следующим шагом будет запуск примера приложения Angular 2. Мы делаем это с помощью Angular 2 CLI. Если вы еще не установили интерфейс командной строки, вам сначала нужно выполнить следующую команду, чтобы команда ng стала доступной в вашей системе:

$ npm install -g angular-cli

После того, как Angular 2 доступен интерфейс командной строки, мы можем запустить новый проект Angular 2, выполнив следующую команду

$ ng new angular2fb

Это создает папку проекта angular2fb и внутри этой папки вы найдете следующую исходную структуру проекта:

.
├── README.md
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── src
└── tslint.json

Подпапка src содержит основные части реализации:

.
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── index.ts
│ └── shared
│ └── index.ts
├── assets
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.json
└── typings.d.ts

Чтобы проверить, что проект был запущен правильно, теперь вы можете запустить веб-сервер с помощью команды ng следующим образом:

$ ng serve

После этого приложение должно быть доступно по адресу http: // localhost: 4200 в вашем браузере.

Установка Firebare и AngularFire 2

Теперь нам нужно добавить Firebase и библиотеку AngularFire 2 в качестве зависимостей в наш проект:

$ npm install angularfire2 firebase --save

При использовании флага --save обе зависимости автоматически добавляются в файл package.json.

Подготовка вашего приложения для Firebase

Конфигурация Firebase

Конфигурация Firebase состоит из четырех пар ключ-значение. Необходимо предоставить следующую информацию:

apiKey
authDomain
databaseURL
StorageBucket

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

Возьмите настройки и вставьте их в новый файл environment / firebase.config. ts в следующем виде:

export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

Также добавьте следующие две строки кода в конец файла typings.d.ts в корневой папке проекта Angular 2:

declare var require: any;
declare var module: any;

и добавьте свойство types в объект конфигурации compilerOptions в tsconfig.json.

 
 {
   "compilerOptions": {
    [...],
    "types": [
      "firebase"
    ]
  }
}

Импорт AngularFireModule

Чтобы использовать библиотеку Angular Fire 2, нам нужно сначала импортировать AngularFireModule. Добавьте следующий оператор импорта в свой app.module.ts:

import { AngularFireModule } from 'angularfire2';

Используйте метод фабрики модулей initializeApp из AngularFireModule, чтобы создать модуль Angular Fire 2, основанный на нашей конкретной конфигурации Firebase:

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})export class AppModule {}

Внедрить AngularFire в свой компонент

Служба AngularFire является частью AngularFireModule и теперь может быть внедрена в ваши компоненты. Переключитесь на app.component.ts и сначала добавьте следующий оператор импорта:

import { AngularFire, FirebaseListObservable } from 'angularfire2';

Во-вторых, добавьте в этот компонент AngularFire:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(af: AngularFire) {
  }
}

Используйте AngularFire для получения доступа к данным Firebase - привязка к списку Firebase

С помощью службы AngularFire, внедренной в наш компонент, мы теперь можем получить доступ к данным Firebase с помощью этой службы. Сначала нам нужно объявить объект типа FirebaseListObservable ‹any []›. С помощью этого наблюдаемого мы можем привязаться к списку Firebase и получить массив данных, как вы можете видеть в следующем примере:

import { Component } from '@angular/core';import { AngularFire, FirebaseListObservable } from 'angularfire2';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})export class AppComponent {
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

Для привязки к списку мы используем метод database.list () из службы AngularFire. Нам нужно передать имя конечной точки списка в виде строки для вызова метода. Используя строку ‘/ items’, мы привязываемся к списку элементов. Результирующий объект FirebaseListObservable ‹any []› сохраняется в переменной items того же типа.

Чтобы распечатать данные, полученные через наблюдаемое, мы можем использовать следующий код шаблона:

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.$value}}
  </li>
</ul>

Здесь мы используем асинхронный канал для подписки на Observable, доступный в элементах. Использование этого канала гарантирует, что мы получим последнее значение, которое было отправлено. Результат можно увидеть в следующем:

Чтобы испытать поведение базы данных в реальном времени, теперь вы можете вернуться в консоль Firebase, открыть представление базы данных и добавить еще один элемент данных:

Выходные данные нашего примера приложения обновляются немедленно, без необходимости перезагружать страницу:

Видеоурок

Этот видеоурок содержит шаги, описанные в тексте выше:

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Angular 2 + Firebase Введение