Привет, Хабр! Сегодня поговорим о сервисе, который превращает 100 строк бэкенд-кода в 10 строк фронтенда. Для лучшего понимания его работы мы напишем небольшое приложение: список покупок, обновляется на всех устройствах мгновенно, данные будут сохраняться даже оффлайн. Это значит, что Вам не нужно будет писать ни строчки серверного кода.

Что такое 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 аккаунт.

После аутентификации, вы должны увидеть перед собой следующую страницу.

Далее Вам нужно имя для проекта. Приложение для списка можно назвать shopping, или, например, shopping-list.

Для лучшей скорости на территории СНГ рекомендую выбрать регион europe-west1. При настройке аналитики соглашаемся со всеми пунктами. Ждем 1-2 минуты пока проект создается

     После создания проекта вы увидите следующую страницу:

Что происходит за кулисами создания проекта:

• 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 минуты).

Быстрая проверка

Создайте файл 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>

Не забудьте вставить ваш Config.

Сохраняем файл. Готово. Если всё работает, мы можем переходить к следующему этапу.

"Хостинг и производительность"

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

Для начала нам потребуется установить Node.js. Заходим на официальный сайт. Скачайте LTS версию (левая зеленая кнопка). Файл будет называться: node-v20.x.x-x64.msi

Запустите скачанный файл и установите, нажимайте "Next" везде. Галочку "Automatically install tools" — НЕ СТАВИТЬ!

Обязательно перезагрузите компьютер

Проверим установку:

Откройте командную строку (Win + R → cmd)

Введите: 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

Откроется браузер:

1. Выберите ваш Google аккаунт

2. Разрешите доступ Firebase CLI

3. Вернитесь в командную строку

4. Увидите ✔ Success! Logged in as your-email@gmail.com

Создание папки проекта

# Перейдите в папку проектов (например, Рабочий стол)
cd Desktop

# Создайте папку для проекта
mkdir shopping-app
cd shopping-app

Сохраните ваш HTML файл

1. Создайте файл index.html в папке shopping-app

2. Скопируйте весь ваш рабочий код в этот файл

3. Сохраните

Инициализация Firebase 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-приложения за несколько часов, а не месяцев. Наш простейший список покупок — работающее доказательство, что современная разработка может быть быстрой, экономичной и масштабируемой.

Для тех, кто хочет выйти за рамки нашего простейшего примера, рекомендую обратить внимание на BotHub — платформу для создания AI-ассистентов и чат-ботов. Новые пользователи получают 100 000 капсов для тестирования возможностей, что позволяет:

• Быстро прототипировать голосовых помощников

• Интегрировать AI-функциональность в свои приложения

• Тестировать различные сценарии без финансовых затрат

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