Microsoft 365 Community Microsoft Graph Toolkit, 23 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build your own Microsoft Teams using Microsoft Graph Toolkit and .NET Core API

Description

Why build your own version of Microsoft Teams? In this 16-minute developer-focused demo, Sohil Bhalla addresses this question with a business case and architecture. For his solution, he uses a Microsoft Graph Toolkit provider, mgt-get components, back-end implementation (.NET 5), Microsoft Graph change subscription, SignalR implementation, client-side changes to get latest messages from Teams and responds to all Microsoft Graph calls (Proxy Provider). See demo of near instantaneous chat and notifications in the non-Teams app and Teams App side-by-side. This PnP community demo is taken from the Microsoft 365 & Power Platform Development community call recorded on June 23, 2022.

Demo Presenter
• Sohil Bhalla (Codeless Technology) | @SohilBhalla

Supporting materials
• Article - Build your own Microsoft Teams using Microsoft Graph Toolkit and .NET Core API and integrate using web components | https://pnp.github.io/blog/post/build-teams-using-graph-toolkit/

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

Hello: everyone, my name is sohil bhalla, I'm working as a microsoft, 365 expert in cordless technology bv and today we are going to talk about how you can build your own version of microsoft teams using microsoft, graph toolkit and dot net core api as a back end. So there are a couple of links on the slide. One is my linkedin profile and the other one is the pnp blog.

A

So I have also published this implementation as a part of the pnp blog as well, so you can dive into that blog, where you can see additional details about the implementation and some detailed level code snippets as well.

A

Okay. So let's talk about the business case, the real business case behind building your own version of microsoft teams is to have your own context-based conversations getting created from your application.

A

I mean it can be anything based on the requirement of the application itself, so there are certain key areas that we need to focus upon when we are building your own version of microsoft teams that it should be able to send messages. So whatever the messages that gets posted from your custom, implementation of teams should get synced to microsoft teams you should be able to initiate chats.

A

I mean the chats can be initiated on any specific topic wherever whatever you want, based on the context of your application, and you should be able to receive messages as well. So let's say if there's a new, if there's a new message that has been posted on an existing conversation, which is tagged along with your application, you should be able to see those messages as well in your in your setup, and you get notifications as well. So a new message gets posted on microsoft teams.

A

You should also get notified for those messages in your implementation, uh how microsoft team does and an optional thing as showing emojis. So if there's any reactions that happens on microsoft teams, those reactions should also get sync back to your implementation.

A

Okay, let's quickly talk about the architecture, so there are four key areas are the key things that have been involved in the implementation of your own microsoft teams. One is the microsoft graph toolkit, which is uh the face of the application where we are using microsoft, graph toolkit components in order to design the front end of the application.

A

Then we have the azure app service. The azure app service is the service which is hosting my.net core api, which is also acting as a proxy provider and also has an additional endpoint, which is a signalr endpoint, which will be used to notify the web application whenever there is a new message that has been posted as well as it has an endpoint which gets subscribed to graph change subscriptions.

A

So graph change subscription is a key component here, where we can subscribe to a specific resource on office 365 and if there is any change that happens on that particular resource graph change subscription calls uh endpoint, which can be your custom endpoint, and then you can deal with those kind of notification. The way you want it, and the important part here is like whatever the subscriptions that you created for your resources. You need to make sure that those subscriptions are always active.

A

So we have to maintain those subscription lifetime and should renew those subscription, as and when before they get expired as well, and my azure app services following a standard azure id authentication. So all the requests that goes from the web application to my azure app service are been authenticated and carries a legit bearer token as well.

A

Let's move to the next slide, so graph toolkit provider. So as we all know that, in order to implement a microsoft graph toolkit components, you have to have a valid provider which can be of different flavors. But in my case I am basically using a proxy provider. If you can see the implementation here, I'm using a proxy provider, I'm passing my api url. So this api url is actually the net core api, which is hosted on azure app service.

A

The reason why I'm basically using the proxy provider is it gives you more control over things wherein there are certain restrictions or the threshold limits that have been imposed on the microsoft graph calls. So if all the traffic has been routed to my custom api, I can control the request and I can serve those requests with the different kind of caching mechanism that can be implemented in my net core api.

A

Okay, let's talk about the screens now so, as you can see in the screenshot uh that this is the left side of the screen component. So these all components are individual mgt get components and they are been templatized based on the the look and feel that you are seeing right now. So let's talk about a specific component, so this specific component is a wrapped version of mgt git, which is on react-based component, and it has also has a cache invalidation period which basically gets stored into the index db.

A

So this basically helps you to retrieve the data much more faster if there's no change in the data and right now, I'm pointing this particular graph toolkit component to a specific resource. So each and every conversation on the left hand side is mapped against a conversation thread in microsoft teams. So my resource says steam streams, id channels, channel id message, message id and replies. So this message id is nothing but a conversation thread which is inside microsoft, teams and for the left-hand side, I'm just showing the last message.

A

So that's why I have no data query as uh dollar top one. Let's see what is happening in the last message item. So the last message item template has a couple of uh sub mgt components. So, right now, I'm using here I'm using an mgt person component, which is the component which is highlighted here and we have a couple of properties defined for it. We are also seeing the presence indicator on the left, and then we have the text part of it. So the text part office has been shown as a content here.

A

So this content is coming from as a response from my.net core api. When the request goes through a proxy provider- and here we have a created date time, so this is the created date time. So all the all the content which is there inside this particular area is completely customizable. I mean you want you. Can you can put the way you want it? I am trying to show it that this is something very much similar to microsoft themes, but you can make it as a discussion or a thread-based conversation or different base.

A

Let's talk about the right side, so right, side of the component is also an mgt component, so for the demo purpose, I'm using a pure mgt component, it's not wrapped under a react component and it has its own resource. This resource is actually again being pointed to a specific conversation inside microsoft teams and it actually brings in all the replies inside that thread. So you can see all the messages on the right hand, side when you click on the specific conversation from the left hand side again, it has a template which binds the value.

A

The value is nothing but is the complete response that we get from the graph api, and this is the area where we can define our own template. I mean again, I have designed this template in a way that it shows more or less like a team's conversation, but the flexibility is there we can we can we can do it the way we want it. So here the entire code actually goes in where we can. We can design this entire part.

A

Okay, coming to the backend implementation, backend implementation includes the user authentication the graph change subscription. As I mentioned in the architecture, the signalr signalr is used to notify the and notify the clients that there's a new message. That's been posted and the most important is responding to all the graph calls as I'm using a proxy provider. So every other call from the mgt get component goes to my.net core api.

A

So I need to have all the endpoints defined in my network api to respond to those call and send the data back to the mgt quickly on the graph change subscription. So their graph change subscription are uh the capabilities where we can define the notification url and also the resource that you are subscribed to. So I'm right now.

A

I'm subscribed to a resource for the team streams id channel channel id, so any crud operations that are happening inside this particular channel will get notified to my notification, url and based on that, I can broadcast a message to a signalr and they take that step forward.

A

Okay, so respond to all the graph calls, so this is my proxy provider so giving you one example. So I have defined one of the endpoint which responds to all the replies inside a conversation.

A

So we have the team id channel id conversation id coming from the graph toolkit component and this endpoint handles the replies so inside this code, snippet, the native graph calls happen to microsoft teams to get the data, and once we get the data inside the network api, we can cache that data and we can serve all the other clients connected to the signalr endpoint. So this gives the flexibility of making a call just once and serving all the clients connected to the signalr endpoint quickly.

A

On the signalr implementation, you can see on the gif that there is a notification that is popping up, so this is possible using signalr. So this is a standard signalr implementation, where I am adding any client that's coming in with the connection id to a signalr group and uh once the new message gets posted on microsoft themes. Graph change subscription pushes to.netcode.net core sends a broadcast message using hub context. So this notifies all the clients who are connected to the signalr endpoint that there is a new message posted now.

A

The magic comes for the mgt, so as in when the signalr broadcast a message to the mgt components, we have an amazing method, which is a refresh method for the mgt which just fires the query again to the dot net code. Api. With the end point of replies and already the dotted core api has the latest data when it made the call to microsoft teams and that data is being served back to the client and based on the caching mechanism. All the other clients are also being served with that.

A

So the refresh is the key in the mgt element which helps to get the latest data from microsoft teams. Let's see a quick demo, okay, so this is my custom application, so.

B

A

My custom arp application and I have a teams chat. I can hear I click on the teams chat. This is where my all the conversations are loaded. So let's say, if I click on a specific conversation, you can see all the conversation happening. So my mgt get has a person mgt, so you can see the person card and depends upon the graph permissions that have been allocated. You can see the presence indicator and all the other details that have been associated with it.

A

So, let's uh create let's pin this steam shirt and let's try to create a new conversation. Now.

B

There we go so, let's probably pick up one specific object.

A

So, as in when the specific object has been selected, we we see that there's a new conversation that gets created so I'll, say.

B

New conversation for community call.

B

Enter and meanwhile I'll go to theme chat as well.

B

There you go so.

A

You can see there's a new conversation that has been created here and that also has got created inside the microsoft teams as well, so both the con both the conversations are completely in sync. Now so, let's say, if I go to an existing conversation, maybe new conversation, 14, 2 and.

B

Try to post a message here say: test message: notification.

A

Call so if I post new message, you can see a notification also popping up here that there's a new message: that's been posted so.

B

If I go inside, this cannot see the latest message right now. Maybe if I refresh again just test again.

B

Okay, something wrong with this. Let me try to just refresh and see.

B

Okay, let me go quickly again inside sales order, maybe pick up an existing conversation. Let's try to create what can first conversation say here.

A

Yeah so let's see this is where the conversation has got created and let me try to put.

B

A

Message maybe that message also appears here: let's try to put both of them in sync and see.

B

How the communication happens, so this is where my teams is.

A

This is where the actual teams is. Let's try to put some reactions on this message, so you can see the reaction pops up here as well, so this is in sync with graph change notification, pushing the message back signal broadcasting mgt, calling a refresh. uh Let's try to edit this message so.

B

Let's say second message edit: it: let's push this message back.

A

So we should be able to see this message getting edited, so we can see the message has got edited. It gets refreshed here as well. On the left hand, side, let's try to maybe put a gif.

B

Let's see, what's the interesting gif we can put in good morning, it's not a morning, but still you can push this up.

A

You can see the gif is also popping up here, so I mean we still. I mean this is completely controlled. The way you want it I mean you can you can also have your file shares also been imported here, and those files can also start appearing on your con on your on your implementation of teamshare, so the users can download those uh files as well.

A

So I mean the possibilities are endless here, but this the sample which I'm trying to show here is a kind of a basic implementation of how does your custom teamshare implementation get synced back to microsoft teams. So, whatever the graph change subscription apis that have been available, we can leverage all of them to the fullest and also the mgt components that are being available and the new components that have been introduced.

A

We can, we can easily merge them or we can implement them in our custom implementation and give the look and feel the way we want it. So.

B

That's more or less for.

A

The demo over to you david, thank you.

C

Awesome so this is super super slick, really a lot of great feedback. I think there's some questions in the chat. We will absolutely let you go answer some of those, but thank you. That is really really cool, love. How you put all that together and it's really really fantastic.