Build your first Command bot for Microsoft Teams with Teams Toolkit for Visual Studio Code

foreign is going to be build your first command bot using teams toolkit for visual studio code just to introduce myself my name is Gary trinder I'm a senior Cloud developer Advocate at Microsoft and I'm focused on Microsoft 365. lots of links in in this slide if you want to get in touch with me with any questions after this session or you know just check out the things that I've been doing and sharing uh loads of links on there please do check them out and you know if you have any questions please do not hesitate to uh to just get in touch with me I'll do everything that I can to uh to help you out okay just a quick agenda uh so um first I'm going to go through what's the command bot I'm going to cover quickly teams toolkit for visual studio code for those who don't know what it is I'm going to step through then creating this first project quick overview of of what has been created for that project running a bot for the first time so we're going to see it in action and then I'm going to go back through the code and explain how it works in the way that it does and and also then show you how you can Implement new commands and before we wrap up with a summary and some resources for you to basically get started building a Bots using the teams toolkit for visual studio code and I'd really love to know what you build after this um so let's start with what is a command bot so a command bot is something that is useful to repeat repetitive commands through a conversational interface so let's say you just want to go into themes ask a bot to I know send an email to your boss you can instruct that bot through a command and run some logic that is as simple as I could probably put it there'll be lots of different use cases um but that is essentially it you have a bot with several commands that you can invoke and then get a response we're going to build this going through this session today using teams toolkit for visual studio code so for those who are not aware of teams toolkit teams toolkit Visual Studio code is an extension that you can install for the marketplace which enables you to create new projects really quickly for Microsoft teams apps and it sets up debug and also has lots of features in there for publishing that app as well to your store and also to azure there's also a team's toolkit for visual studio just to make you aware so if you're a net developer that's something that might interest you I'm not going to cover it today but we'll cover it in in other sessions and so for today we're going to be focused on JavaScript and typescript as the technology that we're going to use you'll be glad to know that is the end of the slides really for now and we're going to jump into Visual Studio code and I'm actually going to show you things um running so let's begin so like I mentioned we're going to use teams toolkit Visual Studio code quick way of installing that we can go to the extensions pane in Visual Studio code we can simply look for teams toolkit not returning the results you can click install that's it it'll install in a matter of seconds when it has installed you'll get the team's icon in the sidebar click that you can open the team's toolkit and you're going to get the options immediately and to create a new project because we're just in an empty Visual Studio code window here there's some also some samples that you can take advantage of as well so um if you're looking for ideas check out the samples and you can install those as well and and run them so let's create a new teams app uh we've got very several capabilities that we can add to our app so we've got Bots we've got tabs and we've got message extensions as well and so we're going to concentrate on the command bot for now so let's select command bot um I mentioned we've got uh JavaScript and typescript support for the programming language that you want to use I'm going to use typescript and I'm just going to select a folder on my machine for where we're going to actually create this uh this project so I'm going to give it a name call it Community call and that has started the scaffolding of the project and in fact it's done it's nice and quick so let's just take a quick run over as to what's actually been created here so let's go through the folders so we've got an fx folder in here there's some configuration files so these are used by teams toolkit as as part of um some of the uh the features that it it uses to launch Bots really quickly against your developer tenant we've got a vs code folder so this contains debug profiles so this enables us to basically use F5 in Visual Studio code to launch our bot and open a web browser and and test it out really quickly and also the debug profile so you can actually put breakpoints in code as well and then follow that code execution which is really really useful and we have our bot folder which is where our our logic is held for the bot that we're going to create I'll jump back into that for a second we'll just skip to templates folder so these templates folders uh it contains two types of templates so one we've got a template for our app manifest that we publish to teams and we've also got an Azure folder which provides us with templates uh bicep templates that we can use to deploy and provision uh all the resources that are needed to uh to have this running in the cloud and not running on our local machine so toolkit provides all of that for us which is really really great skip into the uh the bot folder so here we've got our source code um in here we've got some command handlers we've got some adaptive cards and some internal files where uh toolkit has already set up things like uh configuring out a bot um and uh and wiring up the app IDs app passwords handling all that complexity for us and what I'm going to do is we're going to jump and I'm going to show you the bot actually running and then we'll come back and I'll jump into these individual files to just explain how the functionality that I show you is is implemented in this project so I'm just going to jump to a project that I've already created just quickly jump back so here's one that I've I've already created I've already hit F5 um so when you hit F5 teams talk it's going to do a number of um activities for you and it's going to check make sure that everything on your machine is uh good and valid so you've got a a supply node version um you've got everything installed on your machine like the npm packages that are needed um as well as connecting to your Microsoft 365 tenant so I'm going to show you that I've already connected to my Microsoft 365 tenant uh if I look at the team's toolkit tab so I've already signed in it's telling me that side loading is enabled which is something that we need to be enabled on the tenant uh to uh to basically launch our app and and and and test it and so this is enabled by default if you're using a Sandbox uh tenant from the developer program if you're not uh this might be something that you need to configure yourself so it's a setting in the team's admin Center that you just need to go and switch um there might be a slight delay before that uh becomes enabled um but once that's been done you don't have to redo that again for that uh for that tenant so I've already signed in so what I'm going to do is I'm going to run uh the uh the bot and we've got some profiles there for Chrome and Edge I'm going to run this in Edge so I can hit the run the debug button or I can just hit F5 on my keyboard it'll do the same thing so let's run it so this is going to run by quite quick but what this is doing teams toolkit is it's checking all those prerequisites uh it's uh like I say it's checking for node it's checking our 365 account it's checking for npm packages it's also checking and installing ngrok as well which is uh needed for for tunneling so um you don't have to pre-install that um you don't have to do anything with ngrok team's toolkit Visual Studio code we'll install it for you and launch it as well in the background so now this has launched we've got teams uh opened in the web browser and we will get the uh the app loading pane so we've got different places where we can install this to start a team or a chat or actually into a meeting as well so if you want to have a um a bot that is available in a meeting for people to kind of make invoke commands in then you can you can add this this bot to those meetings I'm just going to add it as a personal app at the moment so it's just installed for for my user um you can probably see there's some usage of it already um but this is what a command bot is uh if you go to the the text box the the bot provides certain commands so out the box we've got a hello world commandment we get this nice suggestion um as well from from the UI so if you've got multiple commands you'll have a nice list here and as you're typing um the uh the different commands that I've got available to you it will provide you with the one that matches uh your your message and what I can do is I can just invoke this I can just send the message to the bot and in this example when we send hello world uh it will reply with an Adaptive card and also it will uh reply with the uh I think yeah it replies with the uh the text as as well in there with using adaptive cards you've got the ability to add actions as well and so these are just buttons that go to URLs at the moment but you can imagine if you want to invoke a uh a command that maybe has a form or you want to send some information somewhere this is a a you know a use case of using a a command bot you're just invoke in some functionality uh by by sending the bot a a message so I'm going to quickly jump back to visual studio code now and let's take a look at the code um to show you how this is all set up so first I'm going to go to the internal folder and go to the initialize file now this is where our bot is defined so um convention that our bot has been set up for us by teams toolkit it's gone away to the bot framework service it's registered a bot in that service as well it's pulled the ID and the password for us and basically inject that into this this new object what we've also got is further configuration so we there's a command property uh that allows you to include different handlers so a Handler would be a Handler for a particular message that comes in if we take a look at the hello world command Handler which has been created for us we can see that there is a class hello world command Handler which is uh in implementing a an interface from teams FX teams FX is a SDK that's basically provided us with a layer of abstraction over the bot framework it's making it easy for us to to create new commands using this team's FX class so one of the things that this class allows us to do is allows us to define the trigger patterns so if there is a message sent to this bot that matches this string it will run the handle command received function and that will be where our logic will uh will will fire so this trigger pattern actually uh it can accept a string but it can also accept regex as well so you can have you know a command that could be fired by different uh different words at different times and so it can be really flexible if we just take a quick look at the handle command received function so we can see that we're logging out that the bot received a message so we do actually get the message back if we take a look at that so we can see the actual text that was sent to us and also matches as well so let's say for instance I did hello world and a name at the end we were able to pick out the different values that have been sent through on that command so you could you know easily have a command that accepts a a parameter and then use that within your logic foreign so the next thing that this spot does is that it's actually going to send an Adaptive card back and the way that it does that is that it can use this message Builder from teamsfx again um and we have a attach adaptive card method where we can pass in our uh hello world adaptive card and some data with it as well so we have this variable here with title and a body and we're going to send that to our bot along with the Adaptive card definition which is held in this Json file here so we can see that we have placeholders for title and for body and we've also got actions in there to open URLs in teams and so there's various different actions that are available in adaptive cards so you can have execute for for forms as well um but this example it's just using open URL for the moment so this might be great for let's say I know a q a bot uh you want to ask a question you get a response you have some buttons provided that take you to a documentation page people can then fire their answers from so if we look at the implementation of these so we've we've got uh our Handler um our Handler knows that it is triggered by a particular pattern in this case Hello World one thing that we did see was we had suggestions so when I went to the uh the text box the compose box it actually came up and said oh here are some suggested commands that you can uh that you can use so those are defined actually in the app manifest endpoint so if we go to templates uh app packages and manifest template.json we have here a command list um array and in there there is a a command array is where we can Define our commands that are available and so this this list here this array is the list of commands that you want to be able to show the user of your Bot um quick examples of you know what messages can you send and what functionality is going to be provided so you can just simply add in new ones and new handlers just add in a title and a description and then when that next gets uploaded to um the teams that will be available as a new suggestion so if you're wanting to let's say Implement new command then the way that you would do that is you would update those uh two different locations um in um in in our source folder so first we would come to initialize we would add our new Handler in here foreign something like this and we would actually create a new class that implements from the teamsfx bot command Handler and we'd add in the trigger patterns add in the handle command received and then that would be picked up and that would be a new command that users would be able to to use so the way that um Team stalker has provided us with really the the basics of how do we register new commands how do we invoke commands what suggestions are available to to users and how do we you know how do we send data back to the user is is all handled quite nicely through this command Handler and through the handle command received function and using the attach adaptive card method to then send you know a nice adaptive card rack if we didn't want to send an Adaptive card we can also just send text so we have something called the turn context which is provided for us and we can send an activity back which can just contain plain text so we can actually keep sending messages as well um so as part of you know the uh the functionality of this command uh you could just have you know single line messages and then provide an Adaptive card um as well for users to to actually follow okay so that really covers the basics of getting started with a command bot so let me just quickly jump back to my slides so I just want you to to Really summarize uh kind of what we what I'd shown um so you know command Bots are a great way of being able to automate those repetitive tasks through that conversational interface so you know rather than having a button on a page maybe something that's a bit more interactive like a bot and that you can use as you know maybe like your personal assistant to just say you know but do a particular action and that's that's a great way of being being able to implement that and it's the starting point as well for you know a q a bot a more advanced conversational but adding um cognitive services like Lewis as well and to really kind of enhance that but at its basic uh implementation level it's a user is inputting something that the bot is then reacting to with some you know certain logic whether that is displaying uh information through an Adaptive card are actually capturing information uh back as well um so I've shown you teams talk it as provide the quickest way to get started developing certainly these command Bots and and just teams apps in general you should I showed you how quickly uh and easily it was to just create that initial project and then get that running um as well using F5 and also that teams FX is providing this layer of abstraction to simplify working with the bot framework so you were able to just create a single Handler and Define the trigger pattern and that would invoke the logic in that command and then how that was wired up with the the bot definition as well um and yeah again theme store kits kind of handling a lot of the complexities there just making it really easy so you can focus on what your command needs to do so resources so there's plenty of resources on docs so definitely check out teams toolkit overview and so whether you are interested in in the visual studio code extension or even the visual studio enhancement as well and then definitely check out that page so everything is provided on there with some quick starts about creating a new teams app and there's also more on teams FX SDK so that is on GitHub definitely check out the repository and the docs there's lots of information down there and samples as well um about you know how you can take this further extra things that you can do with the the command handlers and finally just want to say thank you very much and I think we jump into the questions I can see Victor's already in there there's lots of activity in there so I don't know if there's anything that hasn't been answered I'm just quickly jumping back through I think most of it's already answered there's a couple like more governance questions like around you know how to manage this these many Bots and there was one about moving from Dev to prod and I think Victor is actually communicating some of the you know communicating answers to some of that or at least give some suggestions yeah I think I found one question from Scott are there Enterprise supported options not using anger up so I would say that as um you may be working for an organization that can't use ngrok so at the moment there isn't um in the visual studio code extension and it is very opinionated in that it uses engrock however it is on the roadmap to use other tunneling services so this is something that definitely the team are aware of and are actively working to to provide an alternative but at the moment uh yeah if you're using the visual studio code um version uh it's tied to uh engrock yeah I think there's two other interesting questions the first one I partially answered but it was about where do you place the logic for your command bot if you just don't want to show that card but you want to have some business logic or whatever where would you do do that and the second one is uh do we require actual app services to run this uh house everything being set up essentially so I can answer the second one quite quickly um so one thing which I I didn't actually mention was the implementation of of that uh bot so it that project template uses uh restify as part of its implementation which means it will need a an app service to uh to to run when you revision that and deploy it to azure so that will just need the um like say a normal app service in fact the the bicep files there's I think it uses B one of the dev test skus uh to provision that app service for you so that is something that you need it doesn't use it as your functions um you definitely need that that app service in terms of the the logic um in terms of uh so where will the where will the data save so at this the out the box um there's conversation history which is saved in memory that's something that when you move to production you're going to need to add some persistent storage easiest way to do that is using Azure Cosmos DB or table storage and to save that that conversation uh data to um but at the moment that that bot is is very much just it's running in memory nothing saved anywhere so that's something that you would have to look into and Implement yourself however saying that team's toolkit does have a feed feature so there's an ad features get wizard in there which gives you options to stand up a SQL database and Azure functions as well in your project so it's a bit more advanced from what I was going through today it was very much a how do you get started and but if that's something that you're really interested in then that's something that we can definitely look to cover in another call as we start to delve into you know going past the just getting started and creating your your first project um so you know if any feedback like that definitely want to hear it you know we want to do kind of sessions that are going to help you progress using teams toolkit so uh yeah just uh get in touch absolutely that is a fantastic demo fantastic messaging [Music]

Channel: Microsoft 365 & Power Platform Community

Views: 6,661

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Teams, Teams Toolkit, Visual Studio Code

Id: 3skgtkJ1McQ

Length: 26min 15sec (1575 seconds)

Published: Tue Nov 01 2022