Teams Bot App 用户互动

上一篇文章我们解析了 teams bot 的主体代码逻辑，深入的了解它是怎么运作起来的。我们这篇文章来详细讲一下 adaptive card 在 Teams 里的互动，我们用上一个 app 里的 learn 卡片为例。

我们先运行我们的 Hello World Bot，然后给bot发送 learn 文字后，会等到一个回复的卡片，卡片上的 Like Count 是 0，我们点击一下 “I Like This!” 按钮。

稍等 1，2 秒后，我们就可以看到这个卡片的刷新了，Like Count 变成了 1。

再多点击几次后，数字会一直增加。

这实际上就让 bot 和用户之间有了一种互动，用户可以通过 adaptive card 上的按钮和 bot 进行沟通。

我们来看一下这是怎么做到的。先打开 learn.json 文件，看看这个卡片有什么特别的地方。

可以看到，在卡片的json文件中，那个数字是一个 placeholder ${likeCount}，我们后面会讲它是怎么和代码联动的。对于 “I Like This!” 按钮，它的 type 是 Action.Execute，verb 是 userlike，fallback 是 Action.Submit，看到这里我们可以隐隐约约感觉到它像是给 bot 发了一个指令，让bot 去 execute 一个叫 userlike的指令。

    {"type": "Action.Execute","title": "I Like This!","verb": "userlike","fallback": "Action.Submit"}

我们再来看一下 teamsBot.ts 里的代码，看看它是如何和 adaptive card 联动的。由于这个文件比较长，我挑了和这个操作相关的代码，让大家看得更加清楚简单一些。

import rawLearnCard from "./adaptiveCards/learn.json";export interface DataInterface {likeCount: number;
}export class TeamsBot extends TeamsActivityHandler {// record the likeCountlikeCountObj: { likeCount: number };constructor() {super();this.likeCountObj = { likeCount: 0 };this.onMessage(async (context, next) => {let txt = context.activity.text;switch (txt) {case "learn": {this.likeCountObj.likeCount = 0;const card = AdaptiveCards.declare<DataInterface>(rawLearnCard).render(this.likeCountObj);await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)] });break;}}});}async onAdaptiveCardInvoke(context: TurnContext,invokeValue: AdaptiveCardInvokeValue): Promise<AdaptiveCardInvokeResponse> {// The verb "userlike" is sent from the Adaptive Card defined in adaptiveCards/learn.jsonif (invokeValue.action.verb === "userlike") {this.likeCountObj.likeCount++;const card = AdaptiveCards.declare<DataInterface>(rawLearnCard).render(this.likeCountObj);await context.updateActivity({type: "message",id: context.activity.replyToId,attachments: [CardFactory.adaptiveCard(card)],});return { statusCode: 200, type: undefined, value: undefined };}}
}

首先代码里先申明了一个 interface DataInterface，这个主要是为了填充 adaptive card 里的那个placeholder ${likeCount} 所使用。

在 class TeamsBot 里先弄了一个 likeCountObj: { likeCount: number }，likeCountObject 实际上是一个 interface DataInterface 的实例，它记录了一共被 like 了几次，我觉得这句改成 likeCountObj: DataInterface; 更加清楚，所以我 raise 了一个 pr 给微软产品组 https://github.com/OfficeDev/TeamsFx-Samples/pull/491，看看能不能 merge 成功。

在 TeamsBot 的构造函数中，当用户发送了 learn 文字后，新建了一个 card，并且把当前的 like count 值填入到 card 中。由于 DataInterface 里的 likeCount 的名字和 json 里的placeholder 的名字 ${likeCount} 一致，所以这个 placeholder 就被赋值了 0。

const card = AdaptiveCards.declare<DataInterface>(rawLearnCard).render(this.likeCountObj);

然后就把卡片加到 activity 里，发送给用户。

await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)] });

当用户点击的 “I Like This!” 按钮后，onAdaptiveCardInvoke() 函数被触发，可以从代码清楚的看到，如果 verb 是 userlike，就把like计数器加一，然后通过 context.updateActivity() 来更新这个卡片。

看到这里我想大家已经清楚的明白了前后的逻辑和他们关联的方式。那我们就模仿这个来扩展一下，我们打开 learn.json，在 “I Like This!” 后增加另一个按钮 “Reset Like Count”

    {"type": "Action.Execute","title": "Reset Like Count","verb": "resetlike","fallback": "Action.Submit"},

然后在 teamsBot.ts 文件里刚才处理 userlike 的后面再加上一段：

    if (invokeValue.action.verb === "userlike") {...}else if (invokeValue.action.verb === "resetlike") {this.likeCountObj.likeCount == 0;const card = AdaptiveCards.declare<DataInterface>(rawLearnCard).render(this.likeCountObj);await context.updateActivity({type: "message",id: context.activity.replyToId,attachments: [CardFactory.adaptiveCard(card)],});return { statusCode: 200, type: undefined, value: undefined };}

运行程序后，就能看到多了一个按钮，点击 “Reset Like Count” 按钮后，就能够重置 like 计数器。

所以 teams bot 并不是一个非常难的东西，通过我们对代码一步步的解析，然后做一些简单修改，希望各位读者大致明白了 bot 运行的机理。

Teams Bot App 用户互动相关推荐

Teams Bot App 代码解析
上一篇文章我们讲了如何使用 teams toolkit 来快速弄一个 teams bot,可以看到 toolkit 给我们提供了极大的方便性,让开发人员可以更好的把重心放在 coding 上,而不是各 ...
Teams Bot App 初探
上一篇文章深入讲了incoming webhook.这篇文章我们来看一个稍微复杂点的,正式点的 teams app:bot. 我们先来和之前一样,通过teams toolkit 的 sample ga ...
Teams Bot App Manifest 文件解析
这篇文章我们继续以 Hello World Bot 这个 sample 来讲一下 manifest template. 实际上在 Teams app 开发的时候,有 manifest 的概念,mani ...
Teams Bot如何判断用户所在的时区
一说到时间,就会联想到时区,夏令时等头痛的问题,不同国家有不同国家的规定.如果你希望你的Teams Bot可以判断出当前用户所在的时区,从而可以针对性的进行一些处理时,你要做好心理准备,这个复杂程度远 ...
你知道的APP中，有哪些比较好用有特色的用户互动功能（指用户可以参与进来的功能，比较常见的如评论、关注、投票、聊天室等）？你觉得一个功能具有什么特征，才会让用户愿意互动进来？
比较好用有特色的用户互动功能 1.微信公众号文章的"在看": 向好友展示了自己最近在看的文章,是另一种展现自己的方式:朋友可以对你的"在看"点赞,可以对你&qu ...
Teams Meeting App的 task 弹出框
前几篇文章我们介绍了 Teams Meeting App 的各种类型和如何从无到有的使用 net6 和 c# 来开发一个 Teams Meeting app,那今天我们开始讨论一些 meeting a ...
如何开发Teams Bot
很多朋友问我如何开发一个成功的Teams Bot,他们说Bot Framework SDK看起来简单,但是真要的去开发一款成熟的bot,很多地方还是不知道如何使用.我从最早的bot framework ...
Teams bot的调用限制
上个月Teams团队发布了对Teams app/bot调用api的频率的限制.这也从侧面说明Teams app越来越多,Teams团队需要优先保证Teams本身的计算资源,来提供流畅的用户体验. 具体 ...
什么是Microsoft Teams的App Studio
Teams的app studio很多用户可能不知道,但是对于一个teams平台的开发人员来说,这个是开发利器,利用这个工具你可以轻松的配置manifest文件,可以轻松的一站式创建teams app所 ...

Teams Bot App 用户互动

Teams Bot App 用户互动相关推荐

最新文章

热门文章