Freier Routing-Dienst von MapQuest

Posted by Matthias Gutjahr • Wednesday, September 1. 2010 • Category: Deutsche Beiträge

Mapping ist ja einfach nur ein Hobby von mir. Seit ich vor einigen Jahren die Community-betriebene Openstreetmap entdeckt habe, faszinieren mich die unterschiedlichen Facetten dieses Themenkomplexes ungemein. Regelmäßig lese ich einige Mapping-Blogs, unter anderem OpenGeoData. Dort wurde gestern ein Hinweis auf ein neues, offenes Routing-API von MapQuest gepostet. Routing und Navigation waren bisher eigentlich immer so die Punkte, die ich als noch zu jung und experimentell und meist für den Praxiseinsatz unbrauchbar empfand. Das könnte sich nun ändern, denn der frei zugängliche Routingdienst von MapQuest setzt im Hintergrund auf Daten der Openstreetmap.

Interessehalber habe ich die Dokumentation mal überflogen und dieses Beispiel minimal abgewandelt, um den Dienst testen zu können. Funktionert 1A! So sieht das Ergebnis aus (bitte auf "Route berechnen" klicken):

| OCOinS | unAPITweet This!

API-Schlüssel in YQL Storage sicher speichern

Posted by Matthias Gutjahr • Friday, August 6. 2010 • Category: Deutsche Beiträge

YQL LogoVorhin habe ich etwas mit YQL herumgespielt und versuchsweise das API von last.fm angezapft. Der Aufruf der einzelnen Methoden setzt einen API-Schlüssel ("API Key") voraus, den man problemlos bei last.fm beantragen kann. Ich habe mich lange gefragt, wie ich diese Methoden mit reinem Javascript auf einer öffentlich zugänglichen Webseite aufrufen kann, ohne meinen API Key ebenfalls öffentlich zu machen. Denn beim Testen innerhalb der YQL Console ist er Teil des SELECT-Statements, auf meiner Seite darf er das nicht mehr sein. Im folgenden zeige ich, aufbauend auf einem Artikel von Nagesh Susarla, was zu tun ist, damit man den geheimen API-Schlüssel geheim halten und dennoch für seine YQL-Abfragen nutzen kann.

Damit kann ich beispielsweise meine wöchentlichen Top-Künstler von last.fm abrufen kann, reichen mir ein paar Zeilen Javascript-Code, einen eigenen Webserver benötige ich dafür gar nicht. Als Grundlage dient mir das offizielle YQL-Tutorial First YQL Application, das ihr euch vielleicht ansehen solltet, falls ihr noch nie mit YQL zu tun hattet. Die Daten, sprich meine Top-Künstler, beziehe ich aus der Community Table lastfm.user.getweeklyartistchart (dort auf Test klicken).

Um nun an meine Liste heranzukommen, schicke ich folgende Abfrage ab:

select '*' from lastfm.user.getweeklyartistchart where user = 'numblog' and api_key = 'API_KEY'

In der YQL Console ausführen (ihr benötigt einen gültigen API Key) - Hinweis: Die Hochkommata um das Sternchen bitte weglassen; die stehen da nur, weil sonst das Syntax-Highlighting kaputt geht.

Wollte ich diese Abfrage in meine Webseite einbinden, wäre der API Key für alle lesbar:

Ich will natürlich vermeiden, dass Dritte mit meinem API Key auf last.fm zugreifen. Hier kommt Yahoo! Sherpa ins Spiel, ein Key-Value-Store in der Cloud. Dieser kann ebenfalls via YQL angesprochen werden und bietet die üblichen Vorteile (und Nachteile) einer Cloud-Lösung. Zwei Open Data Tables werden angeboten, yql.storage und yql.storage.admin, wobei yql.storage.admin die Tabelle unserer Wahl ist, weil sie nur nach erfolgter OAuth-Anmeldung oder über die YQL Console befüllbar ist. Mehr Info dazu bietet die Dokumentation.

Aber gehen wir noch einmal einen Schritt zurück. Anstatt den API Key in der WHERE-Bedingung zu übergeben, könnten wir auch folgendermaßen vorgehen und die Variable schon vor unserer Abfrage setzen:

use 'http://www.datatables.org/lastfm/lastfm.user.getweeklyartistchart.xml' as lastfm.user.getweeklyartistchart;
set api_key='API_KEY' on lastfm.user.getweeklyartistchart;
select "*" from lastfm.user.getweeklyartistchart where user = 'numblog';

Wenn wir dies nun mit der Tabelle yql.storage.admin verbinden und in der YQL Console (in eingeloggtem Zustand, ihr benötigt also auch einen Yahoo!-Account) die Daten mit dem entsprechenden Statement in die Cloud schreiben:

insert into yql.storage.admin (value) values ("use 'http://www.datatables.org/lastfm/lastfm.user.getweeklyartistchart.xml' as lastfm.user.getweeklyartistchart;
set api_key='API_KEY' on lastfm.user.getweeklyartistchart;")

dann erhalten wir dem folgenden ähnliches XML zurück:

    
        store://I2KUjXfoobarAzIw0v3vfv
        store://p6QZPnGmgyoafoobarNimz
        store://jTfoobarMLleWbJoMY8phd
    

Dieses Ergebnis solltet ihr euch gleich mal in einen Editor kopieren, denn das benötigen wir gleich wieder zur Abfrage auf unserer Webseite. Kurz erklärt:

  • Der execute-Schlüssel kann nur zur Ausführung von Abfragen verwendet werden. Die hinterlegten Daten werden nicht ausgegeben.
  • Der select-Schlüssel sollte geheim bleiben, denn damit lassen sich die Einträge aus yql.storage auslesen.
  • Der update-Schlüssel erlaubt das Verändern dieser Einträge; somit sollte auch er geheim bleiben.
Mithilfe des execute-Schlüssels, den wir als Umgebungsvariable übergeben, lässt sich unsere Abfrage nun ohne Angabe des API Key ausführen:

Ihr könnt in der YQL Console auch gern die Sicherheit des execute-Schlüssels testen und werdet einen Permission-Error zurückbekommen:

select * from yql.storage where name='store://I2KUjXfoobarAzIw0v3vfv'

In der YQL Console ausführen.

Somit steht dem clientseitigen Anzapfen diverser APIs nichts mehr im Wege, auch wenn ein API Key verlangt wird. Momentan gibt es bereits weit über 800 Open Data Tables, über die Daten von den verschiedensten Diensten abgerufen werden. Viele davon sind frei zugänglich, andere benötigen einen API Key. Fragt ihr diese vom Server aus ab, stellt das kein Problem dar. Eine rein clientseitige Lösung im Browser hat aber auch ihren Charme. Es wird kein Server benötigt und daher auch nicht belastet, Yahoo! übernimmt im Hintergrund viel Arbeit (Caching, Fehlerbehandlung, ...) für euch, und möglicherweise ist alles viel schneller. Und jetzt auch sicher.

Hier die simple Ausgabeliste meines einfachen Beispiels:

Defined tags for this entry: , , , , , ,
| OCOinS | unAPITweet This!

Session: Efficient Javascript

Posted by Matthias Gutjahr • Saturday, October 11. 2008

"Wie code ich richtig in Javascript?" von Wolfram Kriesing. Code Conventions usw. Brauchbare Editoren: Komodo, Aptana, Eclipse, Netbeans wegen Code Completion, Syntax Check, Code Analyzer (JSLint, findet z.B. IE traps [in phing? svn? your IDE?]) und alles, was für andere Programmiersprachen auch zutrifft. Templates für Code-Strukturen, für das ganze Team. Testen mit Hilfe der Firebug-Konsole nicht vergessen, die auch Auto-Completion mitbringt und das komplette API anzeigen kann.

Watch the traffic: Neben Fiddler und HTTPLiveHeaders existiert auch noch Charles. Nützlich sind auch Debugger, neuerdings auch innerhalb von Eclipse (PDT). Im Sourcecode: debugger; ist ein selbstgesetzter Breakpoint. console.time() und console.timeEnd() und andere console-Methoden. functionName.toString() gibt im Firebug den Sourcecode einer Funktion aus. Firebug hat einen Profiler. Dojo hat einen DocTest.

Update: Wolfram, mit dem ich mich auf der BarCamp-Party am Samstag noch sehr nett unterhalten habe, hat mittlerweile die Slides seiner beiden Vorträge online gestellt.

Defined tags for this entry: , , , ,
| OCOinS | unAPITweet This!

Jam-Session: Professionelles Javascript

Posted by Matthias Gutjahr • Sunday, April 27. 2008 • Category: Deutsche Beiträge

Micheal Probst Stuckmann stellt seine Diplomarbeit über den professionellen Einsatz von Javascript vor. Erste Feststellung: Firebug FTW! Zweitens: Spheregazer, eine App, die interaktive Sternkarten zeichnet. Im Background werkeln eine MySql-Datenbank und Java Servlets (JSP). Javascript-Codebase ist 2,5 MB groß - puh. Ein Problem beim Erstellen der "Sternenkugel" als SVG war der Zugriff aufs DOM der SVG und deren Manipulation. Das Killer-Javascript-IDE fehlt noch, aber Aptana funktioniert oft schon sehr gut. Eingesetzte Libs: Prototype, Scriptaculous, Dojo für GUI-Elemente. Mangelhaft ist allerdings oft die Dokumentation der Libraries, und die Entwicklergemeinde ist überschaubar.

Der Code hinter Spheregazer ist weitgehend objektorientiert und nach MVC-Logik aufgebaut und daher gut erweiterbar und übersichtlich. Model und View kommunizieren manchmal aber direkt ohne Umweg über den Controller. Daten werden über JSON übertragen. Ein weiteres Problem ist Memory-Management, das keiner der modernen Browser wirklich von Haus aus unterstützt (außer FF3 jetzt); Speicher von Objekten, die dereferenziert werden, wird in der Regel nämlich nicht mehr freigegeben. Und DOM-Knoten sind sehr speicherintensiv. Frage: Geschäftslogik ins Javascript verlagern? Antwort: Ja, ist prinzipiell gut und schnell; nur ob man das will, d.h. ob man die Prozesse öffentlich machen möchte, muss entschieden werden. Dokumentiert wurde mithilfe von JSDOC, und das Projekt soll auch in Zukunft fortgeführt werden.

Defined tags for this entry: , , , , ,
| OCOinS | unAPITweet This!

jQuery, mootools, Prototype in Serendipity

Posted by Matthias Gutjahr • Sunday, August 26. 2007 • Category: English Articles

I've fallen deeply in love with JavaScript libraries like jQuery in the past months. There's so much cool stuff you can do by simply including one ore more .js files to your web site. Be it form validation, GUI-like elements, or just toggling the visibility of block elements. Image overlay effects like Lightbox or Thickbox are based on these libraries, too.

So I decided it was about time we had those libs in Serendipity. We need them to create a more intuitive user experience both in the frontend and the backend. Especially in the backend, where other blog tools like Movable Type 4 look much slicker to me. Anyway, I sat down and hacked together a new plugin for S9y that lets you include jQuery and some of its plugins, mootools (including many extensions in one file), and Prototype in your web site. You can choose between frontend and backend display and select single plugins for jQuery (my favorite lib right now). I would really appreciate it if some S9y users/developers would download and install the plugin and give me feedback on it (forum seems to be down, but there's already a thread on this).

To give you an idea of what could be done with it, I edited the default admin templates, got rid of all the tables and exchanged them for divs. Then I added some tabs to the "edit entry" area with the help of the tabs plugin for jQuery. You can see the result if you open the short video of the desktop session I recorded with Istanbul (in Ogg Theora format, no sound).

Continue reading "jQuery, mootools, Prototype in Serendipity"

Defined tags for this entry: , , , , , , ,
| OCOinS | unAPITweet This!

A Simple Sidebar

tweetbackcheck