构建你的首个 Microsoft 团队应用Build your First Microsoft Teams App

备注

本教程来自适用于 团队 wiki 的 yeoman 生成器This tutorial comes from the yeoman generator for Teams wiki

在本教程中,我们将逐步介绍如何使用 Microsoft 团队 Yeoman 生成器创建首个 Microsoft 团队应用程序。In this tutorial we will walk through creating your very first Microsoft Teams app using the Microsoft Teams Yeoman generator. 它假定您已 启用 Microsoft 团队应用程序的侧面加载It assumes that you have enabled side-loading of Microsoft Teams apps.

yeoman 生成器 git

设置和准备计算机Setup and prepare your machine

您需要在您的计算机上安装以下程序,然后才能开始使用团队生成器。You need to install the following on your machine before starting to use the Teams Generator.

安装节点Install Node

您需要在您的计算机上安装 NodeJS。You need to have NodeJS installed on your machine. 应使用最新的 LTS 版本You should use the latest LTS version.

安装代码编辑器Install a code editor

此外,您还需要代码编辑器,可以随时使用您喜欢的任何文本编辑器。You also need a code editor, feel free to use whatever text editor you prefer. 但大部分文档和屏幕截图都是指使用 Visual Studio CodeHowever most of this documentation and screenshots refer to using Visual Studio Code.

安装 Yeoman 和 Gulp CLIInstall Yeoman and Gulp CLI

若要能够使用团队生成器搭建项目,您需要安装 Yeoman 工具以及 Gulp CLI 任务管理器。To be able to scaffold projects using the Teams generator you need to install the Yeoman tool as well as the Gulp CLI task manager.

打开命令提示符并键入以下命令:Open up a command prompt and type the following:

npm install yo gulp-cli --global

安装 Microsoft 团队应用生成器-Yo 团队Install the Microsoft Teams Apps generator - Yo Teams

使用以下命令安装 Microsoft 团队应用的 Yeoman 生成器:The Yeoman generator for Microsoft Teams apps are installed with the following command:

npm install generator-teams --global

安装预览版本Install preview versions

如果要使用此命令安装团队生成器的预览版本,请执行以下操作:If you want to install preview versions of the Teams generator with this command:

npm install generator-teams@preview --global

生成项目Generate your project

打开命令提示符并创建要在其中创建项目的新目录,并在该目录中键入该命令 yo teamsOpen up a command prompt and create a new directory where you want to create your project and in that directory type the command yo teams. 这将启动 "团队应用生成器",系统将会提示您一组问题。This will start the Teams Apps generator and you will be asked a set of questions.

yo 团队

第一个问题是关于您的项目名称的,您可以通过按 enter 将其保留原样。The first question is about your project name, you can leave it as is by pressing enter. 下一个问题会询问您是否要创建新目录或使用当前目录。Next question asks you if you want to create a new directory or use the current one. 正如我们所需的目录中,我们只需按下 enter 键。As we already are in the directory we want, we just press enter.

下面的步骤要求您提供项目的标题,此标题将用于您的应用程序的清单和说明。The following step asks for a title of your project, this title will be used in the manifest and description of your app. 然后,系统将要求你提供一个公司名称,该名称也将在清单中使用。And then you will be asked for a company name, which also will be used in the manifest.

第五个问题会询问您要使用的清单版本。The fifth question asks you about what version of the manifest you want to use. 对于此教程,请选择 " v1.5 当前常规可用架构"。For this tutorial select v1.5, which is the current general available schema.

在此之后,生成器将询问您要添加到项目中的项目。After this the generator will ask you for what items you want to add to your project. 您可以选择一个或多个项目组合。You can select a single one or any combination of items. 现在,只需选择 一个选项卡For now, just select a Tab.

项目选择

根据您选择的项目,系统会询问您一组后续问题。Based on what items you select, you will be asked a set of follow-up questions.

现在,您需要输入将在其中承载解决方案的 URL。Now you need to enter a URL of where you will host your solution. 它可以是任何 URL,但默认情况下生成器会建议 Azure 网站 URL。This can be any URL, but by default the generator suggests an Azure Web Sites URL.

生成器具有许多内置高级功能,您可以选择或选择退出。The generator has a lot of built-in advanced features that you can opt-in or opt-out of. 按照 URL 提示问题,系统将提示您是否要包括解决方案的单元测试,默认值为 "是"。Following the URL question you will be asked if you want to include unit-testing for your solution, default is yes. 如果选择此选项,则生成的项目将具有单元测试框架,并且会对要搭建的不同项目进行一些默认的单元测试。If you choose this the generated project will have a unit testing framework and some default unit tests for the different items being scaffolded. 对于本教程,请选择不包含测试框架。For this tutorial choose not to include a test framework.

为了使日志记录变得简单,系统也会询问您是否要使用 Azure Application Insights 进行日志记录。In order to make logging easy for you, you will also be asked if you want to use Azure Application Insights for logging. 如果你选择 "是",你将需要提供 Azure Application Insights 密钥。If you choose Yes, you will need to provide a Azure Application Insights key. 有关此教程,请退出使用 Application Insights。For this tutorial opt-out of using Application Insights.

接下来的一组问题将基于您以前选择的项。The next set of questions will be based on your selection of items previously. 对于选项卡,仅需要提供一个名称,并且可以选择是否希望能够将此应用用作 SharePoint Online web 部件。For a tab you only need to provide a name and optionally choose if you want to be able to use this app as a SharePoint Online web part. 提供此名称后,生成器将生成项目并安装所有依赖项。Once you have provided this name the generator will generate the project and install all dependencies. 这需要一分钟或两分钟。This will take a minute or two.

向您的选项卡添加一些代码Add some code to your tab

生成器完成后,您可以在最喜爱的代码编辑器中打开该解决方案。Once the generator is done you can open up the solution in your favorite code editor. 花一分钟或两分钟,熟悉代码的组织方式-您可以在 项目结构 文档中阅读有关该信息的详细信息。Take a minute or two and familiarize yourself with how the code is organized - you can read more about that in the Project Structure documentation.

您的选项卡将位于 ./src/app/scripts/myFirstAppTab/MyFirstAppTab.tsx 文件中。Your Tab will be located in the ./src/app/scripts/myFirstAppTab/MyFirstAppTab.tsx file. 这是您的选项卡的基于 TypeScript 响应的类。找到 render() 方法并在控件中添加一行代码, <PanelBody> 使其如下所示:This is the TypeScript React based class for your Tab. Locate the render() method and add a line of code inside the <PanelBody> control so it looks like this:

<PanelBody>
    <div style={styles.section}>
    Hello World! Yo Teams rocks!
    </div>
</PanelBody>

保存文件并返回到命令提示符。Save the file and return to the command prompt.

生成应用程序Build your app

现在可以生成项目。You can now build your project. 这是通过两个步骤 (或一个步骤完成的,请参阅下面的) 。This is done in two steps (or one step, see below).

首先,您需要创建团队应用程序清单文件,并将其上传/旁加载到 Microsoft 团队。First you need to create the Teams App manifest file, that you upload/sideload into Microsoft Teams. 这是由 Gulp 任务完成的 gulp manifestThis is done by the Gulp task gulp manifest. 这将验证清单并在目录中创建 zip 文件 ./packageThis will validate the manifest and create a zip file in the ./package directory.

若要生成解决方案,请使用 gulp build 命令。To build your solution you use the gulp build command. 这会将您的解决方案转换到该 ./dist 文件夹中。This will transpile your solution into the ./dist folder.

运行应用程序Run your app

若要运行您的应用程序,请使用 gulp serve 命令。To run your app you use the gulp serve command. 这将为您生成并启动一个本地 web 服务器来测试您的应用程序。This will build and start a local web server for you to test your app. 当您在项目中保存文件时,该命令也会重新生成应用程序。The command will also rebuild the application whenever you save a file in your project.

现在,您应该能够浏览到 http://localhost:3007/myFirstAppTab/ ,以确保您的选项卡呈现。You should now be able to browse to http://localhost:3007/myFirstAppTab/ to ensure that your tab is rendering. 但在 Microsoft 团队中尚不会。However, not in Microsoft Teams yet.

在浏览器中查看网站

在 Microsoft 团队中运行应用程序Run your app in Microsoft Teams

Microsoft 团队不允许您在 localhost 上托管您的应用程序,因此您需要将其发布到公用 URL 或使用代理(如 ngrok)。Microsoft Teams does not allow you to have your app hosted on localhost, so you need to either publish it to a public URL or use a proxy such as ngrok.

好消息是搭建项目具有此内置的。Good news is that the scaffolded project has this built-in. 在运行 gulp ngrok-serve ngrok 服务时,将在后台启动,并使用唯一的公共 DNS 条目,并将清单打包为该唯一的 URL,然后执行与相同的完全相同的任务 gulp serveWhen you run gulp ngrok-serve the ngrok service will be started in the background, with a unique and public DNS entry and it will also package the manifest with that unique URL and then do the exact same thing as gulp serve.

运行后 gulp ngrok-serve ,创建一个新的 Microsoft 团队团队,并在创建时单击团队名称,以转到 "团队设置",然后选择 " 应用"。After running gulp ngrok-serve, create a new Microsoft Teams team and when it is created click on the Team name, to go to the teams settings and then select Apps. 在右下角,您应该会看到一个链接 " 上传自定义应用程序",选择它,然后浏览到您的项目文件夹和名为的子文件夹 packageIn the lower right corner you should see a link Upload a custom app, select it and then browse to your project folder and the subfolder called package. 选择该文件夹中的 zip 文件,然后选择 "打开"。Select the zip file in that folder and choose open. 现在,您的应用程序将旁加载到 Microsoft 团队中。Your App is now sideloaded into Microsoft Teams.

旁加载应用程序

返回到 常规 频道并选择 + 添加新的选项卡。您应该会在选项卡列表中看到您的选项卡。Go back to the General channel and select + to add a new Tab. You should see your tab in the list of tabs.

配置选项卡

选择您的选项卡,然后按照说明添加它。Choose your tab and follow the instructions to add it. 请注意,您有一个自定义配置对话框,您可以在其中编辑该源。Notice that you have a custom configuration dialog, for which you can edit the source. 选择 " 保存 " 将选项卡添加到频道。Select Save to add your tab to the channel. 完成后,应在 Microsoft 团队中加载您的选项卡!Once done your tab should be loaded inside Microsoft Teams!

在团队中运行选项卡

Congrats!你构建并部署了你的首个 Microsoft 团队应用Congrats! You built and deployed your first Microsoft Teams App