Delivering Better Applications through Microsoft Teams

[アーティクル]
02/06/2017

When Microsoft announced the public preview of Microsoft Teams, I think they unveiled the future of Microsoft productivity. It provides a single canvas that aggregates relevant information and tools across Office 365 and many 3rd party applications. 3rd party integration is made possible by a compelling extensibility story that developers can take advantage of today.

While in preview, developers can integrate custom experiences into Microsoft Teams through bots, custom tabs, and connectors. Each of these capabilities offers unique capabilities, but developers can also combine them to build even more compelling and comprehensive applications. Although I'll cover each of the capabilities in more detail, here is my perspective on where each fits into the :

Bots - great for real-time interactions with individuals and teams
Tabs - great for apps that need a more dynamic or complex user interface
Connectors - great for actionable notifications/messages with light weight user experience

It all started with bots…

My journey with Microsoft Teams actually started with a bot project. Mat Velloso gives a great talk on "what is a bot" (he even built a bot that presents about bots). As Mat describes it, a bot is just another app. With that in mind, I decided to take an existing mobile app I built last year and deliver it as a bot. Even with cross-platform tools like Xamarin and Cordova, developers are still challenged to get users to install their mobile app(s). A bot on the other hand can run within existing applications that have enormous user bases (ex: Facebook Messenger, Skype, WeChat, etc).

As I started to build my bot, I quickly realized that more advanced user interfaces were hard to deliver. In my case, photo tagging was a challenge. Yes, cognitive services can face detect most pictures, but some photos need manually drawn photo tags. I also found long/paged lists could be more easily delivered in a traditional user interface. I'm sure there are many other scenarios, but these were my roadblock.

Note: many bot channels support the ability to send messages with rich formatting and controls. These are great, but don't yet come close to the empty canvas of a traditional user interface.

Enter Microsoft Teams. Not only did Microsoft Teams provide a channel for my bot, but it also offered custom tabs for complex user interfaces. I also found connectors as a valuable tool in Microsoft Teams for sending proactive actionable notifications to users. Below is a video of my original mobile application and the application re-imagined for Microsoft Teams:

[embed]https://www.youtube.com/watch?v=FV_Mvf1x0Nk[/embed]

Bots

2016 was a huge year for bots, with a surge of interest coming from exciting platforms like Alexa/Cortana and new bot channels like Facebook Messenger and Skype. Microsoft went "all-in" on bots with high-profile bot launches (who can forget Tay), significant investments in the Bot Framework and bot support in popular platforms like Skype. Microsoft Teams was launched with bot support (and even has a bot of its own). For developers, Microsoft Teams is just another channel in the bot framework. That means that bot developers can enable their bot(s) for Microsoft Teams with little to no code modification. Users can interact with bots in Microsoft Teams through one:one chats and team conversations (not enabled during preview).

Bots in Microsoft Teams can take advantage of "cards", which is a light weight UI framework for delivering formatted and actionable messages/controls to users. It is the exact card framework used by Office 365 Connectors (discussed later in this post). It uses json instead of markup to deliver messages that can reader across a number of platforms and clients.

Lots of information exists around building bots, especially with the bot framework. Microsoft is busy creating a Bot Design Center, a set of online documentation which will detail best practices and patterns for building bots (I will provide link once published). The only unique constraint in my bot was authenticating users to establish identity and call into the Microsoft Graph. In the next few weeks, I'll author a post on the effort of performing a secure OAuth flow from within a bot.

Tabs

Tabs are Microsoft Teams version of an Office Add-in. They give developers the ability to load web content into a specific Channel of a Team. There are three potential web pages tab developers need to consider:

Configuration Page: this is the initial page that is launched when a tab is added to Microsoft Teams. It gives the end-user the ability to configure specifics about the tab and allows the developer to capture configuration information and set the page that will be displayed in the tab. This page is also used if the developer allows the tab configuration to be updated.
Tab Content Page: this is the actual page that displays in a tab within Microsoft Teams.
Tab Remove Page: this is an optional page a developer can use to "clean up" when a user deletes a tab. For example, you might want to allow the user to delete any data associated with the tab.

The Microsoft Teams Tab Library is a JavaScript library that helps developers integrate their web content with Microsoft Teams. One of the most important components of this is the settings object. Developers can use this to retrieve and save settings for the tab. Retrieving settings is useful in determining what team/channel the tab is running in or the Theme the user has applied to Microsoft Teams. Saving settings is useful in capturing both the content and remove page URLs.

Retrieving Settings

 microsoftTeams.getContext(function (context) {
    // Do something with context...ex: context.theme, context.groupId, context.channelId;
});

Saving Settings

 microsoftTeams.settings.setSettings({
    contentUrl: "https://somedomain/tab.html",
    suggestedDisplayName: "Some default tab name",
    websiteUrl: "https://somedomain/index.html",
    removeUrl: "https://somedomain/tabremove.html"
});

Beyond settings, the Microsoft Teams Tab Library has a number of additional objects, functions, and events that can be used to build great solutions. In the next few weeks, I'll author posts that demonstrate how to use this library for setting styles/themes for a tab (including listening for theme changes in Microsoft Teams) and performing authentication flows and establishing identity. In the meantime, Microsoft Teams engineering has aggregate some great documentation about tab development.

Connectors

Office 365 Connectors are the same connectors that run in Outlook. The only difference is that Microsoft Teams expands the group/team construct with an additional layer of detail…the channel, which provide additional organization for Microsoft Teams. Connectors are added through a trust flow that gives a 3rd party app a "web hook" for sending cards into Microsoft Teams. During preview, Connectors do not support side loading into Microsoft Teams like they can in Outlook. Instead, you would use the add connector menu option on a channel and select the one from the Connector Gallery. It should be noted that bots can deliver the same cards as connectors. However, there are compelling scenarios for using each. In my case, I only wanted my bot used in one:one conversations and the connectors to message an entire Team (even when the bot wasn't added to the Team).

Conclusion

I hope this post expanded your knowledge of Microsoft Teams extensibility and started to illustrate how you can use it to deliver powerful applications. I hate the concept of blog "series", so instead I will post some additional patterns a learnings from working with Microsoft Teams in the next weeks. In the meantime, checkout the documentation at https://msdn.microsoft.com/en-us/microsoft-teams/index

次の方法で共有