如何将自定义 json 转换为自适应卡 json 格式

2024-02-01

我在看https://adaptivecards.io/ https://adaptivecards.io/对于我的聊天机器人。我看到我们可以创建任何类型的卡片,并且可以使用自适应 json 渲染 ui。但是我如何将自定义 json 转换为自适应卡片 json 格式。我是否需要根据我的自定义 json 响应类型手动转换,或者是否有任何方法可以将特定 json 转换为首选自适应卡。

adaptive card response:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "What type of food do you prefer?",
            "wrap": true
        },
        {
            "type": "ImageSet",
            "imageSize": "medium",
            "images": [
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/steak.jpg",
                    "size": "Medium"
                },
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
                    "size": "Medium"
                },
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
                    "size": "Medium"
                }
            ]
        }
    ]
}

json:
{
    "title": "Publish Adaptive Card Schema",
    "description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
    "creator": {
        "name": "Matt Hidinger",
        "profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
    },
    "createdUtc": "2017-02-14T06:08:39Z",
    "viewUrl": "https://adaptivecards.io",
    "properties": [
        {
            "key": "Board",
            "value": "Adaptive Cards"
        },
        {
            "key": "List",
            "value": "Backlog"
        },
        {
            "key": "Assigned to",
            "value": "Matt Hidinger"
        },
        {
            "key": "Due date",
            "value": "Not set"
        }
    ]
}

一些背景知识,以防有帮助:原则上,卡片允许您发送比原始文本响应更结构化、格式化的消息,它们还允许您添加图像、超链接、格式等。非常重要的是,它们还允许您以按钮的形式添加交互。另外值得注意的是,团队中提供了不同类型的卡,包括但不限于自适应卡,它们本身就是一个完整的类别。

在一天结束时,你会sending卡片作为 JSON 响应。然而,有不同的方法可以store进而构建/填充在发送之前先将卡片本身。第一种方法是将它们存储为 JSON,在这种情况下,例如,您可以将卡片存储为项目中的某种资源,并使用占位符(如“title”:“##Title##”),然后在发送卡片之前将其存储在应用程序代码中。在这种情况下,您基本上是在进行字符串/正则表达式类型替换。

构建卡片的另一种常见方法是使用机器人的平台语言(C# 或 JS)。这是C# 中的示例 https://learn.microsoft.com/en-us/adaptive-cards/sdk/authoring-cards/net这是一个 JS 例子 https://learn.microsoft.com/en-us/azure/bot-service/nodejs/bot-builder-nodejs-send-rich-cards?view=azure-bot-service-3.0#send-an-adaptive-card。无论哪种情况,您都将创建卡片并在运行时使用您想要向用户显示的任何数据填充其值。对于 C#,您使用的强类型对象来自这个 nuget 包 https://www.nuget.org/packages/AdaptiveCards/)。该库中的此类还包含所需的序列化属性,以便为您的卡片创建正确的最终 JSON,当然,这一切都是为您完成的。

上述两种方法都是完全有效的。但是,还有另一个新选项当前标记为“实验性”,即使用您在问题中询问的方法 - 使用“自适应卡片模板”,您可以使用一种格式来使用占位符标记您的卡片,并且然后使用模板引擎进行替换。它实际上与我上面提供的第一个示例相同,只是其他人已经为您编写了令牌替换“引擎”。在这种情况下,您拥有标记(卡定义)、数据(数据的 JSON)以及将它们组合在一起以构造最终 JSON 响应的引擎。您可以阅读更多相关内容here https://learn.microsoft.com/en-us/adaptive-cards/templating/,但再次提醒一下,现阶段这只是实验性的。这是有关 JS 和 C# 的更多信息 https://learn.microsoft.com/en-us/adaptive-cards/templating/sdk.

我已经使用了这两种方法,但我发现,因为我使用的是 C#,所以在代码中完成这一切更容易 - 我已经将“模板”+“数据”放在一起,并且它是强类型的以避免最终输出中的错误。

顺便说一句,App Studio 包含一个卡片设计器,这很有用,因为卡片在 Teams 中的呈现方式有时与其他客户端略有不同。 App Studio 还允许您将卡片发送给自己(通过 App Studio 机器人本身),以便您可以直接在 Teams 中看到“真实”卡片。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将自定义 json 转换为自适应卡 json 格式 的相关文章

随机推荐