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을 선택하고 Next(다음) 를 클릭해도 됩니다. 정보는 자동으로 채워져야 합니다. 단순화를 위해 동일한 이름을 사용해야 합니다.
다음 대화 상자에서 App Services 앱의 이름을 설정하고 새로 생성된 클러스터에 연결한 후 로컬(단일 지역) 배포 모델을 선택합니다. 클러스터 지역에 가장 가까운 지역을 사용하는 것이 좋습니다.
앱을 만들려면 App Services 애플리케이션 만들기를 클릭합니다.
힌트: 이제 앱이 생성되면 .env.local 파일을 업데이트하여 App Services 앱의 앱 ID 값을 포함할 수 있습니다.
Atlas UI 왼쪽 바에 있는 데이터 액세스 내에서 인증을 클릭합니다. App Services는 다양한 인증 방법을 제공하므로 이 데모에서는 익명을 사용하겠습니다. 편집 버튼을 클릭하고 이 인증 방법에 대한 확인란을 ON 으로 설정합니다.
Atlas UI 왼쪽 바에 있는 데이터 액세스 내에서 규칙 을 클릭합니다. 규칙은 문서 수준까지 심층적으로 컬렉션 및 사용자 역할별로 데이터 액세스를 제한하고 구성하는 다양한 방법을 제공합니다. 이 데모에서는 모든 사용자가 영화 컬렉션의 모든 문서만 read 있도록 허용합니다. App Services는 다양한 시나리오에 대한 템플릿을 제공하며 사용자는 모든 데이터를 읽을 수만 있음 템플릿을 사용합니다.
Atlas UI의 왼쪽 사이드바에 있는 Data Access 내에서 Schema 를 클릭하세요. 스키마는 데이터베이스의 각 컬렉션에 있는 문서의 데이터 구조와 유형을 정의합니다. Sample_mflix 데이터베이스 내에서 영화 컬렉션을 선택합니다. 스키마 생성 버튼을 클릭합니다. 영화 컬렉션만 선택하고 샘플링 크기를 기본값으로 두고 스키마 생성 버튼을 클릭합니다. 이는 또한 GraphQL 스키마에 필요한 모든 유형과 쿼리를 생성합니다. App Services에서 관리하는 GraphQL 엔드포인트를 통해 데이터에 즉시 액세스하는 데 사용할 수 있습니다.
페이지 상단에 있는 초안 검토 및 배포 버튼을 클릭하고 변경 사항을 배포합니다 .
힌트: 이제 생성된 스키마를 사용하여 App Services 앱의 다음 기본 URL을 포함하도록 .env.local 파일을 업데이트할 수 있습니다.
GraphQL이 실제로 어떻게 작동하는지 테스트해 보겠습니다. GraphQL 탭의 GraphQL 편집기 내에서 다음 코드 조각을 붙여넣어 생성된 구성표를 테스트합니다.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}이제 올바른 규칙과 스키마가 준비되었으므로 앱용 함수 생성을 시작할 수 있습니다. 첫 번째 기능에서는 제목별로 검색어와 일치하는 영화 목록을 반환하는 함수를 만듭니다. 자동 완성 기능과 함께 이전 단계에서 생성된 동적 인덱스를 사용합니다. 이를 통해 프런트엔드 앱의 검색 표시줄에서 영화 기울기에 대한 자동 완성 및 퍼지 검색을 제공할 수 있습니다.
Atlas UI의 왼쪽 사이드바에 있는 Build 내에서 Functions 를 클릭하세요. 함수는 연결된 클러스터의 데이터를 통합하는 App Services 에서 서버 측 논리를 실행하는 방법을 제공합니다. Aggregation Framework를 사용하면 드라이버 없이도 매우 강력한 집계를 생성할 수 있습니다.
새 함수 만들기 버튼을 클릭하고 함수 이름으로 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 을 클릭하세요. Custom Resolvers 탭을 클릭하고 Add a Custom Resolver 버튼을 클릭합니다. 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 을 클릭하세요. Custom Resolvers 탭을 클릭하고 Add a Custom Resolver 버튼을 클릭합니다. 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 "
}사용자 지정 해결 프로그램을 저장하려면 초안 저장 버튼을 클릭하세요.
페이지 상단에 있는 초안 검토 및 배포 버튼을 클릭하고 변경 사항을 배포합니다 .
이제 하이라이트 기능 설정을 사용하여 앱을 테스트하고 결과 목록의 검색 표시줄 스크롤에 일부 영화 제목을 입력하고 일치하는 경우 영화 제목과 짧은 줄거리 내에서 퍼지 일치 검색어가 강조 표시되는지 확인하십시오. .
패싯은 검색 결과를 그룹화하기 위한 많은 강력한 사용 사례를 열어줍니다. 다음 기능은 Atlas 검색 쿼리를 실행하여 각 그룹의 개수를 포함하여 영화 컬렉션에 있는 각 영화의 장르 값별로 그룹화된 결과를 얻는 방법을 보여줍니다.
검색 탭의 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에서 Application-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 을 클릭하세요. Custom Resolvers 탭을 클릭하고 Add a Custom Resolver 버튼을 클릭합니다. GraphQL 필드 이름 에 대해 facetsGenres 입력하고, 상위 유형 에 대해 쿼리를 선택하고, 함수 이름 에 대해 새로 생성된 함수인 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 "
}
}
}
}
}
}
}
}
}
}
}사용자 지정 해결 프로그램을 저장하려면 초안 저장 버튼을 클릭하세요.
페이지 상단에 있는 초안 검토 및 배포 버튼을 클릭하고 변경 사항을 배포합니다 .
이제 패싯 설정을 통해 앱을 테스트하고 Genres 드롭다운을 엽니다. 이제 각 장르 옆에 해당 장르의 총 영화 수를 나타내는 숫자가 표시됩니다.
MongoDB 앱 서비스 호스팅을 사용하면 애플리케이션의 정적 미디어 및 문서 파일을 호스팅, 관리 및 제공할 수 있습니다. 호스팅을 사용하여 개별 콘텐츠를 저장하거나 전체 클라이언트 애플리케이션을 업로드하고 제공할 수 있습니다.
우리의 프런트엔드 앱에는 App Services의 GraphQL API에 필요한 모든 호출이 포함되어 있습니다. 전체 프런트엔드 앱을 정적 사이트로 내보내고 MongoDB App Services에서 호스팅할 수 있습니다.
이를 위해서는 프로젝트의 루트 폴더에서 다음 코드를 실행해야 합니다. 종속성이 설치되어 있는지 확인하십시오.
npm install그런 다음 nextjs를 사용하여 npm 스크립트로 사이트를 빌드하고 내보냅니다.
npm run build && npm run export 그러면 프로젝트의 루트 폴더에 out 되는 폴더가 생성됩니다.
App Services 탭의 MongoDB Atlas UI에서. Atlas UI 왼쪽 막대에 있는 관리 내에서 호스팅 을 클릭합니다. 호스팅 활성화 버튼을 클릭합니다. 모든 파일을 업로드하려면 폴더의 내용을 호스팅 탭 out 끌어다 놓습니다.
페이지 상단에 있는 초안 및 배포 검토 버튼을 클릭하고 변경 사항을 배포합니다 .
이제 설정 탭을 클릭하고 App Services 도메인을 복사하여 선택한 브라우저에 붙여넣고 Enter 키를 눌러 사이트를 봅니다. ?
