Ga terug

Algolia - de basics

Meer en meer maken wij gebruik van Algolia, een serverless AI driven cloud service, om zoekfunctionaliteit te voorzien in onze projecten. 

www.algolia.com

Een goede zoekfunctionaliteit op een website wordt regelmatig gevraagd door onze klanten. Door de jaren heen hebben we hierdoor heel wat ervaring opgedaan op dit vlak. De ene keer volledig custom, de andere keer gebruik makend van externe platformen. De laatste tijd maken wij meer en meer gebruik van Algolia.

Wat is Algolia?

Algolia is een cloud service die gebruikt wordt om zoekresultaten op te halen. Deze zal zoeken in een index die volledig naar eigen noden ingevuld en geconfigureerd kan worden. Een object binnen een index heeft een objectID veld dat uniek moet zijn. Verder is de gebruiker volledig vrij in welke velden meegegeven worden. Per veld kan ingesteld worden of dit al dan niet zoekbaar is, of het als filter wordt gebruikt, of er op gesorteerd moet worden, of het veld meegestuurd wordt bij een zoekresultaat, etc.

Verder heeft Algolia een reeks implementatiemogelijkheden en de zoeksnelheid ervan ligt beduidend hoger dan de meeste andere services die bij ons de revue gepasseerd zijn. Het wordt volledig serverless gebruikt en ondersteund een hoop verschillende talen. Naast de talen worden er ook UI libraries, waaronder een aantal specifiek voor React, aangeboden. Omdat er veel mogelijkheden zijn kan de documentatie wat overweldigend zijn. Iets met bomen en een bos. Daarom leg ik hieronder de belangrijkste stappen en begrippen uit om een degelijke basis-zoekfunctionaliteit in JavaScript met Algolia op te kunnen zetten.

Setup

De meeste websites maken wij in Next.js. Helaas zijn de React UI libraries van Algolia niet volledig compatibel: De react-instantsearch-hooks-server library ondersteunt de /app structuur van Next.js 13 niet. Verder gebruikt de react-instantsearch library een router-object wanneer je zoek-parameters in de url van je pagina wilt gebruiken. Dit router-object kan je niet gebruiken wanneer je aan server side rendering doet. De setup hieronder beschreven is daarom alleen de basis, zonder gebruik te maken van UI libraries.

Om te beginnen installeren we algoliasearch via yarn of npm.

In het Algolia dashboard maak je een applicatie aan. Bij de instellingen links onderaan vind je de nodige API sleutels. Nu kunnen we een client maken met deze sleutels en een index gaan aanmaken of aanspreken.

Met saveObject kan een record toegevoegd worden aan een index. Hier wordt een JSON object aan meegegeven met een attribuut “objectID”. Dit objectID moet uniek zijn voor elk record. Andere attributen kunnen naar wens toegevoegd worden. De waarde van een attribuut kan een tekst, getal of lijst zijn.

Zoeken

Eens de index aangemaakt is kan er gezocht worden met de search functie. Indien er alleen gezocht wordt kan je ook kiezen om algoliasearch te gebruiken vanuit de “algoliasearch/lite”. De search functie verwacht twee argumenten. Een query en een object met zoekopties.

Het query argument wordt gebruikt om te zoeken tussen alle velden die als doorzoekbaar aangeduid zijn.

Welke velden doorzoekbaar zijn, wordt in Algolia per index ingesteld. Bij de “searchable attributes” in de configuratie kunnen deze velden toegevoegd worden. De volgorde geeft aan hoe belangrijk het veld is. In het voorbeeld hieronder zullen eerst resultaten getoond worden waarbij de query in het titel veld staat.

Of een veld doorzoekbaar is, wordt ook in het overzicht weergegeven door een vergrootglas naast het veld te tonen.

Het filters veld kan gebruikt worden om te filteren op basis van velden die aangeduid zijn in de facets.

Om een filter "tags:blog" te laten werken moet dus eerst in de configuratie van de index in Algolia het facet "type" toegevoegd worden.

Om meerdere condities toe te voegen of een negatieve conditie toe te voegen kunnen de termen 'AND' en 'NOT' gebruikt worden.

Een laatste instelling die ik wil aankaarten is het sorteren. Standaard staat dit al redelijk goed. En gezien in “searchable attributes” al grotendeels de volgorde wordt bepaald is dit niet meteen nodig om hier zaken toe te voegen. Al kan er wel een extra sortering toegevoegd worden indien gewenst.

In plaats van de configuratie van een index in het Algolia dashboard aan te passen, kan dit ook in code gebeuren. Hieronder een voorbeeld:

Samenvatting

  • Algolia werkt volledig serverless en geeft snel resultaat
  • De service biedt veel implementatiemogelijkheden en is makkelijk op te zetten
  • Volledig aanpasbaar aan de noden van de klant

Bent u op zoek naar een ervaren Next.js-ontwikkelaar in België om een bestaand project te ondersteunen of iets nieuws op te zetten?

Contacteer ons