Un mashup è un sito o un'applicazione web di tipo composito, cioè tale da includere dinamicamente informazioni o contenuti provenienti da più fonti. Il termine deriva da un'espressione usata in ambito musicale che indica una tecnica che consiste nella miscela di due o più canzoni mediante l'uso di computer o di qualsiasi altro dispositivo. Per sapere cosa sono i mashup rimandiamo ad un video sui mashup pubblicato su ICTv, la Web Tv di HTML.it.
I mashup stanno rivoluzionando lo sviluppo del web permettendo a chiunque di combinare dati da siti come Amazon, eBay, Google, Windows Live, YouTube e Yahoo! in modo innovativo. I mashup sono semplici da progettare e richiedono minime conoscenze tecniche e quindi si propongono ad un'utenza anche non esperta in programmazione informatica.
In questo articolo diviso in due parti vedremo come utilizzare PHP per creare un mashup. Vedremo esempi di codice compatibili con Google Maps e Youtube e forniremo le indicazioni di base per il loro uso. Il lettore sarà poi libero di approfondire l'argomento attraverso la documentazione di ogni singolo servizio. Prima di passare ai nostri esempi pratici, introduciamo il concetto di mashup.
Tecnologia dei Mashup
I Web service, una raccolta di standard e formati di dati che consentono alle applicazioni web di comunicare tra di loro e di condividere le informazioni, sono il fulcro della tecnologia che sta dietro i mashup. Proprio grazie all'utilizzo dei Web service, applicazioni sviluppate in diversi linguaggi di programmazione e implementate su diverse piattaforme, possono diventare un unico grande contenitore per lo scambio o la visualizzazione di informazioni provenienti da fonti diverse oppure per la realizzazione di processi di business.
Il contenuto dei mashup generalmente utilizza i Web service. Questi, a seconda del tipo di applicazione da realizzare, possono essere delle API, o dei feed o semplicemente delle porzioni di JavaScript. Un tipico mashup potrebbe essere rappresentato, ad esempio, dalla visualizzazione degli hotel appartenenti ad una particolare catena attraverso una mappa digitale. L'elenco degli hotel costituisce un tipo di informazione, la mappa ne rappresenta un altro; il Web service viene utilizzato per collegare le due tipologie di dati.
Tipologie di Mashup
I mashup generalmente si dividono in tre categorie principali:
Consumer Mashup
Un consumer mashup è una semplice unione di due o più servizi combinati insieme in un'unica grafica. Un tipico esempio di consumer mashup sono le applicazioni che integrano le cartografie di Google Maps con dati provenienti da altre sorgenti di informazione.
Data Mashup
Un data mashup è l'unione di diverse sorgenti di informazione eterogenee tra di loro al fine di creare un unico contenitore di dati. Un classico data mashup e la funzione "Segnalibri" del browser Mozilla Firefox cioè l'aggregazione di informazioni provenienti da diversi feed RSS.
Business Mashup
Un business mashup consente di combinare dati provenienti da varie fonti (sia interne sia esterne all'applicazione interessata) per la creazione di un framework integrato. Solitamente un business mashup viene realizzato per il monitoraggio delle vendite, del personale o per la gestione dei costi all'interno ad un'azienda. In poche parole un business mashup è la combinazione di consumer e di data mashup per la realizzazione di applicazioni enterprise.
Creare un mashup online
In questo capitolo verranno presi in rassegna i più comuni servizi che offrono la costruzione di mashup presenti in rete. Sono servizi basati sul browser e gratuiti.
Yahoo Pipes
Yahoo Pipes rappresenta sicuramente uno dei migliori prodotti per la creazione di mashup attualmente presenti sul web. Per accedervi è sufficiente possedere un account Yahoo (gratuito) ed è adatto per qualsiasi tipo di piattaforma (Linux, Windows, Mac).
Yahoo Pipes è un ambiente di sviluppo semplicissimo. Utilizzando un editor visuale nel proprio browser è possibile pubblicare e condividere servizi senza essere necessariamente dei programmatori. Per costruire il proprio mashup è sufficiente trascinare i differenti moduli messi a disposizione e disporne le connessioni. Ogni modulo è specializzato nel reperire informazioni su Internet da una particolare fonte o con una particolare tecnologia, o nell'elaborare le informazioni in ingresso con certe modalità. I moduli hanno dei connettori in ingresso ed in uscita per poterli collegare tra di loro e creare un pipe completo.
Una volta completato un pipe è possibile salvarlo sul server e richiamarlo per ottenere in output un feed in uno dei seguenti formati: RSS, RDF, JSON o Atom. È anche possibile pubblicare il proprio mashup così costruito e condividerlo su Internet, permettendo ad altri utenti di crearne dei cloni, aggiungervi ulteriori funzionalità o utilizzarlo come componente di un altro"pipe" da loro creato.
Sono disponibili svariati moduli, dal Fetch Data che consente di recuperare dati da fonti web in Xml o Json (Javascript Object Notation), a funzionalità già implementate per ottenere informazioni da applicazioni come Flickr o Google, ai moduli per l'elaborazione dei dati, fino a pacchetti per la rappresentazione cartografica di oggetti. Il risultato di questo stream di dati rappresenta un completo mashup realizzato in brevissimo tempo (nell'ordine di qualche minuto) e senza aver scritto una sola linea di codice.
Microsoft Popfly
Popfly è un'applicazione web per la creazione di mashup molto simile a Yahoo Pipes. Anche in questo caso è necessario avere un account, questa volta di Hotmail, per poter accedere al servizio. Inoltre è richiesta l'installazione dell'ambiente di runtime Silverlight (su ICTv è presente un video su Silverlight) per poter utilizzare l'applicazione. Da notare che Silverlight è disponibile solo per utenti Microsoft e Macintosh.
La logica del servizio consiste nella creazione di una web application che contenga i moduli previsti da PopFly. Differentemente da Yahoo Pipes, l'applicazione di Microsoft è più orientata ai contenuti multimediali, quali video, immagini e giochi. Tuttavia sono presenti anche moduli che estraggono dati da altri servizi per fornire news, mappe e link a siti di shop on line.
Google Mashup
Google Mashup (ancora in versione beta, quindi attualmente utilizzabile solo da un numero ristretto di sviluppatori autorizzati a discrezione dell'azienda) è un mashup editor che, rispetto ai prodotti di Yahoo e Microsoft, limita la costruzione di un'applicazione alle informazioni pubblicate da un feed RSS. Quindi, perlomeno per la versione beta, non è possibile la creazione di strumenti che possano sfruttare i Web service forniti da altri portali (come le API di Flickr).
Tuttavia, Google Mashup mette a disposizione dell'utente delle API, basate su tecnologia AJAX, in modo da ricreare situazioni del tutto simili graficamente alle applicazioni Google e consentendo, inoltre, di inserire all'interno della propria web application prodotti come Google Maps o Google Calendar personalizzati a seconda dell'esigenze dell'utente.
Una volta sviluppate le applicazioni, gli utenti possono provarle in una Sandbox, che ne permette il debug, e quindi deciderne la pubblicazione, naturalmente sotto il dominio di googlemashups.com.
Quindi l'utilizzo di Google Mashup è demandato ad utenti che abbiamo una buona familiarità sia con i prodotti Google che con i principi di programmazione web.
Creare un mashup con PHP
Costruire un mashup con PHP e MySQL è molto semplice poiché non è richiesta nessuna conoscenza aggiuntiva se non quella standard per la programmazione web (HTML, XML, Javascript).
La realizzazione di un mashup può essere, a livello macro, riassunta nei seguenti punti:
- Estrazione dei set di dati
- Realizzazione del codice di interazione tra le diverse fonti
- Realizzazione dell'applicazione.
Ora vediamo due esempi di consumer mashup utilizzando due servizi molto noti tra gli utenti del web: Google Maps e YouTube.
Mashup con Google Maps
In questo esempio si tratta di creare un semplice "consumer mashup", ovvero l'unione di due diverse fonti dati, una lista di hotel localizzata su di una mappa.
L'estrazione dei dati delle due fonti è la fase primaria per la realizzazione del nostro mashup: per utilizzare Google Maps all'interno del proprio sito web è necessario ottenere una Google Maps API Key, richiedendola direttamente a http://www.google.com/apis/maps/, e inserendola al posto delle cifre segnate in rosso all'interno del codice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps mashup Example</title>
<script src=http://maps.google.com/maps?file=api&v=2&key=123456789 type = "text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
...
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Con questa operazione abbiamo estratto il primo set di dati ovvero la mappa. È stata tralasciata volutamente la funzione load() il cui contenuto verrà mostrato successivamente.
Il secondo set di dati riguarda la lista degli hotel: si suppone che la tabella sia strutturata in modo tale che ad ogni nome di ciascun hotel sia associato un indirizzo. Utilizzando MySQL per la creazione della tabella si può usare il seguente listato:
CREATE TABLE 'hotels' ( 'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY , 'nome' VARCHAR( 60 ) NOT NULL , 'indirizzo' VARCHAR( 80 ) NOT NULL , 'stelle' INT( 1 ) NOT NULL ) ENGINE = MYISAM ;
Una volta riempita la tabella con una lista di hotel, con una semplice query in PHP è possibile estrarre il secondo set di dati.
$query = "SELECT * FROM hotels";
$result = mysql_query($query);
if (!$result) {
die('Errore query: ' . mysql_error());
}
else{
$totale_hotels = mysql_num_rows($result); // Numero totale di hotel
print "<input type='hidden' id='totale' value='". $totale_hotels."'>"; // definizione del campo totale
$k = 0;
while($row = mysql_fetch_array ($result)){
print "<input type='hidden' id='indirizzo".$k."' value='".$row["indirizzo"]."'>"; // definizione del campo indirizzo
$k++;
}
}
Quindi, eseguendo un ciclo del result set dei dati è possibile ottenere tutti gli indirizzi (campo 'indirizzo'), da passare alla funzione load() per individuare le coordinate dei punti.
La fase successiva è quella di comprendere come far interagire i dati estratti: infatti, sulla mappa avremo delle informazioni strutturate in latitudine e longitudine, mentre la lista degli hotel è formata da una stringa che ne identifica l'indirizzo. Si tratta di trovare un metodo che converta la stringa dell'indirizzo in latitudine e longitudine in modo da poter visualizzare i dati sulla mappa.
Fortunatamente ci vengono in aiuto le API di Google Maps ed in particolare il Geocoding ovvero il procedimento per cui si trasformano in coordinate geografiche, le stringhe degli indirizzi (di solito nel formato: Via, Numero Civico, Città). In particolare, passando la stringa dell'indirizzo alla funzione di Geocoding di Google Maps si otterranno le coordinate dell'indirizzo estratto.
In termini di codice all'interno della funzione load() scriveremo:
geocoder = new GClientGeocoder();
function LatLngAddr(address){
geocoder.getLatLng(address,
function(point){
if (!point){
// Indirizzo non trovato!
alert(address " non trovato!");
}
else{
// Crea il marker
marker = new GMarker(point,icon);
map.addOverlay(marker);
}
});
}
Tramite la funzione LatLngAddr() vengono trasformate le stringhe degli indirizzi (address) in coordinate cartografiche (latitudine, longitudine) e associate le coordinate ricavate ad una particolare immagine (definita dal parametro icon) che renderà visibile il punto sulla mappa. Naturalmente la funzione sarà inserita all'interno di un ciclo che comprende tutti gli indirizzi inclusi nella tabella hotels.
In questo modo abbiamo completato la Realizzazione del codice d'interazione.
Come ultimo passo rimane Realizzazione dell'applicazione ovvero cercare uno strumento per la visualizzazione dei punti.
All'interno della funzione load() la mappa è già stata definita dal parametro map; rimangono da inserire i punti sulla mappa e identificare il centro ed il livello di zoom della mappa stessa.
Il centro della mappa deve essere individuato in modo da visualizzare tutti i punti. Per far questo è necessario costruire un rettangolo con vertici il punto più a nord-est (latitudine max, longitudine max) e il punto più a sud-ovest (latitudine minima, longitudine minima).
In termini di codice:
// Costruzione del rettangolo var bounds = new GLatLngBounds(new GLatLng(min_lat,min_lng),new GLatLng(max_lat,max_lng)); // Centro della mappa corrispondente al centro del rettangolo identificato dal parametro bounds map.setCenter(bounds.getCenter()); // Livello di zoom del rettangolo var zoom = map.getBoundsZoomLevel(bounds); // Zoom della mappa corrispondente allo zoom del rettangolo identificato dal parametro bounds map.setZoom(zoom); // Inserimento di tutti i punti sulla mappa for (var i = 0; i < document.getElementById('totale').value; i++){ LatLngAddr(document.getElementById('indirizzo'+i).value); }
Così facendo, in pochi step, si è realizzato un mashup che utilizza PHP, MySQL e principi di programmazione web per realizzare un tool di visualizzazione dati su mappa.
Mashup con YouTube
Anche in questo esempio si tratta di creare un semplice "consumer mashup", ovvero l'unione di due diverse fonti dati, una lista di tags (criteri di ricerca) per l'estrazione di video correlati sul sito di YouTube.
L'estrazione dei dati del nostro mashup consiste innanzitutto nell'ottenere una YouTube Developers API Key, richiedendola direttamente dalla pagina http://it.youtube.com/my_profile_dev. Tale chiave offre l'accesso ad un insieme di API per integrare i video di YouTube nelle proprie applicazioni. Accedendo a queste API, tramite un'interfaccia XML, si può costruire un'applicazione interattiva basata sui video resi disponibili da YouTube. Le API consentono di ottenere dettagli sui video e di ricercare un video per nome utente e per tag.
Si tratta in poche parole di creare una chiamata al sito di YouTube in modo da ottenere come output un file XML con tutte le informazioni necessarie. La stringa per la chiamata sarà del tipo seguente (le variabile le dichiariamo subito dopo):
http://www.yuoutube.com/api2_rest?method=".$method."&dev_id=".$dev_id."&tag=".$tag."&page=".$page."&per_page=".$per_page;
Dove:
- api2_rest: indica il tipo di gateway di chiamata;
- method: indica la tipologia di ricerca (nel nostro esempio la ricerca verrà effettuata per tag);
- dev_id: indica l'identificativo dello sviluppatore (Developers API Key);
- tag: indica la chiave di ricerca;
- page: indica la pagina da cui inizia la ricerca;
- per_page: indica quanti elementi visualizzare per pagina;
Come esempio possiamo ricercare i primi 20 video che abbiano come tag il termine "Beatles":
$method = "youtube.videos.list_by_tags";
$dev_id = "12345abcde"; // inserire il proprio id sviluppatore
$tag = "Beatles";
$page = "1";
$per_page = "20";
La chiamata, come detto, genera un file XML del tipo:
<?xml version="1.0" encoding="utf-8" ?> <ut_response status="ok"> // identifica l'esito della ricerca <video_list> <total>111138</total> // identifica il numero totale di video presenti in YouTube con il tag inserito <video> <author>(Autore del video)</author> <id>(Id dell'autore)</id> <title>(Titolo del video)</title> <length_seconds>(Durata del video in secondi)</length_seconds> <rating_avg>(Votazione media del video)</rating_avg> <rating_count>(Numero di utenti che hanno votato)</rating_count> <description>(Descrizione del video inserita dall'autore)</description> <view_count>(Numero di volte in cui il video è stato visto)</view_count> <upload_time>(Timestamp della data di upload)</upload_time> <comment_count>(Numero di commenti)</comment_count> <tags>(Tag)</tags> <url>(Url del video)</url> <thumbnail_url>(Indirizzo della thumbnail del video)</thumbnail_url> <embed_status>(Stato del video)</embed_status> </video> <video> ... </video> ... </video_list> </ut_response>
Il prossimo passo consiste nel trovare un metodo per poter leggere il file XML che viene estratto utilizzando la YouTube Developers API Key secondo i tag definiti.
Utilizzando la funzione del PHP5 SimpleXML sul file XML fornito tramite le API, è possibile ottenere un array di dati contenente le thumbnail, i titoli, le lunghezze ed i ratings dei video. Per esempio volendo estrarre soltanto il titolo del video si può usare il seguente listato:
$xml = new SimpleXMLElement($file_xml);
foreach ($xml->video as $video){
echo $video->title;
}
In questo modo abbiamo completato la Realizzazione del codice d'interazione.
Come ultimo passo rimane la Realizzazione dell'applicazione ovvero creare il codice HTML in modo da definire le dimensioni delle thumbnail, quanti video per riga, quanti per pagina e così via. In poco tempo abbiamo realizzato un mashup che utilizza PHP e principi di programmazione web per realizzare un tool di estrazione per tags di video da YouTube.
