![Page 1: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/1.jpg)
Sviluppo di un’applicazione di front-end per il
monitoraggio di un’Isola Ecologica
Candidato: Lorenzo D’Eri
Relatore: Prof. Sergio Carrato
Correlatore: Ing. Vojko Croselli
2 dicembre 2015
Universita degli Studi di Trieste
![Page 2: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/2.jpg)
Descrizione del problema
![Page 3: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/3.jpg)
Presentazione dell’impianto - alcune definizioni
• Isola Ecologica:
• Area per il conferimento di rifiuti urbani
• EECO Check System:
• Impianto per la gestione degli accessi all’Isola Ecologica del
comune di Varedo (MB)
• Permette di:
• Identificare gli utenti all’accesso
• Gestire il flusso di utenze in entrata ed uscita
• Controllare il numero massimo di utenze presenti nell’impianto
• Pesare il materiale conferito
![Page 4: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/4.jpg)
Architettura di EECO Check System
Figura 1: Architettura di EECO Check System
![Page 5: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/5.jpg)
Le componenti di EECO Check System (I)
• EECO Check Server:
• Servizio NT
• Comunicazione con il database, gestione dei varchi e
comunicazione con il servizio di notifiche ai client
• EECO Db:
• Database + DBMS + Librerie .NET
• Espone un’interfaccia di accesso e modifica dei dati
• EpCore:
• Controllori HW + Sistema operativo embedded
• Uno per ogni sistema sbarre-bilancia
• Gestisce sbarre, bilancia, lettore di badge e display
• EECO Check Push Service:
• Servizio NT
• Intermediario tra EECO Check Server ed EECO Check App
• Invia notifiche push tramite WebSocket
![Page 6: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/6.jpg)
Le componenti di EECO Check System (II)
• EECO Check UI:
• Applicazione WPF + Applicazione Silverlight
• Interfaccia utente per controllo e gestione dei varchi e per
visualizzazione dello storico degli eventi
• Comprende il sottosistema EECO Check Configuration UI
(per funzioni amministrative)
• EECO Check App:
• Applicazione Android (prototipo)
• Stesse funzionalita di EECO Check UI
(senza EECO Check Configuration UI)
• EECO Check Web Server:
• Server IIS
• Web Server (hosting di EECO Check UI)
![Page 7: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/7.jpg)
Diagramma UML
Figura 2: Diagramma UML dell’impianto nello stato iniziale
![Page 8: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/8.jpg)
Requisiti di sviluppo
E stata richiesta una nuova versione di EECO Check UI:
• Senza installazioni di software sul dispositivo
• Con aggiunta di funzionalita specifiche:
• Lettura del peso corrente su ogni bilancia
• Visualizzazione di eventuali errori all’accesso al varco
• Miglioramento delle prestazioni della lista degli eventi
• Presenza di un modulo per funzioni amministrative
(attualmente EECO Check Configuration UI)
• Rinnovamento dell’interfaccia grafica
![Page 9: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/9.jpg)
Applicazione Android
EECO Check App
![Page 10: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/10.jpg)
Tecnologie di sviluppo
• Sviluppata come applicazione ibrida
• Tramite tecnologie web: HTML, CSS e JavaScript
• Utilizzando AngularJS
• Framework JavaScript
• Usato per lo sviluppo di Single-Page Applications
• Implementa il pattern MVC
![Page 11: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/11.jpg)
La struttura di EECO Check App
• Suddivisa in due moduli:
• Gestione dei varchi
• Informazioni sui singoli varchi
• Funzionalita di controllo
(alzamento sbarre, messa fuori servizio, ...)
• Lista degli eventi
• Storico degli eventi
• Funzionalita di stampa
• Inoltre:
• Menu
• Modulo per i parametri di connessione ad
EECO Check Push Service
![Page 12: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/12.jpg)
Gestione Varchi
Figura 3: Schermata della Gestione Varchi di EECO Check App
![Page 13: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/13.jpg)
Lista Eventi
Figura 4: Schermata della Lista Eventi di EECO Check App
![Page 14: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/14.jpg)
Applicazione Web
EECO Check Web App
![Page 15: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/15.jpg)
Motivazioni e risultato
• Perche sviluppare EECO Check Web App?
• Necessita di un’applicazione platform-independent
(requisito di sviluppo)
• Facile da ottenere riutilizzando il codice di EECO Check App
• Risultato ⇒ EECO Check Web App
• Applicazione Web, quindi accessibile tramite browser
• Hosting su EECO Check Web Server• Suddivisa in 2 versioni:
• Mobile: per tablet
• Desktop: per PC
![Page 16: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/16.jpg)
Differenze rispetto ad EECO Check App
Differenze rispetto ad EECO Check App:
• Aggiunta funzionalita:
• Visualizzazione del peso nella Gestione Varchi
• Aggiornamento automatico Lista Eventi
• Refactoring interno ⇒ miglioramento prestazioni
![Page 17: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/17.jpg)
Gestione Varchi
Figura 5: Schermata della Gestione Varchi di EECO Check Web App
![Page 18: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/18.jpg)
Lista Eventi
Figura 6: Schermata della Lista Eventi di EECO Check Web App
![Page 19: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/19.jpg)
Conclusioni
![Page 20: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/20.jpg)
Stato iniziale dello sviluppo - Diagramma UML
Figura 7: Diagramma UML dell’impianto nello stato iniziale
![Page 21: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/21.jpg)
Stato finale dello sviluppo - Diagramma UML
Figura 8: Diagramma UML dell’impianto nello stato finale
![Page 22: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/22.jpg)
Riepilogo requisiti di sviluppo
! Senza installazioni di software sul dispositivo
! Con aggiunta di funzionalita specifiche:
! Lettura del peso corrente su ogni bilancia
! Visualizzazione di eventuali errori all’accesso
! Miglioramento delle prestazioni della lista degli eventi
% Presenza di un modulo per funzioni amministrative
(attualmente EECO Check Configuration UI)
! Rinnovamento dell’interfaccia grafica
![Page 23: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/23.jpg)
Sviluppi futuri
• Implementazione di EECO Check Configuration UI
• Dismissione di EECO Check UI
• Istituzione di un apparato sistematico per il testing
• Aggiunta di funzionalita di controllo del sistema
![Page 24: Sviluppo di un'applicazione di front-end per il monitoraggio di un'isola ecologica](https://reader031.vdocuments.mx/reader031/viewer/2022021921/58f0ce991a28ab592e8b45ed/html5/thumbnails/24.jpg)
Dimostrazione pratica