MixedCode

안녕하세요. 믹스드코드입니다.
Azure Bot Service  개발 및 서비스 환경 구성방법 및 기초적인 Azure Bot서비스의 개발,배포,에뮬레이터 사용법등을 안내해드립니다.

0.챗봇 개발환경 준비 및 구성하기

Step1.Visual Studio 2017 Community(무료) 설치하기
-다운로드링크: https://www.visualstudio.com/ko/ 링크이동합니다. 
-다운로드 사이트에서 Windows용다운로드 버튼 클릭>Community 클릭 다운로드후 설치진행합니다.
-Visual Studio 2017 Community(무료)버전 다운로드하여 설치합니다.



-설치시 반드시 워크로드 부분에서 상기 설치항목들중  웹 및 클라우드 하위 항목중 ASP.NET 및 웹 개발 과 Azure 개발  두가지 항목의 우측에 있는 체크박스를 반드시 체크후 설치를 진행해주세요.
-상기 항목 체크없이 설치하시면 Azure Bot 서비스를 Visual Studio로 개발이 불가합니다.
-물론 추가설치도 가능합니다.


Step2.ChatBot Project 템플릿 다운로드 및 설치
-애저봇서비스 메인페이지 : https://dev.botframework.com/
-봇빌더를 이용한 봇만들기 소개 : https://docs.microsoft.com/en-us/azure/bot-service/dotnet/bot-builder-dotnet-quickstart
-애저봇서비스 기반에서 챗봇을 개발할수 있는방법은 크게 Azure Portal 사이트에서 심플하고 자동화된 방식으로 개발하는방법과
Visual Studio 2017 기반에서 제공되는 BotBuilder 환경을 통해 강력하고 편리하게 개발하는 두가지 방법을 제공합니다.




-봇빌더를 이용한 봇만들기 소개페이지(  https://docs.microsoft.com/en-us/azure/bot-service/dotnet/bot-builder-dotnet-quickstart ) 의 
사전조건(Prerequisites)항목에 링크되어 있는 BotApplication,BotController,BotDialog 개발템플릿을 여러분의 컴퓨터로 다운받습니다.


1) Bot Application 개발 프로젝트 템플릿 다운로드
http://aka.ms/bf-bc-vstemplate
-다운받은 압축파일 그대로 C:\Users\현재사용자계정\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C#\ 경로에 붙여넣습니다.

2) Bot Controller 아이템 템플릿 다운로드
http://aka.ms/bf-bc-vscontrollertemplate
-다운받은 압축파일 그대로 C:\Users\현재사용자계정\Documents\Visual Studio 2017\Templates\ItemTemplates\Visual C#\

3) Bot Dialog 개발 아이템 템틀릿 다운로드
http://aka.ms/bf-bc-vsdialogtemplate
-다운받은 압축파일 그대로 C:\Users\현재사용자계정\Documents\Visual Studio 2017\Templates\ItemTemplates\Visual C#\
 

Step3.ChatBot Emulator 설치하기
-다운로드: https://github.com/Microsoft/BotFramework-Emulator/releases 
-항목중 botframework-emulator-Setup-3.5.35.exe 파일을 다운로드 후 설치합니다.
-개발자 컴퓨터에서 챗봇을 개발하고 테스트하기 위한 에뮬레이터 프로그램입니다.




1.개발준비가 모두 완료되었으면 Visual Studio 2017를 시작합니다.


2.상단 파일메뉴>새로만들기>프로젝트를 클릭하여 솔루션을 구성합니다.
-새프로젝트 팝업 좌측트리메뉴>기타 프로젝트형식>Visual Studio솔루션을 클릭합니다.
-화면중간 빈솔루션을 클릭 후 상단 .NET Framework 선택콤보박스가 있으면 .Net Framework4.6을 선택합니다.
-하단 솔루션이름란에 MyChatBotSolution 이라고 입력합니다.
-솔루션폴더가 생성될 위치를 저는 찾아보기 버튼을 클릭하여 D:\로 지정하였습니다.
-확인버튼을 클릭하여 D:\MyChatBotSolution 경로에 솔루션 폴더를 생성을 완료합니다.



* Visual Studio는 솔루션내 다양한 종류의 프로젝트를 구성하여 하나의 솔루션 개발구조를 관리합니다. *


3.화면 우측 솔루션 탐색기에 여러분이 만드신 솔루션명이 보입니다.


4.솔루션 탐색기의 솔루션명에 오른쪽마우스클릭>추가>새프로젝트를 클릭하여 신규 프로젝트를 생성합니다.



5.챗봇 어플리케이션 프로젝트를 생성합니다.
-좌측 설치됨>VisualC#을 클릭합니다.
-중간 하단에 Bot Application 프로젝트 템플릿을 선택합니다.
-하단 프로젝트 이름에 ChatBotApplication 이라고 입력하고 솔루션폴더 위치를 확인 후 확인버튼을 클릭합니다.



6.솔루션 탐색기를 열어 Bot Application 개발 템플릿을 이용해 자동으로 개발 템플릿이 생성된것을 확인합니다. 
-정상적인 디버깅을 위해 상단메뉴>도구>옵션 팝업의 좌측 디버깅노드를 클릭 후 우측 
ASP.NET에 대해 javascript디버깅 사용(Chrome 및 IE) 항목을 체크해제합니다.


-F5 또는 상단메뉴 디버그>디버깅 시작을 클릭하여 챗봇 어플리케이션 디버깅을 실시해봅니다.
-정상적인 경우 아래와같이 웹사이트가 자동으로 브라우저에 표시되는것을 확인할수 있습니다.
*챗봇 어플리케이션(프로젝트)은 ASP.NET WEBAPI 웹 기반 프로젝트로 개발되며 OPEN API기반 RESTful서비스 방식으로 개발 및 서비스 제공됩니다.





7.디버깅 브라우저를 닫고 Visual Studio 2017로 돌아와 상단중간 빨간색네모 단추를 클릭하여 디버깅을 종료합니다.


8.추후 챗봇 RESTful 웹 어플리케이션과 연계될 웹채팅 프로젝트를 하나더 만들어보겠습니다.
-솔루션 탐색기에서  솔루션명에 오른쪽마우스클릭>추가>새프로젝트를 클릭하여 신규 프로젝트를 생성합니다.



9.새프로젝트 팝업에서 ASP.NET MVC5 웹프로젝트를 생성합니다.
-좌측 설치됨>VisualC#>웹을 선택합니다.
-가운데 ASP.NET 웹 응용 프로그램(.Net Framework)을 선택후  프로젝트 이름에  ChatWebApplication 을 입력하고
프로젝트 생성위치가 솔루션폴더로 지정되어 있는지 확인 후 프레임워크 콤보에서 .Net Framework 4.6 버전을 선택 후 확인버튼을 클릭합니다. 
-해당 프로젝트는 챗봇 프로젝트 개발 이후 챗봇 서비스와 연동될 웹채팅(채널) 용 ASP.NET MVC5 & SignalR 웹 프로젝트입니다.



10.새 ASP.NET 웹 응용프로그램 팝업에서 프로젝트 템플릿을 선택합니다.
-ASP.NET 4.6 템플릿을 MVC로 선택하고 하단 다음에 대한 폴더 및 핵심참조추가 항목에 Web API 체크박스를 체크 후 학인버튼을 클릭합니다.
-템플릿을 이용해 자동으로 기본적인 개발소스가 자동생성됩니다.


11.솔루션 탐색기에서 신규로 생성된 ChatWebApplication 명에 오른쪽 마우스 클릭 후 시작프로젝트로 설정을 클릭후 
F5 또는 상단메뉴 디버그>디버깅 시작을 클릭하여 웹채팅 어플리케이션 디버깅을 실시해봅니다.
-정상적인 경우 아래와같이 웹사이트가 자동으로 브라우저에 표시되는것을 확인할수 있습니다.



12.기존에 설치한 채팅 에뮬레이터를 이용해 ChatBotApplication 프로젝트의 디버깅 테스트를 진행해보겠습니다.
-다시 솔루션 탐색기에서 ChatBotApplication 명에 오른쪽 마우스 클릭 후 시작프로젝트로 설정합니다. 
-F5를 클릭하여 챗봇 어플리케이션을 디버깅모드로 실행합니다.
-챗봇 어플리케이션이 디버깅모드인 상태에서 바탕화면에 존재하는 채팅에뮬레이터를 클릭 실행합니다.
-에뮬레이터 상단의 주소입력란에 챗봇어플리케이션 로컬주소와 API주소를 추가로 아래와 같이 입력한후 Connect버튼을 클릭합니다.
-에뮬레이터 하단 문자입력란에 텍스트를 입력 후 엔터치면 "You sent ddd which was 3 characters" 글자가 챗봇어플리케이션으로부터
리턴답변이 날아옵니다.


** 포트번호는 개발자 컴퓨터마다 다를수 있으니 본인 브라우저의 포트를 확인 후 에뮬레이터에 정확한 주소를 입력해주세요.

13.디버깅을 종료하고 간단히 챗봇 프로젝트의 개발소스를 확인해보겠습니다.
-ChatBotApplication 프로젝트의 Controllers폴더를 확장하고 MessagesController.cs파일을 클릭합니다.
-MessagesController.cs파일은 ASP.NET WEBAPI ApiController클래스를 상속받아 구현된 OPEN API 컨트롤러 클래스입니다.
-현대적인 대부분의 챗봇서비스는 다양한 시스템/어플리케이션과의 연결을 위해 OPENAPI방식으로 웹상에서 서비스 되기 떄문에
Azure Bot서비스 기반이 챗봇 서비스 또한 웹기반 RESTFul방식으로 OPEN API형태로 개발되고 서비스됩니다.
-Post메소드의    await Conversation.SendAsync(activity, () => new Dialogs.RootDialog()); 코드를 보면
POST방식으로 어딘가(채널)로부터 메시지가 오면 RootDialog 대화처리 클래스로 activity 객체를 전달합니다.


-Dialog폴더아래 RootDialog.cs파일을 클릭합니다.
-RootDialog.cs 파일내 StartAsync메소드가 실행되고 MessageReceivedAsync()메소드에서 에뮬레이터에서 Activity객체에 담긴 메시지가
전달되어 메시지길이를 체크해 문자를 다시 에뮬레이터(채널)에게 전달하는 코드를 확인할수 있습니다.


14.Chatbot 주요 객체 설명
-Activity 객체 : 사용자(채널)/챗봇 상호간에 발생되고 전달되는 행위정보(메시지,카드,..)저장 및 전달 객체
-Dialog 객체: 대화주제 객체
ㄴcontext.Wait(MessageReceivedAsync); //채널로부터 다음메시지를 받을 메소드를 정의하고 대기한다.
ㄴcontext.PostAsync($"You sent {activity.Text} which was {length} characters"); //메시지를 (에뮬레이터)채널에게 발송한다.


기초적인 챗봇 서비스 개발환경 구축 및 에뮬레이터를 이용한 테스트를 진행해보았습니다.
다음은 개발된 챗봇 서비스를 Azure Cloud에 배포하고 서비스하기 위한 방법 및 절차에 대해 알아보면서 전반적으로 Azure Bot Service가 
어떻게 서비스가 이루어지는지를 확인해보도록 하겠습니다.

감사합니다.

*