使用 c #/.NET 和应用程序工作室在 Microsoft 团队平台上开始使用Get started on the Microsoft Teams platform with C#/.NET and App Studio

Microsoft 团队开发人员平台使您能够轻松扩展团队并将自己的应用程序和服务与团队工作区无缝集成。The Microsoft Teams developer platform makes it easy for you to extend Teams and integrate your own applications and services seamlessly into the Teams workspace. 然后,可以将这些应用分发到企业或世界各地的团队。These apps can then be distributed to your enterprise or for teams around the world.

若要扩展 Microsoft 团队,你将需要创建 Microsoft 团队应用。To extend Microsoft Teams, you will need to create a Microsoft Teams app. Microsoft 团队应用程序是您承载的 web 应用程序。A Microsoft Teams app is a web application that you host. 然后,可以将此应用集成到团队中的用户工作区中。This app can then be integrated into the user's workspace in Teams.

本教程将帮助您开始使用 .NET 中的 c # 创建 Microsoft 团队应用程序。This tutorial helps you get started creating a Microsoft Teams app using C# on .NET. 您可以通过将应用程序加载到您有权访问的团队,或使用 Office 开发人员程序创建的测试租户来测试应用程序。You can test the app by loading it into a Team that you have permissions for, or into a test tenant created using the Office Developer Program.

准备开发环境Prepare your development environment

您需要做的第一件事是准备开发环境。The first thing you'll need to do is prepare your development environment. 您需要确保为您要在其中构建您的应用程序的 Office 365 组织启用自定义应用程序上载。You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. 如果需要专用开发租户,可以注册Office 365 开发人员计划If you need a dedicated development tenant, you can sign up for the Office 365 developer program. 有关其他信息,请参阅设置您的开发环境For additional information see Setup your development environment.

获取先决条件Get prerequisites

若要完成本教程,您需要获取以下工具:To complete this tutorial, you need to get the following tools:

如果您在 git 安装过程中看到一个添加到路径的选项,请选择执行此操作。If you see an option to add git to the PATH during installation, choose to do so. 这将很方便。It will be handy.

git通过在终端窗口中运行以下命令来验证您的安装:Verify your git installation by running the following in a terminal window:

备注

在你的平台上使用你最舒适的终端窗口。Use the terminal window that you are most comfortable with on your platform. 这些示例使用 Bash,但将在大多数平台上运行。These examples use Bash, but will run on most platforms.

$ git --version
git version 2.17.1.windows.2

请务必启动最新版本的 Visual Studio,并安装任何更新(如图所示)。Make sure to launch the latest version of Visual Studio and install any updates if shown.

您可以继续使用此终端窗口运行本教程后面的命令。You can continue to use this terminal window to run the commands that follow in this tutorial.

下载示例Download the sample

我们提供了一个简单的Hello,World!We have provided a simple Hello, World! 在 c # 中的示例可帮助您入门。sample in C# to get you started. 在终端窗口中,运行以下命令以将示例存储库克隆到本地计算机:In a terminal window, run the following command to clone the sample repository to your local machine:

git clone https://github.com/OfficeDev/msteams-samples-hello-world-csharp.git

提示

如果要将所做的更改修改并签入 GitHub 以供将来参考,则可以派生此存储库。You can fork this repo if you want to modify and check in your changes to GitHub for future reference.

生成和运行示例Build and run the sample

克隆存储库后,使用 Visual Studio 从示例的根目录中打开解决方案文件, Microsoft.Teams.Samples.HelloWorld.sln 然后单击 Build Solution 菜单中的 BuildOnce the repo is cloned, use Visual Studio to open the solution file Microsoft.Teams.Samples.HelloWorld.sln from the root directory of the sample and click Build Solution from the Build menu. 您可以通过按 F5Start Debugging 从菜单中选择来运行该示例 DebugYou can run the sample by pressing F5 or choosing Start Debugging from the Debug menu.

当应用启动时,您将看到一个打开的浏览器窗口,其中启动了应用程序的根目录。When the app starts, you will see a browser window open with the root of the app launched. 您可以导航到以下 Url,以验证是否已加载所有应用程序 Url:You can navigate to the following URLs to verify that all the app URLs are loading:

备注

如果收到类似的错误 Could not find a part of the path … bin\roslyn\csc.exe ,请尝试使用命令更新该包 Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -rIf you receive an error like Could not find a part of the path … bin\roslyn\csc.exe, try updating the package with the command Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r. 有关更多详细信息,请参阅StackOverflow 上的此问题See this question on StackOverflow for additional details.

承载示例应用程序Host the sample app

请注意,Microsoft 团队中的应用是公开一个或多个功能的 web 应用程序。Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. 若要使团队平台加载您的应用程序,您的应用程序必须可从 internet 访问。For the Teams platform to load your app, your app must be reachable from the internet. 若要使您的应用程序可从 internet 访问,您需要托管您的应用程序。To make your app reachable from the internet, you need to host your app. 你可以在 Microsoft Azure 中将其托管为免费,或使用在开发计算机上的本地进程创建隧道 ngrokYou can either host it in Microsoft Azure for free or create a tunnel to the local process on your development machine using ngrok. 当您完成应用程序的托管时,请记下其根 URL。When you finish hosting your app make a note of its root URL. 它的外观如下所示: https://yourteamsapp.ngrok.iohttps://yourteamsapp.azurewebsites.netIt will look something like: https://yourteamsapp.ngrok.io or https://yourteamsapp.azurewebsites.net.

使用 ngrok 的隧道Tunnel using ngrok

若要快速测试,可以在本地计算机上运行应用程序,并通过 web 终结点创建到它的隧道。For quick testing you can run the app on your local machine and create a tunnel to it through a web endpoint. ngrok是一个免费工具,可让你做到这一点。ngrok is a free tool that lets you do just that. 通过 ngrok,您可以获取诸如 https://d0ac14a5.ngrok.io (此 URL 只是一个示例)之类的 web 地址。With ngrok you can get a web address such as https://d0ac14a5.ngrok.io (this URL is just an example). 您可以为您的环境下载并安装ngrok。You can download and install ngrok for your environment. 请确保将其添加到中的某个位置 PATHMake sure you add it to a location in your PATH.

安装后,可以打开一个新的终端窗口并运行以下命令来创建隧道。Once you install it, you can open a new terminal window and run the following command to create a tunnel. 此示例使用端口3333,因此请务必在此处指定它。The sample uses port 3333, so be sure to specify it here.

ngrok http 3333 -host-header=localhost:3333

Ngrok 将侦听来自 internet 的请求,并将其路由到在端口3333上运行的应用。Ngrok will listen to requests from the internet and will route them to your app running on port 3333. 您可以通过打开浏览器并转到 https://d0ac14a5.ngrok.io/hello 加载应用程序的 hello 页面来进行验证。You can verify by opening your browser and going to https://d0ac14a5.ngrok.io/hello to load your app's hello page. 请务必使用控制台会话中由 ngrok 显示的转发地址,而不是此 URL。Please be sure to use the forwarding address displayed by ngrok in your console session instead of this URL.

备注

如果您在上面的 "内部版本" 和 "运行" 步骤中使用了不同的端口,请确保使用相同的端口号设置 ngrok 隧道。If you have used a different port in the build and run step above, make sure you use the same port number to setup the ngrok tunnel.

提示

最好 ngrok 在不同的终端窗口中运行,以使其保持运行状态,而不影响您稍后可能需要停止、重新生成和重新运行的应用程序。It is a good idea to run ngrok in a different terminal window to keep it running without interfering with the app which you might later have to stop, rebuild and rerun. ngrok该会话将在此窗口中返回有用的调试信息。The ngrok session will return useful debugging information in this window.

应用将仅在开发计算机上的当前会话过程中可用。The app will only be available during the current session on your development machine. 如果计算机关闭或进入睡眠状态,服务将不再可用。If the machine is shut down or goes to sleep the service will no longer be available. 在共享应用程序以供其他用户测试时,请记住这一点。Remember this when sharing the app for testing by other users. 如果必须重新启动服务,它将返回一个新地址,并且您必须更新使用该地址的每个位置。If you have to restart the service it will return a new address and you will have to update every place that uses that address. 付费版本的 Ngrok 没有此限制。The paid version of Ngrok does not have this limitation.

Azure 中的主机Host in Azure

Microsoft Azure 允许你使用共享基础结构将 .NET 应用程序托管在免费的层上。Microsoft Azure lets you host your .NET application on a free tier using shared infrastructure. 这就足够了运行此 Hello World 示例。This will be sufficient to run this Hello World sample. 有关详细信息,请参阅创建新的免费帐户See creating a new free account for more information.

Visual Studio 为对不同提供程序(包括 Azure)的应用程序部署提供内置支持。Visual Studio has built-in support for app deployment to different providers, including Azure.

使用应用程序 Studio 更新应用程序包Use App Studio to update the app package

应用程序 Studio 是一个团队应用程序,可以从团队存储中进行安装。App Studio is a Teams app that you can install from the Teams store. 它简化了应用程序的创建和注册。It simplifies the creation and registration of an app.

若要在团队中安装应用程序 Studio,请单击左侧右侧栏底部的 "应用商店" 图标,然后搜索应用程序 Studio。To install App Studio in Teams, click on the app store icon at the bottom of the left hand bar, and search for App Studio.

找到应用程序 Studio 的磁贴后,单击它,然后在弹出的对话框中选择 "安装"。Once you find the tile for App Studio, click on it and choose install in the dialog that pops up.

安装应用程序 Studio 后,单击 "清单编辑器" 选项卡,开始为你的团队应用创建应用程序包。Once App Studio is installed click on the Manifest editor tab to begin creating the app package for your Teams app.

该示例附带自己的预设清单,旨在在生成项目时生成应用程序包。The sample comes with its own pre-made manifest, and is designed to build an app package when the project is built. 在 .NET 中,这是在 Visual Studio 中完成的,在节点 JS 上, gulp通过在项目的根目录中的命令行键入来完成此操作。On .NET this is done in Visual Studio, and on Node JS this is done by typing gulp at the command line in the root directory of the project.

$ gulp
[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
[13:39:27] Starting 'clean'...
[13:39:27] Starting 'generate-manifest'...
[13:39:27] Finished 'generate-manifest' after 11 ms
[13:39:27] Finished 'clean' after 21 ms
[13:39:27] Starting 'default'...
Build completed. Output in manifest folder
[13:39:27] Finished 'default' after 62 μs

生成的应用程序包的名称为helloworldappThe name of the generated app package is helloworldapp.zip. 如果您正在使用的工具中的位置不明确,则可以搜索此文件。You can search for this file if the location is not clear in the tool you are using.

在本演练的下一部分,您将通过在清单编辑器中选择 "导入现有应用程序" 磁贴来修改此应用程序包。In the next part of this walkthrough you are going to modify this app package by selecting the Import an existing app tile in the Manifest Editor.

导入应用程序包后,应用程序 Studio 应如下所示:Once the app package has been imported App Studio should look like this:

单击新导入的应用程序的磁贴( Hello World)。Click on the tile for your newly imported app, Hello World.

清单编辑器的左侧有一个步骤列表,在右侧是需要为每个步骤填充的属性的列表中的步骤。There is a list of steps in the left-hand side of the Manifest editor, and on the right a list of properties that need to be filled in for each of those steps. 由于您已开始使用示例应用程序,因此已经填写了大部分信息。接下来的步骤将引导您完成更改仍需更新的部件。Since you started with a sample app, much of the information is already filled out. The next steps will walk you through changing the parts that still need to be updated.

应用程序详细信息App details

单击 "详细信息" 下的 "应用详细信息" 条目。Click on the App details entry under Details. 单击 "生成" 按钮以创建新的应用程序 id。Click the Generate button to create a new app id.

您的新应用程序 id 应类似于2322041b-72bf-459d-b107-f4f335bc35bd:。Your new app id should look something like: 2322041b-72bf-459d-b107-f4f335bc35bd.

查看右侧窗格中的其余应用程序详细信息,并熟悉一些条目,如开发人员信息品牌打造Look through the rest of the App details in the right hand pane, and familiarize yourself with some of the entries such as Developer information and Branding. 如果要编写新的分发应用程序,则这些部分非常重要。These sections are important if you are writing a new app for distribution.

功能:选项卡Capabilities: Tabs

选项卡是要添加到团队应用程序中的最简单元素。Tabs are among the simplest elements to add to a Teams app. 示例应用程序已经支持多个选项卡,您可以按如下所示启用它们。The sample app already supports several tabs, and you can enable them as follows.

"团队" 选项卡Team tab

您的应用只能有一个 "团队" 选项卡。Your app can only have one Team tab.

在此示例中,您的配置页面将转到 "团队" 选项卡。In this sample, the Team tab is where your configuration page goes. 单击条目末尾的 " ... " 符号,然后从下拉中选择 "编辑"。Click on the ... symbol at the end of the entry and choose Edit from the drop-down. 将 URL 更改为https://yourteamsapp.ngrok.io/configure替换yourteamsapp.ngrok.io为您在托管应用程序时使用的 url 的 url。Change the URL to https://yourteamsapp.ngrok.io/configure where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

个人选项卡Personal tabs

您的应用程序最长可以包含16个选项卡,其中包括 "团队" 选项卡。Your app can have up to 16 tabs, including the team tab.

个人选项卡的表示方式不同于 "团队" 选项卡。您应该会看到 " Hello" 选项卡已列在 "个人选项卡" 列表中。Personal tabs are represented differently from the team tab. You should see Hello Tab already listed in the personal tabs list. 在它有占位符值com.contoso.helloworld.hellotab的时候。At the moment it has a placeholder value com.contoso.helloworld.hellotab. 单击条目末尾的 " ... " 符号,然后从下拉中选择 "编辑"。Click on the ... symbol at the end of the entry and choose Edit from the drop-down. 将显示以下对话框。The following dialog will appear.

有两个字段需要使用您的应用程序 URL 进行更新。There are two fields that you need to update with your app URL.

  • 将内容 URL 更改为https://yourteamsapp.ngrok.io/helloChange Content URL to https://yourteamsapp.ngrok.io/hello
  • 将网站 URL 更改为https://yourteamsapp.ngrok.io/helloChange Website URL to https://yourteamsapp.ngrok.io/hello

yourteamsapp.ngrok.io托管应用程序时,应将其替换为您在上面使用的 URL。Where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

机器人Bots

Bot 是向应用程序添加功能的最常见方法。Bots are the most common way to add functionality to your app. Hello world 示例已将 bot 作为示例的一部分,但尚未在 Microsoft 中注册它。The hello world sample already has a bot as part of the sample, but it has not been registered with Microsoft yet.

从示例导入的自动程序不具有与之关联的应用 ID。The bot that was imported from the sample does not have an App ID associated with it yet. 您必须创建新的 bot,以便应用程序制作室可以创建新的应用 ID 并将其注册到 Microsoft。You will have to create a new bot so that App Studio can create a new App ID and register it with Microsoft. 请注意,这是 bot 的应用 ID,这与我们在前面的步骤中为应用创建的应用 ID 不同。Note that this is the App ID for the bot, which is different from the App ID that we created for the app in a earlier step. 应用程序中的每个 bot 都需要自己的应用程序 ID。Each bot in an app requires its own App ID.

单击 "机器人" 列表中导入机器人旁边的 "删除" 按钮。Click the delete button next to the Imported bot in the bot list.

现在没有要显示的 bot。Now there are no bots left to show. 单击 "设置"。Click Setup. 这将显示 "设置机器人" 对话框。This will display the Set up a bot dialog.

添加 bot 名称Contoso bot,例如,并单击 "范围" 下的两个按钮。Add a bot name such as Contoso bot, and click both the buttons under scope.

选择 "创建 bot " 退出对话框。Choose Create bot to exit the dialog. 应用程序 Studio 将花点时间向 Microsoft 注册你的 bot,然后应在 bot 列表中显示新的 bot。App Studio will spend a moment registering your bot with Microsoft, and then should display your new bot in the bot list. 现在,在记事本中打开文本文件并将新的 bot id 复制并粘贴到该文件中是一个很合适的时机。Now would be a good time to open a text file in notepad and copy and paste your new bot id into it. 稍后将需要此 id。You will need this id later.

单击 "生成新密码",并记下与您在中记下你的 BOT 应用 ID 的同一文本文件中的密码。Click Generate New Password, and make a note of the password in the same text file you noted your Bot app ID in. 这是仅显示你的密码的唯一时间,因此请务必立即执行此操作。This is the only time your password will be shown, so be sure to do this now.

Bot 终结点地址更新https://yourteamsapp.ngrok.io/api/messages为, yourteamsapp.ngrok.io其中应替换为您在托管应用程序时使用的 URL。Update the Bot endpoint address to https://yourteamsapp.ngrok.io/api/messages, where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

现在,最好保存文本文件(如果尚未这样做的话)。Now would be a good time to save your text file if you have not done so already. 你将在本演练后面的部分将此信息添加到托管应用,这将允许与你的 bot 进行安全通信。You will add this information to your hosted app later in this walkthrough, which will allow secure communication with your bot.

消息扩展Messaging extensions

邮件分机允许用户从服务中请求信息,并以卡片形式从右到频道对话中发布该信息。Messaging extensions let users ask for information from your service and post that information, in the form of cards, right into the channel conversation. 邮件扩展将沿着 "撰写" 框的底部显示。Messaging extensions appear along the bottom of the compose box.

在应用程序 Studio 的左栏中,单击 "功能" 下的 "邮件扩展" 以开始配置邮件扩展。Click on Messaging extensions under Capabilities in the left hand column of App Studio to begin configuring the messaging extension.

示例邮件扩展在右侧窗格中列出在 "邮件扩展" 下方。The sample messaging extension is listed in the right hand pane under Messaging Extensions. 再次单击 "删除" 以删除此条目,然后单击 "设置" 按钮,遵循与 "bot" 相同的步骤。Click Delete again to remove this entry, and then click the Set up button following the same steps as you followed for bots. 这将显示 "邮件扩展" 对话框。This will display the Messaging Extension dialog.

选择 "使用现有机器人" 选项卡,然后从我的现有 bot 中选择一个Select the Use existing bot tab, then Select from one of my existing bots. 在下拉菜单中,选择您在上一节中创建的 bot。In the drop-down menu, select the bot you created in the section above. 添加Bot 名称,然后单击 "保存" 以关闭对话框。Add a Bot name and click Save to close the dialog.

在 "命令" 部分,单击 "添加"。Under the Command section, click Add. 我们正在添加基于搜索的命令,因此请选择 "允许用户查询你的服务 ... " 选项。We're adding a search-based command, so choose the Allow users to query your service... option.

在 "新建命令" 对话框中,输入以下值。In the New command dialog enter the following values.

在 "新建命令" 下:Under New command:

  • 命令 ID = getRandomTextCommand ID = getRandomText
  • Title = 获取一些随机文本以获得趣味Title = Get some random text for fun
  • Description = 获取一些随机文本和图像Description = Gets some random text and images

在 "参数" 下:Under Parameter:

  • Name = cardTitleName = cardTitle
  • 标题= 卡片标题Title = Card title
  • Description = 要使用的卡片标题Description = Card title to use

输入完信息后,单击 "保存" 以关闭对话框。Once you're entered the information, click Save to close the dialog.

在团队中注册您的应用程序Register your app in Teams

现在,您已完成应用程序的详细信息输入,但仍需要执行两个步骤。You have now completed entering the details of your app, but two steps remain. 首先,您必须使用应用程序 Studio 的 "测试和分发" 部分在团队中安装您的应用程序,其次,您必须使用您的 bot 的应用程序 ID 和密码更新托管应用程序。First you must use the Test and Distribute section of App Studio to install your app in Teams, and second you must update your hosted application with the App ID and password for your bot. 请记住,该示例需要对 bot 和邮件扩展使用相同的应用程序 ID 和密码。Remember that the sample expects to use the same App ID and password for both the bot and the messaging extension.

单击测试,并在应用程序 Studio 的左侧列中的 "完成" 下分发项目。Click on the Test and distribute item under Finish in the left hand column of App Studio.

若要将应用程序上载到团队,请单击 "测试和分发" 下的 "安装" 按钮。In order to upload your app to Teams, click the Install button under Test and Distribute.

单击 "添加到团队中的搜索" 部分中的 "搜索" 框,然后选择要向其添加示例应用程序的团队。Click on the Search box in the Add to a team section and select a team to add the sample app to. 通常情况下,您需要设置一个特殊的团队来进行测试。Usually you will want to set up a special team for testing.

单击对话框底部的 "安装" 按钮。Click the Install button at the bottom of the dialog.

这将完成本演练的应用程序 Studio 部分。This finishes the App Studio portion of this walkthrough. 现在,您应该会看到在团队中运行的应用程序,但在更新托管应用程序环境以了解应用程序 Id 和密码的内容之前,bot 和邮件扩展将不起作用。You should now see your app running in Teams, however the bot and the messaging extension will not work until you update the hosted applications environment to know what the App IDs and passwords are.

更新承载的应用程序的凭据Update the credentials for your hosted app

示例应用程序需要将以下环境变量设置为您在前面记下的值。The sample app requires the following environment variables to be set to the values you made a note of earlier.

打开 appsettings 文件。Open up the appsettings.json file. 使用之前保存的你的 Bot ID 更新MicrosoftAppId值。Update the MicrosoftAppId value with your Bot ID that you saved earlier. 使用之前保存的 Bot 密码更新MicrosoftAppPasswordUpdate the MicrosoftAppPassword with the Bot password you saved earlier.

进行这些更改后,请重新生成应用程序。Once these changes are made, rebuild the app. 如果您使用的是 ngrok,请在本地运行应用程序,如果您是在 Azure 中托管,请重新部署应用程序。If you are using ngrok, run the app locally, and if you are hosting in Azure redeploy the app.

配置 "应用程序" 选项卡Configure the app tab

将应用程序安装到团队后,需要将其配置为显示内容。Once you install the app into a team, you will need to configure it to show content. 转到安装了示例应用程序的团队中的某个频道,然后单击 "+" 按钮以添加新的选项卡。然后,可以 Hello World 从 "添加选项卡" 列表中进行选择。Go to a channel in the team where you installed the sample app and click on the '+' button to add a new tab. You can then choose Hello World from the Add a tab list. 随后将显示配置对话框。You will then be presented with a configuration dialog. 此对话框将允许您选择要在此通道中显示的选项卡。This dialog will let you choose which tab to display in this channel. 选择选项卡并单击 "打开" 后 Save ,即可看到 Hello World 使用所选的选项卡加载的选项卡。Once you select the tab and click on Save then you can see the Hello World tab loaded with the tab you chose.

在团队中测试你的 botTest your bot in Teams

现在可以与团队中的 bot 进行交互。You can now interact with the bot in Teams. 选择您在其中注册应用程序的团队中的频道,然后键入 @your-bot-nameChoose a channel in the team where you registered your app, and type @your-bot-name. 这称为 " ** @ 提及**"。This is called an @mention. 发送到 bot 的任何邮件都将作为答复发送回您。Whatever message you send to the bot will be sent back to you as a reply.

测试消息扩展Test your messaging extension

若要测试您的邮件扩展插件,可以单击对话视图中输入框下的三个点。To test your messaging extension, you can click on the three dots below the input box in your conversation view. 将弹出一个菜单,其中包含 "Hello World" 应用。A menu will pop up with the 'Hello World' app in it. 当您单击它时,您将看到一组随机文本显示。When you click it, you will see a bunch of random texts showing up. 您可以选择其中的任何一个,并将其插入到对话中。You can choose any one of them and it will be inserted it into your conversation.

选择一种随机文本,您将看到一张卡片的格式并准备好在底部使用您自己的消息进行发送。Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.