Привет, ребята, сегодня мы поговорим о замечательном сервисе поиска и рекомендаций Algolia. Algolia предоставляет разработчикам услуги поиска и рекомендаций, необходимые им для создания опыта мирового уровня.

Итак, мы разделим ваше обсуждение на семь частей:

1. Что такое Алголия?

2. Как передавать данные в Алголии с помощью API?

3. Как реализовать поиск в Алголии?

4. Как реализовать фильтрацию в Алголии?

5. Как реализовать сортировку в Алголии?

6. Демо

7. Заключение

Итак, начнем…..

2. Как передавать данные в Алголии с помощью API?

Algolia — это размещенная поисковая система, которая предлагает полнотекстовый, числовой и фасетный поиск. Мощный API Algolia позволяет нам быстро и легко реализовать поиск на наших веб-сайтах и ​​в мобильных приложениях. В Algolia также есть средства анализа, способные выдавать результаты в реальном времени с первого нажатия клавиши.

3. Как реализовать поиск в Алголии?

Algolia предоставляет несколько способов отправки данных на панель управления портала. Данные могут быть отправлены вручную или с помощью API. В нашей демонстрации мы увидим, как это делается через API. Алголия использовалась для хранения данных в коллекции под названием index. Мы также можем реплицировать индекс, этот реплицированный индекс в основном используется для сортировки. В Algolia есть встроенная функция replaceAllObjects(), которая используется для передачи всех данных из json или любого другого API в algolia. Мы увидим, как эта функция работает в нашей демонстрации.

index.replaceAllObjects(array objects)

index.replaceAllObjects(array objects, {
    // All the following parameters are optional
    safe: bool,
    // + any requestOptions
})

4. Как реализовать фильтрацию в Алголии?

Чтобы реализовать поиск в Algolia, мы должны определить доступные для поиска атрибуты на нашем портале Algolia, например, всякий раз, когда пользователь вводит что-то в строку поиска, результат поиска должен соответствовать значению доступных для поиска атрибутов. Мы также можем отдать предпочтение, если хотим добавить на портал несколько доступных для поиска атрибутов. Существует два способа определить доступные для поиска атрибуты в Algolia: один из них — добавление доступных для поиска атрибутов вручную на портале или использование функции setSettings(), чтобы сделать то же самое через API.

index.setSettings({ 'customRanking': ['desc(followers)'] }, {
  forwardToReplicas: true
}).then(() => {
  // done
});

5. Как реализовать сортировку в Алголии?

В Algolia фильтрация осуществляется по фасетам. Чтобы позволить Algolia выполнять фасетирование, мы должны определить атрибуты для фасетирования на портале Algolia. Мы также можем использовать функцию setSettings(), чтобы определить наши атрибуты для огранки.

index.setSettings({
  attributesForFaceting: ['genre', 'author']
});

6. Демо

Итак, для реализации сортировки, такой как сортировка по цене, сортировка по имени в Алголии, мы должны создать копию родительского индекса, например, скажем, у нас есть индекс для продукта с именем productsIndices, мы хотим выполнить сортировку по цене и по имени, Итак что мы можем сделать, мы можем создать два индекса реплики из productIndices, один для сортировки по цене, а другой для сортировки по имени. И мы можем дать собственное ранжирование на вкладке Рейтинг и сортировка в Конфигурации на нашей панели инструментов, мы увидим их позже. Просто нам нужно определить, какой параметр, скажем, цена или имя. в каком порядке (по возрастанию или по убыванию). Итак, что нам нужно сделать, мы будем извлекать данные из этого конкретного индекса, например, когда параметры сортировки не выбраны, мы будем брать данные из productIndices, если теперь пользователь нажимает на сортировку по цене, мы будем извлекать данные из этой конкретной реплики productIndices, которая указано для обработки сортировки цен.

Теперь достаточно теории, чтобы прояснить ситуацию, мы создадим небольшое приложение, которое выполняет отправку, поиск, сортировку и фильтрацию с использованием Algolia.

Итак, приступим…

npx create-react-app ‹Название проекта›

Теперь пришло время демонстрации, давайте начнем кодировать вместе, поэтому откройте ваши vsts, мы сначала создадим наш самый простой шаблон реакции. Так что мы должны бежать

7. Заключение

как только это будет сделано, у нас будет простой шаблон реакции, теперь нам нужно сделать cd ‹tab› enter, а затем запустить npm run start, чтобы запустить наше приложение на локальном хосте 3000.

Итак, чтобы начать с algolia, мы должны установить algolia, поэтому для этого запустите:

npm и алголия

Итак, теперь наш базовый шаблон запущен и работает, теперь давайте посмотрим на структуру папок нашей базы кода:

В основном эта кодовая база такая же, как и в шаблоне реакции, единственное изменение, которое мы сделали, это добавление папки адаптера, в которой находятся файлы адаптера. algolia.adapter.js содержит функции для получения данных из algolia. algoliaIndexManager.js имеет объект класса algolia, в котором мы определили несколько переменных и методов. algoliaClient.js определяет клиент algolia, который мы будем использовать для извлечения данных, а pushingdata.js имеет функцию для отправки данных в algolia. Давайте сначала выполним настройку для Algolia на нашем портале algolia:

Итак, мы сначала перейдем к этому URL:



Поиск и обнаружение сайтов на основе ИИ
Безопасность Мы стремимся предоставить нашим клиентам высокобезопасную и соответствующую требованиям среду. Надежный Ведущий в отрасли…www.algolia.com



Здесь мы должны войти в систему, мы можем использовать бесплатную пробную версию для целей обучения.

Когда мы закончим вход в систему, будет уже создано пространство по умолчанию для использования. Мы можем использовать тот же файл .

Итак, теперь, если мы прокрутим вниз, мы увидим там Настройки внизу слева. Если мы нажмем на нее, мы получим опцию Ключи API, где мы получим все ключи API, необходимые для работы нашего приложения.

Нам нужны два ключа API администратора Api Keys и идентификатор приложения. Теперь давайте поместим их в нашу кодовую базу и начнем создавать наш клиент, AlgoliaClient.js.

В AlgoliaClient.js мы определили функцию getWriteClient(), в которой мы объявляем наш клиент Algolia, а затем возвращаем его. Наконец, мы экспортируем getWriteClient, который возвращает клиент algolia.

Теперь давайте посмотрим на файл datapushing.js, в котором есть скрипты для отправки данных в algolia из нашего data.js.

Теперь давайте посмотрим datapushing.js:

В datapushing.js мы отправляем данные на панель инструментов algolia, в getFieldObject() мы создаем пару ключ-значение, которую мы отправляем в algolia. push() отправляет данные в алголию, в этой функции push мы проверяем, если data.length ›0, мы объявляем переменную pushData, которая будет хранить отправленные данные. Затем мы импортируем методы replaceAll, setSettings и createReplica из IndexManager.js, который определяет объект класса algolia. Затем мы сопоставляем данные и для каждого узла помещаем узел в массив pushData, мы вызываем функцию replaceAll с pushData в качестве аргумента. Точно так же мы вызываем функцию setSettings с массивом, имеющим «имя» в качестве аргумента, наконец, мы вызываем функцию createReplica с массивом, имеющим значения 'Demo-Index-desc (название)' и 'Demo-Index-desc(price)'. Мы рассмотрим эти функции в algoliaIndexManager.js.

В algoliaIndexManager.js мы определяем наш объект класса algolia, мы определяем переменные и методы, такие как name, index, replaceAll() , setSettings() и createReplica(). В нашем классе IndexManger мыустанавливаем name как имя, которое будет передано в качестве аргумента, затем мы устанавливаем индекс, вызывая getWriteClient() с this.name , это имя будет именем индекса, который мы хотим создать. Мы определяем replaceAll(), эта функция фактически будет хранить записи в нашем индексе, this.index имеет текущий индекс, поэтому мы вызываем встроенную функцию algolia replaceAllObjects с параметрами данных и конфигурации в качестве аргумента метода.

В setSettings() мы фактически устанавливаем доступные для поиска атрибуты нашего индекса, используя встроенную функцию algolia setSettings.

Точно так же createReplica() используется для создания реплики нашего индекса (эти реплики используются для сортировки). Итак, мы создали две реплики из нашего индекса (Demo-Index) , 'Demo-Index-desc(name)' и 'Demo-Index-desc( цена) '.

Обратите внимание, что для отправки данных в алголию нам нужно перейти по соответствующему пути, где находится файл, и запустить node datapushing.js с нашего терминала. Как только вы запустите это и все пойдет хорошо, вы увидите записи, поступающие на панель управления портала Algolia.

Теперь, если вы видите, есть две копии нашего индекса Demo-Index, Demo-Index-desc(name) и Demo-Index-desc(price) . Demo-Index-desc(name) будет иметь данные, отсортированные по имени , тогда как Demo-Index-desc(price) будет иметь данные, отсортированные по цене. Поэтому для этого нам нужно перейти в Конфигурация → Ранжирование и сортировка и добавить собственное ранжирование следующим образом:

Теперь давайте посмотрим на App.js:

Итак, наконец, мы просто сопоставляем наши данные и отображаем наши карточки продуктов с изображением продукта, названием и ценой. Функции для получения данных из algolia определены в algolia.adapter.js, давайте посмотрим на это.

Итак, в algolia.adapter.js у нас есть две функции: getAlgoliaResults() и getAlgoliaSearchResults(). getAlgoliaResults() используется для выборки данных в соответствии с объектом запроса (фасетирование) и именем (сортировка), переданными в качестве аргумента, поэтому мы сначала определяем имя индекса, который будем использовать, в соответствии с вариант сортировки, выбранный пользователем (сортировка), затем мы инициируем наш индекс с этим именем и вызываем встроенную функцию search algolia с телом запроса, поступающим в качестве аргумента (фасетирование), чтобы получить отфильтрованные данные . getAlgoliaSearchResults() используется для обработки функции поиска нашего приложения, поэтому мы просто вызываем ту же встроенную функцию search со строкой запроса, а не оставляем строку пустой. . Итак, мы сделали обход всей базы кода. Теперь давайте посмотрим на результат:

О, хорошо, это было длинно, поэтому в этой статье мы обсудили основные понятия того, как выполнять функции поиска, сортировки и фильтрации с помощью Algolia. Но я предлагаю сначала ознакомиться с документацией по algolia, прежде чем начать работу с ней, она очень приятная, полезная и описательная:

В App.js мы определяем нашу структуру dom нашего приложения, мы будем поддерживать простоту вашего приложения. Наше приложение будет иметь страницу со списком продуктов, на которой перечислены все продукты. Мы можем искать продукт по его названию, мы также можем фильтровать продукты по категории продуктов, а также мы можем сортировать продукты по цене и по названию. Итак, мы импортировали getAlgoliaResults() и getAlgoliaSearchResults() из algolia.adapter.js, эти две функции фактически извлекают данные из Algolia. Внутри нашей функции приложения мы определяем три состояния: data, loading, inputQuery. данные представляют данные о продукте, которые мы будем отображать на странице со списком, загрузка представляет логические данные, которые указывают, когда страница загружает или извлекает данные из algolia и inputQuery представляет запрос, который мы ищем в поле поиска. Внутри useEffect() мы можем вызвать функцию loadData(), где мы извлекаем исходные данные из algolia, которые мы будем отображать при первой загрузке. Итак, сначала мы устанавливаем загрузку как true, затем мы извлекаем данные из algolia, вызывая функцию getAlgoliaResults(), как только мы получаем данные, которые мы используем setData для установки данных состояния, затем мы устанавливаем загрузку как false . Теперь давайте перейдем к разделу возврата, чтобы увидеть структуру dom, мы добавили заголовок, затем мы разместили поле ввода, которое будет нашим окном поиска. Поэтому всякий раз, когда пользователь вводит что-то в поле ввода при его изменении, мы вызываем функцию handleInputChange(). В handleInputChange() мы устанавливаем значение inputQuery вместе с запросом. При нажатии кнопки «Поиск» мы вызываем searchResult(). В searchResult() мы получаем данные в соответствии с запросом (inputQuery), который мы передаем в поле поиска. Затем у нас есть несколько вариантов фильтрации, таких как рубашка, кроссовки, сумка, часы, кефия и все (для всех продуктов), мы сохранили кнопки для каждой категории продуктов для выполнения фильтрации, при нажатии этих кнопок мы вызываем SelectProduct1() путем передачи имени конкретной категории в качестве аргумента. В SelectProduct1() мы выполняем фасетирование для фильтрации. Таким образом, мы передаем два параметра для выполнения фасетирования, один из них – массив фасетов, содержащий параметры, которые будут рассматриваться как фасеты. и facetFiltersдругой массив, который содержит категорию аспектов, в соответствии с которой должна выполняться фильтрация, например, facetFilters:[facetCollection:watch] означает показывать те продукты, которые имеют просмотр в массиве facetCollection. Мы также реализовали функцию сортировки, в которой мы сортируем данные по названию и цене продукта. Функция handleSort() обрабатывает функцию сортировки, внутри функции handleSort() мы вызываем функцию getAlgoliaResults, чтобы получить данные в соответствии с именем, которое мы передаются в качестве аргумента, например, если имя является ценой, мы будем извлекать данные из этого конкретного индекса, содержащего данные о продуктах, отсортированные в соответствии с их ценой.

«Документация по Algolia
Algolia — Документация по API поиска, руководства, учебные пособия и часто задаваемые вопросыwww.algolia.com»



Я прилагаю ссылку на код GitHub в качестве ссылки на эту статью:



«GitHub — Yudhajitadhikary/Algolia-Blog: это базовая реализация algolia с поиском…
Этот проект был запущен с помощью приложения Create React. В каталоге проекта вы можете запустить: Запускает приложение в…github.com»



СЧАСТЛИВОГО КОДИРОВАНИЯ….:)



Начнем с Алголии…