← Tutti gli articoli

Configuratore di serramenti su misura

In questo articolo raccontiamo come ne abbiamo progettato uno da zero: le scelte di architettura, il perché di un unico motore di disegno condiviso tra browser e server, e le ragioni per cui abbiamo preferito costruirlo su misura invece di assemblare un plugin.

In breve. Un solo motore SVG genera sia l'anteprima a schermo sia il PDF. La distinta esce come tavola tecnica in A4, volutamente senza prezzi. Il codice è di proprietà del serramentista, brandizzabile e senza lock-in. L'endpoint pubblico è blindato con validazione a whitelist e limitazione delle risorse. Puoi vederlo in funzione nella scheda del progetto.

ProcessWire Text Search Example

Configuratore di serramenti su misura

Cos'è un configuratore di serramenti

Un configuratore di serramenti (o configuratore di infissi) è un'applicazione web che traduce le scelte di un utente — famiglia di serramento, materiale, tipologia di apertura, misure, ripartizione delle ante, inglesine, pacchetto vetro — in un prospetto tecnico quotato e in un documento riepilogativo. Non è un listino e non è un e-commerce: è uno strumento di preventivazione tecnica che prepara il terreno alla trattativa, lasciando al serramentista il controllo sul prezzo.

Il valore, per chi produce serramenti, è duplice: il cliente arriva alla richiesta di preventivo già con le idee chiare e una specifica corretta, e l'azienda riceve una distinta leggibile invece di una descrizione approssimativa.

Il problema: un infisso non è un prodotto a catalogo

Un serramento è un oggetto a parametri combinati. La stessa finestra può essere in legno, in alluminio, in PVC o in accoppiato legno-alluminio; può essere a battente, a ribalta, scorrevole; può avere una o più ante, con ripartizioni asimmetriche; può montare vetri diversi per isolamento termico o acustico. Le combinazioni sono migliaia, e ognuna ha un disegno e una descrizione tecnica differenti.

Questo è esattamente il tipo di problema che un configuratore risolve bene — a patto che il disegno sia corretto e coerente in ogni combinazione. È qui che si gioca la differenza tra uno strumento credibile davanti a un tecnico e un giocattolo che disegna rettangoli.

Le scelte di progetto

Un motore di disegno a sorgente unica

La decisione architetturale più importante è stata avere un unico motore di disegno, condiviso tra il browser e il server. La stessa funzione che disegna l'anteprima interattiva a schermo è quella che genera il disegno dentro il PDF. Nessuna duplicazione.

Il motivo è semplice e ha conseguenze concrete: se la logica del disegno vivesse in due copie — una lato client per l'anteprima, una lato server per il PDF — prima o poi divergerebbero, e il cliente vedrebbe a schermo un serramento diverso da quello stampato sulla distinta. Un errore inaccettabile in un documento tecnico. Con una sorgente unica, ciò che vedi è ciò che ottieni, per costruzione.

È il principio che sta dietro al nostro "Progettato. Non assemblato.": la coerenza non è un controllo aggiunto alla fine, è una proprietà dell'architettura.

SVG parametrico e l'estetica della tavola tecnica

Il disegno è realizzato in SVG, generato per intero dai parametri della configurazione. Ogni linea — telaio, anta, battuta, verso di apertura, quote dimensionali — è calcolata, non pescata da una libreria di immagini statiche. Questo permette misure reali, ante asimmetriche, prospetti quotati e un livello di dettaglio che regge lo sguardo di chi i serramenti li progetta.

La scelta estetica è deliberata: il linguaggio della tavola tecnica, con griglia, quote e tratto da blueprint. Non è decorazione. Parla la stessa lingua del serramentista e comunica precisione. A schermo il tema è scuro, da blueprint; in stampa diventa una tavola bianca, pulita e professionale — due rese dello stesso disegno, non due disegni.

La distinta in PDF, generata sul server

Dalla configurazione nasce una distinta multi-posizione: più serramenti raccolti in un'unica richiesta, ciascuno con quantità, note e miniatura. La distinta si esporta in un PDF in formato A4, generato lato server per garantire un risultato identico su qualsiasi dispositivo e stampante.

Una scelta merita una nota: la distinta non contiene prezzi. È una decisione di prodotto, non una mancanza. La valorizzazione economica di un serramento dipende da troppe variabili aziendali e di posa perché abbia senso automatizzarla in modo generico; resta competenza del serramentista. Il configuratore produce la specifica tecnica corretta, non il preventivo economico.

White-label: il codice è del serramentista

Il configuratore è white-label e riproponibile: un'unica base di codice, installabile e brandizzata per ogni azienda. Ogni serramentista possiede la propria installazione, con il proprio marchio, e — punto per noi non negoziabile — il proprio codice, senza lock-in. Nessun abbonamento a piattaforma, nessun dato che vive su server di terzi fuori dal controllo dell'azienda.

Sicurezza: un endpoint pubblico va blindato

Generare un PDF sul server significa esporre un endpoint pubblico che accetta input e produce un documento. Trattato con leggerezza, è un rischio concreto: input non validati che finiscono in un motore di rendering possono aprire a iniezioni o al consumo incontrollato di risorse.

Per questo l'input non viene mai considerato affidabile. Ogni richiesta viene ricostruita da zero contro una whitelist: le famiglie, i materiali e le aperture devono appartenere a insiemi noti; le misure sono forzate a interi entro intervalli validi. Nulla di ciò che arriva dall'esterno raggiunge grezzo il generatore. A questo si aggiungono la limitazione della concorrenza di rendering (per non saturare un server con richieste simultanee), un timeout con terminazione forzata, un tetto al numero di posizioni e un rate-limiting. Come diciamo altrove: sicurezza e performance non si negoziano.

Progettato, non assemblato: perché non un plugin

La strada rapida sarebbe stata un plugin da installare o un servizio in abbonamento. L'abbiamo scartata per ragioni che valgono ben oltre questo progetto.

Un plugin generico disegna ciò che sa disegnare, non ciò che serve al singolo serramentista; porta con sé peso, dipendenze e codice che nessuno controlla davvero; e lega l'azienda a una piattaforma esterna. Un configuratore costruito su misura, al contrario, è snello, leggibile e di proprietà: fa esattamente quello che deve, si integra nel sito esistente senza appesantirlo, e cresce insieme all'azienda.

È la stessa logica che applichiamo quando scegliamo di scrivere codice invece di installarlo, e che raccontiamo in Dalla demo all'MVP: si parte da un prototipo funzionante e lo si porta a strumento di produzione, un passo verificabile alla volta.

Come si integra in un sito esistente

Il configuratore è un'applicazione autonoma, servita accanto al sito del serramentista con architettura same-origin (frontend e API sulla stessa origine, senza complicazioni di CORS). Il catalogo dei materiali è predisposto per essere alimentato da un CMS ProcessWire, così l'azienda gestisce in autonomia profili, finiture e colori. Ed è predisposto il flusso di richiesta preventivo: la distinta può essere inoltrata all'azienda via email transazionale, con il PDF in allegato.

Sul piano operativo gira su una VPS con Node.js/Express dietro Nginx, con rendering del PDF lato server. Fondamenta leggere, URL puliti, nessun plugin superfluo: le stesse che usiamo quando prepariamo un sito per i motori di ricerca e per le AI generative.

Domande frequenti

Cos'è un configuratore di serramenti? È un'applicazione web che permette di comporre un infisso scegliendo materiale, apertura, dimensioni e vetro, ottenendo in tempo reale un disegno tecnico quotato e una distinta riepilogativa pronta per la richiesta di preventivo.

Un configuratore di serramenti mostra i prezzi? Non necessariamente. Nel nostro caso la distinta è volutamente senza prezzi: produce la specifica tecnica corretta e lascia la valorizzazione economica al serramentista, che la calcola in base alle proprie variabili di produzione e posa.

Che differenza c'è tra un configuratore su misura e un plugin? Un plugin è generico, porta dipendenze e lega l'azienda a una piattaforma esterna. Un configuratore su misura è leggero, si integra nel sito esistente, disegna esattamente le tipologie del serramentista ed è di proprietà dell'azienda, senza lock-in.

Il configuratore si può integrare nel sito che ho già? Sì. È un'applicazione autonoma che si affianca al sito esistente con architettura same-origin, e il catalogo materiali è predisposto per essere gestito da CMS come ProcessWire.

Come viene generato il documento tecnico? La distinta è generata come PDF A4 lato server, a partire dallo stesso motore di disegno che produce l'anteprima a schermo: ciò che il cliente vede è identico a ciò che viene stampato.

È adatto a più tipologie di infissi? Sì. Gestisce finestre, porte, portoni e vetrate scorrevoli, con materiali diversi (legno, alluminio, PVC, accoppiati), varie tipologie di apertura, ante multiple anche asimmetriche, inglesine e pacchetti vetro.

Vuoi vederlo in funzione

Il configuratore è online e interattivo. Puoi esplorarlo dalla scheda del progetto, oppure raccontarci la tua esigenza: se produci serramenti e vuoi uno strumento di preventivazione tecnica con il tuo marchio e il tuo codice, lo costruiamo su misura.

Scroll