Next.js를 사용하여 내 포트폴리오를 챗봇으로 구축한 방법

시중에 있는 많은 개발자 포트폴리오는 지루하고 이전 포트폴리오도 마찬가지입니다. 챗봇으로서의 새로운 포트폴리오는 인터랙티브한 사용자 경험을 생성하고 "나"와 대화함으로써 더 많은 재미를 더하기 때문에 흥미로울 것이라고 생각합니다. 웹사이트는 live이며 Next.js를 사용하여 구축한 방법을 공유하고 싶습니다.

반응 챗봇 키트

react-chatbot-kit을 사용하여 챗봇 메시지 및 후속 옵션을 구현했습니다. 나는 이것을 설정하기 위해 this tutorial을 따랐다.

react-chatbot-kit에서 config는 초기 메시지 및 위젯(메시지와 함께 제공되는 사용자 지정 구성 요소)과 같은 설정을 구성합니다. ActionProvider 위젯으로 봇 메시지를 생성합니다. MessageParser 사용자 메시지를 구문 분석하고 ActionProvider에서 특정 작업을 호출합니다.

// index.js
import Chatbot from 'react-chatbot-kit';
...
<Chatbot
  config={config}
  actionProvider={ActionProvider}
  messageParser={MessageParser}
/>

인사말 및 농담

먼저 챗봇이 인사를 하고 사용자가 오늘 어떻게 지내는지 묻습니다. 좋은 분위기 옵션은 내 포트폴리오 섹션으로 이어지고 나쁜 분위기 옵션은 농담으로 이어집니다.

// config.js

const getMoodOptions = (actionProvider) => {
  return [
    {
      text: 'Doing great! Tell me about yourself',
      handler: () => actionProvider.handleGoodMood(),
      id: 1,
    },
    {
      text: 'Having a bad day...',
      handler: () => actionProvider.handleBadMood(),
      id: 2,
    },
  ];
};

const config = {
  initialMessages: [
    createChatBotMessage(
      "Hi, I'm Jeffrey. Nice to meet you! I How are you doing today?",
      { widget: 'moodOptions' }
    ),
  ],
widgets: [
    {
      widgetName: 'moodOptions',
      widgetFunc: ({ actionProvider }) => (
        <Options actionProvider={actionProvider} getOptions={getMoodOptions} />
      ),
    },
  ]
}

// ActionProvider.js

class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleGoodMood() {
    const message = this.createChatBotMessage(intro, {
      widget: 'personalOptions',
    });
    this.updateChatbotState(message);
  }

  async handleBadMood() {
    const jokeData = await (
      await fetch('https://v2.jokeapi.dev/joke/Any?type=single')
    ).json();
    const message = this.createChatBotMessage(
      `Let me tell you a joke: ${jokeData.joke}`,
      {
        widget: 'jokeOptions',
      }
    );
    this.updateChatbotState(message);
  }
}

포트폴리오 섹션

사용자가 농담을 즐긴 후 내 경험, 프로젝트, 기술 또는 블로그를 보도록 선택할 수 있습니다. 섹션별로 위젯 카드를 만들고 앞선 인사처럼 config와 ActionProvider에 추가했습니다.



사용자가 챗봇을 사용하지 않고도 내 포트폴리오를 탐색할 수 있도록 사이드바에 섹션 카드를 추가합니다. 사용자 메시지에 대한 AI 응답도 추가하여 웹 사이트에 더 많은 재미를 더하고 있습니다 :)

이 웹 사이트here의 코드를 확인할 수 있습니다.