Teams App Development

What is Microsoft Teams App Development?

Microsoft Teams App Development involves creating custom applications that integrate with Microsoft Teams to enhance collaboration and productivity. These apps can range from simple message extensions to complex multi-tab applications.

Getting Started

To start developing a Teams app, you need to set up your development environment and understand the basic components of a Teams app. Learn more here

Prerequisites

• Node.js and npm installed
• Microsoft 365 account with Teams enabled
• Microsoft Teams Toolkit for Visual Studio Code

Teams Toolkit

Teams Toolkit 让使用 Visual Studio Code 为 Microsoft Teams 开发应用变得简单。

• 从常见的为你的组织（LOB应用）定制的应用项目模板或样本开始。
• 通过自动化的应用注册和配置节省设置时间。
• 直接从熟悉的工具运行和调试到Teams。
• 使用基础设施即代码和Bicep为在Azure中托管提供智能默认设置。
• 使用环境功能创建像开发（dev）、测试（test）和生产（prod）这样的独特配置。

Teams Toolkit 是一个 Teams Toolkit 项目的驱动引擎，也就是说，Teams Toolkit 引擎在每个阶段所做的事情是由项目定义的。

一个 Teams Toolkit 项目包含以下文件：

项目文件

当 Teams Toolkit 运行时，它会在当前目录中查找 teamsapp.yml 文件，该文件描述了你的应用配置，并定义了在每个生命周期阶段运行的一系列操作。如果你处于本地（local）环境中，它还会查找 teamsapp.local.yml 文件，这会用支持本地开发的操作覆盖各个阶段。

Teams Toolkit 生成的项目默认包括 teamsapp.yml 和 teamsapp.local.yml 文件，你可以根据需要对它们进行自定义。

生命周期

使用 Teams Toolkit 开发的应用会经历几个生命周期阶段，开发者将他们的应用从源代码带到生产环境。Teams Toolkit 的生命周期在 teamsapp.yml 和 teamsapp.local.yml 文件中定义，可以根据你的喜好进行定制。

开发环境(.env)

Teams Toolkit 提供了一种方法，可以在不同的环境中运行和测试你的应用，例如开发、预发布、生产环境，或者在你的机器上本地运行。为了做到这一点，Teams Toolkit 包括了一套可选功能，这些功能使用环境文件中的信息来协调这些不同目标的配置。环境文件代表了部署目标的所有资源的集合。Teams Toolkit 项目模板包括两个默认的环境分组：一个用于在你的机器上运行应用，名为“local”，另一个用于在其他地方托管，名为 "dev" 。你可以重命名 "dev" 环境，并使用 Visual Studio Code 中的 Environment 窗口或手动添加一个新的 .env.{environment-name} 文件来增加额外的环境，但是你不能重命名本地环境。

通过添加不同的环境文件，Teams Toolkit 可以通过自动化的方式提供运行应用所需的资源，并将你的代码部署到这些资源上。利用这些功能，你可以为多个环境使用一套部署规则。

你可以在当前的 shell 环境中为团队工具包 Teams Toolkit 定义环境变量，这些变量在命名冲突时会覆盖 .env 文件中的任何值。

环境配置文件位置

默认情况下，Teams Toolkit 不会加载任何环境变量，而是继续执行操作并将输出写入 ./env/.env.dev。如果没有定义 environmentFolderPath，Teams Toolkit 不会从 .env 文件加载任何环境变量，并假设环境是 dev 来执行操作，输出将写入到 ./env/.env.dev。

Local 环境

要构建一个 Teams App，一些资源如应用注册和 Teams App 客户端托管在云端，而其他资源如应用逻辑可以在本地托管，以便在应用开发过程中更容易测试更改。所有 Teams Toolkit 项目模板和样本都配置有本地环境。本地环境拥有 ./env/.env.local 和 ./env/.env.local.user 文件，并帮助你使用本地托管的web服务器运行你的应用。当使用 Visual Studio Code（VS Code）时，项目模板和样本被设置为支持带断点的调试。

为了区分本地环境和所有其他环境，你可以在与 teamsapp.yml 同一目录下创建一个名为 teamsapp.local.yml 的文件

手动在 Visual Studio Code 创建环境

每个项目可以有一个本地环境，但可以有多个远程环境。创建项目后，Teams Toolkit 会配置以下默认环境：

• 本地环境，代表本地机器环境配置。
• 开发环境，代表远程或云环境配置。 要创建一个新环境：

1. 在 Visual Studio Code 中打开你的 Teams App 项目。
2. 从 Visual Studio Code 侧边栏中选择 Teams Toolkit 图标。
3. 在 "环境ENVIRONMENT" 小窗口中选择+图标。

应用目标环境

当你拥有多个环境并选择 "生产 (prod) "，"开发 (dev) " 或 "本地 (local)" 菜单项时，Teams Toolkit 会提示你选择一个目标环境。

使用 Teams Toolkit 环境文件

Teams Toolkit 对环境文件采用了一种命名约定，例如：.env.{environment-name}。使用工具包的生命周期命令（Provision、Deploy 或 Publish）时，你需要提供一个环境名称。环境的名称应与创建环境文件时为 {environment-name} 选择的值相同。

TeamsFx

TeamsFx CLI 是一个基于文本的命令行界面，用于加速 Teams 应用程序的开发。它旨在提供以键盘为中心的体验，以帮助构建 Teams 应用程序。

TeamsFx 库是一个封装了常见功能和集成模式的库，例如简化对 Microsoft 身份的访问。

以下是 TeamsFx 的主要功能列表：

• TeamsFx 协作：让开发人员和项目所有者邀请其他合作者参与 TeamsFx 项目。您可以协作调试和部署 TeamsFx 项目。
• TeamsFx CLI：加速 Teams 应用程序的开发。它还支持 CI/CD 场景，您可以在脚本中集成 CLI 以实现自动化。
• TeamsFx SDK：提供对数据库的访问，例如，主要的 TeamsFx 代码库包含简单的认证，适用于客户端和服务器端代码，专为 Teams 开发者量身定制。

安装

> npm install -g @microsoft/teamsfx-cli

Command List:

Create a New Teams App

You can create a new Teams app using the Teams Toolkit in Visual Studio Code:

1. Open Visual Studio Code and install the Teams Toolkit extension.
2. Click on the Teams icon in the sidebar and select "Create a new Teams app".
3. Follow the prompts to set up your new Teams app project.

Running Your Teams App

To run your Teams app locally:

1. Open the terminal in Visual Studio Code.
2. Navigate to your project directory.
3. Run the following command to start the development server:

管理 Teams App

Fluent UI

Fluent UI 是微软自己的设计系统，在 Teams 和其他 Microsoft 365 产品中使用。Fluent UI 供了一套用户体验框架和组件，旨在为微软的平台创造一致的体验。它与 Bootstrap 或 TailwindCSS 在简单性和社区规模方面并不完全相同，但它专为与微软产品的集成而设计。

Fluent UI Web Components

微软的 Fluent UI Web 组件旨在帮助您使用可扩展的 Web 组件构建 Fluent 网页应用程序。该软件包组合了 @microsoft/fast-foundation Web 组件包，并使用 Fluent 设计语言对其进行样式设计。您可以灵活地使用这些 Web 组件，无论是从 npm 包，从 CDN，还是将其引入您的项目中以进行自定义和扩展。

使用 Fluent UI Web 组件，您可以：

• 构建一个现代的、基于标准的、高性能的、高可访问性的网页前端。
• 仅使用网页平台代码构建网页前端，无需其他框架。
• 与许多流行框架（如 .NET、Blazor、Vue、React 等）集成。
• 构建基于 W3C Web 组件标准的网页标准用户体验。
• 利用现有的 Fluent UI 设计语言作为设计令牌。
• 通过修改和创建新的设计令牌，为您的项目自定义设计语言。
• 使用开箱即用的组件构建您的网页用户体验，或者
• 基于 Fluent UI Web 组件所建立的库，自定义、组合并构建新的 Web 组件，FAST。
• 成为一个动态的、开放网页开发社区的一部分。

什么是 Web 组件？

“Web 组件”是一个总称，指的是一系列专注于启用自定义 HTML 元素创建的网页标准。这一范畴下的一些标准包括定义新的 HTML 标签、插入标准组件生命周期、封装 HTML 渲染和 CSS、参数化 CSS、皮肤组件等。W3C 定义了这些平台特性中的每一个，并且它们已在今天的每个主要浏览器中发布。

Fluent UI 如何利用 Web 组件？

Fluent UI Web 组件直接建立在 W3C Web 组件标准之上，并没有创建自己的独立组件模型。这使我们的组件能够像内置的原生 HTML 元素一样工作。您不需要框架就可以使用 Fluent UI 组件，但您可以将它们与您选择的任何框架或库结合使用。更多信息请参见集成。

manifest.json

{
	"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
	"manifestVersion": "1.15",
	"version": "1.0.6",
	"id": "${{TEAMS_APP_ID}}",
	"packageName": "com.microsoft.teams.extension",
	"developer": {
		"name": "TONYLABS TECH CO., LTD.",
		"websiteUrl": "https://tonylabs.com",
		"privacyUrl": "https://tonylabs.com/privacy",
		"termsOfUseUrl": "https://tonylabs.com/terms"
	},
	"icons": {
		"color": "color.png",
		"outline": "outline.png"
	},
	"name": {
		"short": "Expense",
		"full": "Expense ScholarOS"
	},
	"description": {
		"short": "ScholarOS Expense App for Microsoft Teams",
		"full": "This App is the easiest way to manage your expense in ScholarOS."
	},
	"accentColor": "#5C35B4",
	"bots": [],
	"composeExtensions": [],
	"configurableTabs": [],
	"staticTabs": [
		{
			"entityId": "request",
			"name": "Request",
			"contentUrl": "${{TAB_ENDPOINT}}/index.html#/request",
			"websiteUrl": "${{TAB_ENDPOINT}}/index.html#/request",
			"scopes": [
				"personal"
			]
		},
		{
			"entityId": "budget",
			"name": "Budget",
			"contentUrl": "${{TAB_ENDPOINT}}/index.html#/budget",
			"websiteUrl": "${{TAB_ENDPOINT}}/index.html#/budget",
			"scopes": [
				"personal"
			]
		},
		{
			"entityId": "report",
			"name": "Reqport",
			"contentUrl": "${{TAB_ENDPOINT}}/index.html#/report",
			"websiteUrl": "${{TAB_ENDPOINT}}/index.html#/report",
			"scopes": [
				"personal"
			]
		}
	],
	"permissions": [
		"identity",
		"messageTeamMembers"
	],
	"validDomains": [
		"scholaros.com",
		"teams.scholaros.com",
		"hub.scis.edu.cn",
		"${{TAB_DOMAIN}}"
	],
	"webApplicationInfo": {
		"id": "${{AAD_APP_CLIENT_ID}}",
		"resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
	}
}

FAQ

[Error] - [Login] Failed to retrieve token silently. If you encounter this problem multiple times, you can delete /Users/tony/.fx/account, close all Visual Studio Code instances and try again. invalid_grant: 50173 - [2023-11-26 03:30:00Z]: AADSTS50173: The provided grant has expired due to it being revoked, a fresh auth token is needed. The user might have changed or reset their password. The grant was issued on '2023-11-24T05:24:16.9970562Z' and the TokensValidFrom date (before which tokens are not valid) for this user is '2023-11-26T00:35:08.0000000Z'. Trace ID: e3f83bd3-f616-453a-93f0-3e753d12fa00 Correlation ID: 180e671d-28c2-48e3-bc47-c8b20384e2e4 Timestamp: 2023-11-26 03:30:00Z - Correlation ID: 180e671d-28c2-48e3-bc47-c8b20384e2e4 - Trace ID: e3f83bd3-f616-453a-93f0-3e753d12fa00

删除 .fx/account 文件夹