Teams Tab App 分析

前面几篇文章我们详细讲了如何使用Teams Toolkit 来创建、运行、调式一个 bot app，然后我们一起分析了bot app 里的具体的每个方面。这篇文章和接下去的几篇我们以同样的思路来深入解析 Teams Tab app。

首先让我们打开 vscode，进入Teams Toolkit panel，点击 View samples，然后选择 Hello World Tab。

在选择创建项目的目录后，Teams Toolkit 就为我们初始化了一个简单的 Tab app，从目录结构看，和之前的 bot app 非常类似，有 .fx 目录，来保存 teams toolkit 相关的一些配置，有 .vscode 目录保存一些运行调试的配置，有 templates 目录来保存 manifest template 和 azure 云资源的配置文件。最最主要的是 tabs 目录，里面是 tab app 的代码。

展开 tabs 目录，里面有一些静态资源，源代码，和 package.json，熟悉编程的读者可能已经可以从文件上知道这个 sample 使用的是 typescript 和 react，因为有 *.ts 和 *.tsx 文件。

我们先来看一下 package.json 文件里的 dependencies 和 scripts。

{..."dependencies": {"@fluentui/react-northstar": "^0.62.0","@microsoft/teams-js": "^2.2.0","@microsoft/teamsfx": "2.0.0-beta.0","axios": "^0.21.1","msteams-react-base-component": "^4.0.1","react": "^16.14.0","react-dom": "^16.14.0","react-router-dom": "^5.1.2","react-scripts": "^5.0.0"},"scripts": {"dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start","start": "react-scripts start","install:teamsfx": "npm install","build": "react-scripts build","build:teamsfx": "cross-env-shell \"env-cmd -f .env.teamsfx.${TEAMS_FX_ENV} npm run build\"","build:teamsfx:dev": "cross-env TEAMS_FX_ENV=dev npm run build:teamsfx","test": "echo \"Error: no test specified\" && exit 1","eject": "react-scripts eject"},...
}

在 dependencies 可以看到，它使用了微软的 fluentui，让界面更加统一一些，使用了Teams JS SDK microsoft/teams-js，还用了一个 Teams Toolkit 特有的库 @microsoft/teamsfx，并且还使用了 msteams-react-base-component，用来更加方便的使用React的方式来进行开发。

在 scripts 里可以到一些命令，有一半的命令是给 teams toolkit 使用的，实际上是在真正执行 start 和 build 之前做了一些设置，比如在执行 build 之前，设置了一些环境变量。

让我们在 vscode 里运行一下 tab app 看看。按 F5，第一次运行的时候会花一些时间下载 node packages，可能需要1分钟或者更久，耐心等待后，会看到 Teams Toolkit 帮我们开始自动安装 tab app。

点击 “Add” 按钮后，我们就可以在 Teams 里看到 tab 界面。

细心的读者可能已经看到，浏览器的地址栏旁边提示了红色的警告，说明页面中有一些不安全的内容，为什么呢？是因为我们在本地运行 tab app，使用的网址是 localhost，所以即使使用了 dev 的https开发证书，也是非完全信任的。

我们打开编译后最终生成的 manifest.json 文件 (在 build 目录下的 appPackage 子目录下)，可以看到在 staticTabs 里面指明了我们的页面的地址是 https://localhost:53000/... 是一个本地的网址。这就是为什么出现了红色警告图标。当我们最终发布到 azure 上面后，或者配置了我们正式的 https ssl 证书后，就不会再有这个问题。针对 manifest 里的 staticTabs，我们后面的文章会详细介绍。

至此，我们知道了如何创建，本地运行 tab app，下篇文章我们来深入看一下代码，让我们真正理解 Teams 的 tab app。

Teams Tab App 分析相关推荐

Teams Tab的Single Sign-On
在我写这篇文章的时候,这个SSO机制还是在 Developer Preview 阶段,可能在发布前还会有一些改进.不过我觉得这个功能很好,所以先和大家分享一下. 如果大家之前已经开发过Teams的ta ...
什么是Microsoft Teams的App Studio
Teams的app studio很多用户可能不知道,但是对于一个teams平台的开发人员来说,这个是开发利器,利用这个工具你可以轻松的配置manifest文件,可以轻松的一站式创建teams app所 ...
Teams Bot App 代码解析
上一篇文章我们讲了如何使用 teams toolkit 来快速弄一个 teams bot,可以看到 toolkit 给我们提供了极大的方便性,让开发人员可以更好的把重心放在 coding 上,而不是各 ...
Teams Meeting App的 task 弹出框
前几篇文章我们介绍了 Teams Meeting App 的各种类型和如何从无到有的使用 net6 和 c# 来开发一个 Teams Meeting app,那今天我们开始讨论一些 meeting a ...
为制造业构建Teams Power App 1：Dataverse入门
目录介绍场景:HVAC订购系统在Teams中创建Power App 选择团队并命名应用程序添加一些数据总结这是有关Teams中Power Apps开发的三部分系列文章中的第一篇. 创建Te ...
Teams Bot App 初探
上一篇文章深入讲了incoming webhook.这篇文章我们来看一个稍微复杂点的,正式点的 teams app:bot. 我们先来和之前一样,通过teams toolkit 的 sample ga ...
得到app文稿导出_得到-app分析
产品名称:得到产品是什么?(客观描述:产品满足的需求点及亮点) 目标用户与典型场景(目标用户在使用该产品的典型场景,不少于3例) 关键功能与描述(描述关键功能名称及作用) 运营方法(不只是梳理运营事 ...
APP 分析随手记
APP 分析随手记分析维度用户基数 - - 用户base ·累计用户 ·用户构成用户活跃 ·AU1/AU7/AU30/AU180 ·用户留存 ·用户流失 ·新增用户 ·新增用户活跃&留 ...
APP分析之海豚睡眠
APP分析之海豚睡眠产品:海豚睡眠引文由于笔者暑假经常晚睡,导致在习惯性失眠.长时间睡眠不足,导致头脑反应迟钝,还整日无精打采,不知所措.一个偶然的机会,在一个燥热的夜晚,眼看又是一个不眠之夜, ...

Teams Tab App 分析

Teams Tab App 分析相关推荐

最新文章

热门文章