Microsoft 365 Community Microsoft Teams, 18 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build your first Command bot in C# for Microsoft Teams with Teams Toolkit for Visual Studio

Description

In this 20-minute developer/designer focused demo, Ayça Baş starts at the beginning installing Visual Studio 2022 and Teams Toolkit, launching Visual Studio and creating a new command bot project. Follow the Quick Start configuration instructions installed with Toolkit and then add bot to your Teams chat. Type “helloWorld” to trigger initial response from your bot! Deep dive into the provisioned code and see places for potential modification. Use command bot with QnA Maker to deliver large Q&A solution quickly. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 18, 2022.

Demo Presenter
• Ayça Baş (Microsoft) | @aycabs

Supporting materials
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio
• Documentation – Install Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode&pivots=visual-studio
• Documentation – Create a new Teams project | https://learn.microsoft.com/microsoftteams/platform/toolkit/create-new-project?pivots=visual-studio
• Documentation - FAQ for Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/faq
• Tool - Join the Microsoft 365 Developer Program today! | aka.ms/m365/devprogram

Related demos
• Demo - Build your first Command bot for Microsoft Teams with Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder | https://youtu.be/9VcJNSOAOjU?t=1479

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Foreign hi, everyone probably met most of you in the community, but if I haven't met with you before, my name is Aisha bash I'm, a senior Cloud Advocate at Microsoft and M365 advocacy I'm based in Dubai and I love, Building Solutions, including Microsoft graph Microsoft teams, and my background is also Azure. Before joining the advocacy. I was a premier field engineer at Microsoft, so I also worked a lot with Azure functions, Bots and everything related with developer services on Azure. Pretty much and I share a lot on Twitter and Linkedin.

A

If you're interested in connecting and sharing what we learn uh between each other feel free to connect from the socials as well. Today uh the search agenda first off we will talk about teams toolkit for official Studio I will show you how you can install the teams toolkit for visual studio. We already had a session about that, but if you missed that, don't worry about it.

A

I'm, just gonna show you how you can get started with it, and then we will create the First Command bot by using the teams toolkit for visual studio, and after that we will run the bot on teams.

A

I will just walk you through the code a little bit, how we run the Adaptive card and how basically the bot looks like on visual studio and afterwards we will just take a look at how we can implement the new comments and which part of the code we need to basically add more and so on, and then finally, I'll share the resources with you. If you're interested in the comment Bots with teams toolkit for visual studio code last week, my colleague Gary actually demoed about comment Bots.

A

Where teams took it for visual studio code, you can check out his presentation in the community YouTube channel and you will learn more how you can do the exact same thing on Visual Studio code, okay, so let's get started with the team toolkit for visual studio, so I already launched the installer. If you know the visual studio, we need to post off install the visual studio. 2022 and then, if you modify, if you haven't installed teams toolkit yet, then we actually have under the asp.net and web development. You will see Microsoft teams, development tools.

A

If you install this as well, then you will get all the required debugging items and as well as creating teams, app tools with this, and once you install this, you are pretty much good to go. I already did that and I'm just going to close the step. Okay, I started running Visual, Studio 2022 and the first thing we will do is creating a new project.

A

Once you you've also installed the Microsoft teams development tools, then, when you search about teams, you will see this item coming automatically, which is a project template. You can create a project by for Microsoft teams, just selecting this and then next it automatically did that in the previous one, so I just got get back. Okay, let's say Community called.

A

And then I'll just create this now I need to choose what kind of what type of teams that I want to create. We have notification, Bots comment, bot, Tab and messaging extension. We already talked about notification bots in the previous commentary calls, and we also show how to build tabs in the visual studio with the team still kit. Now today we will just talk about the comment bot first off to start with what is command bot, it's actually the simple version of the bot.

A

It is when you write something bot replies back with the response: it's a pretty much Hello, World style bot. When you say hello, it says hi back and you can edit the responses. Accordingly, it's really good practice. If you have bunch of FAQ questions, especially if you want to use q a make recognitive service in your Bots, then comment. Bot is a really good place to start with, with the team's app development.

A

Let's create this, and then we will talk more. What comment bot is, if you haven't tried this before it already comes with some question type and not exactly question, but the comment to trigger the answer, and then it also provides you an answer with an Adaptive card. It's also pretty good. If you're, starting from scratch, you heard when you first run with F5 you'll, see some results and afterwards you can deep dive in the code and understand how the code structure works.

A

Okay, so the good thing is when you first start off: if you're new, there's a really good get started text file, it says that download and install and rock, if you I, don't know if you work with engrock, but it is providing a tunneling a resource if your Bot is not published. Yet you will have to create this tunnel in the background, so you will have to run and rock with HTTP 5130 I already have engrock and I need to run this before I prepare my bot for the dependencies.

A

Let me just select and rock and um if you're new, to engrock concept, you can actually search for help and it will bring all the resources that you can call for the engrock all the types you can create a tunneling and so on. For us we will just copy paste, engros HTTP 5130, and then it should work for us.

A

Okay and it's free I haven't paid anything. It's just running tunneling, localhost, 51 30 for me and then I will start preparing my bot okay. So it already says in here when you run and rock just go ahead right click to uh the project and then select teams toolkit and prepare teams app dependencies. Let's do that and it also says sign in with Microsoft 365 account for the teams organization. You want to install the app to let's try to do that.

A

I will right click to project teams, toolkit and then prepare teams app dependencies over here. It brings me enter 65 Advocates account I already have. This is the account I created as a demo account if you want, if you don't want to test teams app on your company account or school account, it's the best to just go to enter 65 developer program and create your own account to test out this style of apps it's for free and it creates you a Sandbox to play around with bunch of users and emails and so on.

A

It's it's a really good development environment. I will continue with this and I. Will let my bot prepared in My Demo account it automatically registers the bot in the active directory, so both provisioning is also done for us. We don't have to worry about going to Azure and creating bot registration and registering it so on and so forth. All of the preparations are done for us through the teams toolkit. You want to check out what is provisioned. You can take a look at the code. We will do that in a second.

A

Let's, just first try the app and see what it is providing and lastly, it says over here that press, F5 or select the Box start debugging and don't forget. We have to say hello world to trigger the response in here. We will just need to click this button and you can choose the browser of your choice: I'm going to choose Microsoft, Edge and click over here.

A

This will automatically start running teams on Microsoft Edge, and then it will come with already authorized user. I chosen the preparation, you remember, it's ultrabash at enter, 65 Advocates account teams comes with the login user and when it is ready it will pop the app that we would like to run. We will just click on ADD and then app will start running on our personal chat. If you want to change that, you can also just test this out in the channel or group chat, so on so forth.

A

Okay teams is already running and our app is ready to test. Now we can add this and test it out here. We already know what we will say to the bot as a trigger it's hello world, but we don't know the outcome. Yet I will just test it out first and then I will show you where the response is coming from, and here we already have suggestions.

A

This is a great thing if you were starting from scratch, or even for your users, it's great to provide a suggestion so that they're not confused what to do in the first place. I will just send hello world and expect bot to respond back with a message.

A

um Hopefully adaptive card yeah. So we have an Adaptive card here, ready. It's saying: congratulations, your hello world bot is running and it provides two links once uh one of the links will go to both framework docs and the other one is the teams toolkit docs, which is great. You can exactly do the same thing for your own questions and answers, and as I mentioned, this is really useful comment. Bot is really useful when it comes to using q a maker with it.

A

If you have bunch of bunch of questions on your website, you can literally copy paste the link of your website. Q, a maker will generate automatically questions and answers for you. You will just need to use the Q a maker API in your comment box and you're good to go all right, let's deep dive in the code. This is pretty much what we can do so far, because we didn't edit the bot. Let's understand where the response is coming from.

A

First off I'm, just gonna close this, and so here we have commands and we have Hello World comment handlers. Yes, this is the place we actually rendered it uh adaptive cards and we read the adapt card as a response to the trigger. As you can see here, we have trigger patterns. This is where we Define the trigger for our comment. Handler here we say hello world, but we can literally change this to Ping and then, when we write ping, then what will respond back with um answers of the Adaptive card?

A

It is defined as hello world.json and it stays under the resources over here. Let's quickly take a look at the Json, so this is the Adaptive cards template we are using. They literally have title uh description which is defined as buddy, and we have two buttons over here, but if you want to create your own adaptive card and if you don't want to write uh by hand manually, you can just go to Adaptive cards.io and you can there's also a designer. You can drag and drop buttons and descriptions.

A

You can literally build your own adaptive card and the only thing you will need to do is just copy paste of the Json file over here and then the Handler will mainly read your own adaptive card when you define it over here once we trigger the command bot with hello world.

A

Let's scroll back down- and here is the handle- comment async. This is the part that we handle the comment um and, as you see, you're actually logging the message of the user, a message. The text in here is user's message, which is hello. World I already wrote hello world in a it is logged by uh the bot or code, and after that, once we are done login. We will just read the Adaptive core template, which is a template we defined on top over here.

A

A hello world card and it should be defined, uh yeah, adapter card file, path, yeah, it's defined over here adaptive card template and then render the card content and we are able to fill uh the card content by ourselves. That means that if you want to reuse the same adaptive card template hello worldcard.json, the only thing you need to do is just creating multiple models like title and the body and- and you can give different responses to the different questions in here.

A

It says title your hello world bot is running, but then, by defining a new trigger on top, you can literally just have a new model by using the same adaptive card. You can just give another response to the user. It means that if you have, let's say hundreds of different answers to hundreds of different questions, you don't have to create different adaptive cards for each and every one of them. You can literally pass and render the same adaptive cardboard just defining the parameters, and we built the attachment.

A

That's the microsoft.card Adaptive, and uh this is a classic file, calling the Adaptive card, and then it will just send the response and if I need to walk you through the rest of the code, we actually have dot effects file, which we have the states of the user when we right click to the bot and go to teams toolkit and prepare teams app dependencies. It literally creates this local dot user data, which includes all of the active directory and the bot provisioning information about my bot.

A

And if you delete this, you will have to regenerate and prepare the dependencies from scratch. It's important, because if you want to remove the Bots and test it out as from scratch like Incognito, you will have to delete this and test it out again. Let's close the comments, because we know hello world comment handlers. Yes already, we have the what controller over here, which has two logs. We are keeping the conversation and the Bots pretty much. We are passing two of them.

A

These two are quite important for us and we also have model if you want to design a new adaptive card and pass new information. Let's say instead of title and body, you can pass username user, ID user, email address and stuff. You will just have to create a new adaptive card and then a new model for your adaptive card. This is only used for filling out the information that we Define in that episode card. As you can see, we use dollar sign and the title dollar sign curve record and body.

A

We can reuse the same card again again. Finally, we have the templates. One template is for app package, which includes our manifest for teams, and then we have app resources. uh It is totally changeable if you want to define a image for your own teams app and if you want to change the Manifest for your teams up, you can do it from here and we have Azure. This has all the provisioning biceps for bot service identity, web app and also we have teams FX.

A

We need to handle all these I'm just showing, but these are the parts that are already automated with biceps. So when you run the app dependencies for your Bot, so sorry when you right click to the bot and then teams toolkit and then prepare teams app dependencies, these parts are all handled by the teams. Okay, you don't have to worry about setting up any of these.

A

The only thing you have to do is just running ngrok in the right port and you're good to go, and this is pretty much it so the if, if you would like to add new comment into your Bots, you can add a new command class easily in here and after that, you will have to either reuse the same NFL card or create your own adaptive cards and you can edit in the resources, and we will need a model for your adaptive card.

A

But after that you're pretty much good to go and you can Define your own resources. What I recommend highly if you already practice comment bots on Visual, Studio, Visual, Studio code, I, highly recommend you to test out comment bot with the Q. A maker this will make a big difference in terms of defining thousands of questions and thousands of answers. It automatically gets all the questions and answers from an Excel file or website, or some other place that you can copy paste the URL and it will Define all the questions and answers.

A

You can just call the API in your comment. Handler and that's all. You can use the same adaptive cards pretty much for thousands of questions and answers, and it will look pretty nice, I think the soul, excellent.

B

That was a lot of stuff. I checked, so really really cool and good to walk through this scenario as well. So now we have two different, uh create demo, videos, first from Gary and then from I shop on the different scenarios, but one was for the donut node.js and vs code, and this one was the result. Studio code ID is so really cool to see that getting G8 as well awesome stuff. Thank you.