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

No último ano, mais ou menos, escrevi vários tutoriais sobre o pesquisa de texto completo (FTS) do Couchbase, a maioria dos quais são exemplos específicos de como fazer algo com um dos SDKs e nunca têm nada a ver com o aplicativo por trás dele. Um dos muitos aplicativos realistas possíveis inclui o uso de um recurso de typeahead ou de sugestão de dados em um formulário de aplicativo da Web. Com base na entrada do usuário, os resultados possíveis são pesquisados e exibidos.

Veremos como criar um formulário typeahead usando o serviço de pesquisa de texto completo em CouchbaseNode.js e jQuery para unir tudo isso.

Antes de nos envolvermos demais, pressupõe-se que você já tenha o Couchbase Server 5.0+ instalado e configurado com a pesquisa de texto completo ativada. Supõe-se também que você já tenha o Node.js instalado, pois a API será alimentada com o Node.js e o Express Framework.

Criação de um conjunto de dados NoSQL com índices FTS

Ao trabalhar com o FTS, você pode estar usando um de um número potencialmente ilimitado de cenários de busca. Vamos ser um pouco mais específicos para o propósito deste exemplo.

Vamos supor que estejamos trabalhando com dados de música e que nosso objetivo seja pesquisar músicas com base no artista, no álbum ou no título da música. Vamos supor que cada um de nossos documentos NoSQL tenha o seguinte formato:

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

{

"título": "História de amor",

"artista": "Taylor Swift",

"álbum": "Destemido",

"tipo": "música"

}

Não é o documento JSON mais complexo, mas poderia ser, se quiséssemos. Para fins deste exemplo, vamos nos preocupar apenas com o título e o artistaembora não fosse necessário muito mais esforço para expandir.

Para usar o FTS, precisaremos criar um índice especial no Couchbase que se parece com o seguinte:

Para resumir, precisamos criar um nome para o índice, especificar o mapeamento de tipos e definir os campos que serão indexados, todos os quais serão armazenados no próprio índice.

Ao criar o índice, é importante armazenar o campo, caso contrário, não teremos nada para exibir em nosso typeahead.

Desenvolvimento de um ponto de extremidade de API RESTful do Node.js para pesquisa

Agora que temos alguns dados no banco de dados e um índice criado para pesquisa, podemos criar um endpoint de API com o Node.js. O objetivo dessa API é atuar como um endpoint a ser usado pelo nosso formulário de pesquisa. Afinal de contas, não queremos que nosso frontend voltado para o cliente acesse o banco de dados diretamente, pois isso não seria seguro.

Em seu computador, crie um novo projeto e execute o seguinte na linha de comando:

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

1 2	npm inicial -y npm instalar couchbase cors expresso --salvar

Os comandos acima criarão um novo package.json e instalar as poucas dependências do nosso projeto. Usaremos o Couchbase SDK com o Express Framework e instalaremos um pacote para lidar com o compartilhamento de recursos entre origens (CORS).

Como nosso aplicativo é pequeno, vamos criar um app.js em nosso projeto para conter todo o nosso código. Podemos fazer o bootstrap com o seguinte:

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 = exigir("couchbase");

const Expresso = exigir("expresso");

const Cors = exigir("cors");

var aplicativo = Expresso();

var agrupamento = novo Couchbase.Aglomerado("couchbase://localhost");

agrupamento.autenticar("exemplo", "123456");

var balde = agrupamento.openBucket("exemplo");

aplicativo.uso(Cors());

aplicativo.obter("/search", (solicitação, resposta) => { });

aplicativo.ouvir(3000, () => {

console.registro("Ouvindo em :3000...");

});

No código acima, importamos nossas dependências baixadas, configuramos o Express e as conectamos à nossa instância do Couchbase. Você precisará trocar as informações de conexão pelas da sua instância real do banco de dados.

O /pesquisa é onde toda a mágica vai acontecer. Vamos nos aprofundar nisso:

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);
    });
});

aplicativo.obter("/search", (solicitação, resposta) => {

var Pesquisa = Couchbase.Pesquisa;

var consulta = Pesquisa.novo("idx-music", Pesquisa.partida(solicitação.consulta.consulta).imprecisão(1));

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

balde.consulta(consulta, função(erro, resultado, meta) {

se(erro) {

retorno resposta.status(500).enviar({ mensagem: erro.mensagem });

}

resultado = resultado.mapa(item => {

retorno {

id: item.id,

pontuação: item.pontuação,

título: item.campos.título,

artista: item.campos.artista

};

});

resposta.enviar(resultado);

});

Primeiro, definimos nossa consulta como uma consulta de correspondência em relação ao nosso índice específico. A consulta de correspondência usará o texto que for passado por meio dos parâmetros de consulta da solicitação. Também usaremos uma pesquisa difusa com um valor de 1 para acomodar erros de ortografia das palavras.

Antes de executarmos a consulta, definimos que queremos o título e artista de volta aos resultados. Esses são os mesmos campos que adicionamos ao nosso índice.

Após a execução bem-sucedida da consulta, analisamos nossos resultados para retornar apenas o que desejamos, em vez dos metadados extras que retornam com a resposta.

Usando uma solicitação cURL, você pode acessar http://localhost:3000/search?query=swift e ver vários resultados, dependendo do seu conjunto de dados.

Projetando um front-end com as bibliotecas jQuery e Typeahead

A pesquisa com cURL tem seus valores, mas, na maioria das vezes, não é o que queremos fazer. Em vez disso, devemos criar um front-end voltado para o cliente usando tecnologias da Web prontamente disponíveis.

Há muitas bibliotecas em potencial por aí, mas vamos usar a typeahead.js que é mantido pelo Twitter. Você precisará fazer o download, mas lembre-se de que usaremos a versão 0.10.5 da biblioteca devido a bugs na versão mais recente. Perdi boa parte do dia tentando solucionar problemas da biblioteca apenas para descobrir isso.

Crie um projeto que contenha a seguinte estrutura:

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

guidão-v4.0.11.js

jquery-3.3.1.min.js

typeahead.feixe.min.js

índice.html

Sim, você precisará de Guidão.js e jQuery para ter sucesso com esse frontend. Até onde eu sei, a versão não importa, nós nos preocupamos apenas com a versão da nossa biblioteca typeahead.

No âmbito do projeto index.html inclua o seguinte:

<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>

<cabeça>

<style>

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

largura: 100%;

}

</style>

</cabeça>

<corpo>

</div>

$('#remote .typeahead').typeahead(

{

dica: verdadeiro,

minLength: 3,

destaque: falso,

limite: 5

}, {

nome: "música",

displayKey: "id",

fonte: função (consulta, retorno de chamada) {

$.getJSON("http://localhost:3000/search?query=" + consulta, função (dados) {

retorno retorno de chamada(dados);

});

modelos: {

sugestão: Guidão.compilar('<div>{{title}} - {{artista}}</div>')

}

);

</script>

</corpo>

</html>

Ignorando o fato de que acabamos de fazer a marcação HTML básica para incluir nossos estilos e scripts, avance para nossa função typeahead. Para a configuração, mostraremos dicas pop-up para todos os registros encontrados, exigiremos que pelo menos 3 caracteres estejam presentes, não destacaremos palavras correspondentes e limitaremos nossos resultados à exibição de 5 itens. Sinta-se à vontade para ajustar as configurações de acordo com suas especificações.

Na próxima seção, definimos nossa displayKey. Sabemos que estamos recebendo um array de objetos de volta e um id é uma das propriedades desses objetos. Queremos que esse valor seja exibido em nosso formulário após a seleção. Para a fonte de dados, estamos fazendo uma solicitação GET ao nosso endpoint de API e passando a resposta de volta à nossa biblioteca typeahead. Tudo será renderizado no modelos área.

Conclusão

Você acabou de ver como usar um typeahead, geralmente chamado de sugestões automáticas ou preenchimento automático, usando jQuery, Node.js e pesquisa de texto completo (FTS) no Couchbase. Há muitos casos de uso quando se trata de pesquisa de texto completo e muitas bibliotecas diferentes disponíveis para a funcionalidade typeahead. Este tutorial serve mais ou menos para lhe dar uma ideia para o futuro.

Para obter mais informações sobre como usar o Couchbase com o Node.js, consulte o Portal do desenvolvedor do Couchbase.

Nic Raboy, defensor dos desenvolvedores, Couchbase

Compartilhe este artigo

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: Desenvolva com o Couchbase Full-Text Search e o Node.js

Criação de um conjunto de dados NoSQL com índices FTS

Desenvolvimento de um ponto de extremidade de API RESTful do Node.js para pesquisa

Projetando um front-end com as bibliotecas jQuery e Typeahead

Conclusão

Receba atualizações do blog do Couchbase em sua caixa de entrada

Autor

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

Deixe um comentário Cancelar resposta

Pronto para começar a usar o Couchbase Capella?

Iniciar a construção

Use o Capella gratuitamente

Entre em contato