مشاركة عبر


الخطوة 1 - نظرة عامة على إضافة بحث إلى تطبيق ويب ثابت باستخدام .NET

ينشئ هذا البرنامج التعليمي موقع ويب يبحث من خلال كتالوج من الكتب ثم ينشر موقع الويب إلى Azure Static Web App.

ماذا تفعل العينة؟

توفر عينة موقع الويب هذا الوصول إلى كتالوج من 10,000 كتاب. يمكنك البحث في الكتالوج عن طريق إدخال نص في شريط البحث. أثناء إدخال النص، يستخدم موقع الويب ميزة اقتراح فهرس البحث للإكمال التلقائي للنص. عند انتهاء الاستعلام، يعرض موقع الويب قائمة الكتب مع جزء من التفاصيل. يمكنك تحديد كتاب لمشاهدة جميع التفاصيل، المخزنة في فهرس البحث، للكتاب.

لقطة شاشة لنموذج التطبيق في نافذة مستعرض.

تتضمن تجربة البحث ما يلي:

  • Search – provides search functionality for the application.
  • Suggest – provides suggestions as the user is typing in the search bar.
  • الواجهات وعوامل التصفية - توفر بنية تنقل ذات واجهة تقوم بالتصفية حسب الكاتب أو اللغة.
  • Paginated results - provides paging controls for scrolling through results.
  • Document Lookup – looks up a document by ID to retrieve all of its contents for the details page.

كيف يتم تنظيم العينة؟

The sample code includes the following components:

App Purpose GitHub
Repository
Location
client تطبيق التفاعل (طبقة العرض التقديمي) لعرض الكتب، مع البحث. وهي تستدعي تطبيق Azure Function. /azure-search-static-web-app/client
api تطبيق Azure .NET Function (طبقة الأعمال) - يستدعي Azure الذكاء الاصطناعي Search API باستخدام .NET SDK /azure-search-static-web-app/api
bulk insert مشروع .NET لإنشاء الفهرس وإضافة مستندات إليه. /azure-search-static-web-app/bulk-insert

إعداد بيئة التطوير

إنشاء الخدمات وتثبيت البرنامج التالي لبيئة التطوير المحلية الخاصة بك.

لا يقوم هذا البرنامج التعليمي بتشغيل Azure Function API محليا. If you want to run it locally, install azure-functions-core-tools.

تفرع ونسخ نموذج البحث باستخدام git

لنشر Static Web App، تحتاج إلى نسخ مستودع العينة. تستخدم تطبيقات الويب موقع نسخة GitHub لتحديد إجراءات البناء ومحتوى النشر. يحدث تنفيذ التعليمات البرمجية في Static Web App عن بعد، مع قراءة Azure Static Web Apps للتعليمات البرمجية من العينة المتشعبة.

  1. On GitHub, fork the azure-search-static-web-app repository.

    Complete the fork process in your web browser with your GitHub account. يستخدم هذا البرنامج التعليمي التفرع الخاص كجزء من التوزيع إلى Azure Static Web App.

  2. في محطة Bash الطرفية، قم بتنزيل نموذج التطبيق المتشعب إلى الكمبيوتر المحلي.

    استبدل YOUR-GITHUB-ALIAS باسمك المستعار في GitHub.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
    
  3. في نفس محطة Bash الطرفية، انتقل إلى المستودع المتشعب الخاص بك لمثال بحث موقع الويب هذا:

    cd azure-search-static-web-app
    
  4. استخدم الأمر Visual Studio Code، code . لفتح المستودع المتشعب. يمكنك إنجاز المهام المتبقية من Visual Studio Code، ما لم يتم تحديدها.

    code .
    

Next steps