使用 Microsoft 团队的应用程序工作室快速开发应用程序Quickly develop apps with App Studio for Microsoft Teams

无论是为企业中的团队开发自定义应用程序,还是通过简化应用程序的清单和包,并提供卡片编辑器和响应控件库等有用的工具,应用程序 Studio 都可以轻松地开始创建或集成您自己的 Microsoft 团队应用程序。App Studio makes it easy to start creating or integrating your own Microsoft Teams apps, whether you develop custom apps for your enterprise or SaaS applications for teams around the world by streamlining the creation of the manifest and package for your app and providing useful tools like the Card Editor and a React control library.

安装应用程序 StudioInstalling App Studio

应用程序 Studio 是团队存储中可找到的团队应用程序。App Studio is a Teams app which can be found in the Teams store. 按照以下直接下载链接: App Studio (您还可以在应用商店) 中找到该应用程序。Follow this link for direct download: App Studio (you can also find the app in the app store).

在应用商店中,搜索应用程序 Studio。In the store, search for App Studio.

应用程序 studio 的存储项

选择应用程序制作室磁贴以打开 "应用安装" 页:Select the App Studio tile to open the app install page:

配置应用程序 studio

选择 " 安装"。Select install.

应用程序工作室

在应用程序 Studio 中,单击 " 清单编辑器 " 选项卡,可在其中导入现有应用程序或创建新的应用程序。Once you are in App Studio, click on the Manifest editor tab where you can either import an existing app or create a new app.

应用程序工作室功能App Studio Features

对话Conversation

在您通过将其发送给自己时,您可以在应用程序中看到在 应用程序 Studio 中创建的卡片 在团队中的外观。This is where you can see what cards you create in App Studio look like in Teams when you test them by sending them to yourself.

清单编辑器Manifest Editor

如前所述,Microsoft 团队应用程序包最重要的部分是它在文件上的 manifest.js。As mentioned earlier, the most significant part of a Microsoft Teams app package is its manifest.json file. 此文件必须符合 团队应用程序架构,其中包含允许团队正确向用户提供你的应用程序的元数据。This file, which must conform to the Teams App schema, contains metadata which allows Teams to correctly present your app to users.

应用程序 Studio 中的 "清单编辑器" 选项卡简化了清单的创建,使您能够描述应用程序、上载图标、添加应用程序功能,并生成可轻松地将其上载到团队以供测试或分发以供其他人使用的 .zip 文件。The Manifest Editor tab in App Studio simplifies creating the manifest, allowing you to describe the app, upload your icons, add app capabilities, and produce a .zip file which can easily be uploaded into Teams for testing or distributed for others to use. 请注意,应用程序 Studio 不会为您的应用程序生成功能代码,也不会承载您的应用程序。Note that App Studio does not produce functional code for your app, or host your app. 您的应用程序必须已在应用程序上传过程的清单中列出的 URL 处进行托管和运行,才能生成有效的应用程序。Your app must already be hosted and running at the URL listed in the manifest for the app upload process to result in a working app.

详细信息Details

清单编辑器的 "详细信息" 部分定义了正在进行的应用程序的简要说明。The details section of the Manifest Editor defines the high-level description of the app you are making. 其中包括应用程序的名称、说明和视觉品牌等内容。This includes things such as the app’s name, description, and visual branding. 您可以为您的应用程序自动生成 GUID,并提供隐私声明和使用条款的 Url。You can automatically generate a GUID for your app and provide URLs for your privacy statement and terms of use.

功能Capabilities

清单编辑器的 "功能" 部分是指定义应用程序功能的位置,其中列出了每个功能的详细信息。The capabilities section of the Manifest Editor is where the app's capabilities are defined and where details of each of those capabilities are listed.

选项卡Tabs
  • 团队选项卡。Team Tabs. "团队" 选项卡成为通道的一部分,可提供对团队信息和资源的快速访问。A team tab becomes part of a channel and provides quick access to team information and resources. 例如,频道的 "Planner" 选项卡包含一个计划;Power BI 选项卡映射到特定报告。For example, the Planner tab for a channel contains a single plan; the Power BI tab maps to a specific report. 用户可以向下钻取到相关上下文,但不能在选项卡外导航。例如,Power BI 选项卡不启用到其他 Power BI 报告的导航,但确实启用了 " 转到网站 " 按钮,该按钮可在主 Power bi 网站中启动报告。Users can drill down to the relevant context, but they should not be able to navigate outside the tab. The Power BI tab, for instance, doesn't enable navigation to other Power BI reports, but it does enable the Go to website button that launches the report in the main Power BI website.

    对于 "团队" 选项卡,您必须提供一个用于呈现选项和收集信息的 配置 URL ,以便用户可以自定义选项卡的内容和体验。当用户第一次将选项卡添加到频道中时,将显示此 iframed HTML 页面。For team tabs, you must provide a Configuration URL to present options and gather information so users can customize the content and experience of your tab. This iframed HTML page is displayed when a user first adds the tab to a channel.

    此外,还必须提供 tab 要从中加载或链接到的任何其他域。You must also provide any additional domains that the tab expects to load from or link to.

  • 个人选项卡。Personal Tabs. 此部分允许您定义一组默认情况下在个人应用程序体验 (中显示的选项卡,即用户在团队或频道) 上下文之外的应用体验。This section lets you define a set of tabs that are presented by default in the personal app experience (i.e. the experience a user has with your app outside the context of a team or channel). 在此部分中,提供选项卡名称、唯一标识符、指向要在团队中显示的 UI 的 URL,以及如果用户选择在浏览器中查看选项卡时要使用的 URL (可选)。In this section, provide the tab name, a unique identifier, the URL that points to the UI to be displayed in Teams, and optionally, the URL to use if a user opts to view the tab in a browser. 与团队选项卡一样,提供要从中从其加载或链接的选项卡的任何其他域。As with Teams tabs, provide any additional domains from which the tab expects to load from or link to.

机器人Bots

此部分允许您向应用中添加 对话机器人This section allows you to add a conversational bot to your app. 如果已有使用 Bot 框架注册的 bot,可以通过单击 "设置" " 设置 " 并提供 bot 的名称、BOT 框架 ID,并定义 bot 将使用的范围来添加该 bot。If you already have a bot registered with Bot Framework, you can add that bot by clicking Set Up and supplying the bot's name, Bot Framework ID, and defining the scopes in which the bot will work.

如果您尚未向 Bot 框架注册 bot,请单击 " 注册 " 以创建一个新的 bot。If you have not yet registered a bot with the Bot Framework, click Register to create a new one. 完成对你的 bot 的注册后,请返回清单编辑器的此部分,以输入其名称和 Bot 框架 ID。Once you’re done registering your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.

提供你的 bot 的信息后,你现在可以选择定义你的 bot 可以向用户建议的命令列表。Once you have supplied your bot's information, you can now optionally define a list of commands that your bot can suggest to users. 添加命令的名称、指示其语法和参数的命令的说明以及此命令应应用于的作用域 (s) 。Add the name of the command, a description of the command which indicates its syntax and arguments, and the scope(s) to which this command should apply.

请注意,如果您已将你的 bot 定义为仅支持一个作用域,则将忽略为不受支持的作用域指定的命令。Note that if you have defined your bot to only support one scope, commands specified for the unsupported scope will be ignored. 你可以随时编辑你的 bot 支持的范围。You can edit the scopes your bot supports at any time.

连接器Connectors

此部分允许您将连接器添加到您的应用程序。This section allows you to add a connector to your app. 如果您已经注册了 Office 365 连接器,请选择 " 设置 ",并输入连接器的名称和 ID。If you already have registered an Office 365 connector, choose Set up and enter the name and ID of the connector. 如果您想要新的连接器,请单击 " 注册 " 以转到浏览器中的连接器开发人员仪表板。If you want a new connector click Register to be taken to the Connector Developer Dashboard in your browser.

消息扩展Messaging Extensions

邮件扩展 是用户在 Microsoft 团队中与您的应用程序进行接洽的一种强大方式。Messaging extensions are a powerful way for users to engage with your app within Microsoft Teams. 用户可以查询服务中的信息,并以卡片形式发布该信息,直接进入频道或聊天对话。Users can query for information from your service and post that information in the form of cards, right into the channel or chat conversation.

邮件扩展由 Bot 框架 bot 提供支持,因此需要配置的 Bot 才能运行。Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. 如果您具有要为邮件扩展提供电源的 bot 的名称和 Bot 框架 ID,请输入该 ID。If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. 否则,请单击 " 注册 " 创建一个并在随后输入信息。Otherwise, click Register to create one and enter the information afterward. 选择用户是否可以更新邮件扩展的配置。Select whether the configuration of a messaging extension can be updated by the user.

配置了基础 bot 后,定义邮件扩展可接受的命令和参数。Once you have the underlying bot configured, define the commands and parameters which the messaging extension can accept.

每个命令都需要一个标题和一个 ID。Each command requires a title and an ID. 该命令可以选择包含用户的说明。The command can optionally contain a description for the user. 每个命令最长可支持五个参数,其中每个都需要:Each command can support up to five parameters, each of which requires:

  • 在团队客户端中显示并包含在用户请求中的参数的名称The name of the parameter as it appears in the Teams client and is included in the user request
  • 用户友好的标题A user-friendly title
  • 可选说明An optional description

测试和分发Test and Distribute

定义完应用程序后,"测试和分发" 部分将允许您将应用程序的定义导出为 zip 文件,然后可以共享该文件并将其上载到团队客户端进行测试。Once you have finished defining your application, the Test and Distribute section allows you export your app’s definition as a zip file which then can be shared and uploaded into the Teams client for testing. 单击 "导出" 会将 zip 文件下载为默认下载目录中 appname.zipClicking export downloads the zip file as appname.zip in your default download directory.

将您的应用程序发布到团队Publish your app to Teams

在您的项目主页上,您可以将应用程序上载到团队,将您的应用程序提交到贵组织中用户的公司自定义应用商店,或将您的应用程序提交到所有团队用户的应用程序源。On your project home page, you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users. 你的 IT 管理员将查看这些提交。Your IT admin will review these submissions. 您可以返回到 " 发布 " 页面以查看您的提交状态,并了解您的应用程序是否已由 IT 管理员批准或拒绝。此外,您还可以将更新提交到您的应用程序或取消任何当前活动的提交。You can return to the Publish page to check on your submission status and learn if your app was approved or rejected by your IT admin. This is also where you'll come to submit updates to your app or cancel any currently active submissions.

卡片编辑器Card Editor

卡片是简短或相关信息片段的容器。A card is a container for short or related pieces of information. Microsoft 团队支持可具有多个属性和附件的卡片。Microsoft Teams supports cards, which can have multiple properties and attachments. 卡片是 bot 和连接器向用户中继可操作信息的关键方式。Cards are a key way that bots and connectors relay actionable information to users.

为了使此过程更简单且更易于出错,"卡片编辑器" 选项卡可让您使用窗体构建英雄卡片或缩略图卡,并验证和测试生成的卡片 (完全按照用户将通过 bot 查看) 的情况。To make this process easier and less error-prone, the Card Editor tab lets you build Hero Cards or Thumbnail Cards using a form and verify and test the resulting card (exactly as a user would see it) via a bot. 它还为您可以复制/粘贴到您的应用程序源代码中的卡片提供相应的 JSON、c # 或 Node.js 代码。It also provides the corresponding JSON, C#, or Node.js code for the card that you can copy/paste into your app's source code.

如果您已经有要在团队中验证的卡片,则可以将该卡片的 JSON 粘贴到 " 添加卡片信息 " 下的 json 选项卡中,并将其发送给自己,以查看其在聊天中的外观。If you already have a card that you would like to verify inside Teams, you can paste the JSON for that card into the JSON tab under Add card info and send it to yourself to see what it looks like in a chat.

响应控件库React Control Library

备注

这将在将来弃用此响应控制库。This React control library will be deprecated in the future. 考虑使用 熟知的 ui 响应控件作为替代 (以前的 Stardust UI) 。Consider using the Fluent-UI react controls as an alternative (formerly Stardust UI).

创建遵循 "团队最佳实践" 的应用程序是为您的应用程序提供与团队客户端体验无缝匹配的外观的绝佳方式。Creating an app that follows the Teams best practices is a great way to give your app a look and feel that fits seamlessly with the Teams client experience. 您使用的 UI 控件对实现该结尾至关重要。The UI controls that you use are critical to achieving that end. 为了便于创建一致的 UI,应用程序 Studio 提供了多种类别的 UI 控件,这些控件遵循团队设计原则。To make it easier to create a consistent UI, App Studio provides several categories of UI controls which follow Teams design principles.

提供了控件和相应的响应组件的示例,并准备好在生成应用程序时使用它们。Examples of the controls and corresponding React components are provided and ready to use in building your app.

控件Controls

控件包括:Controls include:

  • 按钮Buttons
  • 下拉Dropdowns
  • 复选框Checkboxes
  • 单选按钮Radio Buttons
  • Toggles
  • 文本区域Text Areas
  • 链接Links
  • 选项卡Tabs
  • 表格Tables
  • 图标Icons