Criando um app de buscas com o Blazor e o Elasticsearch

Da busca vetorial às poderosas REST APIs, o Elasticsearch oferece aos desenvolvedores o kit de ferramentas de busca mais abrangente. Mergulhe em notebooks de exemplo no GitHub para experimentar algo novo. Você também pode iniciar seu teste gratuito ou executar o Elasticsearch localmente hoje mesmo.

Neste artigo, você aprenderá como aproveitar suas habilidades em C# para criar um aplicativo de busca usando Blazor e Elasticsearch. Vamos usar o cliente Elasticsearch .NET para executar consultas de pesquisa de texto completo, semântica e híbrida .

NOTA: Se você estiver familiarizado com a versão antiga do cliente C# do Elasticsearch, o NEST, leia esta postagem do blog sobre a descontinuação do cliente NEST e seus novos recursos. O NEST era a geração anterior do cliente .NET, que foi substituído pelo Elastic.Clients.Elasticsearch package

• O que é Blazor?
• O que é ESRE?
• Configurando o ELSER
• Dados de indexação
• Aplicação de construção

O que é Blazor?

Blazor é um framework web de código aberto baseado em HTML, CSS e C#, criado pela Microsoft para permitir que desenvolvedores criem aplicações web que rodam tanto no cliente quanto no servidor. O Blazor também permite criar componentes reutilizáveis para desenvolver aplicações mais rapidamente; ele possibilita que os desenvolvedores criem a visualização HTML e as ações em C# no mesmo arquivo, o que ajuda a manter um código legível e limpo. Além disso, com o Blazor Hybrid, você pode criar aplicativos móveis nativos acessando os recursos nativos da plataforma por meio de código .NET.

Algumas das características que fazem do Blazor uma ótima estrutura para se trabalhar:

• Opções de renderização do lado do servidor e do lado do cliente
• Componentes de interface do usuário reutilizáveis
• Atualizações em tempo real com SignalR
• Gerenciamento de estado integrado
• Sistema de roteamento integrado
• Tipagem forte e verificações em tempo de compilação

Por que Blazor?

O Blazor oferece diversas vantagens em relação a outros frameworks e bibliotecas: permite que os desenvolvedores usem C# tanto para o código do cliente quanto para o código do servidor, fornecendo tipagem forte e verificação em tempo de compilação, o que aumenta a confiabilidade. Ele se integra perfeitamente ao ecossistema .NET, permitindo a reutilização de bibliotecas e ferramentas .NET, e oferece suporte robusto para depuração.

O que é ESRE?

O Elasticsearch Relevance Engine ™ (ESRE) é um conjunto de ferramentas para criar aplicações de busca utilizando aprendizado de máquina e inteligência artificial sobre o poderoso mecanismo de busca Elasticsearch.

Para saber mais sobre ESRE, você pode ler nossa postagem esclarecedora no blog, que está disponível aqui.

Configurando o ELSER

Para aproveitar os recursos do ESRE da Elastic, usaremos o ELSER como nosso provedor de modelos.

Para usar os modelos ELSER do Elasticsearch, você precisa de uma licença Platinum ou Enterprise e de um nó dedicado para Machine Learning (ML) com no mínimo 4 GB de espaço. Saiba mais aqui.

Comece criando o ponto de extremidade de inferência:

Se esta for a sua primeira vez usando o ELSER, você poderá encontrar um erro 502 Bad Gateway enquanto o modelo é carregado em segundo plano. Você pode verificar o status do modelo em Machine Learning > Trained Models no Kibana. Após a implantação, você poderá prosseguir para a próxima etapa.

Dados de indexação

Você pode baixar o conjunto de dados aqui e, em seguida, importar os dados usando o Kibana. Para isso, acesse a página inicial e clique em "Carregar dados". Em seguida, carregue o arquivo e clique em Import. Por fim, acesse a aba Advanced e cole os seguintes mapeamentos:

Vamos criar um índice capaz de executar consultas semânticas e de texto completo. O tipo de campo semantic_text cuidará do agrupamento e da incorporação dos dados. Observe que estamos indexando longDescription como semantic_text, você pode usar copy_to se quiser indexar um campo como semantic_text e text`.

Construindo o aplicativo com Blazor e Elasticsearch

Chave de API

A primeira coisa que precisamos fazer é criar uma chave de API para autenticar nossas solicitações ao Elasticsearch. A chave da API deve ser somente leitura e permitir apenas consultas ao índice books-blazor .

Você verá algo parecido com isto:

Salve o valor do campo de resposta encoded , pois ele será necessário posteriormente. Se você estiver usando o Elastic Cloud, também precisará do seu ID da nuvem. (Você pode encontrá-lo aqui).

Criando o projeto Blazor

Comece instalando o Blazor e criando um projeto de exemplo seguindo as instruções oficiais.

Após a criação do projeto, a estrutura de pastas e arquivos deve ser semelhante a esta:

O aplicativo modelo inclui o Bootstrap v5.1.0. para estilização.

Finalize a configuração do projeto instalando o cliente Elasticsearch .NET :

Após concluir esta etapa, sua página deverá ter esta aparência:

Estrutura de pastas

Agora, vamos organizar nossas pastas da seguinte forma:

Explicação dos arquivos:

• Components/Pages/Search.razor: página principal contendo a barra de pesquisa, os resultados e os filtros.
• Components/Pages/Search.razor.css: estilos de página.
• Components/Elasticsearch/SearchBar.razor: componente da barra de pesquisa.
• Components/Elasticsearch/Results.razor: componente de resultados.
• Components/Elasticsearch/Facet.razor: componente de filtros.
• Components/Svg/GlassIcon.razor: ícone de pesquisa.
• Components/_Imports.razor: este arquivo importará todos os componentes.
• Models/Book.cs: este arquivo armazenará o esquema do campo do livro.
• Models/Response.cs: este arquivo armazenará o esquema de resposta, incluindo os resultados da pesquisa, as facetas e o total de resultados.
• Services/ElasticsearchService.cs: Serviço Elasticsearch. Ele será responsável pela conexão e pelas consultas ao Elasticsearch.

Configuração inicial

Vamos começar com uma limpeza.

Apague os arquivos:

• Components/Pages/Counter.razor
• Componentes/Páginas/Weather.razor
• Componentes/Páginas/Home.razor
• Components/Layout/NavMenu.razor
• Components/Layout/NavMenu.razor.css

Verifique o arquivo /Components/_Imports.razor . Você deve ter as seguintes importações:

Integrando o Elastic ao projeto

Agora, vamos importar os componentes do Elasticsearch:

Vamos remover a barra lateral padrão para termos mais espaço para nossa aplicação, removendo-a do arquivo /Components/Layout/MainLayout.razor :

Agora vamos inserir as credenciais do Elasticsearch para os segredos do usuário:

Usando esta abordagem, o .Net 8 armazena dados sensíveis em um local separado, fora da pasta do projeto e os torna acessíveis usando a interface IConfiguration . Essas variáveis estarão disponíveis para qualquer projeto .NET que utilize os mesmos segredos de usuário.

Em seguida, vamos modificar o arquivo Program.cs para ler os segredos e montar o cliente Elasticsearch:

Primeiro, importe as bibliotecas necessárias:

• BlazorApp.Services: contém o serviço Elasticsearch.
• Elastic.Clients.Elasticsearch: importa a biblioteca cliente Elasticsearch para .NET 8.
• Elastic.Transport: importa a biblioteca de transporte do Elasticsearch, que nos permite usar a classe ApiKey para autenticar nossas solicitações.

Em segundo lugar, insira o seguinte código antes da linha var app = builder.Build() :

Este código lerá as credenciais do Elasticsearch a partir dos segredos do usuário e criará uma instância de cliente Elasticsearch.

Após a inicialização do cliente Elasticsearch, adicione a seguinte linha para registrar o serviço Elasticsearch:

O próximo passo será construir a lógica de busca no arquivo /Services/ElasticsearchService.cs :

Primeiro, importe as bibliotecas e os modelos necessários:

Em segundo lugar, adicione a classe ElasticsearchService, o construtor e as variáveis:

Configurando a pesquisa

Agora, vamos construir nossa lógica de busca:

• BuildFilters irá construir os filtros para a consulta de pesquisa usando as facetas selecionadas pelo usuário.
• BuildHybridQuery irá construir uma consulta de pesquisa híbrida que combina pesquisa de texto completo e pesquisa semântica.

Em seguida, adicione o método de pesquisa:

• SearchBooksAsyncA função realizará a busca usando a consulta híbrida e retornará os resultados, incluindo as agregações para a construção das facetas.
• FormatFacets: irá formatar a resposta de agregações em um dicionário.
• ConvertFacetDictionary: irá converter o dicionário de facetas em um formato mais legível.

O próximo passo é criar os modelos que representarão os dados retornados no hits da consulta Elasticsearch que serão impressos como resultados em nossa página de pesquisa.

Começamos criando o arquivo /Models/Book.cs e adicionando o seguinte:

Em seguida, configure a resposta do Elastic no arquivo /Models/Response.cs e adicione o seguinte:

Configurando uma interface de usuário básica

Em seguida, adicione o componente SearchBar. No arquivo /Components/Elasticsearch/SearchBar.razor , adicione o seguinte:

Este componente contém uma barra de pesquisa e um botão para realizar a pesquisa.

O Blazor oferece grande flexibilidade ao permitir a geração dinâmica de HTML usando código C# dentro do mesmo arquivo.

Em seguida, no arquivo /Components/Elasticsearch/Results.razor construiremos o componente de resultados que exibirá os resultados da pesquisa:

Por fim, precisaremos criar facetas para filtrar os resultados da pesquisa.

Nota: Os facets são filtros que permitem aos usuários refinar os resultados da pesquisa com base em atributos ou categorias específicos, como tipo de produto, faixa de preço ou marca. Esses filtros geralmente são apresentados como opções clicáveis, frequentemente na forma de caixas de seleção, para ajudar os usuários a refinar sua pesquisa e encontrar resultados relevantes com mais facilidade. No contexto do Elasticsearch, os facets são criados usando agregações.

Configuramos as facetas inserindo o seguinte código no arquivo /Components/Elasticsearch/Facet.razor:

Este componente lê de uma agregação terms nos campos author, categories e status e, em seguida, produz uma lista de filtros para enviar de volta ao Elasticsearch.

Agora, vamos juntar tudo.

No arquivo /Components/Pages/Search.razor :

Nossa página está funcionando!

Como você pode ver, a página é funcional, mas carece de estilo. Vamos adicionar um pouco de CSS para deixar a aparência mais organizada e responsiva.

Vamos começar a substituir os estilos de layout. No arquivo Components/Layout/MainLayout.razor.css :

Adicione os estilos para a página de pesquisa no arquivo Components/Pages/Search.razor.css :

Nossa página está começando a ficar melhor:

Vamos dar os toques finais:

Crie os seguintes arquivos:

• Components/Elasticsearch/Facet.razor.css
• Components/Elasticsearch/Results.razor.css

E adicione os estilos para Facet.razor.css:

Para Results.razor.css:

Resultado final:

Para executar o aplicativo, você pode usar o seguinte comando:

dotnet watch

Você conseguiu! Agora você pode pesquisar livros em seu índice Elasticsearch usando a barra de pesquisa e filtrar os resultados por autor, categoria e status.

Realização de buscas semânticas e de texto completo

Por padrão, nosso aplicativo realizará uma pesquisa híbrida usando tanto pesquisa de texto completo quanto pesquisa semântica. Você pode alterar a lógica de pesquisa criando dois métodos separados, um para pesquisa de texto completo e outro para pesquisa semântica, e então selecionando um dos métodos para construir a consulta com base na entrada do usuário.

Adicione os seguintes métodos à classe ElasticsearchService no arquivo /Services/ElasticsearchService.cs :

Ambos os métodos funcionam de forma semelhante ao método BuildHybridQuery , mas realizam apenas pesquisa de texto completo ou pesquisa semântica.

Você pode modificar o método SearchBooksAsync para usar o método de pesquisa selecionado:

Você pode encontrar o formulário de inscrição completo aqui.

Conclusão

Blazor é uma estrutura eficaz que permite criar aplicações web usando C#. O Elasticsearch é um mecanismo de busca poderoso que permite criar aplicativos de busca. Combinando ambos, você pode facilmente criar aplicativos de busca robustos, aproveitando o poder do ESRE para criar uma experiência de busca semântica em pouco tempo.

Perguntas frequentes