Microsoft 365 Community Microsoft Teams, 29 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a movie voting experience as Microsoft Teams meeting app

Description

In this 18-minute developer-focused demo, Markus Möller uses Teams stageView and real-time collaboration based on FluidFramework and Azure Fluid Relay service in this solution. Scenario: participants select a movie, audience favorite identified, group watches winning selection in stageView. Meeting owner Schedules a Teams meeting, adds the “Tab Meeting Vote Movie Fluid” app, and inserts up to 3 movie options in app. Meeting participants see movie options in right sidebar. Voting results are updated nearly instantaneously. Better synchronization to come with Teams Live Share.. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 29, 2022.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - Teams Meeting apps – A sample for in-Meeting experience and stageView (Vote Movies) | https://mmsharepoint.wordpress.com/2022/05/26/teams-meeting-apps-a-sample-for-in-meeting-experience-and-stageview-vote-movies/
• Article - Use FluidFramework in a Microsoft Teams app | https://mmsharepoint.wordpress.com/2022/06/25/use-fluidframework-in-a-microsoft-teams-app/
• Sample - Tab Meeting Vote Movie - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-stageview-vote-movie
• Sample - Tab Meeting StageView Vote Movie Fluid - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-stageview-vote-movie-fluid
• Documentation - Live Share SDK | https://learn.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-live-share-overview

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

A

Then got a bit more complex and more a bit more approaching real-time collaboration. So uh nevertheless, it's still and teams meeting up using the stage view, but also using some real-time collaboration capabilities uh based on fluid framework and so on. So practical scenario is: let's vote for some movies. We can uh yeah, we can check and then watch the most favorite one together in stage View short intro about me who doesn't know me.

A

um My name is Marcus Miller I'm, Microsoft, 365, developer expert working for abernard in Germany I'm, based in Munich, so close to the Oktoberfest, but not really live there.

A

um As said in the chat, uh so I'm a Microsoft MVP for M365 development, and if you need to get in contact with me, you can follow me on Twitter or uh yeah check, my blog, where I also wrote about this sample, but I will share the resources at the end, as usual during my demos.

A

So maybe, let's directly jump in to the demo, because I like to start with the demo and later explain how I did it. What we need is, of course, uh before we establish a team's meeting app. We need a team's meeting.

A

What we always need as well or otherwise, we could not really join the meeting and also not install a meeting app. Is we always need at least one participant? I have my demo body here, which I always invite for those cases, and once we have that we can also edit the meeting.

A

You can edit the meeting and add an app. We need to search for the right now, which is the fluid one yeah. That's that one this app. We need to configure first, because we need three urls for our movies, which we want to roll down and what we can also do not at this point of time or at this point of time it does not make sense, but maybe uh it comes to the place that you might change such a movie or exchange one and might reset existing votings.

A

We can also do that, but I will explain this later. This is what this toggle button is. Once we save this, the app will already run and will render our object videos, but this is only for demo purposes, because this uh in a production scenario, this app would more intend to uh work live during a meeting and therefore we do not use this so-called pre-meeting experience really, but we can also join the meeting. Do not really need a microphone here.

A

And once we are here, you see our app yeah.

A

This is our custom app, we can click it, and then we have the app in the so-called in meeting experience. This is the same like when you see your chat or when you see uh the people attending the meeting on the right side, and what I can do now here is I will scroll it down, of course, so we can check other videos first just said to get an impression what I have here? This was for some from my former Hobby beautiful in the wildlife.

A

Let's vote for the for one and what happens now immediately? Is we see at the very bottom here? It's uh we have one vote and I also cannot vote anymore because I'm recognizing hey this person already voted yeah um to show this. Once again we can use another user, and this was our body Klaus Clausen he's now the same invitation I, don't care for a response now I will directly join the meeting.

A

And now I see a totally different teamspa.

A

The team's bar here below is totally different when you see the lease button here, it's still a hang up and it's a leave, and here we also do not see any custom app yeah. This is a problem because this capabilities around teams, meeting apps, are still and preview and they only support if you are and if you have enabled, uh for instance, the developer preview on the user- and this is what I cannot do with this regular user, because this is not an admin user, but just to increase the votings for demo purposes.

A

The cool thing is that I have this app, as you have seen already enabled, also in the pre-meeting experience, yeah and a productive scenario. Once again, you would not do this, but here, let's simply vote for the video number one as well, and once we go back, we directly have the second vote here. Well, this is directly synchronized. I will explain you later how this works and the final thing now, assuming we have several participants and uh they all voted uh and then there's a result.

A

An organizer could also share in Statue, but when we click on this share button here, nothing happens once again problematic. We are in preview and this scenario is not yet supported in the web client and therefore to show you how this works I had to prepare another physical teams. Client, therefore, I had to steal the laptop of my wife, because my personal, productive teams, client is already blocked, because this is what I'm using uh productive and, where I'm speaking to you and therefore I, come on.

A

uh Therefore, I used this second laptop and I. It uh approached this with a remote desktop and once I joined the meeting here.

A

Come on I have the app once again.

A

I cannot vote yeah because I'm still recognizing I already bought it, and here I can also share, and he of course recognizes the first video was chosen because it has two votes. The other have none, and this is how we can watch the video together.

A

What you also see in the video here I have no controls on the video like play, pause or something like that yeah, and this is on purpose for the moment, because the apps, although they are shared, they have individual runtimes per user, so one user could run the whole video and the other one could press pause in the meantime, and this would not affect the other users and I want to have the uh the video run in sync for all the users.

A

This is why I removed the controls, but there's another option, but I will come to that later.

A

But this was my demo for the moment and now, let's get back to the slides and explain you how I did we have some prior requisites? I already explained that during the demo and we need a meeting at least one participants. We need a physical team's desktop client for the full functionality and with physical I mean really you need it on a machine yeah, no virtual, desktop or something like that or you need a physical one still well, it got a bit better from my last demo.

A

I think it was one year ago when I was stammering the only the in meeting experience. Some of you might remember when I was recording names and uh playing them back with audio. This is already possible. uh The emitting experience, at least for developer preview, as you have seen, but not the statue and uh yeah the client developer preview, and it needs to be enabled the small icon here shows you how you can see it. It's a small P above your account photo.

A

Then you need, of course, A team's tab application with a specific manifest. We will see in the details on the next slide and last, not least one of the biggest challenges here in this special app was the app needs to be in sync, especially on the votings, and also maybe on the video running yeah, and the synchronization of the voting of course needs to be implemented, and but at the moment this is really really easy with fluid framework.

A

But first let me explain you some specifics of the team's manifest.

A

We need a scope. That's this group chat, because every meeting has a group chat, and uh this is what's also uh yeah in combinations and for the context we need at least the meeting site panel and the meeting stage. I also use the chat and details Tab, and this is also so-called pre-meeting experience yeah. That is what I used for the background that my normal body user could also uh wrote with his backline. This is, uh but with only the exception here.

A

The next thing is the app always runs with more or less the same endpoint, maybe in stage view or in the in meeting or pre-meeting experience, and how to distinct that this can be done from the page context. There. You have a so-called frame context, and if this is meeting stage, we know hey, we are already in Statue, and this is what I'm doing here, I'm checking if we are already in stage view or not, and if so I will render either the vote movie fluid result component yeah, which was the last one you've seen.

A

This is the one with only one single winner, video or the other component, which you have seen on the side panel or in the pre uh meeting. One is the uh what movies with voting component. This was showing all three videos and also maybe a button and so on and so forth.

A

The next thing is about sync, the votings. How you would have done that in the past would be maybe with the backend Service uh the database list or cache whatever yeah and then set the time out and Paul uh every five seconds or one second or so. Hey did someone else vote do I, have to increase my values or not yeah, but this is old school a bit provocating, but it's a new Microsoft, fluid framework, and especially uh in in combination with the recent event, GA I.

A

Think in the beginning of August and Azure fluid relay service is much more easy to implement what you can see here. You simply have to set up an Azure resource called fluid relay service, give it a name put it to the subscription and so on. Yeah, like you typically do with other components and that's it and then on this component with your code, you can store containers and all these containers might be meeting specific and store the data per meeting. How does this look like in code in court?

A

We have to create a container, that's quite simple: we need another client and uh establish a connection and then create a container with a schema. The schema shows which data put in and the data you can see here in the middle.

A

What we are doing here is the most probably you have so-called shared objects and the most popular one is a shared map. Shared map you can think about as a.net developer as a bit like a dictionary, and you can see this also uh when I initialize my values and the next lines here, yeah, so I'm, initializing, three votes to zero and I, also initialize a string with all my voted users to not to blank.

A

This is- and this is my my data object in which I reuse all over the scenario- and this is what I'm doing at the moment, when I configure my application first time or when I decide to reconfigure it and reset the votings, then I will do it the same again to send the votings.

A

You only have to do it in the front end. You do not really need to care for the backend. Let's concentrate first on the two portions of code on the left side, because in our very parent component, we once established access to our container and visit to our shared map object, and this shared map object. We can simply hand over to any child component in our our more or less complex react structure and have it there.

A

This is what we need to do. First, and second, is how the voting and the sink with the other client works at first, a user in any client presses the button both and then we will increase the value in the map by 1..

A

So the second thing is, we already have an event receiver established on our voting map and once in any client yeah assume we have hundred percent shipments in any client a value change.

A

Now we will fire that event receiver, and in that case, what we will do is we will get all our values and put it to our state and the state components then will render the new values- and this is what you have seen in the demo once one user or the second user voted I was immediately switching back and the first user had already the values.

A

That's it. You do not have to care for the backup. Fluid framework totally handles this for you, but it could even go more easy and therefore, let me only give a short Outlook. My current demo does not reflect this yet, but uh in the meantime, what's also coming out was the team's live share. Sdk- and this is even more easy now optionally- you do not really need to care for the Azure fluid relay service. You automatically get one with your team's meeting.

A

Yeah the disadvantage is the data storage is only 24 hours, so, if you have Enterprise needs like a, we need to archive all our meeting voting results for the last uh decade. Also, then, you would have to handle it yourself, but otherwise, if it's only running during your meeting, this could be even India, and the second capability of the team's live share. Sdk is also you can pull it.

A

Some media like audio or video in a synchronized container, and then, if someone plays pause, it will be paused for everyone and vice versa, yeah or you can also enable if this works or not. But this is what you can also do, and this is what I will try out next time, but I want to give you the outlook here that this is also already on the horizon.

A

Last, not least, as always, my resources for this demo I have uh yeah, it's not really uh two blog posts, but it was a serious starting with the first blog post about the stage you want and then at a later point of time, I was establishing this together with Spirit framework. So take these two links for the moment, but um there are other explanations also linked there and then also for comparison reasons.

A

I have two samples in the PMP team step samples repository the first one is the old school one with uh syncing the data in npm Cache and the second one is the modern one with fluid framework and last, not least, Microsoft documentation on the recently published teams live share, SDK, that's for.

B

My site excellent, thank you, Marcus, really, really cool, stuff and and and really cool to walk through the the capabilities and and how it was implemented that fluid framework is is. It is actually really hard to understand and are hard to grasp how the systems are working. So it's it's really great to have that now. Marcus, if you don't mind, uh please copy the links which you had on the slides uh to the chat so that people can access those already at this point, but yeah otherwise, really really cool stuff. Thank you. Marcus on that.