System Zarządzania Magazynem i Produkcją (SPA)

System Zarządzania Magazynem i Produkcją (SPA)

Koncepcja: Zaawansowana aplikacja typu Single Page Application (SPA), która digitalizuje i automatyzuje procesy magazynowe oraz produkcyjne. System zapewnia synchronizację danych w czasie rzeczywistym dla wszystkich użytkowników, zastępując tradycyjny, papierowy obieg dokumentów.

Cel i Założenia (Problem)

• Cel: Zastąpienie papierowych zeszytów, zamówień i list magazynowych jednym, centralnym systemem cyfrowym.

• Założenie 1 (Wydajność): Aplikacja musi być szybka i działać w czasie rzeczywistym. Zmiana ilości produktu przez jednego użytkownika musi być natychmiast widoczna u wszystkich innych (kluczowe przy zarządzaniu stanami "na żywo").

• Założenie 2 (Dostępność): System musi obsługiwać wielu jednoczesnych użytkowników z różnymi poziomami uprawnień (np. administrator, magazynier, gość), aby chronić wrażliwe dane i funkcje.

• Cel 2 (Automatyzacja): Usprawnienie powtarzalnych zadań, takich jak śledzenie historii zmian, drukowanie etykiet czy generowanie raportów.

Zastosowane Rozwiązania (Implementacja)

• Architektura: Zbudowałem aplikację SPA w czystym JavaScript, dynamicznie przełączając widoki (moduły) bez przeładowywania strony.

• Backend i Baza Danych: Wykorzystałem Firebase Firestore jako backend NoSQL (BaaS). Zapewniło to natychmiastową synchronizację danych w czasie rzeczywistym oraz solidną podstawę dla dalszych funkcji.

• System Uprawnień (RBAC): Zaimplementowałem system logowania (Firebase Auth) oraz własną logikę Ról i Uprawnień (RBAC). Interfejs dynamicznie ukrywa lub pokazuje odpowiednie przyciski, a nawet całe moduły, w zależności od uprawnień zalogowanego użytkownika.

• Automatyzacja Procesów: Stworzyłem logikę biznesową, w której moduły są ze sobą połączone. Np. realizacja pozycji w module "Zamówienia" automatycznie aktualizuje stan magazynowy powiązanego produktu w module "Magazyn".

• Zaawansowane Funkcje: Opracowałem moduły do generowania PDF (jsPDF), drukowania etykiet z kodem QR (qrcode-generator) oraz wizualizacji danych (Chart.js).

• Unikalne Rozwiązanie: Największym wyzwaniem było stworzenie "Zeszytu Warsztatowego", który na podstawie danych wprowadzanych w formularzu dynamicznie rysuje proste schematy techniczne (np. trapezy) na elemencie <canvas>.

Kluczowe Technologie

• Frontend: JavaScript (ES6+), HTML5, CSS3 (Animacje, Glassmorphism)

• Framework UI: Bootstrap 5 (RWD, Modale, Offcanvas)

• Backend i Baza Danych: Firebase Firestore (Baza danych w czasie rzeczywistym)

• Uwierzytelnianie: Firebase Authentication

• Biblioteki: Chart.js (wykresy), jsPDF (eksport PDF), qrcode-generator (etykiety)