Entkoppelte Suche mit Drupal Search API

TLDR; Das Modul Search API Decoupled wird jetzt mit einem Javascript-Client geliefert, der sofort einsatzbereit ist. Zum Testen fügen Sie das Modul einfach Ihrer Drupal-Installation hinzu und aktivieren Sie das Demo-Submodul. Wenn Sie mehr über die Architektur erfahren möchten, wo sich der Code befindet, warum einen Client entwickelt haben und einige schöne Screencasts sehen möchten, lesen Sie weiter. Wenn Sie eine Demo erhalten möchten, kommen Sie zu unserer Session auf der Drupalcon Lille 2023.

Wir haben das Modul Search API Decoupled veröffentlicht, um die Erstellung ansprechender Sucherlebnisse mit clientseitigen Javascript-Anwendungen zu ermöglichen.

Im Vergleich zur herkömmlichen serverseitigen Suchen sind clientseitige Lösungen viel schneller, da das Abrufen und Rendern von Suchergebnissen wesentlich effizienter ist als das Anfragen vollständiger Suchseiten.

Wir haben die Backend-Funktionalität von Search API Decoupled auf den Drupal Dev Days 2023 in Wien. Die Folien und das Video sind online verfügbar.

Allerdings benötigt Drupal einen voll funktionsfähigen Suchanwendung, damit Entwickler und Vermarkter die Funktionalität für ihre Projekte problemlos testen können.

Eine solche Anwendung sollte standardmäßig hervorragende Suchfunktionen bieten und einfach zu erweitern und anzupassen sein.

Wir haben uns beim Drupal Innovation Contest Pitchburgh um eine Förderung beworben, 
haben diese aber nicht erhalten.

Wir haben uns dennoch entschieden, die Funktionalität zu entwickeln und als frei verfügbare Open-Source-Software zu veröffentlichen.

Da mit Search API Decoupled erstellte Lösungen aus serverseitigen und clientseitigen Funktionen bestehen, die unabhängig voneinander entwickelt werden, haben wir beschlossen, dass der Javascript-Client als separates Projekt verwaltet werden sollte.

Drupal unterstützt das Hosten von Javascript-Projekten, daher haben wir dort die Quellcode-Repositories erstellt:

• Drupal: Search API Decoupled Client
• Drupal: Search API Decoupled Client UI

Für beide Projekte veröffentlichen wir die entsprechenden Pakete im Paketmanager npm:

• npm: Search API Decoupled / Client
• npm: Search API Decoupled / UI

Die Client-Pakete können dann als abhängige Bibliotheken mit Composer in das Drupal-Modul eingebunden werden.

Diese Pakete werden als abhängige Bibliotheken im Untermodul Search API Decoupled UI mittels Composer hinzugefügt.

Als Ergebnis verfügen Sie über eine voll funktionsfähige clientseitige Suche. Um das Testen zu vereinfachen, haben wir ein Demo-Untermodul beigefügt. Aktivieren Sie einfach das Untermodul und sehen Sie die clientseitige Suche in Aktion.

Hier ist ein Screencast, der zeigt, wie dies mit dem Drupal-Theme Olivero und der Demo-Konfigurationen funktioniert:

Stellen Sie beim lokalen Ausprobieren sicher, dass Sie das Merge-Plugin für Composer installiert haben. Einzelheiten finden Sie auf der Projektseite.

Wie Sie dem Screencast oben entnehmen können, lässt sich die Suche gut in bestehende Frontends integrieren.

Um die vorhandenen Such-Widgets anzupassen, können Sie die Elemente mit CSS-Selektoren gezielt auswählen.

Um die Suche an Ihre Bedürfnisse anzupassen, ändern Sie die Widgets oder ordnen Sie das Layout in der Backend-Benutzeroberfläche von Search API De Coupled neu an.

Hier ein Screencast, wie Sie die Suche im Backend anpassen können:

Sie können die UI-Elemente der Such-App jedoch auch überschreiben und erweitern. Aus diesem Grund haben wir die clientseitige Suchfunktion in zwei Pakete aufgeteilt. Wenn Sie die UI-Elemente der Such-App überschreiben, erweitern oder vollständig austauschen möchten, können Sie den Bibliotheksmechanismus von Drupal nutzen, um die bereitgestellte Funktionalität zu entfernen und/oder Ihre eigene hinzuzufügen.

Für uns bei 1xINTERNET ist das wichtig, da wir unsere Frontends mit Designsystemen und Webkomponenten aufbauen. Die bei der Suche verwendeten Widgets sind Teil unseres Designsystems. Daher deaktivieren wir die Standard-UI-Bibliothek und verwenden stattdessen unsere interne.

Hier ist ein Screencast der Suche mit benutzerdefinierten Widgets, die als Webkomponenten erstellt wurden:

Wenn Sie die Suche mit Webkomponenten ausprobieren möchten, können Sie unter https://www.1xinternet.de/en/try-drupal eine Demo-Instanz starten.

Zu guter Letzt bieten wir eine großartige Entwicklererfahrung für die Mitarbeit an der Javascript-Client-App. Wenn Sie die Repositorys klonen, können Sie einfach eine voll funktionsfähige eigenständige Such-App ausführen, um die Funktionalität zu testen und zu entwickeln.

Verbinden Sie es einfach mit einer beliebigen Drupal-Instanz, für die Search API Decoupled aktiviert und ein Suchendpunkt konfiguriert ist.

So sieht die Entwicklungsumgebung für die Such-App aus:

Wir haben viele Ideen, wie wir die Such-API-Entkopplung und die Client-Software verbessern können.

Einige der Ideen sind:

• Serverseitige Suchkriterien zulassen
• Layoutoptionen hinzufügen
• Erweitern Sie die UI-Elemente
  • Pager…

Wir würden uns über Ihr Feedback zur Funktionalität freuen. Und natürlich sind wir auf der Suche nach Contributions, um die Funktionalität weiter zu verbessern.