Использование Firebase с AngularJS

10 января 2018

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

Что такого хорошего в использовании Firebase с AngularJS? Ну, если вы посмотрите, как сделаны обе технологии, есть ваш ответ. Двунаправленная привязка данных от AngularJS работает исключительно хорошо с Firebase «Не просто сохранять данные, а синхронизировать их». философии.

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


Шаг 1: Настройка базы данных

Начнем с создания базы данных. Если у вас еще нет учетной записи, создайте ее (вы можете войти в систему с GitHub!). Затем войдите в систему и создайте приложение, заполнив форму и нажав кнопку.

Так как мы будем использовать Facebook в дальнейшем, вам нужно будет предоставить информацию о своем приложении Facebook (то есть идентификатор приложения и секрет приложения) в настройках вашей базы данных. Нажмите кнопку «Управление» под именем приложения Firebase и перейдите на вкладку «Простой вход», затем введите запрошенную информацию и установите флажок «Включено».

Вам также придется настроить приложение Facebook, чтобы оно работало. Весь процесс довольно быстрый и описан на сайте Firebase.


Шаг 2: Настройка углового приложения

Начнем с создания базового HTML и JavaScript для нашего приложения. Мы создадим простое приложение для чата, которое позволит пользователям регистрироваться с помощью Facebook.

Создайте HTML-файл и поместите эту разметку внутри:

<html>
    <head>
        <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
        <script src="https://code.angularjs.org/1.3.8/angular.js"></script>
        <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
        <script src="angular.app.js"></script>
    </head>
    <body ng-app="simpleChat">
        <div ng-controller="MessagesCtrl">
            <button ng-click="login()" ng-hide="authData">Log In</button>
            <input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">
            <div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>
        </div>
    </body>
</html>

Как вы можете видеть, он содержит несколько сценариев, которые нам нужны. Конечно, это включает firebase.js и angular.js, и нам также нужна firebase-simple-login.js для аутентификации Facebook. angularfire.min.js содержит модуль AngularFire, который значительно упрощает работу с Firebase.

Теперь создайте файл angular.app.js, в который мы поместим нашу логику приложения. Начнем с объявления основного модуля simpleChat:

var app = angular.module('simpleChat', ['firebase']);

Как вы можете видеть, единственной зависимостью является модуль Firebase от AngularFire.


Шаг 3: Простой вход

Теперь давайте создадим код, который позволит пользователям входить в систему с помощью Facebook. Поскольку наше приложение настолько мало, у нас будет только один контроллер: MessagesCtrl.

app.controller('MessagesCtrl', ["$scope", "$firebase", 
    function ($scope, $firebase) {

Функция $ firebase позволит нам подключиться к базе данных Firebase, а $ firebaseSimpleLogin будет управлять файлами входа.

Нам понадобится экземпляр Firebase, поэтому давайте его создадим:

var ref = new Firebase("https://tutssampleapp.firebaseio.com/");

Разумеется, замените «свой уникальный URL» на URL своей базы данных. Теперь подготовьте объект входа, используя $ firebaseSimpleLogin и ref, который мы только что создали:

$scope.login = function(){
            ref.authWithOAuthPopup("facebook", function(error, authData) {
            });
        }

И это очень важно для получения статуса входа в систему. Если пользователь вошел в систему, переменная $ scope.loginObj.user будет содержать объект с данными пользователя; в противном случае он будет равен нулю.

Теперь добавьте

с нашим контроллером и кнопкой, чтобы пользователь мог войти в тело вашей страницы:

<div ng-controller="MessagesCtrl">
    <button ng-click="login()" ng-hide="authData">Log In</button>
    <input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">
    <div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>
</div>

Мы использовали директиву ngHide, чтобы скрыть кнопку, когда пользователь вошел в систему. Теперь метод $ scope.login () просто вызовет метод с тем же именем в $ scope.loginObj:

$scope.login = function(){
            ref.authWithOAuthPopup("facebook", function(error, authData) {
            });
        }

Единственным параметром, который мы использовали, является имя поставщика, используемого для входа пользователя в систему. Теперь вы можете протестировать свое приложение, и при входе в систему должна исчезнуть кнопка входа в систему.


Шаг 4: Отображение сообщений

Как вы может ожидать, это также будет довольно легко. Сначала давайте подготовим HTML. Мы будем использовать ngRepeat для просмотра всех сообщений и отображения их:

<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>

Теперь нам нужно обновить контроллер. Создайте переменную obj, которая будет удерживать объект, возвращенный из Firebase:

var obj = $firebase(ref).$asObject();

Метод $ asObject () преобразует всю ссылку на объект Javascript несколькими полезными методами. Вызывается тот, который мы будем использовать. $ BindTo () и позволит нам создать трехстороннюю привязку (Firebase-AngularJS-DOM):

obj.$bindTo($scope, "data");

Мы помещаем $ scope в качестве первого параметра, а имя свойства - вторым. Объект, который мы связываем, появится в $ scope под этим именем (в этом примере - $ scope.data).

И это все, что вам нужно для отображения сообщений! Конечно, если вы не поместили что-то в массив сообщений в своей базе данных, вы ничего не увидите, если сейчас запустите свое приложение.


Шаг 5: Отправка сообщений

Это будет еще быстрее. Давайте добавим ввод в div нашего контроллера, чтобы наши пользователи могли вводить сообщения:

<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">

Значение ввода будет привязано к переменной $ scope.newMessage.text, и его событие keyup вызовет обратный вызов $ scope.handleKeyup (). Обратите внимание, что мы передали $ event в качестве параметра, так как нам нужно проверить, нажал ли пользователь Enter.

Определим функцию $ scope.handleKeyup ():

$scope.handleKeyup = function handleKeyup(e) {

Сначала мы проверяем, была ли нажата клавиша Enter:

if (e.keyCode == 13) {

Если это так, мы добавляем отображаемое имя пользователя в объект $ scope.newMessage, обновляем массив $ scope.data.messages и сбрасываем объект $ scope.newMessage:

$scope.newMessage.author = ref.getAuth().facebook.displayName;
ref.child("messages").push($scope.newMessage);
$scope.newMessage = {};

Вы также должны инициализировать объект $ scope.newMessage:

$scope.newMessage = {};

Вот и все - ppen ваше приложение в двух браузерах (чтобы вы могли использовать две учетные записи Facebook) и попробовать! Как обычно, пожалуйста, оставьте любые вопросы, комментарии и общую обратную связь в форме ниже.