Yahoo Query Language macht Content-Abfragen spielend leicht

Chris Heilmann (Übersetzung Manuela Müller)

Ein schöne Benutzeroberfläche zu gestalten ist eine tolle Erfahrung. Leider wird dieses Hochgefühl schnell ruiniert, wenn man sieht, wie das Design zerbröselt, wenn man in die Anwendung richtige Inhalte hineinlädt. Darum ist es besonders wichtig, Ihre Benutzeroberfläche so bald wie möglich mit echtem Content zu testen und zu prüfen, wie Ihr Design unter Realbedingungen aussieht. Mit einem Service wie der Yahoo Query Language gelingt Ihnen das auch ohne Programmierkenntnisse.

Datenbankabfragen waren in den vergangenen Jahren ein Job für Spezialisten. Die unglaubliche Menge an heute verfügbarem Content und Systemen, die diese Informationen verarbeiten können, macht es immer einfacher, solche Webservices einzusetzen – selbst dann, wenn Sie vom Programmieren so gut wie keine Ahnung haben. Wenn Sie sich einmal auf Programmable Web umschauen, werden Sie aktuell 2015 verschiedene Anwenderprogrammierschnittstellen (API) finden. Das bedeutet, dass die Anbieter von Informationen wie Google, Twitter oder Yahoo Ihnen den Zugriff auf deren Rohdaten und das Modifizieren dieser Daten erlauben.

Programmable Web unterstützt Designer und Entwickler mit zahlreichen APIs und Mashups.

Das Problem mit APIs

Das Schwierige an der Sache ist, dass der Zugriff auf all diese verschiedenen Programmierschnittstellen variiert: Von der simplen Eingabe eines URL über eine Anmeldung am Server bis hin zur Eingabe aller möglichen Informationen über Ihre Anwendung, die Sie ja noch aufbauen wollen, bevor Sie endlich den ersten Block des gewünschten Contents erhalten.

Jede API hat darüber hinaus eine unterschiedliche Vorstellung davon, wie die Informationen aussehen, die Sie senden sollen, welches Format diese Daten haben sollen und in welchem Format die von Ihnen angeforderten Daten dann schließlich zurück geliefert werden. All das macht es sehr zeitaufwändig, die APIs von Drittanbietern in Ihren Produkten zu verwenden. Dieses Problem potenziert sich, mit jeder weiteren eingesetzten API. Wenn Sie beispielsweise Fotos von Flickr brauchen, Aktualisierungen von Twitter und wenn Sie darüber hinaus geografische Informationen in Twitter auf einer Landkarte anzeigen wollen, dann haben Sie einen ziemlich weiten Weg vor sich.

Den Zugriff auf APIs vereinfachen

Die Firma Yahoo benutzt APIs für nahezu alle ihre Produkte. Anstatt auf eine Datenbank zuzugreifen und die abgerufenen Informationen live am Bildschirm auszugeben, setzt sich das Frontend die API auf. Diese bezieht die Informationen aus dem Backend, das seinerseits mit Datenbanken kommuniziert. Das hat den Vorteil, dass die Anwenderschnittstelle skalierbar ist und Millionen von Anfragen bedienen kann, wobei Frontend und Backend unabhängig voneinander und ohne störende Wechselwirkungen geändert werden können.

Da die APIs im Laufe von zehn Jahren programmiert worden sind, unterscheiden sie sich im Format und der Art des Datenzugriffs. Dies kostete Yahoo zuviel Zeit. Aus diesem Grund wurde zunächst Yahoo Pipes entwickelt, um den Prozess zu vereinfachen.

Pipes ist faszinierend. Es ist ein visueller Weg, um Informationen aus dem Internet miteinander zu vermischen und aufeinander abzustimmen. Allerdings, wenn man Pipes für längere Zeit verwendet, ergeben sich sehr schnell Einschränkungen. Pipes zu versionieren ist nicht sehr einfach. Wenn Sie die Funktionalität einer Pipe auch nur ein wenig ändern wollten, mussten Sie auf das System zurückgreifen, was jedoch wegen der komplexen Konversionsvorgänge dazu neigte, sehr langsam zu werden. Darum bietet Yahoo nun ein neues System für Dinge an, die sich häufig ändern und sehr komplex werden können.

Yahoo Query Language (YQL) ist ein Service und eine Sprache, die es spielend leicht macht, Webservices und APIs zu verwenden – sowohl in punkto Zugriff als auch im Hinblick aufs Format.

Daten mit YQL wieder auffinden

Der einfachste Weg auf YQL zuzugreifen ist es, die YQL console zu verwenden. Diese Konsole ist ein Werkzeug, mit dem Sie Ihre YQL-Arbeit in einer Vorschau anzeigen und mit dem System spielen können, ohne dass Sie dafür jegliche Programmierkenntnisse benötigen. Die Schnittstelle besteht aus verschiedenen Komponenten:

Yahoo Query Language führt Sie in fünf Schritten zu den gewünschten Informationen.

1. Im YQL-Statement-Bereich geben Sie Ihre Datenbankanfrage ein. YQL hat eine sehr einfache Syntax, auf die wir später noch genauer eingehen. An dieser Stellen können Sie erst einmal den Statement-Bereich ausprobieren. Geben Sie eine Datenbankabfrage ins Feld „Your YQL Statement“ ein; wählen Sie über die Optionsschaltflächen „XML“ oder „JSON“ das gewünschte Format, legen Sie über das Kontrollkästchen „Diagnostics“ fest, ob Sie einen Diagnosebericht haben wollen und klicken Sie schließlich auf „TEST“, um die Abfrage zu starten. Oben rechts gibt es auch einen Permalink. Klicken Sie darauf, um sicher zu gehen, dass Sie Ihre Arbeit nicht verlieren, wenn Sie versehentlich den Back-Button betätigen.
2. Der mit „2“ gekennzeichnete Ergebnisbereich zeigt Ihnen die zurückgegebenen Informationen des Webservice an. Sie können diese Informationen entweder im XML- oder im JSON-Format lesen – oder klicken Sie auf „TREE VIEW“, um die Daten in einer Baum-artigen Struktur anzeigen und durchblättern zu können.
3. Der Bereich „REST query“ gibt Ihre Datenbankanfrage als URL aus. Diese URL können Sie zu jeder beliebigen Zeit in einen Browser oder ein Programm Ihrer Wahl kopieren – so einfach ist es, mithilfe von YQL Informationen aus verschiedenen Datenquellen abzufragen.
4. Im Query-Bereich (die drei oberen Schaltflächen in der rechten Sidebar – siehe Ziffer „4“) können Sie Namen, so genannte „Query Aliases“ für Ihre Datenbankabfragen festlegen. Dieser Service ist vergleichbar mit Lesezeichen in einem Browser. Dazu müssen Sie allerdings registriert sein. Ein Klick auf die Schaltfläche „Recent Queries“ zeigt den Verlauf Ihrer jüngsten Suchanfragen an. Das ist ganz nützlich, wenn Sie etwas durcheinander gebracht haben. Wenn Sie sich erst einmal anschauen wollen, wie solche Abfragen aufgebaut sind, können Sie über die Schaltfläche „Example Queries“ diverse Beispiele aufrufen und den Code im Ergebnisbereich betrachten.
5. Unter „Data Tables“ in der rechten Sidebar werden alle Services aufgelistet, die Sie über YQL abfragen können. Der Klick auf den Namen einer Tabelle wird in den meisten Fällen eine Demo-Abfrage in der Konsole öffnen. Wenn Sie mit dem Mauszeiger über den Link fahren, werden Ihnen zwei weitere Links angezeigt- desc und src -, die Ihnen Informationen über die Parameter des Webservices geben und Ihnen zeigen, wie Sie mit der Datentabelle umgehen. In den meisten Fällen brauchen Sie nur auf den Namen zu klicken. Sie können die Datentabellen auch filtern, indem Sie einfach eintippen, wonach Sie suchen.

YQL-Daten verwenden

Am einfachsten verwenden Sie YQL-Daten, indem Sie JSON als Ausgabeformat verwenden, und eine Callback-Funktion definieren. In dem Fall können Sie die URL aus der Konsole kopieren und mit einem einfach Stück JavaScript-Code diese Informationen in HTML ausgeben. Lassen Sie uns das direkt ausprobieren:

Als ein sehr einfaches Beispiel werden wir jetzt ein paar Fotos von flickr mit dem Suchbegriff „cat“ abrufen:

select * from flickr.photos.search where text=“cat“

Geben Sie das in die YQL-Konsole ein und drücken Sie den „TEST“-Button. Die Ergebnisse werden in XML ausgegeben – jede Menge Informationen über die Fotos:

Anstelle von XML wählen Sie nun JSON als Ausgabeformat und geben myflickr als Namen der Callback-Funktion ein. Als Ergebnis erhalten Sie dieselben Informationen als JSON-Objekt innerhalb des Aufrufs der Funktion myflickr.

Sie können die für Sie erzeugte URL aus dem Bereich „The REST query“ kopieren und verwenden.

Schreiben Sie nun eine JavaScript-Funktion mit dem Namen myflickr und einem Parameter data. Kopieren Sie die URL als src in einen anderen Script-Block:

<script>

  function myflickr(data){
    alert(data);
  }
</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20tex
t%3D%22cat%22&format=json&env=store%3A%2F%2Fdatatables.org
%2Falltableswithkeys&callback=myflickr"></script>

Wenn Sie dies innerhalb eines Browsers laufen lassen, wird die URL, die Sie hineinkopiert haben, die Daten vom YQL-Server abrufen und sie an die Funktion myflickr als data-Parameter senden. Der data-Parameter ist ein Objekt, das all die vom YQL-Server zurück gegebenen Informationen enthält. Um sicher zu gehen, dass Sie die richtigen Datn erhalten haben, prüfen Sie, ob die Eigenschaft data.query.results existiert. Wenn das der Fall ist, können Sie einen Loop zu den Ergebnissen schreiben.

<script>function myflickr(data){
  if(data.query.results){
    var photos = data.query.results.photo;
    for(var i=0,j=photos.length;i<j;i++){
      alert(photos[i].title);
    }
  }
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22cat%22
&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
callback=myflickr"></script>

Sie können die Struktur der Information und das, was Loop-fähig ist, auf einfache Weise abfragen, in dem Sie einfach die „Tree View“ im Ergebnisfeld der Konsole aktivieren.

Das Ergebnis ist jedoch noch nicht sehr befriedigend, denn es werden zunächst nur die Titel der gefundenen Fotos als Aufruf angezeigt. Das ist nichts weiter als ärgerlich. Um die Fotos im richtigen Format darzustellen, benötigen wir etwas mehr. Aber auch das ist keine Magie.

<div id="flickr"></div>
<script>function myflickr(data){
  if(data.query.results){
    var out = '<ul>';
    var photos = data.query.results.photo;
    for(var i=0,j=photos.length;i<j;i++){
      out += '<li><img src="http://farm' + photos[i].farm +
             '.static.flickr.com/' + photos[i].server + '/' + photos[i].id +
             '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +
             '"></li>';
    }
    out += '</ul>';
  }
  document.getElementById('flickr').innerHTML = out;
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22cat%22&
format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
callback=myflickr"></script>

Schauen Sie sich diesen Code in Aktion an und Sie bekommen Fotos von Katzen – live von Flickr, ohne dass Sie sich durch einen Authentifizierungsprozess quälen müssen.

Die Komplexität der HTML-Generation für die Wiedergabe variiert von Datensatz zu Datensatz. Essentiell handelt es sich immer um denselben Trick: Definieren Sie eine Callback-Funktion, schreiben Sie sie, kopieren Sie die in der Konsole erzeugte URL. Testen Sie die wiedergegebenen Daten und drehen Sie durch.

HTML-Content per YQL wiederverwenden

Ein andere sehr leistungsfähige Methode, YQL einzusetzen, besteht darin, online auf HTML-Content zuzugreifen und für die Wiederverwendung zu filtern. Diesen Vorgang nennt man „scraping“, was so viel bedeutet wie kratzen oder schürfen. Ähnlich mühsam wie Goldschürfen ist auch das Scraping von HTML-Daten. YQL vereinfacht diesen Vorgang aus zwei Gründen:

• Es lässt den aus dem Internet abgefragten HTML-Code durch HTML Tidy laufen.
• YQL erlaubt Ihnen, das Ergebnis mit XPATH zu filtern.

Wenn Sie http://icant.co.uk/ aufrufen, können Sie meine Vortragsliste für diesen Sommer sehen.

Sie können Firebug in Firefox einsetzen, um diesen Bereich der Seite näher zu untersuchen. Öffnen Sie einfach Firebug, klicken Sie die Box mit dem Pfeil direkt neben dem Käfer an und bewegen Sie Ihren Mauszeiger solange über die Seite, bis der blaue Rahmen das Objekt umschließt, das Sie gerne untersuchen möchten.

Setzen Sie einen Rechtsklick auf den ausgewählten Bereich und wählen Sie „CopyXPATH“ aus dem Kontextmenü.

Komfortable Auswahl aus dem Kontexmenü

Wechseln Sie in die YQL-Konsole und tippen Sie das folgende ein:

select * from html where url="http://icant.co.uk" and xpath=''

Kopieren Sie den XPath von Firebug in die Datenbankabfrage und klicken Sie auf „Test“.

select * from html where url="http://icant.co.uk" and
xpath='//*[@id="travels"]'

Wie Sie im Fenster „Formatted View“ sehen können, ruft dies den gewünschten HTML-Content innerhalb von ein wenig XML-Code ab. Der einfachste Weg, diesen Content wiederzuverwenden, ist es, das in YQL so genannte JSON-P-X-Format aufzurufen. Dieses gibt ein einfaches JSON-Objekt wieder, in dem der HTML-Content als String enthalten ist. Um das JSON-Objekt zu nutzen, machen wir folgendes:

1. Kopieren Sie die URL aus dem blau hinterlegten REST-Bereich der Konsole (siehe Abbildung).
2. Setzen Sie &format=xml&callback=travels ans Ende der URL.
3. Fügen Sie die ergänzte URL als src-Element in einen Skriptblock und schreiben Sie diese simple JavaScript-Funktion:

<div id="travels"></div>
<script>function travels(data){
  if(data.results){
    var travels = document.getElementById('travels');
    travels.innerHTML = data.results[0];
  }
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ficant.co.uk%22%20
and%20xpath%3D'%2F%2F*%5B%40id%3D%22travels%22%5D'&
diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
format=xml&callback=travels"></script>

Das Ergebnis ist eine Punktaufzählung meiner Vorträge in Ihrer Website:

Im zweiten Teil dieses Beitrags lesen Sie:

YQL-Datenbankabfragen debuggen
YQL-Syntax
YQL-Praxisbeispiele

(mm),