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 Università degli Studi di Trieste
Descrizione del problema
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
Architettura di EECO Check System Figura 1: Architettura di EECO Check System
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
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 funzionalità di EECO Check UI (senza EECO Check Configuration UI) EECO Check Web Server: Server IIS Web Server (hosting di EECO Check UI)
Diagramma UML Figura 2: Diagramma UML dell impianto nello stato iniziale
Requisiti di sviluppo È stata richiesta una nuova versione di EECO Check UI: Senza installazioni di software sul dispositivo Con aggiunta di funzionalità 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
Applicazione Android EECO Check App
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
La struttura di EECO Check App Suddivisa in due moduli: Gestione dei varchi Inoltre: Informazioni sui singoli varchi Funzionalità di controllo (alzamento sbarre, messa fuori servizio,...) Lista degli eventi Storico degli eventi Funzionalità di stampa Menù Modulo per i parametri di connessione ad EECO Check Push Service
Gestione Varchi Figura 3: Schermata della Gestione Varchi di EECO Check App
Lista Eventi Figura 4: Schermata della Lista Eventi di EECO Check App
Applicazione Web EECO Check Web App
Motivazioni e risultato Perché sviluppare EECO Check Web App? Necessità 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
Differenze rispetto ad EECO Check App Differenze rispetto ad EECO Check App: Aggiunta funzionalità: Visualizzazione del peso nella Gestione Varchi Aggiornamento automatico Lista Eventi Refactoring interno miglioramento prestazioni
Gestione Varchi Figura 5: Schermata della Gestione Varchi di EECO Check Web App
Lista Eventi Figura 6: Schermata della Lista Eventi di EECO Check Web App
Conclusioni
Stato iniziale dello sviluppo - Diagramma UML Figura 7: Diagramma UML dell impianto nello stato iniziale
Stato finale dello sviluppo - Diagramma UML Figura 8: Diagramma UML dell impianto nello stato finale
Riepilogo requisiti di sviluppo! Senza installazioni di software sul dispositivo! Con aggiunta di funzionalità 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
Sviluppi futuri Implementazione di EECO Check Configuration UI Dismissione di EECO Check UI Istituzione di un apparato sistematico per il testing Aggiunta di funzionalità di controllo del sistema
Dimostrazione pratica