보툴이 뭐예요?

botui는 채팅 로봇을 쉽게 만들 수 있는 자바스크립트 라이브러리를 말한다.
CDN도 읽을 수 있습니다. 웹에 연결된 환경이라면 아주 간단하게 가져올 수 있습니다.
최근에 botui를 접할 기회가 생겨서 잊지 않으려고 쓰고 싶어요.

필요한 파일을 먼저 가져오기

botui를 사용할 때 파일을 떨어뜨릴 수 있습니다
CDN을 통해 자바스크립트와 css를 읽을 수도 있습니다.
나는 이것이 개인의 취향과 실행 환경에 따라 구분하여 사용하는 것이라고 생각한다.
이번에는 CDN에서 읽었습니다.
가져올 파일에는 다음과 같은 네 개의 파일이 있다
파일을 가져옵니다.html

<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/botui/0.3.9/botui.min.js"></script>

botui가 안에 있어요.js,vue를 사용하는 것 같습니다.js를 가져오지 않으면 실행할 수 없습니다.
참고로 IE의 버전이 너무 낡아서promise를 사용할 수 없다면 다음 파일 중 하나를 가져오면 사용할 수 있습니다.
(같은 물건이니까 취향에 따라 하나를 가져와 프로미스를 사용해 보세요)
priomis.html

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 

사용법

다음과 같이 div 탭에 id를 지정하여 이 탭에 블록을 만들고 완성 준비
botui.html

<div id="bot_app" style="padding-left: 40%; padding-right: 40%;">
    <bot-ui></bot-ui>
</div>

그리고 자바스크립트만 쓰면 쓰기도 간단해요.
아래와 같이 BotUI new를 사용하여 div 태그의 id를 매개 변수로 지정합니다.
가장 중요한 채팅 부분은:
botui.message.bot({}).then (function () {기타 처리})
채팅에 연결된 느낌이에요.
(네임스페이스는 정의되지 않고 문제가 없습니다.)
botui.js

var BOTUI = BOTUI ||  {};
BOTUI.botui = new BotUI("bot_app");

...

BOTUI.init = function(){

    BOTUI.botui.message.bot({
        delay: 300,
        content: "Hello !!"
    })
    .then(function(){

        BOTUI.user();

    });
}

...

BOTUI.init();

이동할 물건을 github 위에 놓을게요. 편하시면 보세요.
오류가 없으면 채팅이 시작됩니다.

이상입니다.
더 자세히 알고 싶으신 분들은 참조공식 사이트하세요!

주의점

botui에 페이지 링크를 표시하려면 주의해야 합니다.
최신 채팅이 멈출 때는 링크로서 역할을 발휘하지만 채팅이 진행되면서 링크는 역할을 잃게 된다.

(↑는 링크의 예로)

(↑채팅 진행 후 링크가 더 이상 작동하지 않습니다)
하지만 전체적으로 간단하게 채팅을 할 수 있으니 역시 좋은 프로그램 라이브러리군요!!