atlas search mongoflix
1.0.0
MongoFlix – interaktive Demo für MongoDB Atlas Search, MongoDB App Services, GraphQL und vieles mehr.
Das werden wir bauen!
Auch bei App Services als statische Website verfügbar!
Sie können das Repo natürlich klonen und das Projekt lokal ausführen npm install && npm run build . Alternativ können Sie das Projekt in Ihrem Browser öffnen, ohne dass eine Installation auf Ihrem Computer erforderlich ist.
Öffnen Sie das Projekt live auf StackBlitz:
Duplizieren Sie die Datei .env.local.example-add-app-id-here und benennen Sie sie: .env.local . Sie müssen den Wert <APP_ID> in die App-ID Ihrer MongoDB App Services-App ändern, die in einem späteren Schritt erstellt wird. Sie müssen auch den Wert NEXT_PUBLIC_REALM_BASE_URL aktualisieren, wenn Sie eine andere Basis-URL für Ihre MongoDB App Services-App haben. Dieser Wert hängt von der Bereitstellungsregion Ihrer MongoDB App Services-App ab.
Um der Demo folgen zu können, müssen Sie einen MongoDB Atlas-Cluster erstellen und den Beispieldatensatz in Ihren Cluster laden. Bitte erstellen Sie ein Konto bei MongoDB Atlas und folgen Sie den Anweisungen. Wenn Sie Atlas zum ersten Mal verwenden, müssen Sie eine Organisation und ein Projekt erstellen. Nachdem Sie die Kontoeinrichtung abgeschlossen haben, wird die Atlas-Benutzeroberfläche angezeigt. Wenn Sie keinen Cluster haben, klicken Sie auf die Schaltfläche „Datenbank erstellen“ .
Wählen Sie im folgenden Dialog „Freigegeben“ aus und klicken Sie auf „Erstellen“ . Der folgende Bildschirm bietet eine Schnittstelle zum Konfigurieren des Clusters.
Wenn Sie eine andere Region als Frankfurt auswählen, müssen Sie den Endpunkt in der App in .env.local aktualisieren, damit er mit der Region übereinstimmt.
Hier sind die Einstellungen für den Cluster:
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
Nachdem Ihr Cluster in der Region Ihrer Wahl bereitgestellt wurde, müssen Sie den Beispieldatensatz in Ihren Cluster laden. Klicken Sie auf das Drei-Punkte-Menü in der oberen Überschrift der Clusterkarte. Klicken Sie auf Beispieldatensatz laden . Klicken Sie im Overlay auf die Schaltfläche „Beispieldatensatz laden“ , um den Vorgang zu starten. (Es sollte etwa 5-10 Minuten dauern. ☕️ ?)
Klicken Sie auf den Clusternamen, um ihn zu öffnen. Klicken Sie in Ihrem Cluster auf Atlas auf die Registerkarte „Suchen “. Klicken Sie auf die Schaltfläche „Suchindex erstellen“, um einen Index zu erstellen.
sample_mflix und dann movies aus.default und fügen Sie den folgenden JSON-Code ein.
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} Die Indexerstellung sollte weniger als eine Minute dauern. Testen wir es, um sicherzustellen, dass es funktioniert. Klicken Sie immer noch auf der Registerkarte „Suchen “ auf die Schaltfläche „Abfrage“ neben dem neu erstellten Index. Geben Sie die folgende Abfrage ein, um alle Filme zu finden, die die time in beliebigen Textwerten enthalten.
{ "$search" : { "text" : " time travel " } }Klicken Sie in der Atlas -Benutzeroberfläche oben auf die Registerkarte App Services . Wenn Sie App Services zum ersten Mal verwenden, wird ein Dialogfeld mit zusätzlichen Anweisungen angezeigt. Sie können getrost Ihre eigene App erstellen auswählen und auf Weiter klicken. Die Informationen sollten automatisch ausgefüllt werden. Achten Sie darauf, der Einfachheit halber denselben Namen zu verwenden.
Richten Sie im folgenden Dialogfeld den Namen der App Services-App ein, verbinden Sie sie mit Ihrem neu erstellten Cluster und wählen Sie ein lokales Bereitstellungsmodell (einzelne Region) aus. Es sollte vorzuziehen sein, die Region zu verwenden, die Ihrer Clusterregion am nächsten liegt.
Um die App zu erstellen, klicken Sie auf „App Services-Anwendung erstellen“ .
Hinweis: Nachdem die App erstellt wurde, können Sie die Datei .env.local so aktualisieren, dass sie den App-ID- Wert Ihrer App Services-App enthält.
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter Datenzugriff auf Authentifizierung . Wie Sie sehen, bietet App Services viele Authentifizierungsmethoden. Für diese Demo verwenden wir Anonymous . Klicken Sie auf die Schaltfläche Bearbeiten und setzen Sie das Kontrollkästchen für diese Authentifizierungsmethode auf EIN .
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Datenzugriff“ auf „Regeln“ . Regeln bieten Ihnen viele Möglichkeiten, den Datenzugriff pro Sammlung und Benutzerrolle bis tief in die Dokumentebene einzuschränken und zu konfigurieren. Für diese Demo erlauben wir allen Benutzern, nur alle Dokumente in der Filmsammlung zu read . App Services stellt Vorlagen für viele Szenarien bereit und wir verwenden die Vorlage „Benutzer können nur alle Daten lesen“ .
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Datenzugriff“ auf „Schema“ . Schema definiert die Datenstrukturen und -typen für Dokumente in jeder Sammlung in den Datenbanken. Wählen Sie die Filmsammlung in der Datenbank „sample_mflix“ aus. Klicken Sie auf die Schaltfläche „Schema generieren“. Wählen Sie nur die Filmsammlung aus, belassen Sie die Sampling-Größe als Standard und klicken Sie auf die Schaltfläche „Schema generieren“ . Dadurch werden auch alle erforderlichen Typen und Abfragen für ein GraphQL -Schema generiert. Dies kann sofort zum Zugriff auf die Daten über den von App Services verwalteten GraphQL-Endpunkt verwendet werden.
Klicken Sie oben auf der Seite auf die Schaltfläche „Entwurf prüfen und bereitstellen“ und stellen Sie Ihre Änderungen bereit.
Hinweis: Nachdem das Schema erstellt wurde, können Sie die Datei .env.local so aktualisieren, dass sie die folgende Basis-URL aus Ihrer App Services-App enthält.
Testen wir, wie GraphQL tatsächlich funktioniert. Fügen Sie auf der Registerkarte „GraphQL “ im GraphQL-Editor den folgenden Codeausschnitt ein, um das generierte Schema zu testen.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}Nachdem nun die richtigen Regeln und das richtige Schema vorhanden sind, können wir mit der Erstellung von Funktionen für die App beginnen. Für die erste Funktion erstellen wir eine Funktion, die eine Liste von Filmen zurückgibt, deren Titel dem Suchbegriff entspricht. Es wird unser im vorherigen Schritt erstellter dynamischer Index mit der Autovervollständigungsfunktion verwendet. Dies ermöglicht uns die automatische Vervollständigung und Fuzzy-Suche nach Filmneigungen in der Suchleiste der Frontend-App.
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Build“ auf „Functions“ . Funktionen bieten eine Möglichkeit, serverseitige Logik in App Services auszuführen und Daten aus dem verbundenen Cluster zu integrieren. Mit dem Aggregation Framework können Sie sehr leistungsfähige Aggregationen erstellen, auch ohne Treiber.
Klicken Sie auf die Schaltfläche „Neue Funktion erstellen“ und geben Sie autocompleteTitle als Namen für die Funktion ein.
Klicken Sie nun auf die Registerkarte Funktionseditor .
Fügen Sie den folgenden Code in den Funktionseditor ein:
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 ( ) ;
} ;Klicken Sie auf die Schaltfläche Entwurf speichern, um die Funktion zu speichern.
Wir möchten die Autocomplete-Funktion in unserem GraphQL-Schema verwenden. Dazu müssen wir einen benutzerdefinierten Resolver erstellen. Mit benutzerdefinierten Resolvern können wir benutzerdefinierte Abfragen und Mutationen für unser GraphQL-Schema definieren, unterstützt durch in App Services erstellte Funktionen .
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter Build auf GraphQL . Klicken Sie auf die Registerkarte „Benutzerdefinierte Resolver“ und dann auf die Schaltfläche „Benutzerdefinierten Resolver hinzufügen“ . Geben Sie als GraphQL-Feldnamen autocompleteTitle ein, wählen Sie als übergeordneter Typ Abfrage aus und wählen Sie als Funktionsname die neu erstellte Funktion autocompleteTitle aus.
Der Eingabetyp definiert den Datentyp dessen, was als Eingabe für diesen Resolver an die GraphQL-API gesendet wird. Der Rückgabetyp definiert den Datentyp dessen, was von der API zurückgegeben wird. Wir senden einen String als Eingabe und erwarten eine Liste von Filmobjekten als Ausgabe.
Scalar Type , String Existing Type (List) , [Movie]Klicken Sie auf die Schaltfläche „Entwurf speichern“, um den benutzerdefinierten Resolver zu speichern.
Klicken Sie oben auf der Seite auf die Schaltfläche „Entwurf prüfen und bereitstellen“ und stellen Sie Ihre Änderungen bereit.
Nehmen Sie sich nun mit der ersten Funktionseinrichtung die Zeit, die App zu testen, geben Sie einige Filmtitel in die Suchleiste ein und sehen Sie sich die Ergebnisse der automatischen Vervollständigung an.
Nachdem wir nun die Funktion zur automatischen Vervollständigung eingerichtet haben, können wir eine neue Funktion für Hervorhebungen und Punkte erstellen. Diese Funktion gibt eine Liste von Filmen zurück, die hinsichtlich Titel, ausgewähltem Genre und Land, in dem ein bestimmter Film produziert wurde, mit dem Suchbegriff übereinstimmen. Darüber hinaus werden Hervorhebungen und Suchergebnisse für die Ergebnisse zurückgegeben. Die Hervorhebungen enthalten die genaue Teilzeichenfolge im Titel und die Handlungszeichenfolgen, die den passenden Suchbegriff enthalten. Dadurch können wir die gefundenen Suchbegriffe in der Frontend-Benutzeroberfläche hervorheben.
Ähnlich wie bei der vorherigen Funktion erstellen wir eine neue Funktion für Hervorhebungen und Punkte.
Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Build“ auf „Functions“ . Klicken Sie auf die Schaltfläche „Neue Funktion erstellen“ und geben Sie filteredMovies als Namen für die Funktion ein.
Klicken Sie nun auf die Registerkarte Funktionseditor .
Fügen Sie den folgenden Code in den Funktionseditor ein:
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 ( ) ;
} ; Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter Build auf GraphQL . Klicken Sie auf die Registerkarte „Benutzerdefinierte Resolver“ und dann auf die Schaltfläche „Benutzerdefinierten Resolver hinzufügen“ . Geben Sie als GraphQL-Feldnamen filteredMovies ein, wählen Sie als übergeordneter Typ Abfrage und als Funktionsnamen die neu erstellte Funktion filteredMovies aus.
Wir senden eine Zeichenfolge als Eingabe und erwarten als Ausgabe eine Liste benutzerdefinierter Filmobjekte, die die Partituren und Highlights für jeden Film enthält.
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 "
}Klicken Sie auf die Schaltfläche „Entwurf speichern“, um den benutzerdefinierten Resolver zu speichern.
Klicken Sie oben auf der Seite auf die Schaltfläche „Entwurf prüfen und bereitstellen“ und stellen Sie Ihre Änderungen bereit.
Nehmen Sie sich nun nach dem Einrichten der Hervorhebungsfunktion die Zeit, die App zu testen, geben Sie einige Filmtitel in die Suchleiste ein, scrollen Sie durch die Ergebnisliste und stellen Sie sicher, dass der Fuzzy-Matching-Suchbegriff im Filmtitel und in der kurzen Handlung hervorgehoben ist, wenn es eine Übereinstimmung gibt .
Facetten eröffnen viele leistungsstarke Anwendungsfälle für die Gruppierung Ihrer Suchergebnisse. Die folgende Funktion zeigt, wie Sie eine Atlas-Suchabfrage ausführen, um Ergebnisse zu erhalten, die nach Werten für die Genres jedes Films in der Filmsammlung gruppiert sind, einschließlich der Anzahl für jede dieser Gruppen.
Erstellen Sie in Ihrem Cluster auf Atlas auf der Registerkarte „Suchen “ einen neuen Index mit den facets und dem folgenden JSON für die Filmsammlung .
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
} Nachdem der Index erstellt wurde, klicken Sie in der Atlas -Benutzeroberfläche auf die Registerkarte „App Services“ . Klicken Sie in der Benutzeroberfläche auf „Anwendung-0“ . Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Build“ auf „Functions“ . Klicken Sie auf die Schaltfläche „Neue Funktion erstellen“ und geben Sie facetsGenres als Namen für die Funktion ein.
Klicken Sie nun auf die Registerkarte Funktionseditor .
Fügen Sie den folgenden Code in den Funktionseditor ein:
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 ( ) ;
} ; Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter Build auf GraphQL . Klicken Sie auf die Registerkarte „Benutzerdefinierte Resolver“ und dann auf die Schaltfläche „Benutzerdefinierten Resolver hinzufügen“ . Geben Sie für den GraphQL-Feldnamen facetsGenres ein, wählen Sie für den übergeordneten Typ „Query“ und für den Funktionsnamen die neu erstellte Funktion facetsGenres aus.
Wir senden keine Eingaben an diese Abfrage und erwarten eine Liste benutzerdefinierter Objekte, die die Facetten jedes Genres darstellen und die Anzahl der Filme für jedes Genre enthalten.
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 "
}
}
}
}
}
}
}
}
}
}
}Klicken Sie auf die Schaltfläche „Entwurf speichern“, um den benutzerdefinierten Resolver zu speichern.
Klicken Sie oben auf der Seite auf die Schaltfläche „Entwurf prüfen und bereitstellen“ und stellen Sie Ihre Änderungen bereit.
Testen Sie nun mit der Einrichtung der Facetten die App und öffnen Sie das Dropdown-Menü für Genres . Beachten Sie, dass es jetzt neben jedem Genre eine Zahl gibt, die die Gesamtzahl der Filme für dieses Genre angibt.
Mit MongoDB App Services Hosting können Sie die statischen Medien- und Dokumentdateien Ihrer Anwendung hosten, verwalten und bereitstellen. Sie können Hosting verwenden, um einzelne Inhalte zu speichern oder Ihre gesamte Kundenanwendung hochzuladen und bereitzustellen.
Unsere Frontend-App enthält alle notwendigen Aufrufe der GraphQL-API auf App Services. Wir können die gesamte Frontend-App als statische Site exportieren und auf MongoDB App Services hosten.
Dazu müssen Sie den folgenden Code im Stammverzeichnis des Projekts ausführen. Stellen Sie sicher, dass Sie die Abhängigkeiten mit installiert haben.
npm installund dann die Site mit einem NPM-Skript unter Verwendung von nextjs erstellen und exportieren.
npm run build && npm run export Dadurch wird ein Ordner out im Stammordner des Projekts erstellt.
Auf der MongoDB Atlas-Benutzeroberfläche auf der Registerkarte „App Services“ . Klicken Sie in der linken Seitenleiste der Atlas-Benutzeroberfläche unter „Verwalten“ auf „Hosting“ . Klicken Sie auf die Schaltfläche „Hosting aktivieren“ . out den Inhalt des Ordners per Drag-and-Drop auf die Registerkarte „Hosting“ , um alle Dateien hochzuladen.
Klicken Sie oben auf der Seite auf die Schaltfläche „Entwurf prüfen und bereitstellen“ und stellen Sie Ihre Änderungen bereit.
Klicken Sie nun auf die Registerkarte „Einstellungen“ , kopieren Sie die App Services-Domäne, fügen Sie sie in einen Browser Ihrer Wahl ein und drücken Sie die Eingabetaste, um die Website anzuzeigen. ?
