MongoDB Atlas Search com .NET Blazor para pesquisar texto completo
Avalie esse Tutorial
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.
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.
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.
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.”
- Dentro do Atlas, clique em "Browse Collections " para abrir o explorador de dados para visualizar seus dados de amostra recém-carregados.
- Selecione a aba “Atlas Search” na parte superior.
- Clique no botão verde “Create Search Index” para carregar o assistente de criação de índice.
- Selecione Editor Visual e clique em "Next. "
- Dê um nome ao seu índice. O que você escolher depende de você.
- Para “Database and Collection,”, selecione “sample_mflix” para expandir o banco de dados e selecione a coleção “movies”. Em seguida, clique em "Next. "
- 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.
- Clique em “+ Add Field Mapping” na metade da página.
- Em "Field Name, ", procure "title. "
- 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.
- Clique no botão “Add” no canto inferior direito.
- Clique em “Save” e depois em “Create Search Index.”
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:
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 pasta
Services .A primeira é adicionar um novo método para pesquisar na interface.
Abra
IMongoDBService.cs e adicione o seguinte código:Retornamos um IEnumerable de documentos de filme porque vários documentos podem corresponder aos termos de pesquisa.
O próximo passo é adicionar a implementação ao serviço.
- Abra
MongoDBService.cse cole o seguinte código:
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:
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.
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.- Dentro do
@codebloco, abaixo das variáveis existentes, adicione o seguinte código:
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.
- Adicione o seguinte código após os métodos existentes:
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étodo
DebounceSearchcomo 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:
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.
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.