Microsoft 365 Community Community Demos, 19 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting stated with Microsoft Teams Toolkit and Blazor

Description

In this 13-minute developer-focused demo – Thomy Gölles systematically shows viewers how to use Web Technologies to create a tab (Blazor app) inside of Teams using Visual Studio. Create a new project (Microsoft Teams App) in Visual Studio. Install/open the Teams Toolkit (Preview) for Visual Studio. Configure for SSO. Click F5. Presto, a default page/tab is created with sample code and implements GraphClient. Register the AAD app and modify app as you please. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 19, 2021.

Demo Presenter: Thomas Gölles (Solvion) |@thomyg

Supporting materials:
• Documentation - Prerequisites: Get started with Microsoft Teams app development | https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/prerequisites?tabs=vs
• Issues List - OfficeDev/TeamsFx | https://github.com/OfficeDev/TeamsFx/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
• Tool – Graph Explorer | https://aka.ms/ge
• Repo – Demo code | https://github.com/thomyg/PnPDemo190821Backup
• Sample Project - TeamsLeaderboard | https://github.com/thomyg/TeamsLeaderboard

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

Getting started with microsoft, teams, toolkit and blazer. Let's make that quick through powerpoint, I'm thomas gilles, I'm head of modern workplace solutions at the company at sorghum in graz and, as you see I'm way too lazy to update my slides every time. That's why my colleague is also there just for the people watching on youtube. If you want to reach me, there's my contact detail other than that, let's jump right into the topic.

A

This slide actually comes from microsoft teams, team and shows you the capabilities in terms of platform and the options you have to extend, enrich, enhance the experiences of your end users and those come in many flavors. As the old saying says many roads, if not all roads lead to rome today, we're going to focus on how to use web technologies to create a tab inside of teams and we're going to use laser. um As you see a lot of options, I don't want to get into a discussion.

A

What is better because, as always, it depends so short consultant. Also from my side resources. Everything you see uh will be based on those links. I will post those links now in the chat and then we can go right into visual studio if you want to follow along and download the stuff. Next to your call, no problem with that.

A

Where are we here? We go, and so you have everything: let's open up, visual studio.

A

Okay, you're going on that screen, nope you're going here. um I create a new project and I will select microsoft teams app here and let me move that. Let me let me move that window back over here and I will create a new microsoft teams application. I will call that pnp demo.

A

What number did I not use yet? Let's say 15.

A

Nope backup is the one that is already working 15.

A

And create the solution, I'm using here an extension that you can download in one of the links from microsoft, the microsoft teams toolkit don't be confused.

A

There are two versions of the toolkit there's one for microsoft, visual studio and one for racer studio code, the one for which is to take code focused on developing with react and typescript and the one for which the studio focuses on laser and both are referenced by yeah, the the users specifically as microsoft teams toolkit that's a little bit confusing, but you need to make a yeah precise decision between the which is studio version or the visual studio code version.

A

How to install toolkit inside of visual studio, pretty easy manage extensions, and then you can just search for it. I have it already installed here. You see it it's in preview, that's very important. It's not g8! It has some rough edges still, but it's already uh yeah leading into a very good direction from my point of view. But again you could come to this in a few minutes, some rough edges, and maybe, if you're, not 100, sure what happens behind the scene.

A

I wouldn't suggest to use it in production and of course that's also what the team from microsoft is saying: don't use it in production until it's g8 the capabilities we get with. That is that we can say here, project teams, fx and configure for sso.

A

I click here, praying to the demo gods and down there. You see registered application under my development tenant with this client at the identifier, tab, endpoint everything looks good and now just press f5.

A

I might need to look into the tenant again because I opened a new instance of visual studio. Let's see if the cookie worked.

A

Nope need to copy some details.

A

That's the fun if you realize that you can't use your normal developer tenant because it has already stuff we're not to show I'm not allowed to show yet. So I need to use my other tenant, and I realized that, like yeah 15 minutes ago, or something like that, so apologies for the short delay. Why I'm using my authenticator to get a one-time password, because also my developer tenant uses multifactor so always secure.

A

Yep, okay, and with that we are opening up or the toolkit actually opens up teams. Let's see if this authentication thing and see the three dots down there a little bit. Is it still working?

A

Let's just wait for a couple seconds before we try it again, because this is one of the quirks in the first time in a new solution, it sometimes isn't really working.

A

Come on yep now it's opening up. It will open up with an installation dialog pnp demo 15 was the name of the solution, provided I click on add.

A

And here we are in a couple of seconds.

A

With our running code inside of teams, so what happened in the background is that the team's toolkit actually created a team's manifest and uploaded the manifest definition to my developer tenant. How did it know about the connection and how does it know about what tenant to use? Actually it's based on the accounts that you provided with visual studio and for the moment being the first time you install the toolkit, it will open up the normal microsoft, 365, authentication, dialog, you will enter your credentials and those credentials stick.

A

The only way to change those credentials at the moment is to uninstall the toolkit and reinstall it again. So that's what I needed to do to change between my two tenants for a couple of minutes ago.

A

What we have here now is a blazer instance. I can click on authorize, we'll see the code in a couple of seconds.

A

I need to consent to my new created azure active directory application, because I created a real new application and it also created an aad application with the right permissions to use. I will consent on behalf of the organization just to make it easy for us now, and you see it gets my picture and gets my information, that's all running by just clicking f5 and jumping through uh yeah, three or four loops of authentication the code. Actually, the structure is a regular laser project with some special thing start themes.

A

If we have a look at the page, we will have as an index page it's the index razor, but our tab actually is the tab. Raiser it's referenced over there by slash tab and what you see here is actually the page from the demo. Congratulations. My name and here is the magic of blazer.

A

It's c-sharp inside of html blazer, the word laser comes from browser and razer razer being the uh yeah html view generating engine from the net team and browser, because blazer comes in two different ways: it comes in the way of web assembly, that's the one, that's generating all the bus around and that's why it's called browser or blazer, because web assembly basically runs only in your browser. There's no server side needed.

A

The team's toolkit works with the server set implementation for security reasons, because if you have a client secret, the client id you should store it on a server and not in the web assembly, because the web assembly, in the end of the day, is a dynamic linked library that is streamed down to the client, and we all know that there are people out there that can't or can't wait for inspecting your solutions for credentials. So don't do that, use those approaches on the server side.

A

What we get from the toolkit is this pretty cool sample. Already um I get uh yeah my username and down there direct in the razor page c sharp code and then instantiating a team's fx. That's actually the magic with the toolkit that they create helper classes that allow us to use javascript sdk from teams within our blazer team solution without actually us needing to fill around with the javascript parts.

A

What we get is an example of how to start the toolkit with initializing it, and then you get a graph client by just saying: teamsfx get graph service client, and then you can start implementing stuff. Let's try! One more thing and, let's try to add a small count of my very own amount of teams that I'm a member of. I will just open up my backup plan to just make that quickly.

A

We will add a representation in the html part to add over here an amount of members of the team. We need an actual counter.

A

They are here and then you're just going down here.

A

And call the graph in a different way out of the time I will just start by making here a breakpoint stop again and start the toolkit again or the application based on the toolkit.

A

It will load up and the breakpoint will only hit when I press the button actually.

A

It again wants you to install your tab.

A

And if I click on authorize now you will see we hit the breakdown and that's really really cool developing a local on your client machine hitting a breakpoint here and if I go now through, you will see. Okay, it will get the photo stream my profile and only two minutes left, but this actually won't work. I will get an error here. You see here exception from microsoft, graph service exception, because what happened?

A

uh Okay exception, isn't outputted, but what really happened is that our application was configured to use a certain scope to talk to the graph and what I did here was okay. I wanted to get a list of all my teams and this scope wasn't present to the active directory application. So what I need to do is I need to open my list of applications in my active directory. Go to app registrations.

A

You see here my backup plans and the demo 15, and here with api permissions. I need to add a permission. Microsoft graph delegated permissions is enough because we don't want to read the details of the team. We just want. The number team team read basic. Add permission.

A

Okay, granted go back to visual studio.

A

uh Let's see, 15 stop again press play again. It takes some time still to do the whole cycle, so they're working on making that this f5 experience faster, because if you start developing with it, you will get okay. This takes 15 to 20 seconds and it starts getting boring pretty quickly.

A

But let's see authorize, let's jump through.

A

There we are, my account, is member of six teams, so in 12 minutes this was the microsoft teams toolkit you can start by working with blazer f5 experience. You get a graph, client and happy developing against microsoft, 365 graph awesome. Thank you, thomas really, great.