Microsoft 365 Community Microsoft Teams, 22 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

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

Description

In this 15-minute developer focused demo, Ayça Baş shows using a Notification bot to get information, i.e., weather information, from an API delivered to you via Adaptive Card. When you create a project, you will see step-by-step guidance displayed in the template. Follow it! Use ngrok for tunneling, create dependencies, F5 to run project, trigger your bot, update bot to point to desired API, replace default data in Adaptive Card with your information. Walk through code and appreciate what the Toolkit does for you. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 22, 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-code
• Documentation - Install Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode&pivots=visual-studio-code
• Documentation - Create a new Teams project | https://learn.microsoft.com/microsoftteams/platform/toolkit/create-new-project?pivots=visual-studio
• FAQ - FAQ for Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/faq
• Tool – ngrok | https://ngrok.com
• Microsoft 365 text tenant - Join the Microsoft 365 Developer Program today! | https://developer.microsoft.com/microsoft-365/dev-program
• Tool – Adaptive Cards Designer | https://adaptivecards.io/designer/
• Article – Build a stock update notification bot using C# and Teams Toolkit for Visual Studio - Garry Trinder (Microsoft) | @garrytrinder - https://devblogs.microsoft.com/microsoft365dev/build-a-stock-update-notification-bot-for-microsoft-teams-using-c-and-teams-toolkit-for-visual-studio/

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, my name is aichabash. I only have 15 minutes, so I'll try to make a quick intro and then we will jump into building apps with teams toolkit I'm, a senior Cloud Advocate at Microsoft I'm based in Dubai and I love, Building Solutions across Microsoft cloud, using graph teams and Azure. If you are interested in learning more what sort of content I'm working on or the solutions you can follow me on LinkedIn to their old GitHub, you can also check out Solutions there.

A

Today we have a specific agenda for building a solution using teams toolkit first I'll just show you what teamsocket looks like on visual studio and then we will create a notification bot using visual studio teams toolkit for visual studio. We will run the bot on teams and then I'll quickly, walk you through how code piece work and then I'll leave you with couple of resources, and then we will jump into the next presentation.

A

um Okay, so I think next is just jumping into the demo. Let me bring a visual studio first off. If you go to visual studio installer, you will have to install um web development package and you will have to check teams development, individual component to make sure that you have teams. Toolkit is coming with with the web development package.

A

If, when you install teams toolkit whenever you want to create a new project, let's say that we are creating a new project right now, when you type teams, you will have to see Microsoft teams up as one of the project template options. I'll select this and Meanwhile we're actually creating a notification. Bot I'll just keep the name as it is, but you can change the name. You can change the location and you can also change the solution name.

A

We can create this when you're, creating a teams app. There are a couple of options available. First, one is notification, bot, which is for the scenarios where you want to get information from apis or, let's I, think the basic one I can think of is the weather API, for example, you want to receive notification every morning at 9am. How is the weather like today in your own on location? You can use notification, but to get this much get this information from different apis. There are different trigger types. The trigger can be HTTP trigger.

A

You can use asp.net core web API or Azure functions to do that. There's also different version of receiving that notification either when there is information coming from the API, so you will send that notification, information to the user or you can set a timer as I mentioned in the weatherbot every morning at 9am. You will get this information so that you will use a timer.

A

You can also build both of them in one single bot by using notification about HTTP and timer trigger, and you can also go for a comment, but today we will focus on notification, but I will I will quickly. Summarize you how the rest of them Works comment. Bot is a great scenario. If you have question and answer a type of app, you can build different types of questions and answers. I think comment. Bot goes really great when it with cognitive, Services q, a q, a maker API.

A

You can actually convert your website, q a or if you have an Excel sheet with questions and answers, you can just use the cognitive, Services API and call the API from comment button. It will drive all of the questions and answers through the comment bought on teams. Tab is basically the surface we use. It works like a web application, but it runs on Microsoft teams.

A

If you have, um if you want to, let's say, run a group tasks or if you want to build a dashboard inside a team, Channel I think tab is a great option. Great service for us to um check internally on teams and messaging extension is the extensions for the. If you, if you want to compose a message um by using adaptive course, for example, messaging extensions are great actions.

A

You can directly compose um all of the cards inside the mastering extension inside the message, and then you can run send the message directly in the chat and there are different ways you can directly create a directly send the Adaptive cards. You can either use search in the messing extension or you can use the chat message: Stitch functionality, and today we will focus on notification bot and for today's scenario.

A

I will use asp.net core web API, but if you're more comfortable with Azure functions, you can just go with Azure functions option and you can try that locally as well.

A

Let's create this and then first we will try to run the app and I will show you how it works in on teams and after that, I will just walk you through the project and the code piece and first off when, when I created the project, um as you see on the right side, we have the project, uh we have the solution itself and it comes with a really nice text file.

A

That means that when you are trying this for the first time, you will have some guidance, even without this presentation, um so first off to run this project, we will need ankrock some sort of tunneling um this functionality. I should start by saying that teams toolkit is available in both visual studio and visual studio code. In this sample we are using visual studio and.net for the visual studio code. Team toolkit doesn't require androck for visual studio version. We still need a tunneling in the background to run the project.

A

I will start with by just running engrock. I have already engrock over here, opened I installed it. If you didn't install it yet you can just use this link to go ahead and install it. I need to, as you see in the second second step, I need to run Android HTTP 5130 I'll copy this and paste it in my Android and I'll run it on the the first screen. What um just one second I'll have to make sure that oh okay I have to make sure that it's actually open, wait.

A

I need to rerun engrock apologies for repeating the same step. I, don't know why, but I copied the wrong piece as well. I think I'm just rushing because I have 15 minutes. That's all bye, um okay and Brock is over here, I'll just copy paste, engrock, HTTP, 5130 and I'll bring this back over here. The second step for us is to right click to the project and prepare teams app dependencies, I'll right click to my project and then I will go to TMS toolkit and click on prepare teams app dependencies.

A

This will automatically create some of the dependencies for us and, if you don't have M365 developer program account, this is actually the test tenant. You can get freely from the developer program I'm just using the test. Tenant we've created from Microsoft 365 developer program.

A

If you have all the permissions in your company account or work or school account, uh you're fine, you can just use your own account, but if you don't have all the permissions or setup for testing teams, apps I highly recommend you to go ahead and create a free, the testing tenant in the developer program. This one is the one I created and I'm gonna use this account for creating all the dependencies. I click continue and you can actually check what sort of things teams toolkit is running in the background.

A

For example, it's creating both code provider. It is also generating ad app for teamspot. It is creating app manifest behind the scenes, so we don't have to go ahead and create app manifest or we don't have to register an app in active directory. It's all done by the teams toolkit when we prepare all of the dependencies. Okay, so they're fine, we just completed all of the dependencies and now it's time to press F5 or just go ahead and click on the green button and run the project.

A

Let's quickly run the project and the next step will be triggering the Bots just to get a response back and we will use Powershell for that. In the example, it's guiding us how to run the query and then get the notification in the bot. Let's see our bot on Microsoft teams first and then we will invoke web requests in the API notification and hopefully get a response back from the bot okay. So now my uh app should be running once it's ready. It will pop up a browser.

A

Yep and I will have to log into Microsoft teams. It already have a login hint, so I don't have to do that. It will log into Microsoft teams for me and then pop up my notification bot app.

A

Okay, so our app is ready, I will just click add, and this will bring me a private chat with bot and myself.

A

That means that our bot will be ready to test and debug, and once we have our bot ready. The next step is definitely triggering the API so that both will bring us something that will show us something. So for that, as you remember, in Virtual Studio code, it was suggesting us to use Powershell to invoke web requests. I have a Powershell open over here.

A

I will just copy paste this and see if we will get any notification on tips. Okay, yeah. We got the notification. We first have adaptive card with the title uh company information description and a button which guides us to Adaptive cars.io. That means that whenever there is a, they never be triggered an API, we can actually get the data and we can show the data with an Adaptive card which will make it look prettier. Let's quickly check the code, how this thing works. As you see here, we are triggering API, slash notification.

A

That means that we must have a controller over here. Notificationcontroller.Cs.

A

So, whenever we are calling API slash notification- and that means that we are actually reading the Adaptive court file path, which is under resources, it's the Adaptive card called notificationdefault.json. It's under here. As you see, we have a default adaptive chord with a text block um which, with poor title, we have textbook for app name and description. And finally, we have a button with action: open URL.

A

You can create your own adaptive card by just going to Adaptive course.io, there's a designer there, you there's a designer you can use to design your own adaptive card, how you want to make it look and feel by dragging and dropping and then at the end it will generate two-way Json file.

A

Let's get back to notification controller really quickly. um So here is the place. Whenever we get to invoke in the API slash notification, we go to post a sync and we start reading the Adaptive card template over here. As you can see adaptive card file path, we read on top and after that we are basically sending the Adaptive card by just generating a new adaptive card. We are filling the information over here. That means that the Adaptive part you create is reusable.

A

You can just reuse the same adaptive card to send different messages to the end user or you can use different ones for different purposes and finally, at the end, we just uh send adaptive card and we show the Adaptive card on screen as a message. You can totally change the post. Basically, you can change the response of the bot and you don't have to send adaptive card. You can do different things in here, we're just showing you how, basically you can call an API and get a response from bot.

A

There are different scenarios you can try out, and one of the great examples of vesa mentioned at the beginning of this call is that stop bot notification scenario that my colleague Gary prepared it's available in their blogs, I highly recommend you to go ahead and check out if you're looking for a tutorial type of learning and let me quickly wrap up by sharing a couple of resources in general about teams toolkits, we have a documentation of a team circuit overview installation guidelines and how you can create your very first app by using teams toolkit in on visual studio and some of the FAQ for teams.

A

Toolkit I think these slides are available in the main slide deck. That's puts together, so you can go ahead and check the links in the main deck. If you have any questions, I will be available to answer uh in the chat as well or I. Don't know if you have any minutes to answer the questions, but I'll be available both in the chat and here, if there's any questions.

B

A

B

uh Really really cool stuff, let's from a timing perspective, let's make sure that we we go to build and we're rather early than late uh with the recordings. But if there's any questions for ishop, please use the chat as well and, as Aisha said, we'll we'll have in the blog post summary around the community call we'll have all of the links of course listed there.