Начало работы с API Yext Answers в VueJS


Интеграция Yext Answers API с Vue.js

Основная цель этой статьи — показать вам, как Yext Answers API может быть интегрирован в приложение Vue.js. В демонстрации используется Vue 3, а Vite используется для построения приложения. Приложение оформлено с помощью Tailwind CSS. Обратите внимание, что ни Vite, ни Tailwind не являются обязательным требованием для приложения.

В этом примере используется приложение Answers, которое может ответить на вопросы о том, как приготовить различные напитки. Посмотрите на Yext Hitchhikers, где вы можете создать учетную запись в песочнице, чтобы поэкспериментировать с добавлением собственных данных.

Теперь давайте перейдем к интеграции Yext Answers с помощью Vue 3.

Создание приложения на Vue 3 и установка зависимостей

Как уже упоминалось, для построения приложения в этой статье используется Vite. Vite часто является лучшей альтернативой таким фронтенд-инструментам, как Webpack, Rollup и Parcel. Во-первых, Vite обеспечивает быструю и простую в использовании среду, которая не требует длительных сборок для начала работы. С другой стороны, он также решает проблему медленного запуска сервера и делает его запуск более быстрым. В документации по Vite содержится более подробная информация о преимуществах использования Vite.

Чтобы создать новый проект Vue с помощью Vite, выполните следующую команду в терминале:

npm create vite@latest
Войти в полноэкранный режим Выйти из полноэкранного режима

После выполнения команды вам будет предложено указать имя пакета и шаблон, который вы хотите использовать. Выберите Vue для шаблона, и по умолчанию будет использоваться Vue 3. После завершения процесса создания лесов введите cd в каталог и запустите npm i для установки зависимостей. Затем запустите сервер с помощью npm run dev. Ваш сервер запустится на localhost.

Единственной необходимой зависимостью, необходимой для этой статьи, является @yext/answers-core. Чтобы установить его, выполните команду npm i @yext/answers-core в своем терминале. Кроме этого, для оформления приложения используется Tailwind CSS. Чтобы лучше понять, как Tailwind может быть добавлен в это приложение, следуйте руководству по установке Tailwind CSS с Vue 3 и Vite.

Создание универсального компонента автозаполнения

В этой статье будет показано, как можно использовать SDK ядра Answers.

Создайте новый файл UniversalAutocomplete.vue в каталоге components внутри папки src. Перед добавлением функции универсального автозаполнения необходимо сначала просмотреть созданный файл:

<template>
  <div class="bg-gray-50 min-w-screen min-h-screen flex justify-center py-10">
    <div class="max-w-lg relative space-y-3 text-center">
      <h3 class="font-extrabold text-lg">Universal Autocomplete</h3>
      <label for="search" class="text-gray-900">
        Type the name of a data to search(examples: "how", "cider", etc.)
      </label>

      <input
        type="text"
        id="search"
        v-model="searchTerm"
        placeholder="Type here..."
        class="p-3 mb-0.5 w-full border border-gray-300 rounded"
      />

      <ul
        v-if="result.results !== undefined"
        class="
          w-full
          rounded
          bg-white
          border border-gray-300
          px-4
          py-2
          space-y-1
          absolute
          z-10
          drop-shadow-md
        "
        id="results"
      >
        <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
          Showing {{ result.results.length }} results
        </li>
        <li
          v-for="r in result.results"
          :key="r.id"
          @click="selectResult(r.value)"
          class="cursor-pointer hover:bg-gray-100 p-1"
        >
          {{ r.value }}
        </li>
      </ul>
      <ul
        v-if="selectedResult.length"
        class="text-lg pt-2 z-0 grid grid-cols-1 md:grid-cols-2"
      >
        <li
          v-for="r in selectedResult"
          :key="r.id"
          class="
            inline-block
            bg-gray-200
            rounded-md
            px-3
            py-1
            text-gray-700
            mr-2
            mb-2
          "
        >
          <a class="text-lg font-semibold underline text-blue-600" href="#">{{
            r.name
          }}</a>
          <div v-html="r.description"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
import { provideCore } from "@yext/answers-core";

const core = provideCore({
  apiKey: '4be28826989e90232722e9bf2769fbf2',
  experienceKey: 'cpg-beverages',
  locale: 'en',
  experienceVersion: 'PRODUCTION',
});


export default {
  setup() {
    let searchTerm = ref("");
    let result = ref([]);
    let selectedResult = ref("");

    const searchResults = watchEffect(async () => {
      if (searchTerm.value === "") {
        return [];
      }
      result.value = await core.universalAutocomplete({
        input: searchTerm.value,
      });
      document.getElementById("results").style.display = "block";
    });
    const selectResult = async (result) => {
      searchTerm.value = "";
      const r = await core.universalSearch({
        query: result,
      });
      console.log(r);
      let ansArr = [];
      r.verticalResults.reduce((acc, cur) => {
        cur.results.forEach((res) => {
          if (res.description !== undefined) {
            acc.push(res);
          }
        });
        return acc;
      }, ansArr);
      selectedResult.value = ansArr;
      console.log(ansArr);
      document.getElementById("results").style.display = "none";
    };

    return {
      searchTerm,
      result,
      searchResults,
      selectResult,
      selectedResult,
    };
  },
};
</script>
Вход в полноэкранный режим Выйти из полноэкранного режима

Сосредоточившись на script, первым шагом будет импорт необходимых объектов. Объекты ref и watchEffect импортируются из vue, за ними следует provideCore, который импортируется из @yext/answers-core.

Затем ядро Answers Core инициализируется в переменной core. Функция provideCore принимает объект AnswersConfig в качестве параметра, который должен включать apiKey, experienceKey и локаль.

💡
Если вы используете учетную запись Yext sandbox, вам также нужно передать конечные точки sandbox в Answers Core.

Сценарий setup является точкой входа для использования API композиции. Внутри функции setup значение searchTerm, значение selectedResult и значение result инициализируются с помощью ref. Следующим шагом будет создание функции, которая будет возвращать результаты поиска. Функция называется searchResults, и в ней используется хук watchEffect. Хук watchEffect появился в API композиции Vue 3. Этот хук watchEffect запускает функцию немедленно, при этом реактивно отслеживая ее зависимости.

Поскольку вызов API является асинхронным, используется async-await. Первым шагом внутри этой функции является проверка того, пуст ли searchTerm. searchTerm связывается с полем ввода с помощью v-model="searchTerm". Если поле ввода пустое, результат присваивается пустому массиву. В противном случае код продвигается вперед.

Библиотека answers-core использует метод universalAutocomplete для получения результатов автозаполнения. Процесс принимает объект в качестве параметра, где единственным необходимым параметром является query. Значение searchTerm, полученное из поля ввода, передается в ключе query. Результат, возвращаемый SDK, хранится в ключе result.

Функция selectResult под функцией searchResults используется для вызова метода universalSearch. Этот метод используется для поиска по всем вертикалям. В зависимости от выбранного результата поиска, эта функция вызывается для получения данных в зависимости от запроса. Метод universalSearch также нуждается в одном необходимом параметре — запросе. В качестве запроса передается выбранный результат из universalAutocomplete. Полученные результаты хранятся в переменной r. Вы можете увидеть полученный результат путем консольного логгирования переменной. В переменной r хранится много данных. Для простоты в этой статье вы будете использовать только несколько значений из результата.

При выборе результата автозаполнения поиска пользователю будет показано описание, полученное из метода universalSearch. Поскольку метод universalSearch используется для поиска по всем вертикалям, результаты, полученные от всех вертикалей, будут объединены в один массив. Цель состоит в том, чтобы показать описание и название каждого результата поиска.

Вы также можете создать отдельные вкладки для результатов поиска в зависимости от вертикали. Каждая вертикаль содержит результаты в массиве. Чтобы объединить результаты в один массив, определяется пустой массив ansArr. Объект verticalResults содержит все результаты по вертикали. В этом объекте используется метод reduce. Метод reduce — это функция JavaScript более высокого порядка, которая выполняет функцию reducer на каждом элементе массива и возвращает одно значение.
На каждом элементе выполняется еще один цикл forEach, поскольку каждый элемент содержит массив, в котором хранятся результаты. Приведенное ниже изображение поможет вам лучше понять структуру данных.

Внутри цикла forEach, если описание объекта не пустое, результат заталкивается в массив ansArr.
Когда единый массив сформирован, массив selectedResult инициализируется этим массивом. Теперь вы можете показать результаты в DOM. Но прежде чем перейти к отображению данных, необходимо сделать последний шаг. Каждый раз, когда результат выбран и показано описание, необходимо скрыть результаты поиска. Простое свойство display: none; добавляется к результатам автозаполнения поиска с помощью JavaScript.

Для отображения результатов автозаполнения используется неупорядоченный список. Неупорядоченный список отображается только тогда, когда массив result.results не является неопределенным. Условие проверяется с помощью v-if.

       <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
          Showing {{ result.results.length }} results
        </li>
        <li
          v-for="r in result.results"
          :key="r.id"
          @click="selectResult(r.value)"
          class="cursor-pointer hover:bg-gray-100 p-1"
        >
          {{ r.value }}
        </li>
Вход в полноэкранный режим Выход из полноэкранного режима

Первый элемент li показывает количество результатов поиска. Второй элемент списка содержит результаты автозаполнения и отображает все результаты с помощью цикла v-for. При щелчке по результату поиска вызывается функция selectResult, в которую передается выбранное значение. Объяснение функции описано выше.

Аналогично отображению результатов автозаполнения, результаты универсального поиска также отображаются с помощью неупорядоченного списка. Отображаются только name и description из результатов. Yext Answers также предоставляет данные поиска в формате HTML, чтобы сделать запрос жирным в результатах. Для отображения необработанных HTML-запросов используется v-html.

Если вы импортируете компонент UniversalAutocomplete в файл App.vue и отрендерите его, вы сможете искать доступные вопросы. Файл App.vue должен выглядеть следующим образом:

<script setup>
import UniversalAutocomplete from "./components/UniversalAutocomplete.vue";
</script>

<template>
  <UniversalAutocomplete />
</template>

Вход в полноэкранный режим Выход из полноэкранного режима

Аналогичным образом можно сделать компонент вертикального автозаполнения, используя метод вертикального автозаполнения.

Функции универсального поиска и универсального автозаполнения показаны в коде примера, который был написан с использованием только необходимых параметров. Вы можете настроить поиск еще больше, используя параметры. Вы можете посетить песочницу или GitHub, чтобы изучить, как реализован поиск.

Заключение

В этой статье были рассмотрены основы интеграции Yext Answers с приложением на Vue 3. В ней также рассказывалось о том, как можно настроить Yext Answers Experience. Основной целью статьи было помочь вам начать работу с API Yext Answers. Если вы хотите узнать больше об API и углубиться в него, вы можете создать учетную запись Yext Hitchhikers, которая поможет вам изучать и экспериментировать с целым рядом продуктов Yext.

Примечания: Эта статья была впервые опубликована на Yext Hitchhikers Субха Чанда.

Оцените статью
Procodings.ru
Добавить комментарий