Retlay – Gestione backgrounds
Sviluppo front-end di una funzionalità per la creazione e la gestione di backgrounds che vengono utilizzati all’interno del display simulator
Catalogo BACKGROUNDS CREATI
È stata creata una pagina in cui è possibile vedere il catalogo di tutti i background creati. Tramite questa, oltre ad avere un dettaglio rapido, è possibile gestire (creare, modificare ed eliminare) i singoli backgrounds.
La pagina presenta una tabella, con campi ordinati (gestita tramite prime-ng). Ogni riga corrisponde ad un background, facendo click su di essa si può visionare il dettaglio del singolo elemento.
Visualizzazione del background
È stata creata una visualizzazione in sola lettura per la consultazione del singolo background. In questa modalità non è possibile effettuare modifiche, ma si può rapidamente consultare l’elemento scelto.
L’elemento viene aperto in una sidebar che compare da destra, così è ancora possibile consultare la tabella che si trova come sfondo nella pagina.
Modifica del Background
Quando si modifica un background (oppure si apre dal catalogo effettuando una modifica), il contenuto della sidebar si modifica consentendo di modificare i campi che compongono l’elemento.
Filtri e ricerca
I backgrounds visualizzati nel catalogo possono essere filtrati in base a tutti gli elementi che li compongono (titolo, categoria, collezione, etc etc).
Facendo click sul tasto “Filter” presente nella pagina del catalogo, si apre una sidebar a destra con tutti i campi selezionabili.
Integrazione nel display simulator
I backgrounds che vengono creati con questa funzionalità, vengono utilizzati all’interno del display simulator (altra funzionalità sviluppata in precedenza).
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.
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.