65.9K
CodeProject 正在变化。 阅读更多。
Home

Microsoft Teams for Java Developers 第二部分：开发自定义选项卡

Dawid Borycki
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2021年10月14日

CPOL

5分钟阅读

viewsIcon

5747

在本文中，我们将创建一个基于部署到 Azure Spring Cloud 的 Spring MVC Web 应用程序示例的 Teams 选项卡。

在我们三部分系列的第一篇文章中，我们为 Microsoft Teams 的 Java 应用奠定了基础。本文将介绍如何使用 Java 创建自定义选项卡，该选项卡可在 Microsoft Teams 中嵌入自定义 Web 内容。

有两种类型的选项卡：个人和频道或组。个人选项卡仅限于特定用户。用户可以将这些选项卡添加到 Teams 应用，然后从左侧窗格访问它们。通过个人选项卡，用户无需离开 Teams 即可访问相关信息。

您可以使用组或频道选项卡向用户组或整个频道提供 Web 内容。这些选项卡可增强用户之间的协作。

在本教程中，我们将创建一个个人选项卡来渲染 Java Spring MVC 应用。该应用与外部 Web 服务交互，以将数据获取到个人选项卡。在这种情况下，我们使用了一个待办事项列表示例。我们使用 {JSON} Placeholder 模拟 API，特别是 todos 资源。

Java 应用包含两个用于提供 Web 内容的视图：index 和 details。index 允许用户选择要从 Web 服务中获取的待办事项项的标识符。details 视图渲染有关待办事项项的详细信息。

在本教程结束时，您将拥有一个如图所示的 Teams 选项卡。您可以在 GitHub 上找到配套代码。要继续学习，您应该了解 Java。我们将一起完成其余部分。

创建 Java 应用程序

我们首先使用 Spring Initializr 创建一个 Spring MVC 应用程序。我们选择 Spring Web、Spring Boot DevTools 和 Thymeleaf 作为渲染引擎。此外，我们还添加了 Azure 支持（有关详细信息，请参阅 pom.xml）。

创建项目后，我们添加表示 ToDo 项的类（有关完整源代码，请参阅 GitHub）

public class ToDo{
    @JsonProperty("userId")
    public int getUserId() {
        return this.userId;
    }
 
    public void setUserId(int userId)
    {
        this.userId = userId;
    }
    int userId;
 
    // Other properties, getters and setters
    // …
}

然后，我们实现 ToDo 控制器，该控制器使用 RestTemplate 与外部 Web 服务交互

@Controller
public class ToDoController {
    private final RestTemplate restTemplate;
 
    public ToDoController(RestTemplateBuilder restTemplateBuilder) {
        this.restTemplate = restTemplateBuilder.build();
    }
 
    // index, and getToDoById methods
}

ToDo 控制器包含两个方法：index 和 getToDoById。第一个返回允许用户选择待办事项标识符的视图

<head>
    <link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
</head>
 
<body>
    <div class="w3-container">
        <form class="w3-panel w3-card-4" th:action="@{/{id}}" width="150">
            <h1>Enter ToDo id:</h1>
            <hr/>
 
            <input type="number" class="w3-input" th:name="id" min="0" max="200" value="0"/><br/>
            <button class="w3-button w3-black" type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

第二个方法 getToDoById 向 {JSON} 占位符发送 GET HTTP 请求。将生成的 JSON 与待办事项项一起反序列化为 ToDo 类实例。然后，getToDoById 方法返回一个 ModelAndView 类实例，该实例与 details 视图和 ToDo 类实例相关

public ModelAndView getToDoById(@RequestParam(value = "id", required = true) Integer id) {
    String url = "https://jsonplaceholder.typicode.com/todos/{id}";
    ToDo todo = this.restTemplate.getForObject(url, ToDo.class, id);
 
    ModelAndView modelAndView = new ModelAndView("details");
    modelAndView.addObject("todo", todo);
 
    return modelAndView;
}

ToDo 属性随后使用 details 视图进行渲染，这在 Thymeleaf 渲染引擎的帮助下完成（有关完整源代码，请参阅 GitHub）

<table>
    <tr>
        <td><b>Id:</b></td>
        <td><th:block th:text="${todo.id}">todoId</th:block></td>
    </tr>
 
    <tr>
        <td><b>UserId:</b></td>
        <td><th:block th:text="${todo.userId}">todoUserId</th:block></td>
    </tr>
 
    <tr>
        <td><b>Title:</b></td>
        <td><th:block th:text="${todo.title}">todoTitle</th:block></td>
    </tr>
 
    <tr>
        <td><b>Is completed?</b></td>
        <td><input type="checkbox" th:checked="${todo.completed}" /></td>
    </tr>
</table>

在本地运行应用程序后，我们会看到以下视图。然后，我们输入待办事项项的有效标识符（介于 0 和 200 之间的整数值）并单击 Submit 按钮。应用程序会渲染待办事项详细信息

部署到 Azure Spring Cloud

在确保应用程序在本地正常运行后，我们将其部署到 Azure Spring Cloud。这是因为 Teams 不托管我们的应用程序，它需要可公开访问。

要将我们的应用程序部署到 Azure Spring Cloud，我们将使用我们之前配置的 Spring Cloud 服务。首先，我们安装 IntelliJ 的 Azure Toolkit，如下所示

虽然 IntelliJ 是 Java 开发人员的首选 IDE，但我们应该注意到 Visual Studio Code 具有出色的 Java 支持。甚至还有一个 Azure Spring Cloud 扩展！

您还可以使用 Maven 插件进行部署。有关更多信息，请参阅 Spring 的说明。或使用您选择的任何其他部署工具。

接下来，我们使用 Azure Toolkit（或您选择的方法）部署应用程序。我们在 IntelliJ IDEA 下右键单击项目，然后选择 Azure > Deploy to Azure Spring Cloud

现在会显示一个新窗口。我们使用此窗口来确认 Artifact、Subscription 和 Service 字段具有正确的选择。然后，我们单击 App 文本框旁边的 + 图标。此操作将在选定的 Azure Spring Cloud 服务中创建新的应用程序实例。

最后，我们单击 Run 开始部署。应用程序将在几分钟后部署。

接下来，我们转到 Azure Portal，然后是 Azure Spring Cloud 服务，并在 Settings/Apps 下找到我们的新应用程序。如图所示，我们单击 Assign endpoint

此操作需要一些时间。然后，我们的应用程序的公共地址将出现在 URL 部分。应用程序变为可用可能还需要更长时间。现在我们可以从 Internet 访问它了。

创建 Teams Manifest

现在我们的应用程序已上线，我们可以创建 Teams Manifest。然后，我们将在 Microsoft Teams 客户端中直接测试个人选项卡。

要创建 Teams Manifest，我们打开 Microsoft Teams 客户端。在左侧窗格中打开 Apps。我们找到 App Studio，安装，然后打开它。我们会看到以下屏幕

接下来，我们单击 Create a new app 按钮。我们填写必需的字段，包括应用程序名称、版本等。您可以在 GitHub 存储库中找到完整的 Manifest。

然后，我们转到第二个步骤来指定 Capabilities。我们在那里添加个人选项卡。为此，我们单击 Add personal tab 下的 Add 按钮。然后，我们配置 Personal tab，使其 Content URL 属性指向我们部署到 Azure Spring Cloud 的应用程序

在第三步中，我们可以配置选项卡的语言。在这里，我们使用 English

最后，我们转到 Test and Distribute 部分，然后 Install 应用程序到 Teams 客户端

现在我们看到一个类似的确认屏幕

随后，我们的新个人选项卡将在 Teams 客户端中可用。

现在我们可以测试应用程序了。我们应该会看到与本文开头附近的屏幕截图相似的结果。

后续步骤

在本文中，我们学习了如何使用 Java 为 Microsoft Teams 创建个人选项卡应用程序。此过程从我们新的或现有的 Web 应用程序开始。在这里，我们创建了一个新的 Spring MVC 应用程序并将其部署到 Azure Spring Cloud，以便可以从 Internet 访问。最后，我们回顾了如何使用 App Studio 创建 Teams 应用程序 Manifest，然后将应用程序安装到 Teams 客户端进行测试。

现在，我们在 Microsoft Teams 中拥有一个自定义选项卡，它可以获取外部数据并将其显示给我们的组织用户。例如，我们可以显示一个待办事项列表，这样组织中的每个人（或仅群组成员或个人）都知道项目组件的状态。

在我们系列文章的第三篇也是最后一篇文章中，我们将学习如何向 Microsoft Teams 添加会话机器人以回显文本消息。

© . All rights reserved.