Firebase в Интернете

Я недавно изучаю Firebase (я знаю, что уже немного поздно с тех пор, как Google анонсировал новые вещи), и я здесь, чтобы поделиться тем, что я только что узнал (в любом случае ).

Что такое Firebase?

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

Чтобы ознакомиться с возможностями Firebase, я создал простое приложение Todo List Application, которое демонстрирует использование аутентификации и базы данных, где пользователь может добавлять задачи в один список, и автоматически сохраняет данные, чтобы сохранить их, даже когда пользователь выходит из приложение. Вы можете проверить приложение здесь: https://fir-js-app.firebaseapp.com/

Если вам интересно, как работает приложение, читайте дальше.

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

  1. Аутентификация: нам нужна аутентификация, чтобы мы могли идентифицировать пользователя и создать список с его собственным уникальным идентификатором.
  2. База данных. Конечно, она нужна нам для хранения информации о пользователе и данных из его списка.

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

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

Чтобы запустить приложение Firebase, вам понадобится аккаунт Google, чтобы иметь доступ к сервису Firebase. Так что, если у вас все еще нет учетной записи Google, зарегистрируйтесь здесь: https://accounts.google.com/SignUp?hl=ru.

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

Теперь нам нужно создать проект, просто нажмите кнопку Добавить проект, и вам будет предложено ввести имя проекта и выбрать страну или регион приложения. Как только вы закончите заполнение деталей, просто нажмите кнопку Создать проект, и у вас будет проект Firebase, над которым вы будете работать.

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

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

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

Вот как я добавил Firebase в свое приложение.

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

Итак, вот что я сделал:

  1. Инициализируйте приложение с конфигурацией, предоставленной для проекта из Firebase.
  2. Напишите переменную, в которой мы вызываем функции auth () и database ()
  3. Добавьте область действия и настраиваемый параметр для поставщика аутентификации.

Перейдем к следующему шагу.

Аутентификация

Это первое, над чем я работал над приложением, оно нам нужно, чтобы идентифицировать пользователя. У нас есть несколько опций, которые мы можем использовать для аутентификации пользователей. На панели управления проекта в Firebase перейдите в раздел Аутентификация и нажмите вкладку Метод входа.

Мы можем использовать классическую аутентификацию по электронной почте / паролю, разрешить анонимный вход и вход по телефону или использовать вход с такими поставщиками, как Google, Facebook, Twitter и Github. По умолчанию все это отключено, вы можете щелкнуть по провайдеру или методу, который вам нужен, чтобы включить его (некоторые параметры могут предложить вам предоставить учетные данные API).

В своем приложении я использовал Google в соответствии с моим примером настройки Firebase. Чтобы подписать-i, мы можем вызвать auth.signInWithPopup(provider).then().catch();, когда пользователь нажимает кнопку входа. А чтобы выйти, позвоните auth.signOut().then().catch();.

Мы можем отслеживать состояние аутентификации с помощью auth.onAuthStateChanged();. Вот как выглядит обычный onAuthStateChanged().

auth.onAuthStateChanged(user => {
 if(user) {
  // IF A USER IS LOGGED IN DO YOUR LOGIN ACTIONS HERE
 } else {
  // IF A USER IS LOGGED OUT DO YOUR LOGOUT ACTIONS HERE
 }
});

Вот как выглядит моя процедура аутентификации.

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

Чтение и запись данных

Для работы с базой данных нам нужно вызвать firebase.database(), это инициирует соединение с базой данных. Теперь давайте посмотрим, какие функции нам нужны для чтения и записи данных.

Если вам интересно, как выглядит база данных на панели управления проекта Firebase, нажмите База данных в меню справа. Так выглядит заполненная база данных.

Получить все данные

firebase.database().ref().once('value').then(function(snapshot){
   var data = snapshot.val();
});

При этом будет прочитана вся база данных один раз, и вы можете получить доступ к данным, вызвав snapshot.val().

Получить данные с определенного объекта

firebase.database().ref('users').once('value')
  .then(function(snapshot){
     var users = snapshot.val();
  });

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

Получение дочерних объектов

var currentUser = firebase.auth().currentUser.uid;
firebase.database().ref('users').child(userId).once('value')
  .then(function(snapshot){
     var user = snapshot.val();
});
// OR THIS ONE
firebase.database().ref('/users/'+userId).once('value')
  .then(function(snapshot){
     var user = snapshot.val();
});

Если у вас есть данные пользователя, хранящиеся в объекте с их uid, вы можете получить к ним доступ, присоединив функцию child() кref() или объединив uid с ref(),, и он вернет этот определенный объект.

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

Всегда помните, что когда вы записываете данные в базу данных, вы не можете сделать это, не установив объект без значения. Например, я хотел создать объект с именем playlist. Мне нужно инициализировать его данными, иначе объект вообще не будет записан в базу данных.

Создание объекта

Например, если вы хотите создать ссылку или объект пользователей, вы можете это сделать.

firebase.database().ref().child('users').set({
  "uid": {
     "fake-data":1
  }
});

Это создаст объект users с поддельными данными, вы всегда можете удалить их позже, когда у вас есть реальные данные для хранения. Это просто для установки нужных вам объектов. Лично я создал их вручную на панели инструментов своего проекта в Firebase Console и начал с фиктивных данных, чтобы увидеть, какая структура лучше всего подойдет для приложения. Вы также можете использовать этот запрос для создания новых данных для объекта users или объекта, которым вы хотите заполнить данные. Просто помните, что set() повсеместно используется для записи данных в firebase. Вы также можете использовать push() для сохранения данных в базе данных, но они будут находиться под идентификатором, который представляет собой строку, связанную с меткой времени. Если вы хотите установить уникальный идентификатор для своих объектов, вы можете использовать child('your_id'), чтобы установить его.

Обновление объекта

Вы можете использовать set() или update() для обновления объекта, просто будьте осторожны при его использовании, потому что он может полностью перезаписать все данные в объекте.

Удаление объекта

Допустим, вы хотите удалить песню из своего плейлиста, вот как вы ее удалите.

var songId = 12;
firebase.database().ref('playlist').remove(songId);

Настройка запросов к базе данных

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

Использование базы данных реального времени

Чтобы использовать базу данных в реальном времени, мы должны использовать запросы событий Firebase. В моем приложении я использовал событие on('value',fn), это событие будет срабатывать каждый раз, когда происходит изменение ссылочного объекта, к которому он прикреплен. В своем приложении я прикрепил это событие к списку пользователей, определив его uid в базе данных. Именно об этой строке по сути аутентификации я и говорю.

listsRefObject = firebase.database()
                  .ref('lists').child(currentUser.uid);

Вот как мы прикрепляем событие изменения значения к ссылочному объекту.

listsRefObject.on('value', function(snapshot){
    var list = snapshot.val();
    // Do you thing here like e.g. refreshing the UI.
});

Вы можете проверить функции списка дел здесь.

Дополнительно

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

Вывод

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

Источники