Explore o novo chatbot do Developer Center! O MongoDB AI chatbot pode ser acessado na parte superior da sua navegação para responder a todas as suas perguntas sobre o MongoDB .

Junte-se a nós no Amazon Web Services re:Invent 2024! Saiba como usar o MongoDB para casos de uso de AI .
Desenvolvedor do MongoDB
Central de desenvolvedor do MongoDBchevron-right
Idiomaschevron-right
C#chevron-right

MongoDB Atlas Search com .NET Blazor para pesquisar texto completo

Luce Carter6 min read • Published Feb 01, 2024 • Updated Feb 01, 2024
.NETC#
APLICATIVO COMPLETO
Ícone do FacebookÍcone do Twitterícone do linkedin
Avalie esse Tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Imagine ser presenteado com um website com uma grande quantidade de dados e não poder pesquisar o que deseja. Em vez disso, você é forçado a examinar pilhas de resultados sem nenhum fim à vista.
Essa é, é claro, a última coisa que você deseja para você ou para seus usuários. Portanto, neste tutorial, vamos ver como você pode implementar facilmente a pesquisa com preenchimento automático em seu aplicativo .NET Blasor usando oMongoDB Atlas Search.
O Atlas Search é a maneira mais fácil e rápida de implementar pesquisas relevantes em seus aplicativos apoiados pelo MongoDB Atlas, tornando mais simples para os desenvolvedores se concentrarem na implementação de outras coisas.

Pré-requisitos

Para acompanhar este tutorial, você precisará de algumas coisas antes de começar:
  • Um IDE ou editor de texto compatível com C# e Blazor para uma experiência de desenvolvimento perfeita, como Visual Studio, Visual Studio Code com a extensão C# DevKit instalada e JetBrains Rider.
  • Um cluster Atlas M0 , nossa camada gratuita para sempre, ideal para desenvolvimento.
  • A connection string do cluster para uso posterior nas configurações do aplicativo.
  • Uma bifurcação do repositório GitHub ao qual adicionaremos pesquisa.
Depois de bifurcar e clonar o repositório e usá-lo localmente, você precisará adicionar sua connection string a appsettings.Development.json e appsettings.json na seção de espaço reservado para se conectar ao seu cluster ao executar o projeto.
Se você não quiser acompanhar, o repositório tem uma ramificação chamada "full-text-search" que tem o resultado final implementado.

criando índices do atlas search

Antes de podermos começar a adicionar o Atlas Search ao nosso aplicativo, precisamos criar índices de pesquisa dentro do Atlas. Esses índices habilitam recursos de pesquisa de texto completo em nosso banco de dados. Queremos especificar quais campos desejamos indexar.
O Atlas Search oferece suporte a índices dinâmicos, que se aplicam a todos os campos e se adaptam a qualquer alteração na forma do documento. Mas neste tutorial, vamos adicionar um índice de pesquisa para um campo específico, “title.”
  1. Dentro do Atlas, clique em "Browse Collections " para abrir o explorador de dados para visualizar seus dados de amostra recém-carregados.
  2. Selecione a aba “Atlas Search” na parte superior.
  3. Clique no botão verde “Create Search Index” para carregar o assistente de criação de índice.
  4. Selecione Editor Visual e clique em "Next. "
  5. Dê um nome ao seu índice. O que você escolher depende de você.
  6. Para “Database and Collection,”, selecione “sample_mflix” para expandir o banco de dados e selecione a coleção “movies”. Em seguida, clique em "Next. "
  7. Na seção de revisão final, clique no botão "Refine Your Index" abaixo da tabela "Index Configurations", pois queremos fazer algumas alterações.
  8. Clique em “+ Add Field Mapping” na metade da página.
  9. Em "Field Name, ", procure "title. "
  10. Para "Data Type, ", selecione "Autocomplete. ". Isso ocorre porque queremos ter o preenchimento automático disponível em nosso aplicativo para que os usuários possam ver os resultados à medida que começam a digitar.
  11. Clique no botão “Add” no canto inferior direito.
  12. Clique em “Save” e depois em “Create Search Index.”
Campo de título mapeado como preenchimento automático
Após alguns minutos, o índice de pesquisa será configurado e o aplicativo estará pronto para ser "searchified."
Se você preferir usar o editor JSON para simplesmente copiar e colar, você pode usar o seguinte:
1{
2 "mappings": {
3 "dynamic": true,
4 "fields": {
5 "title": {
6 "type": "autocomplete"
7 }
8 }
9 }
10}

Implementação da funcionalidade de backend

Agora que o banco de dados está configurado para suportar o Atlas Search com nossos novos índices, é hora de atualizar o código no aplicativo para suportar a pesquisa. O código tem uma interface e um serviço para comunicar com o Atlas utilizando o driver MongoDB C# que pode ser encontrado na pastaServices .

Adicionando um novo método ao IMongoDBService

A primeira é adicionar um novo método para pesquisar na interface.
Abra IMongoDBService.cs e adicione o seguinte código:
1public IEnumerable<Movie> MovieSearchByText (string textToSearch);
Retornamos um IEnumerable de documentos de filme porque vários documentos podem corresponder aos termos de pesquisa.

Implementando o método no MongoDBService

O próximo passo é adicionar a implementação ao serviço.
  1. Abra MongoDBService.cs e cole o seguinte código:
1public IEnumerable<Movie> MovieSearchByText(string textToSearch)
2{
3// define fuzzy options
4 SearchFuzzyOptions fuzzyOptions = new SearchFuzzyOptions()
5 {
6 MaxEdits = 1,
7 PrefixLength = 1,
8 MaxExpansions = 256
9 };
10
11 // define and run pipeline
12 var movies = _movies.Aggregate().Search(Builders<Movie>.Search.Autocomplete(movie => movie.Title,
13 textToSearch, fuzzy: fuzzyOptions), indexName: "title").Project<Movie>(Builders<Movie>.Projection
14 .Exclude(movie => movie.Id)).ToList();
15 return movies;
16}
Substitua o valor de indexName pelo nome que você deu ao seu índice de pesquisa.
A pesquisa difusa permite a correspondência aproximada com um termo de pesquisa, o que pode ser útil com coisas como erros de digitação ou ortografia. Então, configuramos algumas opções de pesquisa difusa aqui, como o quão perto do termo certo os caracteres precisam estar e quantos caracteres no início devem corresponder exatamente.
O Atlas Search é realizado usando o estágio de agregação $search, portanto, chamamos .Aggregate() na coleção de filmes e, em seguida, chamamos o método ``Search```.
Em seguida, passamos um construtor para o estágio de pesquisa para pesquisar o título usando nosso texto de pesquisa inserido e as opções difusas de antes.
O estágio.Project() é opcional, mas vamos incluí-lo porque não usamos o campo _id em nosso aplicativo. Portanto, por motivos de desempenho, é sempre bom excluir todos os campos que você sabe que não precisarão ser retornados.
Você também precisará garantir que as seguintes instruções de uso estejam presentes na parte superior da classe para que o código seja executado posteriormente:
1using SeeSharpMovies.Models;
2using MongoDB.Driver;
3using MongoDB.Driver.Search;
Assim, o back-end está pronto para aceitar um termo de pesquisa, pesquisar a coleção em busca de documentos correspondentes e retornar o resultado.

Implementação da funcionalidade de frontend

Agora que o back-end está pronto para aceitar nossas pesquisas, é hora de implementá-lo no front-end para que os usuários possam pesquisar. Isso será dividido em duas partes: o código no frontend para falar com o backend e a barra de pesquisa em HTML para digitar.
Este aplicativo usa páginas depilação que suportam ter código no frontend. Se você examinar Home.razor na pastaComponents/Pages, verá que já existe algum código para solicitar todos os filmes e paginação.
  1. Dentro do @code bloco, abaixo das variáveis existentes, adicione o seguinte código:
1string searchTerm;
2Timer debounceTimer;
3int debounceInterval = 200;
Como esperado, há uma string para manter o termo de pesquisa, mas os outros dois valores podem não parecer lógicos. Em desenvolvimento, onde você está aceitando entradas e, em seguida, chamando algum tipo de serviço, deseja evitar chamá-lo com muita frequência. Então você pode implementar algo chamado deboundance que lida com isso. Você verá isso implementado mais tarde, mas ele usa um cronômetro e um intervalo — neste caso, 200 milissegundos.
  1. Adicione o seguinte código após os métodos existentes:
1private void SearchMovies()
2 {
3 if (string.IsNullOrWhiteSpace(searchTerm))
4 {
5 movies = MongoDBService.GetAllMovies();
6 }
7 else
8 {
9 movies = MongoDBService.MovieSearchByText(searchTerm);
10 }
11 }
12
13
14void DebounceSearch(object state)
15 {
16 if (string.IsNullOrWhiteSpace(searchTerm))
17 {
18 SearchMovies();
19 }
20 else
21 {
22 InvokeAsync(() =>
23 {
24 SearchMovies();
25 StateHasChanged();
26 });
27 }
28 }
29
30void OnSearchInput(ChangeEventArgs e)
31 {
32 searchTerm = e.Value.ToString();
33 debounceTimer?.Dispose();
34 debounceTimer = new Timer(DebounceSearch, null, debounceInterval, Timeout.Infinite);
35 }
SearchMovies: este método lida com uma caixa de pesquisa vazia, pois tentar pesquisar em nada causará erro. Portanto, se não houver nada na caixa de pesquisa, ela buscará todos os filmes novamente. Caso contrário, ele chama o método de backend que implementamos anteriormente para pesquisar por esse termo.
DebourceSearch: Chama a pesquisa de filmes e, se houver um termo de pesquisa disponível, também informa ao componente que o estágio mudou.
OnSearchInput: Isso será chamado mais tarde pela nossa caixa de pesquisa, mas é um manipulador de eventos que diz que, quando houver um evento de alteração, defina o termo de pesquisa como o valor da caixa, redefina o cronômetro de debounce e inicie-o novamente a partir do intervalo do cronômetro, passando o métodoDebounceSearchcomo uma função de retorno de chamada.
Agora que temos o código para lidar sem problemas com o recebimento de entradas e a chamada do back-end, é hora de adicionar a caixa Atlas Search à nossa interface do usuário.
Adicionar a barra de pesquisa é muito simples. Vamos adicioná-lo ao componente de cabeçalho já presente na página inicial.
Após a marcação do link com o texto "See Sharp Movies, ", adicione o seguinte HTML:
1<div class="form-inline search-bar">
2 <input class="form-control mr-sm-2"
3 type="search" placeholder="Search"
4 aria-label="Search"
5 @oninput="OnSearchInput" @bind="searchTerm">
6</div>

Testando a funcionalidade Atlas Search

Agora que temos o código de back-end disponível e o front-end tem a caixa de pesquisa e uma maneira de enviar o termo de pesquisa para o back-end, é hora de executar o aplicativo e vê-lo em ação.
Execute o aplicativo, insira um termo de pesquisa na caixa e teste o resultado.
Animação mostrando a busca nos filmes

Resumo

Excelente! Agora você tem um aplicativo Blazor com funcionalidade de pesquisa adicionada e um bom ponto de partida para usar a pesquisa de texto completo em seus aplicativos daqui para frente.
Se quiser saber mais sobre a Atlas Search, incluindo mais recursos do que apenas o preenchimento automático, você pode fazer um curso surpreendente daAtlas Search criado pelo meu colega ou visualizar os [Docs]https://www.mongodb.com/pt-br/Docs/manual/text-search/). Se você tiver perguntas ou comentários, Junte-se a nós nos Fóruns da Comunidade.
Principais comentários nos fóruns
Ainda não há comentários sobre este artigo.
Iniciar a conversa

Ícone do FacebookÍcone do Twitterícone do linkedin
Avalie esse Tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Relacionado
Tutorial

Usando polimorfismo com MongoDB e C#


Apr 30, 2024 | 6 min read
Tutorial

Trabalhando com transações MongoDB com C# e .NET Framework


Sep 11, 2024 | 3 min read
Tutorial

Tutorial do provedor MongoDB para o EF Core: criação de um aplicativo com CRUD e controle de alterações


Jan 24, 2024 | 18 min read
Tutorial

Crie uma API RESTful com .NET Core e MongoDB


Sep 11, 2024 | 8 min read
Sumário