Microsoft Teams Toolkit using Visual Studio

Getting started building for Microsoft Teams Toolkit

As we all know, Microsoft teams is the hub of teamwork. Microsoft teams integrates with apps and services to help users work together. By building out Microsoft Teams apps (controls like a team’s tab or connector) this collaborating experience can be enhanced to next level. It improves productivity, helps faster decision making. These apps act as interface between the teams content and line of business services and workflows.
To extend and deliver this awesome collaborating experiences in the form of Teams App, Microsoft has introduced Microsoft Teams toolkit. This extension is available in Visual Studio and Visual Studio code.

Extensibility options for Teams app:

To design your Teams app, it's really important that you first understand the extensibility points or the capabilities that teams allows your apps to inject into the Teams native client.
There are four extensibility points:

Ø Tabs: Websites that are embedded into the Teams client; they can leverage the teams SDK to tap into your user profile and provide rich data from your Microsoft 365 stack in your hosting experience.
Ø Messaging extensions: It allow you to insert visual content into a message as you're typing it
Ø BOT: You can have conversations with bots, 1:1 flow or in teams channel
Ø Connectors: Connectors are great options if you're looking to inject an external notification into your channel

Further details about the entry point in Teams app are available here : Extensible points in Teams App.

Designing:

Once you have a good understanding of what's possible when extending a Teams app, you take a step back and think about your users, think about the problems they're having and then create a collection of user stories. This will help you to map users requirement to a extensibility option.
Microsoft provides some guidance to help mapping user stories / use cases to teams app capabilities. You can find the details of capabiltiy mapping here.

Microsoft Teams Toolkit: Building App

The Microsoft Teams Toolkit brings everything that is needed to build an app at one place. All the tools that you need to get up and running with teams development.
For Visual Studio Code it can be installed from the Visual Studio Marketplace here. Extension for Visual Studio is available and can be downloaded from here.
Let us have a quick walkthrough of Visual studio Teams Toolkit. There are below tabs under Microsoft Teams Toolkit:
Documentation - This tab helps to readily navigate to Teams app development documentation.
Project Setup - Using this tab you can add the Teams app information
Configuration - Configure your Teams app here. This screen is similar to the screen you see in App studio in Teams app
Validation - Validate your application
Publishing - Publish the application directly from the IDE to App store.

Steps to develop a Tab using Microsoft Graph Toolkit in Visual Studio :

Pre-Requisites :

Make sure the Teams admin has enabled Upload Custom Apps under Teams admin portal >> Global Policy

Steps :

If this is your first time - create a new project there's a starting project button. When you start a new project you have to answer some basic questions: about the type of app that we're trying to create. This is where, going through the exercise of designing an app comes in handy because when you're asked if you would like to create a tab, bot or messaging extension you have a rough idea of what you're trying to build and this is a great starting point.

In this article, we will create a Tab, so I selected the Tab Option and added few details for Project Name and Location

In the Next Question, select which tab type you need to create. I selected “Personal”.
Visual studio will open with below interface of Microsoft Teams toolkit.

I will publish existing blog website to MS Teams. You can follow the same steps, once your app is built and you would like to render it as a Teams app. Select Edit app package and Sign into your MS account. Click on Create a new app.

Add details under “Details > App Details”.

And “Capabilities > Tabs” click Add under Personal Tab and fill in details like below screenshot and save. And click on Download :

Note: Since the current "Validate" option is under preview, so expect issues/discrepancies in its behaviour.

Once download is done. Go to Teams App and Click on Apps > Upload a Custom App. Select the app should be uploaded for yourself or team

Go to the location of the solution and go to the location “.publish” and we will use that development.zip file. Click on ok and “Add”

Once Added you can see the Blog Site in a Personal Tab as below :

Similar you can add any website or create custom apps and publish on teams.

Summary:

In most organizations, Microsoft Teams is a default collaboration tool these days, you as a developer will find several use cases to implement a Tab, a Messaging extension, a Connector, or a BOT. Using the Microsoft Teams Toolkit extension, development is easier, faster, and more efficient than ever.

If you happen to use this extension in your development, I would like to know the queries, experience, or feedback from you. :)