HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Tapir: cómo integrar un buscador por palabra clave en un sitio web estático

Tapir es un servicio web que es capaz de leer y almacenar el contenido de un feed RSS. Y tú puedes usarlo para realizar búsquedas por palabra clave en sitios web estáticos.

Cuando construyes un sitio web estático, como es mi caso con Hachemuda, una de las funcionalidades que parece más complicada de implementar es un buscador por palabra clave. ¿Cómo hacer un buscador en un sitio web que no tiene una base de datos?

Tapir to the rescue!

Tapir es un servicio simple, sencillo y súper bien pensado: un servicio web que guarda automáticamente los contenidos de tu web para que tú puedas realizar búsquedas en ellos a través de su API. Y una vez hecho, irá revisando tu feed cada 15 minutos para ir guardándose automáticamente los nuevos contenidos que publiques y poder incluirlos como resultados en las búsquedas.

En realidad funciona para cualquier sitio web que tenga un feed, pero lo encuentro de especial utilidad en el caso de páginas estáticas, sin base de datos.

En Hachemuda ya está en funcionamiento, puedes probar a buscar contenido usando el formulario de la cabecera de la web, :)

Para integrarlo en tu sitio web, lo único que necesitas tener es un feed XML y unos conocimientos básicos de Javascript o jQuery. Los pasos son:

  1. Acceder a tapirgo.com y rellenar el campo con la dirección de tu feed RSS.
  2. Apuntar tu token de acceso, será el código que necesitarás para poder ejecutar búsquedas en el sistema.
  3. Darle unos minutos para que lea e indexe todos los contenidos disponibles en ese momento en tu feed.

Después, ya podrás comprobar que todos los contenidos han sido indexados y que la búsqueda funciona correctamente accediendo a esta URL desde el navegador web:

http://www.tapirgo.com/api/1/search.json?token=XXXXX&query=YYYYY

Lógicamente, en esa URL debes modificar XXXXX por tu token de acceso y YYYYY por las palabras claves a buscar en tu base de contenidos.

Tapir devuelve los resultados de las búsquedas en el popular formato JSON, por lo que tendrás que programar esa parte para descomponerlos y mostrarlos en tu sitio web de la forma deseada. Si usas jQuery es bastante sencillo utilizando la función getJSON, aunque también puedes usar el plugin de jQuery que ya han creado para Tapir, :)

En mi caso, como ejemplo, tengo el siguiente marcado HTML para mostrar el formulario y los resultados de las búsquedas:

<!-- Search input -->
<form method="get" id="searchform" action="/">
    <input type="text" name="s" value="" placeholder="Introduce los términos de búsqueda" id="s" class="search_input" />
</form>
<!-- Search results box -->
 <div class="search_results_container">
  <h2>Resultados de la búsqueda:</h2>
  <ul id="search_results"></ul>
</div>

Con ese HTML, mediante jQuery se detecta cuando el usuario ha introducido y enviado el formulario de búsqueda de la parte superior. Entonces, el proceso que se sigue es:

  1. Vaciar el contenido de la caja de resultados, por si hubiera búsquedas anteriores.
  2. Detectar cuál es la cadena de búsqueda introducida por el usuario.
  3. Ejecuta una petición a la API de Tapir con el token y la cadena de búsqueda. Al recibir la respuesta, se ejecuta la función de callback: para cada item devuelto en formato JSON, genera un elemento de lista HTML y lo encadena al final de los anteriores. Este elemento tiene el título del artículo y el link directo al mismo.
  4. Cuando termina de generar la lista HTML con todos los resultados, muestra la caja de resultados con un efectillo de apertura hacia abajo.
$('#searchform').submit(function() {
    $('#search_results').empty();
    var phrase = $('input#s').val();
    var token = 'XXXXXXXXXXXXXXXXXXX';
 
    $.getJSON('http://tapirgo.com/api/1/search.json?token=' + token + '&query=' + phrase +'&callback=?', function(data){
        $.each(data, function(key, val) {
            $('#search_results').append('<li><a href="' + val.link + '">' + val.title + '</a></li>');
        });
        $('#search_results_pane').slideDown();
    });
    return false;
});

Ojo:

Normalmente los sistemas de feeds automáticos generan el canal con los últimos X artículos. En ese caso, Tapir sólo indexará inicialmente esos X artículos y, de forma automática cada 15 minutos, los que vayas publicando después. Pero no los anteriores.

Yo lo que hice fue modificar la plantilla del feed para que se generara mostrando los últimos 1100 artículos y lo dejé activo durante unos minutos, hasta que Tapir ya indexó todos ellos, y después volví a modificar la plantilla para que sólo mostrara los 10 últimos.

Si controlas un poquito más de programación o hackeo general, Tapir también permite ejecutar peticiones PUSH manualmente para incluir contenidos antiguos.

Enlaces: