Mashups: Eine Einführung

Aus THM-Wiki
(Weitergeleitet von Mashups: Eine Einführung)
Wechseln zu: Navigation, Suche

Vortrag und Thesenpapier

 Vortrag als PDF


 Thesenpapier als PDF

Einleitung

Entwickler von Webanwendungen wünschen sich oftmals aufwendige Features, wie einen Routenplaner oder einen Wetterdienst, in eine Anwendung zu integrieren.

Der Aufwand, ein solches Feature selber zu entwickeln, lohnt sich in den meisten Fällen schlicht und einfach nicht. Dies haben auch viele Dienstanbieter im Internet erkannt und bieten ihre Dienste über eine von Außen zugängliche API an. Der Entwickler hat dadurch die Möglichkeit, die angebotenen Features in eigene Projekte nahtlos zu integrieren.

Von diesen sogenannten Webservices profitieren meist Nutzer und Anbieter. Die Art des Nutzen hängt im Allgemeinen von der Lizenz des Services ab. So gibt es verschieden Arten:


  • kostenfreie Nutzung

Ein großer Teil der Dienste ist kostenlos verfügbar. Der Anbieter dieser Dienste profitiert durch eine weite Verbreitung seiner Dienste in Form von Werbung. Außerdem können Nutzerdaten gesammelt und zu beliebigen Zwecken ausgewertet werden.

 Beispiel - Google Maps:
 
 Google ermöglicht die kostenfreie Nutzung von Googlemaps über eine JavaScript API. 
 Für die Nutzung fallen keine Gebühren an. Auf den Karten befindet sich jedoch stehts ein Link zu Google


  • Nutzung gegen Bezahlung

Einige Anbieter verlangen für die Nutzung ihrer Dienste eine Gebühr.

 Beispiel - Thumbnail Service von Alexa (Amazongruppe):
 
 Alexa berechnet für die Auslieferung eines Thumbnailbildes einer Website eine Gebühr von $0.0002 pro Bild.


  • Nutzung zum Verkauf

Bei dieser Variante nutzt der Anbieter den Webservice, um den Nutzern die Vermittlung von Geschäften gegen eine Provision zu ermöglichen.

 Beispiel - Amazon ECommerce Webservice:
 
 Der Webservice von Amazon ermöglich dem Nutzer einen kompletten Aufsatz für Amazon zu 
 entwickeln und zahlt eine Provision für jedes vermittelte Geschäft.

Was bedeutet Mashup?

Das Wort Mashup hat seinen Ursprung in der Musikszene. Früher haben Künstler, meist illegal, aus den Teilen alter Stücke neue Kompositionen gemixt.

Ähnlich verhält es sich bei den Mashups im Internet. Ein Mashup ist eine Verknüpfung mehrerer Dienste zu einer neuen Anwendung. Durch die Komposition der Dienste ergeben sich neue Möglichkeiten. Nach dem Motto: Ein Mashup ist mehr als die Summe seiner Teile.

Wichtige Begriffe

Im Umfeld von Mashups fallen oftmals Begriffe, deren Bedeutung man kennen sollte. Die Wichtigsten möchte ich hier kurz erklären.

Web 2.0

Web 2.0 ist der Oberbegriff für eine Reihe von neuen Philosophien, die das Internet in den letzten Jahren gewandelt haben. Einen guten Artikel hierzu bietet der Oreilly-Gründer Tim O'Reilly: What is the Web 2.0? .

Ajax

Im Zusammenhang mit Mashups bekommt man immer wieder auch den Begriff Ajax zu hören. Bei Ajax handelt es sich um eine Technik, die asynchrone Aufrufe mittels JavaScript ermöglicht.

Folgendes Codebeispiel zeigt die Erzeugung eines Objekts zur Nutzung von Ajax für die jeweils verschiedenen Browser:

 function createRequest(){
 	//rq -> request
 	var rq;
       if (window.XMLHttpRequest) { 
           rq = new XMLHttpRequest(); //Mozilla, Safari,Opera
       } else if (window.ActiveXObject) { 
           try {
               rq = new ActiveXObject("Msxml2.XMLHTTP"); //IE 5
           } catch (e) {
               try {
                   rq = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6
               } catch (e) {}
           }
      }
      return rq;
 }

Das rq Objekt kann dazu genutzt werden, mittels JavaScript, asynchrone HTTP Requests durchzuführen und die Ergebnisse lokal zu verarbeiten. Mehr zum Thema Ajax im dazu gehöringen Seminar.

Voraussetzungen

Durch die Vielzahl der Dienste und deren Implementierung gibt es einige Techniken, die man beherrschen muss, um einen Mashup zu implementieren. Zu nennen ist hier:


  • XML

Nachrichten die zu einem Webservice gesendet werden und von dem Webservice empfangen werden, sind in XML kodiert.


  • Soap

Die Abkürzung Soap steht für Simple Object Access Protocol. Mit Hilfe von Soap ist es möglich, Methoden von entfernten Objekten aufzurufen. Der Nachteil von Soap ist, dass Nachrichten sehr groß werden und der Aufbau keineswegs einfach ist.

Die Soap Implementierung in PHP5 macht die Erstellung von Soap Nachrichten jedoch relativ einfach. Der Transport der in XML kodierten Nachrichten erfolgt über das HTTP Protokoll mit einem normalen HTTP Server.


  • REST

REST (REpresentational State Transfer) beschreibt einen Architekturstil, in dem Ressourcen über eine Url erreichbar sind. Der Webservice von Amazon nutzt Soap und Rest.

Die Umsetzung von Rest sieht beim Amazon Webservice so aus, dass Anfragen an den Webservice über eine Url mit bestimmten Parametern gesendet werden. Der Webservice antwortet auf diese Anfrage mit einer speziell kodierten XML Nachricht. Diese Lösung bietet den Vorteil, dass die Erstellung und der Versand eines umfangreichen Soap Requests komplett entfällt.

Die Verwendung von REST hat sich bei einigen Anbietern durchgesetzt, da die Verwendung einfacher ist als bei SOAP.


  • XML-RPC

XML-RPC ist eine Technologie, um Funktionen über Netzwerke auf anderen Systemen auszuführen. Die Übermittlung der Aufrufe und deren Ergebnisse sind in XML codiert.


  • JavaScript

JavaScript ist eine von Netscape entwickelte Skriptsprache, die durch den Webbrowser auf der Clientseite ausgeführt wird. JavaScript wird aus diesem Grund häufig genutzt, um clientseitige Interaktivität umzusetzen, wie z.B. animierte Menüs etc. In der letzten Zeit ist JavaScript durch Ajax wieder mehr in "Mode" gekommen. Da Mashups Daten von mehreren Webservices anfordern, bietet es sich an, Frontend frühzeitig zu laden und Ergebnisse der Webservices nachträglich über Ajax vom Webserver nachzuladen.

Mashups

Übersicht über verfügbare Dienste

Fast alle größeren Anbieter im Internet ermöglichen den Zugriff auf Dienste über APIs, hier die bekanntesten Anbieter:

"Alle großen Namen des Internets sind bei den APIs vertreten"

Google:

Google bietet Zugriff auf die Suchergebnisse und GoogleMaps über eine JavaScript API. Der Zugriff auf die Werbedienste Adwords und Adsense ist ebenfalls über eine API möglich. Für Suchergebnisse von Google gab es früher eine SOAP-API, die aber im Laufe der Zeit eingestellt wurde.


Amazon:

Amazon bietet den Zugriff auf sein Produkangebot über eine API an. Nach der Registrierung kann man über eine REST und SOAP Schnittstelle auf das Angebot von Amazon zugreifen. Zur Amazon Gruppe gehört auch die Suchmaschine Alexa. Zugriffe auf die Suchergebnisse oder Screenshots von Alexa sind ebenfalls möglich, jedoch kostenpflichtig.


Yahoo:

Yahoo bietet ebenfalls Zugriff auf Suchergebnisse und Geodienste. Es gibt sehr viele Programmiersprachen, Beispiele und Klassen die man verwenden kann. Ebenfalls verfügbar sind Schnittstellen zu den Yahoo Portalen Flickr, Upcoming.org und Webjay.org


Microsoft:

Microsoft bietet Zugriff auf die Suchergebnisse von MSN Live und zu einem Geodienst.

Mögliche Kombinationen

Es sind viele Kombinationsmöglichkeiten denkbar. Die meisten, die zur Zeit im Internet zu finden sind, sind Geo Anwendungen wie z.b. "Wo finde ich den nächsten Golfplatz?". Eine Übersicht über realisierte Mashups bieten folgende Webseiten:

Implementierung an einem Beispiel

In diesem Text möchte ich ein Minimalbeispiel für einen Mashup geben. Für diesen Mashup wird die API von Amazon genutzt, um die CD Cover eines bestimmten Künstlers abzufragen. Gleichzeitig wird last.fm genutzt um zu diesem Künstler ähnliche Künstler zu ermitteln.

Durch einen Klick auf diesen ähnlichen Künstler, werden ebenfalls die verfügbaren CDs bei Amazon ermittelt. Dadurch ist das Stöbern durch ein Genre von Künstlern möglich.

Zur Implementierung wurde PHP5 genutzt. PHP5 bietet eine einfache Möglichkeit zum Erzeugen von SOAP Requests und auch eine einfache Möglichkeit zum Parsen von XML-Nachrichten.

Vom Amazon Webservice wurde die Soap Schnittstelle genutzt, die einen Accesskey erfordert (Dieser ist hier erhältlich). Von Last.fm wurde die XML-REST-Schnittstelle genutzt.

Hier die Implementierung der Klasse Artist:

 <?php
 class Artist{
 	private $name;	
 	private $similar;
 	private $cds;
 
 	public function __construct($name){
 		$this->name = $name;
 		$this->similar = array();
 	}
 	
 	public function fetchSimilar(){
 		$lookup_artist = str_replace(" ","+",trim($this->name));	
 		$url = "http://ws.audioscrobbler.com/1.0/artist/".$lookup_artist."/similar.xml";
 		$fp = @fopen($url,"r");
 		if($fp){
 			while(!feof($fp))
 			{
 				$content .= fgets($fp, 1024);
 			}
 			fclose($fp);
 			
 			$similar = simplexml_load_string($content);
 		
 			foreach($similar as $artist){
 				$this->similar[] = $artist->name;
 			}
 		}
 	}
 	
 	public function fetchCDs($amazon_wsdl, $amazon_key){
 		$params->AWSAccessKeyId = $amazon_key;
 		$params->Request->SearchIndex = 'Music';
 		$params->Request->Keywords = $this->name;
 		$params->Request->ResponseGroup = 'Images,Small,Large,Tracks';
 		
 		$amazon = new SoapClient($amazon_wsdl);
 		$result = $amazon->itemSearch($params); 
 		
 		$items = $result->Items->Item; 
 		foreach($items as $item){
 			
 			$cd = new CD($item->ItemAttributes->Title);
 			$cd->addCover($item->MediumImage->URL);
 			$tracks = $item->Tracks->Disc->Track;
 			
 			if(is_array($tracks)){
 				foreach($tracks as $track){
 					$cd->addTrack($item->Track->Disc->Number,$track->Number, $track->_, );
 				}
 			}
 			
 			$this->cds[] = $cd;
 		}
 	}
 	
 	public function getCDs(){
 		return $this->cds;
 	}
 	
 	public function getName(){
 		return $this->name;
 	}
 		
 	public function getSimilar(){
 		return $this->similar;
 	}
 }
 ?>

Hier ein kleines Skript zur Nutzung der Klasse. Dabei ist anzumerken, dass HTML und PHP nicht getrennt wurde, um den Quellcode nicht unnötig aufzublähen.

 <?php
 
  require_once('conf/config.inc.php');
  require_once('classes/class.cd.php');
  require_once('classes/class.artist.php');
   
  if(!$_REQUEST['submitted']){
  	?>
  	<form action="test.php" method="post">
  		Künstler: <input type="text" name="artist">
  		<input type="hidden" name="submitted" value="true">
  		<input type="submit" value="Senden">
  	</form> 	
  	<?php	
  }
  else
  {
  	$artistname = htmlspecialchars(mysql_escape_string($_REQUEST['artist']));
  	$artist = new Artist($artistname);
  	
  	$artist->fetchSimilar();
  	$artist->fetchCDs($_CONFIG['amazon']['wsdl'],$_CONFIG['amazon']['key']);
  	
  	foreach($artist->getCDs() as $cd){
  		echo "<img src='".$cd->getCover()."'>
"; }  ?>
    <?php foreach($artist->getSimilar() as $similar){ echo "
  • <a href='test.php?submitted=true&artist=".$similar."'>".$similar."</a>"; }  ?>
  <?php 	
 	
  }
 ?>

Die Erzeugung des PHP5 Soap Objekts erfolgt in folgender Zeile:

 $amazon = new SoapClient($amazon_wsdl);

In $amazon_wsdl befindet sich die Url der WSDL Definition des Amazon Webservices (http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl?). Dadurch kann die PHP Soap Klasse die verfügbaren Methoden des Dienstes ermitteln.

Für die Ermittlung ähnlicher Künstler wird die XML-REST Schnittstelle von audioscrobber (last.fm) benutzt. Wichtig sind hierbei folgende Codefragmente:

 $lookup_artist = str_replace(" ","+",trim($this->name));	
 $url = "http://ws.audioscrobbler.com/1.0/artist/".$lookup_artist."/similar.xml";
 $fp = @fopen($url,"r");
 ...
 $similar = simplexml_load_string($content);

Im Namen des Künstlers werden eventuelle Leerzeichen durch + ersetzt, da so das Auffinden wahrscheinlicher ist. Danach wird diese Url geöffnet und mit Simple XML geparst.

In diesem Screenshot ist die Suche nach dem Künstler "Heino" durch das Mashupskript zu sehen:


"Suche nach Heino"


Eine Erweiterung dieses Dienstes durch andere Services ist denkbar. Ein Beispiel wäre die Einbindung von Tourdaten über einen Ticketdienst. Im Rahmen des Wettberwerbs der Zeitschrift ct ist ein ähnliches Mashup entstanden, welches hier zu finden ist. In diesen Mashup wurden jedoch wesentlich mehr Dienste integriert, wie z.B. das Bereitstellen und Anzeigen der Videos zu einem Künstler von YouTube, oder Fotos des Künstlers von Flickr. Es zeigt aber gut, welche Möglichkeiten es gibt.

Ausblick

Es entstehen zur Zeit immer mehr neue Dienste, wodurch sich auch die Kombinationsmöglichkeiten erweitern.

An geeigneter Stelle in einem Webangebot, lassen sich diese neuen Dienste dann leicht integrieren und das gesamte Internet wird bereichert.

Fazit

Mashups sind im Moment ein Hype. Bei einigen Mashups gibt es durchaus einen Nutzwert durch sinnvolle Einsatzzwecke, jedoch wird das Potential meiner Meinung nach oftmals überbewertet.

Das liegt meiner Meinung auch daran, dass es einige APIs gibt die nur über die Clientseitige Sprache JavaScript verfügbar sind (z.B. GoogleMaps und GoogleAjax Search). Dadurch ist die Nutzung der Ergebnisse, z.B. in einer Datenbank, zwar nicht unmöglich jedoch nur noch umständlich über den Client möglich.

Ein weiteres Manko ist die große Vielfalt der genutzten Techniken, Keys, Lizenzbedingungen etc.

weiterführende Literatur und Quellen

Onlineressourcen

  • Soap
http://de.wikipedia.org/wiki/SOAP
  • REST
http://www.oio.de/public/xml/rest-webservices.htm

Artikel

  • Artikel der ct (verfügbar in eStudy)
  • T3N Aufgabe 4/2006 Kombiniere! Mashups mischen die Karten im Netz neu