Mijn eerste mashup (dutch)

Nog maar eens een Web 2.0 definitie: Web 2.0 biedt een globaal en universeel platform voor de ontwikkeling en verspreiding van interactieve web toepassingen. Zo'n toepassing combineert doorgaans functionaliteit van diverse Web Services en maakt gebruik van RIA (Rich Internet Application) principes voor de realisatie van de user interface. De populaire naam hiervoor is "Mashup". Voor deze mashups wordt doorgaans een zeer lichte vorm van service orientatie toegepast dat Web-oriented Archtecture (WOA) wordt genoemd.

Een google search op mashup levert veel resultaten, waarvan de opvallendste de mashup matrix van programmableweb.com is. Op programmableweb.com worden alle Web APIs verzameld en kunnen kruisingen tussen Web APIs worden gevonden. Een hele gave website!

Onderstaand plaatje toont de populairste Web APIs (van de afgelopen 14 dagen)

Er is ook een Mashup Howto op deze website te vinden. Met deze howto ben ik dan maar eens aan de slag gegaan.

Ik wilde beginnen met iets eenvoudigs. Uiteraard iets met Google Maps (vrij letterlijk "hello world" dus). Na wat grasduinen in de diverse APIs viel mijn oog op de Web API van Geonames.org. Met deze API kun je o.a. postcodes, plaatsnamen en weersgegevens vinden bij geografische coördinaten.

Ik besloot daarom een online postcodezoeker (postal code mapper) te maken. De postcodezoeker maakt het mogelijk om de gebruiker door aanwijzen van een plek op een geografische kaart postcodes in de omgeving van ze plek te vinden. De postcodezoeker probeert verder op basis van het IP-adres van de gebruiker te bepalen in welk land de gebruiker zich bevindt en zal bij het laden de kaart van dat land tonen.

De GoogleMaps API komt in de vorm van een Javascript class library. Het is zeer goed gedocumenteerd en erg eenvoudig in gebruik. In minder dan 10 minuten heb je een web-pagina met een interactieve wereldkaart erop. je hebt er een (gratis) key voor nodig die gebonden is aan het webdomein van jouw applicatie.

Geonames.org biedt diverse web services rond geografische data zoals postcodes en plaatsnamen, maar ook meer informatieve data zoals recente aardbevingen, actuele weergegevens en wikipedia artikelen gekoppeld aan geografische coordinaten.

Alle Geonames services zijn gebaseerd op REST en de meeste hebben zowel een XML als een JSON interface.

De Geonames Web API is eenvoudig van opzet en redelijk goed gedocumenteerd. Door de mogelijkheid JSON te gebruiken is de aanroep van deze services vanuit Javascript erg eenvoudig. Jammer is de inconsequente naamgeving van data attributen tussen de diverse service outputs en zelfs tussen de XML en JSON variant van dezelfde service.

Het is heel eenvoudig om met deze twee APIs snel iets werkends te krijgen. Door de toepassing van JSONRequest kun je zonder dat je daarvoor op een eigen server een gateway hoeft in te richten, web services aanroepen uit verschillende web domeinen. Met de XMLHttpRequest kan dit niet zondermeer vanwege de same origin policy.

Ik heb ervoor gekozen om geen gebruik te maken van een Ajax toolkit omdat ik geen gebruik maak van geavanceerde UI widgets. Ik maak voor het updaten van de user interface gebruik van eenvoudige DOM-manipulatie. Een absolute aanrader en musthave bookmark voor Ajax doe-het-zelvers is overigens Quirksmode.

Mijn knutselwerkje kun je hier bekijken. Best een leuk resultaat, al zeg ik het zelf.