1. Обзор добавления поиска на веб-сайт
В этом руководстве по поиску ИИ Azure создайте веб-приложение, которое выполняет поиск по каталогу книг, а затем разверните веб-сайт в Статические веб-приложения Azure ресурсе.
Это руководство предназначено для разработчиков JavaScript, которые хотят создать клиентское приложение внешнего интерфейса, которое включает в себя взаимодействие с поиском, такие как фасетная навигация, типahead и разбиение на страницы. Он также демонстрирует библиотеку @azure/search-documents в пакете SDK Azure для JavaScript для вызовов поиска ИИ Azure для индексирования и запросов рабочих процессов на серверной части.
Как работает пример?
Этот пример веб-сайта предоставляет доступ к каталогу, содержащему 10 000 книг. Пользователь может выполнять поиск в каталоге, вводя текст на панели поиска. Пока пользователь вводит текст, веб-сайт использует функцию предложения индекса поиска для завершения текста. После завершения запроса отображается список книг с частью сведений. Пользователь может выбрать книгу, чтобы просмотреть все сведения, хранящиеся в индексе поиска книги.
Возможности поиска включают в себя:
- Поиск — предоставляет функции поиска для приложения.
- Предложение — предоставляет предложения по мере ввода текста пользователем в строке поиска.
- Аспекты и фильтры — предоставляет фасетную структуру навигации, которая фильтрует по автору или языку.
- Результаты с разбивкой на страницы — предоставляют элементы управления разбиением на страницы для прокрутки результатов.
- Поиск документов — выполняет поиск документа по идентификатору, чтобы получить все его содержимое на странице сведений.
Какова структура примера?
Пример кода включает следующие компоненты:
| Приложение | Цель | GitHub Репозиторий Location |
|---|---|---|
| клиент | Приложение React (уровень представления) для отображения книг с помощью поиска. Оно вызывает приложение-функцию Azure. | /search-site-functions-v4/client |
| Сервер | Приложение-функция Azure (бизнес-уровень) — вызывает API поиска ИИ Azure с помощью пакета SDK JavaScript | /search-site-functions-v4/api |
| Bulk insert | Файл JavaScript для создания индекса и добавления в него документов. | /search-website-functions-v4/bulk-insert |
Настройка среды разработки
Установите следующее программное обеспечение в локальной среде разработки.
-
- Выберите последнюю среду выполнения и версию из этого списка поддерживаемых языковых версий.
- Если на локальном компьютере установлена другая версия Node.js, рассмотрите возможность использования диспетчера версий узла (
nvm) или контейнера Docker.
Visual Studio Code со следующими расширениями:
- Статическое веб-приложение Azure
- Используйте интегрированный терминал для операций командной строки.
Необязательно:
- В этом руководстве не выполняется API-интерфейс функции Azure локально. Если вы планируете запустить его локально, необходимо установить azure-functions-core-tools глобально с помощью следующей команды Bash:
npm install -g azure-functions-core-tools@4
Разветвление и клонирование примера поиска с помощью Git
Разветвление примера репозитория очень важно для развертывания статического веб-приложения. Статическое веб-приложение определяет действия сборки и содержимое развертывания на основе собственного расположения вилки GitHub. Выполнение кода в статичном веб-приложении является удаленным, при этом статические веб-приложения считываются из кода в примере вилки.
В GitHub создайте разветвление примера репозитория.
Завершите процесс разветвления в веб-браузере с помощью учетной записи GitHub. В этом учебнике используется равилка как часть развертывания в статическом веб-приложении Azure.
В терминале Bash скачайте вилку примера приложения на локальный компьютер.
Замените
YOUR-GITHUB-ALIASпсевдонимом записи GitHub.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesВ том же терминале Bash перейдите в вилку репозитория для этого примера поиска на веб-сайте:
cd azure-search-javascript-samplesИспользуйте команду Visual Studio Code,
code .чтобы открыть вилку репозитория. Оставшиеся задачи выполняются в Visual Studio Code, если не указано иное.code .
Создайте группу ресурсов для ресурсов Azure.
В Visual Studio Code откройте панель действий и выберите значок Azure.
Войдите в Azure, если вы еще не вошли в систему.
В разделе "Ресурсы" выберите "Добавить" (+), а затем выберите "Создать группу ресурсов".
Введите имя группы ресурсов, например
cognitive-search-demo-rg.Введите регион:
- Для Node.js выберите
West US 2. Это рекомендуемый регион для предварительной версии 4 модели программирования функций Azure (PM). - Для C# и Python рекомендуется использовать следующие регионы, поддерживаемые Статические веб-приложения Azure по состоянию на этот текст:
West US 2, ,East US 2West EuropeCentral USEast Asia
- Для Node.js выберите
Используйте эту группу ресурсов для всех ресурсов, созданных во время работы с этим руководством. Группа ресурсов предоставляет логическую единицу для управления ресурсами, включая удаление их после завершения.