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

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 funzionalita 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

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

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

• 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

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

• 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

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

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 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

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

Dimostrazione pratica