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
Produtoschevron-right
Atlaschevron-right

Desenvolver um catálogo de conteúdo de e-commerce com Atlas Search

Joel Lord10 min read • Published May 31, 2022 • Updated Jun 27, 2022
AtlasPesquisaJavaScript
Ícone do FacebookÍcone do Twitterícone do linkedin
Desenvolver um catálogo de conteúdo de comércio eletrônico
Avalie esse Tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
A pesquisa agora é uma parte fundamental dos aplicativos em todos os setores, mas especialmente no mundo do varejo e do e-commerce. Se seus clientes não conseguirem encontrar o que procuram, eles Go para outro website e comprarão lá. A melhor maneira de fornecer aos seus clientes uma ótima experiência de compra é fornecer uma ótima experiência de pesquisa. No que diz respeito à pesquisa, o Atlas Search, parte do MongoDB Atlas, é a maneira mais fácil de criar uma pesquisa avançada, rápida e baseada em relevância diretamente em seus aplicativos. Neste tutorial, criaremos um website com uma pesquisa de texto simples e usaremos o Atlas Search para integrar recursos de pesquisa de texto completo, adicionar preenchimento automático à nossa caixa de pesquisa e até mesmo promover alguns de nossos produtos à venda.

Pré-requisitos

Você pode encontrar o código fonte completo deste aplicativo no Github. O aplicativo é criado usando a MERN. Ele tem um Node.js executando a Express, um MongoDB Atlas e um React.

Começar

Primeiro, comece clonando o repositório que contém o código-fonte inicial.
1git clone https://github.com/mongodb-developer/content-catalog
2cd content-catalog
Neste repositório, você verá três subpastas:
  • mdbstore: contém a extremidade anterior
  • backend: tem o backend do Node.js
  • data: inclui um conjunto de dados que você pode usar com este aplicativo de e-commerce

Criar um banco de dados e importar o conjunto de dados

Primeiro, comece criando um MongoDB Atlas cluster seguindo as instruções dos Docs. Depois de instalar e executar um cluster, localize sua connection string. Você usará essa connection string com mongorestore para importar o conjunto de dados fornecido para o seu cluster.
Você pode encontrar as instruções de instalação e informações de uso do mongorestore na documentação do MongoDB.
Use sua connection string sem o nome do banco de dados no final. Deve ficar como mongodb+srv://user:password@cluster0.xxxxx.mongodb.net
1cd data
2mongorestore <CONNECTION_STRING>
Essa ferramenta localizará automaticamente o arquivo BSON da pasta de despejo e importará esses documentos para a coleçãoitems dentro do banco de dadosgrocery.
Agora você tem um conjunto de dados de cerca de 20,000 itens para usar e explorar.

Inicie a API de backend do Node.js

O back-end do Node.js atuará como uma API que seu front-end pode usar. Ele se conectará ao seu banco de dados usando uma string de conexão fornecida em um arquivo.env. Comece criando esse arquivo.
1cd backend
2touch .env
Abra seu editor de código favorito e insira o seguinte no arquivo.env. Altere <CONNECTION_STRING> para sua connection string atual do MongoDB Atlas.
1PORT=5050
2MONGODB_URI=<CONNECTION_STRING>
Agora, inicie seu servidor. Você pode usar o executávelnode para iniciar seu servidor, mas é mais fácil usar o nodemon durante o desenvolvimento. Essa ferramenta recarregará automaticamente seu servidor quando detectar uma alteração no código-fonte. Você pode descobrir mais sobre como instalar a ferramenta no site oficial.
1nodemon .
Este comando iniciará o servidor. Você deverá ver uma mensagem em seu console confirmando que o servidor está em execução e o banco de dados está conectado.

Inicie o aplicativo frontend React

Agora é hora de iniciar o front-end do seu aplicativo. Em uma nova janela do terminal, Go para a pastamdbstore, instale todas as dependências deste projeto e inicie o projeto utilizando npm.
1cd ../mdbstore
2npm install
3npm start
Quando isso for concluído, uma guia do navegador será aberta e você verá sua loja em pleno funcionamento. O front end é um aplicativo React. Tudo no frontend já está conectado à API de backend, então não vamos fazer nenhuma alteração aqui. Sinta-se à livre para explorar o código-fonte para saber mais sobre como usar o React com um back-end do Node.js.

Explore o aplicativo

Sua vitrine agora está instalada e funcionando. Uma única página permite pesquisar e listar todos os produtos. Tente pesquisar por chicken. Bem, você provavelmente não tem muitos resultados. Na verdade, você não encontrará nenhum resultado. Agora tente Boneless Chicken Thighs. Há uma correspondência! Mas isso não é muito conveniente. Seus usuários não sabe o nome exato dos seus produtos. Não importa possíveis erros de digitação ou erros. Esse e-commerce oferece uma experiência muito ruim aos clientes e corre o risco de perder alguns negócios. Neste tutorial, você verá como aproveitar o Atlas Search para fornecer uma experiência perfeita para seus usuários.

Adicionar recursos de pesquisa de texto completo

A primeira coisa que vamos fazer por nossos usuários é adicionar recursos de pesquisa de texto completo a esse aplicativo de e-commerce. Ao adicionar um índice de pesquisa, teremos a capacidade de pesquisar todos os campos de texto de nossos documentos. Assim, em vez de pesquisar apenas o nome de um produto, podemos pesquisar pelo nome, categoria, tags e assim por diante.
Comece criando um índice de pesquisa em sua coleção. Encontre sua collection na interface do usuário do MongoDB Atlas e clique em Atlas Search na barra de navegação superior. Isso o levará à tela de criação do Índice do Atlas Search. Clique em Criar Índice.
A IU Criar Índice de Pesquisa no Atlas
Nesta tela, clique em Avançar para usar o editor visual. Em seguida, escolha os dados recém-importados — ' mercearia/itens ', no banco de dados e tela de collection. Aceite todos os padrões e crie esse índice.
Enquanto estiver lá, você também pode criar o índice que será usado posteriormente para o preenchimento automático. Clique novamente em Create Index e clique em Next para usar o editor visual. Dê a esse novo índice o nome autocomplete, selecione "grocery/items" novamente e clique em Next.
Na tela seguinte, clique no botão Refinar índice para adicionar os recursos de preenchimento automático ao índice. Clique no botão Adicionar campo para adicionar um novo campo que suportará pesquisas de preenchimento automático. Escolha o camponame no menu suspenso. Em seguida, desative a opçãoEnable Dynamic Mapping. Por fim, clique em Adicionar tipo de dados e, no menu suspenso, escolha preenchimento automático. Você pode salvar essas configurações e clicar no botão Criar índice de pesquisa. Você pode encontrar instruções detalhadas para configurar o índice neste tutorial.
A UI com as configurações necessárias
Depois que seu índice for criado, você poderá usar o estágio $search em um aggregation pipeline. O estágio $search permite realizar uma pesquisa de texto completo em suas collections. Você pode experimentar acessando a aba Agregações depois de selecionar sua coleção ou usando Compass, a interface do usuário do MongoDB.
O primeiro pipeline de agregação que criaremos é para os resultados da pesquisa. Em vez de retornar apenas resultados que tenham uma correspondência exata, usaremos o Atlas Search para retornar todos os resultados semelhantes ou próximos à intenção de pesquisa do usuário.
Na tela Construtor de agregação, crie um novo pipeline adicionando um primeiro estágio $search.
O Construtor de Agregações no Compass
Você usa o seguinte JSON para o primeiro estágio do seu pipeline.
1{
2 index: 'default',
3 text: {
4 query: "chicken",
5 path: ["name"]
6 }
7}
E pronto! Você já tem resultados de pesquisa muito melhores. Você também pode adicionar outros estágios aqui para limitar o número de resultados ou classificá-los em uma ordem específica. Para este aplicativo, isso é tudo de que precisamos por enquanto. Vamos tentar importar isso para a API usada para este projeto.
No arquivo backend/index.js, procure a rota que escuta solicitações GET em /search/:query. Aqui, substitua o código entre os comentários pelo código que você usou para seu pipeline de agregação. Desta vez, em vez de usar o valor codificado, use req.params.query para usar a string de query enviada ao servidor.
1 /** TODO: Update this to use Atlas Search */
2 results = await itemCollection.aggregate([
3 { $search: {
4 index: 'default',
5 text: {
6 query: req.params.query,
7 path: ["name"]
8 }
9 }
10 }
11 ]).toArray();
12 /** End */
O código antigo usava o métodofind()para encontrar uma correspondência exata. Esse novo código usa o índice Search recém-criado para retornar quaisquer registros que contenham, parcial ou totalmente, o termo de pesquisa que passamos a ele.
Se você tentar usar o aplicativo novamente com a palavra "Chicken, ", obterá muito mais resultados desta vez. Além disso, você também pode notar que suas pesquisas também não diferenciam maiúsculas de minúsculas. Mas podemos fazer ainda melhor. Às vezes, seus usuários podem estar pesquisando termos mais genéricos, como uma das tags que descrevem os produtos ou a marca. Vamos adicionar mais campos a este Atlas Search para retornar registros mais relevantes.
No estágio$search que você adicionou no trecho de código anterior, altere o valor do campo de caminho para conter todos os campos que você deseja pesquisar.
1 /** TODO: Update this to use Atlas Search */
2 results = await itemCollection.aggregate([
3 { $search: {
4 index: 'default',
5 text: {
6 query: req.params.query,
7 path: ["name", "brand", "category", "tags"]
8 }
9 }
10 }
11 ]).toArray();
12 /** End */
Experimente seu novo aplicativo novamente. Experimente algumas marcas que você conhece para ver se consegue encontrar o produto que está procurando.
Seus recursos de pesquisa agora estão muito melhores e a experiência do usuário em seu site já foi aprimorada, mas vamos ver se podemos tornar isso ainda melhor.
Uma funcionalidade comum aos mecanismos de pesquisa mais modernos é um menu suspenso de preenchimento automático que mostra sugestões conforme você digita. Na verdade, esse é o comportamento esperado dos usuários. Eles não querem percorrer uma lista infinita de possíveis correspondências; eles preferem encontrar o caminho certo rapidamente.
Nesta seção, você usará os recursos de preenchimento automático do Atlas Search para ativar isso na sua caixa do Atlas Search. A interface do usuário já tem esse recurso implementado e você já criou os índices necessários, mas ele não aparece porque a API não está retornando resultados.
Abra o construtor de aggregation novamente para criar um novo pipeline. Comece com um estágio $search novamente e use o seguinte. Observe como esse estágio $search usa o estágio autocomplete criado anteriormente.
1{
2 'index': 'autocomplete',
3 'autocomplete': {
4 'query': "chic",
5 'path': 'name'
6 },
7 'highlight': {
8 'path': [
9 'name'
10 ]
11 }
12}
No painel de visualização, você deverá ver alguns resultados que contêm a string "chic" no nome. São muitas correspondências em potencial. Para nosso aplicativo, não queremos retornar todas as correspondências possíveis. Em vez disso, vamos pegar apenas as cinco primeiras. Para isso, um estágio $limit é usado para limitar os resultados a cinco. Clique em Add Stage, selecione $limit no menu suspenso e substitua number pelo valor 5.
O pipeline de agregação de preenchimento automático no Compass
Excelente! Agora temos apenas cinco resultados. Como essa solicitação será executada a cada pressionamento de tecla, queremos que ela seja o mais rápida possível e limite ao máximo a largura de banda necessária. Um estágio $project pode ser adicionado para ajudar com isso — retornaremos apenas o campo "name" em vez dos documentos completos. Clique em Adicionar estágio novamente, selecione $project no menu suspenso e use o seguinte JSON.
1{
2 'name': 1,
3 'highlights': {
4 '$meta': 'searchHighlights'
5 }
6}
Observe que também adicionamos um novo campo chamado highlights. Este campo retorna os metadados fornecidos a nós pelo Atlas Search. Você pode encontrar muitas informações nesses metadados, como a pontuação de cada item. Isso pode ser útil para classificar os dados, por exemplo.
Agora que você tem um pipeline de agregação funcional, pode usá-lo em seu aplicativo.
No arquivo backend/index.js, procure a rota que escuta solicitações GET em /autocomplete/:query. Após o comentárioTODO, adicione o seguinte código para executar seu pipeline de agregação. Não se lembre de substituir a query codificada por req.params.query. Você pode exportar o pipeline diretamente do Compass ou usar o seguinte trecho de código.
1 // TODO: Insert the autocomplete functionality here
2 results = await itemCollection.aggregate([
3 {
4 '$search': {
5 'index': 'autocomplete',
6 'autocomplete': {
7 'query': req.params.query,
8 'path': 'name'
9 },
10 'highlight': {
11 'path': [
12 'name'
13 ]
14 }
15 }
16 }, {
17 '$limit': 5
18 }, {
19 '$project': {
20 'name': 1,
21 'highlights': {
22 '$meta': 'searchHighlights'
23 }
24 }
25 }
26 ]).toArray();
27 /** End */
Go ao seu aplicativo e teste-o para ver a nova funcionalidade de preenchimento automático.
O aplicativo final em ação
E veja só! Seu site agora oferece uma experiência muito melhor para seus desenvolvedores com muito pouco código adicional.

Adicionar pontuação personalizada para ajustar os resultados do Atlas Search

Ao fornecer resultados aos seus usuários, talvez você queira impulsionar alguns produtos. O Altas Search pode ajudá-lo a promover resultados específicos, dando-lhe o poder de alterar e ajustar a pontuação de relevância dos resultados. Um exemplo típico é colocar os itens atualmente à venda na parte superior dos resultados da pesquisa. Vamos fazer isso imediatamente.
No arquivobackend/index.js, substitua a consulta do banco de dados para a rota/search/:query novamente para usar o seguinte pipeline de agregação.
1 /** TODO: Update this to use Atlas Search */
2 results = await itemCollection.aggregate([
3 { $search: {
4 index: 'default',
5 compound: {
6 must: [
7 {text: {
8 query: req.params.query,
9 path: ["name", "brand", "category", "tags"]
10 }},
11 {exists: {
12 path: "price_special",
13 score: {
14 boost: {
15 value: 3
16 }
17 }
18 }}
19 ]
20 }
21 }
22 }
23 ]).toArray();
24 /** End */
Isso pode parecer muito; vamos dar uma olhada em mais detalhes.
1 { $search: {
2 index: 'default',
3 compound: {
4 must: [
5 {...},
6 {...}
7 ]
8 }
9 }
10 }
Primeiro, adicionamos um objeto compoundao operador $search . Isso nos permite usar dois ou mais operadores para pesquisar. Em seguida, usamos o operadormust, que é equivalente a um operadorANDlógico. Nesta nova array, adicionamos duas operações de pesquisa. O primeiro é o mesmo text que tinhamos antes. Vamos nos concentrar nesse segundo.
1{
2exists: {
3 path: "price_special",
4 score: {
5 boost: {
6 value: 3
7 }
8 }
9}
Aqui, ordenamos ao Atlas Search para aumentar a pontuação de relevância atual em três se o campo price_special existir no documento. Ao fazer isso, qualquer documento à venda terá uma pontuação de relevância muito maior e estará no topo dos resultados da pesquisa. Se você tentar seu aplicativo novamente, notará que todos os primeiros resultados têm um preço de venda.

Adicionar correspondência difusa

Outro recurso comum na pesquisa de catálogos de produtos atualmente é a correspondência difusa. A implementação de um recurso de correspondência difusa pode ser um pouco complexa, mas o Atlas Search torna isso mais simples. Em uma pesquisatext, você pode adicionar o campofuzzypara especificar que deseja adicionar esse recurso aos resultados da pesquisa. Você pode ajustar essa funcionalidade usando várias opções, mas manteremos os padrõesdesse aplicativo.
Mais uma vez, no arquivobackend/index.js, altere a rotasearch/:querypara o seguinte.
1 /** TODO: Update this to use Atlas Search */
2 results = await itemCollection.aggregate([
3 { $search: {
4 index: 'default',
5 compound: {
6 must: [
7 {text: {
8 query: req.params.query,
9 path: ["name", "brand", "category", "tags"],
10 fuzzy: {}
11 }},
12 {exists: {
13 path: "price_special",
14 score: {
15 boost: {
16 value: 3
17 }
18 }
19 }}
20 ]
21 }
22 }
23 }
24 ]).toArray();
25 /** End */
Você notará que a diferença é muito discreta. Uma única linha foi adicionada.
1fuzzy: {}
Isso habilita a correspondência difusa para essa operação $search. Isso significa que o mecanismo de busca procurará palavras-chave correspondentes, bem como correspondências que possam ser ligeiramente diferentes. Experimente seu aplicativo novamente e, desta vez, tente pesquisarchickn. Você ainda deve conseguir ver alguns resultados.
Uma pesquisa difusa é um processo que localiza páginas da web que provavelmente são relevantes para um argumento de pesquisa, mesmo quando o argumento não corresponde exatamente às informações desejadas.

Resumo

Para garantir que seu website seja bem-sucedido, você precisa facilitar para que seus usuários encontrem o que procuram. Além disso, talvez haja alguns produtos que você queira levar adiante. Atlas Search oferece todas as ferramentas necessárias para permitir que você adicione rapidamente essas funcionalidades ao seu aplicativo, tudo usando a mesma MongoDB Query API com a qual você já está familiarizado. Além disso, não há necessidade de manter um segundo servidor e sincronizar com um mecanismo de pesquisa.
Todas essas funcionalidades estão disponíveis agora no MongoDB Atlas. Se ainda não o fez, por que não tentar agora mesmo em nossos clusters de uso gratuito?

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

Impressione-se: sinônimos no Atlas Search


Feb 27, 2023 | 9 min read
Tutorial

Consulta flexível com Atlas Search


Jul 12, 2024 | 3 min read
Tutorial

Como implantar o MongoDB Atlas com o Terraform na AWS


Jan 23, 2024 | 12 min read
Tutorial

Desbloqueando a pesquisa semântica: crie um mecanismo de pesquisa de filmes baseado em Java com o Atlas Vector Search e o Spring Boot


Sep 18, 2024 | 10 min read
Sumário