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.

    Implementing Teams Bot With Yo Team

  5. Click Create.
  6. Fill in the details to create Bot channels registration.

    Implementing Teams Bot With Yo Team

  7. Click Create.
  8. The new Bot channels registration is ready.

    Implementing Teams Bot With Yo Team

Get the App Id and secret

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

    Implementing Teams Bot With Yo Team
  1. Click Microsoft App ID (Manage).
  2. Under Certificates & secrets, create New client secret.

    Implementing Teams Bot With Yo Team
  1. Note down the values for future reference.

Configure MS Teams Channel

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

    Implementing Teams Bot With Yo Team
  1. 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
  1. Follow the wizard to set up the bot solution.

    Implementing Teams Bot With Yo Team
  1. On the command prompt, type code . to open the solution in visual studio code.
  2. Follow README.md to configure your Bot in Azure.
  3. In the .env file, configure application ID and client secret.

    Implementing Teams Bot With Yo Team

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
  1. In the Azure Portal, open our Bot Channels Registration.
  2. Under Settings, update the Messaging endpoint, as per generated by ngrok.

    Implementing Teams Bot With Yo Team
  1. In the browser, open here.
  2. In the next browser tab, open localhost:3007, which is default local endpoint listening for request for your custom bot.

    Implementing Teams Bot With Yo Team

  3. ClickAdd to Teams.
  4. Test the bot by sending messages.

    Implementing Teams Bot With Yo Team

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.

    Implementing Teams Bot With Yo Team
  1. Add the following keys in the Configuration > Application Settings.
Name
Value
WEBSITE_NODE_DEFAULT_VERSION
8.10.0
SCM_COMMAND_IDLE_TIMEOUT
1800
  1. Go to Deployment Center.
  2. Choose Local Git as source and App Service build service as the Build Provider.
  3. Choose *Local Git* as source and *App Service build service* as the Build Provider
  4. Click on *Deployment Credentials* and store the App Credentials securely
  5. In your tab folder initialize a Git repository using `git init`
  6. Build the solution using `gulp build` to make sure you don't have any errors
  7. Commit all your files using `git add -A && git commit -m "Initial commit"`
  8. 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.
  9. 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.
  10. Wait until the deployment is completed and navigate to https://yoteamsbasicbot.azurewebsites.net/privacy.html to test that the web application is running
  11. 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.