你如何实现 Azure 机器人自适应卡？

Question

我对在 azure bot 中创建自适应卡片的理解是通过硬编码。有没有更好的创建自适应卡？因为想象一下，如果我们必须制作 120 张卡片。我们必须像下面的代码那样对文件进行硬编码，这不是一个好习惯。请帮忙！谢谢

 {
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Image",
        "url":"google.image.com",
        "size": "small"
      }
     ],
    "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Google",
      "url": "google.com"
     }
     ]
  }

Answer 1

有几种不同的方法可以做到这一点。给定卡片：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",
            "id": "img",
            "selectAction": {
                "type": "Action.OpenUrl",
                "title": "Google",
                "url": "http://www.google.com"
            },
            "url": "https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Google",
            "url": "http://www.google.com"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

将呈现为：

鉴于我们正在导入它：

import * as cardJson from './adaptiveCard.json';

然后我们的代码看起来像这样：

const card = CardFactory.adaptiveCard(cardJson);
const msg = MessageFactory.text('');
msg.attachments = [card];
await context.sendActivity(msg);

1。直接编辑JSON

如果我们用这个来改变图像：

cardJson.body[0].url = 'https://skillbotbuilder.gallerycdn.vsassets.io/extensions/skillbotbuilder/skillbotbuilder/1.0/1546976085901/Microsoft.VisualStudio.Services.Icons.Default';

我们得到：

因此，您可以将 .json 用作更多模板，然后使用 javascript 构建它。或者：

2。使用不同类型的卡

Here's a link to other card types

然后您可以使用 CardFactory 来构建卡片。

与上面类似的英雄卡看起来像这样：

const hero = CardFactory.heroCard(
    null,
    CardFactory.images(['https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image']),
    CardFactory.actions([{
        type: 'Action.OpenUrl',
        title: 'Google',
        value: 'Google.com'
    }])
);

你如何实现 Azure 机器人自适应卡？

How do you implement Azure bot adaptive card?

bots

azure

node.js

adaptive-cards

1。直接编辑JSON

2。使用不同类型的卡