reactivesearch

Pesquisa reativa

Biblioteca de componentes de UI para Elasticsearch, OpenSearch, Solr, MongoDB: disponível para React e Vue

Leia como construir uma IU de pesquisa de comércio eletrônico

a.) com React, ou b.) com Vue

Confira Searchbox se você estiver criando UIs de pesquisa para outras estruturas JS, React Native ou Flutter.

---

Confira o mercado ReactiveSearch em reactiveapps.io.

Modelos de web designer para esboço.

Modelos de designer iOS e Android para esboço.

Índice

1. ReactiveSearch: introdução
2. Características
3. Parque de Componentes
4. Exemplos ao vivo
5. Comparação com outros projetos
6. Instalação
7. Manual de documentos
8. Contribuindo
9. Outros projetos que você pode gostar

1. ReactiveSearch: introdução

ReactiveSearch é uma biblioteca de componentes de UI para React e Vue, projetada para funcionar com a nuvem ReactiveSearch. Possui mais de 20 componentes de UI que consistem em listas, intervalos, UIs de pesquisa, exibições de resultados, resposta de IA, gráficos e uma maneira de trazer um componente de UI existente para a biblioteca.

Um componente de UI pode ser usado para filtrar ou pesquisar no índice. Por exemplo:

• Um componente de sensor SingleList aplica um filtro de correspondência exata com base no item selecionado.
• Um componente RangeSlider aplica uma consulta de intervalo numérico com base nos valores selecionados na IU.
• Um componente SearchBox aplica sugestões e consultas de pesquisa com base no termo de pesquisa digitado pelo usuário.

Os componentes da UI podem ser usados ​​​​juntos ( react prop permite configurar isso em um nível por componente) e renderizar os resultados correspondentes por meio de um componente da UI de exibição de resultados.

ReactiveSearch suporta os seguintes componentes de exibição integrados para exibir resultados (também conhecidos como hits):

1. ReactiveList - ReactiveList suporta formatos de exibição de lista e cartão, bem como permite renderização personalizada em nível de item e componente,
2. ReactiveMap - ReactiveMap oferece opções de Google Maps e OpenStreetMaps para renderização de mapas,
3. AIAnswer - AIAnswer oferece geração aumentada de recuperação (RAG) por meio de mecanismo de pesquisa e modelos OpenAI, e
4. ReactiveChart - Desenvolvido por Apache E-Charts, o ReactiveChart oferece 5 tipos de gráficos integrados: pizza, barra, histograma, linha, dispersão e gráficos adicionais no formato Apache E-Charts. ReactiveChart só é compatível com React no momento.

2. Recursos

Projeto

• A geração de consultas e a capacidade de react dos componentes da UI permitem a criação de UIs complexas onde vários componentes da UI podem ser atualizados de forma reativa com base na interação do usuário.
• A biblioteca lida com a transformação das interações da IU em consultas de intenção de pesquisa.
• Vem com componentes com escopo e estilo com suporte className`` and innerClass`.
• Pode ser tema via ThemeProvider .

Facilidade de uso

• Instalação em uma etapa com npm i @appbaseio/reactivesearch,
• Componentes estilizados e com escopo definido que podem ser facilmente estendidos,
• Veja o aplicativo inicial de pesquisa reativa.

? API ReactiveSearch: proteja suas consultas de pesquisa

Iniciando o ReactiveSearch v4 (versão principal atual), a biblioteca envia apenas a intenção de pesquisa, a especificação para isso está aqui - API ReactiveSearch ref. Com base na escolha do mecanismo de pesquisa configurado na nuvem ReactiveSearch, a consulta de pesquisa DSL é então gerada pela nuvem ReactiveSearch. Essa abordagem é mais segura e também permite transferir a lógica de negócios de pesquisa no lado do servidor.

Se você estiver usando o ReactiveSearch v3 (última versão principal), o uso da API ReactiveSearch sobre a DSL de consulta do ElasticSearch é um recurso opcional. Você precisa definir a propriedade enableAppbase como true em seu componente ReactiveBase . Isso pressupõe que você esteja usando appbase.io para seu back-end.

Recomendamos verificar este aplicativo KitchenSink que demonstra o uso da ReactiveSearch API para todos os componentes do ReactiveSearch.

⬆ Voltar ao topo

3. Parque de Componentes

Experimente as histórias do playground ao vivo no playground. Procure a seção de botões na parte do playground das histórias para ajustar cada acessório e ver os efeitos.

4. Demonstrações ao vivo

Um conjunto de demonstrações ao vivo inspiradas em aplicativos do mundo real, desenvolvidas com ReactiveSearch.

Rede

• demos/booksearch - Um aplicativo de busca de livros baseado em um conjunto de dados goodbooks.
• BookSearch com Antd - Uma demonstração mostrando o uso de temas de design Ant e componentes de UI com ReactiveSearch
• Pesquisa de filmes de comércio eletrônico – uma demonstração mostrando uma interface de pesquisa de filmes de comércio eletrônico
• Pesquisa e gráficos do painel - Uma demonstração com autenticação do usuário: UIs de login, pesquisa e gráficos.

Você pode conferir todos eles na seção de exemplos do site.

⬆ Voltar ao topo

5. Comparação com outros projetos

Aqui, compartilhamos como ReactiveSearch se compara a outros projetos que têm objetivos semelhantes.

#	Pesquisa reativa	Kit de pesquisa	Pesquisa Instantânea
Back-end	Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI	Qualquer índice do Elasticsearch hospedado em qualquer cluster do Elasticsearch.	Feito sob medida para Algolia, um mecanismo de busca proprietário.
Desenvolvimento	Ativamente desenvolvido e mantido.	Respostas ativas a problemas, algum desenvolvimento e manutenção.	Ativamente desenvolvido e mantido.
Experiência de integração	Aplicativos iniciais, tutorial interativo ao vivo, guia de primeiros passos, playground de componentes, cada componente tem uma demonstração de trabalho ao vivo com códigos e caixa.	Tutorial de introdução, sem demonstrações de componentes ao vivo, especificações de referência esparsas para muitos componentes.	Aplicativos iniciais, guia de primeiros passos, playground de componentes.
Suporte de estilo	Componentes estilizados e com escopo definido. Nenhuma importação externa de CSS é necessária. Temas ricos suportados como acessórios React.	Estilos baseados em CSS com BEM, sem escopo para componentes. Temas suportados com SCSS.	Estilos baseados em CSS, requerem importação de estilo externo. Temas suportados pela manipulação de CSS.
Tipos de componentes	Listas, intervalos, pesquisa, datas, mapas, exibições de resultados. Pode usar seus próprios componentes de UI.	Listas, Intervalos, Pesquisa*, Resultado*. Não é possível usar seus próprios componentes de UI. (Apenas um componente para Pesquisa e Resultado, resultando em mais código a ser escrito para personalização)	Listas, intervalo, pesquisa, resultado. Pode usar seus próprios componentes de UI.
Plataformas de distribuição suportadas	React, Vue para Web, React Native para dispositivos móveis.	Reaja para a Web.	React, Vue, Angular, vanilla JS para Web, React Native para dispositivos móveis, mas o último não possui componentes de UI.

Aceitamos contribuições para esta seção. Se você está construindo um projeto ou conhece outro projeto que esteja no mesmo espaço, avise-nos e atualizaremos as comparações.

⬆ Voltar ao topo

6. Instalação

Instalar o ReactiveSearch é apenas um comando.

• Se você estiver usando reactivesearch para React

 npm install @ appbaseio / reactivesearch

Você pode conferir o guia de início rápido do React aqui.

• Se você estiver usando reactivesearch para Vue

 npm install @ appbaseio / reactivesearch - vue

Você pode conferir o guia de início rápido do Vue aqui.

7. Manual de Documentos

Os documentos oficiais da biblioteca React estão em docs.reactivesearch.io/docs/reactivesearch/react.

Os componentes são divididos em quatro seções:

• Os componentes da UI baseados em lista estão em reactivesearch/react/list.
• Os componentes da UI baseados em intervalo estão em reactivesearch/react/range.
• Os componentes da UI de pesquisa estão em reactivesearch/react/search.
• Os componentes do resultado estão em reactivesearch/react/result.
• Os componentes do mapa estão em reactivesearch/react/map.
• Os componentes do gráfico estão em reactivesearch/react/chart.

A versão Docs for Vue da biblioteca está disponível em docs.reactivesearch.io/docs/reactivesearch/vue.

⬆ Voltar ao topo

8. Contribuindo

Por favor, verifique o guia de contribuição.

9. Outros projetos de que você pode gostar

• ReactiveSearch API API Gateway para ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (segurança pronta para uso, recursos de limite de taxa, análise de registros e logs de solicitação).

• searchbox Uma biblioteca de UI de caixa de pesquisa leve e focada no desempenho para consultar e exibir resultados com ReactiveSearch Cloud.

  • Baunilha JS
  • Vibração

• dejavu Visualizador e editor de dados Elasticsearch / OpenSearch

• appbase-js Para quando você precisar indexar dados além dos componentes da UI

⬆ Voltar ao topo