Microsoft 365 Community Community Demos, 13 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: TeamsFx .NET - Use SQLite and generic forms for your next Teams Dev demo

Description

In this 21-minute developer-focused demo, Thomy Gölles shows the use of TeamsFx for scaffolding a Microsoft Teams Tab as a Blazor project, use of Entity Framework Core to manage data in SQLite, use of C# Source Code Generators to auto create service classes, usage of Mezaiantou’s generic forms for Blazor, and finally the use of the generators to also create razor components. This demo assumes familiarity of building TeamsFx apps, covered in previous PnP demos. Note: This solution for pre-sales prototyping only, not for production. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on May 26, 2022.

Demo Presenter
• Thomy Gölles (Solvion) | @thomyg

Supporting materials
• Repo – SQLiteStudio | https://github.com/pawelsalawa/sqlitestudio
• Blog - Meziantou’s Blog | https://www.meziantou.net

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

Hello, welcome short, look at teams fx and how to use sql, lite and generic forms for your next team's developer. Demo um we're going to do something that the product group from the source code generator from c sharp, actually doesn't want you to do, but for a demo thingy. So that's all about today about a little bit how you can be fast in pre-sales environments, that's, okay, but right off the top. Don't do that in production, please!

A

um So that's me short and sweet couple of possibilities to reach me afterwards and, of course, keep the characters coming. Hopefully, everyone in this court is somehow in business. um I guess I know quite a few people in the call. A few of us are consultants. A few of us are in internal I.t, but hopefully our businesses are working splendidly and we sell our goods or sell our work whatever it is, but we are in the business of selling something selling.

A

Something means we need to work with salespeople, of course, and apologies to every salesperson that call you will be my target of choking in the next couple of minutes, because why? Yes, we all know that that, of course, you can use whatever random product name to migrate.

A

Your ap solution to the cloud right, that's something that we all live through, but this talk especially is focused on how we, as developers, maybe can be a little bit better or maybe a little bit faster and work in working together with our dear friends from the sales team, so a small one-on-one how to make your sales person happy first of all, be responsive and by be responsive and responsiveness on purpose quote unquote, because responsive means, in that case, not to be in different shape and form depending on your screen resolution, but they normally like you when you are quickly and fast with your answers.

A

Another good thing would be that you understand the problem quickly. Of course you need to answer all the technic questions and then you need to, of course create stunning demos and that's actually the thing that we want to do today, um just short for reference. We are going to build something in teams of x. This is the yeah, the one platform slide. That shows you what you can do with the microsoft teams platform, and we are focusing on this area over here, so web technologies with teams effects, that's it from the slides.

A

So let's move over to some demo code. I already started the demo over here. So what you're going to looking at is something that is a tab inside of teams and apologies for the yeah. Ui isn't really great, because I realized only earlier today that I'm not will not be able to share actually our internal or our customer project because it is all branded and there are so many names in there. So I went and created a new blazer project and yeah morphed it into teams quickly this morning.

A

So apologies for the design, but you are all here to learn something and by learning something we're looking at technology. So hopefully your accepted little bridge that we are using basically the boilerplate from a place, a server application inside of teams. Of course um the application is pretty simple. We have here some menu entries and in that screen, for example, we could manage our car inventory.

A

um The idea is that for a lot of demos, we need to create something in way of a form where customers are able to put data into it, and then we can play with it um and what I learned in the last 10 years. It's really really cool if you are able and maybe you're a team of two persons and you're trying to really understand your customer, and one of you is actually talking with the customer.

A

Another one sits on your screen on the computer and creates some mob cards doesn't need to be perfect, just that you are on the same page, just just that you have a tooling and a way of communication to be quicker in understanding each other and to be quicker from the technical part of site to understand the business case, but also for the business user to have the opportunity to really understand and sorry for the microsoft shark ground.

A

But the art of the possible always wanted to say that in a in a demo, but really to understand, what's possible in terms from the technology here, and that really helps. What we can do here is, for example, yeah. Let's change the plate number of this nice car here change it to 13, and then we submit it and then it's fine in the background and we're starting with the demo and then we'll go to the to the deck stack. But what happened actually is that we stored that in our sql lite database over here.

A

So let me make a refresh here: query select and play you see the 13 here so cq lite super easy super quick uh database tool that you can use inside of your net application and that's just a way of okay. We can show and showcase uh our customer that we can use data in a normal sql way and we will see in the code how easy it is to set up, and maybe also, if you take parts of it to something that really is then going to be a solution or product.

A

How easy it is actually to convert this to maybe azure cosmos db, for example, but sqlite local stuff to develop really really easy. If you search with your search engine of choice, you will see that people are using sqlite inside of azure functions inside of other azure services, just because yeah, it's free, so that's a cool thing and we are still are able to, let's say, quote, unquote, uh develop in a proper way with it. um But you see here with this application.

A

We have here cars, we have your ships and we have a different different uh yeah entities and it's always the same yeah. We can create new stuff, we could delete existing stuff or we can update our products. That's why it's already hinting something calling it product over here. So some kind of generic mechanism maybe be included.

A

My backup demo for today would be a pnp demo slots again speaker name, topic timestamp and account. Maybe how often uh this or or the speaker already uh spoken in, let's say a year or I don't know if there's a keeps track of everyone and there's a big statistic but yeah just just some some random data fields and to be able to then in a demo scenario, be quickly up and running with a form, and you can actually really talk about the business case and how it feels and really see it on the screen.

A

How can we achieve that in teams? Pretty pretty yeah, not not saying uh the whole generation of it easy? But when you are at a certain point, then then it's really easy how to extend that one over here. So let's move over to visual studio, and I stop my debugging session now and I will explain the technical part from what you just saw and in the end we hopefully will be able to add another entity and see the whole thing working.

A

What you're having here is a solution that includes multiple projects for the demo of today, we'll focus on the sqlite demo teams app, that's, basically, a teams of x laser server application. If you are not familiar with teams toolkit for visual studio, there is, I think at least five or six videos. Already on the microsoft 365 community youtube channel, explaining and introducing you to the topic. We won't go into the deep down into the team stuff. In order of the teams of x, we wanna focus more on what we can achieve after the entry level.

A

So if you're not familiar with that just after this call head over to youtube and then basically take the basic lesson and then maybe come back to this video tomorrow or after the day tomorrow, when it is available again, so that make me more a sense if you're really not familiar with teams of x at all right now, but from that project from that solution, we also using a source code generator over here.

A

So you see, there's the sql data demo generator, and we know that this is actually a source code generator, because if you look at how this project is set up, you see in my teams of x project over here the package reference I'm including where is it down here?

A

My sql data demo generator with this output output, item type analyzer and that basically tells visual studio. We are including, what's called a source code, generator, that's basically something that is on top of all things, that visual studio offers us in terms of analyzers and those analyzers are not only able to analyze your code, but you're also able now to create code based on your code. So what does that do? If you look at the file over here, we are going through the syntax tree of the compilation.

A

How does this work actually before this project over here is finally ready to get compiled our source code? Generator? Does a pre-step, so before visual studio sends everything for compilation, we are creating additional stuff and we are creating this additional stuff based on code, that's already in our project over here. So that's why we are going through the syntax tree and we are looking for a file called mydbcontext.csharp.

A

That's something we will see in a couple of seconds. It's a file part of my teams project over here and in this file. We are looking for a specific element. Let's find the code to see what we're looking at. We are searching for an identifier with the value of db set because in our service class we are using entity framework and with entity framework. We're using db sets to basically define our objects.

A

Our entities, then then get stored and used with entity framework, and the code over here basically looks at the syntax tree looks at the generated code of your project and then, let's say in in a high-level world, put some additional layers, some additional files in there, how we're going to do that.

A

We create basically source classes, so we can say context at source. We give it a name and then we basically uh inject a big string into that method and that string just for reference once, let's open a sample over here, you see here to get the database service class. For example, everything is working with big big big screen uh strings and those strings get filled with our properties and basically those things generate our classes. That then, are used in the complete project at compile time, but we are not only creating c sharp files.

A

We are also creating razor files, so we are also creating razer components over here. You see it here, I'm just using file, write alt text and trade eraser page and actually those kind of lines over here. That's the thing that you should not do in a production project, because everything that is filled with dot c sharp you see is, it can say, context, add source, so the source code generators are really meant to create another class level. Another class of file, because then visual studio takes care of everything.

A

What we are actually doing is that we create our own folder over here with auto generated razer files and reuse uh that capability to create our own files in here. um The problem with that is, if you're just using let's say I'm in the end of the day, we'll use like 15 files, that's not really a problem, but if you're building source code generators most of the time you are speaking of hundreds or thousands of files that get generated and they get generated.

A

Basically, every time you save something in visual studio, and you won't do that. In terms of that, you really create your class class files like really like files on the disk, like I do over here. You should do it like this, because this is basically in memory only. So it's not going to make a load on your disk and it's not going to defragmentize your disk and all those kind of things.

A

So that's why the product group of of the source code generators is like yeah, maybe yeah, you can do it it's technically possible, but not it's, maybe not be the smartest move to do in a production ride.

A

But for our demo case it's really really a cool thing, because what we actually can do now is that we can go over to our data folder and have a look at our different entity classes, for example our car class or our ship class, that we saw earlier and then let's create a new class over here and we're not going to actually create a new class. We, of course, have something prepared over here, so we create or copy this file over here and paste it.

A

And then we do the old trick of rename a file.

A

And remove the text ending if we press yes, we have our horse class in here and you cannot do a pnp demo without a reference to warrior horse right and of course you cannot create a horse entity without some column, formatting and view from writing fields, because horses are designed that way, but with that, what we also can do now is that we can go into our db context. That's actually what you're searching for in our source code generator, and then we create public, adb, set of type horse.

A

Here we are versus oh, there is that over here, let's copy it from that one.

A

Come on v, um we do we need to save that first or why? Let me fix that later. We also annotate it with our own marker here, because we might create something that we don't want to use in our project over like this.

A

Let me just check for a second, why we don't get this here.

A

This looks nice.

A

What's the problem with you.

A

Did I miss write something.

A

A

A

Let's try to put that. Maybe we have some issues with a new created file.

A

Could not be fined.

A

Maybe the renaming wasn't the smartest thing and I'm running out of time, but actually when we sorry for that, but when this class actually would be referenced in my context, file uh automatically, we would generate those files over here and you see the razer file actually got created already. So we already created our horse form, for example, so we see in edit font over here. We see a grid component over here and we see a page over here and if and I'm running out of times, I'm not gonna do the demo in the full again.

A

But the only thing that actually stops me now for pressing f5 and seeing this horse class resembled awesome applications. Two things I would need to say add migration for my entity framework to be recognized in terms of the database knows actually my class and then it would say, update database and with that it automatically you saw already here.

A

It creates the raise the pages in here and then I would be able to reuse basically, the code from the source code generator in my project, and the only thing that I would need to create in a demo case is a new data element here and then we're good to go so actually back within the demo.

A

I have no exact idea what actually happened at the live demo in the call, but I just deleted our horse file and created it again and it seems now it works, so looks like the renaming effort. Wasn't the smartest move, but with that we still need to do one more thing. So we ended um in the previous video, basically with me, failing in the demo and not be able to showcase our horse efforts, our warrior horse efforts as a generic form, so we still need to deploy our database connection.

A

I open up the package manager over here. Let me make that a little bit bigger down there and add a new migration. So that's the way to tell the ef core framework that we have a new entity present at migration horses.

A

Let's see we'll succeed, that looks good, so it actually opens up the migration file where it basically shows encode how um visual studio should interact our code to interact with the ef core framework in sql lite. I will say, update database as well.

A

That looks good now, let's press the play button over here and rebuild and deploy and debug locally. Our solution need to switch from that monitor over here.

A

We install our sqlite demo app.

A

And here we are with our horses entry in the menu and if we click here no horse basically is present. Let us double check that in sql light reload, the tails you see horses are here: that's because we actually interact with the entity framework core move that to the side a bit. um What would be a good horse name, I don't know not so creative. Now, let's call him or her fast runner. Five years, color black uh yeah, no idea copy that once copy to twice submit now what I want to save information edge.

A

Thank you. You see it's over here in our grid view and if we look in our sequel light studio, we go to the horses, make a query here for select press play, and you see our fast runner here. So that was the actual plan to show needed three more minutes. So thank you enough for your attention and hopefully see you soon in the next pnp microsoft. 365 community core.

A

So with that, one more thing in terms of what we saw over here, so the use of team fx to scaffold the team step in the blazer project entity framework core to manage data in sqlite, the source code, generators and we're using generic forms from, uh I hope, gerard from a microsoft mvp of visual studio. uh Who has the forms, basically that I use in here, show you some warrior horse call as well and back to david awesome. Thank you. Tommy.