Generatore di Preventivi
Richieste del cliente.
Essendo un tool per l’uso interno, le richieste si sono concentrate sull’efficienza operativa, l’affidabilità dei dati e la flessibilità del formato.
Standardizzazione: Creare un template dinamico che aderisse rigorosamente all’identità visiva e alle condizioni contrattuali dell’azienda.
Gestione Dati: Necessità di correlare ogni preventivo a un Cliente preesistente (relazione database) per una tracciabilità futura.
Flessibilità di Prezzo: Possibilità di presentare l’offerta in due modalità distinte: una Tabella Dettagliata (riga per riga) e una struttura a Pacchetti (esempio: Base, Pro, Custom), con gestione di prezzi unici e ricorrenti.
Contenuto Dinamico: Consentire l’inserimento di sezioni intermedie personalizzate e l’uso di un editor Rich Text per arricchire la descrizione dei servizi.
Sviluppo delle richieste.
L’implementazione è stata focalizzata sulla creazione di un’architettura Headless CMS moderna, separando chiaramente l’interfaccia utente dalla gestione dei contenuti e dei dati.
Per il frontend, la scelta è ricaduta su Vue 3 (Composition API), abbinato a TypeScript per garantire la robustezza e la tipizzazione dei dati in tutte le fasi.
Questa combinazione ha facilitato la gestione dello stato complesso e la creazione di componenti annidati, essenziali per la costruzione dinamica della tabella prezzi e delle sezioni intermedie.
L’interfaccia utente è stata stilizzata con Tailwind CSS, permettendo un design pulito, responsive e rapido nella prototipazione.
Sul lato backend, Strapi 4 è stato utilizzato come Content Management System (CMS) Headless per la sua eccellente flessibilità nel data modeling. Strapi è stato cruciale per implementare le Dynamic Zones, che hanno permesso di gestire i due formati di preventivo (Tabella o Pacchetti) all’interno dello stesso campo dati.
La comunicazione tra frontend e backend è stata gestita tramite Axios e autenticata con API Tokens per garantire transazioni sicure. Infine, per l’editing dei testi più lunghi, è stato integrato EasyMDE, un editor Rich Text che produce una stringa Markdown pulita, scelta per la sua semplicità e la compatibilità diretta con il formato del campo in Strapi.
Caratteristiche principali
Front-end
Vue 3 (Composition API) & TypeScript.
Logica di input annidata e riusabile tramite v-model personalizzato.
Implementazione di vue-multiselect per la ricerca e selezione dinamica dei Clienti.
Editor Markdown: Integrazione di EasyMDE per input Rich Text.
Back-end
Strapi.
Modellazione dei prezzi (Tabella/Pacchetti) con il sistema Dynamic Zone
Uso di Strapi Components per sezioni di servizio strutturate e modulari.
Gestione di payload complessi, array annidati e autenticazione tramite Bearer Token.
Altro
Architettura Headless.
Ottimizzazione Workflow.
È quello di cui hai bisogno?
Per ricevere informazioni, preventivi o una consulenza visita la pagina 'Contatti'.