From the course: Developing for Microsoft Teams
Source code - Microsoft Teams Tutorial
From the course: Developing for Microsoft Teams
Source code
- [Instructor] Let's look at the source code of this bot and just a few files have been scaffolded out for us. So, there's a manifest file, of course, in the appPackage. Let's look at that first. And it's just a fairly normal manifest file. But if I scroll down here, I get to the bots and there's a botId on line 28. And you'll notice that unlike tabs, it doesn't have the endpoint URL that we're going to call. It's actually this botId, that's the key thing. And that's actually going to be defined by our bot registration service, which is what we set up in the Teams Toolkit bot management if you remember. I go back to this. So, here is the app ID. So, it was check is 7c14, and this is the same one. And then if we scroll down and that's where we set the endpoint address if you remember. So, that's what really ties things together. It's the bot registration service that ties the botId to the end point and also to the Teams channel or any other channel for that matter. So, that's the rooting the connection between our service endpoint and Microsoft Teams. So, to be clear, even if you choose not to use the Bot Framework library in your implementation, you still need it set up in this bot registration service. Going back to the manifest file, it also defines the scopes within Teams that the bot can appear in as well as a list of commands it can handle. So, the scopes is really saying where the bot can appear and you know we can adjust that according to our requirements. And then the command lists are really just a helper for the user. So, if you remember, when I started or mentioned the bot, it popped up a suggestion. Here's what you can type Hello. That's coming from this in the manifest file here. Now, in fact, we get commands for, let's just open these up, a scopes personal. I get the command Hello and a description. And then I get the scopes team. I get exactly the same thing and I get scopes groupChat and you might be tempted to think maybe I can get rid of these two down here for team and groupChat and just add them to this scopes here, because it's a array, right? So, I can add groupChat, and IntelliSense let me do that. Now, I've tried this, it doesn't work for some reason. So, it's probably best to use the form that it specified. And if you want to change it, you can also go into the App Studio for example, and modify the manifest there. And that will make sure that it's going to match the way that the teams extensions have been coded. So, I've got a source file here as well called index.js. And it's in JavaScript of course. It's a bot application using Node.js or it's essentially, a web service using Node.js and using a JavaScript library called Express, which is being brought in here on line eight. And that implements a web server. And you can see from the code, it's only a couple of hundred lines, not even that, probably about 120 lines total in index.js. And this bot activity handler, which we'll look at in a second. So, further down here, Express listens on the portlet we specified and there's listing on this endpoint API messages for a post. And when that comes in, it will process it using the botActivityHandler. So, if I look in botActivityHandler.js, you can see this is using the Bot Framework because it's derived from the TeamsActivityHandler that's coming from the Bot Framework, which is this require botBuilder that you can see here. So, the main thing in botActivityHandler is this, onMessage event handler. So, when the framework gets the message, which we saw in the index.js file, it will then do this switch on the message text. So, this is fairly crude. And if it says, Hello, it calls this mentionActivityAsync down here, which is going to send that mentioned back and it's getting from the context, the name of the user. So, that's how it's able to return my name, when I type hello. And if I type anything else, it would send back a card, which is a way of presenting a little bit of user interface to the user, so it's all that as well. It says Let's talk and there's a button on here, which is defined in this card. So, that's what it does at the moment. Now, the Bot Framework is Teams aware. So, if I add another event handler on here, I can say this dot, and that's a wrong place, let's do it up here a bit easier to see where we are. So, I've got the onMessage handler. I can also say this dot and I can see I've got a lot of message handlers here. So, some of the interesting ones are on a ReactionAdded. So, if somebody reacts to a message, you can get a notification here and act on it. Or if somebody created a team or added a member to a team, you can get notified and take an action. So you might, for example, want to send them a welcome message when they joined the team. So, a lot of possibilities there to do more than simply act on messages, but act on other events inside the team or conversation or whatever it is. Now, we've been using JavaScript in here. So, we can also use C# and .NET. That's easy too. There are C# versions of these Bot Framework libraries, of course. And in that case, if you're using .NET, you'd probably be working in Visual Studio rather than Visual Studio Code but structurally, the code is very similar in C#. So, this is a fairly simple example of course, here, this hello world example, do you could probably manage to code this without using the Bot Framework. But as things get more complicated, the Bot Framework really makes building bots much, much easier. And for example, if you look at this message handler and as we said, we have to have this exact string in here. So, if I say something like, Hi there to the bot here, that's not going to be able to figure out that means the same thing but you can use some of the incredible features of Azure Cognitive Services, like the language understanding service that can do this kind of thing by deducing a user's intent without them needing to phrase things exactly. But that's really beyond the scope of this course but the Bot Framework makes that a lot easier to add those. Now, we've also got this environment file here, which we haven't really looked at. That's got the BotId, the usual 7c14, et cetera. BotId and also that password, the BotPassword. And now this isn't to do with the bot registration service, it's to do with Azure AD app registration. So, two things, we've got bot registration service to connect to teams and Azure AD app registration that's used to provide the API security and those were both set up automatically for us by the teams toolkit. Let's make this a little bit more interesting by adding another command here. So, I'm going to go to my botActivityHandler and I'm just going to add another case statement here. And this one will be called Show and I'll make this the showActivityAsync. And so now we've got two options, two things we can type in Hello and Show. And I'm going to go down here and add another method. Let me just copy that a little bit of code there and create another handler here for that, for when we get Show. And what we'll put in here is I'll say const.replyActivity equals, and then there's a thing called message factor, which we used up here. In fact, this is going to be pretty much the same code as this, let me just copy it and paste it down here, except I'll say, Searching for pics for you. And then I just need to send that back, so that's just context.sendActivity. So, I can copy that bit of code as well. And that should work if I got everything right, should send the reply activity, I think that's correct. And so this will now handle this additional command Show, but it won't prompt like it did with Hello because we haven't made any changes to the manifest file to support that. Now, I'm going to have to restart this. We'll restart it any way because that also gives me an opportunity to show you that when I do a restart, it will stop my tunneling, local tunnel. So, I just need to start that up again as well. So, that's running. So, I've got the bot service running. So, if I go to Teams now, and we go to the picbot2 and so far it responds to Hello, so just type in Hello again to make sure it's still working. And that wasn't what I expected. That's what it should say when I type Show. So, we made a mistake somewhere. So, that didn't quite work. So, I'll just do a bit of live debugging here, TypeError: this.showActivity is not a function, this.showActivityAsync is not a function that put this in the wrong place. Async, mention, I didn't change this to Show, so that's my error. Restart this. So, npm start. That's running, start the proxy again and let's see if we can get this working. So, Hello is working normally. And then if I type in a Show, the new command works and it says, Searching for pictures for you. So, all good. We've got that working. So, I know a lot of people have been put off building bots because it's kind of tricky to set up and get working. But as you can see, we can use the Teams Toolkit extension to do the setup. And then it's really not that complicated.