In the previous post, we built the Bot, tested it locally in the emulator, created all resources in Azure and also deployed the Bot to the web service in Azure using ARM templates and Key Vault (separate post).
In this second post, we will continue with the Bot and run it from within Microsoft Teams. From localhost with the help of ngrok and from the Azure deployment.
Just for fun, we will add an @mention in the echo when the Bot is in Microsoft Teams.
Here is the finalized source code. https://github.com/simonagren/simon-blog-bot-v2
Last time we created a resource group in Azure that contains the service plan, the web service that runs the Bot, the Bot channels registrations, and the Key vault.
There are possibilities to utilize Microsoft Teams context to receive information about the specific Team or channel where the Bot is installed. You could also get information about the user(s) in a chat.
We will add a few imports, and change the onMessage method to call the _messageWithMention method, that adds a @mention if we are in Microsoft Teams.
import { Activity, ActivityHandler, ActivityTypes, Mention, TurnContext} from 'botbuilder';
In the previous post, we only sent the and echo of what the user wrote. Now we add an if-statement to see if we are in Microsoft Teams or not, and if we are, we call the function to do a @mention and pass in the context(TurnContext).
this.onMessage(async (context, next) => {// If we are in Microsoft Teamsif (context.activity.channelId === 'msteams') {// Send a message with an @Mentionawait this._messageWithMention(context);} else {// Otherwise we send a normal echoawait context.sendActivity(`You said '${ context.activity.text }'`);}// By calling next() you ensure that the next BotHandler is run.await next();});
We receive the context (TurnContext) from the onMessage method calling this method.
We first build a Mention object, which is an Entity. A mention object consists of three properties:
Then we build a Partial\<Activity> object. There are plenty of properties, and we will only use a few:
Entity
, and here we add the Mention
object we created.mention.text
with what the user wrote context.activity.text
ActivityTypes.Message
to get the correct value.This is how the method looks like:
private async _messageWithMention(context: TurnContext): Promise<void> {// Create mention objectconst mention: Mention = {mentioned: context.activity.from,text: `<at>${context.activity.from.name}</at>`,type: 'mention'};// Construct message to sendconst message: Partial<Activity> = {entities: [mention],text: `${mention.text} You said '${ context.activity.text }'`,type: ActivityTypes.Message};// Send the message with @mentionawait context.sendActivity(message);}
Okay, cool. Now we need to try this code change in the wild.
We will run the Bot locally and it will access the Channel Registration in Azure.
We created an Azure AD Application registration last time we deployed the resources, and the channel registration is using that clientId and secret. We will use this going forward as well.
First, we need to change the variables in the .env file and use the clientId and secret.
The Bot that is deployed and running in the Azure Web Service also has these as environment variables in the application settings.
When using a Bot in Microsoft Teams we can’t use HTTP anymore, we need to utilize HTTPS. And for that, we are going to use the tunneling service ngrok.
This means we can have the Bot running on http://localhost:3978 as normal.
Spin up ngrok and then copy the https value.
ngrok http 3978 --host-header=localhost
Open the Azure Portal, go to your resource group and then the Bot Channels Registration we created. Change the Messaging endpoint value from pointing to the Azure Web Service, to the value we copied from ngrok. And don’t forget /api/messages
In the channels tab press on the Teams logo to configure the Teams channel registration.
You can now start the bot locally with
npm start
If you press the Teams icon from channels it will open the Bot inside of Microsoft Teams.
Now it should be working fine within the context of Teams. The Bot is running locally and sending messages via the Bot Registration in Azure.
Oh, this post is getting long…
You need to know how to install the Bot in Teams as well!
We will use App Studio but you could also create the manifest manually. Read more here. If you haven’t already installed App Studio, look at the prerequisites and there’s a link.
This is a generic Microsoft Teams App that we are creating, and then we add a Bot to the application, so the process would be similar if we were adding a Tab.
Now we will change the message endpoint to point to Azure again and skip ngrok. Feel free to shut down the local running Bot and ngrok.
Go back to the Azure Portal, go to your resource group and then the Bot Channels Registration we created. Change the Messaging endpoint value to the Azure Web Service URL and save.
This will automatically change the message endpoint in the Teams App.
Remember that we haven’t re-deployed the Bot to Azure. The updated version is running locally. Don’t stress is, we will primarily work from localhost, going forward.
Have a look at the previous post regarding how to .zip deploy the Bot again, if you want.
In the next post, we will look at dialogs, prompts, and validation.