React.js에서 챗봇을 구축하는 방법은 무엇인가요?

이 글에서는 챗봇에 대해 알아야 할 모든 것을 알려드립니다. 챗봇 사용의 이점, 챗봇의 유형, 코드 없는 챗봇 플랫폼, 사용자 지정 챗봇 솔루션에 대해 살펴봅니다. 마지막으로 React와 Back4app을 사용하여 사용자 지정 규칙 기반 챗봇을 구현해 보겠습니다.

챗봇이란 무엇인가요?

챗봇은 음성 명령, 문자 메시지 또는 두 가지 모두를 통해 사람의 대화를 시뮬레이션하도록 설계된 컴퓨터 프로그램입니다. 챗봇은 단순한 규칙 기반 봇부터 고객의 질문을 이해하고 맞춤형 답변을 생성하는 고급 AI 기반 챗봇까지 다양합니다.

챗봇은 2010년대부터 꾸준히 인기를 얻고 있으며 거의 모든 비즈니스에서 중요한 부분을 차지하고 있습니다. 봇을 통해 기업은 고객 서비스를 개선하고, 고객 참여도를 높이고, 비용을 절감하고, 사용자 경험을 개선하고, 고객 데이터를 수집할 수 있습니다.

오늘날 챗봇은 웹사이트, 모바일 앱, 모바일 메신저 등 거의 모든 곳에서 찾아볼 수 있습니다. 심지어 모바일 디바이스에 Google 어시스턴트, Siri, 빅스비 같은 가상 비서가 설치되어 있을 수도 있습니다.

챗봇의 이점

챗봇을 사용하면 많은 이점이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

비용 효율성

챗봇은 간단한 작업을 처리하는 데 능숙합니다. 간단한 쿼리는 처리하고 복잡한 쿼리는 인간 고객 서비스 담당자에게 리디렉션하도록 프로그래밍할 수 있습니다. 이렇게 하면 인건비를 크게 절감하면서도 훌륭한 고객 지원을 제공할 수 있습니다.

연중무휴 24시간 가용성

챗봇은 상담원 없이도 연중무휴 24시간 고객 서비스 및 지원을 제공하는 데 편리합니다. 고객이 여러 시간대에 흩어져 있는 경우에 유용합니다.

확장성

봇은 많은 양의 상호작용을 동시에 처리할 수 있습니다. 따라서 비즈니스 생산성이 향상되고 대기 시간이 줄어들어 고객 만족도가 높아집니다.

개인화

디지털 비서는 사용자의 개별적인 특성이나 행동에 따라 맞춤화된 추천이나 응답을 제공하도록 프로그래밍할 수 있습니다. 이를 통해 사용자 경험을 크게 개선하고 매출을 늘리며 신뢰를 쌓고 고객 유지율을 향상시킬 수 있습니다.

데이터 수집

챗봇은 고객 데이터를 수집하여 기업이 제품과 서비스를 개선하는 데 유용하게 활용할 수 있습니다. 또한 AI 기반 챗봇은 이전 대화를 통해 학습하여 시간이 지남에 따라 더 나은 지원을 제공할 수 있습니다.

다국어 지원

봇은 한 가지 언어에만 국한되지 않습니다. 일부 우수한 봇은 질문이 어떤 언어로 질문되었는지 인식하고 해당 언어로 응답할 수 있습니다.

챗봇의 유형

챗봇에는 각각 고유한 기능과 용도를 가진 여러 유형의 챗봇이 있습니다. 다양한 속성에 따라 챗봇을 분류할 수 있습니다.

인텔리전스

지능은 봇이 ‘스마트’한지 ‘덤’인지를 결정합니다. 여기서 ‘멍청한’이란 일반적으로 하드코딩된 규칙이 있고 이전에 본 적이 없는 질문에 대답할 수 없는 규칙 기반 챗봇을 의미합니다. 반면에 “스마트”란 NLP(자연어 처리)와 ML(머신 러닝)을 사용하여 고객의 질문을 이해하고 맞춤형 답변을 생성하는 AI 기반 챗봇을 의미합니다. 하이브리드 챗봇은 AI뿐만 아니라 규칙 기반 기능도 사용합니다.

• 규칙 기반 챗봇
• AI 기반 챗봇
• 하이브리드 챗봇

서비스 지역

서비스 영역에 따라 챗봇의 목적이 결정됩니다. 몇 가지 일반적인 서비스 영역은 다음과 같습니다:

• 고객 지원
• 개인 비서(빅스비, 알렉사, 아마존 에코)
• 가상 영업 도우미

플랫폼

챗봇은 다양한 플랫폼에 배포할 수 있습니다. 챗봇을 배포할 위치는 특정 사용 사례와 대상 고객에 따라 달라집니다.

• 웹(플로팅 채팅 풍선, 위젯)
• 메시징 플랫폼(페이스북 메신저, 왓츠앱, 바이버)
• 모바일 앱(빅스비, Siri, Google 어시스턴트)
• IoT 디바이스(스마트 스피커, 스마트 홈 디바이스)

상태

두 가지 챗봇 아키텍처가 있습니다:

• 상태 저장 챗봇
• 무국적 챗봇

상태 저장 챗봇은 사용자와의 이전 상호작용 기록을 유지하여 새로운 질문을 할 때 이를 고려합니다. 이는 보다 개인화된 경험을 제공할 수 있다는 점에서 매우 유용합니다. 일반적으로 더 정교하고 코딩하기가 더 어렵습니다.

반면 상태 비저장 챗봇은 이전 상호작용을 고려하지 않습니다. 각 메시지를 독립적인 요청으로 취급합니다. 더 단순하고, 개인화된 경험을 제공할 수 없으며, 문맥에 기반한 답변을 제공할 수 없습니다.

챗봇 솔루션

챗봇 플랫폼

로우코드 또는 노코드 챗봇 플랫폼은 바로 사용할 수 있는 솔루션입니다. 사용하기 쉽고, 고급 코딩 기술이 필요하지 않으며, 즉시 챗봇을 실행할 수 있습니다.

일반적으로 사용하기 쉬운 드래그 앤 드롭 편집기가 제공되어 챗봇의 동작을 정의할 수 있습니다. 웹사이트, Facebook Messenger, Slack, Whatsapp 등 다양한 플랫폼에 쉽게 배포할 수 있습니다.

커스텀 봇보다 제어 및 커스터마이징 수준이 낮습니다. 이러한 플랫폼의 가장 큰 단점은 공급업체 종속성입니다. 한 번 플랫폼을 선택하면 다른 플랫폼으로 쉽게 마이그레이션할 수 없습니다.

이러한 플랫폼의 몇 가지 예로는 티디오, 랜드봇, 챗봇, 에이전트봇이 있습니다.

사용자 지정 봇

사용자 지정 봇은 모든 비즈니스의 특정 요구 사항에 맞게 조정할 수 있는 고도로 맞춤화되고 유연한 솔루션입니다. 기존 시스템 및 데이터베이스와 원활하게 통합할 수 있습니다.

챗봇을 처음부터 구축하는 것은 어려운 작업이므로 기성 챗봇 플랫폼을 사용하는 것보다 시간이 오래 걸리고 비용이 더 많이 들 것으로 예상할 수 있습니다. 고급 AI 봇을 만드는 것이 목표라면 전문 개발자 팀도 필요할 것입니다.

커스텀 봇은 거의 모든 프로그래밍 언어로 작성할 수 있습니다. 대부분의 개발자는 Python, Node.js, JavaScript 및 Java를 선택합니다. 봇 생성 프로세스를 더욱 간소화하기 위해 선택할 수 있는 오픈 소스 챗봇 라이브러리가 많이 있습니다.

챗봇은 어떻게 구축하나요?

이 튜토리얼의 이 부분에서는 사용자 정의 규칙 기반 챗봇을 만들어 보겠습니다. 프론트엔드에는 React를, 백엔드에는 Back4app을 사용하겠습니다.

Back4app이란 무엇인가요?

Back4app은 개발자가 맞춤형 모바일 애플리케이션을 쉽게 구축하고 유지 관리할 수 있는 클라우드 호스팅 백엔드 서비스(BaaS) 플랫폼입니다. 직관적인 사용자 인터페이스, 강력한 대시보드, 명령줄 인터페이스(CLI), 푸시 알림, 분석, 데이터 저장소 등의 유용한 도구를 제공합니다.

또한 Flutter, React Native, Node.js, Angular, Android, iOS 등 여러분이 즐겨 사용하는 모든 도구에 대한 SDK를 제공합니다!

Back4app의 주요 기능은 다음과 같습니다:

• 스프레드시트와 유사한 인터페이스
• REST 및 GraphQL 애플리케이션 프로그래밍 인터페이스 – API
• 실시간 쿼리
• 인증(소셜 인증 포함)
• 확장 가능한 호스팅
• 알림

자세한 내용은 Back4app 기능에서 확인하세요.

Back4app은 예측 가능하고 이해하기 쉬운 가격 모델을 따릅니다. 플랫폼 프로토타이핑 및 테스트에 적합한 넉넉한 무료 요금제(신용카드 필요 없음)를 제공합니다. 여기에는 다음이 포함됩니다:

• 25,000건의 API 요청
• 250MB 데이터 스토리지
• 1GB 데이터 전송
• 1GB 오브젝트 스토리지

Back4app 요금에 대한 자세한 내용은 가격 페이지를 참조하세요.

프로젝트 소개

미리 정의된 요청과 응답이 있는 간단한 챗봇을 구축할 것입니다. 챗봇은 텍스트, 이미지로 응답하고 마지막 요청에 따라 다양한 옵션을 표시할 수 있습니다. 프론트엔드는 React로 구축하고 백엔드에는 Back4app(Express 포함)을 사용할 것입니다.

전제 조건:

• JavaScript 사용 경험
• 리액트 및 리액트 훅 사용 경험
• HTTP 요청 및 응답에 대한 기본 이해
• BaaS(서비스형 백엔드)에 대한 기본 이해

먼저 프론트엔드에서 작업한 다음 백엔드에서 작업하고 마지막으로 두 조각을 연결합니다.

챗봇 프런트엔드

React 앱 만들기

먼저 React 앱 만들기를 통해 새 React 앱을 생성해 보겠습니다:

$ npx create-react-app react-chatbot
$ cd react-chatbot

그러면 재액트-챗봇이라는 이름의 React 앱이 생성되고 작업 디렉터리가 변경됩니다.

그런 다음 프로젝트를 시작합니다:

$ npm start

마지막으로 http://localhost:3000/ 을 열어 웹 앱을 확인합니다.

Material UI

UI 구축 프로세스를 간소화하기 위해 Google의 머티리얼 디자인을 구현하는 오픈 소스 React 컴포넌트 라이브러리인 Material UI를 사용하겠습니다. 컴포넌트 라이브러리에는 바로 사용할 수 있는 사전 빌드된 컴포넌트의 포괄적인 컬렉션이 포함되어 있습니다.

머티리얼 UI를 리액트 부트스트랩이나 Ant Design과 같은 다른 UI 프레임워크로 자유롭게 교체할 수 있습니다.

프로젝트 실행에 머티리얼 UI를 추가하려면

$ npm install @mui/material @emotion/react @emotion/styled

머티리얼 UI는 기본적으로 Roboto 글꼴을 사용합니다. 함께 설치해 보겠습니다:

$ npm install @fontsource/roboto

다음으로 index.js로 이동하여 다음 가져오기를 추가합니다:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

사용자 인터페이스

src 폴더 내의 App.js로 이동하여 해당 내용을 다음과 같이 바꿉니다:

// src/App.js

import React, {useEffect, useState} from "react";
import {Box, Button, Card, CardContent, Grid, TextField} from "@mui/material";

function App() {

  const messagesListRef = React.createRef();
  const [messageInput, setMessageInput] = useState("");
  const [messages, setMessages] = useState([]);

  const sendMessage = (content) => {
    // add the message to the state
    setMessages([
      ...messages,
      {
        content: content,
        isCustomer: true,
      }
    ]);

    // TODO: post the request to Back4app
  }

  const handleSubmit = (event) => {
    event.preventDefault();

    sendMessage(messageInput);
    setMessageInput("");
  }

  return (
    <Grid
      container
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Card sx={{maxWidth: 420}}>
        <CardContent>
          <Box
            ref={messagesListRef}
            sx={{
              height: 420,
              overflow: "scroll",
              overflowX: "hidden",
            }}
          >
            <Box sx={{m: 1, mr: 2}}>
              {/* TODO: messages will be displayed here */}
            </Box>
          </Box>
          <Box
            component="form"
            sx={{
              mt: 2,
              display: "flex",
              flexFlow: "row",
              gap: 1,
            }}
          >
            <TextField
              variant="outlined"
              size="small"
              value={messageInput}
              onChange={(event) => setMessageInput(event.target.value)}
              fullWidth
            />
            <Button
              variant="contained"
              onClick={handleSubmit}
              type="submit"
            >
              Send
            </Button>
          </Box>
        </CardContent>
      </Card>
    </Grid>
  );
}

export default App;

1. 제출 시 핸들 서브밋()을 호출하는 메시지 입력이 있는 간단한 양식을 정의했습니다.
2. 상태를 처리하기 위해 React useState() 훅을 사용했습니다.
   • messageInput은 현재 메시지
   • 메시지는 메시지 목록입니다.
3. handleSubmit()은 메시지 입력을 지우고 state에 메시지를 추가하는 sendMessage( )를 호출합니다.

계속해서 메시지를 표시하는 컴포넌트를 만들어 보겠습니다.

src 폴더 내에 구성 요소라는 이름의 새 폴더를 만들고 해당 폴더에 다음 내용이 포함된 Message.js라는 새 파일을 만듭니다:

// src/components/Message.js

import avatar from "../assets/bot.png";
import {Avatar, Box, Chip, Typography} from "@mui/material";

export default function Message(props) {
  return (
    <div>
      <Box
        sx={{
          my: 2,
          display: "flex",
          flexFlow: "row",
          justifyContent: props.isCustomer ? "right" : "left",
        }}
      >
        {!props.isCustomer && (
          <Avatar sx={{mr: 1, bgcolor: "primary.main"}}>
            <img src={avatar} alt="Chatbot avatar" width={32}/>
          </Avatar>
        )}
        <Box>
          <Typography gutterBottom variant="body2" component="div" sx={{mt: 1.5}}>
            {props.content}
          </Typography>
          {props.image && (
            <img src={props.image} alt="Bot response" style={{width: "100%"}}/>
          )}
          {!props.isCustomer && props.choices && (
            <Box sx={{mt: 1}}>
              {props.choices.map((choice, index) => (
                <Chip
                  key={index}
                  label={choice}
                  onClick={() => props.handleChoice(choice)}
                  sx={{mr: 0.5, mb: 0.5}}
                />
              ))}
            </Box>
          )}
        </Box>
      </Box>
    </div>
  );
}

이 컴포넌트는 몇 가지 임의의 입력(프롭)을 받은 다음 메시지를 표시합니다.

• content — 메시지 내용
• 이미지 — 메시지 이미지
• isCustomer – 사용자가 메시지를 보낸 경우 참입니다.
• 선택 사항 – 사용자가 선택할 수 있는 선택 사항
• handleChoice – 선택 항목이 선택될 때 호출되는 함수입니다.

다음으로 src 폴더 내에 자산이라는 이름의 폴더를 만들고 챗봇이 아바타로 사용할 이미지를 넣습니다. 이 이미지를 자유롭게 사용하세요.

아바타 이미지의 이름을 bot.png로 지정하거나 Message.js에서 가져오기를 변경하세요.

마지막으로 새로 만든 컴포넌트를 활용하려면 App.js에서 다음과 같이 TODO를 대체합니다:

// App.js

{messages.map((message, index) => (
  <Message
    key={index}
    content={message.content}
    image={message.image}
    isCustomer={message.isCustomer}
    choices={message.choices}
    handleChoice={sendMessage}
  />
))}

파일 상단에 가져오기를 추가하는 것을 잊지 마세요:

import Message from "./components/Message";

모든 것이 제대로 작동하는지 확인하려면 즐겨찾는 웹 브라우저를 열고 http://localhost:3000 으로 이동합니다. 몇 가지 메시지를 보내 보세요. 모든 것이 잘 작동하면 UI에 추가되어야 합니다:

챗봇 백엔드

이제 백엔드를 구현해 보겠습니다.

앱 만들기

다음 단계를 수행하려면 Back4app 계정이 필요합니다. 이미 계정이 있는 경우 로그인하고 그렇지 않은 경우 무료 계정에 가입하세요.

Back4app으로 작업하려면 먼저 앱을 만들어야 합니다. 대시보드에 로그인하면 앱 목록이 표시됩니다. 새 앱을 만들려면 “새 앱 만들기”를 클릭합니다.

사용자 지정 이름을 지정하고 데이터베이스로 ‘NoSQL 데이터베이스’를 선택한 다음 ‘계속’을 클릭합니다.

Back4app은 데이터베이스, 애플리케이션 레이어, 확장, 백업 및 보안 등 앱에 필요한 모든 것을 준비하는 데 잠시 시간을 할애할 것입니다.

애플리케이션이 준비되면 앱의 대시보드로 리디렉션됩니다.

데이터베이스

챗봇의 데이터베이스 모델을 정의해 보겠습니다.

Back4app 대시보드로 이동하여 화면 왼쪽에서 “데이터베이스”를 선택합니다. 그런 다음 “클래스 만들기”를 클릭하고 이름을 BotSettings로 지정한 다음 “공개 읽기 및 쓰기 활성화”를 선택하고 “클래스 만들기 및 열 추가”를 클릭합니다.

다음 열을 추가합니다:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | welcomeContent   | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | welcomeChoices   | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseUnknown  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+

1. 환영 콘텐츠는 사용자가 채팅을 열 때 표시됩니다.
2. welcomeChoices는 사용자가 메시지를 입력하지 않고 선택할 수 있는 기본 선택 사항입니다.
3. 챗봇이 메시지에 대한 응답을 찾을 수 없는 경우 응답 알 수 없음이 반환됩니다.

그런 다음 사용자 지정 설정으로 행을 만듭니다. 예시:

+----------------+---------------------------+----------------------------------+
| welcomeContent | welcomeChoices            | responseUnknown                  |
+----------------+---------------------------+----------------------------------+
| Hi there!      | ["Shipping","Size guide"] | I don't understand this message. |
+----------------+---------------------------+----------------------------------+

다음으로 다음 열을 사용하여 BotResponse라는 이름의 다른 클래스를 만듭니다:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | requestExact     | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | requestKeywords  | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseContent  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| String    | responseImage    | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| Array     | responseChoices  | <leave blank> | no       |
+-----------+------------------+---------------+----------+

챗봇은 이 모델을 사용하여 특정 요청에 대한 올바른 응답을 찾습니다. 먼저 메시지가 요청Exact 열과 일치하는지, 일치하지 않는 경우 요청키워드가 포함되어 있는지 확인합니다. 요청과 일치하는 응답이 없는 경우 폴백 메시지가 반환됩니다.

모델을 만든 후에는 계속해서 몇 가지 응답을 만들거나 이 데이터 집합을 가져옵니다.

웹 호스팅

(클라우드 코드를 사용하여) Express API를 만들 예정이므로 앱을 호스팅하고 인터넷에서 공개적으로 액세스할 수 있도록 Back4app용 웹 호스팅을 활성화해야 합니다.

웹 호스팅 기능을 사용하려면 Back4app 대시보드로 이동하여 앱을 선택하고 화면 왼쪽의 “앱 설정”을 클릭한 다음 “서버 설정”을 클릭합니다. “웹호스팅 및 사용자 정의 도메인”을 검색하고 “설정”을 다시 클릭합니다.

“Back4app 호스팅 활성화”를 클릭하고 하위 도메인 이름을 선택합니다. 챗봇을 사용하겠습니다:

마지막으로 ‘저장’을 클릭합니다.

이제 앱에 액세스할 수 있는 위치가 변경됩니다:

https://<your_subdomain>.b4a.app/

클라우드 코드로 Express

이 튜토리얼의 이 섹션에서는 Cloud Code와 Express를 사용하여 프런트엔드에서 사용할 API를 만들겠습니다. API에는 다음과 같은 엔드포인트가 있습니다:

1. / 챗봇 설정을 반환합니다.
2. /ask/는 데이터베이스에서 요청을 조회하고 응답을 반환합니다.

화면 오른쪽에서 “클라우드 코드” > “기능 및 웹 호스팅”을 선택하고 웹 인터페이스를 사용하여 다음과 같은 디렉토리 구조를 만듭니다:

./
├── cloud/
│   ├── app.js
│   ├── package.json
│   └── routes.js
└── public/
    └── index.html

패키지.json에 다음 내용을 넣습니다:

// cloud/package.json

{
  "dependencies": {
    "body-parser": "*"
  }
}

Back4app은 이 파일을 사용하여 npm을 통해 모듈을 다운로드합니다. 나중에 요청을 구문 분석할 때 필요하기 때문에 본문 구문 분석기를 추가했습니다.

app.js에 다음을 넣어 Express 서버를 초기화합니다:

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

require("./routes");

마지막으로 routes.js 내에서 다음과 같이 경로를 정의합니다:

app.get("/", async (req, res) => {
  // fetch the settings and the default choices
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();
  res.send({
    content: settings.get('welcomeContent'),
    choices: settings.get('welcomeChoices'),
  });
})

app.post("/ask", async (req, res) => {
  let content = req.body.content.trim().toLowerCase();
  content = content.replace(/[.,?!]/, "");  // remove punctuation

  // check for exact matches
  const exactQuery = new Parse.Query("BotResponse");
  exactQuery.equalTo("requestExact", content);
  const exactResult = await exactQuery.first();

  if (exactResult != null) {
    return res.send({
      content: exactResult.get('responseContent'),
      image: exactResult.get('responseImage'),
      choices: exactResult.get('responseChoices'),
    })
  }

  // split the messsage and check for keyword matches
  const words = content.split(" ");
  for (let i = 0; i < words.length; i++) {
    const keywordQuery = new Parse.Query("BotResponse");
    keywordQuery.equalTo('requestKeywords', words[i]);
    const keywordResult = await keywordQuery.first();

    if (keywordResult != null) {
      return res.send({
        content: keywordResult.get('responseContent'),
        image: keywordResult.get('responseImage'),
        choices: keywordResult.get('responseChoices'),
      })
    }
  }

  // fallback message if the request wasn't understood
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();

  res.send({
    content: settings.get('responseUnknown'),
    choices: settings.get('welcomeChoices'),
  });
})

이 코드는 앞서 언급한 엔드포인트와 챗봇 로직이 올바른 응답을 조회하도록 정의합니다.

완료했으면 화면 오른쪽 하단의 “배포”를 클릭합니다. 모든 것이 순조롭게 진행되면 “변경사항 배포에 성공했습니다!”라는 녹색 메시지가 표시됩니다.

API 인덱스에 GET 요청을 전송하여 API가 작동하는지 확인합니다:

$ curl <your_webhost_url>

# Example: 
# curl https://chatbot.b4a.app/

{
  "content": "Hi there! 👋 I'm your digital assistant. Feel free to ask me anything!",
  "choices": [
    "Shipping",
    "Size guide",
    "Contact Us"
  ]
}

프론트엔드와 백엔드 연결

HTTP 요청 및 응답 처리를 조금 더 쉽게 하기 위해 브라우저와 Node.js를 위한 확장 가능하고 사용하기 쉬운 프로미스 기반 HTTP 클라이언트인 axios를 설치합니다.

설치하려면 실행합니다:

$ npm install axios

App.js 상단에 가져오기를 추가합니다:

import axios from "axios";

그런 다음 App.js의 상단에 다음과 같이 baseURL을 정의합니다:

// src/App.js

const baseURL = "https://<url_to_your_web_hosting>/";  // make sure to replace me

요청할 때마다 Axios에 baseURL을 전달합니다.

사용자가 웹사이트를 열 때 환영 메시지를 로드하려면 사용효과() 훅을 사용할 수 있습니다. App.js에 다음 코드를 붙여넣습니다:

// src/App.js

useEffect(() => {
  axios.get(baseURL).then(res => {
    setMessages([
      res.data,
    ])
  })
}, []);

이 코드는 Express API에 GET 요청을 제출하고 메시지에 응답을 추가합니다.

마지막으로 해야 할 일은 sendMessage()를 수정하여 백엔드에 POST 요청을 보내고 메시지에 응답을 추가하는 것입니다. 이를 위해 sendMessage()를 다음과 같이 변경합니다:

// src/App.js

const sendMessage = (content) => {
  // add the message to the state
  setMessages([
    ...messages,
    {
      content: content,
      isCustomer: true,
    }
  ]);

  // post the request and add the bot response to the state
  axios.post(baseURL + "ask", {
    content: content
  }).then(res => {
    console.log(res);
    setMessages(prevState => [
      ...prevState,
      res.data,
    ]);
  });
}

UX를 개선하려면 다음 코드를 App.js에 붙여넣어 각 응답이 자동으로 아래로 스크롤되도록 할 수 있습니다:

// src/App.js

useEffect(() => {
  messagesListRef.current.scrollTop = messagesListRef.current.scrollHeight;
}, [messagesListRef, messages]);

좋아요, 그거예요!

개발 서버를 실행하고 모든 것이 작동하는지 확인합니다.

결론

챗봇이 점점 더 인기를 얻고 있는 것은 당연한 일입니다. 챗봇의 놀라운 기능을 통해 기업은 고객 서비스를 개선하고, 고객 참여를 높이고, 비용을 절감하는 등 다양한 이점을 누릴 수 있습니다. 전문가들은 챗봇 시대는 이제 시작에 불과하며 앞으로 더욱 대중화될 것이라고 말합니다!

지금까지 튜토리얼을 통해 챗봇이 무엇인지 설명하고, 다양한 챗봇 유형과 챗봇 플랫폼을 살펴보고, 나만의 챗봇을 구축하는 방법을 배웠습니다. 저희가 구축한 챗봇은 간단한 질문에 답하는 고객 지원 환경에서 훌륭하게 작동할 것입니다.

GitHub 리포지토리에서 최종 소스 코드를 가져옵니다.

향후 단계:

1. 데이터베이스에 더 많은 응답을 추가하여 봇을 ‘더 똑똑하게’ 만드세요.
2. 웹사이트와 챗봇을 통합하세요.
3. AI를 사용하여 챗봇을 개선하는 방법을 연구하세요.

자주 묻는 질문