Copilot Studio içinde Uyarlamalı Kartı gösterme

Makale
09/27/2024

Not

Bu makale yalnızca klasik sohbet botları için geçerlidir. Oluşturulan yardımcı pilotları genişletmek Copilot Studioiçin Composer'ı kullanmanıza Bot Framework gerek yoktur. Bu makalede açıklanan tüm özellikler yardımcı pilotlar tarafından doğrudan kullanılabilir Copilot Studio.

Bot Framework Composer ile özel diyaloglar geliştirerek ve bunları Microsoft Copilot Studio botunuza ekleyerek botunuzu geliştirin.

Bu örnekte, Composer'ı kullanarak Microsoft Copilot Studio'ta nasıl Uyarlamalı Kart gösterileceğini öğreneceksiniz.

Önemli

Composer tümleştirmesi yalnızca Teams Microsoft Copilot Studio lisansına sahip olan kullanıcılar tarafından kullanılamaz. Bir deneme veya tam Microsoft Copilot Studio lisansınız olmalıdır.

Önkoşullar

Yeni konu oluştur

Microsoft Copilot Studio'ta, Contoso Meal Delivery Service adlı yeni bir bot oluşturun.
Konular sayfasına gidin ve Meal delivery options adlı yeni bir konu oluşturun.

Aşağıdaki tetikleme tümceciklerini kopyalayıp yapıştırın:

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

Yazma tuvali'nde, varsayılan İleti düğümünü seçin. Üç dikey noktayı ve ardından Sil'i seçin.
Tetikleme tümcecikleri düğümü altında Düğüm ekle (+) seçeneğini ve ardından Bir soru sorun'u seçin. Ardından Soru düğümünde:
1. Bir soru sorun için What city are you in? yazın.
2. Kimlik için Şehir'i seçin.
Yanıtı farklı kaydet kısmında, otomatik olarak oluşturulan değişkeni seçin. Daha sonra değişken özellikleri bölmesinde:
1. Ad için user_city yazın.
2. Kullanım için Bot (tüm konular erişebilir) seçeneğini seçin.
Kaydet'i seçin.

Microsoft Copilot Studio değişkeni.

Uyarlamalı kart oluşturma

Ardından, Composer'ı kullanarak kullanıcının şehrinde kullanılabilir olan yemek seçimi görüntülerini görüntüleyeceksiniz.

Botunuzu Composer'da açın. Bunun nasıl yapılmasına ilişkin yönergeler için bkz Bot Framework Composer'ı kullanmaya başlama.
Oluştur sayfasına gidin. Botunuzda Diğer seçenekler'i (...) ve ardından + Diyalog ekle'yi seçin.
Ad için Meals yazın ve ardından Tamam'ı seçin.
Bot Yanıtları sayfasına gidin. Bot gezginindeYemekler'i ve ardından Kodu göster'i seçin.

Kod görünümünde, aşağıdaki bot yanıtını kopyalayıp yapıştırın. Ardından üç örnek görüntü URL'sini kendinizinkiyle değiştirin.

# 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

Dizelerle Composer Bot Yanıtları sekmesi.

Üç resim görüntüleyen bir Uyarlamalı Kart eklemek için aşağıdaki kodu kopyalayıp aynı kod görünümüne yapıştırın.

# 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"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Composer Bot Yanıtları sekmesi - Uyarlamalı Kart JSON'ı.

Uyarlamalı Kartı görüntüleyecek bir etkinlik eklemek için aşağıdaki kodu kopyalayıp aynı kod görünümüne yapıştırın.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

Uyarlamalı Kartınızı görüntüleme

Oluştur sayfasına gidin. Bot gezgininde Yemekler diyaloğunu ve ardından BeginDialog tetikleyicisini seçin.
Yazma tuvalinde Ekle (+) seçeneğini ve ardından Yanıt gönder'i seçin.
Özellikler bölmesini açmak için yeni Yanıt gönder düğümünü seçin. Bot yanıtları altında kod düzenleyicisine geçmek için Kodu göster'i seçin.

Uyarı

Sonraki adımdaki ifadenin kod düzenleyici yerine yanıt düzenleyiciye eklenmesi, botun Uyarlamalı Kart yerine ham JSON ile yanıt vermesine neden olur.
Aşağıdaki ifadeyi kopyalayıp kod düzenleyiciye yapıştırın.
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Microsoft Copilot Studio genel değişkenlerine virtualagent kapsamı kullanılarak Composer'dan erişilir. Bu kapsam, Composer'ın özellik başvurusu menüsünde görünmez, ancak doğrudan bir ifade girerek buna erişebilirsiniz.

Bu örnekte ${virtualagent.user_city}, Microsoft Copilot Studio botunda oluşturulan user_city genel değişkenini ifade eder.

İçeriğinizi yayımlama

Composer içeriğinizi botunuzda Microsoft Copilot Studio kullanılabilir hale getirmek için yayımlayın.

Önemli

Composer'da Yayımla'yı seçmek değişiklikleri test için kullanılabilir hale getirir ancak botunuzu otomatik olarak yayımlamaz.

Botunuzu bağlı olduğu tüm kanallarda güncelleştirmek için botunuzu yayımlayın Microsoft Copilot Studio .
Yeni Yemekler konunuzu görmek için Microsoft Copilot Studio Konular sayfasına gidin.
Yemek teslimatı seçenekleri konusunu açın.
Soru düğümü altından Düğüm ekle'yi (+) seçin. Başka bir konuya yeniden yönlendir'i ve ardından Yemekler'i seçin.
Değişiklikleri konunuza kaydetmek için Kaydet'i seçin.

Botu sına

Microsoft Copilot Studio'taki değişikliklerinizi test etmek için Botu test et bölmesini açın ve Konu değişse de takip et'in açık olarak ayarlandığından emin olun. Konuşmanızı başlatmak için What meals do you deliver? iletisini girin.

Botunuz, kullanıcıya geçerli şehrini soran Yemek teslimatı seçenekleri konusunu tetikleyecektir. Daha sonra bot, Uyarlamalı Kart görüntülemek için Composer'ın Yemekler diyaloğuna yeniden yönlendirecektir.

Microsoft Copilot Studio Örnek 1 testi.

Sonraki adım

İçinde çoklu seçim seçenekleri listesini görüntüleyin Copilot Studio.

Aracılığıyla paylaş