あなたの反応アプリでMeilisearchを実装する方法

以下はRiccardo Gioratoのゲスト投稿です.

導入

この簡単なチュートリアルでは、簡単にどのように簡単にマイページ検索の力に感謝し、信頼できる結果を検索ページを作成する方法を学びます.

MeiliSearch is an open source, high-relevancy search engine, built in Rust.

我々は、検索を実行し、最後により高度なトピックに移動するための基本的な手順をカバーします.
例については、スポーツブランドのための迅速かつ美しい検索体験を再現してみましょう.
ここであなたが構築されるものです

必要条件

開始する前にNode すでにあなたのマシンにインストールされます.
あなたはあなたのために作成されたカスタムプロジェクトを使用して反応アプリのためのボイラープレートコードを作成します.https://github.com/Giorat/meili_react_demo
最後に、このチュートリアルではReact . そうでない場合は、もっと多くのことを学ぶために反応文書をチェックすることができます.

始める

リポジトリをクローンする

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

新しいDocker画像を実行する

リポジトリをクローン化する場合は、MimeSearchインスタンスを設定するだけでメインフォルダ内で実行します.

npm run setup_meili

REPOをクローン化していない場合は、直接Dockerインスタンスを作成します.

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

Meilisearchが次のURLを訪問して実行していることを確認できます.

http://localhost:7700/

インデックスを作成する

インデックスは、ドキュメントが格納されているエンティティです.特定の設定を持つオブジェクトの配列や、一意の主キーのように.
のプロパティについての詳細を読むことができますindexes meilisearchドキュメントで.
インデックスを作成するには、主キーが何かを調べる必要があります.以下は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"
}

このドキュメントでは、ドキュメントの一意の値を保持するフィールドはid フィールド.この属性をprimary key を参照してください.
PostgreSQLのようなRESTクライアントでこのインデックスを簡単に作成することができますが、このチュートリアルでは、MeiliSearch JavaScript SDKを使用してノードから直接実行します.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);
  }
})();

インデックス

MiliSearchはJSON形式でドキュメントを受け取り、目的のためにそれらを格納します.これらの文書はあらゆる種類のデータを保持できるフィールドで構成されている.
このチュートリアルでは、このデータセットをスポーツウェア項目でダウンロードできます.

decathlon.json

このJSONファイルからすべてのオブジェクトをアップロードするには、次のスクリプトを使用します.

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);
  }
})();

このスクリプトを実行する前にJSONファイルへのパスを変更してください.

反応アプリを準備する

あなたはCRAを使用して作成することができる標準的な反応アプリを使用するか、単にこの倉庫をクローニングすることによって:

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

場合は、次のコマンドを使用して独自に作成することができます空のアプリから起動することを好む.しかし、あなたが望むアプリケーションを名前することができます.

npx create-react-app meili_react_demo
cd meili_react_demo

を含む

スタイルのプロセスを高速化するには、インデックスに直接風風CSSスタイルを追加します.HTML

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

アプリケーションを設定します。js州

次に、アプリを変更します.単純な検索フォームと検索のあらゆる側面を扱ういくつかの状態変数をセットアップするためにこのコードを使用するJSファイル.

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;

このコードは、この美しいヘッダーを検索フォームで出力します.

検索結果

MeiliSearch JavaScript SDKを使用して反応からmeilisearchに接続するだけでいくつかの手順で行うことができます簡単な操作です.

マイリサーチクライアント

meilisearch SDKをインストールします

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

サーバーURLでMeiSearchクライアントを設定します.私たちのケースでは、それはLocalhost Dockerマシンでした.最後に、バックエンドから正しいインデックスをロードします.
このコメントをアプリケーションに置き換えます.以下のコードスニペットによる// 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");

検索クエリを送信する

使用するuseEffect 入力した単語の検索をmeilisearchに実行します.すべての結果は、“ResultsSearch”と呼ばれる単純な状態変数に設定されます.
このコメントをアプリケーションに置き換えます.以下のコードスニペットによる// 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]);

ショーケース結果

秒以内にuseEffect , meilisearchによって返されたJSONオブジェクトを検索します.アップロードされたJSONオブジェクトと同じ構造を持ちます.
次に、製品のページにリンクカードのリストを作成する時間です.
このコメントをアプリケーションに置き換えます.以下のコードスニペットによる// 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]);

あなたは完全に見ることができますApp.js コードはこちら

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

ここでライブアプリケーションを訪問できます.https://meili-react-demo.netlify.app/

さらに検索を構成する！

MeiliSearchでは、あなたの検索体験を向上させる微調整することができます他の小さなオプションのトンを得る.高度な探査の場合は、いくつかの追加の設定手順を実行する必要があります.

検索ランキング

検索ランキングを変更することによって開始するか、より簡単に、MiliSearchがあなたの検索用語への参照を見つけるためにアップロードした文書を通して見る方法rankingRules オブジェクト.その場合は、次の順位を設定します.

"typo "

「語」

"近接"

属性

ワードスポーティング

"正確さ"

"desc ( CreationRundate )"

この設定は、カスタムルール“desc(creationpersdate)”の最後のフィールドを除く既定のものです.すべての以前の値が同一であるならば、後者は彼らの作成日付によってアイテムをランク付けします.

検索可能属性

次に、各文書の中からmeilisearchが検索できる属性を指定する必要がありますsearchableAttributes オブジェクト.ここでは、名前、ベンダー、カテゴリ、タグや画像やURLを残してタグを検索するために行われます.

表示属性

最後に、フロントエンドアプリケーションによってMeilisearchがユーザーに戻ることができる属性を指定しなければなりませんdisplayedAttributes オブジェクト.

新しい設定を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);
  }
})();

結論

この迅速な検索は、この偉大なプロジェクトの夜と日に取り組んでいる信じられないほどのチームなしで可能ではないだろう!あなたがMeilisearch家族に貢献するのを楽しむかもしれないならば、あなたは若干の援助、問題またはヒントとトリックを持ってくるためにこれらの倉庫に飛び乗ることができます:

https://github.com/meilisearch/MeiliSearch

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

一般的な議論はフォーラムやチャットにとても歓迎です.

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

https://slack.meilisearch.com/

また、上のメインプロジェクトに星を残すことを忘れないでくださいGithub here .