Gate 1 - 최소기능의 Echo Chat Bot 만들기

지난 이야기

Gate 1 마감이 24시간도 안남은 상황에서 뭐해야되는지도 모르는 사람이 있다?! -> 자기소개

 

그래도 최소기능... 이라니까.... 금세하겠지 라는 마음가짐으로 시작합니다~

 

1. Chat Bot Initialize

결론부터 말하면 읽어본 결과 할 것이 없었습니다.... 그저 환경설정을 하고 Project Initializing을 하는 시간이었던 것입니다. 그리고 Azure에서 지원하는 ChatBot Framework가 너무 잘되위어있어서... 머쓱!

 

https://docs.microsoft.com/ko-kr/azure/bot-service/?view=azure-bot-service-4.0

Azure Bot Service 설명서 - Bot Service

우선 여기입니다. 여기에 접속하면 5분 빠른시작이 있습니다. 정말 5분이면 만들어요. 저 중 가장 만만해보이는 친구는 Python이니 Python으로 5분만에 만들어봅시다.

사전 요구사항

먼저 사전 요구사항이에요. 파이썬으로 할거니까 파이썬은 당연히 있으셔야 하구요. 파이썬과 함께 pip도 있으셔야합니다!

에뮬레이터는 아래 링크에서 설치하시면 됩니다!

https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.9.0

Release 4.9.0 · microsoft/BotFramework-Emulator

20.07.05 기준 최신버전입니다. 맨 아래의 Assets를 이용해서 자신에게 알맞은 파일을 받으시면 됩니다. 저는 4번째 Windows용 Setup파일을 사용했어요.

 

그리고 마지막으로 Python의 비동기 프로그래밍..? Umm... 웹소켓 기반이니까 당연하겠지..? 정도로 패스!

---

본격적으로 시작해봅시다!

 

먼저 필요한 파이썬의 패키지들을 pip를 통해서 다운받을거에요.

 

이번 실습에 필요한 패키지들은 아래의 네가지가 사용되어요.

botbuilder-core : 각종 상호작용과 기능을 명시적으로 수행할 수 있게 해주는 강력한 Framework
asyncio : 비동기적인 기능을 담당
aiohttp : 비동기적으로 http를 요청해주는 역할
cookiecutter : 봇을 생성하는 역할

위 네가지 패키지를 사용해본 적이 없다면 설치를 해야합니다.

설치는 pip를 통해 할 수 있는데, 아래와 같이 진행해주시면 됩니다.

pip install "패키지명"

이렇게 해주시면 됩니다. 이 때, 하나하나 하는 것이 아니라 한번에 써주셔도 됩니다.

pip install botbuilder-core asyncio aiohttp cookiecutter

이렇게 띄어쓰기로 구분해서 말이죠.

 

그럼 환경설정은 끝났습니다. 이제 cookiecutter를 이용해서 괜찮은 echo봇 하나를 끌어와볼까요?

cookiecutter https://github.com/microsoft/botbuilder-python/releases/download/Templates/echo.zip

아래와 같이 코드를 작성하시면 이름과 설명을 할 수 있도록 도와줍니다.

저는 이미 받아서 받았었다고 뜨네요.

이제 아래 두줄을 보시면 bot의 이름과 설명을 할 수 있게 되어있습니다. 여기에 원하는 이름과 설명을 채워 넣으면 됩니다.

 

그러면 이제 봇이 완성되었습니다!!! 참 쉽죠?

 

2. 실행시켜보기

이제 자신의 개발환경으로 가서 app.py를 실행시켜주시면 됩니다.

 

잠깐! 실행하기 전에 파이썬의 개발환경에서 가상환경을 사용해 주시는 분은 requirements.txt에 있는 패키지를 설치해야합니다.

콘솔 창에  pip install -r requirements.txt라고 쳐줍시다. 텍스트 파일에 있는 패키지 명을 설치하는 코드에요.

 

저는 VSCode에서 개발을 하기때문에 여기서 app.py를 실행시켜주면 위 사진의 터미널과 같이 문구가 하나 뜸을 보실 수 있는데요, 여기에 3978포트에서 돌아가고 있음을 알 수 있습니다.

 

그럼 이제 처음에 설치했던 챗봇에뮬레이터를 실행하고...

시작화면의 Open Bot을 클릭해줍시다. 클릭하면 아래와 같은 창이 뜹니다.

여기에 자신의 챗봇이 돌아가고 있는 주소/api/messages를 입력해주시면 됩니다. 위에서 확인하셨죠??

아마 별 문제가 없다면 http://localhost:3978/api/messages을 입력하시면 될거에요.

 

입력을 완료하면 Connect버튼이 활성화되는데, 버튼을 눌러주시면 끝입니다.

위와 같이 한 말을 따라하는 Echo봇이네요!

 

3. 배포하기

잘 모르는 지식이라 URL을 첨부할게요.

http://blog.naver.com/warit/221558237007

Bot Framework 4.0 개발 가이드 (3) 배포하기

위의 블로그를 참고해서 수행했어요. 하지만 여기는 Visual Studio를 이용해서 하셨고, Python도 아닌 것같네요. 제가 파이썬에서 수행한 방법이 글과 다른 점을 간단히 설명해볼게요.

 

중반부까지 일치하다가 이제 ID와 PW를 추출해서 나의 챗봇에 적용시키고 배포하는 방법이 약간 달라요.

위 글에서는 ID와 PW를 appsettings.json에 추가를 해주는 데, 파이썬에는 config.py에 추가를 해줍니다.

config.py

위 사진을 확인하시면 APP_ID와 APP_PW가 있음을 보실 수 있고, 뒷편에 ""만 있고 비어있음을 알 수 있는데요, 여기에 Azure에서 추출해온 값을 입력하시면 됩니다!

 

그리고 저는 VSCode에서 진행하게 되니까 배포방법도 약간 달랐어요. VisualStudio와 달리 VScode는 기본적으로 배포를 지원하지 않으므로 Deploy to Azure라는 Extension을 사용했어요. 

설치 후에 f1을 입력하면 실행창이 나타납니다. 여기서 위의 이름을 입력하여 기능을 실행시키면 됩니다.

로그인을 안했다면 Azure로그인을 수행하고 배포를 마치면 끝입니다. 테스트는 웹앱봇의 봇관리 -> 웹채팅에서 테스트에서 해보실 수 있어요.

4. 웹사이트로 접속 가능하게하기

지금까지 저희가 배포한 것은 봇의 채팅서버를 배포했으므로, 이제 이 봇을 올려둘 웹사이트가 필요해요. 

무료로 쓰기 만만한 친구는 GitHub pages! 이를 이용하여 한번 완벽한 배포까지 마쳐보겠습니다.

 

봇 관리 메뉴의 채널로 들어가서 우측 중단에 있는 '봇 임베드 코드 얻기'를 사용해봅시다.

 

클릭하면 위와 같은 창이 뜨는데, 구성페이지로 한번 이동해보아요.

 

들어오면 암호키와 임베드 코드가 반겨줍니다. 이 두 친구를 다 복사해와야합니다. 

이 임베드 코드는 frame을 만들어서 챗봇을 불러와주는 html코드입니다. 이 코드 내에 내_비밀이 있는데 여기를 위의 암호키로 치환시켜주고, 이 코드로 index.html파일을 만들어줍시다. 딱 이것만 있어도 되고, 디자인을 조금 더 하셔도 좋아요.

 

이때, 꼭 파일이름은 index.html이어야해요! 깃허브페이지에서 index.html을 호스팅하거든요.

 

작성 후 깃허브에 Repository를 하나 생성하고, index.html파일을 업로드해주세요.

업로드 후 Setting에 들어가시면

위와 같이 GitHub Pages 메뉴가 있습니다. 처음오셨다면 아마 Source가 None으로 지정되어있을텐데, 이 친구를 master branch로 변경해주시면 됩니다. 변경하면 '자신의깃허브ID.github.io/repository이름'에 자신이 올린 파일이 호스팅됩니다. 이제 조금 기다리면 끝!

https://limm-jk.github.io/my_first_ChatBot/

https://limm-jk.github.io/my_first_ChatBot/

저같은 경우는 위의 링크에 생성되었네요.

위의 url로 접속해서 만든 Echo Bot이 작동하는 모습이에요. 나름.. 괜찮지않나요?!

 

4. 마무리

이걸로 Gate 1은 통과네요!!

 

이제 아이디어를 짜러 가도록 하겠습니다.

 

이상하거나 고칠점이 있다면 댓글 남겨주세요~!

 

글 읽어주셔서 감사합니다.