Adaptive Cards에서 ImBack에 준거하는 동작을 시키는 방법

Bot Builder SDK V4 릴리스 기념으로 Adaptive Card에서 버튼을 클릭했을 때 HeroCard 등의 ImBack에 준한 메시지를 Bot 서비스 측에 보내는 방법을 공유합니다.

ImBack이란?

ImBack은 다음과 같은 HeroCard에 붙어있는 "Adaptive Card"버튼을 클릭하면 마치 사용자 측에서 "Adaptive"라는 텍스트가 입력 된 것처럼 Bot 측에 메시지를 반환하는 장치입니다.

HeroCard로 ImBack하려면

코드로 표현하면 이런 느낌.

HeroCardSample.cs

// <copyright file="HeroCardSample.cs" company="Shunji Sumida">
// Copyright (c) Shunji Sumida. All rights reserved.
// </copyright>

namespace Shunji.AdaptiveCard.Cards
{
    using System.Collections.Generic;
    using Microsoft.Bot.Schema;

    /// <summary>
    /// The sample hero card.
    /// </summary>
    public class HeroCardSample : HeroCard
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="HeroCardSample"/> class.
        /// </summary>
        public HeroCardSample()
        {
            this.Title = "Hero Card";
            this.Text = "This is Hero Card. Which card do you want to show?";
            this.Images = new List<CardImage>
            {
                new CardImage("http://adaptivecards.io/content/cats/2.png"),
            };
            this.Buttons = new List<CardAction>
            {
                new CardAction(ActionTypes.ImBack, "Adaptive Card", value: "Adaptive"),
                new CardAction(ActionTypes.ImBack, "Hero Card", value: "Hero"),
            };
        }
    }
}

new CardAction() 에서 ActionTypes.ImBack 로 하는 것으로, 버튼이 클릭되었을 때에 value 로 지정된 캐릭터 라인을 Bot 에 송신합니다.

Adaptive Card로 ImBack하려면

한편, Adaptive Card에서 Bot에 데이터를 전송하려면 다음과 같은 Adaptive Card 정의 파일(JSON 형식)의 actions에 정의된 type에 Action.Submit를 설정합니다.

AdaptiveCardSample.json

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/2.png",
      "size": "",
      "spacing": "none"
    },
    {
      "type": "TextBlock",
      "text": "Adaptive Card",
      "size": "medium",
      "weight": "bolder"
    },
    {
      "type": "TextBlock",
      "text": "This is Adaptive Card. Which do you want to show?"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Adaptive Card",
      "data": "Adaptive!"
    },
    {
      "type": "Action.Submit",
      "title": "HeroCard",
      "data": "Hero"
    }
  ]
}

그러나 이것만으로는 HTML Form으로 POST하는 것과 같습니다. Input 요소가 없으면 아무것도 데이터가 전송되지 않으므로 버튼 클릭시 사용자 입력으로 보내고 싶은 텍스트 데이터를 actions 의 data 로 설정합니다. 그러면 기존 HeroCard와 같은 Rich Card에서 ImBack을 설정한 경우와 마찬가지로 Bot에 data 로 설정한 텍스트가 사용자 입력으로 전송됩니다.

Bot 애플리케이션 측에서는

data 요소를 붙이면, 다른 RichCard와 같이 사용자 입력으로서 Bot에 보내진다는 것은 매우 중요한 포인트입니다. 만약 AdaptiveCard에서 data 요소가 없는 경우, Submit되었을 뿐이므로 Bot측에서는 받는 Activity.Text 는 null가 됩니다. 예를 들어, 누른 버튼의 정보를 Input 요소로서 보내도록 해도, 그러한 데이터는 Activity.Value 에 격납되어 버리므로 같은 로직으로 종래의 RichCard 와 같이 취급할 수 없다는 것을 의미합니다.

EchoWithCounterBot.cs

public async Task OnTurnAsync(ITurnContext context, CancellationToken token = default(CancellationToken))
{
    if (context.Activity.Type == ActivityTypes.Message)
    {
        if (!string.IsNullOrWhiteSpace(context.Activity.Text))
        {
            Activity reply = context.Activity.CreateReply();
            reply.Attachments = new List<Attachment>();
            switch (context.Activity.Text)
            {
                case "Adaptive":
                    reply.Attachments.Add(this.CreateAdaptiveCardAttachment());
                    break;
                case "Hero":
                    reply.Attachments.Add(new HeroCardSample().ToAttachment());
                    break;
                default:
                    break;
            }

            await context.SendActivityAsync(reply);
        }
    }
}

이 Adaptive Card에서 "HeroCard"버튼을 클릭하면 아래와 같이 "Hero"라는 텍스트가 Bot에 전송됩니다.

호출된 HeroCard.

이후 몇 번이라도 HeroCard와 AdaptiveCard를 왕래할 수 있게 되었습니다. Bot측의 코드도 기존의 RichCard와 같은 코드로 AdaptiveCard에 대응할 수 있습니다.

코드 전체

전체 코드는 다음 리포지토리에 업로드됩니다.
htps : // 기주 b. 코 m / 나리 s 타 / 보 t 부이 l에서 r mp ぇ s

참고

Bot Builder SDK V4 샘플 모음
Adaptive Card