Создание AngularJS приложения c использованием Firebase

В этой статье я хочу рассказать о связке AngularJS и Firebase в качестве хранилища данных.

Про AngularJS на Хабре написано много, а вот про Firebase совсем чуть-чуть. По этому я решил заполнить этот пробел. Что же такое Firebase?

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

Также Firebase предоставляет замечательную библиотеку для AngularJS — AngularFire.

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

Getting started

Первым делом мы должны создать бесплатный аккаунт. Это можно сделать, пройдя по ссылке: www.firebase.com/signup. После регистрации вы получите уникальный URL, который, в дальнейшем, будет использоваться для хранения и синхронизации данных.

Следующий шаг — добавление скриптов в ваш проект. Для использования AngularFire необходимо подключить следующие файлы:

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

Также Firebase и AngularFire доступны для установки с помощью bower:

bower install firebase angularfire 

После подключения необходимых скриптов мы можем добавить Firebase в наш AngularJS проект в качестве зависимостей.

Прежде всего, нужно добавить зависимость в модуль:

var app = angular.module("sampleApp", ["firebase"]);

После чего мы можем использовать его в контроллерах, директивах и сервисах:

app.controller("SampleCtrl", ["$scope", "$firebase",
  function($scope, $firebase) {
    var ref = new Firebase("https://<your-firebase>.firebaseio.com/");

    // create an AngularFire reference to the data
    var sync = $firebase(ref);

    // download the data into a local object
    $scope.data = sync.$asObject();
  }
]);

Трехстороннее связывание

AngularJS известен своим двухсторонним связыванием дынных между моделью JavaScript и DOM. Используя Farebase в связке с AngularJS мы можем организовать, так называемое «трехстороннее связывание», которое позволит нам синхронизировать изменения в модели JavaScript, DOM и Firebase в реальном времени.

Для этого мы можем использовать метод $asObject(), чтобы создать синхронизируемый объект и привязать его к переменной из нашего $scope, с помощью метода $bindTo(). Вот пример кода:

var app = angular.module("sampleApp", ["firebase"]);

app.controller("SampleCtrl", function($scope, $firebase) {
  var ref = new Firebase("https://<your-firebase>.firebaseio.com/data");
  var sync = $firebase(ref);

  // download the data into a local object
  var syncObject = sync.$asObject();

  // synchronize the object with a three-way data binding
  // click on `index.html` above to see it used in the DOM!
  syncObject.$bindTo($scope, "data");
});

Работа с коллекциями

Трехстороннее связывание данных прекрасно работает с простыми объектами вида ключ/значение, но довольно часто возникают задачи, когда необходимо работать с коллекциями (массивами). Для этого мы можем использовать метод $asArray().

Мы можем получить коллекцию с сервера вызвав метод $asArray, которая будет доступна только для чтения и добавить его в наш $scope:

var app = angular.module("sampleApp", ["firebase"]);

app.controller("SampleCtrl", function($scope, $firebase) {
  var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages");
  var sync = $firebase(ref);
  // create a synchronized array for use in our HTML code
  $scope.messages = sync.$asArray();
});

Учитывая тот фактор, что массив одновременно синхронизирован с сервером и клиентом, его модификация может повредить целостность данных (повредить данные путем управления не теми записями), поэтому его нельзя модифицировать, используя методы push() и splice().

Для этого AngularFire предоставляет набор методов для работы с массивами ($add, $save, $remove). Вот пример синхронизации массива данных:

var app = angular.module("sampleApp", ["firebase"]);

app.controller("SampleCtrl", function($scope, $firebase) {
  var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages");
  var sync = $firebase(ref);
  $scope.messages = sync.$asArray();

  $scope.addMessage = function(text) {
    $scope.messages.$add({text: text});
  }
});

Добавление аутентификации

Firebase предоставляет службу аутентификации, которая предлагает решение управления пользовательскими данными и аутентификацию полностью на стороне клиента. Из коробки Firebase поддерживает анонимную аутентификацию, с помощью e-mail и пароля, а также аутентификацию с использованием популярных OAuth провайдеров (Facebook, Github, Google, Twitter).

Библиотека AngularFire предоставляет нам сервис — $firebaseAuth, который является оберткой для методов аутентификации, поставляемых библиотекой Firebase. Данный сервис может быть добавлен в ваши сервисы, контроллеры и директивы в качестве зависимости. Вот пример аутентификации с помощью Facebook:

app.controller("SampleCtrl", ["$scope", "$firebaseAuth",
  function($scope, $firebaseAuth) {
    var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
    var auth = $firebaseAuth(ref);
    auth.$authWithOAuthPopup("facebook").then(function(authData) {
      console.log("Logged in as:", authData.uid);
    }).catch(function(error) {
      console.error("Authentication failed: ", error);
    });
  }
]);

Более подробно об аутентификации можно прочитать на официальном сайте.

Что дальше?

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