About The Authors

Tomomi Imura (@girlie_mac) is an avid open internet know-how advocate and a full-stack engineer, who’s at present working as a Cloud Advocate at Microsoft in San …
More about
Tomomi & Daisy
↬

Maybe you might be utilizing Microsoft Groups at work and wish to construct an app that runs inside Groups. Or possibly you’ve already revealed an app on one other platform and wish to achieve extra customers on Groups. On this article, we’ll see the right way to construct a brand new internet software in Groups, and the right way to combine an current one — with only a few strains of code.

You don’t want any prior expertise to get began. We’ll use bare-minimum HTML code and toolsets to construct a Groups tab (the best model of an app in Groups). When you’re strolling by means of this tutorial, if you wish to dive deeper, try the on-demand movies from Learn Together: Developing Apps for Teams. It seems that making your internet software accessible the place your customers are already working has some advantages, together with a attain of over 115 million each day energetic customers. Let’s dive in!

Microsoft Groups as a platform

You might be conversant in Groups as a collaborative communication device, however as a developer, you can additionally view it as a growth platform. In actual fact, Groups gives another technique to work together with and distribute your current internet purposes. That is primarily as a result of the device has at all times been designed with the online in thoughts. One of many key benefits of integrating web apps into Teams is offering a extra productive approach for customers — your colleagues and Groups customers all over the world — to get the work achieved.

Integration by means of tabs, embedded internet apps

Whereas there are various completely different paths to constructing and deploying Groups apps, one of many best is to combine your current internet apps with Groups by means of what known as “tabs.” Tabs are principally embedded internet apps created utilizing HTML, TypeScript (or JavaScript), client-side frameworks comparable to React, or any server-side framework comparable to .NET.

Tabs let you floor content material in your app by basically embedding an online web page in Groups utilizing <iframes>. The applying was particularly designed with this functionality in thoughts, so you’ll be able to combine current internet apps to create customized experiences for your self, your crew, and your app customers.

One helpful function about integrating your internet apps with Groups is which you can just about use the developer instruments you’re possible already conversant in: Git, Node.js, npm, and Visible Studio Code. To increase your apps with extra capabilities, you should use specialised instruments such because the Teams Yeoman generator command line tool or Teams Toolkit Visual Studio Code extension and the Microsoft Teams JavaScript client SDK. They let you retrieve extra info and improve the content material you show in your Groups tab.

Construct a tab with an current code pattern

Let’s get began with the fundamentals. (If you wish to take it a step additional to truly deploy your app, you’ll be able to soar to the Learn Together videos) to be taught extra.

To simplify the steps, let’s check out a code pattern, so as a substitute of the tooling outlined above, the one stuff you’ll want are:

On this article, we’re going to make use of a web-based IDE known as Glitch, which lets you host and run this challenge shortly within the browser, so that you don’t have to fret in regards to the tunneling or deployment right now. For the full-scale strategy from begin to end, you’ll be able to try a comprehensive tutorial on Microsoft Docs, which incorporates examples of a barely extra superior messaging extension or a bot.

Though Glitch is a superb device for tutorial functions, this isn’t a scalable surroundings so, in actuality, you’ll additionally want a technique to deploy and host your internet providers. In a nutshell, while you’re growing, that you must arrange a neighborhood growth with a localhost tunneling, such because the third occasion device ngrok, and for manufacturing, you’ll must deploy your app to a cloud service supplier, for instance, Microsoft Azure Web Services.

Additionally, you should use on-premises infrastructure to host your internet providers, however they should be publicly accessible (not behind a firewall). For this text, we are going to give attention to the right way to make your internet app out there on Groups, so let’s return to Glitch for now!

First, let’s go to the sample code page and remix the challenge. Remixing is like forking a repo on GitHub, so it generates a duplicate of the challenge for you, letting you modify the code nevertheless you need with out messing with the unique.

After you have your personal challenge repo, you’ll additionally routinely get your personal internet server URL. For instance, in case your generated challenge identify is achieved-diligent-bell, your internet server URL can be https://achieved-diligent-bell.glitch.me. After all, you’ll be able to customise the identify if you need.

Net providers up and operating, you’ll must create an app package deal that may be distributed and put in in Groups. The app package deal to be put in to the Groups consumer incorporates two icons and a JSON manifest file describe the metadata to your app, the extension factors your app is utilizing, and tips that could the providers powering these extension factors.

Create an app package deal

Now, you will want to create an app package deal to make your internet app out there in Groups. The package deal consists of:

📁 your-app-package
 └── 📄 manifest.json
 └── 🖼 colour.png (192x192)
 └── 🖼 define.png (32x32)

When creating your app package deal, you’ll be able to select to create it manually or use App Studio, which is a helpful app inside Groups that helps builders make Groups apps (sure, meta certainly). App Studio will information you thru the configuration of the app and create your app manifest routinely.

After you have put in the App Studio app in your Groups consumer, open the app. You possibly can launch it by clicking the three dots within the left menu bar.

Then, click on the Manifest Editor tab from the highest and choose Create a brand new app.

You’ll must fill out all of the required fields together with the app names, descriptions, and so forth.

Within the App URLs part, fill out your privateness and TOU internet pages. On this instance, we’re simply utilizing the placeholder URL, https://example.com.

Configure your private tab by deciding on Capabilities > Tabs from the left menu.

Click on the Add button underneath Add a private tab and enter the information. Underneath Content material URL, enter your webpage URL (on this case, it needs to be https://[your-project-name].glitch.me/index.html).

Within the index.html file has just a few strains of static HTML code:

<h1>Whats up world! </h1>
<p>That is the bare-minimum setting for MS Groups Tabs.</p>

Be at liberty to tweak the content material within the index.html as you need. That is the content material to be displayed in your Groups consumer. Lastly, go to End > Check and distribute.

When you get any errors, you’ll have to return and repair them. In any other case, you’ll be able to proceed by clicking “Set up”. And voilà, now you will have your personal private tab!

Extra options with Groups SDK

This code pattern solely incorporates the naked minimal HTML code pattern to only present you the right way to configure Groups to show your internet app in Tabs. However in fact, your internet apps don’t have to be static, and you’ll use internet frameworks comparable to React if you want! (There are extra deep-dive examples using React which you can dive into as properly.)

Groups has its personal JavaScript SDK to offer extra performance too, comparable to loading a configuration popup for groups, get consumer’s locale data, and so forth.

One helpful instance is detecting the “theme” of a Groups consumer — Groups has three themes, mild (default), darkish, and high-contrast mode. You’ll suppose CSS ought to deal with the theming, however keep in mind, your internet app is displayed within the Groups’ iframe, so that you would want to make use of the SDK to deal with the colour change.

You possibly can embody the JavaScript both from npm:

npm set up --save @microsoft/teams-js

Or embody in your HTML:

<script src="https://statics.groups.cdn.workplace.internet/sdk/v1.8.0/js/MicrosoftTeams.min.js"></script>

Now you’ll be able to detect the present theme with the getContext methodology. And that is how one can decide the physique textual content colour:

microsoftTeams.initialize();

microsoftTeams.getContext((context) => {
  if(context.theme !== 'default') {
    doc.physique.model.colour="#fff";  }
});

The theme will be modified by a consumer after loading, so to detect the theme change occasion, add the next code snippet:

microsoftTeams.registerOnThemeChangeHandler((theme)=> {
  if(theme !== 'default') {
    doc.physique.model.colour="#fff";
    doc.physique.model.colour="inherit";
}
});

Hopefully, this easy tutorial helped you to get began with the primary steps. When you’d wish to proceed growing for Groups, you’ll be able to add extra capabilities comparable to including Groups-native UI parts, search options, messaging extensions, and conversational bots, to construct extra interactive purposes.

For a complete information utilizing the really useful toolsets (Visible Studio Code, Yeoman Generator, and so forth.), try Teams Developer Docs the place you’ll be able to be taught extra about tabs, messaging extensions, bots, webhooks, and the opposite capabilities that the Groups developer platform gives.

Subsequent Steps

With only a few clicks, you’ll be able to combine your apps into Groups and create new experiences to your customers. And when you’ve developed apps and deployed them to Groups, you’ll have the potential of reaching a large viewers of customers that use Groups each day.

You possibly can get started building today or learn more from Learn Together: Developing Apps for Teams with on-demand movies and demos throughout constructing apps for Groups.

(vf, il)