Progetto di Tecnologie Web 2014/2015 THERMOWEB

Presentazione sul tema: "Progetto di Tecnologie Web 2014/2015 THERMOWEB"— Transcript della presentazione:

1 Progetto di Tecnologie Web 2014/2015 THERMOWEB
A cura di Heliocentric Team: Maurizio Di Meo 0108/1473 Gaetano Izzo 0124/0446 Nunzio Visone 0108/1666

2 Cos’è ThermoWeb? ThermoWeb nasce dall’idea di avere un termometro accessibile dal web. Utilizzando infatti un browser è possibile visualizzare un grafico relativo alla temperatura rilevata in tempo reale da un sensore collegato ad una Intel Galileo (Gen 2) sulla quale gira un server JavaScript mediante Node JS.

3 Intel Galileo La Intel Galileo è la prima di una linea di schede di sviluppo certificate da Arduino, basata su architettura Intel x86 e progettata per makers e community d’istruzione. La Intel Galileo unisce la tecnologia Intel al supporto alle schede d’espansione di Arduino (dette “shield”) e all’ambiente di sviluppo software e librerie Arduino. La scheda di sviluppo monta un sistema operativo Linux open source con le librerie software Arduino, garantendo il riuso di software esistenti, detti “sketch”. La Intel Galileo può essere programmata con sistemi operativi OS X, Microsoft Windows e Linux. La scheda è anche progettata per essere compatibile con l’ecosistema Arduino shield, sia a livello hardware che software.

4 Node.js Node.js è una piattaforma costruita sul JavaScript a runtime di Chrome per sviluppare applicazioni web veloci e scalabili. Node.js utilizza un modello I/O event-driven, non bloccante che lo rende leggero ed efficiente, perfetto per applicazioni real-time con un rilevamento dati intenso, eseguite su device distribuiti.

5 Perché Intel Galileo? Abbiamo scelto di lavorare utilizzando una Intel Galileo primo perché non avendo mai lavorato con sistemi embedded eravamo incuriositi da tali tecnologie, secondo perché pensiamo che Internet of Things rappresenti la nuova frontiera del mondo dell’informatica.

6 Perché Node.js Si è deciso di utilizzare la piattaforma Node.js poiché, dovendo lavorare con un sistema open source per sistemi embedded (nel caso specifico “Linux Yocto”), e dovendo rilevare dati con dei sensori in real time, erano necessari i moduli express, ejs, socket.io e galileo-io.

7 Il server (1 di 4) Il server dell’applicazione web, è stato scritto utilizzando il linguaggio JavaScript. Ecco una sezione di codice in cui utilizziamo i moduli di cui si è parlato nelle slide precedenti:

8 Il server (2 di 4) Di seguito uno screenshot relativo alla funzione analogRead, elemento principale del nostro progetto, poiché mezzo di rilevamento dati.

9 Il server (3 di 4) Di seguito uno screenshot del server, che stampa un messaggio di console.log una volta avviato.

10 Il server (4 di 4) Una volta avviato il client, il server ci avvisa con un ulteriore console.log “Utente connesso”.

11 Il client (1 di 3) Il client è stato scritto utilizzando il linguaggio HTML, sebbene l’estensione del file è di tipo .ejs poiché abbiamo utilizzato il modulo di Node.js ejs. Di seguito un porzione di codice relativa al body della pagina web del client.

12 Il client (2 di 3) Abbiamo scelto, per ragioni puramente estetiche, di visualizzare un grafico relativo alla temperatura rilevata, utilizzando la libreria Chart.js.

13 Il client (3 di 3) L’anima del client, sta infatti proprio in uno script contenuto all’interno del body che definisce le logiche di generazione del grafico.

14 Il risultato nel browser
Accedendo all’url “<IP>:<porta>/chart” è possibile visualizzare la seguente finestra, con un grafico aggiornato in tempo reale dei dati rilevati dal sensore.

15 Sviluppi futuri Collegare ulteriori sensori alla scheda, rendendola una rilevatore di qualità dell’ambiente oltre che un “termometro online”; Spostare il server esternamente al sistema embedded in modo da rendere pubblico l’accesso alla pagina web.

16 GRAZIE PER L’ATTENZIONE! Heliocentric Team
Conclusioni Il progetto è stato stimolante, le difficoltà sono state non poche, data l’inesperienza nel campo dell’elettronica, ma tutto sommato il nostro obiettivo principale, e cioè quello di esplorare nuovi mondi, è stato raggiunto! :) GRAZIE PER L’ATTENZIONE! Heliocentric Team