MongoDB Atlas Search para encontrar facilmente seus dados | Implementação de Pesquisa e Preenchimento Automático | Iniciar
Avalie esse Vídeo
00:00:32Introdução ao MongoDB Atlas Atlas Search
00:01:40Recapitulação da série MongoDB Hubstart
00:03:46Configurando o MongoDB Atlas Atlas Search
00:04:49Testando o índice do Atlas Search
00:06:53 Realm uma função de domínio para Atlas Search
00:11:02testando a função do Atlas Search no Realm
00:13:05Implementando o Atlas Search no front-end
00:17:09Configurando o índice de preenchimento automático no Atlas
00:38:37Criando função de preenchimento automático no Realm
00:42:48Integrando o preenchimento automático no front-end
O foco principal do vídeo é instruir os visualizadores a implementar as funcionalidades do Atlas Search e de preenchimento automático em um aplicativo de e-commerce usando as funções sem servidor do MongoDB Atlas Atlas Search e MongoDB Realm .
} Pontos-chave
- MongoDB Atlas Atlas Search oferece um poderoso mecanismo de Atlas Search com recursos como tolerância a erros de digitação, preenchimento automático, filtros, facetas e pontuação personalizada.
- O vídeo demonstra a configuração de índices do Atlas Search, a realização de pesquisas difusas e a integração da funcionalidade do Atlas Search no front-end de um aplicativo.
- A funcionalidade de preenchimento automático é implementada para fornecer sugestões em tempo real à medida que os usuários digitam na barra do Atlas Search.
- O tutorial inclui instruções passo a passo sobre como criar funções sem servidor no MongoDB Realm para lidar com as queries do Atlas Search.
Links relacionados
- https://bit.ly/3kZTE4S
- https://mdb.link/free-jnxnhbTO2RA
- https://mdb.link/community-jnxnhbTO2RA
- https://bit.ly/3huMq6z
- https://twitter.com/codestackr
- https://youtube.com/codestackr
- https://linkedin.com/in/codestackr
- https://instagram.com/codestackr
- https://tiktok.com/@codestackr
- https://bit.ly/3bpg1Z1
- https://bit.ly/2LjtNBZ
- https://bit.ly/3fH87gR
- https://bit.ly/3fEaIsd
- https://bit.ly/2SY9w90
- https://bit.ly/3bn9bDv
- https://bit.ly/2I8VCi5
- https://bit.ly/3fHoqdJ
Transcrição completa do vídeo
[Música] você já se Perguntou como as pesquisas funcionam em sites e o autocomplete neste vídeo mostrar como implementar a Atlas Search e o autocomplete com o MongoDB Atlas oi, meu nome é jesse, trabalho como desenvolvedor sênior no MongoDB bem-vindo de volta à série salto de inicialização do MongoDB nos vídeos anteriores desta série, criamos um cluster Atlas conectado ao nosso cluster usando a extensão MongoDB VS Code e a interface do usuário do MongoDB Compass importamos alguns dados para usar em nosso projeto de e-commerce que estamos construindo nosso front-end usando nexjs e tailwind css e usou as funções sem servidor do MongoDB realm para trazer nossos dados para nosso aplicativo se você perdeu esses vídeos, fique à vontade para Go e assisti-los o link para a lista de reprodução está na descrição abaixo, mas se você já estiver familiarizado com o MongoDB Atlas e quiser saber mais sobre o MongoDB Atlas Search, então você está no lugar certo neste vídeo, vamos implementar a Atlas Search e o preenchimento automático em nosso aplicativo de e-commerce MongoDB Atlas O Atlas Search facilita a criação rápida e relevante de recursos de Atlas Search de texto completo além de seus dados na nuvem, disponível exclusivamente com o MongoDB Atlas, com o Atlas Search você obtém um mecanismo de Atlas Search movido a leucina pontuação e muito mais, então vamos ver como configurá-lo bem aqui em nosso painel do Atlas, Go procurar coleções e, em seguida, para Atlas Search e criar um índice do Atlas Search para este exemplo que vamos usar o editor visual e depois vamos nomear estes produtos do Atlas Search e vamos expandir nosso armazenamento de banco de dados e selecionar produtos isso vai criar um índice padrão do Atlas Search para nossa coleção de produtos então vamos criar o índice do Atlas Search podemos testar nosso índice clicando em query então aqui por padrão veremos todos os nossos documentos vamos inserir uma query aqui então diremos que a categoria vai ser igual a hat e vamos procurar o Atlas [Música] e então agora' s só vai retornar o único documento que está na categoria hat e se quiser mais detalhes, você pode clicar nele e ver que ele estava na categoria hat e o nome dele é npm hat se quiser para ver a sintaxe de consulta e isso mostra exatamente como formatar esta Pesquisa do Atlas usando a API do MongoDB, você também pode exportar para uma linguagem específica; portanto, se precisar de Python e Java c-sharp ou Ruby , você pode selecione isso, então vamos criar uma função de realm que utilize esse índice do Atlas Search, então vamos Go aqui para realm e vamos Go ao nosso aplicativo de produtos de realm que criamos nos vídeos anteriores e depois Go para funções e vamos criar uma nova função e vamos chamar isso de produtos do Atlas Search e, em seguida, em nosso editor de função, teremos um argumento ou um termo do Atlas Search que teremos que utilizar então vamos excluir tudo daqui agora mesmo o a primeira coisa que precisaremos fazer é obter nosso c a oleção será igual a contexto ponto serviços Atlas e depois nosso banco de dados de lojas e depois a collection de produtos então agora temos nossa collection aqui a seguir criaremos nosso pipeline que será uma array e dentro disso vamos ter um objeto que será o Atlas Search, então novamente vimos esse exemplo apenas um minuto atrás, quando testamos nosso índice do Atlas Search, bem, então em nosso Atlas Search usaremos nosso índice, que é o que acabamos de criar Índice de produtos do Atlas Search e, em seguida, para o nosso texto, passaremos pela nossa query, que é o nosso argumento, que será o termo do Atlas Search que passaremos para a nossa função e, em seguida, para o caminho, selecionaremos um curinga que nos permite fazer o Atlas Search em qualquer campo de qualquer documento e, por último, retornaremos nossa coleção.agregado e depois passar nosso pipeline de agregação bem, então vamos salvar o rascunho e então podemos Go ao nosso console e teste isso em vez de hello wor ld como nosso argumento vamos dizer hat e vamos executar isso e deveremos ter retornado nosso objeto, que é o nosso hat npm , tudo bem então se voltarmos aqui e fizermos a busca no Atlas por, digamos, cachecol, acha que deve haver dois Go , então vamos executar isto JavaScript Go de volta ao nosso aplicativo front-end, eu tenho nosso componente de cabeçalho aberto e vamos rolar para baixo até nossa entrada, temos essa entrada Atlas Search e ela não faz nada no momento, então vamos selecioná-lo e usar emitir para envolver isso com um tag de formulário e, em vez de ação, vamos dizer em enviar e vamos dizer lidar com envio e então teremos uma alteração em e isso será igual a uma função e nessa função vamos chamar de definir o termo de pesquisa Atlas e criaremos esse estado de uso em apenas um minuto, então vamos g para definir nosso termo do Atlas Search como igual e ponto ao valor do ponto de destino e então vamos definir nosso valor como igual ao termo do Atlas Search, então vamos Go até o topo aqui e vamos criar isso então nós basta usar um deles como exemplo, então diremos termo do Atlas Search e, em seguida, defina o termo do Atlas Search e o estado inicial será uma string vazia, tudo bem, então precisamos criar essa função de envio de identificador, então vamos criar isso aqui diremos const lidar com envio e esta função terá um evento então criaremos uma função de seta lá e então vamos dizer e dot impedir padrão que vai impedir o comportamento padrão de enviar o formulário e atualizar a página tudo bem, agora vamos usar o roteador, por isso precisamos importá-lo, então vamos Go aqui e vamos importar e isso é desestruturar o uso do roteador e o próximo roteador está bem e, em seguida, em nosso cabeçalho, precisamos definir nosso roteador para que possamos direi que o roteador const vai usar o roteador igual usando este podemos mudar nosso caminho, então diremos roteador ponto push e isso aceita um objeto então diremos nome do caminho e isso será igual a barra do Atlas Search e então usaremos nosso termo do Atlas Search e depois disso queremos redefinir nosso termo do Atlas Search, então vamos definir o termo do Atlas Search e vamos definir isso de volta para uma string vazia, então agora precisamos criar esse caminho, barra do Atlas Search e então nosso termo do Atlas Search bem, então vamos criar isso abaixo das páginas, criaremos um novo arquivo e criaremos a estrutura de pastas de uma só vez, então será Atlas Search uma barra e depois, entre colchetes, diremos termo ponto JavaScript tudo bem então termo que vai para ser nosso slug que será o termo do Atlas Search que foi passado para ele, então para isso podemos usar muitas das mesmas coisas do nosso índice de produtos. Go para o índice de produtos e vamos apenas copiar isso e, em seguida, abaixo do termo, colar isso e depois, em produtos e ID , precisamos de algumas coisas fora aqui, então precisaremos da nossa consulta e do nosso roteador, então vamos usar o roteador precisaremos da consulta do nosso roteador e, em vez de todos os produtos, esses serão os nossos produtos pesquisados, então vamos mudar essa função para os produtos do Atlas Search e em vez de todos os produtos, vamos apenas renomeá-lo para Atlas Search também e, em seguida, precisamos passar para essa nossa query, que será termo de ponto de query, tudo bem e, em seguida, todo o resto será o mesmo, vamos apenas mudar isso de todos os produtos para Digamos que os produtos foram encontrados bem, então vamos iniciar nosso servidor então diremos npm execute dev e isso abre no localhost vamos abrir isso tudo bem então quando entrarmos na Atlas Search Go procurar pelo hat e lá Go nós temos nosso npm se tivermos um aviso do Java que ele não é atualizado, então o que precisamos fazer é verificar se temos um termo de query e, se tivermos um termo de query, executaremos esse código e também precisa, em nosso efeito de uso, observar nossa query para que toda vez que nossa query y mudanças, ele vai executar isso de novo, então vamos salvar isso e Go dar uma olhada então agora, se eu procurar no Atlas hat, ele deve atualizar lá nós Go e eu podemos procurar MongoDB e há isso, mas agora observe se eu Pesquisa Atlas para sem o banco de dados, você verá que não obtemos zero produtos devolvidos também digamos que se eu fizer a Pesquisa Atlas por Java , pegaremos a Java , mas e se eu digitar incorretamente e eu a Pesquisa Atlas por jiva não vai obter nenhum produto encontrado para que possamos corrigir esses problemas ativando a pesquisa difusa então, de volta às nossas funções de domínio, acessaremos nossos produtos Atlas Search então agora, aqui após o caminho, adicionaremos outro parâmetro, diremos difusa e que Go aceitar um objeto e podemos apenas passar um objeto vazio para aceitar todos os padrões vamos fazer isso, salvaremos o rascunho e revisaremos o rascunho e distribuir e, em seguida, implantar isso deve levar apenas um segundo e, em seguida, vamos fazer outra tentativa, tudo bem, então não há nada de que precisemos para alterar o código, Go apenas voltar aqui e ainda temos Java Java JavaScript enquanto digito algo, gostaria de algumas sugestões enquanto digito, então a primeira coisa que precisaremos fazer é configurar um novo índice do Atlas Search, então voltaremos e Go para o Atlas e Go Go para nossas coleções e o Atlas Search e vamos criar um novo índice desta vez vamos usar o editor JSON tudo bem, então vamos chamar isso de preenchimento automático conforme os produtos produtos de preenchimento automático tudo bem então, por padrão, nossos mapeamentos são dinâmicos, vamos mudar isso tudo bem, desta vez para nossos mapeamentos, vamos definir dynamic como false e, em seguida, em nossos campos, vamos para o Atlas Search especificamente no campo de nome, então agora, dentro do campo de nome, adicionaremos diacríticos de dobra a false max gramas para 7 min gramas para 3 tokenização ao definir o gráfico de borda e o tipo definido como preenchimento automático colocarei um link para os Docs na descrição abaixo se você quiser se informar mais sobre essas configurações, mas essas são as configurações que vamos usar para este exemplo, tudo bem também certifique-se de selecionar o banco de dados e, em seguida, selecione a coleção de produtos. Ok, depois criaremos o índice do Atlas Search enquanto esse índice é criado, Go voltar ao realm e criar nossa função sem servidor que utilizará esse índice. de volta ao nosso aplicativo de produtos, Go para as funções e vamos criar uma nova função que chamaremos de preenchimento automático do Atlas Search e, em nosso editor, colaremos isso e depois Go isso de novo, estamos vai buscar nossa coleção e essa é a nossa coleção de produtos e então vamos criar esse pipeline tudo bem esse pipeline terá vários estágios no primeiro estágio vamos para o Atlas Search então vamos usar nosso novo índice que acabamos de criar autocompl e depois vamos definir nosso preenchimento automático, então aqui nossa consulta será o argumento para passarmos o caminho é o campo que vamos procurar e esse é o nome e a ordem do token será definida como sequencial vamos limitar isso a 10 documentos e, em seguida, vamos projetar o nome para que queiramos apenas o nome que ele também vai retornar o ID por padrão e se você, por algum motivo, não quiser o ID , então você teria que definir ID de sublinhado igual a zero se você não quisesse o ID , mas nós queremos o ID , então só queremos o ID e o nome e então vamos retornar esse pipeline de agregação tudo bem, então vamos salvar rascunho, revisão e distribuição Go aqui e distribua tudo bem, então vamos Go ao front-end e utilizar este preenchimento automático bem, de volta ao nosso componente de cabeçalho, a primeira coisa que vamos fazer é importar o efeito de uso que seremos usando isso e nossa web de domínio e, em seguida, criaremos um estado ou preenchimento automático e definiremos o preenchimento automático em Inicialmente, essa será uma array vazia e, em seguida, teremos nosso efeito de uso, então vamos dizer se procurar dot link do Atlas Search, então se tivermos um termo do Atlas Search, usaremos a mesma funcionalidade que que estamos usando antes de criarmos uma conexão com o realm e depois vamos para o preenchimento automático do Atlas Search usando nosso preenchimento automático do Atlas Search e passando o termo do Atlas Search então vamos definir o preenchimento automático e, se não fizermos tiver um termo do Atlas Search, então vamos definir o preenchimento automático como uma array vazia novamente à direita e depois vamos observar os termos do Atlas Search toda vez que o termo do Atlas Search mudar, então ele vai executar isso, então isso vai nos permitir em a cada tecla para executar nossa função de preenchimento automático, tudo bem, também vamos configurar uma outra função aqui que é chamada de lidar com seleção de lidar com seleção vai aceitar um ID , definiremos o termo do Atlas Search como em branco e depois fazer um roteador. envie como fizemos antes aqui para ver a barra de produtos ID então quando n selecionamos uma das sugestões de preenchimento automático que ela nos levará diretamente para esse produto, bem aqui, Go implementar a parte de preenchimento automático do formulário então aqui, depois de nossa entrada e depois de nosso formulário, diremos preenchimento automático. comprimento é maior que zero, então se for maior que zero, vamos criar um ul e, dentro desse ul, vamos autocomplete.map para que cada item no preenchimento automático vamos retornar um li e o li vai ter a chave do ID do item e, em seguida, ao clicar é quando vamos lidar com nossa seleção e passaremos o ID de sublinhado do item bem e aqui vamos exibir o nome do item bem então vamos salvar isso e experimente tudo bem então no Java Java JavaScript Search Go digitar e estamos recebendo algumas sugestões T- e vamos fazer até 10 seleções, lembre-se de que limitamos isso a 10 certo e se eu for em frente e clicar em um deles, ele deve nos levar para a nossa página de produto, Go Go nós, bom MongoDB Atlas O Atlas Search é um recurso surpreendente exclusivo do MongoDB Atlas neste vídeo em que podemos configurar índices do Atlas Search executar pesquisas difusas configuram o preenchimento automático e vinculam tudo isso ao front-end do nosso aplicativo com muita facilidade no próximo vídeo vamos implementar algumas funções avançadas para consultar nosso banco de dados por categoria e incorporar a paginação por isso não deixe de observar o link à série A lista de reprodução está na descrição abaixo se você tiver alguma dúvida ou feedback, visite nossos fóruns da comunidade em community.MongoDB.com nossa comunidade e funcionários estão prontos para responder a suas perguntas se este vídeo foi útil, certifique-se de clicar em curte e se inscrever em [Música ] [Música] você