WebPrice

Il precedente sistema era costruito su una architettura tradizionale con rendering server-side e una UX frammentata che rendeva difficile l'analisi rapida dei dati. La richiesta era di ripartire da zero con un'applicazione moderna, reattiva e pensata per un uso quotidiano intensivo.

Obiettivi

• Rimpiazzare il vecchio sistema con una SPA moderna e completamente responsive
• Fornire dashboard e analisi in tempo reale su centinaia di situazioni di rilevamento
• Gestire griglie di dati con oltre 700 righe e 80+ colonne con filtri, ordinamento e export Excel ottimizzato
• Integrare la visualizzazione dei volantini promozionali direttamente nell'applicazione
• Implementare autenticazione sicura con JWT e rate limiting

Sfide Principali

La gestione performante di griglie dati molto dense (AG Grid con virtual scrolling), la costruzione di un sistema di indici configurabile con più formule (Standard, Inversa, Accoppiata) e il motore di calcolo delle variazioni prezzo in tempo reale su insiemi multi-dimensionali (prodotto × punto vendita × periodo) hanno rappresentato i punti tecnici più impegnativi.

Ho progettato e sviluppato l'intera applicazione: architettura Angular con routing gerarchico, libreria UI PrimeNG per i componenti, AG Grid per le tabelle dati, Chart.js per i grafici e pdf.js per il viewer dei volantini. Il backend è un'API REST minimale in ASP.NET Core con autenticazione JWT.

Rilevamenti — Prezzi

Il cuore dell'applicazione. Ogni situazione espone tre tab:

• Overview: tabella punti vendita con articoli rilevati, indici aritmetici e ponderati, affiancata da un grafico a barre comparativo
• Dettaglio: griglia AG Grid con tutte le righe prodotto e le colonne per ogni punto vendita — prezzi, promozioni, prezzo originale e indice per ciascuna combinazione
• Indici per categoria: breakdown dell'indice per categoria ECR a 3 livelli, con confronto tra tutti i punti vendita rilevati

Il pannello Imposta filtri permette di configurare la formula dell'indice, il prezzo da usare per il calcolo, le eccezioni promozionali e lo scostamento massimo accettato.

Analisi — Punto Vendita

Dashboard dedicata a ogni punto vendita rilevato. Mostra l'indice aritmetico e ponderato, il numero di articoli rilevati, tre donut chart (distribuzione categorie, dinamica prezzi, confronto col listino) e il grafico storico degli indici nel tempo con slider temporale interattivo. Il pannello filtri permette di personalizzare la formula e i parametri del calcolo.

Analisi — Articoli

Per ogni prodotto è disponibile il grafico storico dei prezzi rilevati in tutti i punti vendita, con una legenda interattiva per selezionare/deselezionare le serie. La tabella sottostante mostra il dettaglio di ogni rilevamento con data, punto vendita, prezzo, eventuale promozione e situazione di riferimento.

Rilevamenti — Promozioni

Sezione dedicata ai volantini promozionali rilevati. Ogni promozione ha una miniatura del volantino, il periodo di validità e collega all'overview con la lista dei punti vendita coperti e la distribuzione delle categorie in promozione. Il viewer integrato (pdf.js) permette di sfogliare il volantino pagina per pagina direttamente nell'app.

Rilevamenti — Planning

Calendario a 3 mesi che visualizza le campagne di rilevamento programmate tramite codice colore. Mostra i KPI principali: prossimo rilevamento, totale rilevamenti annuali, rilevamenti nei prossimi 30 giorni e conclusi.

Strumenti di Analisi

Due sezioni di supporto completano il sistema:

• Categorie ECR: albero gerarchico a 5 livelli delle categorie prodotto (ECR standard), con ricerca e possibilità di attivare/disattivare categorie per affinare l'analisi
• Fornitori: catalogo prodotti per fornitore con ricerca full-text, utile per identificare rapidamente tutti gli articoli di un brand nei rilevamenti

Tecnologie Utilizzate

• 
• 
• 
• 
• 

Il progetto è partito da un'analisi approfondita del flusso di lavoro degli utenti finali, con l'obiettivo di ridurre il numero di click necessari per accedere alle informazioni critiche. L'architettura Angular è stata strutturata con feature module lazy-loaded per tenere bassi i bundle iniziali nonostante la dimensione dell'applicazione.

Metodologia

• Iterazioni continue: rilasci frequenti concordati col cliente, con feedback immediato e adeguamenti rapidi alle esigenze emergenti
• API-first: backend ASP.NET Core Minimal API sviluppato in parallelo con documentazione Scalar, permettendo sviluppo frontend indipendente con mock
• Performance focus: AG Grid con virtual scrolling per le griglie dense, compressione Gzip lato server, lazy loading delle rotte e ottimizzazione delle query SQL
• Sicurezza: autenticazione JWT con refresh token, rate limiting sul login endpoint, CORS configurato per i soli domini autorizzati