Microsoft 365 Community Microsoft Teams, 8 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a bot for Microsoft Teams which detects user presence changes

Description

In this 16-minute developer focused demo – Wajeed Shaikh details how presence change notifications are delivered to users courtesy of Bot + Graph. The Microsoft Graph REST API uses a webhook mechanism to deliver change notifications to user. The bot subscribes to presence change notification and notifies when user status is changed. Clearly defined execution steps shown along with targeted code walkthrough for configuring and running this sample locally. Uses Bot Framework SDK v4, Graph APIs, and subscription service. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 8, 2022.

Demo Presenter: Wajeed Shaikh (Microsoft) | @Wajeed_Shaikh

Supporting materials:
• Repo - Microsoft Teams Samples | aka.ms/TeamsSamples
• Sample – Graph change notification | https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-change-notification
• Documentation - Support and feedback | aka.ms/TeamsPlatformFeedback
• Documentation – Send proactive messages | https://docs.microsoft.com/microsoftteams/platform/bots/how-to/conversations/send-proactive-messages?tabs=dotnet
• Documentation - Set up notifications for changes in user data | https://docs.microsoft.com/graph/webhooks
• Learn - Use Change Notifications and Track Changes with Microsoft Graph | https://docs.microsoft.com/learn/modules/msgraph-changenotifications-trackchanges/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Hello, everyone, my name, is vajid and I'm a program manager for microsoft, teams, developer community responses and I'm back with another scenario based samples which I'm going to demo and also do a code walkthrough so to get started. We'll talk about these scenario, uh which is detecting the user presence and sending a notification using bot. We'll also do this uh demo locally, we'll run this and have a demo after that, we'll do a code walkthrough and take questions around that, so, let's dive into it.

A

So when you talk about the change notification for graph, uh it's it's a way of providing a webhook mechanism to deliver the changes happening and provide that information back to client and the way it happens is as a client application. You subscribe to a particular notification and you provide a webhook url where you want to receive the notification in current sample. The bot actually subscribes to the present change notification for the current user and whenever the status gets changed for the current user, it just sends a proactive message.

A

This particular sample is present at ak dot, msl team sample and which is under graph hyphen change notification. Folder uh to talk about running this sampling locally, we'll be cloning, this repo, I'm I've, already opened. This solution uh next part will be actually creating azure bot and capturing the required app id app secret in the connection string and we'll use the ingrock to run that locally, and we will sideload and try this up.

A

So I'm just switching to my visual studio, so I have change notification sample open. uh I have app setting dot json, wherein we have these four parameters which values needs to be put it and we'll be updating the manifest file to get started. So, let's start with the microsoft app id and app password to get this information, you go to azure portal start with create a new resource and search for azure bot.

A

Once you search for azure bot uh in the marketplace, you'll you'll find the entry for a bot creation process. So let this load- and you see a azure bot here and I click on create.

A

Providing a name for what change notification demo and I'm actually going to try this in a different tenant. So I'm just providing a multi-tenant app. So we'll just review this, and we will let this create the create the app the validation is passed. I think we have the app bot handle available and it's now what it's doing is it's creating a microsoft, app id and it's also creating azure bot and associating with that microsoft, app.

A

Okay. This will just take a couple more seconds once we have that we will go ahead and make the required changes for enabling this bot to support. You know in a microsoft teams, so let's go to the resource uh to to start with, let's go to channels, and this is where we are enabling microsoft teams as a channel, so this bot can be used inside microsoft. Teams.

A

So so we have done this setting for the channel now now, what we'll do is we will go ahead and visit the configuration page. uh We will keep a copy of microsoft, app id I'll, go ahead and copy it back in in the solution.

A

Okay, so now we have id, let's go ahead and fetch the the second parameter of what we are looking for: uh let's go to manage and under certificates and secret section, let's just create new client cigarette. Let's add.

A

And let's copy this value back to the.

A

Okay, so now we have microsoft, app id and password. The next thing we need is a is a connection name and the base url for the base url. What I'm doing is I'm just running the ngrok on port number 3978.

A

So this is just to connect my local development setup uh and have a http endpoint, which I can use in my bot code, so just copy the contoso dot and grog dot io. I just pasted it here and let's go back and try and get the connection name information for this.

A

Okay for uh connection name, information first thing you need to do is you need to add a redirect url, so I'm just adding a web application uh and we are putting a redirect url for the bot framework, and this is used to actually get a access token from the graph api and using that access token will be actually configuring and and subscribing to the change notification.

A

So we are done with this part. We have added a redirect url, let's go back to bot and, let's add a oauth connection setting.

A

So when we are adding oauth connection setting, let's call it as arc and we are using azure ad v2 as a service provider. Let's copy the client id same as the microsoft app id and the app secret what we have already copied back in our code. So let's go and grab that information.

A

And let's put in the client cigarette, so the tenant id here, if you want to uh restrict your app to be a specific tenant, you can specify the tenant id. If you want to keep it available for other tenants, uh you can call it as common.

A

And in terms of scope, we are using presence, we are requesting, presents permission, so I'm just copy pasting the scope required for this sample.

A

Okay, once we fill in all this information, just save the connection string and let us go back and update our sample with this connection stream. So that is what so now we have all the required information for the sample. uh Next thing, what we need to do is update the manifest file. I'll just run the sample so that it it loads up. It builds and loads up. Meanwhile, I'll go ahead and update the manifest or you just need to update two values.

A

You need to update the manifest app id and the bot id part for this. So, as you could see, this is running on 3978. Let me minimize this and go ahead and update the manifest, so I just copied the bot ap. We have same bottom id, I'm using for app as well and let's go ahead and create a new manifest manifest. Let's just zip the manifest we have here, just compress it to zip.

A

And we have our manifest file ready so I'll just copy the path uh and we'll be heading over to our demo tenant. I'm just switch tenant here. uh I've logged in using megan's account here and what I'm doing is I'm uploading the custom app to my personal personal, app section.

A

So let's go ahead and add.

A

So once the adding is done, we will start seeing the updates here.

A

Okay, let me just confirm if we have modified the input okay, so I think we missed to modify the endpoint url so I'll just copy paste, this value, otherwise we'll our bot will not be able to listen anything.

A

Okay: let's go ahead and save this.

A

Okay and try this one more time: okay, let's type in help.

A

Okay, now you could see we started receiving api post messages to ngrok and it's the first step is to do the login part. We will start seeing the the login part as soon as this code runs and once the login is completed, the entire subscription part will start. So let me click on sign in okay, accepting the permissions.

A

And once the sign is completed, we'll be able to get a message which says: what's the current state uh for this particular user? So right now it's a pc, so we should see a messaging, that's a easy status and the way you could just test this is you go ahead and change the status to let's say, do not disturb, and once you get the once you get the notification once you get the message: endpoint uh bot will send you a notification saying your status is, uh do not disturb.

A

I think I just got the previous message as well, so so this is how this works, so we have this whole setup ready locally. Before moving on to the code walkthrough, I just want to talk about one scenario. What we have built ourselves and which we use internally, is to track the questions.

A

So whenever there's a new post made on a github for a issue, we have a bot which has a subscription to read for channel messages and once the new message posts in a channel, we get a notification and we actually track it, and I send a proactive message in the channel saying hey: this is the tracking id for this github question and then uh there's assigned to person. So we have built this end to end using the exact same scenario.

A

Moving on to the uh code, walkthrough component, wise you're, using bot, sdk, v4 graph, api components and also using a background service to monitor and renew the subscription note that the subscriptions are time bound for the presence it's valid only for one hour after one hour it gets expired. So you need to renew the subscription and flow wise. We have seen the login experience. Then we uh as a code wise. We capture the conversation reference uh we subscribe for the change notification and all the actual notifications are handled at api, slash notifications, endpoint.

A

So, let's get into the specifics. This is the first one where what we are doing is whenever we get a first message. We are just storing the conversation reference and this is happening in memory uh just for a demo purpose. We're just storing it.

A

There um next part is the actual subscription part, so we are creating subscription for the communication, slash presence user id, so this is actually listening for current uses presence and the change type is updated point to note here is we actually specify the ngrok endpoint where the changes would be notified and we request for this subscription and the last bit uh which talks about the handling for this process. So once status is changed, there will be post request made with the with the body uh which contains the information for the current user.

A

So you you read that information and go through the conversation, references what you have seen and you actually send a notification which says this is the current status and you can again change the status to get notified.

A

So, just to summarize, um we had a demo covering end-to-end scenario for status update. uh We saw how to run this sample locally key points covered where the capturing conversation subscribing to change notification and handling the actual notification and sending the proactive messages provided. Few resources, the send product message, documentation and also the documentation graph side which talks about the notification changes in user data.

A

If you have any questions, please reach out to us on ik dot, ms slash teams, platform feedback feedback page for any other questions, we'll take it over chat uh back to you, brian. Thank you. So much rajin, excellent uh information, love the demo and getting to see this in action.