Microsoft 365 Community Getting started series, 28 Jul 2022

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Getting started with the Teams Toolkit for Visual Studio

Description

In this 13-minute demo, use Visual Studio 2022 and Web Technologies (Blazor) to create a Microsoft Teams tab and connect the tab to Microsoft Graph. Thomy Gölles steps through what is Blazor, the installation of Microsoft Teams Toolkit (Preview) for Visual Studio, and finally an F5 demo for viewers to appreciate what’s immediately available like authentication, end point app settings, user secrets management, Tab Razor page, and Graph Razor component and calls delivered after installing and using the Microsoft Teams App template. Tools used include Blazor – client-side and server-side, SignalR API for communications between client and server, and Microsoft Teams Toolkit.

Demo Presenter
• Thomy Gölles | @thomyg

Supporting materials
• Repo - Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx
• Documentation - Teams Toolkit for Visual Studio | https://docs.microsoft.com/microsoftteams/platform/toolkit/visual-studio-overview
• Tool – Blazor | https://Blazor.net
• Tool – Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx

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 blog - https://pnp.github.io/blog
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hi I'm tommy girlis. Today's video is about the microsoft teams toolkit for visual studio yep. We heard that correct visual studio and not visual studio code. So we will talk about how to create teams, applications based on.net and blazer. Let's get started.

A

As a teams developer, you are most probably familiar with this slide. We will use it today to create some context of what we want to achieve. With this video we will use web technologies and visual studio to create a simple tab and to connect the tab to microsoft graph. What we are using to do that is something called blazer. So what is blazer blaze is a single page application development framework and the nameplace has a combination of the words browser and razer the.net html view generation.

A

Engine blazer lets you build interactive web uis using c-sharp instead of javascript blazer apps are composed of reusable web ui components implemented using c-sharp, html and css. Both client and server code is written in c-sharp, allowing you to share code in libraries.

A

Blazer can run client-sides you shop code directly in the browser using webassembly, because it's real.net running on webassembly. You can reuse code and libraries from server-side parts of your application. Alternatively, laser can run your client logic on the server client. Ui events are sent back to the server using signalr once execution completes the required ui changes are sent to the client and merged into the dom for more information check out the url on the bottom blazer.net.

A

Next to blazer the big topic of this video is the team's toolkit and the team's toolkit actually is part of something that is called the microsoft teams framework or teams fx. A teams toolkit actually only is the ide extension for visual studio code or visual studio. So there is a teams toolkit for risky studio code that uses javascript to create all those things mentioned here in this list, and we will use visual studio and net and blazer to create only a couple of the elements of this list.

A

As we only have a limited time today, we will check out project generation. We will use, what's called the f5 experience, so open up, visual studio, press f5 and see what's happening.

A

We will use the identity mechanisms of the team's fx and the microsoft teams toolkit to have a single line authentication to microsoft graph and, of course, we will have a look at the laser support of all those things. I highly recommend you to check out the link on the bottom github.com forward, slash office, dev forward, slash teamsfx. This is actually the repository of the whole team's toolkit.

A

There is a part for the javascript world and under packages and dotnet sdk there, you can see the efforts and the changes that are made to the visual studio extension, a big big, big, emphasize on the word preview. Here we are still in a preview phase of the whole toolkit. So it's not ga it's not general available, there's not yet the release version present, but we expect it to be there in the coming months. So you can check out what will be available to you as a developer in the future already today.

A

One last thing actually is the installation of the team's toolkit, the different between wishes to the 2019 and visual studio 2022 um in 2019. It's a classic visual studio extension. So you need to go to your menu extension and search for teams toolkit. But since february 15 you can install visual studio 2022 in the version 17.1.0, and there is actually a component in the visual studio installer. You need to open up your installer click to the asp.net and web development section here and then find the yeah check box with microsoft teams, development tools.

A

This is what we are going to using for the demo now, because this is the current state. It also uses net six compared to wishes to the 2019. So, if you're able, I would highly recommend you to go with visual studio 2022.

A

So welcome to my demo environment. I will open up visual studio, 2022.

A

This is the correct version and I will create a new project. I will select the microsoft teams app template here. That's the template! Actually, we got from the component that we installed earlier. Click on next, give it a creative name.

A

Team's toolkit intro all right create, and this screen already is the part of the wizard for your team's application. So we want to create a tab. That's the only artifact we are able to create by now there will be in the future bot. Of course, I will select an account. I'm going from a microsoft. 365 developer account because I will need permissions to create an azure active directory application and also a teams application the team um developer tenant.

A

So I select my account here and you can click here if you don't have a developer tenant yet, and I highly recommend to create one click on create, wait for a couple of seconds for visual studio to scaffold out the project, and here we are so we got our themes, toolkit project with a typical blazer, blazerish structure of files here and we are gonna immediately. Press f5 studio will create or generate the code open up the browser and I'm able to install my teams toolkit into application.

A

I click on add here, so I'm going to the install screen and it will open up a personal or static tab here in the site. Wait for a couple of seconds, and here we are so what we are seeing here is already the team's toolkit knows my name, so it has some information about the current user.

A

That's actually done by this line of code here. So the await team's usercredential.getuserinfoasync. We will have a look at the code in a couple of seconds.

A

Second part of the demo is that there is an authorized button down here. Until now, we are only using the context from teams. We are not talking to microsoft graph. If I click on authorize here, yep, the toolkit opens up a consent screen because we created a new azure id application registration with with installing or scaffolding our project same name jtk intro. As I'm connected to my microsoft, 365 developer tenant. Here, I'm in global admin, I can consent on behalf of my organization.

A

I will do that yep, I know the risk, I will accept it, and here we are, we get a profit picture and my name and my dev tenant email address by calling the graph. How is that done?

A

Let's head over to visual studio, I will stop the debugging for a second and let's dive into the code, to give you an overview and introduction to the team's toolkit. So, first of all in the app settings you see that the toolkit created a client id and created all the different and necessary configuration steps for our endpoint, the authority, tab, endpoint and all the configuration based on two things: the name we provided in the wizard and the actually account we used.

A

So when scaffolding, the project, it immediately created those artifacts and we're up and running with just pressing f5. So that's step one if you're, actually looking for the credential or the secret, just small tip. Look at manage user secrets. It's in there in terms of structure. We are creating a tab, so there is a tab.

A

Razor page, that's pretty pretty simple, a div with just a welcome component, because the toolkit already uses a lot of laser components in my component folder I have a welcome.razer file that actually is the first screen of the demo and in there we saw that it greeted me with my name, and here we are current user username or an error message. If there's a problem and how did it receive my name or yeah? Look at it.

A

Actually, this is the line here. Await teams, user credential get user info async, so this team's user credential is actually an object that you get from the team's toolkit. So that's something the library provides you with. You just need to call that and you get the basic user information if you want to go out to the graph and get more data next to just the basic name.

A

Let's have a look at the graph razor component.

A

You see here. Basically, it's already again using a couple of components. So this is the button here where we clicked on it to authorize, and then we have a profile card. The profile card basically gets provided with the data from our graph call and is actually responsible for rendering the picture and the email address, but we want to look at the actually graph call.

A

So what is happening if I click on there is the button here is the button and there is the on click event reload, so button on click calls reload and reload then goes in and says: okay teams, user credential get token async. That's the first call to get really the current user token. In our case, an exception was thrilled because we didn't consent to our application. Yet so we got into this catch block, because you see here exception code, ui, required error. We needed to consent that so we ran into get consent.

A

Get content, makes a login and again makes the get token async with our scopes, and it requires or open up the additional window where we consented to our ad application from there.

A

It's pretty simple graph get graph service, client and the get graph service. Client method actually uses a ms graph of provider with the team's user credential and our scopes. That is something that you get from the microsoft teams toolkit as well. So this is a class that you can use or an off provider that you can use from the library and hand it over to the graph service client, so creating a new graph service client with set provider. So it's implementing the interface that is used by the net library of microsoft.

A

Graph from there we just get a regular graph service client from the net library. So there's a new get reference to the net library of microsoft graph in the project as well and with that graph client, it's pretty standard graph dot me dot, request, get async and then, of course, a little bit of marshalling to get the actual picture from the base64 encoded string to get an image and that's the picture so pretty pretty straightforward to call the graph.

A

If you want to call other endpoints, you would need to go to your azure id environment, configure additional permissions position, scopes and, of course, add those also here to the scope, and then you can call whatever you are allowed to, where you want to add the graph and use it in the microsoft teams toolkit. Okay, that's it from an introduction point of view. So short recap: what did we saw today? um We talked about what is blazer.

A

We talked about what is the microsoft teams toolkit for visual studio, so this structure over here how to install the toolkit and we did a short demo, pressing f5 and seeing the experience that is instantly available after installing and using the template with that. Thank you for attention and happy coding.

A