Microsoft 365 Community Community Demos, 28 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build a bot using Microsoft Teams Toolkit for Visual Studio Code

Description

In this 17-minute developer focused demo, Garry Trinder invites you to step through prerequisites to create a bot for Teams and understand functions of a proactive messaging (reminder) bot in your workflow. Bot architectural components include web server, Azure Bot Service, Azure AD app registration, HTTP tunnel, and Microsoft Teams app package. In Visual Studio Code, create a Notification bot using an HTTP trigger running on Azure Functions using JavaScript. On local machine, tour provisioned capabilities. Module 2 in a 5-part series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 28, 2023.

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrind

Supporting materials
• Learn - Build a bot by using Teams Toolkit for Visual Studio Code | https://learn.microsoft.com/training/modules/teams-toolkit-vsc-create-bot/
• Learn - Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code | aka.ms/learn/teamstoolkit
• Visual Studio Marketplace – Teams Toolkit | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

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

A

A

This is part. Two of a series um today is build a bot using teams toolkit for visual studio code. My name is Gary trinder I'm A Cloud developer Advocate at Microsoft.

A

Moving on um so like I mentioned. This is part of the learning path. The learning path is build and deploy apps for Microsoft teams, using teams toolkit for visual studio code. It is live in Microsoft learn if you want to go check out that now use the the short link at the bottom, which is aka.ms, slash, learn, slash teams talk it so. Last week we covered just getting started, so that was going through a team's toolkit, Visual Studio code. How you could install it and install sorry create a new project from the samples Gallery.

A

So if you didn't watch that that should be available, if not now it will be soon on the Microsoft 365 Community YouTube channel this week, we're going to be covering uh building Bots and then for next week we will be covering building tabs. Then, how teams JavaScript library integrates with some of the projects as well and finally we're going to go through how to deploy and publish your app to to your team's tenant, using uh visual teams toolkit for visual studio code.

A

So today, like I mentioned we're going to cover building Bots uh what I want to do quickly? Just a quick recap. uh If you didn't see uh the session last week, where we covered getting started with teams, talk it uh teams to talk. It is a visual studio code extension that enables you to build and debug and deploy teams apps right from Visual Studio code. So if you're a JavaScript developer or typescript developer, and you run it on the different operating systems as well, Windows and Mac and then yeah.

A

This is a tool that you can use to to build your team's apps. However, there is a another flavor of teams toolkit as well just to mention so it is built into Visual, Studio 2022. So if you're, a net developer using c-sharp and on Windows, then definitely check that out as well.

A

um But for for this series, we're just covering um teams toolkit for visual studio code at the moment um just want to call out the prerequisites, uh so everything I'm going to go through today and you need a Microsoft 365 tenant and that's also been enabled for uh side loading custom apps.

A

You obviously need Visual Studio code um because we're working with a visual studio code extension and um it's built on top of JavaScript, um so you're going to need the node runtime installed as well.

A

Okay, so, let's get into building uh bots. So, first of all, I guess what is a bot? So a a bot is a a capability within a teams app um that provides you with a conversational interface to um basically be able to create apps that can simplify and automate repetitive tasks. Things like ordering you could go to a bot. You could create an order, put your details into an interactive card that could be returned back to you um and then carry on with with your day nice easy way of interacting with a bot.

A

It could be something that uses natural language and is something more like chat GPT. It could get that advanced or it simply could be a mechanism as well to uh notify members in your organization, employees of when they need to do something. So you can actually send proactive messages into a a bot chat as well, um and that's great, for you know needing some action. It's not all instigated by uh by an end user. At the the system can can send messages uh out to users as well.

A

A Bots can be used across Microsoft teams so and the screenshot in front of you- and this is a a personal app. So this is a a bot that you can use and interact with. um There are other places that you can put them, so you can put them in a a group chat. You can also put them in a team Channel and also into a team's meeting as well. So you've got lots of places where you could potentially add a bot into your workflow, improve communication and speed up efficiencies, run meetings better yeah.

A

These can be used in in all those different areas and I mentioned with the notifications as well. So nice way of being able to call people's attention to maybe perform a task is when a message is sent into teams to the bot. You get a nice toast notification there that you can click on it and go straight to that message and then um you know act upon what whatever is uh is, is needed.

A

I want to talk a little bit about this proactive message approach and we kind of touched on this in last week um in session when we talked about the customer support scenario and I want to kind of focus on this uh agent reminder bot.

A

So we talked about how this block could send a proactive message to a support engineer about a critical incident, so this could be something that is in a support system, an external signal that happens, and we want to trigger a message to go into teams to that that support engineer to remind them- or you know, actually again, it could be a critical incident to actually take some form of uh of of action. Now, there's a few things that you need to actually develop a a bot for teams.

A

The first thing you're going to need is a web server, so this is going to be where your your code actually runs. This way you bought logic, um it is going to be running, you need an Azure bot service, and so this is the service that is you're going to interact with um from the code side that is actually going to send messages uh into teams and you'll receive messages back as well.

A

We need an Azure ad app registration, and so this is so that we can connect from our web server to the the bot service is the client, ID and password, and we also need a HTTP tunnel as well, so because we're developing locally on our web server and the Azure bot Services running in in Azure in the cloud we need to be able to provide a tunnel from our local address to the Azure bot service has a public address that it can send messages to, and it will that tunnel will forward messages to our local web server.

A

And finally, we need a Microsoft teams app package. So this is the app package that we're going to deploy into teams. It's going to tell teams that this app contains a a bot and all of the necessary information that teams needs to be able to uh to serve that that bot in the user, interface and users be able to actually install that and and use.

A

So those were all the the different uh components and how do these interact? Well, we have our web server and it talks about the bot service and our app registration. So we need this app registration to provide this. This authentication between our running code and the bot service.

A

We need the tunnel that sits in between that is going to basically be the the the the uh the go between the middleware. If you like, between our locally running code and the uh the bot service running in azure, we need our teams package, which goes into teams um so that can can actually be used, and then the bot service and teams are going to interact the messages they're going to get from our local web server through the tunnel to Azure bot service and then into teams into locations where that that plot is installed.

A

So how does teams talk? It actually help us here. Well, it's provides a number of steps for us to uh to get up and running very quickly, and so when we create a bot using teams toolkit and we hit the F5 button, it's going to do a number of things for us and that we don't have to do and speeds up the development time massively. So first it verifies and installs we've got all the prerequisites on our machine. It starts an instance of the ngrok HTTP tunnel service.

A

It creates our Azure ID app registration for us. It creates the Azure bot Service registration for us, then compiles all the bot code starts. The Local web server generates that team's app package deploys that app package to teams starts debugging session and then finally, it opens up a browser window that allows us to go to the team's web client and actually install that app and then use it straight away and that's all from just one press of a button which is handling a lot of setup and configuration behind the scenes.

A

That's going to enable you to go from nothing to a running bot pretty quickly.

A

So let's talk about how we can trigger this proactive message once teams talk, it has got everything set up, so we have our web server and we have a client and that client is going to send a HTTP post. Our our web server is going to intercept that message. It's going to send that up to the Azure bot service, which is then going to send that message into teams. What does that look like?

A

Well, it just looks like any normal HTTP post, um a couple of examples there, so you can either use Powershell or curl to just send a a post request into uh into your your local web server and Trigger the message so we're sending a message. We can send text or you can send an Adaptive card, quick refresher. If you don't know what adaptive card is. So this is a declarative way of Designing interactive cards using Json schema.

A

So basically we can use the Adaptive cards approach to combine our data. Combine our templates generate a card and send that in our message. So how does that look from the code side? So this is the code that is given to you in the in the template so to just explain what this code is doing. This is using teamsfx um SDK, which is aims to make bot development uh much easier.

A

This for Loop will basically get all of the installation um targets for where the bot has been installed across teams to look at the Target, we'll Loop through them all, and then we're going to send an Adaptive card, and it uses this block here. So this adaptive cards declare method.

A

First is going to accept a notification template, so this is just a Json file with the Adaptive card template and then for the render we're going to pass in a data object.

A

So this has a title app name and description and notification URL the Adaptive card will have placeholders in there that we can inject the values into along the edge way to point out as well is that the Target that we've got back actually provides type to us as well, so we can actually understand. Well. Is this bot running in a personal context? Is it in a group chat or is it in a channel?

A

So once we've actually rendered the card, we then send the card through to teams using this send adaptive card method, that's provided on the installation, Target and then finally, we just provide a response like you would do with a Azure function quickly cover the different Target types like I mentioned. So we've got a couple of example, a few examples here, so we can Target a a channel.

A

We can Loop through channels we can Loop through the members of those channels. We can also do group chats as well again looping through the members of those group chats and actually sending messages, or we can actually identify individuals and send messages to to individuals based on their UPN or email address are a number of members as well.

A

So with that, let's jump into the demo, so I've got teams toolkit, Visual Studio code running here, I'm going to create a new app click. The create new teams, app and I've got three options for Bots now I'm going to create a notification bot here it gives us a few options: I'm going to choose a HTTP trigger running on Azure functions and use JavaScript, which is the default location and type in.

A

Tickets- let's unscaffold that this app.

A

So teams toolkit has created our app if you've seen Azure functions before this should be um quite familiar, but here's the code here the HTTP trigger uh code that showed in the slides. This is what's going to be executed when we run this, and so let's run that now, I'm going to open teams, talk it in here, I'm already logged in to my tenant, so I'm now just going to go to local here and I'm going to debug in Edge.

A

So we're going to see all the steps that teams talk. It provides us with, like I, said before it's going to go through, and it's going to install lots of dependencies, it's going to check for prerequisites. So it's checking that Azure functions is there and engrock is. Is there as well and it's making sure that we're all authenticated and everything is okay? So what it's doing now? Is it's just quickly installing the npm packages?

A

Okay, so that's done- is starting a local tunnel service in the background doing the registrations. So it's already done the Azure ID app. Now it's doing the bot registration.

A

And now it's generating the app package and uploading that into teams as well, so the next step will be to open up Edge.

A

And run the Azure function as well. Today we can see our notification endpoint and another screen. It's just opened up so I'm just going to log in.

A

A

So I'll add that in.

A

So that has set set up the the bot and then it can come into Powershell and I can send a post request. So this could be anything. This could be another web service, it could be a postman and there it's triggered the message. So it's rendered the Adaptive card in there with a a button, and that is how quick it is to create a bot using teams toolkit for visual studio code, lots of resources available to you for be able to extend um this.

A

This spot um I'll post these in the chat just shortly and just a reminder for next week, we're going to go through building tabs and there we are. Thank you very much excellent.