Собственный интернет-магазин на Firebase

Я разработал интернет-магазин с нуля. Я не использовал готовые платформы, а вместо этого использовал Firebase Realtime Database и Netlify.

Клиенту требовалась специфическая настройка. Им нужен был каталог товаров с вариантами цен и панель администратора. Также отделу продаж была необходима возможность оформлять заказы прямо через сайт.

Вот как я решил основные технические задачи.

Разделение данных

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

Моделирование данных для ценообразования

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

  • Я создал глобальный архив для всех планов.
  • Каждый товар содержит только массив ID планов.
  • Это ускоряет обновление и предотвращает ошибки в данных.

Атомарная нумерация заказов

Когда несколько человек размещают заказы одновременно, возникает состояние гонки (race condition). Если два пользователя прочитают один и тот же номер последнего заказа, один из заказов будет перезаписан.

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

Безопасный доступ администратора

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

  • Я использовал PBKDF2 через Web Crypto API.
  • Это применяет тысячи итераций к хешу.
  • Это делает брутфорс-атаки слишком затратными для хакеров.
  • В коде я храню только соль и сам хеш.

Исправление бага с «нулем»

Я обнаружил баг, из-за которого товары с ценой 0 отображались как «цена будет определена».

  • Это происходило потому, что JavaScript интерпретирует 0 как «falsy».
  • Я исправил это, изменив логику.
  • Вместо использования price || null я использовал price != null.
  • Это гарантирует, что система распознает 0 как валидное число.

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

Firebase использует динамические поддомены. Стандартный HTML-тег meta для Content Security Policy (CSP) не может обрабатывать такие подстановочные знаки (wildcards).

  • Я перенес CSP из HTML в HTTP-заголовки Netlify.
  • Это позволило мне использовать подстановочные знаки, чтобы сервисы Firebase работали корректно.

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

Источник: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec