Implementácia Algolia Search do e-shopu - Bart Digital Products Implementácia Algolia Search do e-shopu - Bart Digital Products

Implementácia Algolia Search do e-shopu

Na projekte conrad.hu sme po spustení eshopu používali na vyhľadávanie produktov vlastné riešenie využívajúce Elasicsearch hostovaný na našom vlastnom serveri. S týmto vyhľadávaním sme ale neboli celkom spokojní a to z nasledujúcich dôvodov:

  • Zákazník mal dosť špecifické požiadavky na zoraďovanie výsledkov a váhu jednotlivých polí v indexe. Taktiež chcel mať možnosť upravovať nastavenia cez administráciu.
  • Zákazník chcel mať podporu maďarského jazyka, automatickú opravu chýb ako aj možnosť importovať a následne editovať synonymá cez administračné rozhranie.
  • Produktový katalóg obsahuje zhruba 500 000 produktov, pričom každý produkt môže obsahovať až desiatky parametrov. Fazetové vyhľadávanie pri tomto množstve parametrov bolo v prípade Elasticsearch dosť pomalé a nedostačujúce.

Preto sme sa rozhodli použiť iný vyhľadávací engine. Po dôkladnom porovnaní viacerých možností padla voľba na vyhľadávač Algolia. Algolia má prehľadnú administráciu, možnosť skúsiť trial verziu na 14 dní zadarmo a tiež obsiahlu a prehľadnú dokumentáciu, ktorá podstatne urýchli implementáciu.

Vytvorenie a naplnenie indexu

Na začiatku je potrebné vytvoriť a naplniť index dátami (produktami). Index je možné vytvoriť v administračnom rozhraní Algolia cez menu Indices -> New. Názov indexu by mal obsahovať prefix prod prípadne test, podľa toho či sa jedná o testovaciu alebo produkčnú databázu. Náš produkčný index sa teda volá prod_products. Naplnenie dátami je možné spraviť viacerými spôsobmi:

  • Ručné naplnenie v administrácii
  • Upload súboru v administrácii
  • Použiť Algolia API

My sme si zvolili samozrejme tretiu možnosť, keďže sa jedná o veľké množstvo dát a proces je potrebné automatizovať. Keďže na strane backendu využívame Python API, použili sme oficiálnu knižnicu algoliasearch priamo od Algolie.

Najskôr je potrebné nadviazať spojenie s API a autentifikovať sa. To sa robí nasledovne:

[pastacode lang=“python“ manual=“from%20algoliasearch.search_client%20import%20SearchClient%0A%0Aclient%20%3D%20SearchClient.create(app_id%2C%20api_key)“ message=““ highlight=““ provider=“manual“/]

app_id a api_key je možné nájsť v administračnom rozhraní. Algolia obsahuje niekoľko rôznych typov API kľúčov. My potrebujeme použiť Write API Key, keďže ideme dáta zapisovať. Po úspešnom nadviazaní spojenia a autentifikácii si vyberieme konkrétny index.

[pastacode lang=“python“ manual=“index%20%3D%20client.init_index(index_name)“ message=““ highlight=““ provider=“manual“/]

Následne už pridáme pripravené záznamy do indexu:

[pastacode lang=“python“ manual=“index.save_objects(products_algolia)“ message=““ highlight=““ provider=“manual“/]

Ako parameter funkcie save_objects(data) sa zadáva pole objektov reprezentujúce jednotlivé produkty. Pole môže vyzerať napríklad takto:

[pastacode lang=“javascript“ manual=“%5B%0A%20%20%7B%0A%20%20%20%20%22objectID%22%3A%201572126%2C%0A%20%20%20%20%22name%22%3A%20%22Produkt%201%22%2C%0A%20%20%20%20%22description%22%3A%20%22Popis%20pre%20produkt%201%22%2C%0A%20%20%20%20%22price%22%3A%20351.25%2C%0A%20%20%20%20%22availability%22%3A%208%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20%22objectID%22%3A%201572185%2C%0A%20%20%20%20%22name%22%3A%20%22Produkt%202%22%2C%0A%20%20%20%20%22description%22%3A%20%22Nejak%C3%BD%20popis%20pre%20produkt%202%22%2C%0A%20%20%20%20%22price%22%3A%20199.9%2C%0A%20%20%20%20%22availability%22%3A%200%0A%20%20%7D%0A%5D“ message=““ highlight=““ provider=“manual“/]

Hodnota objectID je veľmi dôležitá, je to unikátny identifikátor pre záznam. V prípade, že znovu zavoláme funkciu save_objects() so záznamom s rovnakým objectID, Algolia tieto objekty pokladá za rovnaký záznam a prepíše tak dáta v pôvodnom zázname. Funkcia save_objects teda pracuje ako upsert. Ak daný záznam s daným objectID neexistuje, vytvorí ho. Ak existuje, len zaktualizuje dáta pre pôvodný záznam. My používame ako objectID objednávacie číslo produktu, ktoré je unikátne pre každý produkt.

Po úspešnom pridaní záznamov do databázy je možné okamžite začať testovať a ladiť vyhľadávanie! To je veľká výhoda, lebo výsledky vidíme hneď, bez toho aby sme čo i len začali implementovať vyhľadávanie na stránku. U nás sme teda začali pracovať na implementácii autocomplete, zatiaľ čo zákazník už mohol ladiť vyhľadávanie aby splnilo jeho požiadavky.

Aktualizácia dát

Okrem jednorazového naplnenia indexu je samozrejme potrebná aj pravidelná aktualizácia dát. Jednak nám v eshope pribúdajú nové produkty, ale aj informácie pri starých produktoch (cena, dostupnosť a pod.) je potrebné udržiavať pokiaľ možno čo najaktuálnejšie. My robíme pravidelnú aktualizáciu produktov 1x denne. Z Conrad API získame kazdú noc informáciu o tom, ktoré produkty sa za posledný deň zmenili. Tieto produkty následne prejdeme a zaktualizujeme ich v Algolii. Pravidelnú aktualizáciu produktov na bete neriešime, tá slúži len na testovacie účely a v prípade potreby ju zaktualizujeme ručne.

Okrem pravidelnej aktualizácie vykonávame v prípade potreby aj okamžitú aktualizáciu. Napríklad v prípade, že administrátor zmení kľúčové slová pre produkt. Takáto zmena sa v Algolii prejaví okamžite a administrátor tak má možnosť vyskúšať si vyhľadanie pre zmenené kľúčové slová.

Autocomplete

Na implementáciu autocomplete funkcionality sme sa rozhodli použiť JS knižnicu InstantSearch priamo od Algolie. Výhoda tohto riešenia je hlavne rýchlosť. Keďže vyhľadávanie nie je potrebné spracovávať na strane backendu, výsledky vyhľadávania sa tak okamžite zobrazia užívateľovi.

A keďže pripravená knižnica obsahuje všetko potrebné tak aj implementácia je veľmi rýchla a zobrazenie výsledkov je tak otázka pár hodín roboty aj s prestávkou na kávu. Najskôr musíme na stránku pridať knižicu pre instantseach a pre algoliasearch.

[pastacode lang=“markup“ manual=“%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Falgoliasearch%403.35.1%2Fdist%2FalgoliasearchLite.min.js%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Finstantsearch.js%404.0.0%2Fdist%2Finstantsearch.production.min.js%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E“ message=““ highlight=““ provider=“manual“/]

Aj v javascripte je najskôr potrebné nadviazať spojenie s Algoliou a autentifikovať sa. Tu však treba dať veľký pozor! apiKey je iný ako v prípade pridávania záznamov. Teraz je potrebné použiť Search API Key. To preto, lebo tento kľúč sa nachádza na strane frontendu a ktokoľvek si ho môže pozrieť a použiť. Preto nemôžeme použiť kľúč ktorý umožňuje zmenu dát.

[pastacode lang=“javascript“ manual=“var%20searchClient%20%3D%20algoliasearch(appId%2C%20apiKey)%3B“ message=““ highlight=““ provider=“manual“/]

Následne si inicializujeme instantsearch kde nastavíme názov indexu.

[pastacode lang=“javascript“ manual=“var%20search%20%3D%20instantsearch(%7B%0A%20%20%20indexName%3A%20’prod_products’%2C%0A%20%20%20searchClient%3A%20searchClient%2C%0A%7D)%3B“ message=““ highlight=““ provider=“manual“/]

Potom pridáme widget pre input so zadanou požiadavkou.

[pastacode lang=“javascript“ manual=“search.addWidget(%0A%20%20%20%20%20%20%20%20instantsearch.widgets.searchBox(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20container%3A%20’%23algolia-search-input-container’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20placeholder%3A%20’Search…’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20showReset%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20showLoadingIndicator%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20autofocus%3A%20true%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20)%3B“ message=““ highlight=““ provider=“manual“/]

Ďalej je potrebné pridať ďalší widget a to na zobrazenie výsledkov.

[pastacode lang=“javascript“ manual=“search.addWidget(%0A%20%20%20%20%20%20%20%20instantsearch.widgets.hits(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20container%3A%20’%23algolia-results’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20templates%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20item%3A%20’%3Ca%20data-item-number%3D%22%7B%7Bitem_number%7D%7D%22%20href%3D%22%2Fhu%2F%7B%7Btxtid%7D%7D-%7B%7Bitem_number%7D%7D.html%22%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3Cdiv%20class%3D%22img%22%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%7B%7B%23photo%7D%7D’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3Cimg%20src%3D%22%7B%7Bphoto%7D%7D%3Fx%3D41%26y%3D41%22%20align%3D%22left%22%20%2F%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%7B%7B%2Fphoto%7D%7D’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3C%2Fdiv%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3Cdiv%20class%3D%22info%22%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3Cdiv%20class%3D%22name%22%20title%3D%22%7B%7Bname%7D%7D%22%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%7B%7B%23helpers.highlight%7D%7D%7B%20%22attribute%22%3A%20%22name%22%20%7D%7B%7B%2Fhelpers.highlight%7D%7D’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3C%2Fdiv%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3C%2Fdiv%3E’%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20’%3C%2Fa%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20)%3B“ message=““ highlight=““ provider=“manual“/]

Následne už len spustíme vyhľadávanie a to je všetko! Po spustení stránky by mal autocomplete fungovať.

[pastacode lang=“javascript“ manual=“search.start()%3B“ message=““ highlight=““ provider=“manual“/]

Podstránka pre vyhľadané produkty

Podstránka pre vyhľadané produkty už obsahuje aj backend implementáciu. To z toho dôvodu, že v Algolii sa nenachádzajú všetky potrebné dáta pre produkt, ale len také, ktoré súvisia s vyhľadávaním. Taktiež chceme použiť čo najčerstvejšie dáta, teda tie, ktoré sú v databáze.

Proces je preto nasledovný: Z Algolie sa získajú výsledky pre zadaný vyhľadávaný výraz. Následne sa výsledky prejdú a podľa objectID sa načítajú produkty z databázy. Tieto produkty sa následne zobrazia na podstránke.

Na vyhľadanie produktov používame rovnakú knižicu ako na ich pridanie do algolie. Taktiež nadviazanie spojenia a výber indexu je rovnaký. A keďže nepotrebujeme dáta upravovať, tak ako API kľúč použijeme Search API Key. Samotné vyhľadanie záznamov vyzerá nasledovne:

[pastacode lang=“python“ manual=“client%20%3D%20SearchClient.create(app_id%2C%20api_key)%0Aindex%20%3D%20client.init_index(index_name)%0A%0Apage%20%3D%20(offset%20%2F%20limit)%0A%0Asearch_options%20%3D%20%7B%0A%20%20%20’facets’%3A%20%5B’*’%5D%2C%0A%20%20%20’hitsPerPage’%3A%20limit%2C%0A%20%20%20’page’%3A%20page%2C%0A%20%20%20’sortFacetValuesBy’%3A%20’count’%0A%7D%0A%0Asearch_response%20%3D%20index.search(query%2C%20search_options)%0A“ message=““ highlight=““ provider=“manual“/]

search_options môže obsahovať množstvo rôznych ďalších parametrov upravujúcich vyhľadanie. Najlepšie je pozrieť sa priamo do dokumentácie aké sú možnosti a čo ktorý parameter nastavuje.

Zoznam vyhľadaných výsledkov sa nachádza v atribúte hits. A teda napríklad zoznam objednávkových čísel vyhľadaných produktov tak vieme získať nasledovne:

[pastacode lang=“python“ manual=“product_numbers%20%3D%20%5B%5D%0A%0Afor%20hit%20in%20search_response.get(‚hits’%2C%20%5B%5D)%3A%0A%20%20%20%20product_numbers.append(hit%5B’objectID’%5D)%0A“ message=““ highlight=““ provider=“manual“/]

Implementácia fazetového vyhľadávania

Možnosť filtrovať vyhľadané produkty podľa konkrétnych parametrov bola pre nás extrémne dôležitá. Vo svete elektronických súčiastok sa parametrické vyhľadávanie používa veľmi často a bez tohto typu filtrovania by vyhľadávanie nemalo zmysel.

Algolia samozrejme umožňuje filtrovať výsledky podľa parametrov a takýto typ filtrovania je označovaný ako fazetové filtrovanie. Okrem možnosti vyfiltrovať len výsledky s daným parametrom nám pre každé vyhľadávanie príde aj zoznam všetkých použiteľných parametrov spolu s číslom, koľko výsledkov nám ostane po pridaní daného parametra.

Pre použitie fazetového filtrovania je najskôr potrebné označiť, ktoré polia sa majú považovať za fazetový filter. U nás sme pre každý záznam vytvorili pole facets a v ňom sa nachádza zoznam parametrov. Kľúč je názov parametra a hodnota je jeho hodnota.

Príklad fazetov pre vybraný produkt:

[pastacode lang=“javascript“ manual=“%7B%0A%20%20%20%20%22facets%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22CATEGORY%22%3A%20%22USB-s%20t%C3%B6lt%C5%91k%C3%A9sz%C3%BCl%C3%A9kek%22%2C%0A%20%20%20%20%20%20%20%20%22BRAND%22%3A%20%22VOLTCRAFT%22%2C%0A%20%20%20%20%20%20%20%20%22PRICE%22%3A%202190%2C%0A%20%20%20%20%20%20%20%20%22RATING%22%3A%203%2C%0A%20%20%20%20%20%20%20%20%22ATT.OUTPUTS_LoV%22%3A%20%22USB%22%2C%0A%20%20%20%20%20%20%20%20%22ATT.NUMBER_OUTPUTS%22%3A%20%222x%22%2C%0A%20%20%20%20%20%20%20%20%22ATT.PLACE_OF-ACTION%22%3A%20%22Szem%C3%A9lyg%C3%A9pkocsi%22%2C%0A%20%20%20%20%20%20%20%20%22ATT.OUTPUT_CURRENT_MAX_PER_CHANNEL%22%3A%20%221200mA%22%2C%0A%20%20%20%20%20%20%20%20%22ATT.NUM.OUTPUT_CURRENT_MAX%22%3A%20%222400mA%22%0A%20%20%20%20%7D%0A%7D%0A“ message=““ highlight=““ provider=“manual“/]

Okrem samotných parametrov produktu vkladáme medzi fazety aj cenu produktu, kategóriu, hodnotenie a značku. V Algolii je potrebné nastaviť ktoré polia majú slúžiť na fazetové filtrovanie. Dá sa to nastaviť napríklad aj cez administračné rozhranie, ale takýto spôsob je vhodný len v prípade že nemáme veľa filtrov. U nás sa nachádza viac ako 1000 filtrov a nastavenie sa teda robí cez API použítím funkcie set_settings()

[pastacode lang=“python“ manual=“index.set_settings(%7B%0A%20%20%20’attributesForFaceting’%3A%20facet_names%0A%7D)“ message=““ highlight=““ provider=“manual“/]

Pri vyhľadaní vieme parameter (fazet) pridať cez atribút facetFilters, čo je vlastne pole fazetov. Každý fazet je pole textových reťazcov v tvare: názov_facetu:hodnota. Napríklad pre vyhľadanie produktov ktoré majú hodnotenie 4* použijeme nasledovný kód:

[pastacode lang=“python“ manual=“search_options%20%3D%20%7B%0A%20%20%20’facets’%3A%20%5B’*’%5D%2C%0A%20%20%20’hitsPerPage’%3A%20limit%2C%0A%20%20%20’page’%3A%20page%2C%0A%20%20%20’sortFacetValuesBy’%3A%20’count’%2C%0A%20%20%20’facetFilters’%3A%20%5B%5B’facets.RATING%3A4’%5D%5D%0A%7D%0A%0Asearch_response%20%3D%20index.search(query%2C%20search_options)%0A“ message=““ highlight=““ provider=“manual“/]

Fazety vieme samozrejme aj kombinovať, napríklad vyhľadať produkty ktoré majú hodnotenie 4 alebo 5 a zároveň majú príkon 200W a podobne. Možností je tu naozaj veľa, najlepšie je zase pozrieť v dokumentácii a inšpirovať sa.

Nevýhody Algolia Search

Algolia má, tak ako každé vyhľadávanie aj svoje nevýhody. Medzi najvážnejšie nedostatky Algolia search považujeme nemožnosť zoradiť vyhľadané výsledky podľa niektorého z atribútov. Napríklad zoradiť produkty od najlacnejšieho po najdrahší.

Na to, aby bolo možné výsledky zoradiť je potrebné spraviť repliku indexu. Replikovaný index je následne previazaný s originálnym indexom a každá zmena záznamu v origináli spôsobí aj zmenu v replike. Hlavný problém spočíva v tom, že počet záznamov každej repliky sa počíta do celkového limitu záznamov. V našom prípade máme limit 1 000 000 záznamov. Ale len v samotnej v produkčnej databáze sa nachádza cez 450 000 produktov, podobné množstvo sa nachádza aj na testovacej databáze. Po sčítaní sa to teda len tak tak zmestí do limitu a neostane už ďalšie miesto pre repliky. Tám pádom sme na stránke nemohli použiť zoraďovanie výsledkov. Dá sa to sčasti riešiť cez vhodné filtre. Napríklad namiesto zoraďovania produktov podľa ceny sme implementovali posuvník s najvyššou a najnižšou cenou spomedzi vyhľadaných produktov. Užívateľ tak má možnosť zobraziť si len tie cenové hladiny, ktoré mu vyhovujú.

Záver

S vyhľadávaním cez Algolia Search sme aj napriek spomínaným nedostatkom veľmi spokojný. Vyhľadávanie je rýchle, spoľahlivé a zákazník má možnosť si cez administračné rozhranie konfigurovať skoro čokoľvek, bez nutnosti spolupráce programátora. Implementácia celého riešenia, od naplnenia dát, implementácie autocomplete a podstránky s vyhľadanými produktami až po odladenie a spustenie na produkcii zabrala len nejakých 40 hodín roboty.

Máš toto všetko v malíčku? Potom sa pridaj do nášho tímu!