Erstellen einer Such-App mit Blazor und Elasticsearch

Von der Vektorsuche bis hin zu leistungsstarken REST-APIs bietet Elasticsearch Entwicklern das umfangreichste Such-Toolkit. Sehen Sie sich die Beispiel-Notebooks auf GitHub an, um etwas Neues testen. Sie können auch noch heute Ihre kostenlose Testversion starten oder Elasticsearch lokal ausführen.

In diesem Artikel erfahren Sie, wie Sie Ihre C#-Kenntnisse nutzen können, um eine Suchanwendung mit Blazor und Elasticsearch zu erstellen. Wir werden den Elasticsearch .NET- Client verwenden, um Volltext-, semantische und hybride Suchabfragen durchzuführen.

HINWEIS: Wenn Sie mit der älteren Version des Elasticsearch C#-Clients NEST vertraut sind, lesen Sie diesen Blogbeitrag über die Einstellung des NEST-Clients und neue Funktionen. NEST war die vorherige Generation des .NET-Clients, der durch den .NET-Client ersetzt wurde.Elastic.Clients.Elasticsearch package

• Was ist Blazor?
• Was ist ESRE?
• ELSER konfigurieren
• Indexierungsdaten
• Gebäudeanwendung

Was ist Blazor?

Blazor ist ein Open-Source-Webframework auf Basis von HTML, CSS und C#, das von Microsoft entwickelt wurde, um Entwicklern die Erstellung von Webanwendungen zu ermöglichen, die auf dem Client oder dem Server ausgeführt werden können. Blazor ermöglicht es Ihnen außerdem, wiederverwendbare Komponenten zu erstellen, um Anwendungen schneller zu entwickeln; es ermöglicht Entwicklern, die HTML-Ansicht und Aktionen in C# innerhalb derselben Datei zu erstellen, was dazu beiträgt, lesbaren und sauberen Code zu erhalten. Mit Blazor Hybrid können Sie außerdem native mobile Apps erstellen, die über .NET-Code auf die Funktionen der nativen Plattform zugreifen.

Einige der Merkmale, die Blazor zu einem großartigen Framework machen:

• Serverseitige und clientseitige Rendering-Optionen
• Wiederverwendbare UI-Komponenten
• Echtzeit-Updates mit SignalR
• Integrierte Zustandsverwaltung
• Eingebautes Routingsystem
• Strenge Typisierung und Kompilierzeitprüfungen

Warum Blazer?

Blazor bietet gegenüber anderen Frameworks und Bibliotheken mehrere Vorteile: Es ermöglicht Entwicklern, C# sowohl für Client- als auch für Servercode zu verwenden, bietet eine starke Typisierung und Kompilierzeitprüfung, was die Zuverlässigkeit erhöht. Es integriert sich nahtlos in das .NET-Ökosystem, ermöglicht die Wiederverwendung von .NET-Bibliotheken und -Tools und bietet robuste Unterstützung beim Debuggen.

Was ist ESRE?

Elasticsearch Relevance Engine ™ (ESRE) ist eine Sammlung von Tools zum Erstellen von Suchanwendungen mithilfe von maschinellem Lernen und künstlicher Intelligenz auf Basis der leistungsstarken Elasticsearch-Suchmaschine.

Um mehr über ESRE zu erfahren, können Sie unseren aufschlussreichen Blogbeitrag hierlesen.

ELSER konfigurieren

Um die ESRE- Funktionen von Elastic optimal zu nutzen, werden wir ELSER als unseren Modellanbieter verwenden.

Hinweis: Für die Nutzung der ELSER-Modelle von Elasticsearch benötigen Sie eine Platinum- oder Enterprise-Lizenz sowie einen dedizierten Machine-Learning-Knoten (ML-Knoten) mit mindestens 4 GB Speicherplatz. Weitere Informationen finden Sie hier.

Beginnen Sie mit der Erstellung des Inferenzendpunkts:

Wenn Sie ELSER zum ersten Mal verwenden, kann beim Laden des Modells im Hintergrund ein 502 Bad Gateway-Fehler auftreten. Den Status des Modells können Sie in Machine Learning > Trained Models in Kibana überprüfen. Sobald die Bereitstellung abgeschlossen ist, können Sie mit dem nächsten Schritt fortfahren.

Indexierungsdaten

Sie können den Datensatz hier herunterladen und die Daten anschließend mit Kibana importieren. Gehen Sie dazu auf die Startseite und klicken Sie auf „Daten hochladen“. Laden Sie anschließend die Datei hoch und klicken Sie auf Import. Wechseln Sie abschließend zum Reiter Advanced und fügen Sie die folgenden Zuordnungen ein:

Wir werden einen Index erstellen, der semantische und Volltextabfragen ausführen kann. Der Feldtyp semantic_text kümmert sich um die Datensegmentierung und -einbettung. Beachten Sie, dass wir als indizieren longDescription  semantic_text. Sie können copy_to verwenden, wenn Sie ein Feld sowohl als als semantic_text auch als text` indizieren möchten .

Entwicklung der App mit Blazor & Elasticsearch

API-Schlüssel

Als Erstes müssen wir einen API-Schlüssel erstellen, um unsere Anfragen an Elasticsearch zu authentifizieren. Der API-Schlüssel sollte schreibgeschützt sein und nur Abfragen des Index books-blazor erlauben.

Sie werden etwa Folgendes sehen:

Speichern Sie den Wert des Antwortfelds encoded , da er später benötigt wird. Wenn Sie Elastic Cloud nutzen, benötigen Sie außerdem Ihre Cloud-ID. (Sie finden sie hier).

Das Blazor-Projekt wird erstellt

Beginnen Sie mit der Installation von Blazor und der Erstellung eines Beispielprojekts gemäß den offiziellen Anweisungen.

Sobald das Projekt erstellt ist, sollte die Ordnerstruktur und die Dateistruktur wie folgt aussehen:

Die Template-Anwendung enthält Bootstrap v5.1.0. zum Styling.

Schließen Sie die Projekteinrichtung ab, indem Sie den Elasticsearch .NET -Client installieren:

Sobald Sie diesen Schritt abgeschlossen haben, sollte Ihre Seite wie folgt aussehen:

Ordnerstruktur

Nun werden wir unsere Ordner wie folgt organisieren:

Dateitypen erklärt:

• Components/Pages/Search.razor: Hauptseite mit Suchleiste, Suchergebnissen und Filtern.
• Components/Pages/Search.razor.css: Seitenstile.
• Components/Elasticsearch/SearchBar.razor: Suchleistenkomponente.
• Components/Elasticsearch/Results.razor: Ergebniskomponente.
• Components/Elasticsearch/Facet.razor: Filterkomponente.
• Components/Svg/GlassIcon.razor: Suchsymbol.
• Components/_Imports.razor: Dadurch werden alle Komponenten importiert.
• Models/Book.cs: Hier wird das Schema der Buchfelder gespeichert.
• Models/Response.cs: Hier wird das Antwortschema gespeichert, einschließlich der Suchergebnisse, Facetten und der Gesamtzahl der Treffer.
• Services/ElasticsearchService.cs: Elasticsearch-Dienst. Es übernimmt die Verbindung und die Abfragen an Elasticsearch.

Erstkonfiguration

Fangen wir mit Aufräumarbeiten an.

Löschen Sie die Dateien:

• Komponenten/Seiten/Counter.razor
• Komponenten/Seiten/Wetter.razor
• Komponenten/Seiten/Startseite.razor
• Komponenten/Layout/NavMenu.razor
• Components/Layout/NavMenu.razor.css

Überprüfen Sie die Datei /Components/_Imports.razor . Sie sollten folgende Importe haben:

Integration von Elastic in das Projekt

Importieren wir nun die Elasticsearch-Komponenten:

Wir werden die Standard-Seitenleiste entfernen, um mehr Platz für unsere Anwendung zu schaffen, indem wir sie aus der Datei /Components/Layout/MainLayout.razor löschen:

Geben wir nun die Elasticsearch-Zugangsdaten für die Benutzergeheimnisse ein:

Bei diesem Ansatz speichert .NET 8 sensible Daten an einem separaten Ort außerhalb des Projektordners und ermöglicht den Zugriff über die IConfiguration -Schnittstelle. Diese Variablen stehen jedem .NET-Projekt zur Verfügung, das dieselben Benutzergeheimnisse verwendet.

Als Nächstes modifizieren wir die Datei Program.cs , um die Geheimnisse zu lesen und den Elasticsearch-Client einzubinden:

Zuerst müssen die benötigten Bibliotheken importiert werden:

• BlazorApp.Services: enthält den Elasticsearch-Dienst.
• Elastic.Clients.Elasticsearch: importiert die Elasticsearch-Client-Bibliothek für .NET 8.
• Elastic.Transport: importiert die Elasticsearch-Transportbibliothek, die es uns ermöglicht, die ApiKey-Klasse zur Authentifizierung unserer Anfragen zu verwenden.

Zweitens fügen Sie den folgenden Code vor der Zeile var app = builder.Build() ein:

Dieser Code liest die Elasticsearch-Zugangsdaten aus den Benutzergeheimnissen und erstellt eine Elasticsearch-Clientinstanz.

Nach der Initialisierung des Elasticsearch-Clients fügen Sie die folgende Zeile hinzu, um den Elasticsearch-Dienst zu registrieren:

Der nächste Schritt besteht darin, die Suchlogik in der Datei /Services/ElasticsearchService.cs zu implementieren:

Zuerst müssen die benötigten Bibliotheken und Modelle importiert werden:

Zweitens fügen Sie die Klasse ElasticsearchService, den Konstruktor und die Variablen hinzu:

Suche konfigurieren

Nun erstellen wir unsere Suchlogik:

• BuildFilters wird die Filter für die Suchanfrage anhand der vom Benutzer ausgewählten Facetten erstellen.
• BuildHybridQuery wird eine hybride Suchanfrage erstellen, die Volltext- und semantische Suche kombiniert.

Als Nächstes fügen Sie die Suchmethode hinzu:

• SearchBooksAsync: führt die Suche mit Hilfe der Hybridabfrage durch und gibt die Ergebnisse einschließlich der Aggregationen zum Aufbau der Facetten zurück.
• FormatFacets: formatiert die Aggregationsantwort in ein Wörterbuch.
• ConvertFacetDictionary: wird das Facettenwörterbuch in ein besser lesbares Format umwandeln.

Im nächsten Schritt werden die Modelle erstellt, die die Daten repräsentieren, die in der hits der Elasticsearch-Abfrage zurückgegeben werden und als Ergebnisse auf unserer Suchseite angezeigt werden.

Wir beginnen damit, die Datei /Models/Book.cs zu erstellen und Folgendes hinzuzufügen:

Anschließend wird die Elastic-Antwort in der Datei /Models/Response.cs eingerichtet und Folgendes hinzugefügt:

Konfigurieren einer grundlegenden Benutzeroberfläche

Als Nächstes fügen Sie die Komponente SearchBar hinzu. Fügen Sie in der Datei /Components/Elasticsearch/SearchBar.razor Folgendes hinzu:

Diese Komponente enthält eine Suchleiste und eine Schaltfläche zur Durchführung der Suche.

Blazor bietet große Flexibilität, da es die dynamische Generierung von HTML mithilfe von C#-Code innerhalb derselben Datei ermöglicht.

Anschließend erstellen wir in der Datei /Components/Elasticsearch/Results.razor die Ergebniskomponente, die die Suchergebnisse anzeigt:

Abschließend müssen wir noch Facetten erstellen, um die Suchergebnisse zu filtern.

Hinweis: Facetten sind Filter, mit denen Nutzer Suchergebnisse anhand bestimmter Attribute oder Kategorien wie Produkttyp, Preisspanne oder Marke eingrenzen können. Diese Filter werden üblicherweise als anklickbare Optionen, oft in Form von Kontrollkästchen, dargestellt, um Nutzern die Suche zu erleichtern und relevante Ergebnisse schneller zu finden. In Elasticsearch werden Facetten mithilfe von Aggregationenerstellt.

Wir richten Facetten ein, indem wir den folgenden Code in die Datei /Components/Elasticsearch/Facet.razor einfügen:

Diese Komponente liest Daten aus einer terms -Aggregation der Felder author, categories und status und erzeugt anschließend eine Liste von Filtern, die an Elasticsearch zurückgesendet werden.

Nun fügen wir alles zusammen.

In der Datei /Components/Pages/Search.razor :

Unsere Seite funktioniert!

Wie Sie sehen können, ist die Seite funktional, aber es fehlen ihr die Stile. Fügen wir etwas CSS hinzu, damit es übersichtlicher und responsiver aussieht.

Fangen wir an, die Layoutstile zu ersetzen. In der Datei Components/Layout/MainLayout.razor.css :

Fügen Sie die Stile für die Suchseite in der Datei Components/Pages/Search.razor.css hinzu:

Unsere Seite sieht jetzt besser aus:

Geben wir dem Ganzen noch den letzten Schliff:

Erstellen Sie die folgenden Dateien:

• Komponenten/Elasticsearch/Facet.razor.css
• Components/Elasticsearch/Results.razor.css

Und fügen Sie die Stile für Facet.razor.css hinzu:

Für Results.razor.css:

Endergebnis:

Um die Anwendung auszuführen, können Sie folgenden Befehl verwenden:

dotnet watch

Du hast es geschafft! Sie können nun mithilfe der Suchleiste in Ihrem Elasticsearch-Index nach Büchern suchen und die Ergebnisse nach Autor, Kategorie und Status filtern.

Durchführung der Volltext- und semantischen Suche

Standardmäßig führt unsere App eine hybride Suche durch, die sowohl Volltext- als auch semantische Suche nutzt. Sie können die Suchlogik ändern, indem Sie zwei separate Methoden erstellen, eine für die Volltextsuche und eine weitere für die semantische Suche, und dann eine Methode auswählen, um die Abfrage basierend auf der Eingabe des Benutzers zu erstellen.

Fügen Sie der Klasse ElasticsearchService in der Datei /Services/ElasticsearchService.cs die folgenden Methoden hinzu:

Beide Methoden funktionieren ähnlich wie die BuildHybridQuery -Methode, führen aber nur eine Volltext- oder semantische Suche durch.

Sie können die SearchBooksAsync -Methode so anpassen, dass sie die ausgewählte Suchmethode verwendet:

Die vollständige Bewerbung finden Sie hier.

Fazit

Blazor ist ein effektives Framework, mit dem Sie Webanwendungen in C# erstellen können. Elasticsearch ist eine leistungsstarke Suchmaschine, mit der Sie Suchanwendungen erstellen können. Durch die Kombination beider können Sie auf einfache Weise robuste Suchanwendungen erstellen und die Leistungsfähigkeit von ESRE nutzen, um in kurzer Zeit ein semantisches Sucherlebnis zu schaffen.

Häufige Fragen