atlas search mongoflix
1.0.0
MongoFlix - عرض توضيحي تفاعلي لبحث MongoDB Atlas، وخدمات تطبيقات MongoDB، وGraphQL وغير ذلك الكثير.
هذا هو ما سوف نبني!
متوفر أيضًا على خدمات التطبيقات كموقع ثابت!
يمكنك بالطبع استنساخ الريبو وتشغيل المشروع محليًا npm install && npm run build . وبدلاً من ذلك، يمكنك فتح المشروع في متصفحك دون الحاجة إلى أي تثبيت على جهازك.
افتح المشروع مباشرة على StackBlitz:
قم بتكرار الملف .env.local.example-add-app-id-here وقم بتسميته: .env.local . ستحتاج إلى تغيير قيمة <APP_ID> إلى معرف التطبيق الخاص بتطبيق MongoDB App Services، والذي سيتم إنشاؤه في خطوة لاحقة. يجب عليك أيضًا تحديث قيمة NEXT_PUBLIC_REALM_BASE_URL إذا كان لديك عنوان URL أساسي مختلف لتطبيق MongoDB App Services. ستعتمد هذه القيمة على منطقة النشر لتطبيق MongoDB App Services الخاص بك.
لمتابعة العرض التوضيحي، ستحتاج إلى إنشاء مجموعة MongoDB Atlas وتحميل مجموعة البيانات النموذجية إلى مجموعتك. يرجى إنشاء حساب على MongoDB Atlas واتباع التعليمات. إذا كانت هذه هي المرة الأولى التي تستخدم فيها Atlas، فستحتاج إلى إنشاء مؤسسة ومشروع. بعد إكمال إعداد الحساب، ستظهر لك واجهة مستخدم Atlas . إذا لم يكن لديك أي مجموعة، فانقر فوق الزر "إنشاء قاعدة بيانات" .
في مربع الحوار التالي، حدد مشترك وانقر فوق إنشاء . ستوفر الشاشة التالية واجهة لتكوين المجموعة.
إذا اخترت منطقة أخرى غير فرانكفورت، فسوف تحتاج إلى تحديث نقطة النهاية في التطبيق في .env.local لتتناسب مع المنطقة.
فيما يلي إعدادات المجموعة:
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
بعد نشر مجموعتك في المنطقة التي تختارها، ستحتاج إلى تحميل مجموعة البيانات النموذجية في مجموعتك. انقر على قائمة النقاط الثلاث الموجودة في العنوان العلوي لبطاقة المجموعة. انقر فوق تحميل مجموعة بيانات العينة . انقر فوق الزر تحميل مجموعة بيانات العينة في التراكب لبدء العملية. (يجب أن يستغرق الأمر حوالي 5-10 دقائق. ☕️؟)
انقر فوق اسم المجموعة لفتحه. في مجموعتك على Atlas، انقر فوق علامة التبويب بحث . انقر فوق الزر إنشاء فهرس البحث لإنشاء فهرس.
sample_mflix وحدد movies .default والصق JSON التالي.
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} يجب أن يستغرق إنشاء الفهرس أقل من دقيقة واحدة. لنختبره، للتأكد من أنه يعمل. لا تزال في علامة التبويب "بحث" ، انقر فوق الزر "استعلام" بجانب الفهرس الذي تم إنشاؤه حديثًا. أدخل الاستعلام التالي للعثور على جميع الأفلام التي تحتوي على time النص في أي قيم نصية.
{ "$search" : { "text" : " time travel " } }في واجهة مستخدم Atlas ، انقر فوق علامة التبويب "خدمات التطبيقات" في الجزء العلوي. إذا كنت تستخدم خدمات التطبيقات للمرة الأولى، فسوف ترى مربع حوار يحتوي على تعليمات إضافية. يمكنك تحديد "إنشاء تطبيق خاص بك " بأمان والنقر فوق "التالي" . يجب أن يتم ملء المعلومات تلقائيا. تأكد من استخدام نفس الاسم للبساطة.
في مربع الحوار التالي، قم بإعداد اسم تطبيق خدمات التطبيقات، وقم بتوصيله بالمجموعة التي تم إنشاؤها حديثًا وحدد نموذج نشر محلي (منطقة واحدة). يفضل استخدام المنطقة الأقرب إلى منطقة مجموعتك.
لإنشاء التطبيق، انقر فوق "إنشاء تطبيق خدمات التطبيقات" .
تلميح: الآن بعد إنشاء التطبيق، يمكنك تحديث ملف .env.local ليشمل قيمة معرف التطبيق من تطبيق خدمات التطبيقات الخاص بك.
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن Data Access ، انقر فوق Authentication . كما ترى، توفر خدمات التطبيقات العديد من طرق المصادقة، وسوف نستخدم Anonymous في هذا العرض التوضيحي. انقر فوق الزر "تحرير" وقم بتعيين مربع الاختيار على "تشغيل" لطريقة المصادقة هذه.
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن Data Access ، انقر فوق Rules . توفر لك القواعد العديد من الطرق لتقييد الوصول إلى البيانات وتكوينه لكل مجموعة ودور مستخدم، وصولاً إلى مستوى المستند. في هذا العرض التوضيحي، سنسمح لجميع المستخدمين read جميع المستندات الموجودة في مجموعة الأفلام فقط. توفر خدمات التطبيقات قوالب للعديد من السيناريوهات وسنستخدم نموذج "يمكن للمستخدمين قراءة جميع البيانات فقط" .
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن Data Access ، انقر فوق Schema . يحدد المخطط هياكل البيانات وأنواع المستندات في كل مجموعة في قواعد البيانات. حدد مجموعة الأفلام ضمن قاعدة بيانات Sample_mflix . انقر فوق زر إنشاء المخطط. حدد مجموعة الأفلام فقط، واترك حجم العينات كحجم افتراضي وانقر فوق الزر "إنشاء مخطط" . سيؤدي هذا أيضًا إلى إنشاء جميع الأنواع والاستعلامات الضرورية لمخطط GraphQL . والتي يمكن استخدامها على الفور للوصول إلى البيانات من خلال نقطة نهاية GraphQL التي تديرها خدمات التطبيقات.
انقر فوق الزر "مراجعة المسودة والنشر" الموجود أعلى الصفحة وقم بنشر التغييرات.
تلميح: الآن بعد إنشاء المخطط، يمكنك تحديث ملف .env.local ليشمل عنوان URL الأساسي التالي من تطبيق خدمات التطبيقات لديك.
لنختبر كيفية عمل GraphQL فعليًا. في علامة التبويب GraphQL ، داخل محرر GraphQL، قم بلصق مقتطف التعليمات البرمجية التالي لاختبار المخطط الذي تم إنشاؤه.
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}الآن مع وجود القواعد والمخطط الصحيح، يمكننا البدء في إنشاء وظائف للتطبيق. بالنسبة للميزة الأولى، سنقوم بإنشاء وظيفة تقوم بإرجاع قائمة بالأفلام التي تطابق مصطلح البحث حسب العنوان. وسوف يستخدم فهرسنا الديناميكي الذي تم إنشاؤه في الخطوة السابقة مع وظيفة الإكمال التلقائي. يتيح لنا ذلك توفير الإكمال التلقائي والبحث الغامض عن إمالة الأفلام في شريط البحث الخاص بتطبيق الواجهة الأمامية.
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن Build ، انقر فوق Functions . توفر الوظائف طريقة لتنفيذ منطق الخادم على خدمات التطبيقات التي تدمج البيانات من المجموعة المتصلة. باستخدام 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 الخاص بنا. للقيام بذلك نحن بحاجة إلى إنشاء محلل مخصص. تتيح لنا أدوات الحل المخصصة تحديد الاستعلامات والتغييرات المخصصة لمخطط GraphQL، المدعوم بالوظائف التي تم إنشاؤها في خدمات التطبيقات.
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن Build ، انقر فوق GraphQL . انقر فوق علامة التبويب " حلول مخصصة" ثم انقر فوق الزر "إضافة محلل مخصص" . بالنسبة لاسم حقل GraphQL، أدخل عنوان autocompleteTitle ، وبالنسبة لنوع الأصل ، حدد الاستعلام ، وبالنسبة لاسم الوظيفة، حدد عنوان autocompleteTitle للوظيفة التي تم إنشاؤها حديثًا.
يحدد نوع الإدخال نوع البيانات لما سيتم إرساله إلى GraphQL API كمدخل لهذا المحلل. يحدد نوع الإرجاع نوع البيانات لما سيتم إرجاعه بواسطة واجهة برمجة التطبيقات. سوف نرسل سلسلة كمدخل ونتوقع قائمة بكائنات الفيلم كمخرجات.
Scalar Type ، String Existing Type (List) ، [Movie]انقر فوق الزر "حفظ المسودة" لحفظ المحلل المخصص.
انقر فوق الزر "مراجعة المسودة والنشر" الموجود أعلى الصفحة وقم بنشر التغييرات.
الآن مع إعداد الميزة الأولى، خذ الوقت الكافي لاختبار التطبيق، وأدخل بعض عناوين الأفلام في شريط البحث وشاهد نتائج الإكمال التلقائي.
الآن مع وجود وظيفة الإكمال التلقائي، يمكننا إنشاء وظيفة جديدة للإبرازات والتسجيل. ستعيد هذه الوظيفة قائمة بالأفلام التي تطابق مصطلح البحث حسب العنوان والأنواع المحددة والبلد الذي تم إنتاج فيلم معين فيه. بالإضافة إلى ذلك، فإنه سيعود بالميزات ونتائج البحث للنتائج. تحتوي الإبرازات على السلسلة الفرعية الدقيقة داخل العنوان وسلاسل الرسم، التي تحتوي على مصطلح البحث المطابق. سيسمح لنا ذلك بتسليط الضوء على مصطلحات البحث التي تم العثور عليها داخل واجهة المستخدم الأمامية.
على غرار الوظيفة السابقة، سنقوم بإنشاء وظيفة جديدة للإبرازات والتسجيل.
على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن 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، ضمن 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 "
}انقر فوق الزر "حفظ المسودة" لحفظ المحلل المخصص.
انقر فوق الزر "مراجعة المسودة والنشر" الموجود أعلى الصفحة وقم بنشر التغييرات.
الآن مع إعداد ميزة الإبرازات، خذ الوقت الكافي لاختبار التطبيق، وأدخل بعض عناوين الأفلام في شريط البحث، ثم قم بالتمرير في قائمة النتائج وتأكد من تمييز مصطلح البحث المطابق الغامض داخل عنوان الفيلم والحبكة القصيرة عندما يكون هناك تطابق. .
تفتح الجوانب العديد من حالات الاستخدام القوية لتجميع نتائج البحث الخاصة بك. توضح الميزة التالية كيفية تشغيل استعلام بحث 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 ، انقر فوق علامة التبويب خدمات التطبيقات . انقر فوق التطبيق-0 في واجهة المستخدم. على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن 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، ضمن 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 "
}
}
}
}
}
}
}
}
}
}
}انقر فوق الزر "حفظ المسودة" لحفظ المحلل المخصص.
انقر فوق الزر "مراجعة المسودة والنشر" الموجود أعلى الصفحة وقم بنشر التغييرات.
الآن مع إعداد الجوانب، اختبر التطبيق وافتح القائمة المنسدلة للأنواع . لاحظ أنه يوجد الآن رقم بجانب كل نوع يمثل إجمالي عدد الأفلام لهذا النوع.
تتيح لك استضافة MongoDB App Services استضافة وإدارة وخدمة الوسائط الثابتة وملفات المستندات الخاصة بتطبيقك. يمكنك استخدام الاستضافة لتخزين أجزاء فردية من المحتوى أو لتحميل وخدمة العميل بالكامل.
يحتوي تطبيق الواجهة الأمامية الخاص بنا على جميع الاستدعاءات اللازمة لواجهة برمجة التطبيقات GraphQL على خدمات التطبيقات. يمكننا تصدير تطبيق الواجهة الأمامية بالكامل كموقع ثابت واستضافته على خدمات تطبيقات MongoDB.
لهذا تحتاج إلى تنفيذ التعليمات البرمجية التالية في المجلد الجذر للمشروع. تأكد من تثبيت التبعيات مع.
npm installثم قم ببناء الموقع وتصديره باستخدام البرنامج النصي npm باستخدام nextjs.
npm run build && npm run export سيؤدي هذا إلى إنشاء مجلد يتم out في المجلد الجذر للمشروع.
في واجهة مستخدم MongoDB Atlas في علامة التبويب خدمات التطبيقات . على الشريط الجانبي الأيسر لواجهة مستخدم Atlas، ضمن إدارة ، انقر فوق استضافة . انقر فوق الزر تمكين الاستضافة . قم بسحب وإسقاط محتويات المجلد out علامة التبويب "الاستضافة" لتحميل كافة الملفات.
انقر فوق الزر "مراجعة المسودة والنشر" الموجود أعلى الصفحة وقم بنشر التغييرات.
انقر الآن على علامة التبويب "الإعدادات" وانسخ مجال خدمات التطبيقات والصقه في متصفح من اختيارك واضغط على "إدخال" لعرض الموقع. ؟
