Centraline Ambientali - Bagnoli

POC (Proof of Concept) per il monitoraggio ambientale dell'area di Bagnoli (NA). Questa documentazione serve come brogliaccio per gli sviluppatori frontend e backend che implementeranno il sistema a microservizi.

Architettura Target

┌─────────────────────────────────────────────────────────────┐
│                        FRONTEND                              │
│                   Angular 19 + SSR                           │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │Dashboard │ │  Meteo   │ │Inquinanti│ │  Admin   │       │
│  │Component │ │Component │ │Component │ │Component │       │
│  └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘       │
│       └─────────────┴────────────┴─────────────┘             │
│                         │ HttpClient                         │
│                         │ + AuthInterceptor                  │
└─────────────────────────┼───────────────────────────────────┘
                          │ REST API (JSON)
┌─────────────────────────┼───────────────────────────────────┐
│                    API GATEWAY                               │
│                   Django REST Framework                      │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ Auth     │ │Centraline│ │  Dati    │ │  Export  │       │
│  │ Service  │ │ Service  │ │ Service  │ │ Service  │       │
│  └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘       │
│       │             └────────────┴─────────────┘             │
│       │                         │                            │
│  ┌────┴─────┐          ┌───────┴────────┐                   │
│  │ SQLite   │          │  PostgreSQL    │                   │
│  │ (users)  │          │  (read-only)   │                   │
│  └──────────┘          └────────────────┘                   │
└─────────────────────────────────────────────────────────────┘

Stack Tecnologico

Autenticazione

L'autenticazione usa JWT (JSON Web Token). Il flusso e':

1. POST /api/?action=login con username/password
2. Ricevi token JWT
3. Includi Authorization: Bearer {token} in ogni richiesta protetta
4. Token scade dopo 24h

Credenziali default: admin / admin

{
  "username": "admin",
  "password": "admin"
}

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "username": "admin",
    "role": "admin"
  }
}

# urls.py
from rest_framework_simplejwt.views import TokenObtainPairView
urlpatterns = [
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain'),
]

API - Centraline

{
  "data": [
    {
      "id": 1,
      "name": "MMB 274 - Bagnoli - Interno SIN",
      "alias": "1793",
      "codice": "1793",
      "tipo": "ISPRA",
      "status": 1,
      "colore_mappa": "#16a34a",
      "is_manuale": false,
      "lat": "40.8127060",
      "lng": "14.1677380",
      "nome_comune": "Bagnoli",
      "nome_provincia": "NA"
    }
  ]
}

# views.py
class CentralinaViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Centralina.objects.select_related('localizzazione_attiva').all()
    serializer_class = CentralinaSerializer

# serializers.py
class CentralinaSerializer(serializers.ModelSerializer):
    lat = serializers.DecimalField(source='localizzazione_attiva.lat')
    lng = serializers.DecimalField(source='localizzazione_attiva.lng')
    nome_comune = serializers.CharField(source='localizzazione_attiva.nome_comune')

    class Meta:
        model = Centralina
        fields = '__all__'

API - Dati Ambientali

# views.py
class DatiAllViewSet(viewsets.ReadOnlyModelViewSet):
    serializer_class = DatiAllSerializer
    filterset_fields = ['id_centralina', 'fonte']

    def get_queryset(self):
        qs = DatiAll.objects.all()
        from_date = self.request.query_params.get('from')
        to_date = self.request.query_params.get('to')
        if from_date:
            qs = qs.filter(data_ora__gte=from_date)
        if to_date:
            qs = qs.filter(data_ora__lte=to_date + ' 23:59:59')
        return qs.order_by('-data_ora')

API - Dati Meteo

API - Dati ISPRA (Inquinanti)

API - Statistiche

API - Export (Autenticato)

Backend Django - Struttura Progetto

centraline-backend/
├── manage.py
├── requirements.txt
├── docker-compose.yml
├── Dockerfile
├── config/
│   ├── settings/
│   │   ├── base.py          # Settings comuni
│   │   ├── dev.py           # Dev settings
│   │   └── prod.py          # Prod settings
│   ├── urls.py               # URL router principale
│   └── wsgi.py
├── apps/
│   ├── auth_app/             # Microservizio Autenticazione
│   │   ├── models.py         # User model custom
│   │   ├── serializers.py
│   │   ├── views.py
│   │   └── urls.py
│   ├── centraline/           # Microservizio Centraline
│   │   ├── models.py         # Centralina, Localizzazione
│   │   ├── serializers.py
│   │   ├── views.py
│   │   ├── urls.py
│   │   └── filters.py
│   ├── dati/                 # Microservizio Dati Ambientali
│   │   ├── models.py         # DatiAll, MeteostatnetDati, OpasIspra
│   │   ├── serializers.py
│   │   ├── views.py
│   │   ├── urls.py
│   │   └── filters.py
│   └── export/               # Microservizio Export
│       ├── views.py
│       ├── urls.py
│       └── renderers.py      # CSV renderer custom
└── tests/
    ├── test_auth.py
    ├── test_centraline.py
    └── test_dati.py

Django - Models

# apps/centraline/models.py

from django.db import models

class Centralina(models.Model):
    name = models.CharField(max_length=255)
    alias = models.CharField(max_length=100)
    codice = models.CharField(max_length=50)
    tipo = models.CharField(max_length=20)  # ISPRA, meteostat, INVITALIA, manuale
    external_id = models.CharField(max_length=100, null=True, blank=True)
    url = models.CharField(max_length=200, null=True, blank=True)
    status = models.IntegerField(default=1)  # 1=attiva, 0=inattiva
    config_json = models.JSONField(null=True, blank=True)
    last_import = models.DateTimeField(null=True, blank=True)
    colore_mappa = models.CharField(max_length=20, null=True, blank=True)
    is_manuale = models.BooleanField(null=True, blank=True)
    raggio_mappa = models.IntegerField(null=True, blank=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        managed = False  # DB read-only
        db_table = 'centralina'

class CentralinaLocalizzazione(models.Model):
    id_centralina = models.ForeignKey(Centralina, on_delete=models.CASCADE,
                                       db_column='id_centralina')
    lat = models.DecimalField(max_digits=12, decimal_places=7, null=True)
    lng = models.DecimalField(max_digits=12, decimal_places=7, null=True)
    id_comune = models.CharField(max_length=20, null=True)
    nome_comune = models.CharField(max_length=100, null=True)
    id_provincia = models.CharField(max_length=20, null=True)
    nome_provincia = models.CharField(max_length=100, null=True)
    data_inizio = models.DateField()
    data_fine = models.DateField(null=True, blank=True)
    stato = models.IntegerField(default=1)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        managed = False
        db_table = 'centralina_localizzazione'


# apps/dati/models.py

class DatiAll(models.Model):
    id_centralina = models.ForeignKey('centraline.Centralina', on_delete=models.CASCADE,
                                       db_column='id_centralina')
    fonte = models.CharField(max_length=20)
    valori = models.TextField()
    data_ora = models.DateTimeField()
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        managed = False
        db_table = 'dati_all'

class MeteostatnetDati(models.Model):
    id_centralina = models.ForeignKey('centraline.Centralina', on_delete=models.CASCADE,
                                       db_column='id_centralina')
    time = models.DateTimeField()
    temp = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    dwpt = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    rhum = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    prcp = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    snow = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    wdir = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    wspd = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    wpgt = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    pres = models.DecimalField(max_digits=8, decimal_places=2, null=True)
    tsun = models.DecimalField(max_digits=6, decimal_places=2, null=True)
    coco = models.IntegerField(null=True)
    stato = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        managed = False
        db_table = 'meteostatnet_dati'

class OpasIspra(models.Model):
    """Modello base per le tabelle ISPRA (1793 e 1798)"""
    id_centralina = models.ForeignKey('centraline.Centralina', on_delete=models.CASCADE,
                                       db_column='id_centralina')
    so2 = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    o3 = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    no2 = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    co = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    pm2_5_fidas = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    pm10_fidas = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    benzene = models.DecimalField(max_digits=10, decimal_places=2, null=True)
    stato = models.BooleanField(default=True)
    data_ora = models.DateTimeField()
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        abstract = True

class OpasIspra1793(OpasIspra):
    class Meta:
        managed = False
        db_table = 'opas_ispra_1793'

class OpasIspra1798(OpasIspra):
    class Meta:
        managed = False
        db_table = 'opas_ispra_1798'

Django - Serializers

# apps/centraline/serializers.py

from rest_framework import serializers
from .models import Centralina, CentralinaLocalizzazione

class LocalizzazioneSerializer(serializers.ModelSerializer):
    class Meta:
        model = CentralinaLocalizzazione
        fields = ['lat', 'lng', 'nome_comune', 'nome_provincia', 'data_inizio', 'data_fine']

class CentralinaListSerializer(serializers.ModelSerializer):
    localizzazione = serializers.SerializerMethodField()

    class Meta:
        model = Centralina
        fields = '__all__'

    def get_localizzazione(self, obj):
        loc = obj.centralinalocalizzazione_set.filter(stato=1).first()
        if loc:
            return LocalizzazioneSerializer(loc).data
        return None

# apps/dati/serializers.py

class MeteoSerializer(serializers.ModelSerializer):
    class Meta:
        model = MeteostatnetDati
        fields = ['id', 'id_centralina', 'time', 'temp', 'dwpt', 'rhum',
                  'prcp', 'snow', 'wdir', 'wspd', 'wpgt', 'pres', 'tsun', 'coco']

class IspraSerializer(serializers.ModelSerializer):
    class Meta:
        model = OpasIspra1793  # Stessa struttura per entrambe
        fields = ['id', 'id_centralina', 'data_ora', 'so2', 'o3', 'no2',
                  'co', 'pm2_5_fidas', 'pm10_fidas', 'benzene']

Django - Views / ViewSets

# apps/centraline/views.py

from rest_framework import viewsets, permissions
from django_filters.rest_framework import DjangoFilterBackend

class CentralinaViewSet(viewsets.ReadOnlyModelViewSet):
    """
    list:   GET /api/v1/centraline/
    detail: GET /api/v1/centraline/{id}/
    """
    queryset = Centralina.objects.all().order_by('id')
    serializer_class = CentralinaListSerializer
    permission_classes = [permissions.AllowAny]

# apps/dati/views.py

class MeteoViewSet(viewsets.ReadOnlyModelViewSet):
    serializer_class = MeteoSerializer
    permission_classes = [permissions.AllowAny]
    filter_backends = [DjangoFilterBackend]

    def get_queryset(self):
        qs = MeteostatnetDati.objects.all()
        from_date = self.request.query_params.get('from')
        to_date = self.request.query_params.get('to')
        if from_date:
            qs = qs.filter(time__gte=from_date)
        if to_date:
            qs = qs.filter(time__lte=f"{to_date} 23:59:59")
        return qs.order_by('-time')[:int(self.request.query_params.get('limit', 500))]

# apps/export/views.py
from rest_framework.views import APIView
from rest_framework.permissions import IsAuthenticated

class ExportView(APIView):
    permission_classes = [IsAuthenticated]

    def get(self, request):
        format = request.query_params.get('format', 'json')
        # ... query logic ...
        if format == 'csv':
            return self.render_csv(data)
        return Response({'data': data})

Django - URLs

# config/urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView

router = DefaultRouter()
router.register(r'centraline', CentralinaViewSet)
router.register(r'meteo', MeteoViewSet, basename='meteo')
router.register(r'ispra', IspraViewSet, basename='ispra')

urlpatterns = [
    path('api/v1/', include(router.urls)),
    path('api/v1/token/', TokenObtainPairView.as_view()),
    path('api/v1/token/refresh/', TokenRefreshView.as_view()),
    path('api/v1/export/', ExportView.as_view()),
    path('api/v1/stats/', StatsView.as_view()),
    path('api/v1/latest/', LatestView.as_view()),
]

Frontend Angular - Struttura Progetto

centraline-frontend/
├── angular.json
├── package.json
├── Dockerfile
├── src/
│   ├── app/
│   │   ├── app.config.ts
│   │   ├── app.routes.ts
│   │   ├── core/
│   │   │   ├── services/
│   │   │   │   ├── api.service.ts         # HttpClient wrapper
│   │   │   │   ├── auth.service.ts        # Login, logout, JWT
│   │   │   │   └── centraline.service.ts  # CRUD centraline
│   │   │   ├── interceptors/
│   │   │   │   └── auth.interceptor.ts    # JWT auto-inject
│   │   │   ├── guards/
│   │   │   │   └── auth.guard.ts          # Route protection
│   │   │   └── models/
│   │   │       ├── centralina.model.ts
│   │   │       ├── meteo.model.ts
│   │   │       └── ispra.model.ts
│   │   ├── features/
│   │   │   ├── public/
│   │   │   │   ├── dashboard/
│   │   │   │   │   ├── dashboard.component.ts
│   │   │   │   │   └── dashboard.component.html
│   │   │   │   ├── meteo/
│   │   │   │   │   └── meteo-chart.component.ts
│   │   │   │   ├── inquinanti/
│   │   │   │   │   └── inquinanti-chart.component.ts
│   │   │   │   └── mappa/
│   │   │   │       └── mappa.component.ts
│   │   │   ├── admin/
│   │   │   │   ├── config/
│   │   │   │   │   └── config.component.ts
│   │   │   │   ├── export/
│   │   │   │   │   └── export.component.ts
│   │   │   │   └── raw/
│   │   │   │       └── raw-explorer.component.ts
│   │   │   └── auth/
│   │   │       └── login/
│   │   │           └── login.component.ts
│   │   └── shared/
│   │       ├── components/
│   │       │   ├── navbar/
│   │       │   ├── stat-card/
│   │       │   ├── chart-panel/
│   │       │   └── data-table/
│   │       └── pipes/
│   │           └── date-format.pipe.ts
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   └── styles.scss

Angular - Services

// src/app/core/services/centraline.service.ts

import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../../../environments/environment';
import { Centralina, MeteoData, IspraData, StatsData } from '../models';

@Injectable({ providedIn: 'root' })
export class CentralineService {
  private http = inject(HttpClient);
  private apiUrl = environment.apiUrl;  // es: 'https://centraline.analist24.it.com/api/v1'

  getCentraline(): Observable<Centralina[]> {
    return this.http.get<{data: Centralina[]}>(`${this.apiUrl}/centraline/`)
      .pipe(map(res => res.data));
  }

  getCentralina(id: number): Observable<Centralina> {
    return this.http.get<{data: Centralina}>(`${this.apiUrl}/centraline/${id}/`)
      .pipe(map(res => res.data));
  }

  getMeteo(from?: string, to?: string, limit = 500): Observable<MeteoData[]> {
    let params = new HttpParams();
    if (from) params = params.set('from', from);
    if (to) params = params.set('to', to);
    params = params.set('limit', limit.toString());
    return this.http.get<{data: MeteoData[]}>(`${this.apiUrl}/meteo/`, { params })
      .pipe(map(res => res.data));
  }

  getIspra(id?: number, from?: string, to?: string): Observable<IspraData[]> {
    let params = new HttpParams();
    if (id) params = params.set('id', id.toString());
    if (from) params = params.set('from', from);
    if (to) params = params.set('to', to);
    return this.http.get<{data: IspraData[]}>(`${this.apiUrl}/ispra/`, { params })
      .pipe(map(res => res.data));
  }

  getStats(id?: number, days = 30): Observable<StatsData> {
    let params = new HttpParams().set('days', days.toString());
    if (id) params = params.set('id', id.toString());
    return this.http.get<{data: StatsData}>(`${this.apiUrl}/stats/`, { params })
      .pipe(map(res => res.data));
  }
}

// src/app/core/services/auth.service.ts

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);
  private router = inject(Router);

  login(username: string, password: string): Observable<{token: string, user: any}> {
    return this.http.post<{token: string, user: any}>(
      `${environment.apiUrl}/token/`,
      { username, password }
    ).pipe(
      tap(res => {
        localStorage.setItem('auth_token', res.token);
        localStorage.setItem('auth_user', JSON.stringify(res.user));
      })
    );
  }

  logout(): void {
    localStorage.removeItem('auth_token');
    localStorage.removeItem('auth_user');
    this.router.navigate(['/login']);
  }

  isAuthenticated(): boolean {
    return !!localStorage.getItem('auth_token');
  }

  getToken(): string | null {
    return localStorage.getItem('auth_token');
  }
}

// src/app/core/interceptors/auth.interceptor.ts

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
  }
  return next(req);
};

Angular - Components (Esempio)

// src/app/features/public/dashboard/dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, MappaComponent, MeteoChartComponent,
            InquinantiChartComponent, StatCardComponent],
  template: `
    <div class="grid grid-4">
      @for (card of statCards(); track card.label) {
        <app-stat-card [value]="card.value" [label]="card.label" [type]="card.type" />
      }
    </div>
    <app-mappa [centraline]="centraline()" />
    <app-meteo-chart [data]="meteoData()" />
    <app-inquinanti-chart [data]="ispraData()" />
  `
})
export class DashboardComponent {
  private service = inject(CentralineService);

  centraline = signal<Centralina[]>([]);
  meteoData = signal<MeteoData[]>([]);
  ispraData = signal<IspraData[]>([]);
  statCards = computed(() => this.buildStatCards());

  constructor() {
    this.loadData();
  }

  async loadData() {
    const [centraline, meteo, ispra] = await Promise.all([
      firstValueFrom(this.service.getCentraline()),
      firstValueFrom(this.service.getMeteo()),
      firstValueFrom(this.service.getIspra()),
    ]);
    this.centraline.set(centraline);
    this.meteoData.set(meteo);
    this.ispraData.set(ispra);
  }
}

Angular - Routing & Guards

// src/app/app.routes.ts

export const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'admin',
    canActivate: [authGuard],
    children: [
      { path: '', redirectTo: 'config', pathMatch: 'full' },
      { path: 'config', component: ConfigComponent },
      { path: 'export', component: ExportComponent },
      { path: 'raw', component: RawExplorerComponent },
    ]
  },
];

// src/app/core/guards/auth.guard.ts

export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (auth.isAuthenticated()) return true;

  router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
  return false;
};

Database - Schema ER

┌──────────────────────┐       ┌─────────────────────────────┐
│     centralina       │       │  centralina_localizzazione  │
├──────────────────────┤       ├─────────────────────────────┤
│ PK id                │◄──────│ FK id_centralina            │
│    name              │       │    lat, lng                 │
│    alias             │       │    nome_comune              │
│    codice            │       │    nome_provincia           │
│    tipo              │       │    data_inizio, data_fine   │
│    status            │       │    stato                    │
│    config_json       │       └─────────────────────────────┘
│    colore_mappa      │
│    is_manuale        │       ┌─────────────────────────────┐
│    last_import       │       │        dati_all             │
└───────┬──────────────┘       ├─────────────────────────────┤
        │                      │ FK id_centralina            │
        │◄─────────────────────│    fonte                    │
        │                      │    valori (text, sep=;)     │
        │                      │    data_ora                 │
        │                      └─────────────────────────────┘
        │
        │   ┌───────────────────────────────────────┐
        │   │       meteostatnet_dati               │
        │   ├───────────────────────────────────────┤
        │◄──│ FK id_centralina                      │
        │   │    time, temp, dwpt, rhum, prcp       │
        │   │    snow, wdir, wspd, wpgt, pres       │
        │   │    tsun, coco                         │
        │   └───────────────────────────────────────┘
        │
        │   ┌───────────────────────────────────────┐
        │   │   opas_ispra_1793 / opas_ispra_1798   │
        │   ├───────────────────────────────────────┤
        │◄──│ FK id_centralina                      │
            │    data_ora                           │
            │    so2, o3, no2, co                   │
            │    pm2_5_fidas, pm10_fidas, benzene   │
            └───────────────────────────────────────┘

Database - Dettaglio Tabelle

Database PostgreSQL: devbagnolicrm, schema: bagnoli_ambiente_dev

Centraline attive