Desenvolver um catálogo de conteúdo de e-commerce com Atlas Search
Avalie esse Tutorial
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.
Primeiro, comece clonando o repositório que contém o código-fonte inicial.
1 git clone https://github.com/mongodb-developer/content-catalog 2 cd content-catalog
Neste repositório, você verá três subpastas:
mdbstore
: contém a extremidade anteriorbackend
: tem o backend do Node.jsdata
: inclui um conjunto de dados que você pode usar com este aplicativo de e-commerce
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
1 cd data 2 mongorestore <CONNECTION_STRING>
Essa ferramenta localizará automaticamente o arquivo BSON da pasta de despejo e importará esses documentos para a coleção
items
dentro do banco de dadosgrocery
.Agora você tem um conjunto de dados de cerca de 20,000 itens para usar e explorar.
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.1 cd backend 2 touch .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.1 PORT=5050 2 MONGODB_URI=<CONNECTION_STRING>
Agora, inicie seu servidor. Você pode usar o executável
node
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.1 nodemon .
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.
Agora é hora de iniciar o front-end do seu aplicativo. Em uma nova janela do terminal, Go para a pasta
mdbstore
, instale todas as dependências deste projeto e inicie o projeto utilizando npm
.1 cd ../mdbstore 2 npm install 3 npm 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.
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.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.
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 campo
name
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.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.
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étodo
find()
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
.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.
E veja só! Seu site agora oferece uma experiência muito melhor para seus desenvolvedores com muito pouco código adicional.
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
compound
ao operador $search
. Isso nos permite usar dois ou mais operadores para pesquisar. Em seguida, usamos o operadormust
, que é equivalente a um operadorAND
lógico. Nesta nova array, adicionamos duas operações de pesquisa. O primeiro é o mesmo text
que tinhamos antes. Vamos nos concentrar nesse segundo.1 { 2 exists: { 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.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 pesquisa
text
, você pode adicionar o campofuzzy
para 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 rota
search/:query
para 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.
1 fuzzy: {}
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.
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?