Pod nazwą "mashup" kryją się witryny internetowe, a raczej aplikacje widoczne w postaci strony internetowej, które łączą różne gotowe usługi udostępniane przez inne serwisy WWW, tworząc zupełnie nową jakość. Twórcy mashupów wykorzystują publicznie dostępne funkcje innych witryn (tzw. API - Application Programming Interface), używają także kanałów RSS, dodając do tego własny kod np. w PHP lub JavaScripcie i ewentualnie korzystając z dodatkowej, własnej bazy danych. Pomysł wydaje się bardzo prosty, ale jest to prawdziwa rewolucja w tworzeniu witryn internetowych. Korzystając z API udostępnianych przez internetowych gigantów, takich jak Google, Amazon, eBay czy Windows Live, można w ciągu kilku godzin przygotować potężny serwis WWW, oferujący niezwykłe usługi.

Zaczęło się od Google Maps

Chicago Crime Map - doskonały mashup, łączący bazę danych i mapy z Google Maps. Witryny zbudowane na zasadzie mashup istnieją od dawna, ale taka metoda tworzenia serwisów stała się naprawdę popularna dopiero w roku 2005, wraz z udostępnieniem przez Google zestawu funkcji umożliwiających korzystanie z serwisu Google Maps. Jak grzyby po deszczu wyrastały nowe witryny, łączące dokładne mapy i zdjęcia satelitarne z Google z własnymi informacjami. Chicago Crime Map ( www.chicagocrime.org ) pokazuje miejsca popełnienia przestępstw na terenie miasta i pozwala się błyskawicznie zorientować, gdzie najczęściej zdarzają się np. kradzieże samochodów. Witryna podbop.org umożliwia bezpłatne słuchanie muzyki wykonawców, którzy w najbliższym czasie będą grali na żywo w danym mieście.

Praca z AJAX-em - czystym relaksem

Codziennie w Internecie rejestrowane są średnio trzy no-we witryny typu mashup (wg witryny www.mashupfeed.com). Dużo, ale to dopiero początek. Innowacyjne witryny typu mashup mogą kompletnie odmienić oblicze Internetu, pokazują, jak będzie wyglądać WWW przyszłości. Są w rzeczywistości publicznie dostępnymi aplikacjami, niewymagającymi do działania żadnego systemu operacyjnego - wystarczy przeglądarka internetowa. Wykorzystanie technologii AJAX pozwala tworzyć witryny w pełni interaktywne, całkowicie odmienne od prostych stron z tekstem i grafiką. Dobry przykład to serwisy wykorzystujące funkcje udostępniane przez Google Maps. Wyświetlana mapa lub zdjęcie satelitarne są w pełni interaktywne - można je przesuwać myszą, skalować, zaznaczać wybrane punkty, zupełnie tak, jakbyśmy mieli do czynienia z pełnoprawną aplikacją, a nie dokumentem wyświetlanym w przeglądarce.

Mashup za pieniądze?

Mashup na stronie www.worldtv.com/charts wyświetla najpopularniejsze klipy wideo z innych serwisów WWW. Mimo tak obiecujących początków przyszłość mashupów nie jest pewna. Nie wiadomo, jak długo największe serwisy będą udostępniać swoje biblioteki. Może zostaną wprowadzone opłaty za korzystanie z cudzych narzędzi? Wiele zależy od dzisiejszych internetowych gigantów, takich jak Google, Flickr czy Ebay. Firma Google zapowiedziała już wprowadzenie opłat od komercyjnego wykorzystywania Google Maps, ale bliższe szczegóły nie są znane. Prawdopodobnie niekomercyjne korzystanie z bibliotek Google Maps pozostanie bezpłatne i dziesiątki ciekawych witryn opartych na mapach Google nie będą musiały kończyć działalności.

Strony o technologii mashup: www.programmableweb.com , wsfinder.jot.com/WikiHome , www.mashupfeed.com.

Zrób to sam

Tworzenie witryny tego typu może wydawać się skomplikowane. Rzeczywiście, mashup tworzony od zera wymaga przynajmniej pobieżnej znajomości języka PHP i JavaScriptu, przyda się także konto WWW z dostępem do bazy MySQL. Najważniejszy jest jednak dobry, niepowtarzalny pomysł. Jeśli nie masz dostępu do serwera WWW, możesz wykorzystać serwis oferujący bezpłatne narzędzia do tworzenia mashupów: www.ning.com . Ning.com pozwala dosłownie w ciągu kilku minut przygotować funkcjonalny serwis, wykorzystujący funkcje udostępniane m.in. przez Google Maps czy Ebay. Chcesz utworzyć serwis umożliwiający dodawanie zdjęć do mapy w Google Maps? Zajmie to tylko kilka minut, nie wymaga konta WWW ani znajomości technik webmasterskich. Aplikacje tworzone za pomocą serwisu ning.com mają też wady, przede wszystkim nie można zmienić języka - wszystkie serwisy powstające w ning.com są w języku angielskim, bez wątpienia jednak jest to dobre miejsce dla początkujących. Jak przygotować najprostszy serwis za pomocą ning.com ?

#1.#Otwórz stronę www.ning.com i kliknij pole Discover. Najpierw warto przyjrzeć się istniejącym serwisom. Gdy będziesz mieć pomysł na swoją witrynę, wróć do pierwszej strony i kliknij pole Clone & Customize. Na potrzeby tego miniwarsztatu przygotujemy serwis z ogłoszeniami. Kliknij pozycję Photo Maps, a następnie odnośnik Clone this App. Przed rozpoczęciem budowy serwisu musisz założyć konto w ning.com.	#2.#Utworzenie nowego serwisu typu Photo Maps wymaga podania nazwy aplikacji i nazwy strony (pojedyncze słowo). Jeśli nazwiesz stronę "obrazki", to nowy serwis dostępny będzie pod adresem obrazki.ning.com. Należy także wybrać tematykę, której poświęcony będzie serwis (Category), podać kilka słów kluczowych (Tags). Możesz także przygotować mały obrazek - logo serwisu i wskazać je w polu App Image. Na koniec kliknij przycisk Save & Continue.	#3.#Na kolejnej stronie wybierasz sposób prezentacji nazwy strony. W dolnej części strony znajdziesz miniaturową mapę - przesuń ją tak, aby zawierała domyślny obszar, dla którego tworzysz serwis (np. teren Polski). Ponownie kliknij przycisk Save & Continue. Trzeci etap można pominąć - kliknij odnośnik Let's skip this part - take me to my new App! Nowy serwis jest już w pełni funkcjonalny, ale można poprawić jego wygląd i uczynić tę prostą stronę niepowtarzalną.

#4.#Czas przetestować serwis. Kliknij przycisk Add Photo i dodaj pierwsze zdjęcie. Jeśli uznasz, że mapa może być wyświetlana lepiej, kliknij odnośnik Fine tune your map, przesuń i powiększ mapę (możesz także przełączyć widok na zdjęcie satelitarne - Satellite), a na koniec kliknij przycisk Save Map View. Możesz także w każdej chwili kliknąć odnośnik Manage App i zmienić poprzednio wybrane ustawienia.	#5.#Serwisem utworzonym na ning.com można zarządzać niemal tak samo, jak każdą inną stroną WWW. Użyj odnośnika Edit source code. Korzystając z opcji Download pobierzesz pliki tworzące stronę na dysk. Jeśli chciałbyś np. przetłumaczyć swój serwis na język polski, pobierz wszystkie pliki z rozszerzeniem .php i dokładnie je przejrzyj. To trudne i czasochłonne, ale - przynajmniej teoretycznie - można przełożyć znaczną część interfejsu serwisu na dowolny język (należy też pamiętać o zmianie strony kodowej).	#6.#Przetłumaczenie napisów to tylko część możliwości. Znajomość języka PHP pozwoli zmienić nie tylko wygląd, ale i działanie serwisu, a nawet dodać do strony zbudowanej na nig.com własne elementy: odnośniki, dodatkowe rysunki itd. Przed każdym uaktualnieniem plików PHP lub CSS należy zachować ich poprzednie wersje. Możesz po prostu przechowywać oryginalne wersje plików na własnym twardym dysku albo użyć opcji Backup & Restore i zapisać dokładną kopię serwisu na serwerze ning.com.

Jak zrobić mashup?

Budowanie własnej witryny typu mashup niewiele różni się od tworzenia zwykłej strony WWW, opartej na bazie danych i skryptach PHP. Różnica polega na umiejętnym wykorzystaniu funkcji udostępnianych przez inne serwisy i połączeniu ich w sensowną całość. W naszym prostym warsztacie prześledzimy kolejne etapy tworzenia witryny mashup łączącej działanie serwisu Google Maps, prostej bazy danych i... Gadu-Gadu. Witryna wyświetlać będzie zdjęcie satelitarne wybranego obszaru, a internauta otrzyma możliwość zaznaczenia swojej pozycji wraz z podaniem numeru Gadu-Gadu i przesłaniem zdjęcia. Specjalne znaczniki (markery) pokażą pozycje innych użytkowników.

Do utworzenia takiego serwisu WWW konieczny będzie dostęp do konta WWW z obsługą PHP i bazą MySQL. Ostatecznie można zainstalować serwer WWW i MySQL na własnym komputerze i testować działanie witryny na domowym pececie. Przyda się także program do edycji plików PHP - może to być np. bezpłatny Zajączek ( amigo.pop.pl ). Edytory dla webmasterów mają wbudowane proste moduły FTP, ale do umieszczania plików na serwerze najwygodniej użyć osobnego programu, np. FileZilla ( filezilla.sourceforge.net ) lub CuteFTP ( www.cuteftp.com ).

Aby samodzielnie przygotować tego typu witrynę, trzeba znać przynajmniej podstawy języka PHP i bazy danych MySQL. Przed przystąpieniem do budowy witryny należy utworzyć bazę danych zawierającą pojedynczą tabelę mapa z polami id, nazwa, gg, foto, x oraz y. Utworzenie tabeli ułatwi dobry skrypt administracyjny, np. phpMyAdmin, ale wystarczy uruchomić odpowiednie polecenie SQL.

CREATE TABLE mapa (
id bigint(20) NOT NULL auto_increment,
nazwa varchar(20) NOT NULL default '',
gg varchar(10) NOT NULL default '',
foto varchar(50) NOT NULL default '',
x double NOT NULL
default '0',
y double NOT NULL
default '0',
PRIMARY KEY (id)
);

Przed budową witryny upewnij się, że możesz połączyć się z bazą danych za pomocą skryptu PHP. Możesz umieścić w tabeli mapa kilka przykładowych danych i sprawdzić komunikację PHP-baza danych za pomocą prostego skryptu:

<?php
$dbh = mysql_connect("111.11.11",
"nazwa_uzytkownika", "haslo")
or die ('Nie mogę połączyć się z bazą! Błąd: ' . mysql_error());
mysql_select_db("nazwa_bazy");
$result =
mysql_query("SELECT * FROM mapa",$dbh);
while($row =
mysql_fetch_array($result))
{
$x = $row["x"];
$y = $row["y"];
$nazwa =
$row["nazwa"];
$gg = $row["gg"];
$foto = $row["foto"];
echo "Test: $nazwa, $x, $y, $gg,
$foto<br>";
}
mysql_close($dbh);
?>

Oczywiście zamiast adresu 111.11.11 należy podać prawdziwy adres serwera MySQL (jeśli testujesz wszystko na domowym komputerze, będzie to localhost). Zwróć także uwagę na właściwą nazwę i hasło użytkownika oraz nazwę bazy danych.

W podanych niżej przykładach nie bierzemy pod uwagę obsługi błędów ani kwestii bezpieczeństwa. W prawdziwym serwisie bardziej uważnie należy dodawać informacje do bazy danych, bo złośliwy internauta może przemycić w formularzu polecenia SQL i uszkodzić ją.

W naszym prostym przykładzie przed wyświetleniem mapy wczytywane są wszystkie punkty zapisane w bazie danych. W prawdziwym serwisie należy ograniczyć wczytywanie punktów (markerów) tylko do tych, które mogą być pokazane w aktualnym widoku mapy.

#1.#Na pierwszym etapie tworzenia witryny należy uzyskać unikatowy identyfikator Google Maps i przetestować wyświetlenie podstawowej mapy na własnej stronie. Otwórz stronę www.google.com/ apis/maps i kliknij odnośnik Sign up for a Google Maps API key. Po zapoznaniu się z warunkami korzystania z funkcji udostępnianych przez Google podaj adres strony (My web site URL) i kliknij przycisk Generate API key. Na kolejnej stronie zostanie podany długi ciąg znaków, służący do identyfikacji witryny korzystającej z wyświetlania mapy. Oprócz klucza identyfikacyjnego zaproponowany jest także przykładowy HTML/JavaScript, wyświetlający najprostszą mapę do tego klucza. Warto ten kod skopiować na własną stronę i sprawdzić, czy rzeczywiście działa. Na razie nie potrzebujesz ani serwera WWW, ani bazy danych - wystarczy skopiować kod do Notatnika i zapisać jako plik HTML. Po otworzeniu w przeglądarce powinna zostać wyświetlona mapa Google.	#2.#Przykładowy kod wyświetla mapę Palo Alto. Jak to zmienić? Należy podać odpowiednie współrzędne geograficzne w wierszu: map.setCenter(new GLatLng(37.4419, -122.1419), 13); Ostatnia wartość (13) oznacza stopień powiększenia mapy. Jak znaleźć współrzędne geograficzne? Skorzystamy z pomocy serwisu http:/&##0047;www.odleglosci.pl . Umożliwia on wyszukanie informacji praktycznie o wszystkich miejscowościach, podaje także szerokość i długość geograficzną. Wystarczy przeliczyć minuty na dziesiętne części stopnia, np. gdy szerokość wynosi 52 stopnie i 10 minut, otrzymamy wartość 52,1666667, a dla długości 22 stopnie i 18 minut wartość 22,3. Stopień powiększenia mapy można zredukować - w wypadku Polski mapy Google wyświetlają dokładnie tylko tereny większych miast.	#3.#Warto dodać do mapy podstawowy zestaw przycisków, umożliwiający jej przesuwanie i skalowanie. W tym celu należy po wierszu: var map = new Gmap(document.getElementById("map")); dodać wiersz: map.addControl(new GlargeMapControl()); Można także zmienić styl wyświetlania mapy, np. na zdjęcie satelitarne. W tym celu dodaj do kodu jeszcze jeden wiersz: map.setMapType(G_SATELLITE_MAP); Na razie spowodowaliśmy tylko wyświetlanie mapy Google na własnej stronie. Czas dodać możliwość umieszczania na mapie tzw. markerów i zapisywania ich pozycji w bazie danych. Dla uproszczenia nie będziemy zajmować się tworzeniem kont użytkowników ani bezpieczeństwem serwisu.	#4.#Tworzenie markerów wskazujących wybrane pozycje na mapie nie jest trudne. Do funkcji load() dodaj następujący kod: GEvent.addListener(map, 'click', function(overlay, point) { map.removeOverlay(mymarker); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("Witaj w moim mashupie!"); mymarker = marker; }); Należy jeszcze dodać deklarację zmiennej mymarker przed funkcją load(): var mymarker;

#5.#Dodamy do markerów kod, który spowoduje zapisanie informacji o markerze w bazie danych. Do funkcji GEvent.addListener dodaj zmienną html: var html = "Witaj! Dodaj swoje info:<br><form method=\"post\" action=\"dodaj.php\">"; html +="Nazwa: <input type=\"text\" name=\"nazwa\" size=\"10\"><br/>"; html +="Numer GG: <input type=\"text\" name=\"gg\" size=\"6\"><br/>"; html +="Zdjęcie: <input type=\"file\" name=\"foto\"><br/>"; html +="<input type=\"submit\" value=\"OK. Dodaj info do bazy!\">"; html += "<input type=\"hidden\" name=\"x\" value=\""+point.x+"\">"; html += "<input type=\"hidden\" name=\"y\" value=\""+point.y+"\"></form>"; marker.openInfoWindowHtml(html);	#6.#Teraz przyszła kolej na skrypt PHP, dodający informację do bazy danych. Będzie mieć nazwę dodaj.php, a jego zawartość nie jest nadzwyczaj skomplikowana (pomijamy obsługę błędów): $$filename = time().".jpg"; move_uploaded_file($$_FILES['foto']['tmp_name'], "/home/mojastrona/public_html/test/img/".$$filename)); $$dbh=mysql_connect("111.111.11.11", "nazwa", "haslo") or die (mysql_error()); mysql_select_db("nazwa_bazy"); $$nazwa = $$_POST["nazwa"]; $$gg = $$_POST["gg"]; $$x = $$_POST["x"]; $$y = $$_POST["y"]; $$sql = "INSERT INTO mapa (nazwa,gg,foto,x,y) VALUES ('$$nazwa','$$gg','$$filename',$$x,$$y)"; mysql_query($$sql); mysql_close($$dbh);	#7.#Pozostaje dopisać kod odpowiedzialny za wyświetlanie markerów. Powróćmy do pliku index.php. Najpierw dodamy funkcję nowyMarker, która powinna znaleźć się przed funkcją load(). function nowyMarker(point,nazwa,gg,foto) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { var html = nazwa+"<br>"+"<img src=\"http:/&##0047;www.gadu-gadu.pl/users/status.asp?id="; html += gg + "&styl=1\">"; html += "<a href=\"gg:"+gg+"\">"+gg+"</a>"; html += "<br><img src=\"img/"+foto+"\" width=60>"; marker.openInfoWindowHtml(html); }); return marker;}	#8.#Na koniec dodamy generowanie nowych markerów na podstawie bazy danych. Poniższy kod odpowiada za połączenie z bazą danych i wywołanie funkcji nowyMarker. $$dbh = mysql_connect("111.111.1.111", "nazwa", "haslo") or die (mysql_error()); mysql_select_db("nazwa_bazy"); $$result = mysql_query("SELECT * FROM mapa",$$dbh); while($$row = mysql_fetch_array($$result)) { echo "var point = new GPoint(" . $$row["x"] . "," . $$row["y"] . ");\n"; $$nazwa = $$row["nazwa"]; $$gg = $$row["gg"];$$foto = $$row["foto"]; echo "map.addOverlay(nowyMarker(point,'$$nazwa','$$gg','$$foto'));\n";}