봇 개발자용 적응형 카드Adaptive Cards for Bot Developers

적응형 카드는 봇에 매우 적합합니다.Adaptive Cards are a great fit for Bots. 카드를 한 번 작성한 후 Microsoft Teams와 같은 여러 앱, 자신의 웹 사이트 등에 멋지게 렌더링할 수 있습니다.They let you author a card once and have it render beautifully inside multiple apps, like Microsoft Teams, your own website, and more.

참고

현재 미리 보기에서는 Skype가 지원되지 않습니다.Skype is not supported in the current preview. 최신 정보는 파트너 상태 페이지를 참조하세요.See the Partner Status page for the latest.

사용해 보기Try it out

다음 링크를 클릭하고 Scuba Bot과 이야기하세요.Click the following link and talk to our Scuba Bot. I'm looking for scuba라고 말하면 꿈꾸던 스쿠버 여행을 예약하도록 도와줄 것입니다.Say I'm looking for scuba and it'll help you book the scuba trip of your dreams.

모든 봇 응답은 적응형 카드를 사용하여 생성됩니다.All of the bot's responses are created with Adaptive Cards.

스쿠버 채팅 스크린샷Scuba chat screenshot

코드 확인: 전체 Contoso Scuba Bot 소스 코드는 GitHub에서 확인할 수 있습니다.Get the code: the full Contoso Scuba Bot source code can be found on GitHub.

Bot Framework 통합Bot Framework Integration

Bot Framework를 사용하여 Skype, Microsoft Teams, Facebook Messenger 등과 같은 여러 "채널"을 통해 사용자와 채팅할 수 있는 단일 봇을 작성할 수 있습니다.With the Bot Framework you can write a single bot that is able to chat with users across multiple "channels", like Skype, Microsoft Teams, Facebook Messenger, etc.

연습Walkthrough

봇에 적응형 카드를 추가하는 방법은 상당히 직관적입니다.It's pretty straight forward to add an Adaptive Card to your bot.

0단계: 기본 메시지를 사용하여 시작Step 0: Start with a basic message

모든 채널에 제공하고 사용자에게 텍스트를 표시할 수 있는 표준 Bot Framework message 페이로드가 있습니다.Here's a standard Bot Framework message payload that can be delivered to any channel and display text to the user.

{
   "type": "message",
   "text": "Plain text is ok, but sometimes I long for more..."
}

1단계: 적응형 카드 attachment 추가Step 1: Add an Adaptive Card attachment

Bot Framework에는 텍스트 이외의 서식을 추가할 수 있는 attachments라는 개념이 있습니다.To add some richness beyond just text, the Bot Framework has a concept of attachments.

사용자 지정 텍스트를 표시하는 적응형 카드를 연결해 보겠습니다.Let's attach an Adaptive Card that displays custom text.

기본 적응형 카드

{
  "type": "message",
  "text": "Plain text is ok, but sometimes I long for more...",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "TextBlock",
            "text": "Hello World!",
            "size": "large"
          },
          {
            "type": "TextBlock",
            "text": "*Sincerely yours,*"
          },
          {
            "type": "TextBlock",
            "text": "Adaptive Cards",
            "separation": "none"
          }
        ],
        "actions": [
          {
            "type": "Action.OpenUrl",
            "url": "http://adaptivecards.io",
            "title": "Learn More"
          }
        ]
      }
    }
  ]
}

2단계: 서식이 더 많은 카드 작성Step 2: Build even richer cards

적응형 카드는 사용자 지정 가능한 텍스트보다 훨씬 더 많은 서식을 제공합니다.Adaptive Cards offer much more than just customizable text.

다음을 수행할 수 있습니다.You can:

  • 카드에 Images 추가Add Images to your card
  • ContainersColumns를 사용하여 콘텐츠 구성Organize your content with Containers and Columns
  • 여러 유형의 Actions 추가Add multiple types of Actions
  • 사용자로부터 Input 수집Collect Input from your users
  • 한 카드에 show another card 명령Have one card show another card
  • 전체 스키마 탐색기를 확인해 보세요!Check out the full schema explorer!

플랫폼 SDKPlatform SDKs

봇이 .NET 또는 NodeJS를 사용하여 개발된 경우 라이브러리를 사용하여 적응형 카드를 훨씬 더 쉽게 작성할 수 있습니다.If your bot is developed using .NET or NodeJS we have libraries to make building Adaptive Cards even easier.

플랫폼Platform 설치Install 자세한 정보Learn more
.NET.NET Install-Package AdaptiveCards -IncludePrerelease Bot Framework .NET 문서Bot Framework .NET Docs
NodeJSNodeJS npm install adaptivecards Bot Framework NodeJS 문서Bot Framework NodeJS Docs

채널 상태Channel status

Bot Framework를 사용하여 여러 채널에 봇을 게시할 수 있습니다.The Bot Framework lets you publish your bot to multiple channels. Microsoft는 적응형 카드에 대한 완벽한 지원을 제공하기 위해 다양한 채널과 협업하고 있습니다.We're working with various channels to provide full support for Adaptive Cards. 최신 정보는 파트너 상태 페이지를 참조하세요.See the Partner Status page for the latest.

자세히 알아보세요.Dive in!

이 자습서에서는 극히 일부만 다루었으므로 적응형 카드로 봇을 개선하는 더 많은 방법을 살펴보려면 아래의 링크를 확인하세요.We've just scratched the surface in this tutorial, so please take a look at the links below to explore more ways that Adaptive Cards can enhance your bot.