Post on 14-Apr-2017
transcript
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