MixedCode

STARTUP BEGINS - 스타트업을 위한 손쉬운 챗봇 개발 및 서비스하기 무료 기술 세미나 Session5. 카카오 플러스 친구 챗봇과 연동하기 세션을 진행합니다. 전체 세션정보 소개 STARTUP BEGINS - 스타트업을 위한 손쉬운 챗봇 개발 및 서비스하기 무료 기술 세미나
Session1. 챗봇 및 Microsoft BotFramework 소개 및 개발환경 구축하기 https://beginmate.com/magazine/59
Session2. Azure Cloud 무료 사용자 계정 생성하기 https://beginmate.com/magazine/62
Session3. 샘플챗봇 Azure Cloud 에 배포하고 서비스하기 https://beginmate.com/magazine/63

Session4. 헤어 살롱 자동 예약 챗봇 서비스 개발하기 및 샘플소스 https://beginmate.com/magazine/68 Session5. 카카오 플러스 친구 챗봇과 연동하기 https://beginmate.com/magazine/70 Session6. Azure 자연어처리(LUIS) 인공지능기능 챗봇에 연동하기 https://beginmate.com/magazine/71

국내 챗봇 채널로서 카카오톡 플러스를 챗봇과 연결해보겠습니다.
카카톡 플러스 친구는 애저 봇서비스의 공식 지원 채널이 아니며 통신 방식 또한 챗봇의 다이렉트 라인 통신방식을 지원하지 않고 OPEN API 방식의 RESTFul방식만
현재 지원하고 있는관계로 플러스 친구와 챗봇 사이에서 RESTful 방식으로 통신을 중계해주는 메시지 중계 서비스 개발이 추가로 이루어 져야합니다.
먼저 아래 그림을 통해 카카오톡과 챗봇사이의 통신관계를 확인해봅니다.



1) 카카오 플러스와의 대화를 처리할 카카오봇 다이얼로그 파일을 생성합니다.
-Dialogs폴더에 오른쪽 마우스 클릭> 추가>새항목을 클릭하고 BotDialog 템플릿을 선택 후 KaKaoPlusBotDialog.cs 클래스를 추가합니다.




2)Messages Controller의 기능을 수정합니다.
- 사용자 메시지 처리 POST메소드의 루트 다이얼로그를 미용실 루트 다이얼로드 에서 KaKaoPlusBotDialog 로 변경합니다.
- 환영인사 메시지 처리부분을 주석처리합니다.




3) 카카오톡 플러스의 메시지 중계서비스를 담당할 ASP.NET MVC 컨트롤러를 추가합니다.
- Controllers폴더에 오른쪽 마우스 클릭 > 추가> 컨트롤러 > 최상단 MVC5 Controller - Empty 템플릿을 선택하고 컨트롤러 이름을 KeyboardController 로 입력후 추가합니다.
-KeyboardController.cs 를 아래와 같이 코딩합니다.




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ChatBotApplication.Controllers
{
    public class KeyboardController : Controller
    {

        public ActionResult Index()
        {
            Keyboard keyboard = new Keyboard();

            keyboard.type = "buttons";
            keyboard.buttons = new string[] { "인사", "대화" };

            return Json(keyboard, JsonRequestBehavior.AllowGet);
        }
    }

    public class Keyboard
    {
        public string type { get; set; }
        public string[] buttons { get; set; }
    }
}


4) 챗봇 프로젝트에 MVC 5 컨트롤러 추가 후 반드시 프로젝트 루트에 있는 Global.aspx파일 하단에 아래코드를 추가해주세요..

using System.Web.Http;
using Microsoft.Bot.Builder.Azure;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Builder.Dialogs.Internals;
using Autofac;
using Microsoft.Bot.Connector;
using System.Reflection;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Optimization;

namespace ChatBotApplication
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            GlobalConfiguration.Configure(WebApiConfig.Register);

            Conversation.UpdateContainer(
            builder =>
            {
                builder.RegisterModule(new AzureModule(Assembly.GetExecutingAssembly()));

                // Bot Storage: Here we register the state storage for your bot. 
                // Default store: volatile in-memory store - Only for prototyping!
                // We provide adapters for Azure Table, CosmosDb, SQL Azure, or you can implement your own!
                // For samples and documentation, see: [https://github.com/Microsoft/BotBuilder-Azure](https://github.com/Microsoft/BotBuilder-Azure)
                var store = new InMemoryDataStore();

                // Other storage options
                // var store = new TableBotDataStore("...DataStorageConnectionString..."); // requires Microsoft.BotBuilder.Azure Nuget package 
                // var store = new DocumentDbBotDataStore("cosmos db uri", "cosmos db key"); // requires Microsoft.BotBuilder.Azure Nuget package 

                builder.Register(c => store)
                    .Keyed<IBotDataStore<BotData>>(AzureModule.Key_DataStore)
                    .AsSelf()
                    .SingleInstance();
            });


            //MVC 설정을 하단에 추가합니다.
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}


5) 카카오톡 플러스와의 챗봇의 메시지 중계기능을 담당할  MessageController를 Controllers폴더에 추가합니다
- Controllers폴더에 오른쪽 마우스 클릭 > 추가> 컨트롤러 > 최상단 MVC5 Controller - Empty 템플릿을 선택하고 컨트롤러 이름을 MessageController로 입력후 추가합니다.
-MessageController.cs 를 아래와 같이 코딩합니다.
-directLineSecret :  애저 포탈의 WebAppBot 서브 메뉴중 채널 메뉴를 클릭하고 WEB CHAT 편집을 클릭해 암호키 표시를 클릭해 표시된 암호키값을 입력합니다. 
- botId :  애저 포탈의 WebAppBot 서브 메뉴중 애플리케이션 설정 옵션중 BotID값을 입력합니다.
- fromUser : 임의의 사용자 아이디 를 입력합니다. 

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using Microsoft.Bot.Connector.DirectLine;
using System.Threading.Tasks;
using System.Configuration;

namespace ChatBotApplication.Controllers
{
    public class MessageController : Controller
    {
        private string directLineSecret = "l0S8bJSeGj8.cwA.Sbc.Pfz3ItSPq85TJvcxq74ioK7d7awIrtqE7e-3aoWzD6U";
        private string botId = "BeginmateBotService";
        private string fromUser = "DirectLineSampleClientUser";
        private Conversation Conversation = null;
        DirectLineClient Client = null;

        // GET: Message
        public async Task<ActionResult> Index(string user_key, string type, string content)
        {

            Client = new DirectLineClient(directLineSecret);

            if (Session["cid"] as string != null)
            {
                this.Conversation = Client.Conversations.ReconnectToConversation((string)Session["CONVERSTAION_ID"]);
            }
            else
            {
                this.Conversation = Client.Conversations.StartConversation();

                Session["cid"] = Conversation.ConversationId;
            }


            Activity userMessage = new Activity
            {
                From = new ChannelAccount(fromUser),
                Type = ActivityTypes.Message,
                Text = content
            };

            await Client.Conversations.PostActivityAsync(this.Conversation.ConversationId, userMessage);

            //메시지를 받는 부분
            string watermark = null;

            while (true)
            {
                var activitySet = await Client.Conversations.GetActivitiesAsync(Conversation.ConversationId, watermark);
                watermark = activitySet?.Watermark;

                var activities = from x in activitySet.Activities
                                 where x.From.Id == botId
                                 select x;

                Message message = new Message();
                MessageResponse messageResponse = new MessageResponse();
                messageResponse.message = message;

                foreach (Activity activity in activities)
                {
                    message.text = activity.Text;
                }

                return Json(messageResponse, JsonRequestBehavior.AllowGet);
            }
        }
    }


    public class MessageResponse
    {
        public Message message { get; set; }
    }

    public class Message
    {
        public string text { get; set; }
    }
}

6) 카카오톡 플러스와 통신할 메시지 중계서비스가 모두 준비되었고 개발된 소스르 애저 봇서비스로 배포합니다.
-애저 봇서비스로 관련 소스를 배포합니다.


7)카카오톡 플러스 친구 신청하기
카카오톡 플러스  친구 서비스를 네이버에서 조회 후 검색 결과 웹사이트 분류의 플러스친구 관리자 센터 사이트로 접속합니다.
플러스친구 관리자센터 :  https://center-pf.kakao.com/login



8) 플러스친구 관리자센터 로그인 하기
- 플러스친구 관리자센터 상단 메뉴의 플러스친구 만들기 를 클릭합니다.
- 카카오 계정으로 먼저 로그인 합니다. 


9) 새 플러스친구 만들기
-로그인 인후 관리자 센터 메인에서 새플러스 친구 만들기 버튼을 클릭합니다.



10) 플러스친구 개설하기
-플러스 친구 가입정보를 입력합니다.
-프로필 사진에 챗봇아이콘으로 사용할  jpg포맷 이미지를  첨부합니다.




-좌측 관리메뉴에서 공개여부를 공개로 설정합니다.



11)개설된 플러스 친구 챗봇 관련 설정하기  
-개설된 플러스 친구의 서비스 페이지 좌측 메뉴중 스마트 채팅 메뉴를 클릭합니다.
- API 형의 설정하기 버튼을 클릭합니다.


12) API형 정보 등록
- 앱이름 : 영어로  관련 챗봇 이름을 입력합니다.
- 앱URL :  플러스 친구와 챗봇과의 메시지를 중계할 OPEN API 주소를 입력합니다. ex) https://eddyyourbot.azurewebsites.net
s상기 챗봇의  중계서비스 주소는 애저포털 > 웹앱봇의 서브 메뉴중 개요 메뉴의 내용중 EndPoint주소의 호스트 도메인주소입니다.
- 알림받을 전화번호: 서비스중 문제가 발생하면 알림을 받을 관리자 전화번호를 입력합니다. 



-API 등록 후 해당 화면에서 반드시 시작하기 버튼을 클릭 해  등록된 API를 시작해주세요




13) 카카오톡을 실행후  상단 검색 부분에서 플러스 친구명을 조회하면 하단 플러스친구 목록에 조회결과가 나타내며
 해당 플러스친구의 1:1채팅을 통해 챗봇과의 채팅이 이루어지는지 확인합니다.







*