Bot Builder for Node.js (Bot Framework Version 3.0)에서 'Hello World' Part-2

소개



Bot Builder for Node.js (Bot Framework Version 3.0)에서 'Hello World' Part-1 의 계속입니다.
이번에는 Web Chat을 만들 때까지 실시합니다.
이전에는 Azure를 사용하여 환경을 구축했지만 무료 플랜에서는 SSL을 사용할 수 없었습니다 (2016/9/6 Azure 무료 플랜에서도 SSL은 사용할 수있었습니다) 그래서 환경을 Heroku로 변경합니다.
※이하는 설정에 실패하는 부분입니다.
Microsoft Bot Framework 포털

1.Heroku 환경 설정 및 테스트



1-1.package.json 수정



Heroku는 Procfile을 배치하지 않는 경우, 디폴트에서는 npm start 커멘드가 실시되는 것 같기 때문에 ※1, package.json를 이하와 같이 수정합니다. (start 부분을 추가하기만 하면 됩니다)


※1 참조

1-2. 환경 변수 설정과 Node.js



Heroku Node.js Support 의 Azure 환경 변수 설정과 마찬가지로 환경 변수를 설정합니다.
또한 Node.js가 실행되도록 Add buildpack을 클릭하고 node.js의 buildpack을 추가합니다.
Part-1

1-3. 배포 소스 설정



배포 소스를 GitHub로 만들고 해당 리포지토리를 연결합니다. Enable Automatic Deploys를 클릭하지만 처음 연동할 때 Deploy Branch를 클릭하여 모듈을 배치해야 합니다.


1-4.Heroku 환경에서 테스트



마찬가지로 ngrok을 사용하여 heroku 환경에서도 테스트를 수행합니다.
Part-1

2. Microsoft Bot Framework 포털의 설정 변경



로 이동하여 Messaging endpoint에 https로 시작하는 Heroku 환경의 URL을 설정합니다.
Microsoft Bot Framework 포털

3.Web Chat 만들기



에서 Get bot embed codes를 클릭합니다.
Microsoft Bot Framework 포털

웹 채팅 아이콘을 클릭하여 임베디드 HTML 코드와 보안을 삼가세요.


적절한 이름의 html 파일을 만들고 이전 정보를 포함합니다.

botchat.html
<html>
    <head>
    </head>
    <body>
        <iframe src="https://webchat.botframework.com/embed/tworks55-bot?s=ZtLXebNAD8M.xxx.xxx.xxxxxxxxxxxxxx-xxxxxxxxxxxxx_xxxxxxxxxxxxxx" style="height: 502px; max-height: 502px;"></iframe>
    </body>
</html>

브라우저에서 만든 HTML을 열면 웹 채팅을 사용할 수 있습니다.


라는 느낌으로 Hello World를 끝냅니다.



다른 채널도 시도해 보았습니다. 상당히 쉽게 멀티 채널을 실현할 수 있도록되어있는 인상입니다. LINE 대응해 주면 좋은 생각도 듭니다만, 없을까-?

슬랙





Skype





Facebook Messenger





참고



좋은 웹페이지 즐겨찾기