Tutorial - Build a Task Management App - Teams

Microsoft Teams connector is Model-View-Controller (MVC) sample task management application and generated using the ASP.NET web application template. Most of the code is related to either basic MVC configuration or task management system. You can add your existing connector for Microsoft 365 Groups or build a new one within Teams.

Types of connector codes

ConnectorController.cs: Set up and save actions.
TaskController.cs: Create and update actions.

Key features of Microsoft Teams connector

Simulates real task management system.
Allows users to create and view tasks.
Generates content randomly.
Simulates notification to be sent to Microsoft Teams channel.

This step-by-step guide helps you to create and test a connector in Microsoft Teams. You'll see the following output:

Screenshot of the build Team connector output after you have successfully completed the step-by-step guide.

Prerequisites

10 minutes remaining

Ensure that you install the following tools and set up your development environment:

	Install	For using...
	Microsoft Teams	Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and calls all in one place.
	Visual Studio 2022	You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version.
	.NET Core SDK	Customized bindings for local debugging and Azure Functions app deployments. Use the latest version or install the portable version.
	Dev tunnel	Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. or You can also use ngrok as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).

Note

After downloading ngrok, sign up and install authtoken.

Set up local environment

9 minutes remaining

Open Microsoft-Teams-Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.

Enable developer preview

8 minutes remaining

Enable uploading of apps in the admin console of your tenant.
1. Sign in to Microsoft 365 admin center with your admin credentials.
2. In the left pane, select Show All.
3. Select Teams.
In the left pane, select Teams apps.
Select Setup policies.
Select Global (Org-wide default).
Turn on the Upload custom apps toggle.
Select Save.

Your test tenant can now permit custom app upload.

Tip

Custom app upload takes some time to become active.
Go to Microsoft Teams.
From the upper-right corner of your Teams, select ....
Select About > Developer preview.
Select Switch to developer preview.

Configure your connector

7 minutes remaining

Open TeamsToDoAppconnector.sln in Visual Studio from the cloned repository.

Create a tunnel
- dev tunnel
- ngrok
1. Open Visual Studio.
2. Select Create a new project.
3. In the search box, enter ASP.NET. From the search results, select ASP.NET Core Web App.
4. Select Next.
5. Enter Project name and select Next.
6. Select Create.
  
  An overview window appears.
7. In the debug dropdown list, select Dev Tunnels (no active tunnel) > Create a Tunnel....
  
  A pop-up window appears.
8. Update the following details in the pop-up window:
  1. Account: Enter a Microsoft or GitHub account.
  2. Name: Enter a name for your tunnel.
  3. Tunnel Type: From the dropdown list, select Temporary.
  4. Access: From the dropdown list, select Public.
9. Select OK.
  
  A pop-up window appears showing that dev tunnel is successfully created.
10. Select OK.
  
  You can find the tunnel you've created in the debug dropdown list as follows:
11. Select F5 to run the application in the debug mode.
12. If a Security Warning dialog appears, select Yes.
  
  A pop-up window appears.
13. Select Continue.
  
  The dev tunnel home page opens in a new browser window and the dev tunnel is now active.
14. Go to Visual Studio, select View > Output.
15. From the Output console dropdown menu, select Dev Tunnels.
  
  The Output console shows the dev tunnel URL.
Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:
```
ngrok http --host-header=localhost 3978
```
Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

The window shows the HTTPS URL.
Go to Connector Developer Portal.
Select New Connector.
Enter the following details to register a new connector:
- Connector name.
- Logo
- Short description of your app (10 words or less).
- Detailed description of what your Connector does (3-5 sentences).
- Company website.
- Configuration page for your Connector as https://[BASE_URI]/connector/setup.
- Set Valid domains as https>//[Base URI].
- Select Yes to enable the action on Connector cards.
- Set Actions URL as https://[BASE_URI]/Task/Update.
- Select I accept the terms and conditions of the App Developer Agreement.
- Select Save.
You've successfully registered a new connector. The window appears with the registered connector ID.

Tip

Save the Connector ID for future reference.
Open the TeamsToDoAppConnector.csproj file from the cloned repository.
In your cloned repository, go to Microsoft-Teams-Samples > samples > connector-todo-notification > csharp.
Open the appsettings.json file in Visual Studio and do the following updates.
- Replace the BASE_URL with ngork URL or dev tunnel URL.
- Replace CONNECTOR_ID with the connector ID created.
In your cloned repository, go to Microsoft-Teams-Samples > samples > connector-todo-notification > csharp > TeamsAppPackages.
Open the manifest.json file in Visual Studio and make the following changes:
- Replace CONNECTOR_ID with the connector ID created.
- Replace VALID-DOMAIN to your ngrok OR dev tunnel domain excluding https://.
Press F5 to run the project. A web page opens.

Test connector in Microsoft Teams

6 minutes remaining

Create a .zip file with the following files that are present in the Manifest folder:
- manifest.json
- outline-icon.png
- color-icon.png
Go to Microsoft Teams.
1. In the left pane, select the Apps icon.
2. Select Manage your apps.
3. Select Upload an app.
4. Look for the option to Upload a custom app.
Select the .zip file that you created in the Manifest folder and select Open.
Select Add to a team.
Select the team or channel name from the list.
Select Set up a connector.
In the left pane, search Teams ToDo connector in the search bar and select Configure.
Select either Created or Updated on the registration page and select Save.

After configuration, you can see notification in channel with link to Task Manager Portal.
Go to Task Manager Portal.
Select Create New.
Enter the new task details:
- Title
- Description
- Assign To
Select Save.

The message card appears in the registered Teams channel.

Tip

You can try the actionable buttons available on the message card.