Настройка Firebase для вашего следующего проекта

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

Начиная

Чтобы запустить и запустить Firebase, вам необходимо создать бесплатную учетную запись разработчика, посетив их веб-сайт и зарегистрировавшись. Как только вы успешно зарегистрируетесь, Firebase перенаправит вас на панель управления вашей учетной записью, где у вас будет доступ ко всем местоположениям данных Firebase и другим полезным функциям. Тем не менее, прямо сейчас вы должны выбрать местоположение данных Firebase под названием МОЕ ПЕРВОЕ ПРИЛОЖЕНИЕ . Не стесняйтесь переименовать это приложение или создать новое.

Когда местоположение данных Firebase было создано, ему было присвоено собственное уникальное имя хоста . Это уникальное имя хоста очень важно; потому что это место, где ваши данные будут читаться и записываться тоже. Мы обсудим имя хоста более подробно позже в этом уроке, но пока:

Давайте начнем строить

Первый пункт повестки дня: создайте новый HTML-файл, который ссылается на CDN-клиенты Firebase, jQuery и Bootstrap. Совершенно очевидно, что нам нужно сослаться на CDN Firebase. Теперь может быть не так понятно, почему мы ссылаемся как на jQuery, так и на Bootstrap. Я использую jQuery и Bootstrap для быстрой разработки приложений. Обе эти библиотеки позволяют мне делать вещи очень быстро, и они не требуют много ручного кодирования. Однако я не буду подробно рассказывать ни о jQuery, ни о Bootstrap; так что не стесняйтесь узнать больше об этих библиотеках JavaScript самостоятельно.

HTML

Разметка, которая реализует то, что я описал, выглядит следующим образом:

Теперь, когда мы создали наш HTML-файл и ссылаемся на правильные CDN, давайте приступим к разработке остальной части нашего приложения.

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

Давайте реализуем окно сообщения для отправки сообщений на сервер заранее. Это потребует от нас создания простого интерфейса, включающего поле input и кнопку отправки , заключенную в теги form . Поскольку мы ссылаемся на таблицу стилей Bootstrap, у нас есть удобство использования некоторых предопределенных стилей начальной загрузки для создания интерфейса. Как я уже говорил ранее, это очень удобно и позволяет нам писать меньше кода вручную.

Итак, давайте сначала разместим div с container атрибутов класса сразу после открывающего тега body в файле HTML. Это функция начальной загрузки, которая обеспечивает ограничения ширины и заполнение для содержимого страницы. В тегах контейнера давайте добавим заголовок, заключенный в теги H1 , чтобы мы могли дать приложению описательное имя. Мое название будет «Приложение Firebase Chat». Не стесняйтесь использовать свой творческий потенциал при написании своего названия.

Разметка, которая реализует то, что я описал выше, выглядит следующим образом:

Кроме того, нам также нужно добавить div с атрибутами класса: panel и panel-default . Панель — это компонент Bootstrap, который по умолчанию представляет собой простое поле с четырьмя внутренними DIV: panel-heading panel-title panel-body panel-footer . Мы не будем использовать panel-heading panel-title и panel-heading panel-title но мы будем использовать и panel-body и panel-footer . panel DIV будет использоваться в качестве основного контейнера для клиента чата.

Разметка, которая реализует то, что я описал выше, выглядит следующим образом:

На данный момент мы не будем работать с panel-body . Однако нам потребуется использовать этот раздел позже в руководстве для заполнения сообщений из нашего расположения данных.

Прямо сейчас мы сосредоточимся на div нижнего колонтитула панели. Нижний колонтитул панели будет содержать поле ввода, кнопку отправки и кнопку сброса. Мы дадим полю ввода идентификатор атрибута comments а кнопку отправки — идентификатор атрибута submit-btn . Оба эти атрибута id очень важны и понадобятся позже в этом уроке. Не стесняйтесь изменять идентификаторы атрибутов для элементов формы.

Разметка, которая реализует то, что я описал выше, выглядит следующим образом:

Теперь давайте реализуем JavaScript, который позволит нам отправить сообщение в наш каталог данных Firebase.

JavaScript

Сначала нам нужно добавить набор тегов script непосредственно над закрывающим тегом body в файле HTML. В тегах скрипта нам нужно создать ссылку на местоположение данных нашего Firebase. Без этой ссылки мы не можем записать данные в наше местоположение данных. Это может быть достигнуто путем инициализации конструктора Firebase и передачи нашего местоположения данных в качестве параметра. Помните, местоположение данных Firebase было создано при настройке Firebase (уникальное имя хоста).

Код, который реализует то, что я описал выше, выглядит следующим образом:

После инициализации эталонного объекта Firebase нам нужно привязать обработчик события щелчка к селектору кнопки отправки. Расположение этого селектора находится в нижнем колонтитуле панели. Кроме того, нам нужно убедиться, что обратный вызов обработчика событий содержит оператор return false в качестве последней строки кода. Это обеспечит, что действие по умолчанию отправки формы не произойдет, и предотвратит всплывание события в DOM-дереве. Однако в некоторых случаях вы можете захотеть, чтобы происходило всплытие событий.

Оба фрагмента JavaScript ниже реализуют то, что описано выше:

Далее мы определим переменную, которая ссылается на селектор комментария, и другую переменную, которая удаляет пробелы в начале и конце значения комментария.

Код, который реализует то, что я описал выше, выглядит следующим образом:

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

Запись данных в Firebase

API Firebase предлагает несколько методов для записи данных в местоположение данных. Однако в сегодняшнем уроке мы сосредоточимся на использовании методов set() и push() . Давайте кратко рассмотрим, что каждый из этих методов позволяет нам делать.

• Метод set() записывает данные в расположение данных, а также перезаписывает любые данные, которые в данный момент хранятся в этом месте.
• Метод push() записывает данные в местоположение данных, автоматически генерируя новое дочернее местоположение с уникальным именем. Кроме того, этому уникальному имени будет предшествовать отметка времени. Это позволит отсортировать все дочерние места в хронологическом порядке.

После просмотра методов set() и push() ; Я думаю, что совершенно очевидно, что нам нужно использовать метод push() в нашем приложении. В противном случае мы будем постоянно перезаписывать последние комментарии в нашем местоположении данных, и это было бы неинтересно.

Чтобы сделать это, давайте вернемся к JavaScript, который мы ранее добавили на нашу страницу. Теперь нам нужно поместить значение комментария в наше местоположение данных. Теперь имейте в виду, что существуют различные методы push которые позволяют нам передавать данные в различных форматах, таких как объект, массив, строка, число, логическое значение или ноль. Мы просто будем использовать объект, который имеет пару значений ключа комментария и значение комментария. Кроме того, мы добавим необязательный обратный вызов к файлу после завершения методов push . Обратный вызов вернет объект ошибки при сбое, а при успехе — нулевое значение.

Код, который реализует то, что я описал выше, выглядит следующим образом:

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

Код, который реализует то, что я описал выше, выглядит следующим образом:

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

Чтение данных из Firebase

Как мы упоминали ранее, большинство приложений в стиле чата считывают данные с сервера, а затем заполняют часть интерфейса. Нам потребуется сделать то же самое в нашем приложении, используя API Firebase.

API Firebase предлагает несколько методов для чтения данных из местоположения данных. В сегодняшнем уроке мы сосредоточимся на использовании метода on() .

У метода on() есть несколько аргументов, на которые стоит обратить внимание, но мы рассмотрим только первые два аргумента: eventType и callback . Давайте рассмотрим оба из них.

Выбор eventType

Аргумент » eventType » имеет несколько опций. Давайте рассмотрим каждый из них, чтобы мы могли определить, какие из них будут соответствовать нашим потребностям.

• « value » — будет активировано один раз и будет считывать все комментарии, и при каждом изменении каких-либо комментариев оно будет запускаться снова, а также читать все комментарии.
• « child_added » — будет запускаться один раз для каждого комментария, а также каждый раз, когда добавляется новый комментарий.
• » child_removed » — будет срабатывать при каждом удалении комментария.
• « child_changed » — будет срабатывать при каждом изменении комментария.
• « child_moved » — будет срабатывать при каждом изменении порядка комментариев.

После просмотра вышеупомянутых опций, кажется совершенно ясным, что мы должны использовать « child_added » в качестве нашего « eventType ». Этот четный тип будет активирован один раз для каждого комментария в нашем местоположении данных, а также каждый раз, когда добавляется новый комментарий. Кроме того, при добавлении нового комментария он не вернет весь набор комментариев в этом месте, а только последний добавленный дочерний комментарий. Это именно то, что мы хотим! При добавлении нового комментария нет необходимости возвращать весь набор комментариев.

Анализируя callback

« callback » для метода on() предоставляет элемент, который Firebase называет «снимком данных», который имеет несколько функций-членов, в настоящее время основное внимание уделяется name() и val() .

Функция-член name() предоставляет нам уникальное имя «снимка данных». Если вы помните ранее, мы использовали функцию push() чтобы написать новый комментарий к нашему расположению данных. Когда вызывался push() , он генерировал новое дочернее местоположение, используя уникальное имя, и это имя будет возвращено через функцию-член обратного вызова name() .

Функция-член val() предоставляет нам объектное представление JavaScript «снимка данных», и с этим снимком мы сможем получить комментарий из нашего местоположения данных. Тем не менее, нам нужно вернуться на мгновение.

Ранее в этом уроке мы реализовали JavaScript, необходимый для отправки комментариев в нашу локацию Firebase, и сделали это, нажав объект с парой ключ-значение. В этом случае ключом был « comment », а значением был ввод, введенный пользователем. Поэтому, если мы хотим извлечь комментарий из нашего «снимка данных», нам нужно распознать правильный тип данных. В этом случае мы имеем дело с объектом, поэтому вы можете использовать либо точечную запись, либо скобочную запись для доступа к указанному свойству.

Оба фрагмента JavaScript ниже, реализуют то, что описано выше:

Визуализация комментариев

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

Код, который реализует то, что я описал выше, выглядит следующим образом:

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

Это должно выглядеть примерно так:

Теперь давайте применим несколько простых стилей CSS к DIV, обернутым вокруг каждого блока комментариев. Это сделает внешний вид более привлекательным и удобным для пользователя. Эти стили должны быть добавлены в теги стиля, расположенные в разделе заголовка HTML.

Код, который реализует то, что я описал выше, выглядит следующим образом:

Запуск приложения

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

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

Проверьте онлайн демо, чтобы увидеть его в действии. Ниже приведен полный исходный код всего приложения чата:

В итоге

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

• Ссылка на местоположение данных Firebase путем инициализации конструктора Firebase.
• Запись данных в Firebase с использованием метода push .
• Чтение данных из Firebase с помощью метода on с типом события child_added .

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

Ресурсы

• Firebase
• JQuery
• начальная загрузка