Jak implementovat Meilisearch ve vaší aplikaci React

Následuje příspěvek hosta od Riccarda Giorata.

Úvod

V tomto rychlém tutoriálu se naučíte, jak snadno vytvořit vyhledávací stránku s okamžitými a spolehlivými výsledky díky výkonu MeiliSearch .

Probereme základní kroky pro spuštění vyhledávání a na konci přejdeme k pokročilejším tématům.

Pojďme si například znovu vytvořit rychlé a krásné vyhledávání značky Sport.

Zde je náhled videa toho, co budete stavět:

Předpoklady

Než začnete, ujistěte se, že máte na svém počítači již nainstalovaný Node.

Standardní kód pro svou aplikaci React vytvoříte pomocí vlastního projektu, který jsme pro vás vytvořili:https://github.com/Giorat/meili_react_demo

Nakonec tento tutoriál předpokládá, že jste již obeznámeni s Reactem. Pokud tomu tak není, můžete se podívat do dokumentace React, kde se dozvíte více.

Začínáme

Klonujte úložiště

git clone https://github.com/Giorat/meili_react_demo.git
cd meili_react_demo

Spusťte nový obraz Docker

Pokud jste naklonovali úložiště, pro nastavení instance MeiliSearch stačí provést v hlavní složce:

npm run setup_meili

Pokud jste neklonovali repo a chcete vytvořit přímo instanci Dockeru, proveďte tento příkaz:

docker run -p 7700:7700 -v $(pwd)/data.ms:/data.ms getmeili/meilisearch

Budete moci zkontrolovat, že MeiliSearch běží, na následující adrese URL:

• http://localhost:7700/

Vytvořte index v MeiliSearch

Index je entita, ve které jsou uloženy dokumenty, jako je pole objektů s určitými specifickými nastaveními a jedinečným primárním klíčem.

Více o vlastnostech indexů si můžete přečíst v dokumentaci MeiliSearch.

Abyste mohli vytvořit svůj index, musíte zjistit, jaký je váš primární klíč. Níže je ukázkový dokument k přidání do MeiliSearch.

{
  "id": 100013768717,
  "name": "Fitness Foldable Shoe Bag",
  "url": "https://www.decathlon.com/products/gym-foldable-shoe-bag",
  "vendor": "Domyos",
  "category": "Sport bag",
  "tags": [
    "Artistic Gymnastics",
    "Boy's",
    "CARDIO_FITNESS_ACCESSORIES",
    "CARDIO_FITNESS_BAGS",
    "CODE_R3: 11782"
  ],
  "images": "https://cdn.shopify.com/s/files/1/1330/6287/products/sac_20a_20chaussure_20kaki_20_7C_20001_20_7C_20PSHOT_20_490180e6-44e4-4340-8e3d-c29eb70c6ac8.jpg?v=1584683232",
  "creation_date": "2020-04-03T15:58:48-07:00",
  "price": "2.49"
}

V tomto dokumentu je pole, které obsahuje jedinečnou hodnotu dokumentu, id pole. Tento atribut se nazývá primary key v MeiliSearch.

Tento index můžete snadno vytvořit pomocí klienta Rest, jako je Postman, ale v tomto tutoriálu k tomu použijete MeiliSearch Javascript SDK přímo z node.js.

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    await meili.createIndex({ uid: "decathlon", primaryKey: "id" });

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Indexovat dokumenty

MeiliSearch přijímá dokumenty ve formátu JSON a ukládá je pro účely vyhledávání. Tyto dokumenty se skládají z polí, která mohou obsahovat jakýkoli typ dat.

Pro tento tutoriál si můžete stáhnout tento datový soubor plný sportovních položek:

• decathlon.json

Chcete-li nahrát všechny objekty z tohoto souboru JSON, použijte následující skript:

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    const decathlon = require("./decathlon.json"); // path to json file

    const index = await meili.getIndex("decathlon");

    await index.addDocuments(decathlon);

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Před spuštěním tohoto skriptu nezapomeňte změnit cestu k souboru JSON!

Připravte aplikaci React

Budete používat standardní aplikaci React, kterou můžete vytvořit pomocí CRA nebo jednoduše naklonováním tohoto úložiště:

git clone https://github.com/Giorat/meili_react_demo.git
cd meili_react_demo

Pokud dáváte přednost spuštění z prázdné aplikace, můžete si vytvořit vlastní pomocí následujícího příkazu. Aplikaci si můžete pojmenovat, jak chcete.

npx create-react-app meili_react_demo
cd meili_react_demo

Včetně CSS Tailwind

Chcete-li urychlit proces stylování, přidejte styl CSS Tailwind přímo do souboru index.html:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Konfigurace stavu App.js

Poté pomocí tohoto kódu upravte soubor App.js a nastavte jednoduchý vyhledávací formulář a několik stavových proměnných pro zpracování všech aspektů vyhledávání.

import React, { useState, useEffect } from "react";

// TODO configure the MeiliSearch Client

function App() {
  const [searchedWord, setSearch] = useState("dumbell");
  const [resultSearch, setResults] = useState([]);
  const [resultCards, setCards] = useState([]);

  // TODO add function to send searchedWord to MeiliSearch

  // TODO add function to parse the JSON object

  return (
    <div className="mx-auto">
      <div class="header font-sans text-white items-center justify-center">
        <header class="py-12">
          <img
            class="h-20 w-auto items-center justify-center p-2 mx-auto"
            src="/wide_logo.png"
            style={{ filter: "invert(0%)" }}
            alt=""
          />
          <h1 class="flex flex-wrap flex-grow text-3xl w-full justify-center p-4">
            Stop looking for an item — find it and work hard!
          </h1>
          <div class="border rounded overflow-hidden w-full flex justify-center mx-auto searchBox mt-6">
            <button class="flex items-center justify-center px-4 shadow-md bg-white text-black">
              <svg
                class="h-4 w-4 text-grey-dark"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
              </svg>
            </button>
            <input
              type="text"
              value={searchedWord}
              onChange={(event) => setSearch(event.target.value)}
              class="px-6 py-4 w-full text-black"
              placeholder="Product, sport, color, …"
            />
          </div>
        </header>
      </div>
      <div>
        <div class="flex flex-wrap searchResults">{resultCards}</div>
      </div>
    </div>
  );
}

export default App;

Tento kód by měl vypsat toto krásné záhlaví s vyhledávacím formulářem.

Výsledky hledání v React

Připojení k MeiliSearch z React pomocí MeiliSearch Javascript SDK je jednoduchá operace, kterou lze provést v několika krocích.

Klient MeiliSearch

Nainstalujte MeiliSearch SDK:

# if you use npm
npm install meilisearch
# if you use yarn
yarn add meilisearch

Nastavte klienta MeiliSearch s adresou URL serveru. V našem případě to byl počítač localhost Docker. Nakonec načtěte správný index z backendu.

Nahraďte tento komentář v App.js fragmentem kódu níže:
// TODO configure the MeiliSearch Client

import MeiliSearch from "meilisearch";

const client = new MeiliSearch({
  host: "http://127.0.0.1:7700/",
});

const index = client.getIndex("decathlon");

Odeslat vyhledávací dotaz

Použijte useEffect k provedení vyhledávání zadaných slov do MeiliSearch. Všechny výsledky budou nastaveny na jednoduchou stavovou proměnnou nazvanou „resultsSearch“.

Nahraďte tento komentář v App.js fragmentem kódu níže:
// TODO add function to send searchedWord to MeiliSearch

 useEffect(() => {
    // Create an scoped async function in the hook
    async function searchWithMeili() {
      const search = await index.search(searchedWord);
      setResults(search.hits);
    }
    // Execute the created function directly
    searchWithMeili();
  }, [searchedWord]);

Ukažte výsledky

Uvnitř druhého useEffect , budete prohledávat objekty JSON vrácené MeiliSearch. Budou mít stejnou strukturu než nahrané objekty JSON.

Pak je čas vytvořit seznam karet odkazujících na stránky produktů.

Nahraďte tento komentář v App.js fragmentem kódu níže:
// TODO add function to parse the JSON object

useEffect(() => {
    let arrayItems = [];
    for (let i = 0; i < resultSearch.length; i++) {
      const product = resultSearch[i];
      arrayItems.push(
        <div class="flex w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 p-3">
          <a
            href={product.url}
            class="flex-1 rounded overflow-hidden shadow-lg"
          >
            <img
              class="w-full h-48 object-cover"
              src={product.images}
              alt={product.name}
              onError={(e)=>{e.target.onerror = null; e.target.src="/wide_logo.png"}}
            />
            <div class="px-6 py-3">
              <div class="font-bold text-sm mb-1 text-gray-600 capitalize">
                {product.category}
              </div>
              <div class="font-bold text-xl mb-2 text-gray-800">
                {product.vendor} - {product.name.substr(0, 20)}
              </div>
              <p class="text-black text-xl font-bold text-base py-2">
                $ {product.price}
              </p>
            </div>
          </a>
        </div>
      );
    }
    setCards(arrayItems);
  }, [resultSearch]);

Zde se můžete podívat na úplný kód App.js:

• https://github.com/Giorat/meili_react_demo/blob/master/src/App.js

Živou aplikaci můžete navštívit zde:https://meili-react-demo.netlify.app/

Nakonfigurujte vyhledávání ještě více!

S MeiliSearch získáte spoustu dalších malých možností, které můžete doladit, abyste zlepšili své vyhledávání. Chcete-li pokročilý průzkum, budete muset provést několik dalších konfiguračních kroků.

Pořadí ve vyhledávání

Začněte změnou hodnocení vyhledávání nebo jednodušeji způsobem, jakým MeiliSearch prohlíží dokumenty, které jste nahráli, aby nalezl odkazy na vaše hledané výrazy v objektu rankingRules. V takovém případě nastavte následující pořadí:

• "překlep"
• „slova“
• "blízkost"
• "atribut"
• "wordsPosition"
• "přesnost"
• "desc(creation_date)"

Tato konfigurace je výchozí s výjimkou posledního pole, které je vlastním pravidlem "desc(datum_vytvoření)". Ten seřadí položky podle data jejich vytvoření, pokud jsou všechny předchozí hodnoty identické.

Prohledávatelné atributy

Za druhé, musíte zadat atributy, ze kterých může MeiliSearch vyhledávat v každém dokumentu, uvnitř objektu searchableAttributes. Zde je konfigurace provedena tak, aby se vyhledávalo pouze podle jména, dodavatele, kategorie a značek, aniž by byly použity obrázky nebo URL.

Zobrazené atributy

Nakonec musíte určit atributy, které může MeiliSearch vrátit uživateli pomocí aplikace Frontend s objektem displayAttributes.

Nahrajte nová nastavení do MeiliSearch

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    const index = await meili.getIndex("decathlon");

    const newSettings = {
      rankingRules: [
        "typo",
        "words",
        "proximity",
        "attribute",
        "wordsPosition",
        "exactness",
        "desc(creation_date)"
      ],
      searchableAttributes: ["name", "vendor", "category", "tags"],
      displayedAttributes: [
        "name",
        "vendor",
        "category",
        "tags",
        "images",
        "url"
      ]
    };

    await index.updateSettings(newSettings);

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Závěr

Toto rychlé hledání by nebylo možné bez neuvěřitelného týmu, který na tomto skvělém projektu pracuje dnem i nocí! Pokud byste mohli rádi přispívat do rodiny MeiliSearch, můžete se vrhnout na tato úložiště a přinést pomoc, problémy nebo tipy a triky:

• https://github.com/meilisearch/MeiliSearch
• https://github.com/meilisearch/meilisearch-js

Obecná diskuse je velmi vítána na fóru nebo chatu:

• https://github.com/meilisearch/MeiliSearch/discussions
• https://slack.meilisearch.com/

A také zde nezapomeňte zanechat hvězdičku hlavnímu projektu na Githubu.