入门 Teams Toolkit

两年多前我写过一篇介绍 Teams Toolkit 的文章，有些读者希望我能讲一下最新版本的使用，的确在过去两年间，Teams Toolkit 变化非常大，增加了非常多的实用功能，我接下去就用几篇文章来详细讲一下如果使用它来创建，开发，调试，发布 teams app。

我们先来安装Teams toolkit，打开vscode，搜索 teams，安装。

安装完后，在vscode的左侧菜单里就会出现一个 teams 的图标，点击后可以看到左面板，然后点击 “Get Started”，在开始界面中，Teams Toolkit已经帮我们准备好了我们的学习路径，从配置开发环境到 teams app 发布，一条龙服务。

之前有开发 teams app 经验的开发知道，teams app开发实际上需要的前置知识较多，即使要开发一个 hello world程序也不简单。单单在teams里创建app配置，如果是incoming webhook这种，则需要熟悉teams store，如果是上传manifest.json，则需要熟悉teams后台，要允许开发模式，我觉得 teams toolkit在这点上做的很不错，把开发teams app过程中可能需要的步骤和难点全部一条龙服务，尽可能的为开发人员提供自动化。

点击 “Run prerequisite checker”，可以看到它检测了你本地是否已经安装了 nodejs。如果没有安装的话，或者你的nodejs版本小于14的话，它会要求安装或者升级。目前官方推荐的nodejs版本是16。

那我们现在来创建一个 teams app，看看 teams toolkit 给我们带来了哪些方便性，点击 “View Samples”，可以看到 toolkit 为我们准备了一些sample apps。

在每个sample下面都一些说明，我觉得非常有用，最有用的是预估的 app 搭建时间，其次是使用的开发语言（目前只有 JS 和 TS ），和可能涉及到的技术，是否可以本地调试。

Teams app开发的一大挑战是就是本地调试，整套配置下来对于初学者来说，学习曲线比较陡峭。

我们来创建一个最最简单的app试试看，找到 “Incoming Webhook Notification”，输入你需要放置代码的目录，Teams Toolkit会自动的把整套sample代码复制你的目录下。

代码准备好后，toolkit会自动帮我们打开另一个vscode实例，新的vscode窗口里就是新建的代码项目。

在这里我先不展开介绍文件结构和每个文件的作用，我会在后面的文章中详细介绍。我们先来运行整个 app，先到 teams 里创建一个 incoming webhook 的url，然后找到文件 index.ts。把url 放到下面这行代码里：

const webhookUrl: string = "<webhook-url>"

点击 F5 运行。由于 teams toolkit帮我们都配置好了，第一次运行的时候会自动帮我们安装 npm package，然后运行 index.ts。如果大家看到如下的一个错误，恭喜你看到了我这篇文章。

我花了1个多小时，各种研究，才发现是一个bug，Failed to start bot due to error caused by the `adaptivecards` dependency · Issue #6127 · OfficeDev/TeamsFx · GitHub 。解决方法是在 package.json 文件里加上 "adaptivecards": "~2.10.0"

  "dependencies": {"@microsoft/adaptivecards-tools": "^1.0.0","adaptivecards": "~2.10.0","axios": "^0.26.1"},

然后清除 node_modules 目录后，再运行 npm run install，npm run start，就可以看到在我们的team 里推送了 adaptive card。

整个过程中，虽然中间研究那个bug弄了很久，其他部分非常顺利，可见 teams toolkit 给开发人员带来了很多方便性。希望以后在sample code里的bug少一些，这样给第一次使用的人的感受会好很多。我接下来也会继续分享 teams toolkit的使用经验，让大家更容易上手 teams app 的开发。

入门 Teams Toolkit相关推荐

重磅！微软发布新一代 Teams 开发工具 —— Teams Toolkit！不止VS Code extension！
今天凌晨(北京时间 2021 年 5 月 26 日),在一年一度的 Build 大会上,微软正式发布了新一代的 Teams 开发工具 -- Teams Toolkit. 截止到 2021 年 4 月份 ...
使用 Microsoft Teams Toolkit for Visual Studio 高效构建一个指示板
Teams Toolkit for Visual Studio 现在可用了,这对于.NET开发者来说真是一个好消息. 本篇我们会介绍使用 ASP.NET Core 去构建一个 Teams 选项卡,并展 ...
如何使用Teams Toolkit高效创建一个App
在两三年前,teams刚在国内流行起来的时候,大家都是自己徒手撸各种代码结构及配置,如果需要有认证相关的内容,都得自己上手搞. teams现在在国内也算是很火了,至少是个很流行的ToB产品了,我上家公 ...
VSCode的Teams插件
随着今年在线的Build大会的结束,又是一大波的 Teams 新功能,新工具,新SDK.我接下来几篇博客就会详细和大家一一介绍.我今天先从VSCode的插件开始. 打开VS Code,搜索Teams, ...
Teams Bot App 代码解析
上一篇文章我们讲了如何使用 teams toolkit 来快速弄一个 teams bot,可以看到 toolkit 给我们提供了极大的方便性,让开发人员可以更好的把重心放在 coding 上,而不是各 ...
Teams Bot App 初探
上一篇文章深入讲了incoming webhook.这篇文章我们来看一个稍微复杂点的,正式点的 teams app:bot. 我们先来和之前一样,通过teams toolkit 的 sample ga ...
Teams Tab App 分析
前面几篇文章我们详细讲了如何使用Teams Toolkit 来创建.运行.调式一个 bot app,然后我们一起分析了bot app 里的具体的每个方面.这篇文章和接下去的几篇我们以同样的思路来深入解 ...
关于 Microsoft Teams 开发你需要知道的一切
Microsoft Teams 是为公司和组织提供的终极消息应用程序--一个用于实时协作.沟通.会议和文件共享的工作区.我们可以以多种方式扩展 Teams 应用程序.为了能够扩展应用,理解协作空间中的 ...
Teams app 的 SSO 机制
我们来继续我们的 Teams sample 之旅,上一个讲了 Tab app,那我们这里再深入一步,看一下如何使用 sso 机制. sso 是一个很有用机制,它可以让我们的 teams app 能获取 ...

入门 Teams Toolkit

入门 Teams Toolkit相关推荐

最新文章

热门文章