#3 헤드리스 상거래 구축 - Algolia로 검색 엔진 추가

Algolia에 대해 처음 들었을 때 약간 회의적이었습니다. 내 웹 애플리케이션에 검색 엔진이 필요한 이유는 무엇입니까? 내 데이터베이스를 직접 검색할 수 있습니다. 물론 맞습니다. 그러나 Algolia는 귀하의 웹사이트에 검색 결과를 제공한다는 점에서 매우 빠릅니다. 그리고 이것이 바로 귀하가 고객과 사용자에게 전달하고자 하는 것, 즉 속도입니다!

최근에 1.0.0 버전을 출시했으므로 Nuxt용 Algolia 모듈을 확인하십시오 -> https://algolia.nuxtjs.org/

이미 알골리아에 대한 글을 몇 개 썼는데 이번에는 알골리아에 대한 영상을 찍기로 했어요!



이 비디오에서는 이전 비디오에서 만든 Headless Commerce 애플리케이션에 검색 엔진 Algolia를 추가합니다. 아직 이 비디오를 보지 못했다면(여기 링크 -> ) 전자 상거래의 개념과 그 발전에 대해 정말 잘 설명하고 있으므로 꼭 시청해 보시기 바랍니다.

Algolia에서 Nuxt 3 애플리케이션으로 검색 결과를 동적으로 가져올 것입니다.

어느 시점에서 길을 잃으면 여기 github repo -> https://github.com/Baroshem/nuxt-shopify-tailwind 및 분기feat/algolia 가 있습니다.

암호

Algolia를 Nuxt 애플리케이션과 통합하려면 공식 Nuxt 모듈을 사용해 보는 것이 좋습니다. 나는 또한 그것의 핵심 유지자입니다 :)

먼저 모듈을 설치해 보겠습니다.

yarn add @nuxtjs/algolia # npm install --save @nuxtjs/algolia

다음으로 nuxt.config.ts 파일의 모듈 배열에 등록하고 필요한 구성(이 경우 apiKey 및 applicationId)을 추가합니다.

  modules: ["@nuxtjs/tailwindcss", "nuxt-graphql-client", "@nuxtjs/algolia"], // <- here

  algolia: {
    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
    applicationId: process.env.ALGOLIA_APPLICATION_ID,
  },

그리고 이 점은 .env 파일에 환경 변수를 추가하는 것을 잊지 마십시오.

ALGOLIA_SEARCH_API_KEY=<YOUR_ALGOLIA_SEARCH_API_KEY>
ALGOLIA_APPLICATION_ID=<YOUR_ALGOLIA_APPLICATION_ID>

또한 TheHeader.vue 구성 요소에서 useAlgoliaSearch 컴포저블을 호출할 스크립트 태그를 추가해 보겠습니다. 동영상에서는 더 이상 사용되지 않는useSearch 컴포저블을 사용했지만 적절한 컴포저블은 아래에 있음을 명심하십시오.

<script lang="ts" setup>
const { result, search } = useAlgoliaSearch("headless_commerce");
const hits = ref([]);
const fetchSearchResults = async (e) => {
  await search({ query: e.target.value });
  hits.value = result.value.hits;
};
</script>

여기서 잠시 멈추자. 스크립트 태그에서 auseAlgoliaSearch를 호출하고 인덱스 이름을 매개변수로 전달했습니다. 내부적으로 이 컴포저블은 init index 메서드를 호출하여 Algolia 색인을 초기화합니다.

다음으로 hits 라는 빈 배열이 있는 ref를 등록했습니다. 이 배열은 Algolia의 결과로 채워집니다.

마지막으로 사용자가 제공한 쿼리를 기반으로 검색 결과를 가져오기 위해 입력 변경 후 트리거되는 메서드를 등록했습니다. 내부적으로 이 메서드는 useAlgoliaSearch 컴포저블에서 검색 메서드를 호출하고 결과를 적중 항목에 할당합니다. 프로덕션 애플리케이션에서 Algolia에 너무 많은 트래픽을 생성하지 않도록 일부 디바운싱 메커니즘을 구현해야 합니다.
TheHeader.vue 구성 요소 개선 사항에 대해 자세히 알아보고 쿼리 변경에 반응하는 입력과 목록 형식의 검색 결과도 만들었습니다.

<div class="px-6 flex items-center">
      <NuxtLink to="/">
        <img class="h-20 w-20 mr-16" src="/logo.svg" alt="Store logo" />
      </NuxtLink>
      <div class="flex justify-center relative">
        <div class="mb-3 w-96">
          <input
            type="search"
            class="block w-full px-3 py-1 bg-white bg-clip-padding border border-solid border-gray-300 rounded"
            id="search"
            placeholder="Search for products"
            @input="fetchSearchResults"
          />
        </div>
        <div
          v-if="hits.length"
          class="flex justify-center absolute top-10 z-10"
        >
          <ul class="bg-white border border-gray-200 w-96 text-gray-900">
            <li
              v-for="hit in hits"
              :key="hit.objectID"
              class="px-6 py-2 border-b border-gray-200 w-full"
              @click="hits = []"
            >
              <NuxtLink
                :to="`/products/${hit.Handle}`"
                class="flex items-center"
              >
                <img class="w-20" :src="hit['Image Src']" />
                <p class="ml-4">{{ hit.Title }}</p>
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>

여기에는 많은 코드가 있지만 일반적인 아이디어는 검색 결과 가져오기를 트리거하는 입력과 가져오기 후 표시되는 결과 목록입니다.

그리고 그게 다야!

요약

잘했어요! Headless Commerce 애플리케이션에 Algolia 검색 엔진을 추가했습니다. 이것은 검색 기능의 시작일 뿐이므로 더 많은 정보를 보려면 https://www.algolia.com/ 및 https://algolia.nuxtjs.org/을 모두 방문하시기 바랍니다.