FireEdit: Разработка редактора реального времени с JavaScript и Firebase

FireEdit: Разработка редактора реального времени с JavaScript и Firebase
Я всегда восхищался веб-приложениями реального времени. Несколько лет назад я пробовал имитировать такое поведение в своём приложении многочисленными повторяющимися запросами к серверу. Это работало, но было очень неэффективно. Потом я узнал о веб-сокетах.

Я слышал, разработчики поговаривали о чем-то, называемом Firebase. А не так давно Эмме — это мой друг, коллега и просто хороший человек — понадобилась помощь с Firebase и мы решили освоить её вместе.

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

Ссылка на конечный результат: FireEdit — пользуйтесь им, ставьте звёзды, форкайте и наслаждайтесь!

FireEdit

Совместная работа очень важна. К примеру, мы с Эммой очень часто обмениваемся кусочками кода (особенно часто при поиске багов). Однако, в чатах это делать неудобно — нет подсветки кода, неподходящие шрифты, нет возможности отредактировать код и т.п.

Для удобства я придумал редактор на базе Firebase, пока мы обучались работе с Firebase. Мы назвали наше приложение FireEdit.

FireEdit: Разработка редактора реального времени с JavaScript и Firebase
Да, я знаю, что таких редакторов много, но этот мы сделали сами как первый опыт работы с Firebase, у него открытый исходный код и мы сейчас покажем, как мы его сделали!

Firebase

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

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

Здесь вы можете почитать о том, как быстро начать работу с Firebase. Однако, здесь мы также рассмотрим основные моменты при работе с ней.

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

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

Ace Editor

А теперь представьте текстовый редактор (типа Sublime Text), работающий в вашем браузере без установки дополнительных компонент и ПО.

Это и есть Ace Editor — текстовый редактор для браузера с подсветкой синтаксиса, темами оформления и даже сочетаниями клавиш от VIM/Emacs! Так же посмотрите демонстрационные версии Ace Editor.

В этой статье Wikipedia есть список всех подобных редакторов.

Создаём приложение

Во-первых, это будет веб-приложение. Поэтому нам нужен будет HTML, CSS и, конечно, JavaScript! Создадим файлы по такой иерархии:

├── css
│ └── style.css
├── index.html
└── js
└── index.js

index.html это файл, который загрузит файлы css/style.css и js/index.js при его открытии в браузере.

Начнём с минимального шаблона HTML в index.html:





FireEdit

Welcome to FireEdit!








Сейчас мы не будем рассматривать работу с CSS (о стилях поговорим позже), а сфокусируемся на функционале (за это отвечает JavaScript). И в первую очередь создадим приложение Firebase.

Конфигурация Firebase

1. Создайте приложение Firebase

2. Загрузите сценарий Firebase в ваше приложение:

В вышеуказанном файле HTML мы уже указали этот сценарий. При появлении новых версий Firebase вы должны заменить версию в строке адреса ( сейчас это 3.6.4 ).

3. Настройте Firebase (кликните по кнопке «Add Firebase to your web app» в секции Overview):
// Initialize Firebase
var config = {
apiKey: "AI...kBY",
authDomain: "... .firebaseapp.com",
databaseURL: "https://... .firebaseio.com",
storageBucket: "... .appspot.com",
messagingSenderId: "9...6"
};
firebase.initializeApp(config);

Небольшое введение в использование Firebase с JavaScript

Представьте себе Firebase как большой объект, который хранит ваши данные. Мы спроектируем съему подобную этой (это просто пример организации данных):

{
"root": {
"editor_values": {
"johnny+emma+article": {
"content": "Hello world. This is how we started this very article. :D",
"lang": "markdown",
"queue": {...}
}
}
}
}

Итак, как мы сможем работать с такой структурой из JavaScript? Сперва нам нужно вызвать корневой узел root, и метод firebase.database() как раз вернёт его:

// Get the database object
var db = firebase.database();

После того, как у нас появился корень, мы можем получать другие данные. Предположим, нам нужно содержимое редактора с id «johnny+emma+article»:

// We know what's the editor id
var editorId = "johnny+emma+article";

// Get the reference to the editor values
var editorValues = db.ref("editor_values");

// Get the entire editor object
editorValues.child(editorId).once("value", function (snapshot) {
console.log(snapshot.value());
/* {
"content": "Hello world. This is how we started this very article. :D",
"lang": "markdown",
"queue": {...}
} */
});

// Get the value of the `content` field only:
editorValues.child(editorId).child("content").once("value", function (snapshot) {
console.log(snapshot.value());
// "Hello world. This is how we started this very article. :D"
});

Методами set или update мы можем записывать данные в Firebase. Например, так:

// This is going to set the content in the editor to "hello world"
editorValues.child(editorId).update({
content: "hello world"
});

Синхронизация данных с другими клиентами

При любом обновлении данных, это обновление автоматически распространяется на все клиенты, прослушивающие его. К примеру, когда я редактирую текст у себя, я хочу, чтобы Эмма увидела эти изменения.

Мы начали с простого элемента

Чтобы не пропустить новые статьи, оставь свой Email

Поздравляем вы подписаны на новости ТехноДжем!

TВо время отправки данных произошла ошибка. Попробуйте ещё раз

Оставляя свою почту