reactivesearch

Reaktive Suche

UI-Komponentenbibliothek für Elasticsearch, OpenSearch, Solr, MongoDB: Verfügbar für React und Vue

Lesen Sie, wie Sie eine Benutzeroberfläche für die E-Commerce-Suche erstellen

a.) mit React, oder b.) mit Vue

Schauen Sie sich Searchbox an, wenn Sie Such-UIs für andere JS-Frameworks, React Native oder Flutter erstellen.

---

Schauen Sie sich den ReactiveSearch-Marktplatz unter reactiveapps.io an.

Webdesigner-Vorlagen für Skizzen.

iOS- und Android-Designervorlagen für Skizzen.

Inhaltsverzeichnis

1. ReactiveSearch: Einführung
2. Merkmale
3. Komponentenspielplatz
4. Live-Beispiele
5. Vergleich mit anderen Projekten
6. Installation
7. Dokumentationshandbuch
8. Mitwirken
9. Andere Projekte, die Ihnen gefallen könnten

1. ReactiveSearch: Einführung

ReactiveSearch ist eine UI-Komponentenbibliothek für React und Vue, die für die Verwendung mit der ReactiveSearch-Cloud entwickelt wurde. Es verfügt über mehr als 20 UI-Komponenten, bestehend aus Listen, Bereichen, Such-UIs, Ergebnisanzeigen, KI-Antworten, Diagrammen und einer Möglichkeit, eine vorhandene UI-Komponente in die Bibliothek zu integrieren.

Eine UI-Komponente kann zum Filtern oder Suchen im Index verwendet werden. Zum Beispiel:

• Eine SingleList Sensorkomponente wendet einen exakten Übereinstimmungsfilter basierend auf dem ausgewählten Element an.
• Eine RangeSlider -Komponente wendet eine numerische Bereichsabfrage basierend auf den auf der Benutzeroberfläche ausgewählten Werten an.
• Eine SearchBox Komponente wendet Vorschläge und Suchabfragen basierend auf dem vom Benutzer eingegebenen Suchbegriff an.

UI-Komponenten können zusammen verwendet werden ( react Prop ermöglicht die Konfiguration auf Komponentenebene) und rendern die passenden Ergebnisse über eine Ergebnisanzeige-UI-Komponente.

ReactiveSearch unterstützt die folgenden integrierten Anzeigekomponenten zur Anzeige von Ergebnissen (auch Treffern genannt):

1. ReactiveList – ReactiveList unterstützt Listen- und Kartenanzeigeformate und ermöglicht ein benutzerdefiniertes Rendering sowohl auf Element- als auch auf Komponentenebene.
2. ReactiveMap – ReactiveMap bietet eine Auswahl an Google Maps und OpenStreetMaps für die Kartendarstellung.
3. AIAnswer – AIAnswer bietet Retrieval Augmented Generation (RAG) über Suchmaschinen und OpenAI-Modelle an
4. ReactiveChart – Unterstützt durch Apache E-Charts bietet ReactiveChart fünf integrierte Diagrammtypen: Kreis-, Balken-, Histogramm-, Linien-, Streudiagramme und zusätzliche Diagramme im Apache E-Charts-Format. ReactiveChart wird derzeit nur für React unterstützt.

2. Funktionen

Design

• Die Abfragegenerierung und react der UI-Komponenten ermöglicht die Erstellung komplexer Benutzeroberflächen, bei denen eine Reihe von UI-Komponenten basierend auf der Benutzerinteraktion reaktiv aktualisiert werden können.
• Die Bibliothek übernimmt die Umwandlung der UI-Interaktionen in Suchabsichtsabfragen.
• Enthält bereichsbezogene und gestaltete Komponenten mit Unterstützung für className`` and „innerClass“.
• Kann über ThemeProvider thematisiert werden.

Benutzerfreundlichkeit

• Einstufige Installation mit npm i @appbaseio/reactivesearch,
• Gestylte und dimensionierte Komponenten, die leicht erweitert werden können,
• Sehen Sie sich die ReactiveSearch-Starter-App an.

? ReactiveSearch API: Sichern Sie Ihre Suchanfragen

Ab ReactiveSearch v4 (aktuelle Hauptversion) sendet die Bibliothek nur die Suchabsicht. Die Spezifikation hierfür finden Sie hier – ReactiveSearch-API-Referenz. Basierend auf der Auswahl der Suchmaschine, die Sie in der ReactiveSearch-Cloud konfigurieren, wird die Suchabfrage-DSL dann von der ReactiveSearch-Cloud generiert. Dieser Ansatz ist sowohl sicherer als auch ermöglicht die Übertragung der Suchgeschäftslogik auf die Serverseite.

Wenn Sie ReactiveSearch v3 (letzte Hauptversion) verwenden, ist die Verwendung der ReactiveSearch-API über die Abfrage-DSL von ElasticSearch eine Opt-in-Funktion. Sie müssen die Eigenschaft enableAppbase in Ihrer ReactiveBase Komponente auf true setzen. Dies setzt voraus, dass Sie appbase.io für Ihr Backend verwenden.

Wir empfehlen, sich diese KitchenSink-App anzusehen, die die Verwendung der ReactiveSearch API für alle ReactiveSearch-Komponenten demonstriert.

⬆ Zurück nach oben

3. Komponentenspielplatz

Probieren Sie die Live-Komponenten-Spielplatzgeschichten auf dem Spielplatz aus. Halten Sie Ausschau nach dem Abschnitt mit den Knöpfen im Spielplatzteil der Geschichten, um jede Requisite zu optimieren und die Auswirkungen zu sehen.

4. Live-Demos

Eine Reihe von Live-Demos, inspiriert von realen Apps, erstellt mit ReactiveSearch.

Web

• demos/booksearch – Eine Buchsuch-App basierend auf einem Goodbooks-Datensatz.
• BookSearch mit Antd – Eine Demo, die die Verwendung der Design- und UI-Komponenten von Ant Design mit ReactiveSearch zeigt
• E-Commerce-Filmsuche – Eine Demo, die eine Benutzeroberfläche für die E-Commerce-Filmsuche zeigt
• Dashboard-Suche und Diagramme – Eine Demo mit Benutzerauthentifizierung: Benutzeroberflächen für Anmeldung, Suche und Diagramme.

Sie können sie alle im Beispielbereich der Website überprüfen.

⬆ Zurück nach oben

5. Vergleich mit anderen Projekten

Hier teilen wir, wie ReactiveSearch im Vergleich zu anderen Projekten mit ähnlichen Zielen abschneidet.

#	ReactiveSearch	SearchKit	InstantSearch
Backend	Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI	Jeder Elasticsearch-Index, der auf einem beliebigen Elasticsearch-Cluster gehostet wird.	Speziell entwickelt für Algolia, eine proprietäre Suchmaschine.
Entwicklung	Aktiv weiterentwickelt und gepflegt.	Aktive Problembeantwortung, etwas Entwicklung und Wartung.	Aktiv weiterentwickelt und gepflegt.
Onboarding-Erfahrung	Starter-Apps, interaktives Live-Tutorial, Leitfaden für die ersten Schritte, Komponentenspielplatz, jede Komponente verfügt über eine Live-Arbeitsdemo mit Codesandbox.	Tutorial zum Einstieg, keine Live-Komponentendemos, spärliche Referenzspezifikationen für viele Komponenten.	Starter-Apps, Leitfaden für die ersten Schritte, Komponentenspielplatz.
Styling-Unterstützung	Gestylte und bereichsbezogene Komponenten. Kein externer CSS-Import erforderlich. Umfangreiches Theming wird als React-Requisiten unterstützt.	CSS-basierte Stile mit BEM, nicht auf Komponenten beschränkt. Theming wird mit SCSS unterstützt.	CSS-basierte Stile erfordern einen externen Stilimport. Theming wird durch die Manipulation von CSS unterstützt.
Arten von Komponenten	Listen, Bereiche, Suche, Daten, Karten, Ergebnisanzeigen. Kann Ihre eigenen UI-Komponenten verwenden.	Listen, Bereiche, Suche*, Ergebnis*. Sie können Ihre eigenen UI-Komponenten nicht verwenden. (Nur eine Komponente für Suche und Ergebnis, was dazu führt, dass mehr Code für die Anpassbarkeit geschrieben werden muss)	Listen, Bereich, Suche, Ergebnis. Kann Ihre eigenen UI-Komponenten verwenden.
Unterstützte Vertriebsplattformen	React, Vue für Web, React Native für Mobilgeräte.	Reagieren Sie für das Web.	React, Vue, Angular, Vanilla JS für Web, React Native für Mobilgeräte, letzteres verfügt jedoch über keine UI-Komponenten.

Wir freuen uns über Beiträge zu diesem Abschnitt. Wenn Sie ein Projekt erstellen oder ein anderes Projekt in einem ähnlichen Bereich kennen, teilen Sie uns dies mit und wir werden die Vergleiche aktualisieren.

⬆ Zurück nach oben

6. Installation

Die Installation von ReactiveSearch ist nur ein Befehl.

• Wenn Sie reactivesearch für React verwenden

 npm install @ appbaseio / reactivesearch

Die Schnellstartanleitung mit React finden Sie hier.

• Wenn Sie ReactiveSearch für Vue verwenden

 npm install @ appbaseio / reactivesearch - vue

Die Schnellstartanleitung mit Vue finden Sie hier.

7. Dokumentationshandbuch

Die offiziellen Dokumente für die React-Bibliothek finden Sie unter docs.reactivesearch.io/docs/reactivesearch/react.

Die Komponenten sind in vier Abschnitte unterteilt:

• Listenbasierte UI-Komponenten befinden sich unter reactivesearch/react/list.
• Bereichsbasierte UI-Komponenten befinden sich unter reactivesearch/react/range.
• Such-UI-Komponenten befinden sich unter reactivesearch/react/search.
• Ergebniskomponenten befinden sich unter reactivesearch/react/result.
• Kartenkomponenten befinden sich unter reactivesearch/react/map.
• Diagrammkomponenten befinden sich unter reactivesearch/react/chart.

Dokumente für die Vue-Version der Bibliothek sind unter docs.reactivesearch.io/docs/reactivesearch/vue verfügbar.

⬆ Zurück nach oben

8. Mitwirken

Bitte schauen Sie sich den Beitragsleitfaden an.

9. Andere Projekte, die Ihnen gefallen könnten

• ReactiveSearch API API Gateway für ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (Standardsicherheit, Ratenbegrenzungsfunktionen, Datensatzanalyse und Anforderungsprotokolle).

• searchbox Eine leichte und leistungsorientierte Suchfeld-UI-Bibliothek zum Abfragen und Anzeigen von Ergebnissen mit ReactiveSearch Cloud.

  • Vanille JS
  • Flattern

• dejavu Elasticsearch / OpenSearch-Datenbetrachter und -editor

• appbase-js Für den Fall, dass Sie zusätzlich zu UI-Komponenten auch Daten indizieren müssen

⬆ Zurück nach oben