Microsoft Teams 小程序

Teams App 实质是托管在Azure等服务端上的web app，Teams客户端类似于浏览器，打包部署直接用插件完成此外微软提供sdk使之支持sso及授权访问功能

Microsoft 365 Developer Program

部署及发布Teams App需要Talent的管理员权限加入Microsoft 365 Developer Program 创建开发者账号使用免费沙盒—> Microsoft 365计划

安装vs code extraction：Teams Toolkit （preview）

创建项目

create a new Teams app
select capability: Tab
select hosting type: Azure
select language: JavaScript
input app name
以上设置保存在.fx/settings.json
├───.fx
│ settings.json
│ package.json
│ permissions.json
├───appPackage
│ color.png
│ manifest.source.json
│ outline.png
│
└───tabs
│ .env
│ .gitignore
│ package.json
│ README.md
│
├───public
│ auth-end.html
│ auth-start.html
│ deploy.png
│ favicon.ico
│ hello.png
│ index.html
│ publish.png
│
└───src
```
  │   index.css
  │   index.jsx
  │
  └───components
      │   App.css
      │   App.jsx
      │   Privacy.jsx
      │   Tab.jsx
      │   TabConfig.jsx
      │   TermsOfUse.jsx
```
Tab其实就是个React App
运行和调试
press F5
调试host为 https://localhost:3000
偶见 localhost refused to connect. 查看Teams Toolkit的Accounts中side loading是否处于disabled状态

Your Microsoft 365 tenant admin hasn’t enabled sideloading permission for your account. You can’t install your app to Teams!

出于种种原因造成的side loading disabled 应进入Microsoft365 Admin Center设置
Show all —> Admin centers —> Teams Apps —> Setup policies —> Global
打开 Upload custom apps

部署到Azure

先执行Teams Toolkit提供的DEPLOYMENT—>Provision in the Cloud功能，toolkit将以项目名称自行创建~~App Service、Storage Account及Vitual Network等~~Rescource

事实上，Teams Tab App的前端静态文件使用Azure Storage Account托管，访问控制通过托管标识(Managed Identity), 关于Provision时创建哪种资源见Provision cloud resources

使用Deploy to the Cloud 将当前项目作为Web App部署到前面Provision预备的资源上

记得配置Api的Endpoint 比如写/public/config.json

Zip Teams metadata package可获得该Web App的配置信息包括名称及地址以用于添加到Organization的Teams中

上传到teams

编译产生 build\appPackage.local.zip 即项目的应用包，该目录下还有应用部件清单 manifest.json

将应用包上传到teams中测试：Teams 左边栏点击Apps —> Manage your apps —> Upload an app to your org’s app catalog
上传后图标显示在Apps列表中可将其添加到team的chat中

发布到组织

Todo List Sample (SPFx)

1 2	npm i -g teamsfx-cli // 安装脚手架 teamsfx new template list // 查看可用的sample

使用如下命令创建sample APP并基于这些sample作为模板开发自己的应用

1	teamsfx new template todo-list-SPFx

在teams中打开sharepoint站点

配置一个list 见Microsoft Doc:
代码中/SPFx/src/webparts/todoList/components/SharePointListManager.ts line17 设置为sharepoint上list的名字
用vscode的Teams Toolkit打开项目

选择项目目录打开
在teams toolkit中选择Provision in the cloud 在Cloud端创建app

**
点击Deploy to the cloud部署
点击Publish to the cloud发布
访问Microsoft Teams admin center查找已发布的app
登录Teams添加app
TODO 主动从外部系统向 Teams 发送信息，允许用户从 Teams 客户端内部处理该信息。
TODO 允许用户在另一个系统中快速查找信息，并将结果添加到 Teams 中的对话。