reactivesearch

Búsqueda reactiva

Biblioteca de componentes de UI para Elasticsearch, OpenSearch, Solr, MongoDB: disponible para React y Vue

Lea cómo crear una interfaz de usuario de búsqueda de comercio electrónico

a.) con React, o b.) con Vue

Consulte Searchbox si está creando interfaces de usuario de búsqueda para otros marcos JS, React Native o Flutter.

---

Consulte el mercado de ReactiveSearch en reactiveapps.io.

Plantillas de diseñador web para bocetos.

Plantillas de diseñador de iOS y Android para bocetos.

TOC

1. Búsqueda reactiva: introducción
2. Características
3. Patio de juegos de componentes
4. Ejemplos en vivo
5. Comparación con otros proyectos
6. Instalación
7. Manual de documentos
8. Contribuyendo
9. Otros proyectos que te podrían gustar

1. Búsqueda reactiva: introducción

ReactiveSearch es una biblioteca de componentes de interfaz de usuario para React y Vue, diseñada para funcionar con la nube ReactiveSearch. Tiene más de 20 componentes de UI que consisten en listas, rangos, UI de búsqueda, visualizaciones de resultados, respuesta AI, gráficos y una forma de incorporar un componente de UI existente a la biblioteca.

Se puede utilizar un componente de interfaz de usuario para filtrar o buscar en el índice. Por ejemplo:

• Un componente de sensor SingleList aplica un filtro de coincidencia exacta según el elemento seleccionado.
• Un componente RangeSlider aplica una consulta de rango numérico basada en los valores seleccionados en la interfaz de usuario.
• Un componente SearchBox aplica sugerencias y consultas de búsqueda basadas en el término de búsqueda escrito por el usuario.

Los componentes de la interfaz de usuario se pueden usar juntos (la propiedad react permite configurar esto en un nivel por componente) y representar los resultados coincidentes a través de un componente de la interfaz de usuario de visualización de resultados.

ReactiveSearch admite los siguientes componentes de visualización integrados para mostrar resultados (también conocidos como visitas):

1. ReactiveList: ReactiveList admite formatos de visualización de listas y tarjetas, además de permitir una representación personalizada tanto a nivel de elemento como de componente.
2. ReactiveMap: ReactiveMap ofrece la opción de Google Maps y OpenStreetMaps para la representación de mapas.
3. AIAnswer: AIAnswer ofrece generación aumentada de recuperación (RAG) a través de un motor de búsqueda y modelos OpenAI, y
4. ReactiveChart: impulsado por Apache E-Charts, ReactiveChart ofrece 5 tipos de gráficos integrados: circular, de barras, de histograma, de líneas, de dispersión y gráficos adicionales en el formato Apache E-Charts. ReactiveChart solo es compatible con React en este momento.

2. Características

Diseño

• La generación de consultas y la capacidad de react de los componentes de la interfaz de usuario permiten crear interfaces de usuario complejas en las que varios componentes de la interfaz de usuario pueden actualizarse reactivamente en función de la interacción del usuario.
• La biblioteca maneja la transformación de las interacciones de la interfaz de usuario en consultas de intención de búsqueda.
• Viene con componentes con alcance y estilo con soporte de accesorios className`` and internalClass`.
• Se puede tematizar a través de ThemeProvider .

Facilidad de uso

• Instalación en un solo paso con npm i @appbaseio/reactivesearch,
• Componentes con estilo y alcance que se pueden ampliar fácilmente,
• Consulte la aplicación de inicio de búsqueda reactiva.

? API ReactiveSearch: proteja sus consultas de búsqueda

Al iniciar ReactiveSearch v4 (versión principal actual), la biblioteca solo envía la intención de búsqueda, la especificación para esto está aquí: referencia de API de ReactiveSearch. Según la elección del motor de búsqueda que configure en la nube de ReactiveSearch, la consulta de búsqueda DSL es generada por la nube de ReactiveSearch. Este enfoque es más seguro y permite transferir la lógica empresarial de búsqueda en el lado del servidor.

Si está utilizando ReactiveSearch v3 (última versión principal), el uso de la API de ReactiveSearch a través del DSL de consulta de ElasticSearch es una función opcional. Debe configurar la propiedad enableAppbase como true en su componente ReactiveBase . Esto supone que estás utilizando appbase.io para tu backend.

Recomendamos consultar esta aplicación KitchenSink que demuestra el uso de la ReactiveSearch API para todos los componentes de ReactiveSearch.

⬆ Volver arriba

3. Patio de juegos de componentes

Pruebe las historias del patio de recreo del componente en vivo en el patio de recreo. Busque la sección de perillas en la parte del patio de juegos de las historias para modificar cada accesorio y ver los efectos.

4. Demostraciones en vivo

Un conjunto de demostraciones en vivo inspiradas en aplicaciones del mundo real, creadas con ReactiveSearch.

Web

• demos/booksearch: una aplicación de búsqueda de libros basada en un conjunto de datos de goodbooks.
• BookSearch con Antd: una demostración que muestra el uso de la temática y los componentes de la interfaz de usuario de Ant Design con ReactiveSearch
• Búsqueda de películas de comercio electrónico: una demostración que muestra una interfaz de usuario de búsqueda de películas de comercio electrónico
• Búsqueda en el panel y gráficos: una demostración con autenticación de usuario: UI de inicio de sesión, búsqueda y gráficos.

Puede consultarlos todos en la sección de ejemplos del sitio web.

⬆ Volver arriba

5. Comparación con otros proyectos

Aquí compartimos cómo se compara ReactiveSearch con otros proyectos que tienen objetivos similares.

#	Búsqueda reactiva	kit de búsqueda	Búsqueda instantánea
backend	Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI	Cualquier índice de Elasticsearch alojado en cualquier clúster de Elasticsearch.	Diseñado a medida para Algolia, un motor de búsqueda propietario.
Desarrollo	Desarrollado y mantenido activamente.	Respuestas activas a problemas, algo de desarrollo y mantenimiento.	Desarrollado y mantenido activamente.
Experiencia de incorporación	Aplicaciones de inicio, tutorial interactivo en vivo, guía de inicio, área de juegos de componentes, cada componente tiene una demostración de trabajo en vivo con codesandbox.	Tutorial de introducción, sin demostraciones de componentes en vivo, especificaciones de referencia escasas para muchos componentes.	Aplicaciones de inicio, guía de introducción, área de juegos de componentes.
Soporte de estilo	Componentes con estilo y alcance. No se requiere importación de CSS externo. Temas ricos compatibles como accesorios de React.	Estilos basados ​​en CSS con BEM, sin ámbito de componentes. Tematización soportada con SCSS.	Estilos basados ​​en CSS, requieren importación de estilos externos. Tematización apoyada mediante la manipulación de CSS.
Tipos de componentes	Listas, rangos, búsqueda, fechas, mapas, visualización de resultados. Puede utilizar sus propios componentes de interfaz de usuario.	Listas, Rangos, Búsqueda*, Resultado*. No puedes usar tus propios componentes de UI. (Solo un componente para Búsqueda y Resultado, lo que da como resultado que se escriba más código para personalizarlo)	Listas, Rango, Búsqueda, Resultado. Puede utilizar sus propios componentes de interfaz de usuario.
Plataformas de distribución compatibles	React, Vue para Web, React Native para dispositivos móviles.	Reaccionar para Web.	React, Vue, Angular, Vanilla JS para Web, React Native para dispositivos móviles, pero este último no tiene componentes de interfaz de usuario.

Agradecemos las contribuciones a esta sección. Si está construyendo un proyecto o conoce otro proyecto que se encuentra en el espacio similar, háganoslo saber y actualizaremos las comparaciones.

⬆ Volver arriba

6. Instalación

Instalar ReactiveSearch es solo un comando.

• Si estás utilizando la búsqueda reactiva para React

 npm install @ appbaseio / reactivesearch

Puede consultar la guía de inicio rápido con React aquí.

• Si estás utilizando la búsqueda reactiva para Vue

 npm install @ appbaseio / reactivesearch - vue

Puede consultar la guía de inicio rápido con Vue aquí.

7. Manual de documentos

Los documentos oficiales de la biblioteca React se encuentran en docs.reactivesearch.io/docs/reactivesearch/react.

Los componentes se dividen en cuatro secciones:

• Los componentes de la interfaz de usuario basados ​​en listas se encuentran en reactivesearch/react/list.
• Los componentes de la interfaz de usuario basados ​​en rango se encuentran en reactivesearch/react/range.
• Los componentes de la interfaz de usuario de búsqueda se encuentran en reactivesearch/react/search.
• Los componentes del resultado están en reactivesearch/react/result.
• Los componentes del mapa están en reactivesearch/react/map.
• Los componentes del gráfico están en reactivasearch/react/chart.

La versión Docs for Vue de la biblioteca está disponible en docs.reactivesearch.io/docs/reactivesearch/vue.

⬆ Volver arriba

8. Contribuyendo

Por favor consulte la guía de contribuciones.

9. Otros proyectos que te podrían gustar

• API ReactiveSearch API Gateway para ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (seguridad lista para usar, funciones de límite de velocidad, análisis de registros y registros de solicitudes).

• searchbox Bibliotecas de interfaz de usuario de cuadro de búsqueda ligeras y centradas en el rendimiento para consultar y mostrar resultados con ReactiveSearch Cloud.

  • vainilla js
  • Aleteo

• dejavu Elasticsearch / OpenSearch visor y editor de datos

• appbase-js Para cuando necesita indexar datos además de los componentes de la interfaz de usuario

⬆ Volver arriba