React 응용 프로그램에서 Meilisearch를 구현하는 방법

다음은 리카르도 지오라토의 객원 게시글입니다.

소개

이 빠른 강좌에서 Meili Search의 강력한 기능을 빌려 즉각적이고 신뢰할 수 있는 결과를 가진 검색 페이지를 만드는 방법을 배울 것입니다.

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

검색을 실행하는 기본 절차를 소개하고 마지막으로 더 높은 주제를 토론할 것입니다.
예를 들어 우리는 스포츠 브랜드를 위해 신속하고 아름다운 검색 체험을 다시 만들 것이다.
다음과 같이 구성할 내용입니다.

선결 조건

시작하기 전에 기계에 설치되어 있는지 확인하십시오Node.
사용자가 만든 사용자 정의 항목을 사용하여 React 응용 프로그램에 템플릿 코드를 작성합니다: https://github.com/Giorat/meili_react_demo
마지막으로, 이 강좌는 당신이 이미 익숙하다고 가정합니다React.그렇지 않으면 React 문서를 보고 자세한 내용을 확인할 수 있습니다.

입문

클론 저장소

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

새 Docker 이미지 실행

저장소가 복제된 경우 MeiliSearch 인스턴스를 설정하려면 기본 폴더에서 다음을 수행하십시오.

npm run setup_meili

클론 repo가 없고 Docker 인스턴스를 직접 생성하려면 다음 명령을 수행합니다.

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

다음 URL에 액세스하여 MeiliSearch가 실행 중인지 확인할 수 있습니다.

http://localhost:7700/

MeiliSearch에서 색인 만들기

색인은 특정한 설정과 유일한 키를 가진 대상 그룹과 같은 문서를 저장하는 실체이다.
MeiliSearch 문서에서 indexes 속성에 대한 자세한 내용을 확인할 수 있습니다.
색인을 만들기 위해서는 메인 키가 무엇인지 찾아야 합니다.다음은 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 필드입니다.이 속성은 MeiliSearch에서 primary key 라고 합니다.
Postman과 같은 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);
  }
})();

색인 문서

MeiliSearch는 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 파일의 경로를 변경하는 것을 기억하십시오!

React 애플리케이션 준비

표준 React 응용 프로그램을 사용하거나 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 포함

스타일링 프로세스를 가속화하기 위해 색인에 Tailwind 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;

이 코드는 이 예쁜 제목과 검색 폼을 출력해야 한다.

React의 검색 결과

Meili Search Javascript SDK를 사용하여 React에서 Meili Search에 연결하는 것은 간단한 작업으로 몇 단계만 거치면 완성할 수 있다.

MeiliSearch 클라이언트

MeiliSearch SDK 설치:

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

서버 URL을 사용하여 MeiliSearch 클라이언트를 설정합니다.우리의 예에서, 그것은 로컬 호스트 Docker 기계입니다.마지막으로 백엔드에서 정확한 인덱스를 불러옵니다.
응용 프로그램에서 이 설명을 대체합니다.js의 코드 세그먼트는 다음과 같습니다.// 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에 검색합니다.모든 결과를 클릭하면 "results Search"라는 간단한 상태 변수로 설정됩니다.
응용 프로그램에서 이 설명을 대체합니다.js의 코드 세그먼트는 다음과 같습니다.// 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]);

결과 표시

1초 이내useEffect에 MeiliSearch가 반환하는 JSON 객체를 검색합니다.이러한 구조는 업로드된 JSON 객체와 동일합니다.
그리고 제품 페이지에 연결된 카드 목록을 만들 때가 되었다.
응용 프로그램에서 이 설명을 대체합니다.js의 코드 세그먼트는 다음과 같습니다.// 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를 사용하면 검색 환경을 개선하기 위해 다양한 추가 옵션을 사용할 수 있습니다.고급 탐색에 대해 추가 설정 절차를 수행해야 합니다.

검색 순위

검색 순위 변경부터 시작하거나 더 간단하게 말하자면, Meilisearch는 사용자가 올린 문서를 보고 rankingRules 대상에서 검색어의 인용을 찾을 수 있습니다.이 경우 다음 순위를 설정합니다.

"타자 오류"

문자

접근

등록 정보

문자 위치

"정확성"

설명(작성일)

이 설정은 기본 설정이지만 마지막 필드는 사용자 정의 규칙 "desc (creation\u date)"입니다.만약 이전의 모든 값이 같다면, 후자는 창설 날짜에 따라 항목을 정렬합니다.

검색 가능 속성

그 다음으로 searchableAttributes 객체의 각 문서에서 검색할 수 있는 MeiliSearch 속성을 지정해야 합니다.여기서 구성은 이미지나 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.