Typeahead: Develop with Couchbase Full-Text Search & Node.js

Durante el último año he escrito una serie de tutoriales sobre la búsqueda de texto completo (FTS) de Couchbase, la mayoría de los cuales son ejemplos específicos de cómo hacer algo con uno de los SDK y nunca realmente nada que ver con la aplicación que hay detrás. Una de las muchas posibles aplicaciones realistas incluye el uso de una función de typeahead o sugerencia de datos en un formulario de aplicación web. Basándose en la entrada del usuario, se buscan y se muestran posibles resultados.

Vamos a ver cómo construir un formulario typeahead utilizando el servicio de búsqueda de texto completo en CouchbaseNode.js y jQuery para unirlo todo.

Antes de entrar en detalles, se supone que ya tienes Couchbase Server 5.0+ instalado y configurado con la búsqueda de texto completo activada. Suponemos que también tienes instalado Node.js, ya que la API funcionará con Node.js y Express Framework.

Creación de un conjunto de datos NoSQL con índices FTS

Cuando se trabaja con FTS, se puede utilizar uno de un número potencialmente ilimitado de escenarios de búsqueda. Vamos a ser un poco más específicos para el propósito de este ejemplo.

Supongamos que estamos trabajando con datos de música y nuestro objetivo es buscar canciones basándonos en el artista, el álbum o el título de la canción. Supongamos que cada uno de nuestros documentos NoSQL tiene el siguiente formato:

{
  "title": "Love Story",
  "artist": "Taylor Swift",
  "album": "Fearless",
  "type": "song"
}

{

"título: "Historia de amor",

"artista": "Taylor Swift",

"álbum": "Sin miedo",

"tipo": "canción"

}

No es el documento JSON más complejo, pero podría serlo si quisiéramos. Por el bien de este ejemplo, sólo vamos a preocuparnos por el título y el artistaaunque no costaría mucho más esfuerzo ampliarlo.

Para utilizar FTS, vamos a necesitar crear un índice especial en Couchbase con el siguiente aspecto:

En resumen, tenemos que dar un nombre al índice, especificar la correspondencia de tipos y definir los campos que se indexarán, todo lo cual se almacenará en el propio índice.

Al crear el índice, es importante almacenar el campo, de lo contrario, no tendremos nada que mostrar en nuestro typeahead.

Desarrollo de un punto final de API RESTful de Node.js para búsquedas

Ahora que tenemos algunos datos en la base de datos y un índice creado para la búsqueda, podemos crear un endpoint API con Node.js. El objetivo de esta API es servir de punto final para nuestro formulario de búsqueda. Después de todo, no queremos que nuestro frontend de cara al cliente acceda directamente a la base de datos, ya que no sería seguro.

En su ordenador, cree un nuevo proyecto y ejecute lo siguiente desde la línea de comandos:

npm init -y
npm install couchbase cors express --save

1 2	npm init -y npm instale couchbase cors express --guardar

Los comandos anteriores crearán un nuevo paquete.json e instalaremos las pocas dependencias de nuestro proyecto. Vamos a utilizar el SDK de Couchbase con Express Framework y vamos a instalar un paquete para gestionar la compartición de recursos entre orígenes (CORS).

Como nuestra aplicación es pequeña, vamos a crear un app.js en nuestro proyecto para contener todo nuestro código. Podemos arrancarlo con lo siguiente:

const Couchbase = require("couchbase");
const Express = require("express");
const Cors = require("cors");

var app = Express();
var cluster = new Couchbase.Cluster("couchbase://localhost");
cluster.authenticate("example", "123456");
var bucket = cluster.openBucket("example");

app.use(Cors());

app.get("/search", (request, response) => { });

app.listen(3000, () => {
    console.log("Listening at :3000...");
});

const Couchbase = requiere("couchbase");

const Express = requiere("express");

const Cors = requiere("cors");

var aplicación = Express();

var grupo = nuevo Couchbase.Grupo("couchbase://localhost");

grupo.autentifique("ejemplo", "123456");

var cubo = grupo.openBucket("ejemplo");

aplicación.utilice(Cors());

aplicación.consiga("/buscar", (solicitar, respuesta) => { });

aplicación.escuche(3000, () => {

consola.registro("Escuchando en :3000...");

});

En el código anterior, hemos importado nuestras dependencias descargadas, configurado Express y conectado a nuestra instancia de Couchbase. Tendrás que cambiar la información de conexión por la de tu instancia de base de datos real.

En /buscar es donde va a ocurrir toda la magia. Vamos a profundizar en ello:

app.get("/search", (request, response) => {
    var SearchQuery = Couchbase.SearchQuery;
    var query = SearchQuery.new("idx-music", SearchQuery.match(request.query.query).fuzziness(1));
    query.fields(["title", "artist"]);
    bucket.query(query, function(error, result, meta) {
        if(error) {
            return response.status(500).send({ message: error.message });
        }
        result = result.map(item => {
            return {
                id: item.id,
                score: item.score,
                title: item.fields.title,
                artist: item.fields.artist
            };
        });
        response.send(result);
    });
});

aplicación.consiga("/buscar", (solicitar, respuesta) => {

var BúsquedaQuery = Couchbase.BúsquedaQuery;

var consulta = BúsquedaQuery.nuevo("idx-music", BúsquedaQuery.match(solicitar.consulta.consulta).desenfoque(1));

consulta.campos(["título, "artista"]);

cubo.consulta(consulta, función(error, resultado, meta) {

si(error) {

devolver respuesta.estado(500).enviar({ mensaje: error.mensaje });

}

resultado = resultado.mapa(artículo => {

devolver {

id: artículo.id,

puntuación: artículo.puntuación,

título: artículo.campos.título,

artista: artículo.campos.artista

};

});

respuesta.enviar(resultado);

});

En primer lugar, definimos nuestra consulta como una consulta de coincidencia con nuestro índice concreto. La consulta de coincidencia utilizará cualquier texto que se pase a través de los parámetros de consulta de la petición. También vamos a utilizar una búsqueda difusa con un valor de 1 para tener en cuenta los errores ortográficos de las palabras.

Antes de ejecutar la consulta, definimos que queremos que el título y artista en los resultados. Estos son los mismos campos que hemos añadido a nuestro índice.

Cuando la consulta se ejecuta correctamente, analizamos los resultados para obtener sólo lo que queremos, en lugar de los metadatos adicionales que se incluyen en la respuesta.

Utilizando una petición cURL, podría pulsar http://localhost:3000/search?query=swift y ver varios resultados dependiendo de su conjunto de datos.

Diseño de una interfaz con las bibliotecas jQuery y Typeahead

Buscar con cURL tiene sus valores, pero la mayoría de las veces no es lo que vamos a querer hacer. En su lugar, deberíamos crear un front-end orientado al cliente utilizando tecnologías web fácilmente disponibles.

Hay un montón de bibliotecas potenciales por ahí, pero vamos a utilizar typeahead.js que mantiene Twitter. Tendrás que descargarlo, pero ten en cuenta que vamos a utilizar la versión 0.10.5 de la biblioteca debido a errores en la última. Perdí una buena parte del día tratando de solucionar problemas de la biblioteca sólo para descubrir esto.

Cree un proyecto que contenga la siguiente estructura:

js
  handlebars-v4.0.11.js
  jquery-3.3.1.min.js
  typeahead.bundle.min.js
index.html

manillar-v4.0.11.js

jquery-3.3.1.min.js

typeahead.paquete.min.js

índice.html

Sí, necesitará Manillares.js y jQuery para tener éxito con este frontend. Hasta donde yo sé, la versión no importa, sólo nos importa la versión de nuestra biblioteca typeahead.

Dentro del proyecto index.html incluya lo siguiente:

<html>
    <head>
        <style>
            .tt-input, .tt-hint, .twitter-typeahead {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="remote">
            <input class="typeahead" type="text" placeholder="Songs...">
        </div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/handlebars-v4.0.11.js"></script>
        <script src="js/typeahead.0.10.5.bundle.min.js"></script>
        <script>
            $('#remote .typeahead').typeahead(
                {
                    hint: true,
                    minLength: 3,
                    highlight: false,
                    limit: 5
                }, {
                    name: "song",
                    displayKey: "id",
                    source: function (query, callback) {
                        $.getJSON("http://localhost:3000/search?query=" + query, function (data) {
                            return callback(data);
                        });
                    },
                    templates: {
                        suggestion: Handlebars.compile('<div>{{title}} – {{artist}}</div>')
                    }
                }
            );
        </script>
    </body>
</html>

<html>

<style>

.tt-input, .tt-hint, .twitter-typeahead {

anchura: 100%;

}

</style>

</cabeza>

</div>

$(#remote .typeahead).typeahead(

{

pista: verdadero,

minLength: 3,

destacar: falso,

límite: 5

}, {

nombre: "canción",

displayKey: "id",

fuente: función (consulta, devolución de llamada) {

$.getJSON("http://localhost:3000/search?query=" + consulta, función (datos) {

devolver devolución de llamada(datos);

});

plantillas: {

sugerencia: Manillar.compilar('<div>{{título}} - {{artist}}</div>')

}

);

</script>

</cuerpo>

</html>

Ignorando como acabamos de hacer el marcado HTML básico para incluir nuestros estilos y scripts, salta a nuestra función typeahead. Para la configuración, vamos a mostrar sugerencias emergentes para cualquier registro encontrado, requerir que al menos 3 caracteres estén presentes, no resaltar palabras coincidentes, y limitar nuestros resultados a 5 elementos mostrados. Siéntase libre de ajustar la configuración a sus especificaciones.

En la siguiente sección definimos nuestro displayKey. Sabemos que estamos recibiendo un array de objetos de vuelta y un id es una de las propiedades de esos objetos. Queremos que ese valor se muestre en nuestro formulario después de la selección. Para la fuente de datos, estamos haciendo una solicitud GET a nuestro punto final de la API y pasar la respuesta a nuestra biblioteca typeahead. Todo se mostrará en el plantillas zona.

Conclusión

Acabas de ver cómo usar un typeahead, a menudo referido como autosugerencias o autocompletar, usando jQuery, Node.js, y búsqueda de texto completo (FTS) en Couchbase. Hay muchos casos de uso cuando se trata de búsqueda de texto completo y muchas bibliotecas diferentes disponibles para la funcionalidad typeahead. Este tutorial es más o menos para darte una idea para el futuro.

Para obtener más información sobre el uso de Couchbase con Node.js, consulte la página Portal para desarrolladores de Couchbase.

Nic Raboy, Defensor del Desarrollador, Couchbase

Comparte este artículo

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Typeahead: Desarrollar con Couchbase Full-Text Search y Node.js

Creación de un conjunto de datos NoSQL con índices FTS

Desarrollo de un punto final de API RESTful de Node.js para búsquedas

Diseño de una interfaz con las bibliotecas jQuery y Typeahead

Conclusión

Recibe actualizaciones del blog de Couchbase en tu bandeja de entrada

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

Deja un comentario Cancelar respuesta

¿Listo para empezar con Couchbase Capella?

Empezar a construir

Utilizar Capella gratis

Póngase en contacto