atlas search mongoflix
1.0.0
MongoFlix - MongoDB Atlas Search、MongoDB App Services、GraphQL などの対話型デモ。
これが私たちが構築するものです！
App Services でも静的サイトとして利用できます。
もちろん、リポジトリのクローンを作成して、プロジェクトをローカルで実行することもできますnpm install && npm run build 。あるいは、マシンにインストールする必要がなく、ブラウザでプロジェクトを開くこともできます。
StackBlitz でプロジェクトをライブで開きます。
ファイル.env.local.example-add-app-id-hereを複製し、 .env.localという名前を付けます。 <APP_ID>の値を、後の手順で作成する MongoDB App Services アプリのアプリ ID に変更する必要があります。 MongoDB App Services アプリのベース URL が異なる場合は、 NEXT_PUBLIC_REALM_BASE_URL値も更新する必要があります。この値は、MongoDB App Services アプリのデプロイメント リージョンによって異なります。
デモに従うには、MongoDB Atlas クラスターを作成し、サンプル データ セットをクラスターにロードする必要があります。 MongoDB Atlas でアカウントを作成し、指示に従ってください。 Atlas を初めて使用する場合は、組織とプロジェクトを作成する必要があります。アカウントのセットアップが完了すると、 Atlas UI が表示されます。クラスターがない場合は、 「データベースの構築」ボタンをクリックします。
次のダイアログで[共有]を選択し、 [作成]をクリックします。次の画面には、クラスターを構成するためのインターフェイスが表示されます。
フランクフルト以外の地域を選択した場合は、その地域に一致するように.env.local内のアプリのエンドポイントを更新する必要があります。
クラスターの設定は次のとおりです。
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
選択したリージョンにクラスターをデプロイした後、サンプル データ セットをクラスターにロードする必要があります。クラスター カードの上部の見出しにある 3 つの点のメニューをクリックします。 [サンプル データセットの読み込み]をクリックします。オーバーレイの[サンプル データセットの読み込み]ボタンをクリックしてプロセスを開始します。 (5～10分程度かかります☕️ ?)
クラスター名をクリックして開きます。 Atlas上のクラスターで、 [検索]タブをクリックします。 「検索インデックスの作成」ボタンをクリックしてインデックスを作成します。
sample_mflixを選択し、 moviesを選択します。defaultのままにし、次の JSON を貼り付けます。
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
}インデックスの作成には 1 分もかかりません。テストして、機能することを確認してみましょう。 [検索]タブで、新しく作成したインデックスの横にある[クエリ]ボタンをクリックします。次のクエリを入力して、テキスト値にテキストtime含むすべてのムービーを検索します。
{ "$search" : { "text" : " time travel " } }Atlas UI で、上部にある[App Services]タブをクリックします。 App Services を初めて使用する場合は、追加の手順を含むダイアログが表示されます。 [Build your own App it] を選択して[次へ]をクリックしても問題ありません。情報は自動的に入力されます。わかりやすくするために、必ず同じ名前を使用してください。
次のダイアログで、App Services アプリの名前を設定し、新しく作成したクラスターに接続して、ローカル (単一リージョン) デプロイ モデルを選択します。クラスター領域に最も近い領域を使用することをお勧めします。
アプリを作成するには、 「App Services アプリケーションの作成」をクリックします。
ヒント:アプリが作成されたので、 .env.localファイルを更新して、App Services アプリのアプリ ID値を含めることができます。
Atlas UI の左側のサイド バーにある[データ アクセス]内で、 [認証]をクリックします。 App Services には多くの認証方法が用意されていることがわかりますが、このデモでは匿名を使用します。 [編集]ボタンをクリックし、この認証方法のチェックボックスをオンに設定します。
Atlas UI の左側のバーにある[データ アクセス] 内で、 [ルール]をクリックします。ルールを使用すると、ドキュメント レベルに至るまで、コレクションおよびユーザー ロールごとにデータ アクセスを制限および構成するためのさまざまな方法が提供されます。このデモでは、すべてのユーザーにムービー コレクション内のすべてのドキュメントreadのみを許可します。 App Services は多くのシナリオ用のテンプレートを提供しており、ここでは「ユーザーはすべてのデータを読み取ることしかできない」テンプレートを使用します。
Atlas UI の左側のサイド バーにある[データ アクセス] 内で、 [スキーマ]をクリックします。スキーマは、データベース内の各コレクション内のドキュメントのデータ構造とタイプを定義します。 Sample_mflixデータベース内のムービーコレクションを選択します。 「スキーマの生成」ボタンをクリックします。ムービーコレクションのみを選択し、サンプリング サイズをデフォルトのままにして、 [スキーマの生成]ボタンをクリックします。これにより、 GraphQLスキーマに必要なすべての型とクエリも生成されます。これをすぐに使用して、App Services によって管理される GraphQL エンドポイントを介してデータにアクセスできます。
ページ上部の「Review Draft & Deploy」ボタンをクリックし、変更をデプロイします。
ヒント:スキーマが生成されたので、 .env.localファイルを更新して、App Services アプリからの次のベース URL を含めることができます。
GraphQL が実際にどのように動作するかをテストしてみましょう。 [GraphQL]タブの GraphQL エディター内で、次のコード スニペットを貼り付けて、生成されたスキームをテストします。
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}正しいルールとスキーマが設定されたので、アプリの関数の作成を開始できます。最初の機能では、タイトルで検索語に一致する映画のリストを返す関数を作成します。前のステップでオートコンプリート機能を使用して作成した動的インデックスを使用します。これにより、フロントエンド アプリの検索バーで映画の傾きのオートコンプリートおよびあいまい検索を提供できるようになります。
Atlas UI の左側のバーにあるBuild内で、 Functions をクリックします。関数は、接続されたクラスターからのデータを統合するApp Servicesでサーバーサイド ロジックを実行する方法を提供します。集約フレームワークを自由に使用すると、ドライバーがなくても非常に強力な集約を作成できます。
[新しい関数の作成]ボタンをクリックし、関数の名前としてautocompleteTitleと入力します。
次に、 「関数エディター」タブをクリックします。
次のコードを関数エディターに貼り付けます。
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 ( ) ;
} ;「ドラフトを保存」ボタンをクリックして関数を保存します。
GraphQL スキーマでオートコンプリート関数を使用したいと考えています。これを行うには、カスタム リゾルバーを作成する必要があります。カスタム リゾルバーを使用すると、App Services で作成された関数を利用して、GraphQL スキーマのカスタム クエリとミューテーションを定義できます。
Atlas UI の左側のバーにあるBuild内で、 GraphQL をクリックします。 [カスタム リゾルバー]タブをクリックし、 [カスタム リゾルバーの追加]ボタンをクリックします。 GraphQL フィールド名としてautocompleteTitleを入力し、親タイプとしてQuery を選択し、関数名として新しく作成した関数autocompleteTitle選択します。
入力タイプは、このリゾルバーの入力として GraphQL API に送信されるデータのタイプを定義します。戻り値の型は、API によって返されるデータの型を定義します。入力として文字列を送信し、出力としてムービー オブジェクトのリストを期待します。
Scalar Type 、 String Existing Type (List) 、 [Movie][ドラフトを保存]ボタンをクリックしてカスタム リゾルバーを保存します。
ページ上部にある「ドラフトの確認とデプロイ」ボタンをクリックし、変更をデプロイします。
最初の機能セットアップでは、時間をかけてアプリをテストし、検索バーに映画のタイトルを入力し、オートコンプリートの結果を確認します。
オートコンプリート機能が導入されたので、ハイライトとスコアリングのための新しい関数を作成できます。この関数は、タイトル、選択したジャンル、特定の映画が製作された国によって検索語に一致する映画のリストを返します。さらに、結果のハイライトと検索スコアが返されます。ハイライトには、タイトル内の正確な部分文字列と、一致した検索語を含むプロット文字列が含まれます。これにより、フロントエンド UI 内で見つかった検索語を強調表示できるようになります。
前の関数と同様に、ハイライトとスコアリングのための新しい関数を作成します。
Atlas UI の左側のバーにあるBuild内で、 Functions をクリックします。 [新しい関数の作成]ボタンをクリックし、関数の名前としてfilteredMoviesと入力します。
次に、 「関数エディター」タブをクリックします。
次のコードを関数エディターに貼り付けます。
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 ( ) ;
} ;Atlas UI の左側のバーにあるBuild内で、 GraphQL をクリックします。 [カスタム リゾルバー]タブをクリックし、 [カスタム リゾルバーの追加]ボタンをクリックします。 GraphQL フィールド名としてfilteredMoviesを入力し、親タイプとしてQuery を選択し、関数名として新しく作成した関数filteredMoviesを選択します。
入力として文字列を送信し、出力として各映画のスコアとハイライトを含むカスタム ムービー オブジェクトのリストを期待します。
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 "
}[ドラフトを保存]ボタンをクリックしてカスタム リゾルバーを保存します。
ページ上部の「Review Draft & Deploy」ボタンをクリックし、変更をデプロイします。
ハイライト機能が設定されたので、時間をかけてアプリをテストし、結果リストの検索バー スクロールにいくつかの映画タイトルを入力し、一致した場合にあいまい一致した検索用語が映画タイトルと短いプロット内で強調表示されることを確認します。 。
ファセットは、検索結果をグループ化するための多くの強力な使用例を開きます。次の機能は、Atlas Search クエリを実行して、映画コレクション内の各映画のジャンルの値 (各グループの数を含む) によってグループ化された結果を取得する方法を示しています。
Atlasのクラスターの[検索]タブで、 facetsという名前の新しいインデックスと、ムービーコレクション用の次の JSON を作成します。
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
}インデックスが作成されたので、 Atlas UI で[App Services]タブをクリックします。 UI で「アプリケーション-0」をクリックします。 Atlas UI の左側のバーにあるBuild内で、 Functions をクリックします。 [新しい関数の作成]ボタンをクリックし、関数の名前としてfacetsGenresと入力します。
次に、 「関数エディター」タブをクリックします。
次のコードを関数エディターに貼り付けます。
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 ( ) ;
} ;Atlas UI の左側のバーにあるBuild内で、 GraphQL をクリックします。 [カスタム リゾルバー]タブをクリックし、 [カスタム リゾルバーの追加]ボタンをクリックします。 GraphQL フィールド名としてfacetsGenresと入力し、親タイプとして「Query」を選択し、関数名として新しく作成した関数facetsGenres選択します。
このクエリには入力を送信せず、各ジャンルの映画の数を含む、各ジャンルのファセットを表すカスタム オブジェクトのリストを期待します。
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 "
}
}
}
}
}
}
}
}
}
}
}[ドラフトを保存]ボタンをクリックしてカスタム リゾルバーを保存します。
ページ上部の「Review Draft & Deploy」ボタンをクリックし、変更をデプロイします。
ファセットのセットアップが完了したら、アプリをテストし、 [Genres]のドロップダウンを開きます。各ジャンルの横に、そのジャンルの映画の総数を表す数字があることに注目してください。
MongoDB App Services Hosting を使用すると、アプリケーションの静的メディア ファイルとドキュメント ファイルをホスト、管理、提供できます。ホスティングを使用すると、個々のコンテンツを保存したり、クライアント アプリケーション全体をアップロードして提供したりできます。
フロントエンド アプリには、App Services 上の GraphQL API への必要な呼び出しがすべて含まれています。フロントエンド アプリ全体を静的サイトとしてエクスポートし、MongoDB App Services でホストできます。
このためには、プロジェクトのルート フォルダーで次のコードを実行する必要があります。依存関係がインストールされていることを確認してください。
npm install次に、nextjs を使用した npm スクリプトでサイトを構築してエクスポートします。
npm run build && npm run exportこれにより、プロジェクトのルート フォルダーoutというフォルダーが作成されます。
MongoDB Atlas UI の[App Services]タブ。 Atlas UI の左側のバーにある[管理]内で、 [ホスティング]をクリックします。 「ホスティングを有効にする」ボタンをクリックします。フォルダーの内容を[ホスティング]タブoutドラッグ アンド ドロップして、すべてのファイルをアップロードします。
ページ上部の「Review Draft & Deploy」ボタンをクリックし、変更をデプロイします。
ここで[設定]タブをクリックし、 App Services ドメインをコピーして、選択したブラウザーに貼り付け、Enter キーを押してサイトを表示します。 ?
