Retlay – Gestione notifiche
Sviluppo front-end di una funzionalità per la gestione delle notifiche sia push che feed, all’interno dell’app (sia mobile che web)
Pagina delle impostazioni
È stata creata una pagina in cui è possibile vedere il riepilogo di tutte le impostazioni relative alle notifiche dell’app.
Questa pagina presenta diverse sezioni (e sottosezioni), ognuna delle quali fa riferimento ad una determinata funzionalità.
Gestione delle acl (livello di utenza)
Tramite la gestione di ACL (generate e gestite da back-end), le sezioni vengono mostrate o nascoste all’occorrenza.
Vi è inoltre un’ulteriore divisione riguardando le sezioni mostrate:
- Notifiche selezionabili/deselezionabili
- Notifiche disponibili di default
Salvataggio nelle impostazioni dell'utente
Ogni preferenza, viene poi memorizzata all’interno delle impostazioni dell’utente. In questo modo, quando devono essere inviate delle notifiche, le chiamate back-end attingono direttamente da quelle.
Geolocalizzazione
Alcune notifiche sono basate sull’area geografica di un determinato contenuto. All’interno delle impostazioni sono presenti tutte le locations, suddivise in diversi livelli (paese/regione/città) che è poi possibile attivare/disattivare.
Vista il numero di dati, è stato creato uno store (in angular) con cui gestire tali informazioni (condivise tra componenti).
La visualizzazione dei toggle viene poi gestita tramite diverse ricorsioni di livello in livello, sino a giungere a quello più basso (città).
Estrema dinamicità del sistema
Per come è stata progettata l’intera funzionalità, nel caso in cui si dovessero aggiungere altre tipologie di notifica, o altre locazioni geografiche, non è più necessario un intervento front-end.
Il sistema è stato dinamicizzato in modo tale che all’interno della pagina delle notifiche, le nuove sezioni, vengano visualizzate all’occorrenza, nello stesso ordine con cui si trovano all’interno del database.
Non è pertanto necessario rilasciare nessuna nuova versione per visualizzare eventuali nuove sezioni.
versione web e mobile
Questa funzionalità è stata sviluppata per essere utilizzata sia da mobile che tramite interfaccia Web. È stato sviluppato un layout grid, quindi la visualizzazione è perfettamente responsive ed accattivante a livello grafico.
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.
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.
Transizioni tra le pagine
La funzionalità è tutta sviluppata in single-page. In questo modo, non appena si fa click su una sottosezione, la si raggiunge senza attese o cambi bruschi della schermata.
Tutte le impostazioni sono disponibili già dal primo caricamento iniziale, quindi non sono necessarie ulteriori attese.
- 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.
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.
MySql
MySQL o Oracle MySQL è un relational database management system composto da un client a riga di comando e un server, entrambi disponibili sia per sistemi Unix e Unix-like sia per Windows