Retlay – Display simulator
Sviluppo front-end di una funzionalità per la creazione e la gestione di allestimenti di una vetrina con il posizionamento di prodotti
Archivio display creati
È stata creata una pagina in cui è possibile vedere l’archivio di tutti i display creati. Tramite questa, oltre ad avere un dettaglio rapido, è possibile gestire (creare, modificare ed eliminare) i display.
Tramite una maniglia (angular-split) è possibile espandere i dettagli del singolo display, senza dover necessariamente aprirlo.
Visualizzazione del display
È stata creata una visualizzazione in sola lettura per la consultazione del singolo display. In questa modalità non è possibile effettuare modifiche, ma si può rapidamente consultare il display scelto.
Da questa schermata è possibile, scaricare un’immagine riepilogativa del display, o un file excel contenente tutti i prodotti utilizzato su di esso.
Modifica del display
Quando si modifica un display (oppure si apre dall’archivio effettuando una modifica), compare una modale a tutto schermo con, nella sidebar di sinistra gli elementi utilizzati, mentre nella parte destra il display con gli elementi draggabili su di esso (fabric.js).
INSERIMENTO PRODOTTI
Una volta che ci si trova nella modalità di modifica di un display, è possibile, oltre a scegliere il background più adatto, inserire dei prodotti su di esso.
I prodotti inseriti, compaiono nella colonna di sinistra, facendo poi click su un apposito pulsante, si apre una modale con tutti i prodotti caricati sul portale.
Una volta scelti i prodotti, la modale si chiude ed è possibile inserirli e trascinarli sul background scelto.
Filtri e ricerca
I display visualizzati nell’archivio possono essere filtrati in base a tutti gli elementi che li compongono (titolo, categoria, collezione, etc etc).
Questi campi vengono compilati nella colonna di sinistra nella modale del display.
Facendo click sul tasto “Filter” presente nella pagina dell’archivio, si apre una sidebar a destra con tutti i campi selezionabili.
versione SOLO web
Questa funzionalità è stata sviluppata per essere utilizzata solamente tramite interfaccia Web. Non è stata inclusa nella versione mobile dell’app per via dell’impossibilità di interazione con uno schermo troppo piccolo.
Utilizzo dELLO STORE DI ANGULAR
Per rendere più rapido l’utilizzo dello strumento, è stato sviluppato uno store che interagisce direttamente con i componenti della funzionalità.
Ogni modifica viene sincronizzata con lo store e quindi immediatamente con tutti i componenti interessati.
ROUTING DI IONIC
Tutte le pagine della funzionalità sono gestite tramite routing. Questo fa si che sia anche possibile condividere un singolo display tramite la sua url univoca.
ACL e livello utenza
Ogni sezione della funzionalità è stata sviluppata per essere utilizzata solamente dagli utenti con i giusti privilegi.
Label e traduzioni di Transloco
Ogni parola o frase all’interno della funzionalità è stata gestita con Transloco, in totale accordo con i linguaggi utilizzati all’interno della piattaforma.
- Strumenti utilizzati -
Angular
Angular è un framework open source per lo sviluppo di applicazioni web progettato per fornire uno strumento facile e veloce per sviluppare applicazioni che girano su qualunque piattaforma inclusi smartphone e tablet.
Ionic
Ionic è un framework HTML5 open source, usato per scrivere applicazioni mobile ibride con tecnologie web come HTML, JavaScript, CSS e SASS. Con Ionic si possono creare applicazioni web progressive (PWAs, Progressive Web Apps) multipiattaforma, che quindi funzionano su ogni piattaforma o dispositivo a partire da un’unica base di codice.
Couchbase
Couchbase Server è un database noSQL cloud e distribuito per applicazioni web interattive. Open source, offre un modello di dati flessibile e prestazioni elevate costanti, è facilmente scalabile e può essere configurato in modalità standalone o cluster.
SCSS
SCSS (Sassy Cascading Style Sheets, o Sassy CSS) è una delle sintassi usate dal preprocessore CSS Sass. La sintassi SCSS utilizza l’estensione file .scss. SCSS è un superset di CSS: contiene tutte le funzionalità di CSS, ma è stato ampliato per includere anche le funzionalità di Sass, quindi ogni file CSS valido è allo stesso tempo un file SCSS valido.
SwiperJS
È uno slider moderno che consente di creare caroselli di immagini in maniera rapida ed estremamente compatibile con device sia desktop che mobile.
TypeScript
TypeScript è un linguaggio di programmazione open source sviluppato da Microsoft. Più nello specifico, TypeScript è un superset di JavaScript, che aggiunge tipi, classi, interfacce e moduli opzionali al JavaScript tradizionale. Si tratta sostanzialmente di una estensione di JavaScript.