atlas search mongoflix
1.0.0
MongoFlix - demonstração interativa para MongoDB Atlas Search, MongoDB App Services, GraphQL e muito mais.
É isso que vamos construir!
Também disponível no App Services como um site estático!
É claro que você pode clonar o repositório e executar o projeto localmente npm install && npm run build . Alternativamente, você pode abrir o projeto em seu navegador sem qualquer instalação necessária em sua máquina.
Abra o projeto ao vivo no StackBlitz:
Duplique o arquivo .env.local.example-add-app-id-here e nomeie-o: .env.local . Você precisará alterar o valor <APP_ID> para o ID do seu aplicativo MongoDB App Services, que será criado em uma etapa posterior. Você também deve atualizar o valor NEXT_PUBLIC_REALM_BASE_URL se tiver uma URL base diferente para seu aplicativo MongoDB App Services. Este valor dependerá da região de implantação do seu aplicativo MongoDB App Services.
Para acompanhar a demonstração, você precisará criar um cluster MongoDB Atlas e carregar o conjunto de dados de amostra em seu cluster. Crie uma conta no MongoDB Atlas e siga as instruções. Se for a primeira vez que você usa o Atlas, você precisará criar uma organização e um projeto. Depois de concluir a configuração da conta, você verá a UI do Atlas . Se você não possui nenhum cluster, clique no botão Construir um banco de dados .
Na caixa de diálogo a seguir, selecione Compartilhado e clique em Criar . A tela a seguir fornecerá uma interface para configurar o cluster.
Se você escolher uma região diferente de Frankfurt, precisará atualizar o endpoint no aplicativo em .env.local para corresponder à região.
Aqui estão as configurações do cluster:
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
Depois que seu cluster for implantado na região de sua escolha, você precisará carregar o conjunto de dados de amostra em seu cluster. Clique no menu de três pontos no título superior do cartão do grupo. Clique em Carregar conjunto de dados de amostra . Clique no botão Carregar conjunto de dados de amostra na sobreposição para iniciar o processo. (Deve levar cerca de 5 a 10 minutos. ☕️?)
Clique no nome do cluster para abri-lo. Em seu cluster no Atlas, clique na guia Pesquisar . Clique no botão Criar índice de pesquisa para criar um índice.
sample_mflix e selecione movies .default e cole o seguinte JSON.
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} A criação do índice deve demorar menos de um minuto. Vamos testá-lo para verificar se funciona. Ainda na aba Pesquisar , clique no botão Consultar ao lado do índice recém-criado. Insira a seguinte consulta para encontrar todos os filmes que contêm a time do texto em quaisquer valores de texto.
{ "$search" : { "text" : " time travel " } }Na UI do Atlas , clique na guia App Services na parte superior. Se estiver usando os Serviços de Aplicativos pela primeira vez, você verá uma caixa de diálogo com instruções adicionais. Você pode selecionar com segurança Construa seu próprio aplicativo e clique em Avançar . As informações devem ser preenchidas automaticamente. Certifique-se de usar o mesmo nome para simplificar.
Na caixa de diálogo a seguir, configure o nome do aplicativo App Services, conecte-o ao cluster recém-criado e selecione um modelo de implantação local (região única). Deve ser preferível usar a região mais próxima da região do cluster.
Para criar o aplicativo, clique em Criar aplicativo de serviços de aplicativo .
Dica: agora com o aplicativo criado você pode atualizar o arquivo .env.local para incluir o valor do App ID do seu aplicativo App Services.
Na barra lateral esquerda da UI do Atlas, em Data Access , clique em Authentication . Como você pode ver, o App Services fornece muitos métodos de autenticação, usaremos o Anonymous para esta demonstração. Clique no botão Editar e marque a caixa de seleção ATIVADA para este método de autenticação.
Na barra lateral esquerda da UI do Atlas, em Data Access , clique em Rules . As regras fornecem muitas maneiras de limitar e configurar o acesso aos dados por coleção e função de usuário, até o nível do documento. Para esta demonstração permitiremos que todos os usuários read apenas todos os documentos da coleção de filmes. Os Serviços de Aplicativos fornecem modelos para muitos cenários e usaremos o modelo Os usuários só podem ler todos os dados .
Na barra lateral esquerda da UI do Atlas, em Data Access , clique em Schema . O esquema define as estruturas e tipos de dados dos documentos em cada coleção dos bancos de dados. Selecione a coleção de filmes no banco de dados sample_mflix . Clique no botão gerar esquema. Selecione apenas a coleção de filmes , deixe o tamanho da amostra como padrão e clique no botão Gerar Esquema . Isso também gerará todos os tipos e consultas necessárias para um esquema GraphQL . Que pode ser usado imediatamente para acessar os dados por meio do endpoint GraphQL gerenciado pelos Serviços de Aplicativo.
Clique no botão Revisar rascunho e implantar na parte superior da página e implantar suas alterações.
Dica: agora, com o esquema gerado, você pode atualizar o arquivo .env.local para incluir a seguinte URL base do seu aplicativo App Services.
Vamos testar como o GraphQL realmente funciona. Na guia GraphQL , dentro do editor GraphQL, cole o seguinte trecho de código para testar o esquema gerado.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}Agora, com as regras e o esquema corretos, podemos começar a criar funções para o aplicativo. Para o primeiro recurso criaremos uma função que retornará uma lista de filmes que correspondem ao termo pesquisado pelo título. Ele usará nosso índice dinâmico criado na etapa anterior com a funcionalidade de preenchimento automático. Isso nos permite fornecer preenchimento automático e pesquisa difusa para inclinações de filmes na barra de pesquisa do aplicativo frontend.
Na barra lateral esquerda da UI do Atlas, em Build , clique em Functions . As funções fornecem uma maneira de executar a lógica do servidor nos Serviços de Aplicativos integrando dados do cluster conectado. Com o Aggregation Framework à sua disposição você pode criar agregações muito poderosas, mesmo sem driver.
Clique no botão Criar nova função e insira autocompleteTitle como o nome da função.
Agora clique na guia Editor de Função .
Cole o seguinte código no Editor de Funções :
exports = async ( title ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
return await collection
. aggregate ( [
{
$search : {
autocomplete : {
path : "title" ,
query : title ,
fuzzy : { maxEdits : 1 } ,
} ,
} ,
} ,
{
$project : {
title : 1 ,
} ,
} ,
{
$limit : 10 ,
} ,
] )
. toArray ( ) ;
} ;Clique no botão Salvar rascunho para salvar a função.
Queremos usar a função de preenchimento automático em nosso esquema GraphQL. Para fazer isso, precisamos criar um resolvedor personalizado. Os resolvedores personalizados nos permitem definir consultas e mutações personalizadas para nosso esquema GraphQL, apoiados por funções criadas em serviços de aplicativos.
Na barra lateral esquerda da UI do Atlas, em Build , clique em GraphQL . Clique na guia Resolvedores personalizados e clique no botão Adicionar um resolvedor personalizado . Para o nome do campo GraphQL, insira autocompleteTitle , para o tipo pai selecione Query e para o nome da função selecione a função recém-criada autocompleteTitle .
O tipo de entrada define o tipo de dados que será enviado para a API GraphQL como entrada para este resolvedor. O tipo de retorno define o tipo de dados que será retornado pela API. Enviaremos uma string como entrada e esperaremos uma lista de objetos de filme como saída.
Scalar Type , String Existing Type (List) , [Movie]Clique no botão Salvar rascunho para salvar o resolvedor personalizado.
Clique no botão Revisar rascunho e implantar na parte superior da página e implantar suas alterações.
Agora, com a configuração do primeiro recurso, reserve um tempo para testar o aplicativo, insira alguns títulos de filmes na barra de pesquisa e veja os resultados do preenchimento automático.
Agora, com a função de preenchimento automático implementada, podemos criar uma nova função para destaques e pontuação. Esta função retornará uma lista de filmes que correspondem ao termo pesquisado pelo título, pelos gêneros selecionados e pelo país onde determinado filme foi produzido. Além disso, retornará destaques e pontuações de pesquisa para os resultados. Os destaques contêm a substring exata dentro do título e as strings do gráfico, contendo o termo de pesquisa correspondente. Isso nos permitirá destacar os termos de pesquisa encontrados na interface do usuário.
Semelhante à função anterior, criaremos uma nova função para destaques e pontuação.
Na barra lateral esquerda da UI do Atlas, em Build , clique em Functions . Clique no botão Criar nova função e insira filteredMovies como o nome da função.
Agora clique na guia Editor de Função .
Cole o seguinte código no Editor de Funções :
exports = async ( input ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
const { term , genres , countries } = input ;
const searchShould = [ ] ;
const searchMust = [ ] ;
if ( term . length > 0 ) {
const termStage = {
autocomplete : {
path : "title" ,
query : term ,
fuzzy : { maxEdits : 1.0 } ,
score : {
boost : {
path : "imdb.rating" ,
undefined : 1 ,
} ,
} ,
} ,
} ;
searchMust . push ( termStage ) ;
const plotStage = {
text : {
query : term ,
path : "plot" ,
} ,
} ;
searchShould . push ( plotStage ) ;
}
if ( genres . length > 0 ) {
const genresStage = {
text : {
query : genres ,
path : "genres" ,
} ,
} ;
searchMust . push ( genresStage ) ;
}
if ( countries . length > 0 ) {
const countryStage = {
text : {
query : countries ,
path : "countries" ,
} ,
} ;
searchMust . push ( countryStage ) ;
}
const searchQuery = [
{
$search : {
compound : {
should : searchShould ,
must : searchMust ,
} ,
highlight : { path : [ "title" , "genres" , "countries" , "plot" ] } ,
} ,
} ,
{
$project : {
_id : 1 ,
title : 1 ,
poster : 1 ,
cast : 1 ,
directors : 1 ,
plot : 1 ,
fullplot : 1 ,
year : 1 ,
genres : 1 ,
countries : 1 ,
imdb : 1 ,
score : { $meta : "searchScore" } ,
highlights : { $meta : "searchHighlights" } ,
} ,
} ,
{ $limit : 20 } ,
] ;
return await collection . aggregate ( searchQuery ) . toArray ( ) ;
} ; Na barra lateral esquerda da UI do Atlas, em Build , clique em GraphQL . Clique na guia Resolvedores personalizados e clique no botão Adicionar um resolvedor personalizado . Para o nome do campo GraphQL , insira filteredMovies , para o tipo pai selecione Query e para o nome da função selecione a função recém-criada filteredMovies .
Enviaremos uma string como entrada e esperaremos uma lista de objetos de filme personalizados, contendo as pontuações e destaques de cada filme como saída.
Custom Type {
"type" : " object " ,
"title" : " FilteredMoviesInput " ,
"properties" : {
"term" : {
"bsonType" : " string "
},
"genres" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"countries" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
}
}
}Custom Type {
"items" : {
"bsonType" : " object " ,
"properties" : {
"_id" : {
"bsonType" : " objectId "
},
"cast" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"countries" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"directors" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"fullplot" : {
"bsonType" : " string "
},
"genres" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"highlights" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"path" : {
"bsonType" : " string "
},
"score" : {
"bsonType" : " double "
},
"texts" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"type" : {
"bsonType" : " string "
},
"value" : {
"bsonType" : " string "
}
}
}
}
}
}
},
"imdb" : {
"bsonType" : " object " ,
"properties" : {
"id" : {
"bsonType" : " int "
},
"rating" : {
"bsonType" : " double "
},
"votes" : {
"bsonType" : " int "
}
}
},
"plot" : {
"bsonType" : " string "
},
"poster" : {
"bsonType" : " string "
},
"score" : {
"bsonType" : " double "
},
"title" : {
"bsonType" : " string "
},
"year" : {
"bsonType" : " int "
}
}
},
"title" : " FilteredMovies " ,
"type" : " array "
}Clique no botão Salvar rascunho para salvar o resolvedor personalizado.
Clique no botão Revisar rascunho e implantar na parte superior da página e implantar suas alterações.
Agora, com a configuração do recurso de destaques, reserve um tempo para testar o aplicativo, insira alguns títulos de filmes na barra de pesquisa, role na lista de resultados e verifique se o termo de pesquisa com correspondência difusa está destacado no título do filme e no enredo curto quando há uma correspondência .
As facetas abrem muitos casos de uso poderosos para agrupar seus resultados de pesquisa. O recurso a seguir mostra como executar uma consulta do Atlas Search para obter resultados agrupados por valores para gêneros de cada filme na coleção de filmes , incluindo a contagem de cada um desses grupos.
Em seu cluster no Atlas , na guia Pesquisar , crie um novo índice com o nome facets e o seguinte JSON para a coleção de filmes .
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
} Agora com o índice criado, na UI do Atlas clique na guia App Services . Clique em Aplicativo-0 na IU. Na barra lateral esquerda da UI do Atlas, em Build , clique em Functions . Clique no botão Criar nova função e insira facetsGenres como o nome da função.
Agora clique na guia Editor de Função .
Cole o seguinte código no Editor de Funções :
exports = async ( arg ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
return await collection
. aggregate ( [
{
$searchMeta : {
index : "facets" ,
facet : {
operator : {
range : {
path : "year" ,
gte : 1900 ,
} ,
} ,
facets : {
genresFacet : {
type : "string" ,
path : "genres" ,
} ,
} ,
} ,
} ,
} ,
] )
. toArray ( ) ;
} ; Na barra lateral esquerda da UI do Atlas, em Build , clique em GraphQL . Clique na guia Resolvedores personalizados e clique no botão Adicionar um resolvedor personalizado . Para o nome do campo GraphQL, insira facetsGenres , para o tipo pai selecione Query e para o nome da função selecione a função recém-criada facetsGenres .
Não enviaremos dados para esta consulta e esperamos uma lista de objetos personalizados representando as facetas de cada gênero, contendo o número de filmes de cada gênero.
None Custom Type {
"title" : " GenresMeta " ,
"type" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"count" : {
"bsonType" : " double "
},
"facet" : {
"bsonType" : " object " ,
"properties" : {
"genresFacet" : {
"bsonType" : " object " ,
"properties" : {
"buckets" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"_id" : {
"bsonType" : " string "
},
"count" : {
"bsonType" : " double "
}
}
}
}
}
}
}
}
}
}
}Clique no botão Salvar rascunho para salvar o resolvedor personalizado.
Clique no botão Revisar rascunho e implantar na parte superior da página e implantar suas alterações.
Agora, com a configuração das facetas, teste o aplicativo e abra o menu suspenso para Genres . Observe que agora existe um número ao lado de cada gênero que representa o número total de filmes desse gênero.
O MongoDB App Services Hosting permite hospedar, gerenciar e servir a mídia estática e os arquivos de documentos do seu aplicativo. Você pode usar o Hosting para armazenar conteúdos individuais ou para fazer upload e servir todo o seu aplicativo cliente.
Nosso aplicativo front-end contém todas as chamadas necessárias para a API GraphQL nos App Services. Podemos exportar todo o aplicativo front-end como um site estático e hospedá-lo no MongoDB App Services.
Para isso você precisa executar o seguinte código na pasta raiz do projeto. Certifique-se de ter as dependências instaladas.
npm installe, em seguida, crie e exporte o site com um script npm usando nextjs.
npm run build && npm run export Isso criará uma pasta out na pasta raiz do projeto.
Na UI do MongoDB Atlas na guia App Services . Na barra lateral esquerda da UI do Atlas, em Gerenciar , clique em Hospedagem . Clique no botão Habilitar hospedagem . Arraste e solte o conteúdo da pasta out guia Hospedagem para fazer upload de todos os arquivos.
Clique no botão Revisar rascunho e implantar na parte superior da página e implantar suas alterações.
Clique agora na guia Configurações , copie o domínio de serviços de aplicativos , cole-o em um navegador de sua preferência e pressione Enter para visualizar o site. ?
