Custom E-commerce na Firebase

Zbudowałem własny sklep e-commerce od podstaw. Nie korzystałem z gotowych platform. Zamiast tego użyłem Firebase Realtime Database oraz Netlify.

Klient potrzebował specyficznej konfiguracji. Chciał katalogu produktów z wariantami cenowymi oraz panelu administracyjnego. Zespół sprzedażowy musiał również mieć możliwość składania zamówień bezpośrednio przez stronę.

Oto jak rozwiązałem główne wyzwania techniczne.

Separacja danych

Oddzieliłem bazę danych e-commerce od wewnętrznej bazy danych do zarządzania. Zapobiega to mieszaniu się danych handlowych z wrażliwymi plikami, takimi jak wynagrodzenia pracowników czy budżety.

Modelowanie danych dla cen

Plany cenowe często powtarzają się w różnych produktach. Jeśli powielisz dane planu w każdym produkcie, aktualizacje staną się koszmarem.

  • Utworzyłem globalne archiwum dla wszystkich planów.
  • Każdy produkt przechowuje jedynie tablicę identyfikatorów (ID) planów.
  • Dzięki temu aktualizacje są szybkie i zapobiegają błędom w danych.

Atomowe numerowanie zamówień

Gdy wiele osób składa zamówienia w tym samym czasie, pojawia się problem wyścigu (race condition). Jeśli dwóch użytkowników odczyta ten sam numer ostatniego zamówienia, jedno z zamówień zostanie nadpisane.

  • Aby to rozwiązać, użyłem transakcji Firebase.
  • Funkcja runTransaction zapewnia poprawne zwiększanie numeru, nawet przy wielu jednoczesnych użytkownikach.
  • Gwarantuje to, że każde zamówienie ma unikalny numer.

Bezpieczny dostęp administracyjny

Nie chciałem przechowywać haseł w kodzie źródłowym. Unikałem również prostych skrótów, takich jak MD5.

  • Użyłem PBKDF2 za pomocą Web Crypto API.
  • Nakłada to tysiące iteracji na skrót (hash).
  • Sprawia to, że ataki typu brute-force stają się zbyt kosztowne dla hakerów.
  • W kodzie przechowuję jedynie sól (salt) i skrót.

Naprawa błędu „zera”

Znalazłem błąd, w którym produkty z ceną 0 wyświetlały się jako „cena do ustalenia”.

  • Działo się tak, ponieważ JavaScript traktuje 0 jako wartość „falsy”.
  • Naprawiłem to, zmieniając logikę.
  • Zamiast używać "price || null", użyłem "price != null".
  • Dzięki temu system rozpoznaje 0 jako poprawną liczbę.

Konfiguracja CSP

Firebase używa dynamicznych subdomen. Standardowy znacznik HTML meta dla Content Security Policy (CSP) nie obsługuje tych znaków wieloznacznych (wildcards).

  • Przeniosłem CSP z HTML do nagłówków HTTP w Netlify.
  • Pozwoliło mi to na użycie znaków wieloznacznych, aby usługi Firebase działały poprawnie.

Budowanie własnych systemów wymaga czegoś więcej niż tylko pisania kodu. Wymaga podejmowania decyzji architektonicznych, które zapobiegają awariom na produkcji.

Źródło: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec