Sono ormai tanti i servizi che Google mette a disposizione degli utenti internet. Molti di essi sono orientati a webmaster e programmatori e permettono di integrare funzionalità interessanti in modo piuttosto semplice.
Abbiamo visto nel precedente tutorial come sia possibile integrare mappe personalizzate di Google Maps nelle proprie pagine web. In questa occasione utilizzeremo le API che Google mette a disposizione per aggiungere alle nostre pagine web dei feed RSS originati da un sito esterno.
La specifica RSS è implementata su quasi tutti i portali informativi (e non solo). Sono infatti moltissimi i siti che offrono, tra gli altri, anche questo metodo di erogazione delle notizie. Così può essere interessante aggiungere al nostro sito web una fonte di dati aggiornata ed "ufficiale". Tanto più che possono essere reperite fonti RSS tematiche anche molto specifiche, così se abbiamo ad esempio un blog che parla di sport avremo la possibilità di aggiungere un box di notizie sportive sempre aggiornate.
Ma cosa sono i feed RSS?
RSS è l'acronimo di Really Simple Syndication (o Rich Site Summary) ed è uno dei più popolari formati per la distribuzione di contenuti sul web. È basato sullo standard XML ed è una sorta di flusso informativo di notizie strutturato in modo da contenere tutte le informazioni di dettaglio di una notizia (titolo, data, abstract, link al contenuto completo ...). Visto che il formato XML con cui viene costruito un RSS è predefinito e rispetta un determinato standard è possibile gestire e riutilizzare queste informazioni in maniera abbastanza semplice. Ecco di seguito un semplice esempio di file RSS:
<rss version="2.0">
<channel>
<title>Titolo del canale</title>
<link>http://www.linkprincipale.it/</link>
<description>Descrizione del canale</description>
<language>it</language>
<item>
<title>Prima notizia</title>
<link>http://www.linkprincipale.it/notizia_01.html</link>
<description>descrizione della prima notizia</description>
</item>
<item>
<title>Seconda notizia</title>
<link>http://www.linkprincipale.it/notizia_02.html</link>
<description>descrizione della seconda notizia</description>
</item>
</channel>
</rss>
Non è questa la sede per entrare nel dettagli riguardo al formato e alle sue varie versioni, qui ci limitiamo a dare una descrizione sommaria lasciando al lettore l'approfondimento, visto che è facile reperire su internet informazioni dettagliate e più tecniche sulla specifica RSS. Tra l'altro proprio su HTML.it Cesare Lamanna ne ha parlato diffusamente nel suo Introduzione a RSS.
Altre fonti interessanti per approfondire l'argomento sono: RSS su Wikipedia e Le traduzioni in italiano delle specifiche ufficiali curate da Simone Carletti.
Cosa serve per iniziare?
La registrazione a Google tramite l'apertura di un account Gmail (http://www.gmail.com) apre l'accesso ad una serie di servizi gratuiti tra i quali c'è anche quello relativo alle AJAX Feed API.Queste interfacce mettono a disposizione gli strumenti che facilitano la gestione e l'integrazione di feed RSS all'interno di un sito web senza bisogno di dover utilizzare linguaggi di programmazione lato server. Basterà qualche linea di codice JavaScript per ottenere un risultato più che soddisfacente.
Prima di tutto quindi bisogna possedere una chiave di registrazione (API key). Per ottenerla seguite il link http://code.google.com/apis/ajaxfeeds/signup.html e compilate il form.
Faccio presente che ogni chiave è relativa ad una directory del vostro sito, quindi se volete visualizzare la lista dei feed RSS nella pagina http://www.miosito.com/dir/index.html dovrete inserire nel formulario il link: http://www.miosito.com/dir/
Inviando il form verrete indirizzati ad una pagina che contiene la chiave (API key) generata. La utilizzeremo tra poco. Nella stessa pagina il sistema propone un blocco di codice da utilizzare come esempio per le eventuali ulteriori elaborazioni, partiamo da lì.
Integrare un flusso RSS
Parte del lavoro è già fatto, il codice HTML prodotto dalla procedura di Google è un buon punto di partenza. Andiamo nel dettaglio analizzando le varie parti che lo compongono.
Il primo tag script che incontriamo utilizza come parametro la chiave appena generata. È fondamentale la sua presenza per il corretto funzionamento di tutto il resto. Se la chiave non corrisponde all'indirizzo web/directory inserite al momento della sua creazione la chiamata agli oggetti di Google non verrà validata e non si avranno a disposizione le API (Application Program Interface, ovvero le interfacce messe a disposizione dall'applicazione per il suo utilizzo) da utilizzare per interagire con la sorgente RSS.
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAqJTkrAjlGEQ5_cEfzzAJgRTQX3UUxEGSqOGjz60gOBbhvyrQnBRqzWIrzxDjqGSAC-EoQLEWgDn0mA"></script>
Il secondo tag script contiene prima di tutto il resto una chiamata alla funzione:
google.load("feeds", "1");
Questa chiamata permette di caricare le API appropriate (la versione 1) relative alla gestione dei feed RSS. Successivamente viene impostata la funzione initialize() all'interno della quale viene fatto tutto il lavoro e che andremo ad analizzare tra poco. Infine viene chiamata setOnLoadCallback(initialize)che, una volta caricate correttamente le API permette di richiamare proprio la funzione initialize().
Tutte le chiamate a funzione sono chiamate di tipo AJAX, cioè sono chiamate asincrone. I dati verranno recuperati dalla fonte remota e caricati senza che la vostra pagina web sia mai ricaricata!
google.setOnLoadCallback(initialize);
Andiamo nel dettaglio ad analizzare la funzione initialize().
Per prima cosa viene istanziata una variabile (la variabile feed) alla quale viene associato un oggetto Feed che punta all'indirizzo web presso il quale vogliamo vengano recuperati i feed RSS.
Avete bisogno di una fonte di dati RSS per esercitarvi? Se il vostro sito parla di web e programmazione potete dare un'occhiata qui: Feed RSS di HTML.it e scegliere una delle categorie disponibili. Vi piace la fotografia digitale? Ecco un link ad un RSS che fa al caso vostro: http://www.onedigital.it/categoria/fotografia-digitale/feed/, nell'occasione utilizzeremo proprio quest'ultimo per il nostro esempio.
function initialize() {
var feed = new google.feeds.Feed("http://www.onedigital.it/categoria/fotografia-digitale/feed/");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
..........
}
});
}
La funzione feed.load viene eseguita appena i valori provenieneti dalla fonte RSS sono stati caricati. Se non si verificano errori, all'interno della variabile result (che è un oggetto complesso) vengono memorizzati tutti i contenuti del feed. L'utilizzo di questo oggetto permette di nascondere la complessità dell'XML che è stato recuperato (come abbiamo detto un feed RSS non è altro che un file XML strutturato) e facilita la lettura dei valori in esso contenuti. Se avessimo seguito una strada diversa per recuperare gli RSS (ad esempio utilizzando un linguaggio di programmazione lato server come il PHP e non le API di Google) avremmo dovuto effettuare "a mano" il parsing del file RSS facendo ricorso ad XPath o a SimpleXML per estrarre i dati.
Continuando ad analizzare il codice vediamo che viene successivamente istanziata una variabile container che fa riferimento ad un elemento che abbia id="feed" e che deve essere presente nel BODY della vostra pagina web (ad esempio un DIV vuoto). All'interno di questo elemento verrà visualizzato il risultato dell'elaborazione delle informazioni recuperate.
Le successive righe di codice effettuano un ciclo di lettura rispetto al contenuto dell'oggetto result e ne estraggono le singole entità assegnandole alla variabile entry.
Ogni entità che viene estratta avrà diverse informazioni associate, in questo semplice caso viene recuperato e visualizzato il titolo (entry.title) all'interno di un DIV creato al volo e aggiunto al DOM (il Document Object Model) della pagina web proprio all'interno dell'elemento "container" (il nostro <div id="feed"></div>).
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
Personalizziamo la visualizzazione
A questo punto l'esempio dovrebbe essere completo e funzionante.
Personalizziamolo ulteriormente visualizzando altre informazioni oltre al titolo della singola notizia. Utilizzeremo a tal proposito le altre informazioni che vengono passate, in particolare il link che punta alla notizia completa, la data e l'ora ed infine la breve descrizione associata. Queste informazioni sono disponibili rispettivamente tramite entry.link, entry.publishedDate e entry.contentSnippet.
Utilizzeremo più volte le funzioni document.createElement e .appendChild per creare al volo elementi <div>, <span>, <br> e <a> (per i link) ed inserirli all'interno del container.
Per abbellire un po il tutto potete assegnare ai div, agli span e ai link creati al volo stili CSS diversi.
Il ciclo for visto precedentemente si trasforma in qualcosa di simile:
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var span = document.createElement('span');
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.appendChild(document.createTextNode(entry.title));
div.style.cssText = 'color:#003; margin-top:10px';
span.style.cssText = 'color:#777; font-size:11px';
link.style.cssText = 'font-weight:bold';
span.appendChild(document.createTextNode(entry.publishedDate));
div.appendChild(span);
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
div.appendChild(document.createTextNode(entry.contentSnippet));
container.appendChild(div);
}
Considerate che la data di pubblicazione viene visualizzata in formato americano, quindi prima di assegnare il valore di entry.publishedDate all'elemento span bisognerebbe elaborarlo facendo uso di JavaScript (lavorando un po con la funzione substr non è poi così difficile).
Se le vostre pagine utilizzano già la libreria Prototype (caricarla solo per l'utilizzo con i feed RSS non è consigliabile visto che pesa da sola poco meno di 100Kb) potreste velocizzare questo lavoro di ottimizzazione utilizzando funzionalità proprie della libreria come gli array associativi (hash) e metodi utili come $w (che trasforma gli elementi di una stringa in valori di un array utilizzando il carattere spazio come delimitatore).
Se volete approfondire l'argomento ecco un paio di link utili sul sito code.google.com: http://code.google.com/apis/ajaxfeeds/documentation/, http://code.google.com/apis/ajaxfeeds/documentation/reference.html (entrambi in inglese).
L'esempio completo e funzionante di questo articolo lo trovate online in due versioni. La versione semplice è su questa pagina, quella che utilizza la libreria Prototype è invece su questa.
Buon divertimento!
