Copilot Studio의 적응형 카드 표시

아티클
08/13/2024

참고

본 문서는 클래식 챗봇에만 적용됩니다. 에서 만든 에이전트 Copilot Studio를 확장하려면 Bot Framework Composer를 사용할 필요가 없습니다. 이 문서에 설명된 모든 기능은 에이전트가 직접 사용할 수 있습니다 Copilot Studio.

Bot Framework 작성기로 사용자 지정 대화 상자를 개발한 다음 Microsoft Copilot Studio 봇에 추가하여 봇을 향상시키십시오.

이 예에서는 Microsoft Copilot Studio에서 작성기를 사용하여 적응형 카드를 표시하는 방법을 알아봅니다.

중요

Composer 통합은 Teams Microsoft Copilot Studio 라이선스만 있는 사용자는 사용할 수 없습니다. 평가판 또는 전체 Microsoft Copilot Studio 라이선스가 필요합니다.

사전 요구 사항

새 토픽 만들기

Microsoft Copilot Studio에서 Contoso Meal Delivery Service라는 새 봇을 만듭니다.
토픽 페이지로 이동하여 Meal delivery options라는 새 토픽을 만듭니다.

다음 트리거 문구를 복사하여 붙여넣습니다.

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

제작 캔버스에서 기본 메시지 노드를 선택합니다. 세 개의 수직 점을 선택한 다음 삭제를 선택합니다.
트리거 문구 노드 아래에서 노드 추가 (+)를 선택하고 질문하기를 선택합니다. 그런 다음 질문 노드에서:
1. 질문하기에 What city are you in?를 입력합니다.
2. 식별에서 도시를 선택합니다.
다른 이름으로 응답 저장에서 자동으로 생성된 변수를 선택합니다. 그런 다음 변수 속성 창에서 다음을 수행합니다.
1. 이름에 user_city를 입력합니다.
2. 사용량에 봇(모든 토픽에서 액세스할 수 있음)을 선택합니다.
저장을 선택합니다.

Microsoft Copilot Studio 변수.

적응형 카드 만들기

다음으로 Composer를 사용하여 사용자의 도시에서 사용할 수 있는 식사 선택 이미지를 표시합니다.

Composer에서 봇을 엽니다. 자세한 방법은 Bot Framework Composer 시작을 참조하세요.
페이지 만들기로 이동합니다. 봇에서 추가 옵션 (...)을 선택한 다음 + 대화 추가를 선택합니다.
이름에 대해 Meals를 입력한 다음 확인을 선택합니다.
봇 응답 페이지로 이동합니다. 봇 탐색기에서 식사를 선택한 다음 코드 표시를 선택합니다.

코드 보기에서 다음 봇 응답을 복사하여 붙여넣습니다. 그런 다음 세 가지 예시 이미지 URL을 자신의 URL로 바꿉니다.

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

문자열이 있는 Composer 봇 응답 탭.

다음 코드를 복사하여 동일한 코드 보기에 붙여넣어 3개의 이미지를 표시하는 적응형 카드를 추가합니다.

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

작성기 봇 응답 탭 - 적응형 카드 JSON.

다음 코드를 복사하여 동일한 코드 보기에 붙여넣어 적응형 카드를 표시할 활동을 추가합니다.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

적응형 카드 표시

페이지 만들기로 이동합니다. 봇 탐색기에서 식사 대화를 선택한 다음 BeginDialog 트리거를 선택합니다.
제작 캔버스에서 추가 (+)를 선택한 다음 응답 보내기를 선택합니다.
새 응답 보내기 노드를 선택하여 속성 창을 엽니다. 봇 응답에서 코드 표시를 선택하여 코드 편집기로 전환합니다.

경고

다음 단계에서 코드편집기 대신응답편집기에 식을 추가하면 봇이 적응형 카드 대신 원시 JSON으로 응답합니다.
다음 식을 복사하여 코드 편집기에 붙여넣습니다.
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Microsoft Copilot Studio 전역 변수는 virtualagent 범위를 사용하여 Composer에서 액세스됩니다. 이 범위는 Composer의 속성 참조 메뉴에 나타나지 않지만 식을 직접 입력하여 액세스할 수 있습니다.

이 예에서 ${virtualagent.user_city}는 Microsoft Copilot Studio 봇에서 생성된 user_city 전역 변수를 나타냅니다.

콘텐츠 게시

Composer 콘텐츠를 게시하여 Microsoft Copilot Studio 봇에서 사용할 수 있도록 합니다.

중요

Composer에서 게시를 선택하면 변경 사항을 테스트에 사용할 수 있지만 봇이 자동으로 게시되지는 않습니다.

Microsoft Copilot Studio에 봇을 게시하여 연결된 모든 채널에서 봇을 업데이트합니다.
Microsoft Copilot Studio 토픽 페이지로 이동하여 새로운 식사 토픽을 확인하세요.
식사 배달 옵션 토픽을 엽니다.
질문 노드에서 노드 추가 (+)를 선택합니다. 다른 토픽으로 리디렉션을 선택한 다음 식사를 선택합니다.
토픽 변경 내역을 저장하려면 저장을 클릭합니다.