Власний інтернет-магазин на Firebase
Я розробив власний інтернет-магазин з нуля. Я не використовував готові платформи. Я використовував Firebase Realtime Database та Netlify.
Метою було обслуговування реселера POS-терміналів. Їм потрібен був каталог, варіанти цін та панель адміністратора. Команда продажів мала можливість оформлювати замовлення безпосередньо на сайті.
Ось як я це зробив і які уроки виніс.
Стек технологій
• Чистий HTML, CSS та JS. • Firebase Realtime Database для даних. • Firebase Storage для файлів. • Netlify для хостингу та функцій.
Ключові рішення
1. Розділення баз даних Я тримав базу даних інтернет-магазину окремо від бази даних внутрішнього управління. Це запобігає змішуванню комерційних даних із конфіденційною адміністративною інформацією, такою як зарплати чи бюджети.
2. Глобальний архів цін Замість того, щоб вбудовувати тарифні плани в кожен товар, я створив глобальну папку тарифів. Товари містять лише масив ID. Це дозволяє уникнути дублювання даних. Якщо план змінюється, я оновлюю його лише один раз.
3. Атомарні замовлення
Коли кілька людей оформлюють замовлення одночасно, виникають стани гонитви (race conditions). Якщо двоє людей прочитають один і той самий номер замовлення, одне замовлення може зникнути. Я використовував Firebase runTransaction(), щоб гарантувати, що кожне замовлення отримує унікальний послідовний номер.
4. Безпечний доступ адміністратора Я не зберігав паролі в сирцевому коді. Я використовував PBKDF2 через Web Crypto API. Це робить атаки методом перебору (brute-force) дуже складними. Код містить лише сіль (salt) та хеш.
Вивчені уроки
• Слідкуйте за falsy-значеннями. У JavaScript 0 є falsy-значенням. Якщо ціна товару дорівнює 0, проста перевірка на кшталт "price || null" призведе до видалення ціни. Завжди використовуйте "price != null", щоб враховувати нуль.
• Налаштовуйте CSP в HTTP-заголовках. Метатеги для Content Security Policy не підтримують символи підстановки (wildcards) для піддоменів. Firebase використовує динамічні піддомени. Я переніс CSP у netlify.toml, щоб забезпечити його роботу.
• Використовуйте Security Rules для справжнього захисту. Ніколи не покладайтеся лише на приховування кнопок у інтерфейсі. Використовуйте правила Firebase, щоб обмежити, хто може читати та записувати дані.
Створення кастомних рішень вимагає ретельного архітектурного вибору. Дрібниці, такі як обробка транзакцій та конфігурація заголовків, запобігають серйозним збоям у продакшні.
Джерело: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec