Post on 16-Jan-2017
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