Come funziona

Aggiornato 12/09/26, 14:04 · Contatti

Progetto non ufficiale: non affiliato ad AgID, al Governo italiano o al Comune di San Vincenzo.

Come funziona il Cruscotto San Vincenzo

Come i dati aperti diventano la dashboard di San Vincenzo: stack, proxy API e moduli opzionali.

Come funziona

Architettura, stack tecnologico e flusso operativo del Cruscotto San Vincenzo: come i dati aperti diventano la dashboard che vedi.

In sintesi

Il cruscotto è un'applicazione solo lettura: non ha database proprio, né autenticazione obbligatoria. Aggrega dati pubblici del Comune di San Vincenzo (codice ISTAT 049018) e li presenta in sezioni tematiche. La fonte principale è Cruscotto Italia (AgID), raggiungibile via MCP; altre fonti (meteo, trasporti, ARPAT, mappe) arrivano da API dedicate.

Realizzato da Alessandro Cipriani. Progetto indipendente e non ufficiale — vedi anche le attribuzioni e regole.

Flusso operativo

Dal dato pubblico alla schermata: quattro passaggi, tutti lato server o client senza scrittura sui sistemi delle fonti.

  1. Fonti aperte

    Cruscotto Italia (AgID) e altre API pubbliche (ARPAT, Regione Toscana, meteo, OSM, MIUR, …) espongono i dati in lettura.

  2. Proxy Next.js

    Le route /api/* sul server recuperano, normalizzano e mettono in cache le risposte. Il browser non parla direttamente con l’MCP AgID.

  3. Dashboard

    I pannelli React leggono JSON dalle API interne e mostrano KPI, mappe, grafici e sezioni tematiche per San Vincenzo (ISTAT 049018).

  4. Degrado controllato

    I pannelli opzionali (meteo, ARPAT, cultura, porto, …) falliscono in modo indipendente: il resto del cruscotto resta consultabile.

Endpoint MCP AgID: https://cruscotto-italia-mcp.agid.workers.dev/mcp

Stack tecnologico

Tutto gira su un unico processo Next.js in sviluppo (npm run dev); in produzione su Vercel. Non serve avviare database o microservizi locali.

  • Next.js 16 (App Router) + TypeScript

    Applicazione web, routing, rendering e API route server-side.

  • React 19 + Tailwind CSS 4

    Interfaccia dashboard a sidebar, componenti e tema PA / Design Italia.

  • Chart.js / react-chartjs-2

    Grafici KPI, serie storiche e confronti tra indicatori.

  • Leaflet / react-leaflet + OpenStreetMap / CARTO

    Mappe interattive (civici, DAE, trasporti, meteo, accessibilità).

  • Three.js

    Vista 3D stilizzata della morfologia del territorio.

  • @modelcontextprotocol/sdk

    Client MCP verso Cruscotto Italia (AgID) per i KPI comunali.

  • Modal + Hugging Face (opzionale)

    Assistente RAG: embedding e generazione senza API LLM a pagamento.

  • Vercel

    Hosting, CDN e cache delle route API.

API interne

Il frontend chiama solo route locali sotto /api/*. Sono proxy/cache sottili: nessuna persistenza proprietaria dei dataset.

Principali route API interne del cruscotto
RouteRuolo
GET /api/kpiProxy comune_kpi (cache ~24h)
GET /api/dettaglioSotto-sezioni comune_dashboard (SIOPE, ANAC, …)
GET /api/mappaLayer GeoJSON (civici, EV, beni, sanità)
GET /api/meteo*Meteo live, previsioni, radar, allerte
GET /api/percorsiPercorsi ciclabili/pedonali OSM (lista, mappa, GPX)
GET /api/daeDefibrillatori da GeoJSON locale / OSM
POST /api/feedbackSuggerimenti → issue GitHub
POST /api/assistenteProxy RAG su Modal (se configurato)
GET /api/amministratoriAnagrafe DAIT (empty-safe)
GET /api/terremotiINGV nel bbox comunale
GET /api/ipaDomicili digitali IPA
GET /api/demografia-mensileISTAT D7B (ZIP latin-1)
GET /api/stazioniWFS stazioni meteo-idro regionali
GET /api/pubblico/*Export JSON/CSV indicizzabili

Sezioni del cruscotto

La navigazione (sidebar desktop / menu mobile) raggruppa i temi in tre aree. Ogni sezione è un deep-link (#sanita, #infra, …).

  • In evidenza

    Panoramica, Sanità, Disabilità, Mobilità, Meteo, Partecipa

  • Territorio e mare

    Turismo, Porto, Ambiente, Territorio, Mappa

  • Economia e PA

    Economia, Istruzione, Società, Chi amministra, Confronto, Finanza

Torna al cruscotto

Servizi opzionali

  • Assistente RAG — corpus locale + modelli HF su Modal; richiede ASSISTENTE_MODAL_URL in ambiente. Senza variabile, l'assistente resta limitato alle FAQ integrate.
  • Bot Telegram DAE — segnalazioni cittadine di defibrillatori; webhook e overlay mappa se configurati.
  • PWA — installabile sulla schermata Home; offline solo per pagine già visitate.
  • Form Partecipa — i suggerimenti diventano issue sul repository GitHub del progetto.

Limiti e trasparenza

I dati sono quelli pubblicati dalle fonti al momento dell'estrazione: non c'è garanzia di aggiornamento in tempo reale su tutti i dataset. Per usi ufficiali o legali fare sempre riferimento alle fonti primarie. Licenze, stemma e elenco completo delle fonti sono in Attribuzioni e regole. Per duplicare lo stack su un altro comune vedi Riusa / fork.