UNIVERSITÀ DEGLI STUDI DI TRIESTEDipartimento di Ingegneria e Architettura

Corso di Studi in Ingegneria dell’Informazione

Sviluppo di un’applicazione ibrida su dispositivo mobile per l’interfacciamento al sistema di controllo

TANGOTesi di Laurea Triennale

Laureando:Mattia De Bernardi

RELATORE:

PROF. ENZO MUMOLO

Correlatore :dott. Lucio Zambon

Introduzione Elettra - Sincrotrone Trieste centro di ricerca multidisciplinarespecializzato in applicazione radiazione di sincrotrone e laser a elettroni liberi(FERMI)

Necessità di tenere sotto controllo grande numero(migliaia) dispositivi hardware

Anche interesse nel sapere: stato attuale dei dispositivi, storico delle manutenzioni, disponibilità di componenti atti alla manutenzione

Parte del personale ha necessità di disporredel sistema di monitoraggio su qualsiasi dispositivo mobile

TANGO: sistema di controllo distribuito realizzato in Elettra-Sincrotrone

Motivazioni Interesse Elettra - Sincrotrone Trieste in portabilità di alcuni applicativi

Perché applicazione ibrida (in parte web e in parte nativa): Ibrida più lenta di quella nativa, ma velocità non necessaria per questa applicazione Possibile accesso funzionalità dispositivo mobile

e.g. fotocamera, vibrazione, notifiche sonore, info su connettività, contatti…

Riutilizzo medesimo codice su più piattaforme (per esempio Android e IOS) Presenza su web di librerie per ottimizzazione UI

Obiettivo del lavoro svolto Implementare su mobile funzionalità già esistenti al Sincrotrone

Introdurre nuove funzionalità

Rendere applicazione mobile adattabile alla dimensione dello schermo (responsive)

Funzionalità della applicazione creata Monitoraggio real-time macchina FERMI

Visualizzazione della forma ad albero di Astor (supervisore TANGO)

Start/Stop device server previa autenticazione utente

Elenco device server di FERMI non in esecuzione (inedita)

Soglia allarme per attributo di device server

Apache Cordova Framework open source per sviluppare facilmente applicazioni

per qualsiasi ambiente mobile

Può generare codice nativo (e.g. file apk per Android)

Input di Cordova: codice HTML+JS+CSS

Output di Cordova: codice nativo browser «WebView» + plugin

Attraverso plugin uso funzionalità dispositivo (evento deviceready)

Librerie Bootstrap e jQuery Bootstrap: CSS + JS migliora interfaccia utente,

rende l’applicazione «responsive» e «mobile-first»

jQuery: JS facilita gestione eventi,esecuzione chiamate Asynchronous JavaScript And XML(AJAX),navigazione e manipolazione Document Object Model(DOM)

Principio di funzionamento SPA – Single Page Application

Caricamento iniziale di HTML+CSS+JS

Aggiornamento asincrono solo contenuto HTML tramite AJAX

Motivazioni: NO sessioni lato server perché file locali perdita dati tra caricamenti Singolo evento deviceready da attendere per utilizzo plugin

Lavoro fatto in questa tesi Studio del framework Cordova: requisiti software e command-line interface

Stesura codice HTML (qualche migliaio di righe)

Stesura codice Java Script (qualche migliaio di righe)

Ottimizzazione interfaccia utente tramitescrittura codice CSS (qualche centinaio di righe)

Prove effettuate sul sistema per aumentare frequenza di aggiornamento dati

Sistema sviluppato: schermata principale

Prime due modalità completamente implementate

Ultime 4 aggiunte come dimostrazione estensibilità progetto

Checkbox per salvare la prossima modalità selezionata come definitiva

Sistema sviluppato: FERMI Status

iframe responsivi con grafici arrangiati ad hoc

4 pannelli a scomparsa con dati di interesse

suddivisione velocità aggiornamento:variabili lente, periodo agg 60 sec. variabili veloci, periodo agg 2 sec.

Sistema sviluppato: astor main

Schermata con struttura ad albero

Colore led = stato starter

Tap su elemento menù contestuale

«Open Control Panel»nuova schermata albero device server

controllati

Sistema sviluppato: astor starter tree

Struttura, led, menù simili a precedente

«Start/Stop Server» previa autenticazione

«Show attributes list»su ogni elemento posso mettere soglia modificabile in schermata apposita

Sistema sviluppato: astor alert mode

Legge stato tutti device server di tutti starter

Inserisce in lista solo quelli non in esecuzione

Menù contestuale tramite tap con opzioni: «Start server» «Show attributes list»

Sistema sviluppato: attributi e allarmi

nome attributo – operatore – valore soglia

Opzioni contestuali: «Modify Threshold» «Delete Threshold» «Modify Notifications»

Conclusione Obiettivi raggiunti, ma…

…possibili sviluppi futuri basati su 4 funzionalità non perfezionate

Possibilità pubblicazione su Apple App store o Google Play store: Firma digitale + versione release usando Apache Cordova

Grazie per l’attenzione Mattia De Bernardi