Implementing Teams Bot With Yo Team

Overview

 

Yeoman Generator for Microsoft Teams is a useful development toolkit for Microsoft Teams development. It uses TypeScript, React and node as primary technologies.The generator allows you to simply create and scaffold projects for Microsoft Teams features.

 

In this article, we will create a Bot using Yo Teams.

 

Prerequisites

 

Install Yeoman, Gulp global command line interface and Typescript compiler globally using NPM.

 

npm install yo gulp-cli typescript --global 

 

Install generator-teams globally using NPM.

 

npm install generator-teams --global 

 

To install preview versions of the generator, run below command.

 

npm install generator-teams@preview --global

 

Register Bot in Azure

 

Firstly, we need to register Bot in Azure to get the App Id and secret and configure the endpoint URL.

1. Open MS Azure Portal
2. Click Create a resource.
3. Search Bot.
4. Select Bot Channels Registration.
   
   
   
   
5. Click Create.
6. Fill in the details to create Bot channels registration.
   
   
   
   
7. Click Create.
8. The new Bot channels registration is ready.
   
   
   

Get the App Id and secret

1. From left menu, click Settings.
2. Add Messaging endpoint as ngrok URL.
   
   
   

3. Click Microsoft App ID (Manage).
4. Under Certificates & secrets, create New client secret.
   
   
   

5. Note down the values for future reference.

Configure MS Teams Channel

1. From the left menu, click Channels.
2. Click Configure Microsoft Teams Channel.
   
   
   

3. Follow the instructions to configure MS Teams channel.

Yo Teams to scaffold the solution

 

We will generate a Bot solution using Yo Teams.

1. On the command prompt, type the below command.
   
   yo teams
   

2. Follow the wizard to set up the bot solution.
   
   
   

3. On the command prompt, type code . to open the solution in visual studio code.
4. Follow README.md to configure your Bot in Azure.
5. In the .env file, configure application ID and client secret.
   
   
   

Understand the source code

 

The file “src\app\yoTeamsBasicBot\YoTeamsBasicBot.ts” implements actual logic of your Bot. The onMessage event helps to evaluate text from user.

 

The folder “src\app\yoTeamsBasicBot\dialogs\” contains the dialogs being used by Bot to respond to the user. We can also use the Adaptive Cards to send messages to the user.

 

Test the Bot

1. On the command prompt, run the bot solution.
   
   gulp ngrok-serve
   

2. In the Azure Portal, open our Bot Channels Registration.
3. Under Settings, update the Messaging endpoint, as per generated by ngrok.
   
   
   

4. In the browser, open here.
5. In the next browser tab, open localhost:3007, which is default local endpoint listening for request for your custom bot.
   
   
   
   
6. ClickAdd to Teams.
7. Test the bot by sending messages.
   
   
   

Deploy Bot on Azure

 

Follow the instructions from README.md, section “Deploying to Azure using Git” to deploy the Bot on Azure.

1. Open Azure Portal.
2. Create Web App.
   
   
   

3. Add the following keys in the Configuration > Application Settings.

Name	Value
WEBSITE_NODE_DEFAULT_VERSION	8.10.0
SCM_COMMAND_IDLE_TIMEOUT	1800

4. Go to Deployment Center.
5. Choose Local Git as source and App Service build service as the Build Provider.
6. Choose *Local Git* as source and *App Service build service* as the Build Provider
7. Click on *Deployment Credentials* and store the App Credentials securely
8. In your tab folder initialize a Git repository using `git init`
9. Build the solution using `gulp build` to make sure you don't have any errors
10. Commit all your files using `git add -A && git commit -m "Initial commit"`
11. Run the following command to set up the remote repository: `git remote add azure https://<username>@yoteamsbasicbot.scm.azurewebsites.net:443/yoteamsbasicbot.git`. You need to replace <username> with the username of the App Credentials you retrieved in _Deployment Credentials_. You can also copy the URL from “Options” in the Azure Web App.
12. To push your code use to Azure use the following command: `git push azure master`, you will be asked for your credentials the first time, insert the Password for the App Credential. Note that you should update the Azure Web Site application setting before pushing the code as the settings are needed when building the application.
13. Wait until the deployment is completed and navigate to https://yoteamsbasicbot.azurewebsites.net/privacy.html to test that the web application is running
14. Repeat step 11 for every commit you do and want to deploy

Summary

 

Yeoman Generator for Microsoft Teams is a useful development toolkit for Microsoft Teams development. Using yo teams, we can easily build bots for MS Teams.