programa-con-google: El API Embedded Viewer de Google Book Search

El API Embedded Viewer de Google Book Search

Tuesday, February 3, 2009

La Embedded Viewer API permite mostrar contenido de un libro incluido en el programa Google Book Search directamente en páginas web usando JavaScript y respetando los derechos de propiedad intelectual del propietario del libro.

Como soy un enamorado de este producto en cuanto he tenido un momento me he puesto a trastear con el API para ver como funciona y la verdad es que me ha parecido muy sencilla.

Primer paso, cargar el API

El Embedded Viewer API esta totalmente integrada con el Google AJAX APIs. Este entorno proporciona un espacio de nombres ("namespace") común para cada una de las APIs que soporta, permitiendo a las distintas APIs de Googe trabajar juntas. El Embedded Viewer API usa el espacio de nombres google.books.* para todas las clases, métodos y propiedades.

Cargar un API usando Google AJAX API el requiere de dos pasos:

Primero cargar la librería del cargador:

El primer parámetro que le pasamos al método load() es la librería que queremos cargar. El segundo parámetro es la versión de la librería, en este caso la versión 0 (cero). El tercer parámetro es el idioma en el que queremos que se nos muestre el interfaz; este último parámetro es opcional y si no lo pasamos se usará el idioma por defecto que es el ingles.

Segundo paso, crear el objeto visor

var visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));

Al constructor DefaultViewer se le pasa como parámetro el nodo DOM donde se representará el libro.

Tercer paso, inicializar el visor con un libro concreto

El método load() es el que se encarga de inicializar el objeto visor. Como primer parámetro le pasamos el identificador del libro que puede ser el ISBN, el número OCLC, el LCCN, el Volume ID en Book Search o la URL de previsualización de Book Search. En el ejemplo se puede ver el uso del caso más común, el ISBN.

visor.load('ISBN:0738531367');

Además el método load() admite dos parámetros opcionales, se trata de dos funciones de callback. La primera una función que será llamada en caso de que el libro no se haya podido cargar y la segunda una función que será llamada cuando el libro se ha cargado sin problemas. Veamos un ejemplo:

function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

function LibroCargado() {
alert("El libro se ha cargado correctamente");
}

visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);

Ultimo paso, navegar por el libro
Una vez tenemos cargado el libro en el visor el último paso es navegar por el libro. Para ello podemos usar los métodos del objeto visor (nextPage(), previousPage(), zoomIn(), zoomOut(), etc) que encontraréis documentados en la guía de referencia del API. En nuestro ejemplo lo que vamos a hacer es pasar página en el libro una vez cada tres segundos. Lo haríamos con el siguiente código:

function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

Todo junto
Si juntamos todos los pasos en un fichero html simple nos quedaría un código tal que así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Ejemplo de uso del Embedded Viewer API de Google Book Search</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

//Cargamos el API de Books en castellano
google.load("books", "0", {"language": "es"});

var visor = null;

//Esta es la funcion que se encarga de pasar pagina cada tres segundos
function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

//Esta funcion sera llamada si no se puede cargar el libro
function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

//Si el libro se ha podido cargar empezamos a pasar paginas
function LibroCargado() {
PasarPagina(visor);
}

function Inicializar() {
//creamos el objeto visor
visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));
//cargamos el libro
visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);
}

//Nos aseguramos de que la funcion es llamada cuando se cargue la pagina
google.setOnLoadCallback(Inicializar);

</script>

</head>

</html>

y nos produciría este resultado:

y al final una ayuda....

Para aquellos que prefieran una solución más sencilla existe la herramienta Preview Wizard. Usando esta herramienta podrán generar automáticamente el código JavaScript para la visualización de uno o varios libros.

Os animo a probar estas APIs y ya de paso si alguno de vosotros las acaba usando en su site que no dude en enviarnos un correo con un link. Como siempre en un post posterior comentaremos las mejores implementaciones.