Tutorial: Eine einfache Angular Komponente für Solr

Dieser Artikel ist Teil 1 von 1 der Serie Angular-Solr
  • Tutorial: Eine einfache Angular Komponente für Solr

In den Projekten der letzten Jahre habe ich mich in einiger Tiefe mit dem Lucene-basierten Search-Server Apache Solr befasst.

Mit Solr ist ein Suchserver – beispielsweise für einen Onlineshop – in Kürze aufgesetzt und bietet darüber hinaus viel Freiraum zur Optimierung und Erweiterung gemäß der eigenen Anforderungen. Solr bietet Zugriff auf seine Suchfunktionalität (Queries) über eine REST-Schnittstelle.

Ziel dieses Artikels ist die exemplarische Entwicklung einer Angular Komponente, die für die Suche direkt auf eine Solr-Instanz zugreift.

Ich setzte dabei nur grundlegende Kenntnis von Angular voraus.

Mit diesem Artikel kannst du folgende Dinge nachvollziehen:

  • Eine eigene Angular Komponente zu bauen
  • Eine Integration aus Angular mit einem externen Service zu erreichen
  • Ideen zu sammeln, wie eine Angular-Solr Integration in deinem konkrten Fall aussehen könnte

In folgenden Artikeln entwickele ich diesen ersten Entwurf weiter zu einem wiederverwendbaren Modul, die auch via npm angeboten werden kann.

Warnung: Wir greifen der Einfachkeit halber auf eine völlig ungesicherte lokale Solr Instanz zurück, was natürlich für auch nur halbwegs produktive Systeme nicht geeignet ist!

Eine Solr Instanz für die Entwicklung beschaffen

Um eine Komponente zu entwickeln, die auf einen Solr-Suchservice zugreifen kann, benötigen wir eine Solr-Instanz, gegen die wir entwickeln können.
Man kann Solr zwar recht simpel direkt auf der eigenen Manschine installieren, aber die Solr Community macht es uns noch einfacher: Docker!

Es gibt ein fertig konfiguriertes und mit Demodaten versorgtes Docker image, das wir – eine lokale Docker Installation vorausgesetzt – einfach pullen und starten können.

Mit einem einfachen Befehl lädt docker alle benötigten Abhängigkeiten herunter und startet eine Demo-Instanz.

docker run --name solr_demo -d -P solr solr-demo

(Achtung: Dieser Befehl könnte u.U. zu einem späteren Zeitpunkt nicht mehr funktionieren, wenn die bereitgestellten images weiterentwickelt und verändert wurden. Konsultiere dazu immer die Dokumentation auf Dockerhub.)

Beim ersten docker run sieht der Konsolen Output etwa so aus

Danach steht (in den meisten Fällen) unter der URL http://localhost:8983 das Solr-Admin Interface zur Verfügung.
(Solltest du Docker unter Windows ausführen kann es sein, dass der „docker-localhost“ aufgrund der externen Virtualisierung unter einer anderen IP Adresse läuft. Ein einfaches docker-machine ip verrät dir diese IP.)

Damit haben wir nun einen einsatzbereiten Solr-Server, gegen den wir unsere Angular Komponente entwickeln können.

Hinweis: Je nach Setup kann bei diesem Vorgehen die CORS-Policy der Browser zum Problem werden. Du kannst das Problem entweder in der Solr Instanz selbst per Konfiguration beheben, oder du installierst dir ein Plugin für deinen Browser, das das Problem für die Entwicklung behebt z.b: https://addons.mozilla.org/de/firefox/addon/cors-everywhere/.
In einem produktiven Umfeld muss die CORS Problematik durch korrekte Konfiguration behoben werden.

Eine Suchanfrage an den Solr stellen

Der Solr bietet eine Admin-Oberfläche. Du findest sie unter http://<deine-solr-adresse>:<solr-port_meist-8983>/solr/.

Hier bietet sich die Möglichkeit Suchanfragen auszutesten. Dazu navigieren wir über den Core-Selector Auf die „Query Funktion (Siehe Screenshot).

Bild der Solr-Admin Oberfläche
Solr-Admin Oberfläche

Wenn man die Query einfach vorkonfiguriert absendet, erhält man alle Dokumente zurück. Damit kann man sich ein wenig mit der Struktur der Daten befassen, die der Solr-Core beinhaltet. Zudem erhält man so die URL unter der die Funktionalität aufgerufen werden kann.

Wichtig für unsere Zwecke sind hier nur der q und der df Parameter:

  • q beinhaltet den Suchausdruck
  • df definiert ein default-field, in dem gesucht werden soll. Das ermöglicht es uns, im q Parameter nur noch den Suchbegriff zu platzieren.

 

Ein Angular Projekt aufsetzen

Für die Angular Komponente benötigen wir ein Projekt als Entwicklungskontext. Dafür verwenden wir das Angular CLI.
Installiert wird das CLI via npm:
npm install -g @angular/cli
Hiermit erstellen wir ein neues Angular Projekt:

ng new NgSolr

(Die Quellen für dieses Projekt finden Sie auf github: https://github.com/jbin/angular-solr-demo)

Das CLI legt nun ein Angularprojekt mit dem Namen NgSolr an. Dies wird der Entwicklungskontext für die Komponente.

Mit einem einfachen ng serve starten Sie ihre neue Angular App.

Die Solr Komponente erstellen

Das CLI unterstützt auch in der Erstellung unserer Komponente:

ng generate component SolrSearch

Dieser Befehl legt (u.a.) folgende Dateien an:

  • solr-search.component.html
  • solr-search.component.ts

Das ist die Ausgangsbasis für unsere erste Solr Integration.

Als Oberfläche soll uns zunächst ein simples Suchformular genügen. Dazu verwenden wir einfach ein Basis-HTML Formular:

Die Verbindung zum Solr Server herstellen

Um Suchanfragen an den Solr stellen zu können benötigen wir das httpClient Modul von Angular.
Wir importieren dieses in unsere Applikation (app.module.ts).
Nun wechseln wir in unsere Komponentenklasse (solr-search.component.ts).

Hier definieren wir einen http-GET request, der auf den /select Endpoint unserer Solr-Collection zeigt.
In einer search() Methode bauen wir nun den Request mit den beiden oben genannten Parametern auf:

Beispielrequest: http://192.168.99.100:32768/solr/demo/select?df=features&q=Suchbegriff

Nun kann das Template erweitert werden:

  • Das Formular soll onSubmit die Search Funktion ausführen
  • Das Formular soll den Suchterm aus dem Inputfeld verwenden
  • Eine Einfache Ausgabe soll die Ergebnisse darstellen

Damit haben wir eine Simple Basis-Suchfunktion implementiert.

In den folgenden Artikeln der Serie gehe ich den folgenden Fragen nach:

  • Eine Solr Domain-Abstraktion für Angular entwickeln(Solr-Spezifische ts-Klassen).
  • Die Komponente konfigurierbar machen.
  • Die Komponente um einen Service erweitern.
  • Eine Angular-Solr-Toolbox als Modul kapseln.
  • Das Modul via npm im Ökosystem anbieten.

Stay tuned!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.