好奇心构建的应用程序:创建Smartsheet的微软团队集成

发表在7月10日

最好的软件开发人员总是充满好奇心。在Smartsheet,这也不例外。我们最近与Microsoft Teams的整合源于我们的一位顶级工程师的好奇心。

当珍妮·林听说微软新的Teams聊天平台时,她想知道它提供了什么样的api,以及她如何使用它们。在她的探索过程中,她发现有三种不同的选项可以与Teams平台集成——机器人、卡片和标签。

Bots提供了一个简单的“命令行”类型的界面,允许Teams用户通过在聊天窗口中输入命令与其他服务进行交互。例如,零售商店的机器人可以通过收听聊天流来询问有关产品或订单的问题,然后自动响应。ob欧宝娱乐app手机下载

不像机器人那样等待问题或其他事件,卡片将事件或事件通知注入聊天流。

微软Teams频道截图

与选项卡的集成允许开发人员在通道内的专用画布上显示他们的服务。这基本上是通过让应用程序或服务在其自己的选项卡上的IFRAME中运行来完成的。

我们决定使用标签解决方案有两个原因。首先,能够将Smartsheet UI直接嵌入到Teams选项卡中的前景为Smartsheet用户提供了熟悉的丰富体验。第二个原因就简单多了:珍妮对某件事很好奇。

如前所述,选项卡集成是在Teams之外运行的应用程序,并通过IFRAME嵌入到选项卡中。因此,在构建选项卡集成时,我们需要确保我们的内容在IFRAME中工作。

Microsoft Teams with Smartsheet选项卡

此外,为了让IFRAME-ed应用程序与Teams进行交互,应用程序中的每个页面都必须包含Microsoft Teams选项卡库作为脚本源。然后,一旦页面成功加载,它需要通过调用microsoftTeams.initialize()来初始化该库。否则,Microsoft Teams将不会显示该页面。

Teams选项卡库是连接应用程序和选项卡的JavaScript钩子。除此之外,该库还允许您使用服务发起身份验证请求,以及读取和操作用户Teams实例中的设置。

Smartsheet集成使用microsoftTeams.authentication.authenticate ()启动OAuth2流程来验证用户是否为Smartsheet用户,并授权他们将Teams连接到他们的Smartsheet帐户和数据。必须使用authenticate(),以便身份验证过程在web和桌面版本的Teams中都能成功工作。

当你在Teams中的“添加选项卡”窗口中选择Smartsheet应用程序时,系统会要求你登录。这将带您了解前面提到的OAuth2流程。有了此授权,您就可以选择将在选项卡中显示的工作表、报告或Sight。

所选项目必须为发表于电子表格以便将其显示在选项卡中。如果项目还没有发布,您将可以选择在下面的屏幕上设置发布状态。

微软团队发布屏幕的Smartsheet

发布一个项目,比如一个工作表,允许您提供丰富的Smartsheet界面,同时保留对如何使用该工作表的控制。发布的项可以是完全交互式的,也可以是只读的。所有这些发布设置都可以通过Smartsheet API获得,并在Teams集成中使用。

当用户保存他们的选择时,集成使用Tab JavaScript库在通道的选项卡设置中保存所选项的publishhedurl。这是通过在microsoftTeams.settings中将publishedUrl设置为选项卡的contentUrl来实现的。setSettings ({contentUrl: publishedUrl)。

为选项卡保存的设置将在选项卡的生命周期内保持不变。如果您想更改选项卡中显示的工作表或报告,只需删除不需要的选项卡,并使用新需要的工作表创建一个新的Smartsheet选项卡。

在Jenny的团队集成之初,她选择了标签集成,部分原因是它对Smartsheet有意义,但也因为她对构建一个带有交互式UI的应用程序感到好奇,这也是一个驱动因素。

Jenny有丰富的后端工程师经验,但在她的职业生涯中很少有机会构建UI,或者使用JavaScript、Sass和AngularJS等客户端技术。因此,构建具有交互式UI的应用程序的机会引起了她的兴趣和兴奋。

在她自己的时间里,将用于团队集成的Smartsheet的概念验证放在一起,并向团队展示之后,Jenny被允许准备她的应用程序用于生产使用。ob欧宝娱乐app手机下载

由于时间紧迫,她的应用程序生产要及时准备好,以迎接Microsoft Teams的公开发布,ob欧宝娱乐app手机下载Jenny将此归功于之前Smartsheet集成的组件化特性,这使得她能够利用大多数Smartsheet集成中常见的部分代码,并且已经编写好了。也就是说,一个基线项目(内部开发作为集成项目的起点)提供了一个架构和技术堆栈的开端,Smartsheet的技术运营团队可以轻松地将其作为已建立的部署流程的一部分实现。

这个基线应用程序包括一个用Java编写的RESTful API,使用Spring MVC框架,以及运行AngularJS和Sass (scss)的客户端代码。

基线API提供了一个OAuth2流与Smartsheet,以及用于与控件交互的几个示例端点Smartsheet Java SDK

在客户端,JavaScript代码被组织在定义清晰的AngularJS模块中,并在需要时使用相应的指令。其中一个模块包括一个完全互动的扩展树表选择器,珍妮对此非常感激。她不必花时间构建自己的工作表拾取器,而是可以使用基础应用程序中提供的样例拾取器,并将其放入应用程序中。

Microsoft Teams中的智能工作表选择器

珍妮笑着说:“如果我没有选片机,我可能要花两倍的时间。”

除了Smartsheet编码资源的模块化特性,她还提到微软的支持是她快速开发时间表成功的关键。欧宝体育app官方888当她刚开始时,她遇到了团队JavaScript库的问题,并发布了一个问题堆栈溢出。微软团队的某个人很快做出了回应,让她知道新版本的库已经可用了。

最后,这个项目取得了全面的成功。这个项目已经准备好了,可以作为最初的Teams应用程序之一发布。Jenny满足了她对新api和客户端开发的好奇心。我们的客户可以利用微软团队内部的Smartsheet协作。而且,当我们的客户和员工都满意时,这绝对是Smartsheet的胜利。

评论

评论