SSR (Server-Side Rendering) aplikacja Django do wizualizacji danych o materiałach budowlanych - dashboard z wykresami czasowymi dla projektów budowlanych.
Projekt wykorzystuje Django z następującymi komponentami:
- Models: Modele danych (
ConstructionMaterialSummary) - Views: Widoki SSR renderujące szablony HTML
- Services: Serwisy do komunikacji z zewnętrznym API
- Jobs: Zadania okresowe (APScheduler) do synchronizacji danych
- Templates: Szablony Django z integracją Chart.js
- Static: Pliki statyczne (CSS, JavaScript) z architekturą MVVM
construction-ssr/
├── config/ # Konfiguracja Django
│ ├── settings.py # Ustawienia aplikacji
│ ├── urls.py # Routing URL-i
│ ├── wsgi.py # WSGI config
│ └── asgi.py # ASGI config
├── dashboard/ # Główna aplikacja
│ ├── models.py # Model ConstructionMaterialSummary
│ ├── views.py # Widoki SSR i API endpoints
│ ├── services.py # Serwisy do komunikacji z API
│ ├── jobs.py # Zadania okresowe (APScheduler)
│ ├── admin.py # Konfiguracja Django Admin
│ ├── apps.py # Konfiguracja aplikacji (uruchamia scheduler)
│ └── migrations/ # Migracje bazy danych
├── templates/ # Szablony Django
│ └── dashboard/
│ └── home.html # Główny szablon dashboardu
├── static/ # Pliki statyczne
│ └── dashboard/
│ ├── dashboard.js # JavaScript MVVM (ViewModel)
│ └── styles.css # Style CSS
├── manage.py # Django management script
└── requirements.txt # Zależności Python
Model przechowujący historię pomiarów materiałów dla każdej budowy:
id- Primary key (auto)construction_id- UUID budowy (indeksowany)construction_name- Nazwa budowy (opcjonalne)total_items- Całkowita liczba pozycji materiałówtotal_quantity- Całkowita ilość materiałówmeasured_at- Data i czas pomiaru (indeksowany)last_sync_at- Data i czas ostatniej synchronizacji (indeksowany)
Unique constraint: (construction_id, measured_at) - zapobiega duplikatom
Indexes:
construction_id- dla szybkich zapytań po budowiemeasured_at- dla sortowania czasowegolast_sync_at- dla najnowszych rekordów- Złożony indeks:
(construction_id, measured_at)
- Backend: Django 5.2.8
- Database: SQLite (domyślnie), obsługa PostgreSQL przez konfigurację
- Task Scheduling: APScheduler 3.11.1
- HTTP Client: requests
- Frontend:
- Chart.js 4.4.0 (wykresy)
- Tailwind CSS (stylowanie)
- Vanilla JavaScript (MVVM pattern)
- RxJS 7.8.1 (reaktywne programowanie, strumienie danych)
- Migrations: Django migrations
- Utworzenie wirtualnego środowiska:
python -m venv venv- Aktywacja wirtualnego środowiska:
# Na macOS/Linux:
source venv/bin/activate
# Na Windows:
venv\Scripts\activate- Instalacja zależności:
pip install -r requirements.txtMinimalne wymagane pakiety:
- Django >= 5.2.8
- APScheduler >= 3.11.1
- requests >= 2.32.0
- Konfiguracja środowiska:
Edytuj config/settings.py i ustaw:
APP1_BASE_URL- URL zewnętrznego API (domyślnie:http://127.0.0.1:8000)ALLOWED_HOSTS- dozwolone hosty (domyślnie:['localhost', '127.0.0.1', '0.0.0.0'])
- Migracje bazy danych:
python manage.py migrate- Utworzenie superusera (opcjonalnie, dla Django Admin):
python manage.py createsuperuser- Uruchomienie aplikacji:
python manage.py runserver 3001Dashboard będzie dostępny pod adresem: http://localhost:3001/charts/
GET /charts/- Główny dashboard z wykresami (SSR)GET /- Przekierowanie do/charts/
-
GET /api/data/- Endpoint JSON z danymi dla wszystkich budów- Zwraca:
{ "data": [...] } - Format: Lista obiektów z danymi konstrukcji, wykresów i statystyk
- Zwraca:
-
DELETE /api/construction/<uuid:construction_id>/delete/- Usuń wszystkie wpisy dla danej budowy- Zwraca:
{ "message": "...", "deleted_count": N }
- Zwraca:
GET /admin/- Panel administracyjny Django
Aplikacja automatycznie synchronizuje dane z zewnętrznego API używając APScheduler:
- Interwał: 15 sekund
- Endpoint źródłowy:
{APP1_BASE_URL}/api/v1/constructions/statistics - Format danych: JSON array z obiektami zawierającymi:
{ "construction_id": "uuid", "construction_name": "string", "total_items": 0, "total_quantity": 0.0, "measured_at": "2025-11-28T01:23:16.896Z", "last_sync_at": "2025-11-28T01:23:16.896Z" }
Zachowanie synchronizacji:
- Zawsze tworzy nowe rekordy (nie aktualizuje istniejących)
- Unikalność zapewniona przez constraint
(construction_id, measured_at) - Automatyczne parsowanie dat i obsługa timezone (UTC)
- Logowanie błędów i informacji o synchronizacji
- Wykresy czasowe dla każdej budowy:
- Liczba pozycji materiałów w czasie
- Suma ilości materiałów w czasie
- Automatyczne odświeżanie UI co 7 sekund (bez przeładowania strony) - zrealizowane przez RxJS
interval - Reaktywne strumienie danych - użycie RxJS Observables do zarządzania asynchronicznymi operacjami
- Obsługa błędów z retry - automatyczne ponawianie prób przy błędach sieciowych (3 próby, opóźnienie 2s)
- Dynamiczne skalowanie osi Y (dane wyśrodkowane, nie na samej górze)
- Responsywny design z Tailwind CSS
Dla każdej budowy wyświetlane są:
- Nazwa budowy
- Ostatnia synchronizacja
- Aktualna liczba pozycji
- Aktualna ilość materiałów
- Usuwanie wpisów - przycisk do usunięcia wszystkich wpisów dla danej budowy
- Nawigacja - przycisk powrotu do głównej strony frontendu
Reprezentuje dane pojedynczej konstrukcji:
construction_id,construction_namelabels,total_items,total_quantitymeasurement_ids,latest
Zarządza logiką prezentacji z użyciem RxJS:
- Tworzenie i aktualizacja wykresów Chart.js
- Reaktywne pobieranie danych z API (
/api/data/) przez RxJS Observables - Automatyczne odświeżanie danych co 7 sekund używając
intervaloperator - Obsługa błędów z retry logic (3 próby z opóźnieniem 2s)
- Aktualizacja UI bez przeładowania strony
- Obsługa usuwania wpisów
- Dynamiczne skalowanie wykresów
- Subject do ręcznego odświeżania danych
Szablon Django (templates/dashboard/home.html):
- Renderuje HTML z danymi z serwera
- Integruje Chart.js i Tailwind CSS
- Inicjalizuje ViewModel z danymi początkowymi
# URL zewnętrznego API
APP1_BASE_URL = "http://127.0.0.1:8000"
# Dozwolone hosty
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '0.0.0.0']
# Baza danych (domyślnie SQLite)
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": BASE_DIR / "db.sqlite3",
}
}- Django SSR:
3001(domyślnie) - Frontend:
3000(wymagany dla przycisku powrotu) - Backend API:
8000(domyślnie, konfigurowalne przezAPP1_BASE_URL)
- Python 3.12+
- Django 5.2.8+
- APScheduler 3.11.1+
- requests 2.32.0+