atlas search mongoflix
1.0.0
MongoFlix: demostración interactiva de MongoDB Atlas Search, MongoDB App Services, GraphQL y mucho más.
¡Esto es lo que construiremos!
¡También disponible en App Services como sitio estático!
Por supuesto, puede clonar el repositorio y ejecutar el proyecto localmente npm install && npm run build . Alternativamente, puede abrir el proyecto en su navegador sin necesidad de instalación en su máquina.
Abra el proyecto en vivo en StackBlitz:
Duplique el archivo .env.local.example-add-app-id-here y asígnele el nombre: .env.local . Deberá cambiar el valor <APP_ID> por el ID de su aplicación MongoDB App Services, que se creará en un paso posterior. También debe actualizar el valor NEXT_PUBLIC_REALM_BASE_URL si tiene una URL base diferente para su aplicación MongoDB App Services. Este valor dependerá de la región de implementación de su aplicación MongoDB App Services.
Para seguir la demostración, deberá crear un clúster MongoDB Atlas y cargar el conjunto de datos de muestra en su clúster. Cree una cuenta en MongoDB Atlas y siga las instrucciones. Si es la primera vez que utilizas Atlas necesitarás crear una organización y un proyecto. Después de completar la configuración de la cuenta, verá la interfaz de usuario de Atlas . Si no tiene ningún clúster, haga clic en el botón Crear una base de datos .
En el siguiente cuadro de diálogo, seleccione Compartido y haga clic en Crear . La siguiente pantalla proporcionará una interfaz para configurar el clúster.
Si elige una región que no sea Frankfurt, deberá actualizar el punto final en la aplicación en .env.local para que coincida con la región.
Aquí están las configuraciones para el clúster:
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
Después de implementar su clúster en la región de su elección, deberá cargar el conjunto de datos de muestra en su clúster. Haga clic en el menú de tres puntos en el título superior de la tarjeta del grupo. Haga clic en Cargar conjunto de datos de muestra . Haga clic en el botón Cargar conjunto de datos de muestra en la superposición para iniciar el proceso. (Debería tardar entre 5 y 10 minutos. ☕️?)
Haga clic en el nombre del clúster para abrirlo. En su clúster en Atlas, haga clic en la pestaña Buscar . Haga clic en el botón Crear índice de búsqueda para crear un índice.
sample_mflix y seleccione movies .default y pegue el siguiente JSON.
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} La creación del índice debería llevar menos de un minuto. Probemoslo para verificar que funciona. Aún en la pestaña Buscar , haga clic en el botón Consulta junto al índice recién creado. Ingrese la siguiente consulta para buscar todas las películas que contengan la time del texto en cualquier valor de texto.
{ "$search" : { "text" : " time travel " } }En la interfaz de usuario de Atlas , haga clic en la pestaña Servicios de aplicaciones en la parte superior. Si está utilizando App Services por primera vez, verá un cuadro de diálogo con instrucciones adicionales. Puede seleccionar con seguridad Crear su propia aplicación y hacer clic en Siguiente . La información debe completarse automáticamente. Asegúrese de utilizar el mismo nombre para simplificar.
En el siguiente cuadro de diálogo, configure el nombre de la aplicación App Services, conéctela al clúster recién creado y seleccione un modelo de implementación local (una sola región). Debería ser preferible utilizar la región más cercana a la región de su clúster.
Para crear la aplicación, haga clic en Crear aplicación de App Services .
Sugerencia: Ahora, con la aplicación creada, puede actualizar el archivo .env.local para incluir el valor de ID de la aplicación de su aplicación App Services.
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Acceso a datos , haga clic en Autenticación . Como puede ver, App Services proporciona muchos métodos de autenticación; usaremos Anonymous para esta demostración. Haga clic en el botón Editar y active la casilla de verificación para este método de autenticación.
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Acceso a datos , haga clic en Reglas . Las reglas le brindan muchas formas de limitar y configurar el acceso a los datos por colección y rol de usuario, hasta el nivel del documento. Para esta demostración, permitiremos que todos los usuarios read solo todos los documentos de la colección de películas. App Services proporciona plantillas para muchos escenarios y usaremos la plantilla Los usuarios solo pueden leer todos los datos .
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Acceso a datos , haga clic en Esquema . El esquema define las estructuras y tipos de datos de los documentos de cada colección de las bases de datos. Seleccione la colección de películas dentro de la base de datos sample_mflix . Haga clic en el botón generar esquema. Seleccione solo la colección de películas , deje el tamaño de muestra predeterminado y haga clic en el botón Generar esquema . Esto también generará todos los tipos y consultas necesarios para un esquema GraphQL . Que se puede utilizar inmediatamente para acceder a los datos a través del punto final GraphQL administrado por App Services.
Haga clic en el botón Revisar borrador e implementar en la parte superior de la página e implementar sus cambios.
Sugerencia: Ahora, con el esquema generado, puede actualizar el archivo .env.local para incluir la siguiente URL base desde su aplicación App Services.
Probemos cómo funciona realmente GraphQL. En la pestaña GraphQL , dentro del editor GraphQL, pegue el siguiente fragmento de código para probar el esquema generado.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}Ahora, con las reglas y el esquema correctos, podemos comenzar a crear funciones para la aplicación. Para la primera función, crearemos una función que devolverá una lista de películas que coinciden con el término de búsqueda por título. Utilizará nuestro índice dinámico creado en el paso anterior con la función de autocompletar. Esto nos permite proporcionar búsqueda difusa y de autocompletar de títulos de películas en la barra de búsqueda de la aplicación frontend.
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Compilación , haga clic en Funciones . Las funciones proporcionan una manera de ejecutar la lógica del lado del servidor en App Services integrando datos del clúster conectado. Con Aggregation Framework a tu disposición puedes crear agregaciones muy poderosas, incluso sin un controlador.
Haga clic en el botón Crear nueva función e ingrese autocompleteTitle como nombre de la función.
Ahora haga clic en la pestaña Editor de funciones .
Pegue el siguiente código en el Editor de funciones :
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 ( ) ;
} ;Haga clic en el botón Guardar borrador para guardar la función.
Queremos utilizar la función de autocompletar en nuestro esquema GraphQL. Para hacer esto necesitamos crear un solucionador personalizado. Los solucionadores personalizados nos permiten definir consultas y mutaciones personalizadas para nuestro esquema GraphQL, respaldadas por funciones creadas en App Services.
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Build , haga clic en GraphQL . Haga clic en la pestaña Resolutores personalizados y haga clic en el botón Agregar un solucionador personalizado . Para el nombre del campo GraphQL , ingrese autocompleteTitle , para el tipo principal seleccione Consulta y para el nombre de la función, seleccione la función autocompleteTitle recién creada.
El tipo de entrada define el tipo de datos que se enviará a la API GraphQL como entrada para este solucionador. El tipo de retorno define el tipo de datos que devolverá la API. Enviaremos una cadena como entrada y esperaremos una lista de objetos de película como salida.
Scalar Type , String Existing Type (List) , [Movie]Haga clic en el botón Guardar borrador para guardar el solucionador personalizado.
Haga clic en el botón Revisar borrador e implementar en la parte superior de la página e implementar sus cambios.
Ahora, con la primera configuración de funciones, tómate el tiempo para probar la aplicación, ingresa algunos títulos de películas en la barra de búsqueda y mira los resultados de autocompletar.
Ahora, con la función de autocompletar implementada, podemos crear una nueva función para aspectos destacados y puntuación. Esta función devolverá una lista de películas que coinciden con el término de búsqueda por título, géneros seleccionados y país donde se produjo una determinada película. Además, devolverá aspectos destacados y puntuaciones de búsqueda de los resultados. Los aspectos destacados contienen la subcadena exacta dentro del título y las cadenas de trama, que contienen el término de búsqueda coincidente. Esto nos permitirá resaltar los términos de búsqueda encontrados dentro de la interfaz de usuario.
De manera similar a la función anterior, crearemos una nueva función para momentos destacados y puntuación.
En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Compilación , haga clic en Funciones . Haga clic en el botón Crear nueva función e ingrese filteredMovies como nombre de la función.
Ahora haga clic en la pestaña Editor de funciones .
Pegue el siguiente código en el Editor de funciones :
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 ( ) ;
} ; En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Build , haga clic en GraphQL . Haga clic en la pestaña Resolutores personalizados y haga clic en el botón Agregar un solucionador personalizado . Para el nombre del campo GraphQL , ingrese filteredMovies , para el tipo principal seleccione Consulta y para el nombre de la función, seleccione la función filteredMovies recién creada.
Enviaremos una cadena como entrada y esperaremos una lista de objetos de película personalizados, que contengan las partituras y los aspectos más destacados de cada película como salida.
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 "
}Haga clic en el botón Guardar borrador para guardar el solucionador personalizado.
Haga clic en el botón Revisar borrador e implementar en la parte superior de la página e implementar sus cambios.
Ahora, con la configuración de la función destacada, tómese el tiempo para probar la aplicación, ingrese algunos títulos de películas en la barra de búsqueda, desplácese por la lista de resultados y verifique que el término de búsqueda con coincidencias aproximadas esté resaltado dentro del título de la película y la trama corta cuando haya una coincidencia. .
Las facetas abren muchos casos de uso potentes para agrupar los resultados de búsqueda. La siguiente característica muestra cómo ejecutar una consulta de Atlas Search para obtener resultados agrupados por valores para los géneros de cada película en la colección de películas , incluido el recuento de cada uno de esos grupos.
En su clúster en Atlas , en la pestaña Buscar , cree un nuevo índice con el nombre facets y el siguiente JSON para la colección de películas .
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
} Ahora, con el índice creado, en la interfaz de usuario de Atlas , haga clic en la pestaña Servicios de aplicaciones . Haga clic en Aplicación-0 en la interfaz de usuario. En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Compilación , haga clic en Funciones . Haga clic en el botón Crear nueva función e ingrese facetsGenres como nombre de la función.
Ahora haga clic en la pestaña Editor de funciones .
Pegue el siguiente código en el Editor de funciones :
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 ( ) ;
} ; En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Build , haga clic en GraphQL . Haga clic en la pestaña Resolutores personalizados y haga clic en el botón Agregar un solucionador personalizado . Para el nombre del campo GraphQL , ingrese facetsGenres , para el tipo principal seleccione Consulta y para el nombre de la función, seleccione la función facetsGenres recién creada.
No enviaremos información a esta consulta y esperaremos una lista de objetos personalizados que representen las facetas de cada género, que contengan la cantidad de películas 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 "
}
}
}
}
}
}
}
}
}
}
}Haga clic en el botón Guardar borrador para guardar el solucionador personalizado.
Haga clic en el botón Revisar borrador e implementar en la parte superior de la página e implementar sus cambios.
Ahora, con la configuración de facetas, pruebe la aplicación y abra el menú desplegable de Géneros . Observe que ahora hay un número además de cada género que representa el número total de películas de ese género.
MongoDB App Services Hosting le permite alojar, administrar y servir los archivos de documentos y medios estáticos de su aplicación. Puede utilizar Hosting para almacenar contenidos individuales o para cargar y servir toda su aplicación cliente.
Nuestra aplicación frontend contiene todas las llamadas necesarias a la API GraphQL en App Services. Podemos exportar toda la aplicación frontend como un sitio estático y alojarla en MongoDB App Services.
Para esto necesitas ejecutar el siguiente código en la carpeta raíz del proyecto. Asegúrese de tener instaladas las dependencias.
npm instally luego cree y exporte el sitio con un script npm usando nextjs.
npm run build && npm run export Esto creará una carpeta out en la carpeta raíz del proyecto.
En la interfaz de usuario de MongoDB Atlas en la pestaña Servicios de aplicaciones . En la barra lateral izquierda de la interfaz de usuario de Atlas, dentro de Administrar , haga clic en Alojamiento . Haga clic en el botón Habilitar alojamiento . Arrastre y suelte el contenido de la carpeta out la pestaña Alojamiento para cargar todos los archivos.
Haga clic en el botón Revisar borrador e implementar en la parte superior de la página e implementar sus cambios.
Haga clic ahora en la pestaña Configuración , copie el dominio de servicios de aplicaciones , péguelo en el navegador de su elección y presione Intro para ver el sitio. ?
