Presentazione del lavoro di tesi circa lo sviluppo di un'applicazione ibrida su dispositivo mobile per l'interfacciamento al sistema di controllo TANGO, tramite l'ausilio del framework Apache Cordova

1. UNIVERSITÀ DEGLI STUDI DI TRIESTE
Dipartimento 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 TANGO
Tesi di Laurea Triennale
Laureando:
Mattia De Bernardi
Relatore:
prof. Enzo Mumolo
Correlatore:
dott. Lucio Zambon

2. Introduzione
 Elettra - Sincrotrone Trieste centro di ricerca multidisciplinare
specializzato 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 disporre
del sistema di monitoraggio su qualsiasi dispositivo mobile
 TANGO: sistema di controllo distribuito realizzato in Elettra-Sincrotrone

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

4. Obiettivo del lavoro svolto
 Implementare su mobile funzionalità già esistenti al Sincrotrone
 Introdurre nuove funzionalità
 Rendere applicazione mobile adattabile alla dimensione dello schermo
(responsive)

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

6. 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)

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

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

9. 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 tramite
scrittura codice CSS (qualche centinaio di righe)
 Prove effettuate sul sistema per aumentare frequenza di aggiornamento dati

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

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

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

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

14. 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»

15. Sistema sviluppato: attributi e allarmi
 nome attributo – operatore – valore soglia
 Opzioni contestuali:
 «Modify Threshold»
 «Delete Threshold»
 «Modify Notifications»

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

17. Grazie per l’attenzione
Mattia De Bernardi