How to using Webhooks

웹훅(Webhooks)은 어떤 이벤트가 발생했을 때 사전에 정의된 URL로 HTTP 요청을 자동으로 보내는 방식입니다.

kubChain의 채팅 내용을 저장하고 싶을 때 웹서비스 간에 정보를 실시간으로 교환할 수 있는 웹훅을 이용하여 원하는 데이터베이스에 정보를 전달할 수 있습니다.

Make.com

Make.com은 여러가지 플랫폼들을 간단하게 연결시켜주는 곳으로, Webhooks을 통한 데이터 전송도 이곳에서 할 수 있습니다. Make.com 홈페이지에서 회원가입 후 무료로 이용할 수 있습니다.

Postman

Postman은 API 테스트를 위한 도구입니다. Webhooks을 처음 만들어서 실시할 때 Postman을 통해 잘 작동하는지 확인한 이후 사용하는 것을 권장합니다. Postman 홈페이지에서 회원가입 후 무료로 이용할 수 있습니다.

Connect kubChain

kubChain에서 custom tool을 통해 Webhooks을 이용할 수 있습니다.

kubChain의 채팅내용을 Google Sheet로 저장하는 방법을 예시로 설명하겠습니다.

자세한 내용은 쿱와 유튜브 "기획자를 위한 노코드 AI 챗봇 만들기 8강"에서 확인하실 수 있습니다.

1. Google Sheet 생성

kubChain에서 만든 채팅을 통해 저장하고자 하는 데이터가 무엇인지 정의하고, 해당 데이터를 잘 저장하기 위해 구글 스프레드 시트를 생성합니다.

온라인 쇼핑몰에서 채팅을 통해 고객상담을 했고, 챗봇으로 해결하지 못해 상담원 연결이 필요한 경우, 고객의 이름, 핸드폰번호, 상담내역이 저장되도록 구글 스프레드 시트를 생성하겠습니다.

어떤 내용이 들어가면 좋을지 첫번째 행에는 Name, Phone, Note와 같이 컬럼명을 설정해주고 두번째 행에는 샘플데이터를 입력했습니다.

2. Make.com으로 Webhooks과 Google Sheets 연결

Make.com에서 Webhooks과 Google Sheets를 연결한 새로운 시나리오를 생성합니다.

Webhooks 아이콘을 클릭하여 이름을 작성하고, Copy address to clipboard 버튼을 클릭하여 URL을 복사합니다. 이 URL은 이후 Postman과 kubChain에서 사용됩니다.

Google Sheets 아이콘을 클릭하여 구글 로그인을 하고, 연결하고자 하는 구글 스프레드 시트를 선택합니다. Values를 통해 저장하고자 하는 컬럼명에 맞게 데이터를 연결해줍니다.

3. Postman에서 Webhooks 동작 확인

Postman을 통해 Webhooks이 잘 연결되고, 동작하는지 확인합니다.

POST로 설정한 이후 Webhooks의 URL을 붙여넣기 합니다.

Webhbooks이 잘 동작하는지 확인하기 위해서 JSON코드를 입력하기 위해서 Body > row > JSON으로 설정한 뒤,코드블럭에 아래 코드를 복사 붙여넣기를 통해 입력합니다.

{
    "Name": "kubwa",
    "Phone": "010-1111-2222",
    "Note": "메세지가 잘 전달되는지 확인"
}

이 코드는 Name이라는 컬럼에 "kubwa"라는 이름을 넣어주고, Phone이라는 컬럼에 "010-1111-2222"라는 번호를 넣어주고, Note라는 컬럼에 "메세지가 잘 전달되는지 확인" 이라는 데이터를 넣어달라고 요청하는 코드입니다.

파란색 Send 버튼을 클릭하고 몇분간 기다리면 데이터가 구글 스프레드 시트에 저장되는 것을 확인할 수 있습니다.

4. kubChain에서 Webhooks 사용하기

kubChain에서는 Webhooks을 CustomTool을 통해 사용할 수 있습니다. 아래 화면과 같이 OpenAI Function Agent와 Custom Tool, Buffer Memory 노드를 연결하여 사용합니다.

Custom Tool에서 Webhooks을 사용할 수 있도록 새로운 Tool을 만들어줍니다.

TOOL_NAME: Custom Tool 이름을 작성합니다.
TOOL_DESCRIPTION: Custom Tool을 설명하는 내용을 작성합니다.

OUTPUT SCHEMA: 아웃풋으로 출력할 데이터를 설정합니다.
- Property는 구글 스프레트 시트에 컬럼명으로 설정한 것과 동일하게 작성합니다.
- Type은 저장할 데이터 타입을 선택할 수 있습니다. 여기서는 모두 string으로 설정했습니다.
- Description은 각 데이터에 대한 설명으로, 본인이 알아볼 수 있게 작성합니다.
- Required는 유저로부터 받아야하는 필수데이터를 표시하는 설정으로, 필요한 경우 체크박스를 통해 설정합니다.

JAVASCRIPT FUNCTION: Webhooks을 통해 데이터를 Google Sheets로 넘겨주는 코드를 작성하는 곳입니다. 아래 코드를 복사하여 알맞은 위치에 알맞은 데이터를 사용합니다.

const fetch = require('node-fetch');
const webhookUrl = '위에서 복사한 Webhooks URL';
const body = {
    /*
    "Google Sheet 컬럼명": $kubChain에서 설정한 Property 이름
    */
    "Name": $Name,
    "Phone": $Phone,
    "Note": $Note
};
const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
};
try {
    const response = await fetch(webhookUrl, options);
    const text = await response.text();
    return text;
} catch (error) {
    console.error(error);
    return '';
}