Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

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

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Начинаем

Чтобы запустить Firebase, вам нужно будет создать бесплатную учетную запись разработчика, посетив их веб-сайт и зарегистрировавшись. После того, как вы успешно зарегистрировались, Firebase перенаправит вас на панель управления вашей учетной записью, где у вас будет доступ ко всем местоположениям данных Firebase и другим интересным функциям. Однако сейчас вы должны выбрать местоположение данных Firebase под названием MY FIRST APP. Не стесняйтесь переименовывать это приложение или создать новое.

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

Начнем строить

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

HTML-код

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

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

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

Давайте реализуем окно сообщения для отправки сообщений на сервер перед началом работы. Это потребует от нас создания простого интерфейса, который включает в себя поле input и кнопку submit, завернутые в теги 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-body, так и panel-footer. panel DIV будет использоваться в качестве основного контейнера для клиента чата.

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

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

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

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

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

JavaScript

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

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

После инициализации ссылочного объекта Firebase нам нужно привязать обработчик события клика к селектору кнопки отправки. Расположение этого селектора находится в футере панели. Кроме того, нам нужно убедиться, что обратный вызов обработчика события содержит оператор return false как последнюю строку кода. Это гарантирует, что действие по умолчанию для отправки формы не произойдет и не позволит событию разбудить дерево DOM. Однако в некоторых случаях вам может понадобиться всплывание событий вверх по 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(), он генерировал новое дочернее местоположение, используя уникальное имя, и это имя, которое будет возвращено с помощью функции члена call back, name().

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

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

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

Отображение комментариев

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

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

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

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

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

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

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

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

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

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

В итоге

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

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

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

Ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.