Istituto Tecnico Industriale “G. Bearzi”

Udine

ESAME DI STATO

2015-2016

Stazione di monitoraggio meteorologico e

della qualita dell’aria con Arduino

Slobodiuk StefanoClasse 5IA

Indice

1 Premessa 2

2 Introduzione 32.1 Contesto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.3 Struttura dell’elaborato . . . . . . . . . . . . . . . . . . . . . 4

3 Descrizione del progetto 53.1 Componenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.2 Competenze . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.3 Gestione e organizzazione del progetto . . . . . . . . . . . . . 63.4 Utilizzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4 Progettazione 94.1 Brain-storming . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Mappe concettuali . . . . . . . . . . . . . . . . . . . . . . . . 94.3 Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.3.1 Visualizza . . . . . . . . . . . . . . . . . . . . . . . . . 104.3.2 Amministrazione . . . . . . . . . . . . . . . . . . . . . 104.3.3 Ereditarieta . . . . . . . . . . . . . . . . . . . . . . . . 10

4.4 Schema Entita-Relazioni . . . . . . . . . . . . . . . . . . . . . 13

5 Realizzazione 145.1 Scelta del framework . . . . . . . . . . . . . . . . . . . . . . . 145.2 Modello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145.3 Vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.1 Risultati . . . . . . . . . . . . . . . . . . . . . . . . . . 175.4 Controllore . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.5 Scelte tecniche e stilistiche . . . . . . . . . . . . . . . . . . . . 20

6 Infrastruttura del sito 226.1 Programmi di sviluppo . . . . . . . . . . . . . . . . . . . . . . 226.2 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226.3 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226.4 Server Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.5 Integrazione continua . . . . . . . . . . . . . . . . . . . . . . . 236.6 Bug Tracker . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

7 Conclusione 257.1 Obiettivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257.2 Idee e sviluppi futuri . . . . . . . . . . . . . . . . . . . . . . . 257.3 Iniziative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267.4 Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . 26

1

1 Premessa

Perche e nato il progetto di una stazione meteo? Il tutto e iniziato dallaproposta dell’Istituto Bearzi volta a me e ad alcuni compagni di produrreun elaborato riguardante la robotica. La scelta era vasta: si poteva sceglieredi produrre un sistema di monitoraggio per acquari, orti, perfino un bracciorobotico, ma il desiderio era quello di collegare la robotica all’informatica,quindi allo sviluppo di un gestionale web, utilizzando le conoscenze per lopiu ottenute per passione personale.

Detta in altri termini volevamo un progetto per metterci in gioco.Durante lo sviluppo del progetto ci siamo imbattuti in svariati ostacoli

che hanno comportato tempi lunghi per la ricerca delle risoluzioni. Adesempio, abbiamo imparato ad usare un framework il quale ha una curva diapprendimento abbastanza particolare. Si puo trovare risposta nella Figura1 tratta dal blog di Ben Nadel1:

Figura 1: Anche se si tratta del framework AngularJS il concetto non cambia

1http://www.bennadel.com/blog/2439-my-experience-with-angularjs.htm

2

2 Introduzione

La “Stazione di monitoraggio meteorologico e della qualita dell’aria conArduino” (ridotto in “Stazione meteo”) e un progetto realizzato da un teamdi ragazzi dell’Istituto Salesiano G. Bearzi di Udine grazie al supporto fornitodall’articolazione di Robotica del medesimo istituto.

In questo capitolo si prenderanno in esame il contesto del progetto nellarealta dell’informazione digitale, oltre che una visione d’insieme del progettonella sua interezza.

2.1 Contesto

Il progetto realizzato viene predisposto in un ambiente connesso alle in-formazioni remote: i dati di rilevazione vengono inizialmente salvati nellamemoria locale del dispositivo, in seguito e possibile esportare tali dati inun interfaccia web disponibile ovunque per essere in grado di visualizzarliin forma grafica. In definitiva e possibile associare il progetto nel mondodell’Internet degli oggetti.

IoT (Internet of Things) e definibile come evoluzione dell’uso della Rete2:i dispositivi diventano maggiormente riconoscibili e intelligenti poiche sonocollegati in rete, come Internet.

I domini applicativi di tale tecnologia spiccano dalla robotica e domoticafino a operare in ambiti biomedici o nelle Smart City.

Un aspetto importante da tener conto nello sviluppo di dispositivi IoT ela sicurezza. Si sente parlare molto spesso di furto di dati (anche sensibili,come le informazioni mediche) e la sicurezza e ancora considerata un opzio-ne. Nello sviluppo della Stazione meteo si e preso molto in considerazionel’aspetto sicurezza implementando tecnologie di crittografia e controllo ac-cessi sia su RasperryPI (il microcomputer che si occupa del salvataggio datiin locale) che su sito web con la registrazione del tentativo di accesso (anchefallito) e le informazioni di rintracciamento quali IP, browser, data e ora,ecc...

In ogni caso, la Stazione meteo non e un esempio di dispositivo contenen-te informazioni sensibili, tuttavia e sempre importante tutelare la sicurezzae l’integrita dei dati.

2.2 Progetto

Il progetto e stato sviluppato da un team di 6 ragazzi frequentanti l’ITIG. Bearzi nelle articolazioni Informatico e Meccatronico chiamato “Ardui-no@Bearzi”. E stato commissionato dal prof. Calderini, docente di scienzematematiche, chimiche, fisiche e naturali della scuola secondaria di primogrado e responsabile del progetto di robotica dell’istituto.

2https://it.wikipedia.org/wiki/Internet delle cose

3

Le tempistiche possono sembrare eccessive ma e necessario tenere contoche il lavoro e stato effettuato nel periodo extrascolastico: da fine estate2015 a inizio estate 2016.

Si ritiene, inoltre, opportuno comunicare che il progetto ha subito variridimensionamenti sia nella parte Arduino per quanto riguarda i sensori dainstallare che su sito web (rimozione di alcune caratteristiche aggiuntive).

2.3 Struttura dell’elaborato

La tesina vertera principalmente sugli aspetti tecnici, elaborativi e produtti-vi del sito web della Stazione meteo. Nel prossimo capitolo, verra presentatoin dettaglio l’intero progetto per poi passare, nei capitoli successivi, a presen-tare soltanto la parte web. In particolare su quest’ultimo verra discusso lafase di brainstorming e le tecniche di progettazione quali wireframe, mappeconcettuali, schema entita-relazioni.

Infine verranno presentati tutti gli strumenti utilizzati per produrre ilsoftware web e i servizi necessari per il mantenimento del codice (serverweb, continuous integration e bug tracker).

4

3 Descrizione del progetto

La Stazione meteo e un prodotto che unisce tutte le conoscenze di infor-matica dal basso livello elettrico dei pin di Arduino fino ai livelli di PHPe le tecnologie web. E un progetto che ha comportato un’ elevata ricercapersonale dei materiali di apprendimento e il relativo utilizzo. Il tutto vieneunito alla gestione del gruppo di lavoro, ovvero la suddivisione dei compi-ti, la comunicazione tra i settori operativi e la ricerca di uno standard digruppo.

3.1 Componenti

Si puo suddividere il progetto principalmente in due macro-settori:

• Stazione di monitoraggio;

• Sito web di visualizzazione.

Il primo utilizza due componenti indispensabili per il funzionamento dellaStazione Meteo:

• Arduino3: un microcontrollore, e un dispositivo a basso livello e ge-stisce la comunicazione ai sensori installati sotto forma di pin analo-gici e digitali. Il suo compito e fornire corrente ai sensori, gestire lalettura dei sensori e decodificare il dato ottenuto tramite operazionimatematiche;

• RaspberryPI4 e un microcomputer con il preciso compito di comu-nicare con Arduino e ricevere i dati meteorologici, ottenere i dati diposizione GPS e esportarli su chiavetta USB (quando inserita).

La seconda fase dell’elaborato richiede la progettazione del sito web di vi-sualizzazione dei dati. L’unico componente fisico necessario e il server chepermette di generare le pagine web dinamiche.

3.2 Competenze

Lo sviluppo della Stazione Meteo ha comportato un alto tasso di ricercaprima di poter sviluppare il codice per il funzionamento di un qualsiasicomponente della Stazione di monitoraggio. Ad esempio per Arduino e ne-cessario conoscere un dialetto del linguaggio C dedicato al microcontrollorein questione utilizzando un IDE specializzato. Inoltre per ciascun sensore estato necessario cercare la documentazione su Internet che pero non sempre

3https://www.arduino.cc4https://www.raspberrypi.org

5

e stata reperibile. In questo caso e necessario affidarsi all’ingegno perso-nale per poter trovare il modo di comunicare correttamente con il sensoreanalizzato.

Con RaspberryPI la situazione cambia ma non si semplifica: e sostan-zialmente un sistema operativo Linux contenuto in una scheda microSD.Le sfide sono state due: cercare il modo di comunicare con Arduino trami-te porta USB ed esportare i dati su chiavetta USB quando inserita. Dalpunto di vista dei linguaggi di programmazione e stato necessario conosce-re Bash, C++ e Python per quanto riguarda il lato Arduino-RaspberryPIpoiche per garantire la massima efficienza di esecuzione e necessario utiliz-zare linguaggi di medio-basso livello mentre per gli script di Linux Bash e lasoluzione migliore. Lo sviluppo del sito invece richiede la conoscenze dellaprogrammazione web e dabatase.

Per il completamento del progetto sono state richieste le capacita diutilizzo di software per il disegno tridimensionale utilizzando “Inventor” alfine di stampare i pezzi necessari per racchiudere tutti i componenti dellaStazione meteo.

3.3 Gestione e organizzazione del progetto

Si e provato a pianificare le tempistiche del progetto utilizzando alcune delletecniche del PMBOK secondo le previsioni e i vincoli temporali che ogniattivita comporta.

Una versione iniziale della pianificazione e stata stilata agli albori delprogetto identificandone le attivita principali, ovvero l’organizzazione deiprodotti ricevuti, il completamento dello sviluppo di Arduino e Raspberry,la messa in opera del sito web e infine l’unificazione di tutti i componentihardware.

Durante l’esecuzione del progetto e stato necessario aggiornare la piani-ficazione riducendo la durata di alcune attivita che sono state completatein anticipo e aumentandone la durata di altre a causa della difficolta direalizzazione, molteplici sessioni di ricerca e cambiamenti di progettazione.Questi cambiamenti, rispetto a quanto previsto nella fase iniziale, hannocausato uno slittamento delle attivita successive.

Le attivita che hanno causato ritardi sono state principalmente la fase disviluppo del RaspberryPI, il test e aggiunte del sito web dovute a modificherealizzate in corso d’opera e la stampa tridimensionale che ha dimostra-to complessita tali da rallentare il processo di brainstorming del disegno erelative revisioni assieme ai tentativi di stampa giudicati insoddisfacenti.

Le dipendenze delle attivita sono tutte FS, ovvero Finish to Start: l’at-tivita attuale puo iniziare se quella precedente e terminata.

Si sono impiegate le date “al piu presto” per tutte le attivita ad eccezionedella Revisione elettrica dello Sviluppo Arduino che e “al piu tardi”

6

perche essendo una revisione va fatta verso il termine della Comunicazionesensori.

Il diagramma di Gantt risultante e riportato in Figura 2 ed e stato rea-lizzato usando l’applicazione ProjectLibre5, l’alternativa open-source diMS Project6. Si noti che il programma utilizzato per visualizzare il dia-gramma e MS Project: e stato necessario fruirne a causa delle limitazioni diesportazione dei dati in forma grafica presenti su ProjectLibre.

Inoltre si propone anche la versione finale delle attivita in seguito aicambiamenti necessari riportata in Tabella 1.

Figura 2: Diagramma di GANTT (pianificazione iniziale)

3.4 Utilizzo

A grandi linee l’utilizzo della Stazione Meteo deve seguire i seguenti passi:

1. Accensione della Stazione Meteo;

2. posizionamento della Stazione Meteo in un luogo a piacere;

3. la Stazione sta monitorando l’ambiente salvandoli nella sua memorialocale. Ha inoltre ottenuto la posizione GPS;

4. al termine inserire una chiavetta USB nella Stazione Meteo e attendereil caricamento (viene indicato tramite appositi led);

5. spegnere la Stazione Meteo e inserire la chiavetta su un computer;

5http://www.projectlibre.org6https://products.office.com/it-it/project/project-and-portfolio-management-software

7

ID Nome Durata Avvio Termine Predecessore

1 Catalogazione prodotti 4 giorni 10/08/15 14.00 13/08/15 22.002 Allocazione prodotti 1 giorno 10/08/15 14.00 10/08/15 22.003 Test dei sensori 3 giorni 11/08/15 14.00 13/08/15 22.00 2

4 Sviluppo Arduino 52 giorni 14/08/15 14.00 04/10/15 22.005 Ricerca 15 giorni 14/08/15 14.00 28/08/15 22.00 36 Installazione sensori 7 giorni 29/08/15 14.00 04/09/15 22.00 57 Comunicazione sensori 30 giorni 05/09/15 14.00 04/10/15 22.00 68 Revisione elettrica 5 giorni 30/09/15 14.00 04/10/15 22.00 6

9 Sviluppo RaspberryPI 195 giorni 11/08/15 14.00 21/02/16 22.0010 Ricerca 60 giorni 11/08/15 14.00 09/10/15 22.00 211 GPS 75 giorni 10/10/15 14.00 23/12/15 22.00 1012 Supporto USB 75 giorni 10/10/15 14.00 23/12/15 22.00 1013 Scripts 60 giorni 24/12/15 14.00 21/02/16 22.00 11;12

14 Sito web 205 giorni 02/11/15 14.00 24/05/16 22.0015 Server web 1 giorno 02/11/15 14.00 02/11/15 22.0016 Configurazione Laravel 1 giorno 03/11/15 14.00 03/11/15 22.00 1517 Definizione MVC 1 giorno 04/11/15 14.00 04/11/15 22.00 1618 Definizione DBMS 30 giorni 04/11/15 14.00 03/12/15 22.00 1619 Test e aggiunte 173 giorni 04/12/15 14.00 24/05/16 22.00 17;18

20 Unificazione componenti 102 giorni 20/02/16 14.00 31/05/16 22.0021 Lettura dati Arduino-RaspberryPI 18 giorni 22/02/16 14.00 10/03/16 22.00 8;1322 Sincronizzazione dati Stazione meteo/Sito web 1 giorno 25/05/16 14.00 25/05/16 22.00 19;2123 Stampa 3D 100 giorni 20/02/16 14.00 29/05/16 22.00 224 Assemblaggio finale 1 giorno 30/05/16 14.00 30/05/16 22.00 8;2325 Test complessivo 1 giorno 31/05/16 14.00 31/05/16 22.00 24

Tabella 1: Tabella delle attivita con dati aggiornati a fine progetto

6. collegarsi al sito web del progetto e recarsi alla pagina di caricamentodati;

7. effettuare l’upload del file contenuto nella chiavetta nel sito e attenderel’avvenuto caricamento;

8. visualizzare sul sito i grafici selezionando opportunamente gli intervallidi date e/o paese nei filtri di ricerca.

8

4 Progettazione

Prima di iniziare lo sviluppo delle pagine web e stato necessario prepararetutte le risorse necessarie per la progettazione del database, per il compor-tamento delle pagine e la loro visualizzazione. Tramite i wireframe e lerotte viene permesso al team di sviluppo di interpretare correttamente larealizzazione del sito e capire nell’immediato come strutturarli nel linguaggiodel framework. Per il database e invece necessario fornire uno schema de-nominato entita-relazioni con i dettagli che danno una spiegazione chiaradi come devono essere impiegati.

4.1 Brain-storming

La necessita di base era quella di ottenere un sito web semplice da svilupparee da usare. Deve essere composto da 4 aree chiaramente specificate nellabarra in testa ad ogni pagina del sito:

• Visualizza: permette di ottenere i grafici per ogni sensore installato,ha inoltre la possibilita di filtrare i dati per giorni e paese;

• Carica: e la pagina dedicata per il caricamento del file di dati presentesulla chiavetta;

• Configura: permette la creazione di uno speciale file di configura-zione che e possibile poi scaricare e inserire all’interno della chiavet-ta. La Stazione meteo e in grado di riconoscere il file ed effettuarel’esportazione dei soli dati richiesti;

• Amministra: tramite autenticazione via password consente di visua-lizzare singolarmente le rilevazioni di dati ed eliminarle, cambiare lapassword di amministratore e visualizzare lo storico degli accessi.

4.2 Mappe concettuali

Il sito, essendo alla prima versione, appare privo di fronzoli. Tutte le pa-gine hanno uno scopo dedicato come descritto nella fase di progettazione enon hanno riferimenti precisi per le altre pagine, a parte la barra superiore.Dalla homepage del sito e quindi possibile scegliere una delle quattro sezioni(Visualizza, Carica, Configura, Amministra) senza ulteriori pagine interme-die, poiche tale complessita non era necessaria ne richiesta. La Figura 3permette di avere una visione generale del sito.

4.3 Wireframe

Presupponendo che uno degli obiettivi del sito e la semplicita d’uso, i wirefra-me possono sembrare molto scarni a primo impatto, ma comunque fornisconotutte le informazioni che l’utente si aspetta.

9

Figura 3: Mappa concettuale del sito

Si propongono due wireframe, i piu importanti del progetto: la paginaVisualizza e l’Amministrazione.

4.3.1 Visualizza

La pagina dovra visualizzare i grafici per ciascun sensore permettendo all’u-tente di filtrare i dati per giorni e paese. Nella barra superiore deve essereevidenziata l’area Visualizza (Figura 4).

4.3.2 Amministrazione

La pagina Amministrazione ha una struttura leggermente piu complessarispetto alla precedente per il fatto che l’organizzazione delle pagine ha unaspeciale configurazione ad eredita rispetto al modello base (Figura 5).

4.3.3 Ereditarieta

Si e data particolare attenzione al concetto di ereditarieta poiche evita laridondanza di codice che potrebbe risultare nella fase successiva di realizza-zione.

Entrambe le pagine proposte devono quindi ereditare dal modello baseche e possibile dedurre dai due wireframe precedenti come esemplificato dallaFigura 6.

10

Figura 4: Wireframe Visualizza

Figura 5: Wireframe Amministra

11

Figura 6: Wireframe di base

In particolare per l’area Amministrazione e necessario strutturare ulte-riormente per evitare ripetizione di codice. Il wireframe della Figura 7 estato quindi disegnato tenendo a mente che la pagina eredita dal wirefra-me di base e ci aggiunge alcune personalizzazioni grafiche aprendo lo spazioa ben due aree da sovrascrivere che in seguito e possibile riempire con icontenuti.

Figura 7: Wireframe di base per Amministra

12

4.4 Schema Entita-Relazioni

Nella base dati e necessario memorizzare tutti i dati di rilevamento rice-vuti assieme alle informazioni del GPS (dove deve essere dedotto il pae-se), le informazioni dell’amministratore (password) e il log degli accessiamministrativi. In pratica lo schema risultante e quello della Figura 8.

Figura 8: Schema ER

L’entita admin info conterra tutte le informazioni di sicurezza (al mo-mento solo la password). admin log memorizzera tutti gli accessi monito-rando la data di accesso, l’IP, l’OS e il tipo di browser. data organizzeratutte le informazioni ricevute dalla Stazione meteo comprese le coordinategeografiche. Oltre a cio, la relazione data-data survey places permetteradi collegare la singola sessione di rilevazione al paese corrispondente. Si noti,quindi, che si possiede sia il paese dedotto dalle coordinate che le coordinatestesse. Si e deciso di mantenere entrambe le informazioni nel caso sia neces-sario effettuare ulteriori calcoli, dato che le coordinate sono piu precise delpaese generico.

13

5 Realizzazione

Dopo aver svolto le prassi di progettazione e possibile iniziare a sviluppa-re il codice vero e proprio. Nei paragrafi successivi verra mostrato comeeffettivamente e stato realizzato quanto era previsto e verranno suddivisisecondo la tecnica MVC (l’acronimo viene spiegato nella sezione Frameworkdi Infrastruttura del sito).

5.1 Scelta del framework

La fase di partenza e scegliere come strutturare il sito web. Anziche partireda zero e stato deciso di utilizzare un framework php perche esso consentedi “non reinventare la ruota” offrendo strumenti gia sviluppati e testati,quindi sicuramente funzionanti e sicuri. Inoltre semplifica la realizzazionesuddividendo il progetto nello schema MVC.

Il team di sviluppo dell’ Arduino@Bearzi in passato ha avuto modo diconoscere tramite stage e ricerca personale il mondo dei framework php percreare applicazioni web dinamiche e la scelta era tra:

• Symfony7: conosciuto durante stage estivi nell’Istituto Bearzi. Ilgestionale didattico dell’omonimo istituto ne fa largo uso;

• Silex8: una versione semplificata di Symfony;

• Laravel9: una fork di Symfony dove promette maggior semplicita conmeno sforzo di scrittura codice.

La decisione inizialmente era favorevole per Silex dato che in passato il teamaveva gia avuto modo di realizzare progetti extrascolastici, tuttavia lo si etralasciato per la troppa semplicita.

Ci si e allontanati anche da Symfony per la elevata difficolta di utilizzo. Sie deciso quindi di utilizzare Laravel poiche era gia stato studiato e utilizzatocon successo negli stage.

5.2 Modello

Il framework adottato possiede molte utilita per la creazione, gestione, ag-giornamento delle tabelle di database. In particolare per la creazione enecessario utilizzare specifici metodi. A seguire l’implementazione per lacreazione della tabella data:

//[...]public function up()

{Schema :: create(’data’, function (Blueprint $table) {

7http://symfony.com8http://silex.sensiolabs.org9https://laravel.com

14

$table ->increments(’id’);$table ->double(’temperature ’, 10, 3); // 10 digits in total

and 3 after the decimal point$table ->double(’air_humidity ’, 10, 3);$table ->double(’pressure ’, 10, 3);$table ->double(’air_quality ’, 10, 3);$table ->double(’lighting ’, 10, 3);$table ->double(’soil_moisture ’, 10, 3);$table ->integer(’latitude_degrees ’);$table ->double(’latitude_decimal ’, 10, 5);$table ->char(’latitude_compass ’, 1);$table ->integer(’longitude_degrees ’);$table ->double(’longitude_decimal ’, 10, 5);$table ->char(’longitude_compass ’, 1);$table ->integer(’location_id ’)->unsigned ();$table ->foreign(’location_id ’)->references(’id’)->on(’

data_survey_places ’)->onDelete(’cascade ’);$table ->timestamp(’station_created ’);$table ->date(’updated_at ’)->nullable ();

});}

//[...]

Una volta eseguiti tutti i file di creazione delle tabelle il risultato saracome nella Figura 9. Laravel richiede inoltre la creazione di ulteriori campi(“updated at”) e automaticamente genera la tabella “migrations” pertenere traccia delle sessioni di esportazione delle tabelle nel database.

Figura 9: Il risultato finale ottenuto

Il richiamo dei dati da database su Laravel non utilizza la nuda anno-tazione SQL bensı avviene tramite oggetti come nell’esempio seguente che

15

permette la ricezione dei dati di rilevamento visualizzati nella pagina diamministrazione:

//[...]$data = Data::take (30)

->select(’data.id␣as␣dataId ’, ’data.*’, ’data_survey_places .*’)

->orderBy("station_created", "desc")->join(’data_survey_places ’, ’data_survey_places.id’, ’=’, ’

data.location_id ’)->get();

//[...]

5.3 Vista

Il motore di template per implementare la struttura progettata e Blade10

con un suo specifico linguaggio. A seguire viene mostrato il codice per iltemplate di base e dell’area Amministrativa:

<!DOCTYPE html ><html lang="it"><head >// [...]

<title >Stazione Meteo ˜ @yield(’title’)</title >// [...]

<link href="{{␣asset(’css/bootstrap.min.css ’)␣}}" rel="stylesheet"><link rel="stylesheet" href="{{␣asset(’css/font -awesome.min.css ’)␣}}">@yield(’contentCss ’)

// [...]</head ><body ><nav class="navbar␣navbar -default">

<div class="container -fluid"><div class="navbar -header">

<button type="button" class="navbar -toggle␣collapsed" data -toggle="collapse" aria -expanded="false"><span class="sr-only">Interuttore navigazione </span ><span class="icon -bar"></span ><span class="icon -bar"></span ><span class="icon -bar"></span >

</button ><a class="navbar -brand" href="{{␣route(’index ’)␣}}"><span

class="glyphicon␣glyphicon -education" aria -hidden="true"></span >Stazione Meteo </a>

</div >

<div class="collapse␣navbar -collapse"><ul class="nav␣navbar -nav">

<li @if(Route::is(’statistics ::*’))class="active"@endif ><a href="{{␣route(’statistics ::all ’)␣}}"><

span class="glyphicon␣glyphicon -search" aria -hidden="true"></span >Visualizza </a>

</li></ul>

</div ><!-- /.navbar -collapse -->

</div ><!-- /.container -fluid -->

10https://laravel.com/docs/5.1/blade

16

</nav >

<div class="container">@yield(’content ’)

</div >// [...]

Il codice di base e valido per tutte le pagine del progetto e contiene alcunisegnaposti identificati con “@yield” seguito dal nome dato. Per necessitasono stati creati segnaposti per aggiunte di CSS e Javascript che possonoessere aggiunti ai template figli.

A seguire invece il template dell’area Amministrativa:

@extends(’base.page’)

@section(’content ’)<h2>Pannello amministrativo della Stazione Meteo </h2>

//[...]

<div class="row"><div class="col -md -3">

<div class="list -group"><a href="@if(Route::is(’admin::hub ’))#@else␣{{␣route(’

admin::hub ’)␣}}␣@endif␣" class="list -group -item␣@if(Route::is(’admin::hub ’))␣active␣@endif␣"><span class="glyphicon␣glyphicon -stats" aria -hidden="

true"></span > Hub - Dashboard</a>//[...]

</div >

@yield(’leftRow ’)</div >

<div class="col -md -9">@yield(’innerContent ’)

</div ></div >

@endsection

Sono state inoltre implementate tecniche per garantire il facile utiliz-zo come ad esempio il focus della pagina attuale (tramite “active”) e laconseguente disattivazione del link con “#”.

5.3.1 Risultati

Si propongono ora alcuni screenshot del risultato finale ottenuto dagli schemiprecedentemente mostrati: Visualizza in Figura 10, Amministrazione(dati) in Figura 11 e Amministrazione (sommario) in Figura 12.

17

Figura 10: Il risultato finale della pagina Visualizza

Figura 11: La soluzione proposta per la pagina Amministra (in particolarenella pagina della gestione dei dati)

18

Figura 12: Un ulteriore esempio che mostra una pagina appartenente all’areaAmministrazione ma che in fondo utilizza lo stesso template padre

5.4 Controllore

La stesura delle rotte su Laravel e molto semplice e leggibile da realizzare.Anche in questo caso il framework aiuta lo sviluppatore a creare rotte

che ereditano da un modello padre:

Route::group([’prefix ’ => ’admin’, ’as’ => ’admin::’], function () {Route::get(’/’, ’AdminController@index ’)->name(’index’);Route::get(’login’, ’AdminController@login ’)->name(’login’);Route::post(’login’, ’AdminController@loginPost ’)->name(’loginPost ’);Route::get(’logout ’, ’AdminController@logout ’)->name(’logout ’);Route::get(’hub’, ’AdminController@hub ’)->name(’hub’);Route::get(’data/’, ’AdminController@data ’)->name(’data’);Route::get(’dataAjax/’, ’AdminController@dataAjax ’)->name(’dataAjax ’);Route::post(’data/remove/’, ’AdminController@dataRemove ’)->name(’

dataRemove ’);Route::get(’data/remove/fast/{ timestamp}’, ’

AdminController@dataRemoveFast ’)->name(’dataRemoveFast ’);Route::post(’data/remove/date’, ’AdminController@dataRemoveDate ’)->

name(’dataRemoveDate ’);Route::post(’data/remove/location ’, ’

AdminController@dataRemoveLocation ’)->name(’dataRemoveLocation ’);Route::get(’logs’, ’AdminController@logs ’)->name(’logs’);Route::get(’change -password ’, ’AdminController@changePassword ’)->name(

’changePassword ’);Route::post(’change -password ’, ’AdminController@changePasswordPost ’)->

name(’changePasswordPost ’);Route::get(’keys’, ’AdminController@keys ’)->name(’keys’);

});

Si definisce il gruppo padre (in questo caso “admin”) e si impostano lesingole pagine. Ad esempio per raggiungere la pagina “change-password”

19

si utilizza il metodo GET con URL https://meteo.marstefo.ovh/admin/change-password .

Laravel permette infine di visualizzare il sommario delle pagine createtramite un comando da terminale “php artisan route:list”. Il risultato econsultabile nella Figura 13.

Figura 13: L’output del comando artisan per l’operazione route:list

Ogni pagina ha il suo specifico metodo HTTP, l’URI e il nome facoltativodato (utile in seguito nel codice per creare link di reindirizzamento utilizzan-do il nome anziche una stringa “anonima” e fissa). L’Action e la funzioneda chiamare per eseguire la richiesta e Middleware e una caratteristica chepermette alle pagine selezionate di passare attraverso un filtro. In questocaso adminarea richiede che l’utente sia autenticato come amministratoreprima di avere accesso alle pagine.

5.5 Scelte tecniche e stilistiche

Il sito web sviluppato possiede alcune tecnologie che sarebbe stato complessoimplementare in loco. Inoltre una legge importante del programmatore equella di non reinventare la ruota: con una semplice ricerca sul web epossibile trovare la soluzione del problema richiesto.

Alcuni siti risultati fondamentali durante lo sviluppo sono stati:

• Stack Overflow11: sito stile Q&A in cui si possono porre domanderiguardo a vasti argomenti di programmazione;

• Github12: sito di hosting per progetti software: fonte principale

11http://stackoverflow.com12https://github.com

20

dei componenti aggiuntivi adottati nella realizzazione del progettoStazione meteo.

I componenti terzi che sono stati adoperati sono documentati di seguito:

• jQuery13: libreria Javascript per semplificare lo sviluppo di applica-zioni web dinamiche;

• DropzoneJS14: libreria Javascript per il supporto upload di file;

• Chart.js15: libreria Javascript per visualizzare grafici;

• Pikaday16: libreria di supporto per campi input di date;

• Moment.js17: dipendenza di Pikaday per la manipolazione di date.

Per quanto riguarda la codifica grafica si e deciso di non programmare lostile da puro CSS a causa delle insufficienti capacita del team di realizzaregradevoli pagine. Per tale motivo si e utilizzato Bootstrap18, un frameworkHTML, CSS, JS per progettazione siti web responsive.

Il sito della Stazione meteo utilizza un tema fornito da Bootswatch19

chiamato Superhero.

13https://jquery.org14http://www.dropzonejs.com15http://www.chartjs.org16https://github.com/dbushell/Pikaday17http://momentjs.com18http://getbootstrap.com19https://bootswatch.com/superhero/

21

6 Infrastruttura del sito

Oltre al codice vero e proprio lo sviluppo di un sito web richiede la presenzadi alcuni elementi essenziali, a titolo di esempio un server LAMP e dialtri elementi facoltativi, ma utili per garantire un corretto svolgimento delprogetto.

Si presentera anche l’importante software di controllo di versione distri-buito git.

6.1 Programmi di sviluppo

L’IDE di riferimento utilizzato e PhpStorm, gradito soprattutto per lagestione chiara e pulita di git. Inoltre possiede potenti strumenti di gestionedel DBMS e supporto di framework php oltre all’intelligente assistenza nelcodice.

La verifica del corretto funzionamento ha richiesto il test su alcuni bro-wser (Firefox, Chrome, Safari) da diverse piattaforme (Windows, OS X,Ubuntu).

6.2 Git

Un componente importante da adoperare nei progetti di gruppo e il sistemadi versionamento del codice. Ogni utente sviluppatore ha avuto a disposizio-ne un branch personale per modificare le sorgenti ai fini del completamentodel sito. A intervalli predeterminati le versioni di codice sviluppate da ognisingolo ragazzo del team venivano aggregate alla versione finale.

Il software client utilizzato e stato SourceTree20 utilizzando le risorse diBitBucket21, un sito di hosting di progetti che utilizzano Git e Mercurial.

6.3 Framework

Laravel e un potente framework php che permette di massimizzare la pro-duttivita delle sessioni di sviluppo durante la progettazione di un sito webdinamico utilizzando l’architettura MVC, Modello-Vista-Controllo. I com-ponenti di base da tenere in considerazione sono la sezione delle rotte, i con-trollori (e la porzione di codice che genera la risposta alla richiesta) seguitedalle viste (i Blade). La comunicazione al DBMS avviene con Eloquent,l’ORM di Laravel (Object-Relational-Mapping).

Le fonti di riferimento per la documentazione sono il sito ufficiale diLaravel22 o la sua equivalente italiana Laravel Italia23.

20https://www.sourcetreeapp.com21https://bitbucket.org22https://laravel.com23http://laravel-italia.it

22

Figura 14: Interfaccia di SourceTree

6.4 Server Web

La destinazione del codice (del branch master di git) e un server dedicatocon Apache, PHP e MySQL installati. L’indirizzo del progetto e https://meteo.marstefo.ovh.

L’accesso al server avviene tramite SSH e per il trasferimento di file sie usato SFTP, un’ alternativa sicura a FTP utilizzando il gia installatodemone SSH. In genere non e mai stato necessario effettuare operazioni ma-nuali per l’aggiornamento del codice “finale” del sito dato che tale compitoera demandato al servizio di integrazione continua.

6.5 Integrazione continua

La pratica di integrazione continua e applicabile in contesti in cui lo svi-luppo del software avviene tramite sistemi di versionamento. Nel progettoStazione meteo ad ogni commit, ma soprattutto ad ogni merge, automa-ticamente veniva aggiornato il codice nel server di produzione. Lo stru-mento impiegato e stato Jenkins24 installato su un sottodominio dedicato:https://ci.marstefo.ovh.

L’utilizzo di questo software ha permesso di velocizzare il processo ditest del codice nell’ambiente di produzione e di avere automaticamente lanotifica dell’esito. Infatti se l’esito era negativo Jenkins avvisava l’utenteamministratore tramite email con i dettagli significativi.

24https://jenkins.io

23

6.6 Bug Tracker

Durante il lavoro di gruppo e emersa la necessita di dover comunicare unproblema o un appunto ad un collega, ma non esistevano tipologie di avvisoadatte. Si poteva usare la posta elettronica o metodi cartacei, ma non sigarantiva l’ufficialita.

Per questo motivo e nato il Bug Tracker ovvero il sistema di traccia-mento dei bug. L’utente autenticato poteva inviare una notifica di errorenel codice (o miglioramento o richiesta progettazione) ad uno o piu specificisviluppatori con il vantaggio dell’invio di commenti, file, gravita e prio-rita. L’indirizzo di tale servizio e installato su http://bug.marstefo.ovhutilizzando il software Flyspray25.

Figura 15: La pagina dell’elenco dei task archiviati

25http://www.flyspray.org

24

7 Conclusione

Il sito web e stato concluso con successo a fine maggio 2016 e ha consentitoagli studenti sviluppatori di espandere maggiormente le proprie competenzenel vasto mondo del web. Ha permesso, soprattutto, di prendere maggiorconfidenza con i framework php e iniziare a tastare in prima persona l’acerbosistema di versionamento git con buoni risultati.

7.1 Obiettivi

Dal punto di vista degli obiettivi presi all’inizio si e riconosciuto il ridimen-sionamento degli stessi a causa di forze maggiori quali ritardi nel completa-mento dell’attivita o per la complessita richiesta.

Infatti, affrontando il tema del sito web, e stato necessario ridimensionareo rimuovere alcune caratteristiche che dovevano essere implementate: unimportante elemento che purtroppo e stato rimosso e il sistema a chiaviper l’upload dei dati. Sostanzialmente l’amministratore poteva generareuna chiave (ovvero una sorta di password) con un certo limite di tempo e diutilizzo da consegnare ad un utente incaricato di effettuare l’upload del file dirilevamenti forniti dalla Stazione meteo. Questo poteva rendere piu sempliceil compito dell’amministratore nel dare l’accesso solo al caricamento dei datiper utenti “terzi”.

Per quanto riguarda la parte di Arduino e RaspberryPI si e conclusacon successo in tutte le sue parti. Deve infatti rilevare i dati con i sensoriinstallati su Arduino e inviarli al RaspberryPI, inoltre deve ottenere le in-formazioni di posizione. Quest’ultimo si deve occupare di salvare i dati nellamemoria locale ed esportare, nel caso sia inserita una chiavetta USB, i datiin un certo formato e metodo.

Il principale obiettivo e punto di forza del progetto della Stazione me-teo e l’essere portatile. Si vuole distinguere dalle normali stazioni meteofisse poiche vincolate ad una posizione. L’unico svantaggio e la precisione:non essendo infatti fissa non puo godere di particolari regolazioni dedicate,tuttavia il target della Stazione Meteo e casalingo/intrattenimento.

7.2 Idee e sviluppi futuri

Un possibile miglioramento e la pagina di configurazione dove ora e permessosoltanto di filtrare per un determinato range di data. Il passo successivoauspicabile e quello di realizzare maggiori opzioni, come ad esempio lospegnimento automatico o la frequenza di rilevamento della Stazione.

Ci si e resi conto che il sito web e stato esternalizzato su un serviziodefinibile “terzo” e nell’ottica del IoT non e la scelta migliore da seguire,pertanto un’immediata idea proposta dal team e stata quella di dotare la

25

Stazione meteo di Wi-Fi per l’amministrazione e visualizzazione dei dati. Intale modo tutta l’infrastruttura viene centralizzata e unificata.

Il problema principale dell’attuale versione della Stazione meteo e l’one-re dell’utente di effettuare una lunga procedura per il caricamento dei dati.Una possibile futura versione risolvera questo procedura sincronizzando au-tomaticamente i grafici in tempo reale grazie alla centralizzazione descrittaprecedentemente.

7.3 Iniziative

Il progetto Stazione meteo ha avuto la possibilita di partecipare al TriesteMini Maker Faire26 (TSMMF) presso il Campus ICTP27 a Miramare il 21e 22 maggio 2016. E stato fornito uno stand dedicato per la presentazione econsultazione del progetto per ospiti e maker interessati.

Inoltre l’istituto Bearzi ha stampato un poster che ritrae i momenti sa-lienti del lavoro del team per essere mostrato sia al TSMMF che all’internodella struttura stessa.

Il progetto e stato presentato agli alunni dell’ITI e CFP in occasionedella festa di fine anno svoltasi il 24 maggio 2016.

7.4 Ringraziamenti

E doveroso indicare tutte le figure coinvolte nel progetto della Stazionemeteo, in primis il team Arduino@Bearzi composto da 6 persone:

• Stefano Slobodiuk: responsabile di progetto e sviluppatore sito web,codifica modulo GPS su Raspberry;

• Francesco De Martino: vice-responsabile di progetto, sviluppatoreweb, Arduino e Raspberry;

• Elias Della Schiava: sistemista hardware Stazione meteo;

• Damiano Iod: stampa 3D;

• Marco Odorico: sistemista hardware Stazione meteo;

• Alessandro Paronuzzi: documentazione.

Si ringrazia inoltre il prof. Calderini, la preside Radicchi, il prof.Zen (per la gentile concessione della licenza PhpStorm), il prof. Vassenae il prof. Lattanzi docenti di indirizzo Informatico per l’assistenza fornitadurante la progettazione e realizzazione della Stazione meteo. Infine ungentile ringraziamento anche alla prof.ssa Bortolotti per la revisione dellapresente tesi.

26http://makerfairetrieste.it27http://www.ictp.it

26

Figura 16: Il poster della Stazione meteo

27