Microsoft 365 Community Microsoft Teams, 2 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build a Teams Meeting app with Live Share SDK - Who's Next sample

Description

In this 13-minute developer focused demo, Bob German presents a simple Tab app solution that uses Live Share SDK, Teams Toolkit and Fluid UI. When in a meeting, any participant can (in side panel) add/delete themselves to the who’s next to speak queue, that immediately renders (Fluid) on all other participants screens. Low/no permissions requirement to use. Step through code – manifest, React app, the fluidLiveShare component, and the connection to the LiveShare SDK/host.

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

Demo Presenter
• Bob German (Microsoft) | @Bob1German

Supporting materials
• Sample Repo - How to use this Who's Next In-meeting app | aka.ms/who-is-next
• Article – Build a "Who's Next" Teams meeting app with Fluid Framework and the Live Share SDK | aka.ms/who-is-next-article
• Video - Build a "Who's Next" Teams Meeting app | aka.ms/who-is-next-video
• Documentation - Live Share SDK | https://learn.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-live-share-overview?tabs=javascript

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 a sample that came out a bit of time ago and we've been having a lot of fun with it in my team, and it was built with the team's toolkit so I'm going to start by I'm going to demo it locally and I'm just going to go ahead and start the build process here. So you can see and then tell a little bit of the story as we're going notice that team's toolkit is doing all these things that you'd otherwise have to do manually.

A

It's um you know it's it's building, not only building the solution. It's um you know, provisioning, a place to host it and and and a bunch of other stuff. So this actually started because my team in developer advocacy is distributed. All Around, the World, in fact, Rabia and I- did this. For our pack week, project and Rabia is on for is hopefully sleeping. She is. It is one in the morning 117 a.m in her time zone.

A

So uh she was, she says, hello, but she wasn't able to join us, and the challenge we had was that we would have a team meeting. We would kind of go around scrum style and nobody really wanted to be the first one to talk or to you know there was just this big awkward silence whenever we started the meeting, so we built actually somebody in the meeting asked for this and we decided to take it on as our hack week.

A

Project and I wanted to learn about the fluid framework and team's toolkit, and also the lifeshare SDK, which will get us to the the fluid framework. So I'm going to show the code for that. But now let me just show what this does I'm going to add it to a meeting. I've got a meeting set up already for the PNP demo and uh again teams toolkit.

A

You saw how hard I had to work to deploy that I just clicked one button, and it turns out that teams Tab apps, have to have a configuration page, whether you want one or not, it's just the way the architecture works, and so this is a kind of nothing to see here. Folks, configuration page and now here's the here's, the solution, but these Tab apps only work with a live share.

A

Sdk inside of a meeting so I actually have to join the meeting to make this happen and now um sort of nothing up my sleeve but I'm, actually in two teams. Meetings at the same time- and you can see here- is it's going to connect to the fluid service, and here is the solution and we decided to keep it really simple, I'm going to join as a second user here, just to kind of make the point.

A

So, let's join as Katie as well she's, my favorite, fictitious user, and so now I can position these side by side, and you can see that you just type your name in here and if you want to talk and everybody immediately gets it.

A

I'll type in a few other PNP personalities here and and they're, showing up on both sides what's kind of cool now is that you can do things like advance to the next speaker, which just sort of Pops the stack sorry I, keep covering up my own window. I guess I'll interact on this other side.

A

You can also do things like Shuffle, so like I, don't really want to talk right now, so I can hit the shuffle button or if somebody has to leave early, you just click the little X and poof off that you know they're off the list. So very simple, very you know: if not everybody wants to talk they can they don't have to enter their name? This doesn't require any permissions other than the ability to upload an app.

A

So if you want to try this, you know it's it's very low overhead in terms of administrative, consents and stuff like that. So let's take a look at the code and by the way let me paste the info on this into the chat. So what we have is uh maybe load the meeting participants, yeah I, thought about that, and maybe we'll do that in the future.

A

That would require a fair amount of graph permission and I'm a big fan of the graph, but the process to get that deployed inside of Microsoft, so we could use it in our own team is a fairly lengthy it compliance review, as you know, kind of understandable, but just saying we decided to just keep it really simple for this version, so you can see here I've pasted in the uh the code, the article there's a Blog article and a video about all of this.

A

So let's uh take a look at the code and what you'll see here is the first thing I had to do, and this is the way teams toolkit works. It gives you this little manifest template and all this stuff is going to get filled in it's pretty cool. You can have different environments, so you could have a local, a developer or production staging environments. It manages all that for you and builds the Manifest for the particular environment that you're running right now. I really love that and there's a couple things I had to do.

A

So first is the configurable tab, so that's the tab that you're seeing and then that had to be marked as working in a meeting chat in the meeting details or the side panel, which is mainly what we're using and then we had to add these extra authorizations. These don't require special administrative consent. These are just resource, specific consents, meaning that anybody in the meeting can get to this live share session.

A

So basically it's a. If you look under the tabs. It is a react app, which is what you get with. Teams toolkit normally in Visual Studio code anyway, is a react. App using Create react app from Facebook, which I really like, because it might be.

A

The only thing I like about Facebook did I say that out loud but anyway, it's it's a nice structure for building a react, app and it's consistent and it takes care of all the dependencies for you, so that was kind of a nice way to go and here's the config page and all this does is it just sort of when you click the the save button. It's going to go ahead and register the actual location of the app. So it needs that URL and you could put some configuration steps in here.

A

I have an alternative version of this. That uses the config page a little bit more, uh which if we have time I'll talk about that and then here's the actual react, app and and Rabia wrote the UI and all those cool animation effects and all that stuff is from Rabia. So I wanna.

A

We really had fun working on this together and so I'm not going to go into that too much, except to show that there's this thing called a fluid service that we're connecting to and then using that to get the person list and then, whenever anything happens in the UI, it's going over to this fluid component, and so here's the fluid live share component and because I write samples in JavaScript, so that more people can use them and understand them. But I really kind of prefer.

A

Typescript I put the typescript interface in here, just so that you can see what the service does, and so it just allows you to connect and then add, remove, go to the those same things that you saw in the UI right. So how does this work? Well? It uses the fluid framework, which is fundamentally, let me see if I can find the right tab for this. The fluid framework handles distributed data structures, so there's all kinds of different distributed data structures that you can use.

A

In this case, we chose to just use a simple key value pair and we're only using one and storing the list of of people, which is just an array in JavaScript serializing that into this one value. Now there are other data structures that are useful in other situations, and you might think that a sequence would be the best way, there's a sequence, data structure that will keep things in order for you across multiple.

A

You know this is basically synchronizing in the background inside of the fluid service, so the sequence seemed like the way to go, except for you can't change the sequence it's immutable, so all you can do is add and remove add new ones at the end. Remove from the end, it's a proper cue. You can't Shuffle, you can't remove somebody from the middle. So that's why we decided on this. There is a race condition here.

A

If two people click the button at the same instant and it was particularly Unlucky One of Them might overwrite the others changes, but I think you have to kind of think about your use case. You know if this was runners in a race. We would get the sequence we would, it would be invariant, and we would absolutely want it to be perfect in this case. If you click the button I've never seen it actually happen.

A

We use this all the time you had to click the button again, not the end of the world right, so it seemed like this gave us a lot more flexibility and then just to kind of show you how this works. When you connect you go to the live, share, SDK, and that gives you something called a live share. Host from there.

A

You can create a number of different things, but what I'm going to create is a fluid framework container, which is where that shared data structure lives now I'm not going to have time to go into it, but we have an alternative sample in the repo which is for Azure, so you can host the fluid framework in Azure if you prefer, the difference being, if you do it in Azure, security is on you, so you completely control security or you don't have any, whereas with a live share.

A

Client it automatically permissions the container to the members of the meeting. The people who are active in the meeting, which is just a beautiful thing, happens to be exactly the permissions that I wanted. So that's what we're doing here is just getting this container and putting in there a shared map of people, and then you can see that we're just going to go ahead and get that initial value, because hey there might are the meeting might already be in progress. So somebody comes online and this code is running.

A

It's going to pull the current state of those people and then, whenever somebody changes something in the UI we're going to run this value changed event is going to fire if it happens in any UI, and so this is a really important thing to understand is normally in a react app, you would modify, you would click something or do something in the UI and it would update the state of that app we're not exactly doing that.

A

You update something, you click something in the react app and it goes to this service and updates the shared data structure. And then, when the shared data structure updates, then we just like all the other people in the meeting. Even if it was me who clicked it, my local code is going to get that update from fluid and that way we're guaranteed to all be in sync all the time right and then, when only when I see the update from fluid do I actually update the UI.

A

So if I I'm in here and I'm, you know and I add you go to the list. The Hugo didn't show up, because I hit enter Hugo showed up because I hit enter, it updated the fluid container and the fluid container told me there was a change and then my code told the UI to update based on that whole chain of of events happening.

A

So most of the code is really just like manipulate the local array and then update fluid right. So it's really simple at that point. All these little functions are very, very short and simple, and when we need to update fluid we're going to call this little piece of code that stringifies the the array and set in one line to update the shared data structure, so it's really simple. It's it's a great alternative to say: screen sharing, because screen sharing is like a read-only thing right.

A

One person gets to share everybody else, they can care, but they can't share right one at a time, whereas with this you can kind of build co-authoring into any app. If, if you think about it, so you know that's basically it uh it's a pretty simple app.

A

We tried to keep it simple, I wasn't sure I'd have time, but here's the Azure version so you'll see there's another readme and another couple of folders here, Under tabs, and basically this is just the same thing except for the service is an Azure based service, and so we have to go in and use the Azure client um I love the name of this token provider that they give us just to remind us that Security's on on you and not them, they called it.

A

The insecure token provider either that or these are very introverted tokens that don't really like being shown in a in a in a call, Community call so sorry about that um bad joke. But anyway, it's otherwise pretty much the same. Just the way that we're getting the container is slightly different, and so that's it for the demo I encourage you all to go check this out and um pass it along to the next.

B

Thank you Bob. Yes, we are right under schedule. Thank you for that. uh It's always really really good. So we don't run out of time excellent, really, really cool stuff.

A

Foreign foreign.