Yext로 현대 검색 구축: 제1부분 - 입문

검색창이 없는 사이트를 찾기가 매우 어렵다.때로는 앞과 가운데, 때로는 뒤에 있다🔎 오른쪽 상단에 있습니다.어떤 방식이든지 웹 페이지를 검색할 때 자주 사용할 수 있다.그러나 이런 검색 체험을 하려면 무엇이 필요할지 생각해 본 적이 있습니까?나는 내가 이전 업무에서 웹 응용 프로그램을 개발한 후에야 비로소 이렇게 하기 시작했다는 것을 안다.
ApacheSolr 검색 서버를 사용하여 생산 데이터를 인덱스로 편집하여 사용자가 원하는 것을 신속하게 찾을 수 있도록 했습니다.문제는 우리 PM이 검색 체험의 변화에 대해 기능 요청을 할 때마다 개발 과정은 다음과 같이 보인다는 것이다.

Solr 문서 업데이트 모드

인덱스 데이터를 업데이트하는 ETL

Solr와 UI

사이에 있는 JavaSpring 부팅 API 재구성

API 변경 사항을 고려하여 React Redux UI 재구성

이 안내서를 위해서, 나는 가장 간결한 목록을 만들어 보았지만, 서로 다른 요소에 따라, 단계마다 며칠의 시간이 걸릴 수 있다.
Yext의 개발자로서 더 간단한 방법으로 검색 기반 응용 프로그램을 구축할 수 있다는 것을 개발자에게 보여주고 싶습니다.IMDB의 데이터를 활용한 Yext 플랫폼을 이용하여 검색 기반의 현대 웹 응용 프로그램을 구축하는 것을 중심으로 여러 부분으로 구성된 시리즈의 첫 번째 편이다.

계좌를 개설하다
우선 저created an account on Yext Hitchhikers입니다.Hitchikers는 Yext 학습 플랫폼으로 저희 인공지능 검색 플랫폼에 대한 모든 정보를 알 수 있습니다.내가 내 승객 계좌를 만든 후에, 나는 놀이공원 계좌를 만들어서 나의 검색엔진을 설계하기 시작할 것이다.

지식도를 세우다
이 예에서 나는 IMDB의 영화 정보를 바탕으로 검색 체험을 만들 것이다.Yext 계정에는 미리 정의된 실체 유형이 포함되어 있지만, 사용자 정의 영화 실체를 만들어야 합니다.


엔티티 유형을 만든 후 UI에서 데이터를 검색하고 볼 수 있도록 필드를 추가해야 합니다.ID 및 Name 필드가 필요하지만 이 외에도 각 유형에 스키마를 추가할 수 있습니다.현재, 사용자 정의 필드 'Tagline' 과 'Tyres' 를 추가합니다.일반적으로 Tagline은 짧은 문자열이기 때문에 단선 텍스트 유형으로 설정합니다.내장된 Description 필드도 추가합니다.


한 편의 영화는 여러 종류가 있을 수 있기 때문에 '유형' 을 텍스트 목록 필드로 설정해야 한다.나는 단행 텍스트 형식을 선택해서 이 점을 실현할 수 있지만, 문자열 그룹을 포함할 수 있도록 '목록으로 만들기' 를 선택할 수도 있다.

나는 각종 부가standard field types를 사용할 수도 있고, 나의custom field types를 만들 수도 있다.현재 사용자 정의 실체 형식 설정을 만들었습니다. CSV file 에 저장된 10개의 실체를 업로드할 것입니다.
지식 맵에 엔티티를 추가하려면 수동으로 단일 엔티티를 추가하거나, 미리 만들어진 API 통합(Twitter, Shopify 등)을 사용하거나, 사용자 정의 API 커넥터를 구축하는 등 여러 가지 방법이 있습니다.

하나의 답안 체험을 창조하다
내 지식 도표에 다른 영화를 추가한 후에 나는 검색을 사용하기 위해 답안 체험을 만들어야 한다.정답 경험은 Yext Answers에서 지원하는 검색 경험입니다.Lucene-based search engines와는 달리 인공지능을 이용해 텍스트나 음성을 위아래 문장에 배치하는 자연언어처리(NLP)를 활용했다.나의 지식 도표에서, 나는 단지 몇 개의 필드가 있는 영화만 있을 뿐, 이것은 몇 개의 답안 기능을 보여주기에 충분하다.
내 계정의 "답안"부분으로 이동한 다음 "답안 체험 만들기"를 누르십시오.여기서, 나는 나의 답안 체험을 명명하고, 내가 검색하고 싶은 실체를 선택한다.나는 현재 영화 실체만 있지만, 나는 최종적으로 배우나 감독 등 새로운 실체를 추가하여 나의 검색 능력을 확장할 수 있다.

내 대답 환경을 맞춤형으로 구성
현재 나는 이미 나의 답안 체험을 만들었고, 나는 백엔드 설정을 추가해야 한다.Answers API가 반환하는 각 검색 결과는 검색 결과의 일부입니다.
그럼 수직 검색은 뭘까요?구글에 들어가 검색 검색어를 입력하면 자동으로'모든 결과'페이지로 이동하지만 이미지, 쇼핑, 지도, 동영상 등 다양한 수직 검색을 선택할 수 있다.

Answers를 사용하면 개별 솔리드 및 구성이 가능한 자체 수직 시장을 구성할 수 있습니다.나는 현재 영화 실체만 있기 때문에 기본적으로 수직 영화를 만들 것이다.여기서부터 검색이 원하는 방식으로 작동하도록 설정 옵션을 설정할 것입니다.
수직 뷰의 구성 옵션을 처음 볼 때 기본적으로 엔티티 유형 및 이름이 검색 가능 필드로 포함되어 있습니다.
실체 유형은 자동으로 NLP 기능으로 포함됩니다. 왜냐하면 사용자가 '영화' 를 조회하는 상황에서 나는 영화 결과만 되돌려 주기를 원하기 때문입니다.만약 나의 지식도에 다른 실체 유형이 있다면, 나는 이러한 실체 유형이 검색 결과에서 여과되기를 바란다.
다른 한편, 이름 필드는 의미 텍스트 검색을 통해 검색할 수 있도록 유지해야 합니다.의미 텍스트 검색은 BERT(구글의 NLP 소스 오픈 머신 학습 프레임워크)를 사용하여 검색을 삽입으로 표시한다.의미 텍스트 검색은 겹치는 키워드를 찾을 필요가 없다. Yext 답안은 검색의 배후 의미를 분석하고 신경 네트워크를 이용하여 가장 관련된 답안을 가진 실체를 찾을 수 있다.기타 영역에 대한 참고 사항:

'유형'- 한 영화가 한 가지 또는 여러 가지 유형이 있을 수 있기 때문에 나는 그것을 NLP filter과facet 필드로 표시했다.이것은 내가'액션 영화'를 검색할 때 답안 알고리즘이 모든 비액션 영화를 필터하고 내가 처음 검색한 후에 응용할 수 있는 다른 방면, 예를 들어'모험'이나'코미디'를 되돌려준다는 것을 의미한다.

'표어'- 영화 표어는 보통 영화와 관련된 짧은 유행어일 뿐이기 때문에 짧은 말과 텍스트 검색이 적합하다.

묘사 - 나는 내장된 묘사 필드를 사용하여 영화를 묘사한다. 왜냐하면 몇 개의 문장을 포함하는 여러 줄의 텍스트를 처리할 수 있기 때문이다.기본적으로 Document Search 알고리즘이 적용됩니다. 설명에서 관련 텍스트 세션을 검색하는 방법을 알고 있기 때문입니다.

내 Yext 계정 UI에서 체험 미리보기를 사용하거나, 이 cURL 명령을 Postman에 넣고, 검색할 때마다 Answers API 되돌아오는 모든 내용을 보고, 검색 설정을 테스트할 수 있습니다.

curl --location --request GET 'https://liveapi-sandbox.yext.com/v2/accounts/2700040/answers/query?experienceKey=movies-search&input=woody and buzz&api_key=cb8b942209662817e117b4d037e85f6c&v=20211012'

클론 및 수정 샘플 재구매
현재 나는 내가 원하는 방식으로 백엔드를 설정했기 때문에, 나는 나의 검색 UI를 구축해야 한다.Yext가 하나 low-code solution for building branded search experiences 를 제공했지만, 나는 나의 사이트의 외관과 느낌에 대해 더 많은 통제를 원한다.나는 React starter application를 사용할 것이다. 이것은 전문적으로 문제를 해결하기 위해 설계한 것이다.우선, 나는 이 프로젝트를 나의 개인 Github에게 맡길 것이다.그리고 나는 그것을 내 기계에 복제해서 다시 이름을 붙일 것이다.

git clone https://github.com/yext/react-site-search-starter.git movies-answers-part-one

내 웹 응용 프로그램에서 나의 답안 체험 검색 결과를 표시하려면 먼저 API 키와 체험 키 수정answersHeadlessConfig.ts을 사용할 것이다.Yext 계정의 "체험 상세 정보"페이지로 이동하면 이 두 페이지를 찾을 수 있습니다.

샌드박스 계정을 사용하기 때문에 샌드박스 API URL을 사용하여 선택 사항endpoints 필드를 구성에 추가해야 합니다.그렇지 않으면 응용 프로그램은 기본적으로 생산 단점을 사용할 것이다.

// answersHeadlessConfig.ts
import { AnswersHeadlessProvider } from '@yext/answers-headless-react';

type HeadlessProviderProps = Parameters<typeof AnswersHeadlessProvider>[0];

export const answersHeadlessConfig: HeadlessProviderProps = {
  apiKey: 'cb8b942209662817e117b4d037e85f6c',
  experienceKey: 'movies-search',
  locale: 'en',
  sessionTrackingEnabled: true,
  endpoints: {
    universalSearch:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/query?someparam=blah",
    verticalSearch:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/vertical/query",
    questionSubmission:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/createQuestion",
    status: "https://answersstatus.pagescdn.com",
    universalAutocomplete:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/autocomplete",
    verticalAutocomplete:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/vertical/autocomplete",
    filterSearch:
      "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/filtersearch",
  },
};

수직 검색이 하나밖에 없기 때문에, 나는 universalResultsConfig.ts와 routeConfig.tsx의 대부분의 코드를 삭제할 것이다.일단 내가 이후에 창설한 새로운 수직 시장을 설명해야 한다면, 나는 잠시 후에 다시 이런 것들을 토론할 수 있다.

// routeConfig.tsx
import UniversalSearchPage from '../pages/UniversalSearchPage';
import { universalResultsConfig } from './universalResultsConfig';

export const routeConfig = [
  {
    path: '/',
    exact: true,
    page: <UniversalSearchPage universalResultsConfig={universalResultsConfig} />
  },
];

// universalResultsConfig.ts
import { VerticalConfig } from '../components/UniversalResults';

export type UniversalResultsConfig = Record<string, VerticalConfig>;

export const universalResultsConfig: UniversalResultsConfig = {}

터미널에서 실행 npm start 은 브라우저에서 내 프로그램을 로컬로 실행합니다.페이지를 불러오면 검색을 시도해 볼 수 있습니다.할 수 있다checkout the React frontend code for this guide here.이후의 게시물에서, 나는 나의 응용 프로그램에 대해 스타일과 레이아웃을 변경할 것이다.
위의 영상에서 보듯이, 내가 지식 도표에 추가한 10편의 영화가 내가 페이지를 불러올 때 나타난다.나는 결과 범위를 좁히기 위해 몇 가지 다른 조회를 시도했다.

'매트릭스'- 이것은 나의 지식 도표에서 한 영화의 이름이 정확하게 일치하기 때문에 유일하게 되돌아오는 결과이다.

'가정영화'-'가정'은'강철자이언트'와'완구총동원2'의 한 유형과 일치하고 유형은 NLP 필터이다.그래서 유일하게 반송된 영화다.

'타투인'- 이것은'스타워즈: 제1회-유령위협'에 포함된 문자열이다.나는 '영화 설명' 필드의 '문서 검색' 을 열어 '답안' 알고리즘이 나의 검색을 검색 결과와 연결시킬 수 있도록 했다.

다음 단계
현재, 나는 단지 하나의 실체 유형의 몇 개의 검색 결과만 순백색 화면에 나타난다.내 다음 글에서 나는 더 많은 실체 유형을 추가할 것이다. 이렇게 하면 나는 더욱 재미있는 검색 결과를 얻을 수 있고, 나의 UI를 더욱 개인적인 스타일로 만들 수 있다.기대해주세요!