reactivesearch

Реактивный поиск

Библиотека компонентов пользовательского интерфейса для Elasticsearch, OpenSearch, Solr, MongoDB: доступна для React и Vue.

Узнайте, как создать пользовательский интерфейс поиска для электронной коммерции.

а) с React или б) с Vue

Используйте Searchbox, если вы создаете интерфейсы поиска для других JS-фреймворков, React Native или Flutter.

---

Посетите торговую площадку ReactiveSearch на сайте reactiveapps.io.

Шаблоны веб-дизайнера для эскизов.

Шаблоны дизайнеров iOS и Android для эскизов.

ТОС

1. Реактивный поиск: введение
2. Функции
3. Детская площадка компонентов
4. Живые примеры
5. Сравнение с другими проектами
6. Установка
7. Руководство по документации
8. Содействие
9. Другие проекты, которые могут вам понравиться

1. Реактивный поиск: введение

ReactiveSearch — это библиотека компонентов пользовательского интерфейса для React и Vue, предназначенная для работы с облаком ReactiveSearch. Он имеет более 20 компонентов пользовательского интерфейса, включая списки, диапазоны, пользовательские интерфейсы поиска, отображения результатов, ответы AI, диаграммы, а также способ перенести существующий компонент пользовательского интерфейса в библиотеку.

Компонент пользовательского интерфейса можно использовать для фильтрации или поиска по индексу. Например:

• Компонент датчика SingleList применяет фильтр точного соответствия на основе выбранного элемента.
• Компонент RangeSlider применяет запрос числового диапазона на основе значений, выбранных в пользовательском интерфейсе.
• Компонент SearchBox применяет предложения и поисковый запрос на основе поискового запроса, введенного пользователем.

Компоненты пользовательского интерфейса можно использовать вместе ( react prop позволяет настроить это на уровне каждого компонента) и визуализировать соответствующие результаты через компонент пользовательского интерфейса отображения результатов.

ReactiveSearch поддерживает следующие встроенные компоненты отображения для отображения результатов (также известных как обращения):

1. ReactiveList — ReactiveList поддерживает форматы отображения списков и карточек, а также позволяет настраиваемый рендеринг как на уровне элемента, так и на уровне компонента.
2. ReactiveMap — ReactiveMap предлагает на выбор карты Google и OpenStreetMaps для рендеринга карт.
3. AIAnswer - AIAnswer предлагает поисковую дополненную генерацию (RAG) через поисковую систему и модели OpenAI, а также
4. ReactiveChart — основанная на Apache E-Charts, ReactiveChart предлагает 5 встроенных типов диаграмм: круговые, гистограммы, гистограммы, линейные, точечные и дополнительные диаграммы в формате Apache E-Charts. В настоящее время ReactiveChart поддерживается только для React.

2. Особенности

Дизайн

• Генерация запросов компонентов пользовательского интерфейса и способность react позволяют создавать сложные пользовательские интерфейсы, в которых ряд компонентов пользовательского интерфейса могут реактивно обновляться в зависимости от взаимодействия с пользователем.
• Библиотека обрабатывает преобразование взаимодействий пользовательского интерфейса в поисковые запросы.
• Поставляется с компонентами с ограниченной областью действия и стилем с поддержкой свойств className`` and InternalClass.
• Можно использовать темы через ThemeProvider .

Простота использования

• Установка в один шаг с помощью npm i @appbaseio/reactivesearch,
• Стилизованные и ограниченные компоненты, которые можно легко расширить.
• См. стартовое приложение реактивного поиска.

? ReactiveSearch API: защитите свои поисковые запросы

Начиная с ReactiveSearch v4 (текущая основная версия), библиотека отправляет только намерение поиска, спецификация для этого находится здесь - ReactiveSearch API ref. В зависимости от выбора поисковой системы, которую вы настраиваете в облаке ReactiveSearch, DSL поискового запроса генерируется облаком ReactiveSearch. Такой подход не только более безопасен, но и позволяет перенести бизнес-логику поиска на серверную сторону.

Если вы используете ReactiveSearch v3 (последний основной выпуск), использование ReactiveSearch API поверх DSL запросов ElasticSearch является функцией согласия. Вам необходимо установить для параметра enableAppbase значение true в вашем компоненте ReactiveBase . Предполагается, что вы используете appbase.io для своего бэкэнда.

Мы рекомендуем ознакомиться с этим приложением KitchenSink, которое демонстрирует использование ReactiveSearch API для всех компонентов ReactiveSearch.

⬆ Вернуться к началу

3. Площадка компонентов

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

4. Живые демонстрации

Набор живых демонстраций, вдохновленных реальными приложениями и созданных с помощью ReactiveSearch.

Интернет

• demos/booksearch — приложение для поиска книг, основанное на наборе данных Goodbooks.
• BookSearch с Antd — демонстрация использования тем оформления Ant и компонентов пользовательского интерфейса с ReactiveSearch.
• Поиск фильмов в электронной коммерции — демо-версия пользовательского интерфейса поиска фильмов в электронной коммерции.
• Поиск на информационной панели и диаграммы — демо-версия с аутентификацией пользователя: интерфейсы входа в систему, поиска и графиков.

Вы можете проверить их все в разделе примеров на сайте.

⬆ Вернуться к началу

5. Сравнение с другими проектами

Здесь мы рассказываем, как ReactiveSearch сравнивается с другими проектами, преследующими аналогичные цели.

#	РеактивныйПоиск	Поисковый комплект	Мгновенный поиск
Бэкэнд	Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI	Любой индекс Elasticsearch, размещенный в любом кластере Elasticsearch.	Создано специально для собственной поисковой системы Algolia.
Разработка	Активно развивается и поддерживается.	Активное реагирование на проблемы, некоторые разработки и обслуживание.	Активно развивается и поддерживается.
Опыт адаптации	Приложения для начинающих, интерактивное учебное пособие в реальном времени, руководство по началу работы, игровая площадка для компонентов. Каждый компонент имеет живую рабочую демоверсию с кодами и коробкой.	Учебное пособие по началу работы, отсутствие живых демонстраций компонентов, скудные справочные спецификации для многих компонентов.	Начальные приложения, руководство по началу работы, игровая площадка компонентов.
Поддержка стилей	Стилизованные и ограниченные компоненты. Никакого внешнего импорта CSS не требуется. Богатая тематика поддерживается в качестве реквизита React.	Стили на основе CSS с использованием BEM, не ограниченные компонентами. Темы поддерживаются с помощью SCSS.	Стили на основе CSS требуют импорта внешнего стиля. Темы поддерживаются с помощью CSS.
Типы компонентов	Списки, диапазоны, поиск, даты, карты, отображение результатов. Можно использовать свои собственные компоненты пользовательского интерфейса.	Списки, Диапазоны, Поиск*, Результат*. Невозможно использовать собственные компоненты пользовательского интерфейса. (Только один компонент для поиска и результатов, что приводит к написанию большего количества кода для настройки)	Списки, Диапазон, Поиск, Результат. Можно использовать свои собственные компоненты пользовательского интерфейса.
Поддерживаемые платформы распространения	React, Vue для Интернета, React Native для мобильных устройств.	React для Интернета.	React, Vue, Angular, vanilla JS для Интернета, React Native для мобильных устройств, но последний не имеет компонентов пользовательского интерфейса.

Мы приветствуем вклад в этот раздел. Если вы создаете проект или знаете о другом проекте в аналогичной области, сообщите нам, и мы обновим сравнения.

⬆ Вернуться к началу

6. Установка

Установка ReactiveSearch — это всего лишь одна команда.

• Если вы используете реактивный поиск для React

 npm install @ appbaseio / reactivesearch

Вы можете ознакомиться с кратким руководством по использованию React здесь.

• Если вы используете реактивный поиск для Vue

 npm install @ appbaseio / reactivesearch - vue

Вы можете ознакомиться с кратким руководством по использованию Vue здесь.

7. Руководство по документации

Официальная документация библиотеки React находится по адресу docs.reactivesearch.io/docs/reactivesearch/react.

Компоненты разделены на четыре раздела:

• Компоненты пользовательского интерфейса на основе списков находятся по адресу reactivesearch/react/list.
• Компоненты пользовательского интерфейса на основе диапазона находятся в reactivesearch/react/range.
• Компоненты пользовательского интерфейса поиска находятся по адресу reactivesearch/react/search.
• Компоненты результата находятся в reactivesearch/react/result.
• Компоненты карты находятся по адресу reactivesearch/react/map.
• Компоненты диаграммы находятся по адресу reactivesearch/react/chart.

Документы для версии библиотеки Vue доступны по адресу docs.reactivesearch.io/docs/reactivesearch/vue.

⬆ Вернуться к началу

8. Вклад

Пожалуйста, ознакомьтесь с руководством по вкладам.

9. Другие проекты, которые могут вам понравиться

• API ReactiveSearch API-шлюз для ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (встроенная безопасность, функции ограничения скорости, аналитика записей и журналы запросов).

• searchbox Легкие и ориентированные на производительность библиотеки пользовательского интерфейса окна поиска для запроса и отображения результатов с помощью ReactiveSearch Cloud.

  • Ванильный JS
  • трепетать

• dejavu Elasticsearch/Просмотр и редактор данных OpenSearch

• appbase-js Если вам нужно индексировать данные в дополнение к компонентам пользовательского интерфейса.

⬆ Вернуться к началу