sobota 26. dubna 2008

Google AJAX API

Google v současnosti nabízí tři Google AJAX API: Google Maps API, Google AJAX Search API a Google AJAX Feed API.

Všechna tři API mají společné použití JavaScriptu. Práce s API spočívá ve vytváření objektů a pomocí metod, které k nim Googlem poskytuje, jejich nastavení a následné zobrazení.

Před použitím API je potřeba získat tzv. API klíč. API klíč lze zdarma získat na základě účtu u Google (Google Account, také zdarma). API klíč se váže k doméně, případně k adresáři (doména/adresář). Pokud provozujete lokální server nebo server bez domény, je možné získat klíč i pro domény typu „localhost“ či ip adresu. Před získáním API klíče je nutné souhlasit s licencí. API klíče lze získat na stránkách jednotlivých API. Ačkoliv stačí jeden klíč pro všechna tři API, doporučujeme se seznámit se zmíněnou licencí u všech API, která plánujete používat!

Odkazy na stránky, kde lze získat API klíč:
code.google.com/apis/ajaxfeeds/signup.html
code.google.com/apis/maps/signup.html
code.google.com/apis/ajaxsearch/signup.html


Google AJAX API Loader a API

Google AJAX API Loader je obecný nástroj, který umožňuje za použití jednoho API klíče a jednoho namespace používat všechna AJAX API: V současnosti jde o výše zmíněná API (Google Maps API, Google AJAX Search API, Google AJAX Feed API).

Pro použití AJAX API je nutné zavolat obecný loader:
http://www.google.com/jsapi
resp.:
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KLIC"></script>


Potom je možné zavolat google.load – metodu, která umožní načíst konkrétní API. Obecně metoda google.load vypadá takto:
google.load(JménoModulu, VerzeModulu, VolitelnáNastavení);
Jména modulů jsou v současnosti následující:

  • Maps – pro Google Maps API
  • Feeds – pro Google AJAX Feed API
  • Search – pro Google AJAX Search API
Verze udává verzi API, Google AJAX Search API a Google AJAX Feed API jsou zatím verze 1, Google Maps API nabízí verzi 2. Aktuální verzi lze najít vždy na stránkách jednotlivých API.
Volitelná nastavení dovolují nastavit některé možnosti (např. nastavit lokalizaci nebo zakázat Google css styl). Jméno modulu a verze musí být vždy přítomny.

Praktické použití google.load může vypadat takto:
<script type="text/javascript">
google.load("search", "1");
</script>


Pomocí google.load je možné načíst více API najednou:
<script type="text/javascript">
google.load("search", "1");
google.load("maps", "2");
</script>


Po těchto krocích je možné vytvářet jednotlivé objekty a volat jednotlivé
metody.

Praktická ukázka krok za krokem s komentáři:
Vložení obecného API loaderu:
<script type="text/javascript"
src="http://www.google.com/jsapi?key=API_KLIC"></script>


Otevření skriptu:
<script type="text/javascript">

Načtení API přes google.load :
google.load("maps", "2"); // API Google Maps
google.load("search", "1"); //API hledání přes Google
google.load("feeds", "1"); // API čtečky RSS


Vytvoření funkce, která po zavolání vytvoří, nastaví a vykreslí jednotlivé prvky (tedy mapu, vyhledávání přes Google a zobrazení několika záznamů ze zadaného RSS zdroje):
function hlavni() {

Vytvoření mapy:
var mapa = new google.maps.Map2(document.getElementById("mapa"));
A její nastavení (nastavujeme střed mapy pomocí šířky a délky přes objekt LatLng;
poslední číslo -zde 7- udává úroveň přiblížení):
mapa.setCenter(new google.maps.LatLng(49.809632, 15.001831), 7);

Vytvoření vyhledávání (SearchControl):
var hledani = new google.search.SearchControl();

Určení toho, co se bude vyhledávat:
hledani.addSearcher(new google.search.WebSearch()); //hledání na webu
hledani.addSearcher(new google.search.ImageSearch()); //hledání v obrázcích


Vykreslení pole pro vyhledávání
hledani.draw(document.getElementById("hledani"));

Vytvoření čtečky RSS zdroje a jeho načtení:
var feed = new google.feeds.Feed("http://www.novinky.cz/rss/");
feed.load(function(result) {


Vypsání obsahu čtečky:
if (!result.error) {
var kontejner = document.getElementById("feed");
//vypsani obsahu feedu
for (var i = 0; i < result.feed.entries.length; i++) {
var zaznam = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(zaznam.title));
kontejner.appendChild(div);
}
}
});
}


Funkci výše je nyní potřeba zavolat a ukončit skript (pro volání funkce použijte metodu google.setOnLoadCallback):
google.setOnLoadCallback(hlavni);
</script>


Celý kód vypadá nějak takto (včetně html značek), pokud máte API klíč, můžete celý kód zkopírovat do html souboru a otevřít v prohlížeči na doméně platné k API klíči:
<html>
<head>
<title>Google AJAX API Loader</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2"); // API Google Maps
google.load("search", "1"); //API Google Hledání
google.load("feeds", "1"); // API čtečky RSS

function hlavni() {
var mapa = new google.maps.Map2(document.getElementById("mapa"));
mapa.setCenter(new google.maps.LatLng(49.809632, 15.001831), 7);
var hledani = new google.search.SearchControl();
hledani.addSearcher(new google.search.WebSearch()); //hledání na webu
hledani.addSearcher(new google.search.ImageSearch()); //hledání v obrázcích
hledani.draw(document.getElementById("hledani"));

var feed = new google.feeds.Feed("http://www.novinky.cz/rss/");
feed.load(function(result) {
if (!result.error) {
var kontejner = document.getElementById("feed");
//vypsani obsahu feedu
for (var i = 0; i < result.feed.entries.length; i++) {
var zaznam = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(zaznam.title));
kontejner.appendChild(div);
}
}
});

}
google.setOnLoadCallback(hlavni);

</script>
</head>

<body>
<p>Mapa:</p>
<div id="mapa" style="width: 500px; height: 500px"></div>
<br><br>
<p>Hledani:</p>
<div id="hledani"></div>
<br><br>
<p>Novinky:</p>
<div id="feed"></div>
</body>

</html>

Funkční verzi naleznete také
zde.

Existuje ještě další postup pro používání AJAX API, tentokráte bez obecného AJAX loaderu.
Místo:
<script type="text/javascript"
src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2"); // API Google Maps
google.load("search", "1"); //API Google Hledání
google.load("feeds", "1"); // API čtečky RSS
</script>


Se načítá přímo zvolené API, např. pro vyhledávání:
<script type="text/javascript"
src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=API_KLIC"></script>


Naledující kroky jsou již podobné jako výše.
Vytvoření objektu pro hledální:
var hledani = new GSearchControl();
Přidání toho, co se bude vyhledávat:
hledani.addSearcher(new GwebSearch()); // vyhledavani na webu
hledani.addSearcher(new GimageSearch()); // vyhledavani obrazku

Vykreselní objektu:
hledani.draw(document.getElementById("hledani"));


Celý kód pak vypadá takto:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Search API</title>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=API_KLIC"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function hlavni() {
// vytvoření objektu – pole pro vyhledávání
var hledani = new GSearchControl();
// Přidání toho, co se bude vyhledávat
hledani.addSearcher(new GwebSearch()); // vyhledavání na webu
hledani.addSearcher(new GimageSearch()); // vyhledavání obrazku
// vykreslení vyhledávače
hledani.draw(document.getElementById("hledani"));
}
// zavolání funkce
GSearch.setOnLoadCallback(hlavni);
//]]>
</script>
</head>
<body>
<div id="hledani">Nacitani...</div>
</body>
</html>


Vzhledem k přehlednějšímu způsobu pojmenování metod a možnosti používat všechna tři AJAX API najednou, je kód za použití obecného loaderu přehlednější. Ačkoliv AJAX Search API je funkční, pokud vytváříte novou stránku Google doporučuje používat AJAX API Loader, který bude do budoucna více podporován.

Při použití AJAX API Loaderu se volaní provádí přes namespace google.modul, např.:
var hledani = new google.search.SearchControl();

Narozdíl od obyčejné verze, kde se volá přímo:
var hledani= new GSearchControl();

Na první pohled vyplývá, že odstraněním „G“ a přidáním namespace google.modul lze snadno přejít na AJAX API Loader.

Zajímavé odkazy:
Google Maps API:
Domovská stránka: code.google.com/apis/maps
Dokumentace: code.google.com/apis/maps/documentation
Reference: code.google.com/apis/maps/documentation/reference.html

Google AJAX Feed API:
Domovská stránka: code.google.com/apis/ajaxfeeds
Dokumentace: code.google.com/apis/ajaxfeeds/documentation
Reference: code.google.com/apis/ajaxfeeds/documentation/reference.html

Google AJAX Search API:
Domovská stránka: code.google.com/apis/ajaxsearch
Dokumentace: code.google.com/apis/ajaxsearch/documentation
Reference: code.google.com/apis/ajaxsearch/documentation/reference.html

2 komentáře:

George řekl(a)...

Pro zajímavost AJAX -
[Asynchronous JavaScript and XML] je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovu-načítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů.

V praxi to znamená to, že pokud uživatel zadá hledaný výraz, nebo místo do vyhledávacího formuláře, prohlížeč bez načítání zobrazí výsledky na stránce většinou v plovoucím okně nad pevným obsahem.

Pidipisek řekl(a)...

A jen pro doplnění - nemůže pak uživatel použít tlačítko zpět:)