net core, so it is kind of central central part of asp.net core. It uses razer, syntax and and razer components to build ui. It doesn’t need any kind of plugins. It works on just on web standards and works with any modern browser without any additions or any plugins required, and also mobile browsers. The thing with blazer is that you write your ui code or your code. You write in c sharp instead of javascript or well. You could probably use any dot net language, but you don’t write it in javascript. You use c sharp, and what that brings also – which is quite interesting, is that you can actually then use any uh dot or more or less any net standard library in your application. So, for instance, uh, microsoft, graph and azure cosmos, db, sdk and stuff like that, and and what makes it different from well react and angular and vue, and these kinds of frameworks is that well what i think is it’s, not just another javascript framework. It is uh thinking uh well, if you would out of the box outside of the box uh a bit so doing things a bit differently. There are two flavors of blazer or actually hosting models, so you have blazer server, which has an asp.net core backend and all of your code runs on the server and the changes in the ui or the ui is rendered on the server and the changes in the Ui is sent to the client or a signalr connection, and then the the client bits of blazer will then take care of updating the ui.

And then you have something that is called blazer web assembly, which has no back end and is actually all of your application. Is running in the client you can host such an application on any web server that is capable of hosting static html files, so, for instance, azure storage or as it azure static websites and github pages and and whatnot, and how it works is that it is a Mono based dotnet runtime that is loaded into the browser and running actually inside of the browser and that then loads, all of your dlls or your application dlls into that runtime, and then it runs in the browser just like in in a sandbox where you, your javascript, Is running uh, so you can’t get to the local file system or or do stuff that you you, you can’t otherwise do in a browser application and if you do http requests you will have to comply to course, rules and and stuff like that. So it is running in a sandbox, but still it is your.net code running or in the browser. So then building teams apps with blazer. There are a few challenges or one major. What i think actually is that since you the your blazer application, you are writing it. In in csharp.net language and teams, sdks well javascript only sdk, so you have to do some interrupt there and a javascript interrupt in blazer. Well, it is quite easy, but it it can also be quite tricky and especially with.

If you have a lot of callbacks and promises and stuff like that in in the javascript code, then then it becomes really tricky. Another thing that in in teams, applications which applies to all kinds of teams applications is that teams does not actually do the authentication of your user. It provides you with information about who the user is. It is not authentication, so you have to take care of the authentication properly so there’s a lot of boilerplate code that you have to write to get things just to to get things set up and and that’s. What i set out on during the christmas holidays to to do something about that, and i wrote a component library that takes care of most of this spoiler plate code. So writing teams apps with blaze. It becomes really easy and i have a demo where i’ll show you how to write a simple personal tab application. That is, those applications that you get in the on the left hand, side in the apps bar, but then writing channel applications or meeting applications. It’S, just it’s just the same same principles that you follow it’s a bit different, but still pretty much the same from an application perspective then there’s a couple of links here on the last slide. I already sent this slide deck to to vesa, so you’ll be be getting this uh, these links as well, and so now i will start the demo actually um. I have created a blog article on my blog, which is actually the the script for this demo so and this link to or the link to this article is in the in the slide deck.

So you can follow this script as well and do the same. What i’m, showing you now in in this demo and i’ll, be copy pasting the code from that script, so we’ll start off with creating a new laser application and then let’s call it. That is something that i haven’t yet been. I have done i’ve practiced this a couple of times, so we’ll do a blazer server application using net5 and just the standard configuration with http and then let’s create that all right. So now we have the the blazer application created. So the first thing that i’m i’m going to do is that i will register the application in azure 80.. I have already registered this here in in azure 80, but i’ll just go through the the registration in in in general. So this is just a standard. Azure ad application registration, where, if we look at the authentication, uh i’m, using the single page application platform with specifying the root url to the to the application which i’ll be running locally in in in visual studio, there’s. Nothing special to this. This just a standard single tenant application and so just a normal application registration. The api permissions i’ve granted with or used admin content so that the users don’t have to consent to, to this permission, delegate the permissions separately so it’s just a bit easier for them, but otherwise this is just a standard application. Next thing, what i’m going to do is then i will configure that information in my application settings file i’ll just copy this from the blog post and then type in the in right information, and i need to copy the app to the client id because that i Don’T know from top of my head like that, then i’ll i will add a reference to the library.

It is available on nougat it’s, called blazeraid themes and it’s also available open source on github and so i’ll install that now it’s installed, and then i can close this up. I’Ll save that close and then i’ll take the import file and do some additions to that. One so that we get easier, much easier to reference the components close that up the next thing. What i’ll be doing is that i’ll do the configuration. This is just as you. You know this is just standard configuration that you do in asp.net, core application, so i’ll copy that and add the the configuration here so uh now i’m using the from my application settings, the themes app section and the client id and tenant id and just uh letting The laser rate teams know that this is the stuff that that it can use to actually do the authentication of the user. Then i will create one page in the application that this is the the personal tab page that or the page that represents uh the the personal tab. App and just call it personal like that, and then i will copy the code that i have on the blog here. Okay now now i’ll just explain a few bits here. Uh. So here is the well the normal routing that that is uh used in in blazer applications. But then this team’s application component is is part of blazeraid teams. That actually does a lot of stuff for you.

So it takes care of all of the communications with the team’s sdk, so that means initializing the application and letting teams. Sdk know that your application has loaded successfully and and getting the context for the application and all kinds of stuff, and also since i have specified that this application requires authentication, it will also do the authentication using microsoft, authentication library. What it will be, then doing is provide me with the access token that i can then use for the permissions that that i i uh granted access to in in the in the application registration. So with that access token, i could then read the profile information for the user who has logged in and when all of that stuff has been done by the teams application, it will render this application template and provide that information for me in in the context. So we have the context from teams that contains information about in in about the context in which the application is running. So if it’s a channel application, you get the channel id uh that the group id and stuff like that and and a lot of things that that is uh. Provided you by teams sdk and the client, and that is javascript but natively. But, but with teams blazer or blazery teams uh, it is translated over to to.net, so you don’t have to do any or javascript encoding, and it also provides you, then, with the access token that you can use to access microsoft graph, then i’ll just switch over to Using them, or away from i express and then hit f5 to just try that it actually compiles and and works so the first time it takes a bit bit to compile the entire application, and here we have it.

This is just the standard, laser application and and that’s fine, but now it’s compiled correctly all right. So then it is time to go to teams and and do the actual manifesto of that application. So here the app studio is an application, a teams, application that you can use to easily create manifest for your applications, and i have already one application that i’ve created here ahead of time. So but we’ll just take a look at that, so the application manifest it requires a short name of the application and that by the package, name, version and descriptions, your company name website and the privacy url and terms of use url. That is, and then you can specify icons and stuff like that, but this is what is required to have in the application. What we’ll do is that we have a tab that we want to have in this application. So we go to the tab section and in a team tab here’s, where you would add tabs that you install in into channels or or meetings or group chats, but since we’re doing just the personal tab. We use this personal tab section. So here you can add a new personal tab uh i already created one. So we just have a look at that how it looks so, the name of that and then a unique identifier for that tab. I’Ll just use the same here’s, the url, that of the page that we just created in visual studio, and so when, when you launch the application, it will load that url and that’s pretty much it.

What you need to have in in the application. You can have a look at the app manifest. It looks like this and then on the last page. Here you can either download it or or install it directly if you have enabled what they call site loading of of teams apps in in your tenant. So you need to enable custom applications in in your tenant, but you can do that probably in a development tenant, no problem with that. Otherwise you need to download the manifest and ask an admin to to publish it for you. But what we’ll do now is just go ahead and install that edit and it will come here as an icon and now, when it runs, it will not run because i haven’t started the application in visual studio, but now again run it and when it’s loaded, we Can go back to the teams client, which is over here? I guess yes, and now, when i refresh that it will load – and here is the information that is coming from teams context and all of the authentication results with my access tokens and a list of scopes that it’s included and so on great great yeah. So then, people can just use like still going to start calling other apis using graph yeah, calling it to sharepoint and so on. Yeah yeah really cool, and i really like how we kind of made it easy to uh handle the team’s, sdk and kind of do all the the the plumbing essentially making it so simple for folks to use this.

So thanks mika great demo. I love it.

https://www.youtube.com/watch?v=ubFFN055O-g