Webhook 함수와의 데이터 일관성

에서 Typescript function plugin , Cloudinary Image Transformation API 및 Data Connectors framework 을 활용하여 Knowledge Graph의 각 항목에 대한 기본 사진을 편집할 수 있는 방법을 설명했습니다. 내Knowledge Graph가 새 음료 엔티티로 계속 확장되는 경우 새 사진이 모든 기존 사진과 동일한 형식을 갖도록 하고 싶습니다.

Webhooks을 사용하여 동일한 논리를 적용하여 변환된 사진이라는 새로 계산된 필드를 만들 수 있었습니다.

내 기능 플러그인 업데이트

이미 작성한 기존 코드를 변경할 필요가 없었습니다. Webhook 호출과 호환되도록 몇 가지만 추가하면 됩니다.

먼저 Webhook 함수에 대한 입력의 유효성을 검사하는 데 사용되는 일부 유형 정의에 대해 types.ts를 추가했습니다.

// types.ts

export interface WebhookPayload {
  changedFields: ChangedFields;
  entityId: string;
  primaryProfile: PrimaryProfile;
  meta: {
    eventType: string;
  };
}

export interface PrimaryProfile {
  primaryPhoto: PrimaryPhoto;
}
export interface PrimaryPhoto {
  image: Image;
}
export interface Image {
  url: string;
}
export interface ChangedFields {
  fieldNames: string[];
}

api.ts에서 새로 생성된 엔티티를 편집하기 위한 Knowledge API 클라이언트 기능을 추가했습니다.

// api.ts

import axiod from "https://deno.land/x/[email protected]/mod.ts";

declare const YEXT_ACCOUNT_API_KEY: string;

export const editEntity = async (
  entityId: string,
  // deno-lint-ignore no-explicit-any
  data: Record<string, any>
) => {
  try {
    // using fetch instead of axios works too. I just prefer axios syntax.
    await axiod.put(
      `https://api-sandbox.yext.com/v2/accounts/me/entities/${entityId}`,
      data,
      {
        params: {
          api_key: YEXT_ACCOUNT_API_KEY,
          v: "20220322",
        },
      }
    );
  } catch (error) {
    if (error.response) {
      console.error(`${error.response.status}: ${error.response.data}`);
    }
    throw error;
  }

  console.log(`Edited entity ${entityId}`);
};

마지막으로 기본 사진이 변경된 필드인지 확인하는 removeBackgroundHook 기능을 mod.ts에 추가했습니다. 기본 사진 필드가 업데이트되면 함수는 myremoveBackground 함수를 호출하여 새 이미지 URL을 가져온 다음 edit entity API를 호출하고 음료 엔티티에 추가한 새 필드c_transformedPhoto를 업데이트합니다.

// mod.ts

export const removeBackgroundHook = async (payload?: WebhookPayload) => {
  if (payload?.changedFields.fieldNames.includes("primaryPhoto")) {
    console.log(`Transforming primaryPhoto for Entity ${payload?.entityId} `);

    const imageUrl = await removeBackground(
      `${payload.entityId}|${payload.primaryProfile.primaryPhoto.image.url}`
    );

    if (imageUrl) {
      await editEntity(payload.entityId, {
        c_transformedPhoto: { url: imageUrl },
      });
    }
  }
};

yext resources apply를 실행하기 전에 엔티티 편집 API를 호출하는 데 필요한 추가 변수를 포함하도록 내_resource.json를 업데이트했습니다.

{
  "$id": "TransformImagePlugin",
  "$schema": "https://schema.yext.com/config/platform/plugin/v1",
  "globals": {
    "CLOUDINARY_API_KEY": "${{CLOUDINARY_API_KEY}}",
    "CLOUDINARY_API_SECRET": "${{CLOUDINARY_API_SECRET}}",
    "YEXT_ACCOUNT_API_KEY": "${{YEXT_ACCOUNT_API_KEY}}"
  }
}

Developer Console에서 Webhook 추가

내 계정의 개발자 콘솔에서 기존 앱에 새 Webhook을 추가했습니다. 내 플러그인과 함께 업로드한 API 키에는 엔터티를 업데이트할 수 있는 권한이 필요하므로 API 자격 증명 화면에서 엔터티 지식 API에 대한 읽기/쓰기 액세스 권한을 추가해야 했습니다.



그런 다음 후크가 트리거되는 시기를 결정하는 웹후크 유형을 설정합니다.



Webhook 유형을 선택한 후 새 후크에 이름, 설명 및 트리거될 때 호출해야 하는 함수를 지정했습니다.



후크가 제대로 작동하는지 확인하기 위해 Knowledge Graph의 엔티티에 새 기본 사진을 추가한 다음 c_transformedPhoto 필드가 변경되었는지 확인했습니다.



기본 사진 필드가 변경될 때마다 변환된 사진 필드에 새 값이 추가되는 것을 볼 수 있습니다. UI, CSV 업로드, 데이터 커넥터 또는 API 호출을 통해 엔터티를 생성하거나 편집하면 Webhook이 호출되어 새로 변환된 사진을 생성합니다. 웹후크는 또한 다양한 기타 이벤트를 기반으로 실행되도록 구성할 수 있으며 함수가 아닌 API를 호출하는 데 사용할 수 있습니다.

완전한 Webhook 기능 플러그인 코드here를 찾을 수 있습니다.