Capitolo 3: Tecnologie utilizzate

10

Capitolo 3: Tecnologie utilizzate

L’applicativo web è stato sviluppato in linguaggio PHP [5], facendo uso di un framework chiamato Laravel [6]. Per la gestione del database è stato usato PostgreSQL, un open-source object-relational database, e la sua estensione spaziale chiamata PostGIS perché fornisce il supporto per gli oggetti geografici, come le coordinate geografiche, consentendo di eseguire location query in SQL. Invece l’interfaccia grafica, è stata creata in HTML, CSS e Javascript [7], utilizzando la libreria open-source Leaflet.

Fare una descrizione dettagliata di tutte le funzionalità e i concetti di queste tecnologie va oltre lo scopo di questa relazione, comunque si procede a descrivere gli aspetti più inerenti al tirocinio fornendo qualche esempio.

3.1 Laravel e Eloquent

Laravel è un framework PHP open-source creato nel 2011 da Taylor Otwell e giunto, al momento in cui si scrive, alla versione 5.7. Scopo del framework è facilitare e strutturare la programmazione web, oltre a fornire un comodo sistema di interazione con le basi di dati, è orientato alla programmazione ad oggetti e al noto pattern architetturale Model-View-Controller [8]. E’ sviluppato a partire dal più complesso Symfony [9], infatti Laravel lo utilizza come componente per sfruttare alcune sue classi. Nella descrizione si è preferito e si preferirà utilizzare i nomi dei componenti riportati nella documentazione originale a scopo di non introdurre ambiguità con eventuali traduzioni inesatte.

Il codice di business dell’applicazione è situato nelle classi Controller; esse ereditano tipicamente dalla classe base di Laravel chiamata Controller, sebbene ciò non sia necessario, e contengono una serie di metodi atti a gestire le richieste dei client. L’idea è che uno specifico metodo di un controller viene eseguito ogni qualvolta il server riceve una determinata richiesta. Questo viene fatto utilizzando il Routing: sono presenti nella gerarchia delle cartelle uno o più file PHP che contengono le Route, ovvero i percorsi, dell’applicazione. All’interno di questi file è riportata la corrispondenza fra URL e metodi dei Controller.

11

return 'Hello World';

});

dove il metodo get che, come suggerisce il nome, effettua richieste HTTP [10] di tipo GET e accetta come parametri una stringa, che è il nome del percorso, e una funzione Closure. Qualsiasi richiesta HTTP con metodo GET che venga fatta all’URL relativo /foo (quindi, se l’indirizzo base del server fosse http://www.example.com, l’indirizzo completo sarebbe

http://www.example.com/foo), risulterà nell’esecuzione di questa Closure.

Invece di definire tutta la logica di gestione delle richieste come Closure nei file di percorso, è possibile organizzare questo comportamento utilizzando le classi Controller perchè possono raggruppare la logica di gestione delle richieste correlate in una singola classe.

Ad esempio, nel progetto è stata creata nel file di Routing web.php questo percorso:

Route:: get('/map', 'MapController@queries');

con la quale s’invoca il metodo queries della classe MapController che estende la classe Controller nativa del framerowork. Il metodo eseguirà dei comandi in PHP e restituirà un risultato che sarà inviato al richiedente – ad esempio, manderà i risultati delle query contenuti nel metodo. E’ possibile passare dei dati, richiesti da un Model ed elaborati dal Controller, a specifiche View, ad esempio:

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException; //

class MapController extends Controller { public function queries(){

//

12

'point_of_interest' => $point_of_interest, 'stops' => $stops

]);} }

Frammento 1: Struttura di un Controller e restituzione di una View

In questo frammento viene invocata la funzione globale view di Laravel alla quale vengono passati due argomenti: il primo corrisponde al nome della vista o view, mentre il secondo è un array associativo PHP di coppie chiave => valore.

Le View contengono l’HTML che l’applicazione servirà ai client; esse permettono di disaccoppiare la parte applicativa/controller da quella relativa alla presentazione. Il framework offre diverse soluzioni per utilizzare i dati passati da un metodo di un Controller all’interno di una View, ad esempio:

<html> //

<body>

<script type=”text/javascript”>

var point_of_interest = {!! json_encode($point_of_interest) !!}; var stops = {!! json_encode($stops) !!}

//

</script> </body> </html>

Frammento 2: Struttura di una View e passaggio di dati

La sintassi {!! !!} permette di eseguire dei comandi in PHP all’interno della View; in questo caso i valori delle variabili $point_of_interest e $stops vengono convertiti in stringhe

JSON e memorizzati nelle rispettive variabili di Javascript.

Altra parte estremamente importante di Laravel del quale si è fatto ampiamente uso nel tirocinio è il sistema di gestione delle basi di dati. Il framework permette di usare lo stesso codice per le query a prescindere dal tipo di database utilizzato, sia esso PostgreSQL [11], come in questo caso, oppure uno qualsiasi degli altri database supportati. Tutto ciò che si deve fare è modificare i file di configurazione dell’applicazione inserendovi i dati per le varie possibili

13

connessioni, quali indirizzo e porta ai quali si trova il database e il nome utente per l’accesso con la relativa password, e infine, sempre negli stessi file, segnalare quale di queste connessioni si vuole utilizzare. Così facendo, è possibile usare l’API [12] fornita da Laravel per fare qualsiasi operazione si debba effettuare. È possibile fare delle normali query usando l’SQL vero e proprio, oppure avvalersi di due componenti del framework: il primo è il query builder, che consente di costruire delle query più ad alto livello utilizzando una serie di metodi che vengono messi a disposizione, che verranno poi trasformate in SQL nel momento in cui si esegue effettivamente l’operazione; il secondo è Eloquent ORM (Object-Relational Mapping [13]). Usando Eloquent, è possibile creare, salvare, elaborare ed eliminare record dal proprio database trattandoli in sostanza come se fossero oggetti del linguaggio di programmazione, con soltanto qualche accortezza in più.Per fare ciò bisogna creare per ciascuna tabella del database un corrispondente modello o Model: una classe PHP in cui lo sviluppatore definisce una serie di parametri che serviranno ad Eloquent per sapere come interpretare correttamente le tabelle del database. Fra i molti parametri che è possibile definire si può ad esempio indicare il nome del campo usato come chiave primaria della tabella, se si voglia o meno mantenere i timestamp di creazione e aggiornamento del record che saranno poi automaticamente gestiti, quali campi debbano essere nascosti e quindi non essere restituiti nelle chiamate e così via.

Nel modello sono inoltre definite, in forma di metodi PHP, tutte le relazioni che la relativa tabella ha con le altre, o meglio tutte quelle che si vogliono rendere percorribili a partire dalla tabella a cui il modello fa riferimento. Nei metodi sono indicati, oltre al nome della tabella con cui quella riferita è in relazione, anche la cardinalità dell’associazione ed eventuali dati aggiuntivi da inserire in una tabella pivot nel caso di associazioni molti a molti.

Una volta completata la stesura del modello, avendo un’istanza dello stesso, ovvero un oggetto che rappresenta un record della tabella, ci si potrà riferire ai campi dello stesso oppure agli altri record con i quali è in relazione come se fossero proprietà dell’oggetto stesso, e si potranno aggiungere o rimuovere oggetti dalle associazioni senza preoccuparsi delle modifiche da effettuare alle tabelle della base di dati.

Volendo fare un esempio, nel database costruito per il progetto è stata creata una tabella

all_shapes_geom contenente i percorsi delle corse degli autobus per poterli disegnare su mappa.

14

cartella dell’applicazione, e definire i parametri necessari nello stesso (es. nome della tabella, nome della chiave primaria, ecc.). Fatto questo, se si volesse ottenere l’elenco di tutte le shape basterebbe fare questa semplice chiamata:

$shapes = ‘App\Shape’::get()

Quindi è possibile combinare Eloquent con il query builder di Laravel creando interrogazioni più complesse questa:

$result = 'App\Shape'::query()

->selectRaw('st_asgeojson(st_union(line_geom))

as geojson')

->whereRaw('route_uid_fk = ?', [$route_uid]) ->get();

che unisce le geometrie (attributo line_geom) delle shape associate ad una specifica linea dell’autobus $route_uid e le converte in un unico GeoJSON.

3.2 PostgreSQL e PostGIS

PostgreSQL [14] è un potente open-source object-relational database che utilizza ed estende il linguaggio SQL combinato con molte funzionalità che memorizzano e scalano in modo sicuro i carichi di lavoro di dati più complessi. Le origini di PostgreSQL risalgono al 1986 come parte del progetto POSTGRES all'Università della California a Berkeley e ha più di 30 anni di sviluppo attivo sulla piattaforma principale. E’ giunto al momento in cui si scrive alla versione 10.5; si è guadagnato una solida reputazione per la sua comprovata architettura, affidabilità, integrità dei dati, robustezza, estensibilità e la dedizione della comunità open source dietro il software per offrire costantemente soluzioni performanti e innovative.

Offre una grande varietà di data type nativi supportati; nel corso del tirocinio sono stati usati principalmente i seguenti:

 Numeric Types, come integer e double precision;  Character Types, come char e varchar;

15

 Geometric Types, come point, line e path.

Inoltre PostgreSQL offre diverse funzioni per ogni tipo di dato supportato, ad esempio questa query:

update all_stop_times

set hour_arrival = extract(HOUR FROM to_timestamp(arrival_time, 'HH24')) from all_stop_times;

quando eseguita su PostgreSQL aggiorna i valori dell’attributo hour_arrival, dove la funzione to_timestamp converte l’attributo arrival_time, di tipo character, in un timestamp e viene passato alla funzione extract che permette di recuperare dei sottocampi come anno o ora da valori di date/time, in questo caso è l’ora.

Postgres ha potenti componenti aggiuntivi come la popolare estensione geospaziale PostGIS [15], che consente archiviare gli oggetti GIS (Geographic Information Systems [16]) nel database e fornisce funzioni per l'analisi e l'elaborazione di questi oggetti. PostGis, dopo essere stato rilasciato per la prima volta nel 2001, è giunto ora alla versione 2.5. Il sito ufficiale di PostGIS [17] offre anche una ricca documentazione.

Gli oggetti GIS supportati da PostGIS sono un superset delle "Simple feature" definite dall’OpenGIS Consortium (OGC) e, a partire dalla versione 0.9, supporta tutti gli oggetti e le funzioni specificati nella specifica OGC "Simple Features for SQL". La specifica OpenGIS definisce due modi standard di esprimere gli oggetti spaziali: il modulo Well-Known Text (WKT) e il modulo Well-Known Binary (WKB). Sia WKT che WKB includono informazioni sul tipo di oggetto e le coordinate che formano l'oggetto.

Alcuni esempi di rappresentazioni testuali (WKT) degli oggetti geometrici sono i seguenti:  POINT(0 0), questa stringa rappresenta un punto in uno spazio ed è definito dalle sue

coordinate;

 LINESTRING(0 0,1 1,1 2), questa stringa rappresenta una linea definita da una sequenza di coordinate di punti;

 MULTIPOINT((0 0),(1 2)), stringa che rappresenta un insieme di punti nello spazio;  MULTILINESTRING((0 0,1 1,1 2),(2 3,3 2,5 4)), questa stringa rappresenta una sequenza

16

Con il modulo WKT è possibile rappresentare gli oggetti geometrici su mappa. Le specifiche OpenGIS richiedono anche che il formato di archiviazione interna degli oggetti spaziali includa uno spatial referencing system identifier (SRID). Lo SRID è richiesto quando si creano oggetti spaziali per inserirli nel database.

Ad esempio, per il progetto è stata creata su PostgreSQL una tabella ataf_stops che contiene le coordinate, latitudine e longitudine, di tutte le fermate dell’autobus dell’area metropolitana di Firenze. Grazie a PostGIS è possibile modificare la tabella con questa query:

select AddGeometryColumn('ataf_stops', 'geom', 4326, 'POINT', 2);

La funzione prende, in ordine, i seguenti argomenti: il nome della tabella che viene modificata, il nome della colonna che viene creata, l’SRID, il tipo della geometria e la sua dimensione. L’SRID 4326 si riferisce al World Geodetic System 1984 (WGS84), il sistema di coordinate geografiche geodetico, mondiale, basato su un ellissoide di riferimento elaborato nel 1984. Quindi è possibile con quest’altra interrogazione:

update ataf_stops

set geom=ST_SetSRID(ST_Point(stop_lon,stop_lat), 4326);

riempire la colonna creata con la precedente query; la funzione ST_Point restituisce uno

ST_Point, mappato come geometry, con i valori di coordinate dati, invece la funzione ST_SRID imposta il sistema di riferimento di una geometria.

Per quanto riguarda l’amministrazione della base di dati, si è preferito usare l’open-source graphical user interface pgAdmin 3.1, progettato per soddisfare le esigenze sia degli utenti principianti che esperti di Postgres, fornendo una potente interfaccia grafica che semplifica la creazione, la manutenzione e l'uso di oggetti di database.

3.3 General Transit Feed Specification

General Transit Feed Specification (GTFS) definisce un formato comune per gli orari dei trasporti pubblici e le informazioni geografiche associate ed è stato sviluppato da Google. Secondo gli standard attuali, un file GTFS è composto da un insieme di file di testo, tra i 6 e i 13. Ogni file rappresenta un aspetto particolare delle informazioni di transito: fermate, percorsi,

17

viaggi e altri dati di pianificazione. I dettagli di ciascun file sono definiti nella Reference del sito di Google [18]. I file di testo sono rappresentazioni, con estensione .txt, di tabelle in relazione tra di loro grazie a coppie di chiave primaria e chiave esterna [19].

Figura 1: Elenco dei file di testo all’interno di una collezione GTFS.

Fonte: https://developers.google.com/transit/gtfs/reference/#term-definitions

La specifica è progettata per essere sufficiente a fornire funzionalità di pianificazione del viaggio, ma è utile anche per altre applicazioni come l'analisi dei livelli di servizio e alcune misure generali di prestazione. La sorgente [20] da cui sono stati scaricati gli orari degli autobus ha diversi file GTFS contenenti informazioni programmate, cioè non includono informazioni in tempo reale.

Le descrizioni delle singole tabelle sono nella sezione 5.1.1.

3.4 Leaflet

Leaflet [21] è una libreria JavaScript open source ampiamente utilizzata per costruire applicazioni web mapping [22]. Sviluppata da Vladimir Agafonkin e rilasciata per la prima volta nel 2011, supporta la maggior parte delle piattaforme mobili e desktop, supportando HTML5 e CSS3. Giunta, al momento in cui si scrive, alla versione 1.3.4. Leaflet è stata

18

progettata con semplicità, prestazioni e usabilità in mente. Funziona in modo efficiente su tutte le principali piattaforme desktop e mobili, può essere estesa con molti plugin e ha un'API ben documentata.

Figura 2: Riferimento per la documentazione dell’API Fonte: https://leafletjs.com/reference-1.3.4.html

La figura sopra mostra il riferimento all’API sul sito internet, si nota che ci sono diversi livelli, detti Layer, ognuno contenete diversi elementi che possono essere usati per definire una mappa Leaflet. Nel corso del tirocinio sono stati utilizzati il Raster Layer (es. TileLayer) o il Vector Layer (es. Circle e Path); ci sono anche gli Other Layer (LayerGroup, FeatureGroup e GeoJSON) che possono essere utilizzati per raggruppare più livelli e gestirli come se fossero uno solo. Ad esempio, se un LayerGroup viene aggiunto alla mappa, tutti i livelli appartenenti a questo gruppo verranno aggiunti sulla mappa.

Un utilizzo tipico di Leaflet è l'inserimento di una mappa all'interno di un elemento HTML. Per fare questo, è necessario come prima cosa inizializzare la mappa e impostare la sua vista sulle coordinate geografiche scelte e su un livello di zoom:

19

Per impostazione predefinita (poiché non abbiamo passato nessuna opzione durante la creazione dell'istanza della mappa), tutte le interazioni di mouse e tocco sulla mappa sono attivate. L.map è la classe centrale dell’API che viene utilizzata per creare una mappa su una pagina e manipolarla, gli viene passato come argomento l’identificativo di un tag (es. div) di un elemento di una pagina HTML. Invece, Il metodo setView viene invocato per impostare la vista della mappa (centro geografico e zoom).

Quindi creiamo un tile layer da aggiungere alla nostra mappa, ad esempio una mappa a tasselli di OpenStreetMap, con questo comando:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&amp;copy; <a

href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxzoom: 18

} ).addTo(map);

Alla classe L.tileLayer sono passati due parametri: un URL in formato stringa e le opzioni racchiuse tra parentesi graffe. L’URL contiene i seguenti parametri:

 {s} che significa uno dei sottodomini disponibili (usati sequenzialmente per aiutare le richieste parallele del browser per limitazione del dominio), i valori del sottodominio sono specificati nelle opzioni;

 {z} si riferisce al livello di zoom;

 { x} e {y} sono le coordinate del tassello sulla mappa.

Le opzioni del Layer specificate nel comando sono: il testo di attribuzione di OpenStreetMap, che offre come servizio la mappa richiesta, e il livello massimo di zoom.

OpenStreetMap (OSM) è un progetto collaborativo [23] finalizzato a creare mappe a contenuto libero del mondo attraverso una raccolta mondiale di dati geografici. Riportiamo una traduzione dall’inglese dal sito ufficiale [24] di OSM:

«OpenStreetMap è una mappa liberamente modificabile dell'intero pianeta. È fatta da persone come te. OpenStreetMap permette a chiunque sulla Terra di visualizzare, modificare ed utilizzare dati geografici con un approccio collaborativo.»

20

Nel codice Leaflet, la variabile L si riferisce all’intera libreria e, come qualsiasi libreria di JavaScript, serve per recuperare le API.

E’ possibile aggiungere molti altri tipi di layer nella mappa appena creata, ad esempio con questo comando:

var circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(mymap);

viene aggiunto un cerchio, di tipo Vector Layer, nella mappa impostando le coordinate del centro, il colore della circonferenza, il colore di riempimento, l’opacità e il raggio.

Un altro punto di forza di Leaflet è la possibilità di gestire il famoso formato di dati GeoJSON [25] che la GeoJSON Specification (RFC 7946) definisce in questo modo:

«GeoJSON è un formato per codificare una varietà di strutture di dati geografici [...]. Un oggetto GeoJSON può rappresentare una regione di spazio (una geometria), un'entità limitata nello spazio (una caratteristica) o un elenco di caratteristiche (una collezione di caratteristiche). GeoJSON supporta i seguenti tipi di geometria: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon e GeometryCollection. Le funzionalità in GeoJSON contengono un oggetto Geometry e proprietà aggiuntive, mentre FeatureCollection contiene un elenco di funzionalità.»

3.5 Altre tecnologie

Oltre a quelle descritte in forma più estesa sopra, nello sviluppo del progetto sono state usate altre tecnologie, come la piattaforma di sviluppo web WampServer, cioè un pacchetto software contenete anche un web server [26] e diverse estensioni di PHP .

Si è fatto uso della libreria PHP libcurl [27], creata da Daniel Stenberg, sviluppata nell’ambito del progetto cURL, disponibile in PHP a partire dalla versione 4.0.2. Si tratta di una

21

libreria che permette di effettuare comunicazioni sulla rete con molteplici protocolli; nel caso del progetto, essa è stata utilizzata per determinare le coordinate geografiche delle scuole sapendo l’indirizzo attraverso il servizio Mapbox Geocoing API [28]. Mapbox è un’azienda software che offre diversi servizi web inerenti le mappe online e attraverso le sue API è possibile recuperare informazioni e usare i suoi strumenti. Geocoding è un servizio che permette di recuperare le coordinate geografiche di un luogo sapendo diverse informazioni come il suo indirizzo, il codice postale, la città, il paese ecc.

Inoltre nelle view dell’applicativo sono state sfruttate queste tecnologie:

 jQuery: libreria di JavaScript [7] che offre, fra le altre funzionalità, metodi per facilitare l’esplorazione e manipolazione del DOM delle pagine HTML.

 Leaflet.markercluster: libreria di JavaScript e plugin [29] per Leaflet liberamente utilizzabile, permette di raggruppare le icone presenti in una mappa Leaflet in Marker Cluster animati.

 AJAX: pur non essendo una tecnologia in sé [30], è un acronimo che sta per Asynchronous JavaScript And XML e descrive un approccio particolare nell'utilizzo di una serie di tecnologie esistenti, incluse HTML o XHTML, JavaScript, il Document Object Model (DOM), XML, e, soprattutto, l'oggetto XMLHttpRequest [31]. Quando queste tecnologie vengono combinate nel modello Ajax, le applicazioni web sono in grado di apportare aggiornamenti rapidi e incrementali all'interfaccia utente senza ricaricare l'intera pagina del browser. Ciò rende l'applicazione più veloce e più reattiva alle azioni dell'utente. Anche se la X in Ajax è l'acronimo di XML, è possibile usare anche il formato JSON. Quest’ultimo è un acronimo che sta per JavaScript Object Notation, un formato testuale utilizzato per scambiare dati tra browser e server [1].