<![CDATA[Gustavo Llermaly - Elasticsearch Labs]]> <![CDATA[Gustavo Llermaly - Elasticsearch Labs]]> https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt1121c0bf0e8a6e65/6a88da6340a1841030ef456f/search-labs-thumbnail.png https://www.elastic.co/de/search-labs/author/gustavo-llermaly https://www.elastic.co/de/search-labs/author/gustavo-llermaly Wed, 23 Sep 2026 04:32:50 GMT <![CDATA[Überwachung der Kibana-Dashboard-Ansichten mit Elastic Workflows]]> Kibana erfasst, wie oft jedes Dashboard angezeigt wird, aber diese Daten werden in keinem integrierten Dashboard nativ angezeigt. In diesem Artikel werden wir Elastic Workflows nutzen, um diese Daten alle 30 Minuten automatisch zu sammeln und in Elasticsearch zu indexieren, damit wir darauf unsere eigenen Analysen aufbauen können.

Elastic Workflows ist eine in Kibana integrierte Automatisierungs-Engine, mit der Sie mehrstufige Prozesse mithilfe einer einfachen YAML-Konfiguration definieren können. Jeder Workflow kann über einen Zeitplan, ein Ereignis oder als Tool in Elastic Agent Builder ausgelöst werden, und jeder Schritt kann Kibana-APIs aufrufen, Elasticsearch abfragen oder Daten umwandeln.

Wir verwenden die Anzahl der Dashboard-Ansichten als konkretes Beispiel, aber das gleiche Muster gilt für jede Metrik, die über die Kibana-API für gespeicherte Objekte bereitgestellt wird.

Voraussetzungen

Schritt 1: Untersuchen Sie die Rohdaten in Dev Tools

Bevor wir etwas bauen, sollten wir uns erst einmal darüber klar werden, welche Daten wir haben. Kibana speichert den Großteil seiner Konfiguration und Metadaten als gespeicherte Objekte in einem separaten internen Index. Kibana erfasst auf diese Weise unter anderem die Anzahl der Dashboard-Aufrufe, indem ein spezieller Typ gespeicherter Objekte namens „Nutzungszähler“ verwendet wird. Sie können sie direkt in Dev Tools abfragen:

GET kbn:/api/saved_objects/_find?type=usage-counter&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed"&per_page=10000

Die Reaktion sieht in etwa wie folgt aus:

{ "page": 1, "per_page": 10000, "total": 1, "saved_objects": [ { "type": "usage-counter", "id": "dashboard:346f3c64-ebca-484d-9d57-ec600067d596:viewed:server:20260310", "attributes": { "domainId": "dashboard", "counterName": "346f3c64-ebca-484d-9d57-ec600067d596", "counterType": "viewed", "source": "server", "count": 1 }, ... } ]

Das Feld counterName ist die Dashboard-ID und count ist die kumulierte Anzahl der Aufrufe für dieses Dashboard an diesem bestimmten Tag. Kibana erstellt ein Zählerobjekt pro Dashboard pro Tag; Sie können das Datumssuffix in der Objekt-ID sehen (...viewed:server:20260310). Die Anzahl wächst im Laufe des Tages, wenn Nutzer das Dashboard öffnen.

Anstatt dieses tägliche Dokumentmodell in unserem Index zu replizieren, erstellen wir pro Workflow-Ausführung ein Dokument. Jedes Dokument zeichnet auf, wie viele Aufrufe dieses Dashboard für den Tag zum Zeitpunkt der Erfassung angesammelt hatte.

Schritt 2: Den Zielindex erstellen

Wir benötigen einen Index, um unsere Snapshots der Dashboard-Ansicht zu speichern. Der folgende Befehl erstellt sie mit expliziten Mappings, sodass wir später aggregieren und visualisieren können. Führen Sie dazu in Dev Tools den folgenden Befehl aus:

PUT dashboard-views { "mappings": { "properties": { "captured_at": { "type": "date" }, "dashboard_id": { "type": "keyword" }, "dashboard_name": { "type": "keyword" }, "view_count": { "type": "integer" } } } }

Die Verwendung von keyword Mappings für IDs und Namen ermöglicht Aggregationen. Die Verwendung von integer für view_count ist ein sicherer Standardwert, da Kibana den Zähler täglich zurücksetzt und das Erreichen des 32-Bit-Limits (mehr als 2 Milliarden Aufrufe an einem einzigen Tag) daher keine realistische Sorge darstellt. Es unterstützt weiterhin numerische Operationen wie max, avgund min und andere.

Schritt 3: Den Workflow erstellen

Gehen Sie zu Stack Management > Workflows > Neuer Workflow, und fügen Sie die folgende Workflow-YAML-Konfiguration ein:

name: dashboard-views-ingestion triggers: - type: scheduled with: every: 30m steps: - name: fetch_dashboard_views type: kibana.request with: method: GET path: >- /api/saved_objects/_find?type=usage-counter&per_page=10000&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed" - name: index_each_dashboard type: foreach foreach: "{{ steps.fetch_dashboard_views.output.saved_objects }}" steps: - name: fetch_dashboard_name type: kibana.request with: method: GET path: /api/saved_objects/dashboard/{{ foreach.item.attributes.counterName }} on-failure: continue: true - name: index_doc type: elasticsearch.request with: method: POST path: /dashboard-views/_doc body: dashboard_id: "{{ foreach.item.attributes.counterName }}" dashboard_name: "{{ steps.fetch_dashboard_name.output.attributes.title }}" view_count: "${{ foreach.item.attributes.count | plus: 0 }}" captured_at: "{{ execution.startedAt | date: '%Y-%m-%dT%H:%M:%SZ' }}"

Im folgenden Abschnitt werfen wir Schritt für Schritt einen Blick auf den Workflow.

So funktioniert der Workflow

Auslöser

Geplante Auslöser

Der Workflow wird alle 30 Minuten mit einem geplanten Auslöser ausgeführt. Dadurch erhalten wir Zeitreihendaten, ohne die API zu überlasten.

fetch_dashboard_views

Dashboard abrufen

Verwendet kibana.request , um die Kibana-API für gespeicherte Objekte aufzurufen. Es ist keine Authentifizierungskonfiguration erforderlich: Die Workflow-Engine fügt automatisch die korrekten Header basierend auf dem Ausführungskontext hinzu.

index_each_dashboard (foreach)

Indexieren Sie jedes Dashboard

Iteriert über das Array saved_objects, das vom vorherigen Schritt zurückgegeben wurde. Das aktuelle Element in jeder Iteration ist als foreach.item verfügbar. Innerhalb der Schleife führen wir zwei verschachtelte Schritte für jedes Dashboard aus.

1. fetch_dashboard_name:

: Dashboard-Name abrufen

Ermittelt den für Menschen lesbaren Dashboard-Titel durch Aufruf von GET /api/saved_objects/dashboard/{id}. Wir fügen on-failure: continue: true hinzu, damit die Schleife fortgesetzt wird, anstatt dass die gesamte Ausführung fehlschlägt, falls ein Dashboard gelöscht wurde, aber noch Aufrufzähler vorhanden sind.

2. index_doc:

Elasticsearch-Anfrage

Indexiert jedes Dokument mit POST /dashboard-views/_doc (ohne eine explizite ID), wodurch Elasticsearch IDs automatisch generieren kann. Dadurch wird bei jedem Durchlauf ein neues Dokument erstellt, wodurch eine Historie der Aufrufzahlen im Laufe der Zeit aufgebaut wird, anstatt den vorherigen Snapshot zu überschreiben.

Zwei Dinge, die es zu beachten gilt:

  • Das Feld captured_at verwendet den Datumsfilter, um den Zeitstempel als ISO 8601 zu formatieren. Ohne ihn erscheint der Wert als JavaScript-Datumszeichenfolge, wie Tue Mar 10 2026 05:03:47 GMT+0000, die Elasticsearch nicht als Datum abbildet.

  • Der Ausdruck view_count verwendet die Syntax ${{ }} mit | plus: 0, um den numerischen Typ beizubehalten. Die Verwendung von {{ }} würde es als Zeichenfolge darstellen, was mathematische Operationen im Dashboard verhindern würde.

Die Benutzeroberfläche ermöglicht eine komfortable Fehlerbehebung jedes einzelnen Workflow-Schritts.

Schritt 4: Das Statistik-Dashboard erstellen

Sobald der Workflow einige Male ausgeführt wurde und Daten gesammelt wurden, erstellen Sie in Kibana ein neues Dashboard mithilfe der Data View „Dashboard-Ansichten“.

Einige Panels für den Anfang:

  • Top-Dashboards nach Ansichten: Verwenden Sie ein Balkendiagramm mit dashboard_name auf der X-Achse und last_value(view_count) auf der Y-Achse. Hier wird die aktuelle tägliche Anzahl der Aufrufe pro Dashboard angezeigt.

  • Ansichten im Zeitverlauf: Verwenden Sie ein Liniendiagramm mit captured_at auf der X-Achse und last_value(view_count) auf der Y-Achse, unterteilt nach dashboard_name. Da jede Ausführung ein neues Dokument anhängt, verwenden Sie den letzten Wert, um die Spitzenanzahl pro Zeit-Buckets zu erhalten, anstatt Duplikate zu summieren.

  • Aktueller Snapshot: Verwenden Sie eine Datentabelle mit den neuesten captured_at, um die aktuellsten Aufrufzahlen aller Dashboards anzuzeigen.

Da jeder Workflow ein neues Dokument erstellt, können Sie nach Zeitbereich filtern, um die Aktivität in bestimmten Zeiträumen zu analysieren, Vergleiche von Woche zu Woche anzustellen oder Alerts zu erstellen, wenn ein Dashboard unter einen Ansichtsschwellenwert fällt.

Fazit

Elastic Workflows eignet sich gut für diese Art von periodischer Datenerhebung, da sowohl die Quelle (Kibana API) als auch das Ziel (Elasticsearch) native sind, was bedeutet, dass keine Zugangsdaten verwaltet werden. Die Workflow-Engine verwaltet die Authentifizierung für die Schritte kibana.request und elasticsearch.request automatisch, sodass Sie nur die Logik schreiben müssen.

Ressourcen

]]> https://www.elastic.co/search-labs/blog/monitor-kibana-dashboard-views-elastic-workflows https://www.elastic.co/search-labs/blog/monitor-kibana-dashboard-views-elastic-workflows Fri, 03 Apr 2026 00:00:00 GMT <![CDATA[Elastic Open Web Crawler als Code]]> Mit Elastic Open Web Crawler und seiner CLI-gesteuerten Architektur lassen sich versionierte Crawler-Konfigurationen und eine CI/CD-Pipeline mit lokalen Tests jetzt recht einfach realisieren.

Traditionell war die Verwaltung von Webcrawlern ein manueller, fehleranfälliger Prozess. Dabei ging es um das direkte Bearbeiten von Konfigurationen in der Benutzeroberfläche sowie um das Klonen von Crawl-Konfigurationen, das Zurücksetzen von Einstellungen, die Versionsverwaltung und vieles mehr. Die Behandlung von Crawler-Konfigurationen als Code löst dieses Problem, indem sie die gleichen Vorteile bietet, die wir von der Softwareentwicklung erwarten: Wiederholbarkeit, Nachvollziehbarkeit und Automatisierung.

Dieser Workflow erleichtert es, den Open Web Crawler in Ihre CI/CD-Pipeline für Rollbacks, Backups und Migrationen einzubinden – Aufgaben, die mit früheren Elastic Crawlern wie dem Elastic Web Crawler oder dem App Search Crawler wesentlich schwieriger waren.

In diesem Artikel erfahren Sie, wie Sie:

  • Verwalten Sie unsere Crawl-Konfigurationen mit GitHub.

  • Eine lokale Testumgebung für Pipelines vor der Bereitstellung einrichten

  • Wir erstellen eine Produktionsumgebung, um den Webcrawler jedes Mal mit neuen Einstellungen auszuführen, wenn wir Änderungen an unseren Hauptzweig übertragen.

Das Projekt-Repository finden Sie hier. Zum Zeitpunkt der Erstellung dieses Dokuments verwende ich Elasticsearch 9.1.3 und Open Web Crawler 0.4.2.

Voraussetzungen

  • Docker Desktop

  • Elasticsearch-Instanz

  • Virtuelle Maschine mit SSH-Zugriff (z. B. AWS EC2) und installiertem Docker

Schritte

  1. Ordnerstruktur

  2. Raupenkonfiguration

  3. Docker-Compose-Datei (lokale Umgebung)

  4. GitHub Actions

  5. Lokale Tests

  6. Bereitstellung in der Produktionsumgebung

  7. Änderungen vornehmen und erneut bereitstellen

Ordnerstruktur

Für dieses Projekt werden wir folgende Dateistruktur verwenden:

├── docker-compose.yml # Local elasticsearch + crawler ├── config/crawler-config.yml # Crawler config ├── .github/workflows/deploy.yml # GH Action to deploy changes ├── local.sh # Script to run our local crawler

Raupenkonfiguration

Unter crawler-config.yml, wird Folgendes eingetragen:

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3

Dies führt einen Crawl von https://web-scraping.dev/products durch, einer simulierten Website für Produkte. Wir werden nur die ersten drei Produktseiten durchsuchen. Die Einstellung max_crawl_depth verhindert, dass der Crawler mehr Seiten als die als seed_urls definierten Seiten entdeckt, indem er die darin enthaltenen Links nicht öffnet.

Elasticsearch host und api_key werden dynamisch befüllt, abhängig von der Umgebung, in der das Skript ausgeführt wird.

Die Produktseite für „Schokoladenbox“ von der Domain web-scraping.dev, einer Testseite für Web-Scraping. Auf der Seite werden der Produkttitel, das Bild, die Beschreibung sowie die HTML-Elemente für Preis- und Kaufbuttons angezeigt.

Docker-Compose-Datei (lokale Umgebung)

Für die lokale Umgebung docker-compose.yml, werden wir den Crawler und einen einzelnen Elasticsearch-Cluster + Kibana bereitstellen, damit wir unsere Crawling-Ergebnisse vor der Bereitstellung in der Produktionsumgebung einfach visualisieren können.

services: es01: image: docker.elastic.co/elasticsearch/elasticsearch:9.1.3 environment: - discovery.type=single-node - xpack.security.enabled=false - ES_JAVA_OPTS=-Xms1g -Xmx1g ports: - "9200:9200" networks: [esnet] healthcheck: test: ["CMD", "curl", "-f", "http://localhost:9200"] interval: 5s timeout: 5s retries: 10 kibana: image: docker.elastic.co/kibana/kibana:9.1.3 environment: - ELASTICSEARCH_HOSTS=http://es01:9200 ports: - "5601:5601" networks: [esnet] depends_on: [es01] crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] stdin_open: true tty: true networks: esnet: driver: bridge

Beachten Sie, wie der Crawler wartet, bis Elasticsearch bereit ist, ausgeführt zu werden.

GitHub Actions

Nun müssen wir eine GitHub-Aktion erstellen, die die neuen Einstellungen kopiert und den Crawler bei jedem Push auf den Hauptzweig in unserer virtuellen Maschine ausführt. Dadurch wird sichergestellt, dass wir immer die aktuellste Konfiguration im Einsatz haben, ohne manuell in die virtuelle Maschine eingreifen zu müssen, um Dateien zu aktualisieren und den Crawler auszuführen. Wir werden AWS EC2 als Anbieter virtueller Maschinen verwenden.

Der erste Schritt besteht darin, den Host (VM_HOST), den Maschinenbenutzer (VM_USER), den SSH-RSA-Schlüssel (VM_KEY), den Elasticsearch-Host (ES_HOST) und den Elasticsearch-API-Schlüssel (ES_API_KEY) zu den GitHub Action Secrets hinzuzufügen:

Eine Konfigurationsseite für „Aktionen, Geheimnisse und Variablen“, auf der Repository-Geheimnisse wie VM_HOST, VM_KEY und VM_USER über eine webbasierte Oberfläche angezeigt werden.

Auf diese Weise kann die Aktion auf unseren Server zugreifen, um die neuen Dateien zu kopieren und den Crawl auszuführen.

Nun erstellen wir unsere .github/workflows/deploy.yml -Datei:

name: Deploy on: push: branches: [main] jobs: Deploy: name: Deploy to EC2 runs-on: ubuntu-latest steps: - uses: actions/checkout@v5 - name: Deploy crawler env: HOSTNAME: ${{ secrets.VM_HOST }} USER_NAME: ${{ secrets.VM_USER }} PRIVATE_KEY: ${{ secrets.VM_KEY }} ES_HOST: ${{ secrets.ES_HOST }} ES_API_KEY: ${{ secrets.ES_API_KEY }} run: | # Save private key echo "$PRIVATE_KEY" > private_key chmod 600 private_key # Generate final config locally envsubst < config/crawler-config.yml > config/crawl-config-final.yml # Copy the config folder to VM scp -o StrictHostKeyChecking=no -i private_key -r config ${USER_NAME}@${HOSTNAME}:~/config # SSH into VM and run crawler ssh -o StrictHostKeyChecking=no -i private_key ${USER_NAME}@${HOSTNAME} << EOF docker run --rm \ -v ~/config:/config \ docker.elastic.co/integrations/crawler:latest jruby \ bin/crawler crawl /config/crawl-config-final.yml EOF

Diese Aktion führt jedes Mal die folgenden Schritte aus, wenn wir Änderungen an der Crawler-Konfigurationsdatei vornehmen:

  1. Tragen Sie den Elasticsearch-Host und den API-Schlüssel in die YAML-Konfiguration ein.

  2. Kopieren Sie den Konfigurationsordner auf unsere VM

  3. Stellen Sie über SSH eine Verbindung zu unserer VM her.

  4. Führen Sie den Crawl mit der Konfiguration aus, die wir gerade aus dem Repository kopiert haben.

Lokale Tests

Um unseren Crawler lokal zu testen, haben wir ein Bash-Skript erstellt, das den Elasticsearch-Host mit dem lokalen Docker-Repository befüllt und einen Crawl startet. Sie können ./local.sh eingeben, um es auszuführen.

#!/bin/bash # Exit on any error set -e # Load environment variables export ES_HOST="http://es01:9200" # Generate final crawler config envsubst < ./config/crawler-config.yml > ./config/crawl-config-final.yml # Bring everything up docker compose up --build

Schauen wir uns die Kibana DevTools an, um zu bestätigen, dass web-crawler-index korrekt befüllt wurde:

Kibana DevTools-Code zur Bestätigung, dass der Webcrawler-Index korrekt eingerichtet ist.

Bereitstellung in der Produktionsumgebung

Jetzt sind wir bereit, die Änderungen auf den Hauptzweig zu übertragen. Dadurch wird der Crawler in Ihrer virtuellen Maschine bereitgestellt und beginnt, Protokolle an Ihre Serverless Elasticsearch-Instanz zu senden.

git add . git commit -m "First commit" git push

Dadurch wird die GitHub-Aktion ausgelöst, die das Bereitstellungsskript innerhalb der virtuellen Maschine ausführt und mit dem Crawling beginnt.

Sie können die Ausführung der Aktion überprüfen, indem Sie zum GitHub-Repository gehen und den Tab „Aktionen“ aufrufen:

Die Aktionen werden im EC2-Tab eines GitHub-Repositorys bereitgestellt.

Änderungen vornehmen und erneut bereitstellen

Vielleicht ist Ihnen aufgefallen, dass die price jedes Produkts Teil des Body-Felds des Dokuments ist. Ideal wäre es, den Preis in einem separaten Feld zu speichern, damit wir Filter darauf anwenden können.

Fügen wir diese Änderung zur Datei crawler.yml hinzu, um Extraktionsregeln zu verwenden, mit denen der Preis aus der CSS-Klasse product-price extrahiert werden kann:

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} # Index ingest pipeline to process documents before indexing pipeline_enabled: true pipeline: pricing-pipeline domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3 extraction_rulesets: - url_filters: - type: ends pattern: /product/* rules: - action: extract field_name: price selector: .product-price join_as: string source: html

Wir sehen auch, dass der Preis ein Dollarzeichen ($) enthält, das wir entfernen müssen, wenn wir Bereichsabfragen ausführen wollen. Dafür können wir eine Ingest-Pipeline verwenden. Beachten Sie, dass wir in unserer neuen Crawler-Konfigurationsdatei oben darauf verweisen:

PUT _ingest/pipeline/pricing-pipeline { "processors": [ { "script": { "source": """ ctx['price'] = ctx['price'].replace("$","") """ } } ] }

Wir können diesen Befehl in unserem Elasticsearch-Produktionscluster ausführen. Da die Entwicklungsversion ephemer ist, können wir die Pipeline-Erstellung in die docker-compose.yml -Datei integrieren, indem wir den folgenden Dienst hinzufügen. Beachten Sie, dass wir dem Crawler-Dienst auch eine depends_on hinzugefügt haben, damit er erst startet, nachdem die Pipeline erfolgreich erstellt wurde.

crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] depends_on: pipeline-init: condition: service_completed_successfully stdin_open: true tty: true pipeline-init: image: curlimages/curl:latest depends_on: es01: condition: service_healthy networks: [esnet] entrypoint: > sh -c " echo 'Creating ingest pipeline...'; curl -s -X PUT http://es01:9200/_ingest/pipeline/pricing-pipeline \\ -H 'Content-Type: application/json' \\ -d '{\"processors\":[{\"script\":{\"source\":\"ctx.price = ctx.price.replace(\\\"$\\\", \\\"\\\")\"}}]}'; echo 'Pipeline created!'; "

Führen wir nun `./local.sh` aus, um die Änderung lokal zu sehen:

Führen Sie `./local.sh` aus, um die Preisänderung lokal zu sehen.

Großartig! Jetzt lasst uns die Veränderung vorantreiben:

git add crawler-config.yml git commit -m "added price CSS selector" git push

Um sicherzustellen, dass alles funktioniert, können Sie Ihre Produktions-Kibana-Datei überprüfen. Dort sollten die Änderungen sichtbar sein und der Preis als neues Feld ohne Dollarzeichen angezeigt werden.

Fazit

Mit dem Elastic Open Web Crawler können Sie Ihren Crawler als Code verwalten. Das bedeutet, dass Sie die gesamte Pipeline – von der Entwicklung bis zur Bereitstellung – automatisieren und beispielsweise ephemere lokale Umgebungen und Tests anhand der gecrawlten Daten programmatisch hinzufügen können.

Sie sind eingeladen, das offizielle Repository zu klonen und mit der Indizierung Ihrer eigenen Daten mithilfe dieses Workflows zu beginnen. In diesem Artikel erfahren Sie auch, wie Sie eine semantische Suche auf den vom Crawler erzeugten Indizes durchführen.

]]> https://www.elastic.co/search-labs/blog/elastic-open-crawler-config-as-code https://www.elastic.co/search-labs/blog/elastic-open-crawler-config-as-code Mon, 22 Sep 2025 00:00:00 GMT <![CDATA[Erstellen einer Such-App mit Blazor und Elasticsearch]]> 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

Erstellen Sie eine Blazor-App: Esre mit Blazor-Diagramm

Was ist Blazor?

Blazor-Server

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.

esre

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:

PUT _inference/sparse_embedding/my-elser-model { "service": "elser", "service_settings": { "num_allocations": 1, "num_threads": 1 } }

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.

Überprüfung trainierter Modelle

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:

{ "properties":{ "authors":{ "type":"keyword" }, "categories":{ "type":"keyword" }, "longDescription":{ "type":"semantic_text", "inference_id":"my-elser-model", "model_settings":{ "task_type":"sparse_embedding" } }, "pageCount":{ "type":"integer" }, "publishedDate":{ "type":"date" }, "shortDescription":{ "type":"text" }, "status":{ "type":"keyword" }, "thumbnailUrl":{ "type":"keyword" }, "title":{ "type":"text" } } }Importdaten

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.

POST /_security/api_key { "name": "books-blazor-key", "role_descriptors": { "books-blazor-reader": { "indices": [ { "names": ["books-blazor"], "privileges": ["read"] } ] } } }

Sie werden etwa Folgendes sehen:

{ "id": "XXXXXXXXXXXXXXXXXXXXXXXX", "name": "books-blazor-key", "api_key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "encoded": "XXXXXXXXXXXXXXXXXXXXXXXX==" }

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.

Blazor-Tutorial – Erstellen des Blazor-Projekts

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

BlazorApp/ |-- BlazorApp.csproj |-- BlazorApp.sln |-- Program.cs |-- appsettings.Development.json |-- appsettings.json |-- Properties/ | `-- launchSettings.json |-- Components/ | |-- App.razor | |-- Routes.razor | |-- _Imports.razor | |-- Layout/ | | |-- MainLayout.razor | | |-- MainLayout.razor.css | | |-- NavMenu.razor | | `-- NavMenu.razor.css | `-- Pages/ | |-- Counter.razor | |-- Error.razor | |-- Home.razor | `-- Weather.razor |-- wwwroot/ |-- bin/ `-- obj/

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

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

dotnet add package Elastic.Clients.Elasticsearch

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

Blazor Hallo Welt

Ordnerstruktur

Nun werden wir unsere Ordner wie folgt organisieren:

BlazorApp/ |-- Components/ | |-- Pages/ | | |-- Search.razor | | `-- Search.razor.css | `-- Elasticsearch/ | |-- SearchBar.razor | |-- Results.razor | `-- Facet.razor |-- Models/ | |-- Book.cs | `-- Response.cs `-- Services/ `-- ElasticsearchService.cs

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:

@using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using static Microsoft.AspNetCore.Components.Web.RenderMode @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using BlazorApp @using BlazorApp.Components

Integration von Elastic in das Projekt

Importieren wir nun die Elasticsearch-Komponenten:

@using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using static Microsoft.AspNetCore.Components.Web.RenderMode @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using BlazorApp @using BlazorApp.Components @using BlazorApp.Components.Elasticsearch @* <--- Add this line *@

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:

@inherits LayoutComponentBase <div class="page"> <main> <article class="content"> @Body </article> </main> </div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div>Navigationsleiste aus dem Layout entfernt

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

dotnet user-secrets init dotnet user-secrets set ElasticsearchCloudId "your Cloud ID" dotnet user-secrets set ElasticsearchApiKey "your API Key"

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:

using BlazorApp.Services; using Elastic.Clients.Elasticsearch; using Elastic.Transport;

  • 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:

// Initialize the Elasticsearch client. builder.Services.AddScoped(sp => { // Getting access to the configuration service to read the Elasticsearch credentials. var configuration = sp.GetRequiredService<IConfiguration>(); var cloudId = configuration["ElasticsearchCloudId"]; var apiKey = configuration["ElasticsearchApiKey"]; if (string.IsNullOrEmpty(cloudId) || string.IsNullOrEmpty(apiKey)) { throw new InvalidOperationException( "Elasticsearch credentials are missing in configuration." ); } var settings = new ElasticsearchClientSettings(cloudId, new ApiKey(apiKey)).EnableDebugMode(); return new ElasticsearchClient(settings); });

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:

builder.Services.AddScoped<ElasticsearchService>();

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:

using BlazorApp.Models; using Elastic.Clients.Elasticsearch; using Elastic.Clients.Elasticsearch.QueryDsl;

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

namespace BlazorApp.Services { public class ElasticsearchService { private readonly ElasticsearchClient _client; // The logger is used to log information, warnings and errors about the Elasticsearch service and requests. private readonly ILogger<ElasticsearchService> _logger; public ElasticsearchService( ElasticsearchClient client, ILogger<ElasticsearchService> logger ) { _client = client ?? throw new ArgumentNullException(nameof(client)); _logger = logger; } } }

Suche konfigurieren

Nun erstellen wir unsere Suchlogik:

private static Action<RetrieverDescriptor<BookDoc>> BuildHybridQuery( string searchTerm, Dictionary<string, List<string>> selectedFacets ) { var filters = BuildFilters(selectedFacets); return retrievers => retrievers.Rrf(rrf => rrf.RankWindowSize(50) .RankConstant(20) .Retrievers( retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.MultiMatch(mm => mm.Query(searchTerm) .Fields( new[] { "title", "shortDescription", } ) ) ) .Filter(filters.ToArray()) ) ) ), retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription") .Query(searchTerm) ) ) .Filter(filters.ToArray()) ) ) ) ) ); } public static List<Action<QueryDescriptor<BookDoc>>> BuildFilters( Dictionary<string, List<string>> selectedFacets ) { var filters = new List<Action<QueryDescriptor<BookDoc>>>(); if (selectedFacets != null) { foreach (var facet in selectedFacets) { foreach (var value in facet.Value) { var field = facet.Key.ToLower(); if (!string.IsNullOrEmpty(field)) { filters.Add(m => m.Term(t => t.Field(new Field(field)).Value(value))); } } } } return filters; }

  • 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:

public async Task<ElasticResponse> SearchBooksAsync( string searchTerm, Dictionary<string, List<string>> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Retrieve the hybrid query with filters applied. var retrieverQuery = BuildHybridQuery(searchTerm, selectedFacets); var response = await _client.SearchAsync<BookDoc>(s => s.Index("elastic-blazor-books") .Retriever(retrieverQuery) .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary<string, Dictionary<string, long>>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } } public static Dictionary<string, Dictionary<string, long>> FormatFacets( Elastic.Clients.Elasticsearch.Aggregations.AggregateDictionary aggregations ) { var facets = new Dictionary<string, Dictionary<string, long>>(); foreach (var aggregation in aggregations) { if ( aggregation.Value is Elastic.Clients.Elasticsearch.Aggregations.StringTermsAggregate termsAggregate ) { var facetName = aggregation.Key; var facetDictionary = ConvertFacetDictionary( termsAggregate.Buckets.ToDictionary(b => b.Key, b => b.DocCount) ); facets[facetName] = facetDictionary; } } return facets; } private static Dictionary<string, long> ConvertFacetDictionary( Dictionary<Elastic.Clients.Elasticsearch.FieldValue, long> original ) { var result = new Dictionary<string, long>(); foreach (var kvp in original) { result[kvp.Key.ToString()] = kvp.Value; } return result; }

  • 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:

namespace BlazorApp.Models { public class BookDoc { public string? Title { get; set; } public int? PageCount { get; set; } public string? PublishedDate { get; set; } public string? ThumbnailUrl { get; set; } public string? ShortDescription { get; set; } public LongDescription? LongDescription { get; set; } public string? Status { get; set; } public List<string>? Authors { get; set; } public List<string>? Categories { get; set; } } public class LongDescription { public string? Text { get; set; } } }

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

namespace BlazorApp.Models { public class ElasticResponse { public ElasticResponse() { Documents = new List<BookDoc>(); Facets = new Dictionary<string, Dictionary<string, long>>(); } public long TotalHits { get; set; } public List<BookDoc> Documents { get; set; } public Dictionary<string, Dictionary<string, long>> Facets { get; set; } } }

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:

@using System.Threading.Tasks <form @onsubmit="SubmitSearch"> <div class="input-group mb-3"> <input type="text" @bind-value="searchTerm" class="form-control" placeholder="Enter search term..." /> <button type="submit" class="btn btn-primary input-btn"> <span class="input-group-svg"> Search </span> </button> </div> </form> @code { [Parameter] public EventCallback<string> OnSearch { get; set; } private string searchTerm = ""; private async Task SubmitSearch() { await OnSearch.InvokeAsync(searchTerm); } }

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:

@using BlazorApp.Models @if (SearchResults != null && SearchResults.Any()) { <div class="row"> @foreach (var result in SearchResults) { <div class="col-12 mb-3"> <div class="card"> <div class="row g-0"> <div class="col-md-3 image-container"> @if (!string.IsNullOrEmpty(result?.ThumbnailUrl)) { <img src="@result?.ThumbnailUrl" class="img-fluid rounded-start" alt="Thumbnail"> } else { <div class="placeholder"> @result?.Title </div> } </div> <div class="col-md-9"> <!-- Adjusted to use the remaining 75% --> <div class="card-body"> <h4 class="card-title"> @result?.Title </h4> <div class="details-container"> <div class=""> @if (result?.Authors?.Any() == true) { <p class="card-text p-first"> Authors: <small class="text-muted">@string.Join(", ", result.Authors)</small> </p> } @if (result?.Categories?.Any() == true) { <p class="card-text p-second"> Categories: <small class="text-muted">@string.Join(", ", result.Categories)</small> </p> } </div> <div class="numPages-status"> @if (result?.PageCount != null) { <p class="card-text p-first"> Pages: <small class="text-muted">@result.PageCount</small> </p> } @if (result?.Status != null) { <p class="card-text p-second"> Status: <small class="text-muted">@result.Status</small> </p> } </div> </div> <div class="long-text-container"> <p class="card-text"><small class="text-muted">@result?.LongDescription?.Text</small></p> </div> @if (!string.IsNullOrEmpty(result?.PublishedDate)) { <div class="date-container"> <p class="card-text"> Published Date: <small class="text-muted small-date">@FormatDate(result.PublishedDate)</small> </p> </div> } </div> </div> </div> </div> </div> } </div> } else if (SearchResults != null) { <p>No results found.</p> } @code { [Parameter] public List<BookDoc> SearchResults { get; set; } = new List<BookDoc>(); private string FormatDate(string? date) { if (DateTime.TryParse(date, out DateTime parsedDate)) { return parsedDate.ToString("MMMM dd, yyyy"); } return ""; } }

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:

@if (Facets != null) { <div class="facets-container"> @foreach (var facet in Facets) { <h3>@facet.Key</h3> @foreach (var option in facet.Value) { <div> <input type="checkbox" checked="@IsFacetSelected(facet.Key, option.Key)" @onclick="() => ToggleFacet(facet.Key, option.Key)" /> @option.Key (@option.Value) </div> } } </div> } @code { [Parameter] public Dictionary<string, Dictionary<string, long>>? Facets { get; set; } [Parameter] public EventCallback<Dictionary<string, List<string>>> OnFacetChanged { get; set; } private Dictionary<string, List<string>> selectedFacets = new(); private void ToggleFacet(string facetName, string facetValue) { if (!selectedFacets.TryGetValue(facetName, out var facetValues)) { facetValues = selectedFacets[facetName] = new List<string>(); } if (!facetValues.Remove(facetValue)) { facetValues.Add(facetValue); } OnFacetChanged.InvokeAsync(selectedFacets); } private bool IsFacetSelected(string facetName, string facetValue) { return selectedFacets.ContainsKey(facetName) && selectedFacets[facetName].Contains(facetValue); } }

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 :

@page "/" @rendermode InteractiveServer @using BlazorApp.Models @using BlazorApp.Services @inject ElasticsearchService ElasticsearchService @inject ILogger<Search> Logger <PageTitle>Search</PageTitle> <div class="top-row px-4 "> <div class="searchbar-container"> <h4>Semantic Search with Elasticsearch and Blazor</h4> <SearchBar OnSearch="PerformSearch" /> </div> <a href="https://www.elastic.co/search-labs/esre-with-blazor" target="_blank">About</a> </div> <div class="px-4"> <div class="search-details-container"> <p role="status">Current search term: @currentSearchTerm</p> <p role="status">Total results: @totalResults</p> </div> <div class="results-facet-container"> <div class="facets-container"> <Facet Facets="facets" OnFacetChanged="OnFacetChanged" /> </div> <div class="results-container"> <Results SearchResults="searchResults" /> </div> </div> </div> @code { private string currentSearchTerm = ""; private long totalResults = 0; private List<BookDoc> searchResults = new List<BookDoc>(); private Dictionary<string, Dictionary<string, long>> facets = new Dictionary<string, Dictionary<string, long>>(); private Dictionary<string, List<string>> selectedFacets = new Dictionary<string, List<string>>(); protected override async Task OnInitializedAsync() { await PerformSearch(); } private async Task PerformSearch(string searchTerm = "") { try { currentSearchTerm = searchTerm; var response = await ElasticsearchService.SearchBooksAsync(currentSearchTerm, selectedFacets); if (response != null) { searchResults = response.Documents; facets = response.Facets; totalResults = response.TotalHits; } else { Logger.LogWarning("Search response is null."); } StateHasChanged(); } catch (Exception ex) { Logger.LogError(ex, "Error performing search."); } } private async Task OnFacetChanged(Dictionary<string, List<string>> newSelectedFacets) { selectedFacets = newSelectedFacets; await PerformSearch(currentSearchTerm); } }

Unsere Seite funktioniert!

Blazor-Seitenbeispiel

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 :

.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

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

.input-group .input-group-svg { background: transparent; border: transparent; pointer-events: none; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .search-details-container { display: flex; justify-content: space-between; margin-top: 1rem; } .searchbar-container { padding-top: 2rem; display: flex; flex-direction: column; flex-grow: 1; height: 100%; max-width: 100%; } .searchbar-container h4 { margin: 0; } .top-row { margin-top: -1.1rem; position: relative; background-color: hsl(216, 29%, 67%); border-bottom: 1px solid #d6d5d5; display: flex; align-items: center; height: 100%; padding: 0 1rem; } .top-row a { margin-left: auto; margin-top: -4rem; color: #000000; text-decoration: none; } .top-row a:hover { text-decoration: underline; } @media (max-width: 640.98px) { .top-row { justify-content: space-between; } .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; } } @media (min-width: 641px) { .top-row.auth ::deep a:first-child { flex: 1; text-align: right; width: 0; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } }

Unsere Seite sieht jetzt besser aus:

Blazor-Seite nach dem Hinzufügen von Stilen für die Suchseite

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:

.facets-container { font-size: 15px; margin-right: 4rem; overflow-x: auto; white-space: nowrap; max-width: 300px; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .results-facet-container > * { flex-shrink: 0; }

Für Results.razor.css:

.image-container { display: flex; justify-content: center; align-items: center; height: 100%; padding: 1rem; box-sizing: border-box; } .image-container img { max-width: 100%; height: auto; border-radius: 0.5rem; } .placeholder { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: #f0f0f0; border: 1px solid #ccc; font-size: 0.9rem; color: #888; text-align: center; padding: 1rem; border-radius: 0.5rem; } .card-body { padding: 1rem; } .details-container { display: flex; justify-content: space-between; padding: 1.5rem 0; } .date-container { margin-top: 1rem; display: flex; justify-content: flex-end; } .date-container .small-date { font-weight: bold; }

Endergebnis:

Endergebnis der Erstellung der Blazor-App-Seite

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:

private static Action<QueryDescriptor<BookDoc>> BuildSemanticQuery( string searchTerm, Dictionary<string, List<string>> selectedFacets ) { var filters = BuildFilters(selectedFacets); return query => query.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription").Query(searchTerm))) .Filter(filters.ToArray()) ); } private static Action<QueryDescriptor<BookDoc>> BuildMultiMatchQuery( string searchTerm, Dictionary<string, List<string>> selectedFacets ) { var filters = BuildFilters(selectedFacets); if (string.IsNullOrEmpty(searchTerm)) { return query => query.Bool(b => b.Filter(filters.ToArray())); } return query => query.Bool(b => b.Should(m => m.MultiMatch(mm => mm.Query(searchTerm).Fields(new[] { "title", "shortDescription" }) ) ) .Filter(filters.ToArray()) ); }

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:

public async Task<ElasticResponse> SearchBooksAsync( string searchTerm, Dictionary<string, List<string>> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Modify the query builder to use the selected search method. var multiMatchQuery = BuildMultiMatchQuery(searchTerm, selectedFacets); // For full text search var semanticQuery = BuildSemanticQuery(searchTerm, selectedFacets); // For semantic search // In this case we will not use retrievers, but you can add them if you want to use them. var response = await _client.SearchAsync<BookDoc>(s => s.Index("elastic-blazor-books") .Query(multiMatchQuery) // Change this line to use different search methods, for example: .Query(semanticQuery) for semantic search .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary<string, Dictionary<string, long>>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } }

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.

]]> https://www.elastic.co/search-labs/blog/search-app-with-esre-blazor https://www.elastic.co/search-labs/blog/search-app-with-esre-blazor Wed, 09 Oct 2024 00:00:00 GMT