Implementazione del frontend della web application PSB Home Banking. Questo progetto è parte dell'esame Software Architectures and Methodologies (SWAM) tenuto dal Prof. Enrico Vicario, in collaborazione con il Dott. Boris Brizzi, l’Ing. Jacopo Parri e l’Ing. Samuele Sampietro.
Nella realizzazione sono state utilizzate le seguenti tecnologie:
- Angular: framework open-source per lo sviluppo del frontend di applicazioni web.
- Clarity: design system open-source che permette di arricchire l’esperienza utente durante l’interazione con l’applicazione.
Sono state implementate 3 viste nell’applicazione, navigabili grazie al modulo AppRouter di Angular:
-
home: pagina principale dell’applicazione
-
login: pagina in cui è possibile procedere all'autenticazione, tramite verifica a due fattori oppure tramite codice di trasferimento di sessione
-
reserved-area: pagina in cui il cliente autenticare può visionare i suoi conti bancari e sfruttare la funzionalità di trasferimento sessione
L’applicazione dialoga con il backend (istanziato localmente su un server WildFly) facendo uso del modulo HttpClient di Angular. Sono state implementate le funzionalità di login e logout, assieme a quella di trasferimento sessione.
Dal momento che il backend richiede all’utente autenticato di trasmettere le sue credenziali (coppia <e-mail - OTP>) ad ogni successiva richiesta, queste vengono memorizzate temporaneamente lato frontend nel Local Storage offerto da Angular.
Sono mostrate di seguito le interazioni che l'utente deve effettuare al momento del login, del logout e del trasferimento sessione:
-
Login e Logout
L'OTP nell'esempio non viene mandato via mail, ma viene printato sulla Console del server WildFly in cui il Backend è in esecuzione
-
Trasferimento Sessione
La generazione del QR Code viene effettuata grazie alla libreria [angularx-qrcode](https://www.npmjs.com/package/angularx-qrcode) direttamente nel frontend. Il QR codifica il codice di sessione generato dal backend.
È necessario avere nella propria macchina npm ed Angular CLI in modo da poter eseguire correttamente il codice.
Facendo uso di ng serve è possibile mandare in esecuzione il progetto su un server locale. Navigando quindi su http://localhost:4200/ da un qualsiasi browser è possibile interagire con il front-end. Dato che l'applicazione è pensata per interfacciarsi al backend di PSB Home Banking, si consiglia di mandare in esecuzione localmente in un server locale anche quest'ultimo, così da poter apprezzare a pieno tutte le funzionalità del frontend in uno scenario realistico.
Il progetto è stato generato attraverso Angular CLI in versione 14.2.3.