Сегодня поговорим о сервисе, который превращает 100 строк бэкенд-кода в 10 строк фронтенда. Для лучшего понимания работы Firebase мы напишем небольшое приложение: список покупок, который обновляется на всех устройствах мгновенно, данные сохраняются даже оффлайн. Это значит, что вам не нужно будет писать ни строчки серверного кода.
Прежде чем мы углубимся в технические детали, отмечу инструмент для тех, кто хочет выйти за рамки обычных веб-приложений — BotHub. Это агрегатор нейросетей, который добавляет AI-функциональность в ваши проекты. А при регистрации по этой ссылке вы получите 100 000 капсов для создания первых проектов!
Что такое Firebase
Firebase – это облачный сервис для создания web и мобильных приложений. Предполагается, что он может послужить полноценным отделом бекэнд-разработки в облаке.
Концепция BaaS (Backend as a Service)
Firebase представляет собой полностью управляемую платформу Backend-as-a-Service (BaaS), построенную на бессерверной архитектуре (serverless computing).
Принцип работы основан на декомпозиции традиционного бэкенда на независимые микро-сервисы, каждый из которых решает конкретную задачу через специализированные API. Аутентификация реализована как отдельный сервис идентификации, использующий протоколы OAuth 2.0 и OpenID Connect с поддержкой федеративных провайдеров.
Система мгновенных обновлений работает по паттерну наблюдения через постоянные подключения. Изменения передаются через облачную систему рассылки сообщений. Хостинговая инфраструктура построена на глобальной CDN-сети с автоматическим шифрованием соединений и кэшированием на ближайших к пользователю серверах, что обеспечивает минимальные задержки соединения.
Правила доступа обеспечивают проверку данных до выполнения запросов, поэтому необходимость в дополнительной проверке на стороне сервера отпадает. Вся платформа скрывает сложность инфраструктурных задач: автоматическое расширение мощностей, распределение нагрузки, обновление защиты и восстановление работы управляются автоматически через центральную систему управления на базе Google Cloud Platform.
Это позволяет разработчикам сосредоточиться на клиентской части, а платформа координирует работу распределенной системы мелких сервисов с гарантированной надежностью. Все технические аспекты от выделения ресурсов до наблюдения за работой и технического обслуживания. Всеми этими процессами разработчик может управлять через простые настройки на сайте сервиса.
Архитектура приложения
Давайте не будем затягивать и перейдём к созданию нашего приложения. Оно простое, но именно такой пример и требуется лучшего понимания настройки сервиса.
Настройка проекта в Firebase Console
Заходим на официальный сайт и проходим регистрацию через Google аккаунт.
После аутентификации, вы должны увидеть перед собой следующую страницу.
Нажимаем на кнопку Go to console.
Выбираем Get started.
Далее вам нужно придумать имя для проекта. Приложение для списка можно назвать «shopping», или, например, «shopping-list».
Для лучшей скорости на территории СНГ рекомендую выбрать регион europe-west1. При настройке аналитики соглашаемся со всеми пунктами. Ждем 1-2 минуты пока проект создается
После создания проекта вы увидите следующую страницу:
По желанию можете закрыть или оставить блок с Gemini.
Что происходит за кулисами создания проекта:
-
Google выделяет вам виртуальный сервер
-
Настраивает глобальный CDN (Content Delivery Network)
-
Подготавливает базы данных
Регистрация приложения
Теперь, нажмите на значок настройки рядом с Project Overview -> Project Settings, мотаем вниз и нажимаем значок </> (Web).
Регистрируем название приложения, например, «shopping-list-web».
Не ставим галочку «Хостинг» (подключим позже). На этапе Add Firebase SDK
Выбираем Use a <script> tag.
Скопируйте конфигурационный объект, который появился в результате регистрации приложения.
Теперь снова заходим в Project Settings и в поле SDK Setup and Configuration переключаем на Config. Копируем конфигурационный объект.
Он должен выглядеть примерно так:
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBki4B-0uhAnmX5ZPYmiboULwogJfhIRpA",
authDomain: "mymymy-26516.firebaseapp.com",
projectId: "mymymy-26516",
storageBucket: "mymymy-26516.firebasestorage.app",
messagingSenderId: "816267756949",
appId: "1:816267756949:web:f1d4858f7a8106b3c4a29c",
measurementId: "G-V56F60X4XS"
};Смысл в том, что каждое приложение (iOS, Android, Web) получает уникальный ID для обеспечения безопасности.
Активируем сервис Authentication с методом входа по email/пароль
В левом меню консоли выбираем: Build → Authentication. Щёлкаем по вкладке Sign-in method. Включаем Email/Password и сохраняем. Теперь в меню Project shortcuts появится вкладка Authentication.
Real-time база данных: Как список синхронизируется сам
Cloud Firestore работает по принципу постоянного подключения между клиентом и облаком. Когда пользователь открывает приложение, устанавливается WebSocket-соединение, которое остается активным все время работы.
Что будет происходить при добавлении товара:
Пользователь вводит «Молоко» → данные отправляются в Firestore → облако рассылает обновление всем устройствам пользователя → список автоматически обновляется на телефоне, планшете и компьютере без перезагрузки.
-
Особенности реализации и преимущества данного метода состоят в том, что Соединение автоматически восстанавливается при обрыве
-
Локальный кэш обеспечивает работу без интернета
-
Автоматическое разрешение конфликтов при одновременном редактировании
Это отличается от традиционных REST API, где нужно постоянно опрашивать сервер на наличие изменений. Firestore сам «толкает» изменения клиентам, обеспечивая истинную синхронизацию в реальном времени. Фильтрация данных в базе данных будет производиться по id текущего пользователя.
Итак, по уже знакомому нам алгоритму, создаём базу данных для наших пользователей.
Build → Firestore Database -> Create database
Нажимаем Start in test mode (для разработки).
Выбираем регион europe-west1 и ждем создания (1-2 минуты).
Быстрая проверка
Теперь мы можем проверить работу нашего web-приложения.
Создайте файл HTML на компьютере. Например test.html. Если вы владеете HTML то можете самостоятельно расписать его, для остальных я предлагаю вот такой шаблон, просто вставьте свой конфигурационный объект, который мы копировали ранее в настройках:
Скрытый текст
<!DOCTYPE html>
<html>
<head>
<title>Умный список покупок</title>
<script type="module">
// Импортируем нужные модули Firebase
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
import { getFirestore, collection, addDoc, query, where, orderBy, onSnapshot } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
// ВАШ firebaseConfig
const firebaseConfig = {
apiKey: "AIzaSyC5YF0PVuFaADucXXkpuMJexABXgf8v0AU",
authDomain: "shoping-de115.firebaseapp.com",
projectId: "shoping-de115",
storageBucket: "shoping-de115.firebasestorage.app",
messagingSenderId: "861754687557",
appId: "1:861754687557:web:c0608c8b43bda654d3632c",
measurementId: "G-J9BFS0PM58"
};
// Инициализация Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
// Делаем глобальными для использования в функциях
window.fbauth = auth;
window.fbdb = db;
window.fbauthFunctions = {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged
};
window.fbfirestoreFunctions = {
collection,
addDoc,
query,
where,
orderBy,
onSnapshot
};
console.log("✅ Firebase готов к работе!");
</script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #f5f5f5; }
.container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #4285f4; text-align: center; }
input { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
button { background: #4285f4; color: white; border: none; padding: 12px 20px; margin: 5px; border-radius: 5px; cursor: pointer; }
button:hover { background: #3367d6; }
.section { margin: 25px 0; padding: 20px; border: 2px solid #e0e0e0; border-radius: 8px; }
#items-list { list-style: none; padding: 0; }
#items-list li { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 5px; border-left: 4px solid #4285f4; }
.hidden { display: none; }
</style>
</head>
<body>
<div class="container">
<h1>🛒 Умный список покупок</h1>
<div class="section" id="auth-section">
<h3>Вход / Регистрация</h3>
<input type="email" id="email" placeholder="Ваш email">
<input type="password" id="password" placeholder="Пароль">
<button onclick="signUp()">Создать аккаунт</button>
<button onclick="signIn()">Войти</button>
</div>
<div class="section hidden" id="app-section">
<h3>Добро пожаловать, <span id="user-email"></span>! </h3>
<div style="display: flex; gap: 10px;">
<input type="text" id="item-input" placeholder="Что нужно купить?" style="flex: 1;">
<button onclick="addItem()">Добавить</button>
</div>
<h4>Мой список:</h4>
<ul id="items-list"></ul>
<button onclick="signOut()" style="background: #ea4335;">Выйти</button>
</div>
</div>
<script>
// Функции для работы с приложением
async function signUp() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
try {
await window.fbauthFunctions.createUserWithEmailAndPassword(window.fbauth, email, password);
alert(' Аккаунт создан! Теперь вы можете войти.');
} catch (error) {
alert('❌ Ошибка: ' + error.message);
}
}
async function signIn() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
try {
await window.fbauthFunctions.signInWithEmailAndPassword(window.fbauth, email, password);
} catch (error) {
alert('❌ Ошибка входа: ' + error.message);
}
}
async function signOut() {
try {
await window.fbauthFunctions.signOut(window.fbauth);
} catch (error) {
console.error('Ошибка выхода:', error);
}
}
async function addItem() {
const itemInput = document.getElementById('item-input');
const item = itemInput.value.trim();
const user = window.fbauth.currentUser;
if (item && user) {
try {
await window.fbfirestoreFunctions.addDoc(
window.fbfirestoreFunctions.collection(window.fbdb, 'shoppingItems'),
{
text: item,
userId: user.uid,
createdAt: new Date(),
completed: false
}
);
itemInput.value = '';
itemInput.focus();
} catch (error) {
alert('❌ Ошибка добавления: ' + error.message);
}
} else if (!item) {
alert(' Введите название товара!');
}
}
// Отслеживание состояния аутентификации
window.fbauthFunctions.onAuthStateChanged(window.fbauth, (user) => {
const authSection = document.getElementById('auth-section');
const appSection = document.getElementById('app-section');
if (user) {
authSection.classList.add('hidden');
appSection.classList.remove('hidden');
document.getElementById('user-email').textContent = user.email;
loadItems(user);
} else {
authSection.classList.remove('hidden');
appSection.classList.add('hidden');
document.getElementById('email').value = '';
document.getElementById('password').value = '';
}
});
// Загрузка items из базы данных
function loadItems(user) {
const itemsList = document.getElementById('items-list');
const q = window.fbfirestoreFunctions.query(
window.fbfirestoreFunctions.collection(window.fbdb, 'shoppingItems'),
window.fbfirestoreFunctions.where('userId', '==', user.uid),
window.fbfirestoreFunctions.orderBy('createdAt', 'desc')
);
window.fbfirestoreFunctions.onSnapshot(q, (snapshot) => {
itemsList.innerHTML = '';
snapshot.forEach((doc) => {
const item = doc.data();
const li = document.createElement('li');
li.textContent = item.text;
itemsList.appendChild(li);
});
if (snapshot.empty) {
const li = document.createElement('li');
li.textContent = 'Список покупок пуст. Добавьте первый товар!';
li.style.color = '#666';
li.style.fontStyle = 'italic';
itemsList.appendChild(li);
}
});
}
// Быстрый ввод по Enter
document.getElementById('password').addEventListener('keypress', function(e) {
if (e.key === 'Enter') signIn();
});
document.getElementById('item-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') addItem();
});
</script>
</body>
</html>
Сохраняем файл. Готово. Теперь тестируйте. Если всё работает, мы можем переходить к следующему этапу.
Сохраняем файл. Готово. Теперь тестируйте. Если всё работает, мы можем переходить к следующему этапу.
Хостинг и производительность
Firebase Hosting решает ключевую задачу: как превратить код на вашем компьютере в приложение, доступное пользователям по всему миру. Это не просто классический веб-хостинг, а интегрированная платформа развертывания со встроенным CDN.
Для начала нам потребуется установить Node.js. Заходим на официальный сайт. Скачайте LTS версию (левая зеленая кнопка). Файл будет называться: node-v20.x.x-x64.msi
Запустите скачанный файл и установите, нажимайте «Next» везде. Галочку «Automatically install tools» — НЕ СТАВИТЬ!
Обязательно перезагрузите компьютер
Проверим установку:
Откройте командную строку (Win + R)
Введите: node –version, вы увидите — v20.x.x
Введите: npm –version, должно быть — 10.x.x
Развёртывание приложения
Теперь, после подготовке файлов, наконец, приступим к процессу развёртывания.
Установка Firebase CLI на компьютер
Итак, после установки Node.js введите в терминале команды по очереди:
npm install -g firebase-tools
Подождите пока всё установится — увидите много текста и в конце: added XX packages.
Логин в Firebase
# В той же командной строке:
firebase loginОткроется браузер:
-
Выберите ваш Google аккаунт
-
Разрешите доступ Firebase CLI
-
Вернитесь в командную строку
-
Увидите
✔ Success! Logged in as your-email@gmail.com
Создание папки проекта
# Перейдите в папку проектов (например, Рабочий стол)
cd Desktop
# Создайте папку для проекта
mkdir shopping-app
cd shopping-appСохраните ваш HTML файл
-
Создайте файл
index.htmlв папкеshopping-app -
Скопируйте весь ваш рабочий код в этот файл
-
Сохраните
Инициализация Firebase Hosting
# В командной строке (вы должны быть в папке shopping-app):
firebase init hosting
Отвечайте на вопросы:
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
Переместите файл
# Переместите ваш index.html в папку public
move index.html public/# для Windows
# или
mv index.html public/ # для Mac/Linux
Деплой!
Вводим
firebase deploy
Вы увидите что-то вроде: ✔ Deploy complete!
Внизу вывода будут две ссылки, одна – на сайт приложения, другая – на Firebase Console.
Проверка
Откройте в браузере: https://ваш-проект.web.app Ваше приложение должно работать!
Вы можете посмотреть работу моего списка в видео или перейти по ссылке и испробовать его самостоятельно.
Что происходит при развёртывании приложения
Ваши файлы автоматически копируются на edge-серверы в 190+ странах, бесплатные HTTPS сертификаты выпускаются и обновляются автоматически, статический контент кэшируется на периферийных серверах для уменьшения задержек, а каждое развертывание создает новую версию с возможностью отката.
Пользователи загружают приложение с ближайшего к ним сервера, автоматическое масштабирование под нагрузку, предоставляется защита от DDoS-атак, ну и единая консоль для управления хостингом не может не радовать.
Таким образом, любой пользователь из любой точки мира может открыть эту ссылку, зарегистрироваться и начать использовать приложение. При этом вы продолжаете работать с локальными файлами на своем компьютере, а процесс обновления сводится к повторному выполнению команды развертывания.
В традиционной разработке вам пришлось бы настраивать сервер, устанавливать веб-сервер (nginx/Apache), настраивать SSL, мониторить доступность. Firebase Hosting предоставляет все это как готовую услугу — вы просто загружаете файлы.
Заключение
Firebase — это фундаментальное изменение подхода к созданию приложений. Мы прошли путь от идеи до работающего production-приложения за несколько часов, а не месяцев. Наш простейший список покупок — работающее доказательство, что современная разработка может быть быстрой, экономичной и масштабируемой.
Мы разобрали принципиально новый подход — когда вместо построения инфраструктуры с нуля вы собираете готовые компоненты как конструктор. Но это лишь верхушка айсберга возможностей, которые открываются при использовании облачных BaaS-решений.
Делитесь своими мнениями и начинаниями в комментариях!
Автор: taratorin
