atlas search mongoflix
1.0.0
MongoFlix - démo interactive pour MongoDB Atlas Search, MongoDB App Services, GraphQL et bien plus encore.
C'est ce que nous allons construire !
Également disponible sur App Services en tant que site statique !
Vous pouvez bien sûr cloner le dépôt et exécuter le projet localement npm install && npm run build . Alternativement, vous pouvez ouvrir le projet dans votre navigateur sans aucune installation requise sur votre ordinateur.
Ouvrez le projet en direct sur StackBlitz :
Dupliquez le fichier .env.local.example-add-app-id-here et nommez-le : .env.local . Vous devrez remplacer la valeur <APP_ID> par l'identifiant de votre application MongoDB App Services, qui sera créée ultérieurement. Vous devez également mettre à jour la valeur NEXT_PUBLIC_REALM_BASE_URL si vous disposez d'une URL de base différente pour votre application MongoDB App Services. Cette valeur dépendra de la région de déploiement de votre application MongoDB App Services.
Pour suivre la démo, vous devrez créer un cluster MongoDB Atlas et charger l'exemple d'ensemble de données dans votre cluster. Veuillez créer un compte sur MongoDB Atlas et suivez les instructions. Si c'est la première fois que vous utilisez Atlas, vous devrez créer une organisation et un projet. Après avoir terminé la configuration du compte, vous verrez l' interface utilisateur d'Atlas . Si vous n'avez aucun cluster, cliquez sur le bouton Créer une base de données .
Dans la boîte de dialogue suivante, sélectionnez Partagé et cliquez sur Créer . L'écran suivant fournira une interface pour configurer le cluster.
Si vous choisissez une région autre que Francfort, vous devrez mettre à jour le point de terminaison dans l'application dans .env.local pour qu'il corresponde à la région.
Voici les paramètres du cluster :
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
Une fois votre cluster déployé dans la région de votre choix, vous devrez charger l'exemple d'ensemble de données dans votre cluster. Cliquez sur le menu à trois points dans le titre supérieur de la carte du cluster. Cliquez sur Charger un exemple de jeu de données . Cliquez sur le bouton Charger un exemple de jeu de données dans la superposition pour démarrer le processus. (Cela devrait prendre environ 5 à 10 minutes. ☕️ ?)
Cliquez sur le nom du cluster pour l'ouvrir. Dans votre cluster sur Atlas, cliquez sur l'onglet Rechercher . Cliquez sur le bouton Créer un index de recherche pour créer un index.
sample_mflix et sélectionnez movies .default et collez le JSON suivant.
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} La création de l'index devrait prendre moins d'une minute. Testons-le, pour vérifier qu'il fonctionne. Toujours dans l'onglet Recherche , cliquez sur le bouton Requête à côté de l'index nouvellement créé. Entrez la requête suivante pour rechercher tous les films contenant l' time du texte dans n'importe quelle valeur de texte.
{ "$search" : { "text" : " time travel " } }Dans l'interface utilisateur d'Atlas , cliquez sur l'onglet App Services en haut. Si vous utilisez App Services pour la première fois, vous verrez une boîte de dialogue avec des instructions supplémentaires. Vous pouvez sélectionner en toute sécurité Créer votre propre application et cliquer sur Suivant . Les informations doivent être renseignées automatiquement. Assurez-vous d'utiliser le même nom pour plus de simplicité.
Dans la boîte de dialogue suivante, configurez le nom de l'application App Services, connectez-la à votre cluster nouvellement créé et sélectionnez un modèle de déploiement local (une seule région). Il devrait être préférable d'utiliser la région la plus proche de votre région de cluster.
Pour créer l'application, cliquez sur Créer une application App Services .
Astuce : Maintenant, avec l'application créée, vous pouvez mettre à jour le fichier .env.local pour inclure la valeur App ID de votre application App Services.
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Accès aux données , cliquez sur Authentification . Comme vous le voyez, App Services propose de nombreuses méthodes d'authentification, nous utiliserons Anonyme pour cette démo. Cliquez sur le bouton Modifier et cochez la case sur ON pour cette méthode d'authentification.
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Accès aux données , cliquez sur Règles . Les règles vous offrent de nombreuses façons de limiter et de configurer l'accès aux données par collection et par rôle d'utilisateur, jusqu'au niveau du document. Pour cette démo, nous autoriserons tous les utilisateurs à read uniquement tous les documents de la collection de films. App Services fournit des modèles pour de nombreux scénarios et nous utiliserons le modèle Les utilisateurs ne peuvent lire que toutes les données .
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Data Access , cliquez sur Schéma . Le schéma définit les structures et les types de données pour les documents de chaque collection des bases de données. Sélectionnez la collection de films dans la base de données sample_mflix . Cliquez sur le bouton Générer un schéma. Sélectionnez uniquement la collection de films , laissez la taille d'échantillonnage par défaut et cliquez sur le bouton Générer un schéma . Cela générera également tous les types et requêtes nécessaires pour un schéma GraphQL . Qui peut être utilisé immédiatement pour accéder aux données via le point de terminaison GraphQL géré par App Services.
Cliquez sur le bouton Vérifier le brouillon et déployer en haut de la page et déployer vos modifications.
Astuce : Maintenant, avec le schéma généré, vous pouvez mettre à jour le fichier .env.local pour inclure l'URL de base suivante à partir de votre application App Services.
Testons comment fonctionne réellement GraphQL. Dans l'onglet GraphQL , dans l'éditeur GraphQL, collez l'extrait de code suivant pour tester le schéma généré.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}Maintenant que les règles et le schéma corrects sont en place, nous pouvons commencer à créer des fonctions pour l'application. Pour la première fonctionnalité, nous allons créer une fonction qui renverra une liste de films correspondant au terme de recherche par titre. Il utilisera notre index dynamique créé à l'étape précédente avec la fonctionnalité de saisie semi-automatique. Cela nous permet de fournir une recherche automatique et floue des titres de film dans la barre de recherche de l'application frontale.
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur Functions . Les fonctions fournissent un moyen d’exécuter une logique côté serveur sur App Services en intégrant les données du cluster connecté. Avec le Aggregation Framework à votre disposition, vous pouvez créer des agrégations très puissantes, même sans pilote.
Cliquez sur le bouton Créer une nouvelle fonction et entrez autocompleteTitle comme nom de la fonction.
Cliquez maintenant sur l'onglet Editeur de fonctions .
Collez le code suivant dans l' éditeur de fonctions :
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 ( ) ;
} ;Cliquez sur le bouton Enregistrer le brouillon pour enregistrer la fonction.
Nous souhaitons utiliser la fonction de saisie semi-automatique dans notre schéma GraphQL. Pour ce faire, nous devons créer un résolveur personnalisé. Les résolveurs personnalisés nous permettent de définir des requêtes et des mutations personnalisées pour notre schéma GraphQL, soutenues par des fonctions créées sur App Services.
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur GraphQL . Cliquez sur l'onglet Résolveurs personnalisés , puis sur le bouton Ajouter un résolveur personnalisé . Pour le nom du champ GraphQL, entrez autocompleteTitle , pour le type de parent, sélectionnez Query et pour le nom de la fonction, sélectionnez la fonction autocompleteTitle nouvellement créée.
Le type d'entrée définit le type de données de ce qui sera envoyé à l'API GraphQL en entrée pour ce résolveur. Le type de retour définit le type de données de ce qui sera renvoyé par l'API. Nous enverrons une chaîne en entrée et attendrons une liste d’objets vidéo en sortie.
Scalar Type , String Existing Type (List) , [Movie]Cliquez sur le bouton Enregistrer le brouillon pour enregistrer le résolveur personnalisé.
Cliquez sur le bouton Vérifier le brouillon et déployer en haut de la page et déployer vos modifications.
Maintenant, avec la première configuration des fonctionnalités, prenez le temps de tester l'application, entrez quelques titres de films dans la barre de recherche et voyez les résultats de la saisie semi-automatique.
Désormais, avec la fonction de saisie semi-automatique en place, nous pouvons créer une nouvelle fonction pour les surlignages et la notation. Cette fonction renverra une liste de films correspondant au terme de recherche par titre, les genres sélectionnés et le pays où un certain film a été produit. De plus, il renverra les faits saillants et les scores de recherche pour les résultats. Les surlignages contiennent la sous-chaîne exacte dans le titre et les chaînes de tracé, contenant le terme de recherche correspondant. Cela nous permettra de mettre en évidence les termes de recherche trouvés dans l'interface utilisateur frontale.
Semblable à la fonction précédente, nous allons créer une nouvelle fonction pour les surbrillance et la notation.
Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur Functions . Cliquez sur le bouton Créer une nouvelle fonction et entrez filteredMovies comme nom de la fonction.
Cliquez maintenant sur l'onglet Editeur de fonctions .
Collez le code suivant dans l' éditeur de fonctions :
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 ( ) ;
} ; Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur GraphQL . Cliquez sur l'onglet Résolveurs personnalisés , puis sur le bouton Ajouter un résolveur personnalisé . Pour le nom du champ GraphQL, entrez filteredMovies , pour le type de parent, sélectionnez Query et pour le nom de la fonction, sélectionnez la fonction nouvellement créée filteredMovies .
Nous enverrons une chaîne en entrée et attendrons une liste d'objets de film personnalisés, contenant les partitions et les moments forts de chaque film en sortie.
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 "
}Cliquez sur le bouton Enregistrer le brouillon pour enregistrer le résolveur personnalisé.
Cliquez sur le bouton Vérifier le brouillon et déployer en haut de la page et déployer vos modifications.
Maintenant, avec la configuration de la fonctionnalité de faits saillants, prenez le temps de tester l'application, entrez certains titres de films dans la barre de recherche, faites défiler la liste des résultats et vérifiez que le terme de recherche à correspondance floue est mis en surbrillance dans le titre du film et dans l'intrigue courte lorsqu'il y a une correspondance. .
Les facettes ouvrent de nombreux cas d'utilisation puissants pour regrouper vos résultats de recherche. La fonctionnalité suivante montre comment exécuter une requête Atlas Search pour obtenir des résultats regroupés par valeurs pour les genres de chaque film de la collection de films , y compris le nombre de chacun de ces groupes.
Dans votre cluster sur Atlas dans l'onglet Recherche , créez un nouvel index avec le nom facets et le JSON suivant pour la collection de films .
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
} Maintenant que l'index est créé, dans l'interface utilisateur d'Atlas, cliquez sur l'onglet App Services . Cliquez sur Application-0 dans l'interface utilisateur. Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur Functions . Cliquez sur le bouton Créer une nouvelle fonction et entrez facetsGenres comme nom de la fonction.
Cliquez maintenant sur l'onglet Editeur de fonctions .
Collez le code suivant dans l' éditeur de fonctions :
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 ( ) ;
} ; Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Build , cliquez sur GraphQL . Cliquez sur l'onglet Résolveurs personnalisés , puis sur le bouton Ajouter un résolveur personnalisé . Pour le nom du champ GraphQL, entrez facetsGenres , pour le type de parent, sélectionnez Query et pour le nom de la fonction, sélectionnez la fonction facetsGenres nouvellement créée.
Nous n'enverrons pas d'entrée à cette requête et attendons une liste d'objets personnalisés représentant les facettes de chaque genre, contenant le nombre de films pour chaque genre.
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 "
}
}
}
}
}
}
}
}
}
}
}Cliquez sur le bouton Enregistrer le brouillon pour enregistrer le résolveur personnalisé.
Cliquez sur le bouton Vérifier le brouillon et déployer en haut de la page et déployer vos modifications.
Maintenant, avec la configuration des facettes, testez l'application et ouvrez la liste déroulante pour Genres . Notez qu'il y a maintenant un nombre à côté de chaque genre représentant le nombre total de films pour ce genre.
L'hébergement MongoDB App Services vous permet d'héberger, de gérer et de servir les fichiers multimédias et de documents statiques de votre application. Vous pouvez utiliser l'hébergement pour stocker des éléments de contenu individuels ou pour télécharger et servir l'intégralité de votre application client.
Notre application frontale contient tous les appels nécessaires à l'API GraphQL sur App Services. Nous pouvons exporter l'intégralité de l'application frontale en tant que site statique et l'héberger sur MongoDB App Services.
Pour cela, vous devez exécuter le code suivant dans le dossier racine du projet. Assurez-vous que les dépendances sont installées avec.
npm installpuis créez et exportez le site avec un script npm à l'aide de nextjs.
npm run build && npm run export Cela créera un dossier out dans le dossier racine du projet.
Sur l'interface utilisateur de MongoDB Atlas, dans l'onglet App Services . Dans la barre latérale gauche de l'interface utilisateur d'Atlas, dans Gérer , cliquez sur Hébergement . Cliquez sur le bouton Activer l'hébergement . Faites glisser et déposez le contenu du dossier out l'onglet Hébergement pour télécharger tous les fichiers.
Cliquez sur le bouton Vérifier le brouillon et déployer en haut de la page et déployer vos modifications.
Cliquez maintenant sur l'onglet Paramètres , copiez le domaine App Services, collez-le dans un navigateur de votre choix et appuyez sur Entrée pour afficher le site. ?
