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

Posted 2023-03-24

【中文标题】如何将自定义 json 转换为自适应卡片 json 格式

【英文标题】：How to convert custom json to adaptive card json format

【发布时间】：2020-04-19 21:58:44

【问题描述】：

我正在为我的聊天机器人寻找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"
        
    ]

【问题讨论】：

您能否详细说明您正在查看的内容？您可以使用 AdaptiveCard Designer 生成自适应卡片 json。

我正在使用 ibm watson 聊天机器人进行回复。从聊天机器人我得到 json 响应。基于文本、图像等响应类型，我正在显示 ui。但是这里我们有不同的 json，我们需要转换为自适应卡 json

不确定将自定义 json 转换为自适应卡 json 是什么意思。我们无法将某种 json 转换为自适应卡片 json。

【参考方案1】：

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

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

另一种构建卡片的常用方法是使用机器人的平台语言（C# 或 JS）。这是an example in C#，这是a JS example。无论哪种情况，您都在创建卡片并在运行时使用您想向用户显示的任何数据填充它的值。对于 C#，您使用的是来自 this nuget package 的强类型对象。这个库中的这些类还包括所需的序列化属性，以便为您的卡片创建正确的最终 JSON，当然这一切都是为您完成的。

以上两种方法都是完全有效的方法。但是，还有一个当前标记为“实验性”的新选项，即使用您在问题中询问的方法 - 使用“自适应卡片模板”，您可以在其中使用占位符标记卡片的格式，以及然后使用模板引擎进行替换。它实际上与我上面提供的第一个示例相同，只是其他人为您编写了令牌替换“引擎”。在这种情况下，您拥有标记（卡定义）、数据（数据的 JSON）和将它们组合在一起以构建最终 JSON 响应的引擎）。您可以阅读更多关于此here 的信息，但再次提醒您，现阶段它只是实验性的。这是more info for both JS and C#。

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

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