Что такое Firebase и почему стоит с этим познакомиться

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

Firebase хранит текстовые данные в JSON формате и предоставляет удобные методы для чтения, обновления и извлечения данных. Также, Firebase может помочь с регистрацией и авторизацией пользователей, хранением сессий (авторизованные пользователи), медиафайлов к которым с легкостью предоставляет доступ благодаря Cloud Storage.

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

Зачем нужна Firebase, ведь есть другие базы данных...

Единственная причина, по которой я изначально заинтересовался Firebase, это гибкость и скорость деплоя в проект.

Вот смотрите: языки программирования Python и JavaScript сами по себе гибкие (и очень популярные). Благодаря этому, мы (разработчики) получаем мощный инструмент для создания в кратчайшие сроки сайта, веб-приложения, мобильного или даже десктопного приложения.

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

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

Панель управления Firebase

Переходим к практическому ознакомлению, давайте все щупать руками. Мы посмотрим, что находится внутри “Консоли разработчика” Firebase, познакомимся с интересными методами и отправим пару тестовых запросов. Примеры я буду показывать на JavaScript в проекте где используется Webpack и менеджер пакетов npm. Основа, все же, это JavaScript, поэтому не пугайтесь.

Регистрация

Сначала нужно перейти на сайт и зарегистрироваться в Firebase. Можно использовать свою Google почту для быстрой регистрации.

Нажимаем на большую кнопку “Добавить проект”. По желанию подключаем Google Аналитику. Возможно (не знаю осталось ли это в новой версии), вас попросит выбрать местоположение проекта, просто выберите свою страну.

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

Установка в проект за 60 секунд

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

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

npm install firebase --save

Если у вас Mac или Linux добавьте перед npm команду sudo. 

P.S: Если не учитывать, что пакеты будут устанавливаться около 3-4 минут, заголовок раздела полностью оправдывает себя. Ну ведь правда, за 60 секунд вполне реально подключить Firebase.

И не забудьте добавить firebase в проект.

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/storage'
import 'firebase/messaging'

Можно, конечно, просто добавить одну строчку: 

import firebase from 'firebase/app'

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

Теперь вставляем код из конфигурации и запускаем метод firebase.initializeApp(), в аргумент которого складываем объект config. Все это делаем во время инициализации (начала работы) вашего приложения. Пример с моего проекта:

Вот и все. Давайте посмотрим на полную мощь этого инструмента. Теперь можно перейти к регистрации пользователей.

Регистрация и авторизация пользователей за 5 минут

Для начала вернемся в консоль Firebase и перейдем на страницу “Аутентификация”. Здесь есть две вкладки, это Пользователи и Метод регистрации. 

Вкладка Пользователи покажет вам всех зарегистрированных пользователей в приложении. Вкладка Метод регистрации позволяет выбрать и настроить предпочтительный метод. Например, включим регистрацию по почте и паролю. По желанию можете там добавить авторизацию по ссылке пришедшей на почту. Просто нажмите на “Адрес электронной почты и пароль” и увидите необходимые настройки.

Метод firebase.auth().createUserWithEmailAndPassword()

С помощью этого метода мы создаем нового пользователя. 

const data = firebase.auth().createUserWithEmailAndPassword(email, password)

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

Пример кода:

async registration(email, password) {
    try {
        const data = await firebase.auth().createUserWithEmailAndPassword(email, password)
        console.log(data.user.uid)
    } catch (error) {
        console.log(error.message)
        throw error
    }
}

Я создал асинхронную функцию (если с ними не знакомы, можете прочитать статью по ссылке). В конструкции try я создаю константу data, которая ждет await метод firebase. Благодаря волшебному слову await моя async функция превращается в промис и ждет заполнения переменной data. После заполнения (удачной регистрации) она превратится в объект и будет содержать в себе данные о пользователе. Т.е потом, можно вызвать эту переменную в консоль.

Например, можно вызвать console.log(data) и получить огромный объект с кучей разных атрибутов. В моем примере, через console.log(data.user.uid), вызывается уникальный идентификатор пользователя (которого мы только что зарегистрировали).

В сам метод firebase.auth().createUserWithEmailAndPassword() я отправляю почту пользователя и будущий пароль.

В catch мы можем попытаться поймать объект error.

Из объекта error вы можете выдергивать сообщения или статус коды ошибок. Кстати, статус коды полезная вещь, ведь сообщения приходят на английском. Я лично обрабатываю только статус коды и вывожу через switch нужное сообщение пользователю.

Обработка ошибок из моего приложения:

Оставлю полезную ссылку на все статус-коды ошибок у авторизации. У каждого метода свои статус коды ошибок!

Метод firebase.auth().signInWithEmailAndPassword()

Это метод авторизации. Давайте сразу на примере. Смотрим в конструкцию try.

Пример кода:

async login(email, password) {
           try {
               const data = await firebase.auth().signInWithEmailAndPassword(email, password)
               console.log(data.user.uid)
           } catch (error) {
               console.log(error.message)
               throw error
           }
       }

Все такая же async функция и await метод. В await метод firebase.auth().createUserWithEmailAndPassword() я передаю почту и актуальный пароль пользователя. 

После прохождения авторизации (успешного выполнения метода firebase.auth().createUserWithEmailAndPassword()) константа data будет содержать в себе объект user с его идентификатором. Если пароль (ну или еще что-нибудь) будет неверным, сработает метод catch и firebase ответит ошибкой.

Через catch мы как раз и ловим сообщения об ошибках от метода firebase.

Метод firebase.auth().onAuthStateChanged()

С помощью этого метода мы можем получить авторизованного пользователя. Это что-то вроде сессии. Пока сессия существует, мы можем использовать некоторые глобальные переменные Firebase. Например, получить объект user, в котором есть идентификатор авторизованного пользователя. Сама сессия существует пару дней и привязывается к ip адресу (но это не точно).

Пример кода:

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // Какая-то логика
  } else {
    this.$router.push('/login')
  }
})

Как видите, если user существует - я что-то делаю с этим. Если нет, отправляю человека на страницу авторизации с помощью методов из Vue.js.

Ну что, впечатлены? Если бы вы это делали второй или третий раз, то потратили не больше 10 минут на полноценную регистрацию и авторизацию пользователей.

Чтение, запись и обновление данных

Снова возвращаемся в консоль. В левом меню выбираем Database. Это и есть наша база данных. Здесь нам предлагают создать либо облачную базу данных, либо Realtime Database. Выбирайте Realtime Database.

Почему Realtime Database?

Потому что она старше, стабильней и почти любая проблема с ней освещена в интернете.

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

Возвращаемся к работе с данными

Чтобы контекст был понятен, так выглядит моя база на данный момент:

Метод firebase.database().ref().push()

Для записи данных в Firebase используем метод firebase.database().ref().push().

Пример кода:

async newClient(newClinet) {
           try {
               const addClient = await firebase.database().ref('clients').push(newClinet)
               console.log(addClient)
           } catch (error) {
               console.log(error.message)
               throw error
           }
       }

Нам нужно создать асинхронную функцию. К методу firebase мы добавляем await. Если дальше хотим как-то обработать ответ от базы данных асинхронные функции обязательны.

Здесь в асинхронной функции newClient я передаю аргумент newClient. Данный аргумент содержит какой-то объект с данными, далее этот объект (новый клиент) я отправляю в Firebase.

Метод ref() содержит в себе путь, куда мы будем что-то добавлять. Для более детального понимания смотрите скриншот выше, там копия моей базы. Данного пути еще может даже не существовать, поэтому с помощью этого метода можно создавать новые хранилища (объекты в json хранилище).

Метод push() содержит в себе данные, которые мы будет отправлять в объект clients. 

Представим, код выше я запустил 3 раза. Результат запросов вы можете увидеть все на том же скриншоте выше. Как видите Firebase сама создала главный объект (хранилище) clients и записала в него три объекта поменьше. Каждому объекту Firebase сгенерировала свой ключ (идентификатор). Он уникален в рамках объекта clients.

Метод firebase.database().ref().once()

Для получения данных из Firebase используем метод firebase.database().ref().once(). 

Пример кода:

async loadClietsList() {
           try {
               const query_clientsList = await firebase.database().ref('clients').once('value')
               const clientsList = query_clientsList.val()         
               console.log(clientsListArray)
           } catch (error) {
               console.log(error.message)
               throw error
           }
       }

Нам нужно также создать асинхронную функцию. Методу firebase мы добавляем await. Константа query_clientsList содержит в себе вышеописанный метод. В ref указывается путь к объекту, который хотим получить. Посмотрите на скриншот выше, clients у меня находятся в основе моей базы данных, поэтому путь выглядит у меня максимально простым.

Если я хочу обратиться к какому-то клиенту из clients в ref, я укажу еще его идентификатор, получится ref(‘clietns/-M5mvz6HSFnbP3L2KiHG’), а если я хочу взять номер телефона конкретного клиента, ref будет выглядеть так ref(‘clietns/-M5mvz6HSFnbP3L2KiHG/number’).

После ref идет обязательный метод once(‘value’). Т.е мы говорим Firebase, что хотим по этой ссылке получить какие-то значение.

Когда await выполнится, и константа query_clientsList заполнится, мы можем воспользоваться методом val() по отношению к константе. Например, query_clientsList.val(). Если эту конструкцию мы попробуем отправить в консоль, то увидим заветные данные: три клиента из моей базы данных.

Метод firebase.database().ref().remove()

Данный метод отвечает за удаление данных из нужного объекта.

Пример кода:

firebase.database().ref('clients').remove()

Такая команда полностью удалит весь объект clients.

Если путь у ref() будет примерно такой: 'clients/-M5mvz6HSFnbP3L2KiHG’, то удален будет только тот объект в clients, который имеет данный идентификатор.

Права доступа

В базе данных есть вкладка “Правила”. 

В самом начале раздела “Чтение, запись и обновление данных” я попросил вас установить правила чтения и записи базы данных в тестовый режим. Когда вы закончите разработку приложения, вы обнаружите, что ваши данные могут менять и получать абсолютно все, у кого есть ваш конфиг. 

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

В правах доступа используется свой “язык” оперирующий значениями true и false. На скриншоте выше мои настройки, здесь я просто запретил чтение и запись всем, кто не авторизован. Мое приложение это обычная CRM система для малого бизнеса, у нее общее хранилище и данными внутри управляют 3-4 человека, а свободная регистрация вообще отсутствует, поэтому таких настроек хватает. 

Ваше приложение - ваша логика, поэтому позаботьтесь о безопасности.

P.S: Как и обещал, ссылка на документацию к Storage.

Вывод

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