Предварительные требования: React и реактивные формы

Что такое Firebase?

Firebase — это мощный внутренний инструмент, предоставляемый облачной платформой Google, который позволяет вам сосредоточиться на интерфейсе пользователя. Через Firebase устраняется необходимость в HTTP-запросах, поскольку мы подключаемся через одно соединение через веб-сокет. Когда пользователь взаимодействует с приложением (сохранение, удаление, добавление данных), изменения загружаются автоматически, и все клиенты, подключенные к приложению, мгновенно получают обновленную информацию. Это известно как база данных реального времени. Но где хранятся данные, спросите вы? Что ж, Firebase позаботится и об этом! Он предоставляет разработчику базу данных, размещенную в облаке.

Firebase делает намного больше; загляните в документацию Firebase, чтобы узнать больше!



Документация | Firebase
Справочник по Firebase SDK, руководства по интеграции, примеры кода и библиотекиfirebase.google.com



Теперь давайте немного погрузимся в React.js.

Мы собираемся быстро настроить приложение для реагирования с помощью create-react-app.

Create-react-app позволяет мне сосредоточиться на приложении и не беспокоиться о конфигурациях веб-пакетов, которые выполняются в фоновом режиме. Я могу запустить приложение для реагирования почти сразу и сразу приступить к работе.

npm install -g create-react-app (globally installed)
create react-app name-of-your-app, for this tutorial, i will be calling mine ‘form’.
cd into the folder and yarn add firebase — — dev. This saves firebase as a dev dependency.
yarn start to view the app in the browser.

Теперь перейдем к настройке firebase.

Перейдите в firebase по следующей ссылке:



Firebase
Firebase — это мобильная платформа Google, которая помогает вам быстро разрабатывать высококачественные приложения и развивать свой бизнес.firebase.google.com



Войдите в свою учетную запись Google и нажмите «Добавить проект».

Введите название своего проекта и нажмите «Создать проект».

Затем нам будет предложено выбрать тип проекта, в который мы хотели бы добавить Firebase. Учитывая, что мы создаем веб-приложение, мы нажмем «Добавить Firebase в ваше веб-приложение».

Затем нам дается фрагмент для добавления в наш HTML-файл (потому что именно там обрабатываются сценарии), из которого мы будем использовать только объект конфигурации и игнорировать тег script, поскольку мы импортируем Firebase в наше приложение.

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

var config = {
    apiKey: <API-KEY>,
    authDomain: "form-36d39.firebaseapp.com",
    databaseURL: "https://form-36d39.firebaseio.com",
    projectId: "form-36d39",
    storageBucket: "form-36d39.appspot.com",
    messagingSenderId: "681292822974"
  };
  firebase.initializeApp(config);

Затем мы продолжим и создадим новый файл в папке src с именем «firebase.js» и скопируем этот фрагмент кода в этот файл. Мы также импортируем firebase, а также экспортируем firebase по умолчанию.

import firebase from 'firebase';
var config = {
apiKey: "<API-KEY>",
authDomain: "f<PRPJECT-NAME>.firebaseapp.com",
databaseURL: "https://<PROJECT-NAME>.firebaseio.com",
projectId: "<PROJ-ID>",
storageBucket: "<PROJECT-ID>.appspot.com",
messagingSenderId: "681292822974"
};
firebase.initializeApp(config);
export default firebase;

Теперь мы добавили firebase в наше приложение! Достаточно просто, не так ли?

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

В левой части веб-сайта Firebase нажмите база данных, а затем в разделе База данных в реальном времени нажмите Начать работу. Оттуда перейдите на вкладку rules и внутри измените настройки на:

{
  "rules": {
    ".read": "true ",
    ".write": "true"
  }

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

…а затем нажмите Опубликовать!

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

Переходим к форме…

Перейдите к файлу App.js в папке src.

Я создал небольшую форму, которую вы можете использовать…

И некоторые стили, которые вы можете скопировать в index.css

В файле App.js удалите импорт логотипа из строки «./logo.svg» и вместо этого импортируйте firebase из строки «./firebase.js».

Прежде чем мы сможем начать сохранять наши задачи в базе данных, нам нужно внести некоторые изменения в метод handleSubmit.

Сначала мы добавляем эту строку:

const taskRef = firebase.database().ref(“tasks”);

Вызов метода ref создает в базе данных место для хранения информации. Мы называем это пространство «задачами». Метод ref используется для чтения/записи в базу данных firebase.

const task = {
  date: this.state.date,
  task: this.state.task
}

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

taskRef.push(task)

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

this.setState({
  date: "",
  task: []
})

Окончательный код в нашем App.js должен быть похож на этот:

Теперь попробуйте отправить задачу!

Если мы проверим консоль firebase, мы должны увидеть что-то вроде этого:

Ключи автоматически генерируются Firebase, но если вы развернете представление, вы увидите, что Firebase хранит задачи, и они хранятся в виде пар ключ-значение.

И это все! Мы только что создали небольшое приложение, в котором хранятся все наши данные без использования бэкэнда!

Надеюсь, вам понравился этот урок.