如何实现 Azure bot 自适应卡？答案

【问题标题】：How do you implement Azure bot adaptive card?如何实现 Azure bot 自适应卡？
【发布时间】：2019-09-04 06:37:21
【问题描述】：

我对在 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"
     }
     ]
  }

【问题讨论】：

标签： node.js azure bots adaptive-cards

【解决方案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'
    }])
);

【讨论】：

非常感谢您的回答。有没有一种方法可以从我们的 nodejs azure bot 中的浏览器获取前端网站 url？万一我们想获得 www.dev.google.com 进行测试，但当我们部署到生产环境时。网址将更改为 www.google.com。我希望你明白我想说什么。谢谢！
@khmerforce 这是可能的，但是有很多不同的方法可以做到这一点。使用 vanilla javascript，查看如何在网络聊天中使用 ChannelData 将变量传递给机器人。不过，最简单的方法是使用环境变量。在.env 文件中设置ENV="dev"，在应用服务> 配置中设置ENV="prod"。然后const url = process.env.ENV == 'prod' ? 'www.google.com' : 'www.dev.google.com' 什么的。
感谢您的回复。我没有看到 .env 文件。我搜索了它，它在.gitignore 中。是那个文件吗？我正在使用 azure bot v4 节点 js。
.env 文件通常用于存储您的敏感信息。在许多示例中，您可以看到机器人使用process.env.VARIABLE 访问这些变量。获取URL，想办法用javascript获取当前URL，然后pass it to the bot
我需要把它从 .gitignore 中取出来吗？