Build Your First ASP.NET Core Web Application Workshop, Part 2

alright alright enough of that already oh damn oh okay I was wrong about that burro okay see I haven't even used it yet I got the wrong thing there how's it go in their chat room how we doing did you get something to drink you get a little refreshment you grab a nibble two to eat aim to please thank you for for paying forward the gift sub to dotnet dev that is very kind of you thanks so much umm hey Veronica good deal look here's the folks that you're in the chat room welcome back do it do I need do I need to change hats I'm gonna change hats we've been twitch focused I think we need to change hats there we go you tried dotnet tie dotnet ties an experimental new framework that the team is working on interesting stuff that could be done what was I in the army I just had a little nibble I'd if I eat like a full sandwich or a full bowl of soup or something um I end up losing energy quickly here I want to keep energy high and and not right burn burn through too much here where we're gonna be in great shape alright let's get into our next module here let's get some more music to code by playing here in the background and I'm gonna move on and choose well this is another one of our favorites that we like here on the channel this is called cyan [Music] there you go once again this is music scientifically designed it's engineered to get you in the flow in the groove so you can focus on whatever task it is you might have check it out at MTC beat whap calm or you can execute the music command in the chat room over there and get your copy today thank you so much mr. Carl Franklin for letting us listening to your music while we work together here on stream get your coffee with madrenas coffee there's a logo in the corner and jeunesse COO with the coffee command thank you that's right I've got a little love a little water here to get me back into things here so let's head back over we're gonna go into this is module 2 now of the workshop and we're gonna talk about now building out a little bit more of an object graph we learned how to build a simple API endpoint how you can query push data into and interact with a micro service with some code that was mostly generated for us after we defined what a speaker was well now now we're gonna take those steps to add some more objects and start reusing a little bit more code Thank You Jean Valjean for sharing that so let's talk about the next piece and the next piece kind of we're gonna circle back to that question we got earlier about hey what's dotnet standard how does not net standard play into this I've heard I've heard about this standard thing what is it well we're gonna create this project this project of what's called DT OS a data transfer object and an ADT o in an application architecture is a a simple class that's just properties that we're going to pass around between the various layers of our application it's just for transferring data right it doesn't have any logic in it it doesn't make any decisions it's literally a carrier it's it's the transit it's the train car for your data look at that that's a pretty good way to describe that yeah it can be a little bit more complicated than that but for what we're trying to do here we're gonna create these classes that we can share between both our back-end microservice and our front-end website so let's create this DTO project so I'm going to right click add a new project and I'm gonna specifically look for a class library and you see I have class library dotnet standard with c-sharp give me one of those and we're gonna create this and call it conference dto and it creates a dotnet standard project alright so Jeff what's a what's a dotnet standard project what's that mean and it says dotnet standard they're both I don't get it dot it's got a long history a lot of folks have been writing a lot of dotnet code for a very long time 20-plus years how do we ensure that code that was written a long time ago um that's written on dotnet framework maybe works with dotnet core or maybe code that works on dotnet core and detonate framework how does that work with xamarin if I want to make mobile applications so what dotnet standard does is it defines an API level right you see API levels in in Java and other languages but it defines a level of compatibility that different dotnet frameworks and I say to open up because not dotnet framework but other dotnet frameworks must adhere to must abide by in order to be considered standard so you can go out there own the documentation for dotnet standard it'll show you the various api's for the various various for the various dotnet version levels got net standard version levels in what compatibility they have and in particular we recommend folks right now use dotnet standard 2.0 or 2.1 you'll see Mokes most folks use dotnet standard 2.0 I turned off the words bit there anyways so dotnet standard 2.0 has the highest level of compatibility between dotnet framework and dotnet core and salmon so by creating a class library here that has these objects in it that we're going to use between a couple of dotnet core framework dotnet core projects we can reference this and it will appropriately be it'll behave appropriately when it's consumed by that dotnet core application further in the future and we're not gonna do it as part of this project but in the future I could reference this library and use it in a xamarin application and have the same ability to transfer transfer data back and forth between my micro service and my mobile application so that's what dotnet standard is it's it's a way for us to to gain portability of our business logic across dotnet framework runtime versions words are the enemy yes yes they are and I'm gonna hit that because JA sure that's a makes a pretty good point here let me bring this up because it's a good discussion point Josh knows of dotnet standard because of unity where it's the standard dotnet API when you create a new project under the impression this might be the bridge to dotnet core and v since the other option is done at framework for yes yes so when you see other folks here on twitch using unity in their building games or maybe you're building games with unity you're actually using the mono version of the.net framework and mono was originally written I want to say back in 2005 2008 timeframe by our friend Miguel de Icaza and the folks at anyway the company was Simeon at the time and he was intended to give that open source friendly version of.net that you could use in places that weren't Windows well unity the unity team took mono and used it as the framework to build their game engine on top of well mono has been updated and has kept track but a little bit distant trek from dotnet framework in alt net core and since dotnet core is completely open source there's a lot of cross-pollination actually between mono and dotnet core so much so that if you go to the dotnet core source code on github that it they merged mono and dotnet core and that's what dotnet 5 is it's not gonna get rid of dotnet standard because we still need to have compatibility back to dotnet framework like I said earlier dotnet framework is is a component of Windows so it's always going to be shipped when there's a new version of Windows dotnet framework ships and it resets the support cycle for dotnet framework but for dotnet core and mono and xamarin my Kazaam runs built on top of Llano this means that you have compatibility across them dotnet standard helps to ensure that you have good access across all of those things and I was saying about if you look at the source code now for dotnet court because they merged the mono source code open source source code in the.net core source code the first commit for dotnet is by Miguel de Icaza how fitting that Miguel is now an employee and he is the first committer of dotnet source code great stuff dotnet standard you're right death night you need to continue the discussion it's just the api's and not the implementations this is a very good point when we build this class library it doesn't actually build it doesn't actually build runnable code it builds code that is referenced by another project this builds a dll but that DLL when it's referenced by another project will then have the appropriate implementations this is a little bit further down the stack but it's it's just pointing to those contracts for for dotnet for those dotnet api's and when you reference dotnet core or done at framework or xamarin or mono over for unity it then slides in at Build time the appropriate real implementations of those contracts so you'll see here we're gonna create things that are strings and intz and and write different complex types it doesn't actually reference right not just those value types but other complex types they'll get swapped in with their proper implementations at compile time when referenced by a dotnet core application may be a xamarin mobile application or a mono game right I mean it's tremendous to think they write the things that we're building for for a game for with mono I can take some of that logic out of there some of the stuff around my character there's some of the stuff around my character or maybe my high score the scoreboard that I'm building inside my game and I can pull that out into a dotnet standard project like this one we're about to build and reuse it in your dotnet core website that will allow people to see you know across the entire community here's the high scores or here's where you know whatever the logic for your game might be being able to reuse that now in a website and the or publish it out to a web application really great story about how you can do that reuse across the various stuff all right well dotnet is not an abstraction let me let's gotten it yes yes I'm sorry I play poker badly every time I say that I feel like you're tricking me I play poker pretty okay but I play poker badly says so dotnet standard is just an abstraction yes it's just a series of contracts that when we build a project that targets dotnet standard we're building on top of those contracts that abstraction over those implementations and when we actually build it fulfills that contract that abstraction with the appropriate implementation for Windows for Linux for your game engine for iOS or Android at that time it's really great stuff um WQ Walter asks artists is there an expected update to dotnet core this spring will it require code changes like going from 1 to 2 to 2 to 3 no there is no minor update coming the next version coming is is dotnet 5 there's there is a the release of blazer in a series of packages that are versioned 3.2 that's blazer for web assembly is coming out the spring there the team is full steam ahead on dotnet 5 there are some security patches there are some bug fixes that you're gonna see in minor patch releases but there is not a minor release you will not see dotnet core 3.2 3.3 the next version of.net is dotnet 5 and is the migration going to be easy to dotnet 5 that's the goal so much so that that I think I can share with you that the the statement to the team is if the migration for dotnet core developers to five isn't really easy to do just by changing a version number and and patching one or two things if there's a significant rewrite involved they failed that's that's one of the entrance gates is it needs to maintain a good bit of compatibility in code back and forth between the versions thank you for the question Walter Marcos voice programmer thank you so much for the cheer those two hundred bits and we're gonna make a donation to support the World Health Organization and their fight against Cove 819 all the cheers all the subs on this channel all quarter long we're gonna support the weld World Health Organization and their fight against kovat ninth teen death night asks how do you magically pop that box up on the screen am i the Fonz yes this is a service called featured chat if you browse to featured dot chat you can sign up with your stream your twitch channel and your twitch chat will appear down the side and you can choose messages to put up on screen when you embed the featured chat output in OBS our friend lucky number seven from the live coders team wrote this and it was debuted at twitchcon North America in 2019 really great stuff really happy with how this works it's and it's great to be able to show and and highlight what we're talking to it is it's a perfect extension for the channel I completely agree there confuse Laila I hope I and I hope I pronounce it Oh for you the feature chat is beneath the speech-to-text right if you have closed captioning turn so here's the thing closed captioning here on Twitch there's a button it's usually somewhere right around here it's a little CC button because I have closed captioning turned on I'm broadcasting closed captions for this it's being automatically generated and layered into the video that's being delivered there are there's a gear or it's either gear or there's a button next to the closed captioning that you can click and you can change the location of the closed captioning the font size the color you can customize how twitch presents the closed captioning for you on the channel if that's something that you want to see if you're watching on YouTube you're on YouTube it's somewhere else here you can turn it on and off you can see it so [Music] confuse lele is confused about how to pronounce their name i'm yeah we're all confused it's good thank you so much for hanging around I appreciate you joining us today um you thought that was something I made gnarly yes I will take full credit for it and then my friend lucky number 7 will be upset at me no I I don't take what wait who wrote that I didn't put that up somebody's messing with me here it's all magic I don't know I don't know where it's coming from but absolutely lucky number 7 put that together it's tremendous there's different themes and things in there and he's adding features all the time it's really great stuff and you're gonna see us use it during the live coders conf next week next Thursday 6 days away from our big virtual conference with the entire live coders team 14 team members bunch of folks supporting and moderating it's gonna be a great day I hope you check it out conf dot live coders dot dev you can see more about that so let's start building this is our dotnet standard project we're gonna put our objects in here that we're gonna share coming out of our micro service so that our web front-end can use it so you can also create it at the command line you saw me go through how to do this at Eden Visual Studio and we're going to add a reference in the backend project that's not spelled right and we're going to add a reference to our conference DTO we do that with add where is it add a simply reference I'm gonna add a project reference yep there it is it's another project in the solution so now it references it you can also do it at the command line very easily with the dotnet add reference command okay do-do and add it to the solution well I've already got it over here but that's the command Hague going to add it to it so let's make our speaker that we have sitting here in or in our models folder let's move it over into the conference DTO project so we can share that so we need that component model annotations package that defines exactly what where to go speaker exactly what these things are we need that in our internet standard project so I can right click on this you saw me do the dotnet ad package let me show you how to do this in a visual studio I can say manage NuGet packages come over here to browse and I can actually copy in the name of this it'll search for find that project that package and I can install it with a little download arrow button there and it's now my project yes save it so if I double-click on this you will see there it is and you can always type that in if you feel like updating XML it's always there so now I have that available and we're gonna go into the backend application and we're gonna chunk this out so it's actually inheriting from the conference DTO speaker object well before I really do that I mean I'm gonna copy this object paste it over here so I've got my speaker object and I'm gonna change my name space because this is in the conference DTO project there's my speaker here I don't need class go away class 1 we don't want a class 1 we're not first class we're third class sometimes and the original speaker that's over here I don't need all of these features and I'm going to inherit from conference DTO speaker remember I showed you this inheriting thing it says well this speaker is a more defined type of speaker so this contains the generic reference of well here's what it looks like but we can add other things into this file that are appropriate for the storage and retrieval of speakers so let me come back over here and it wants me to run this to show you that yes it does work and nothing has changed it now still brings up the speaker information still shows it looks great blah blah blah right yeah that's a thing [Music] let's see what do we get here mmm Oh what did you do I see a clip C sharp Fritz was act yes my my P o box does accept accept parcels if so there if anybody you're always welcome to send me anything I have a pl box listed there on the twitch channel just below the video in the about Me section if you want to send me something you want to send me art something had to wear whatever take a look it's right over there everything continues to build just like we said and if I open up the speaker's here well now it doesn't have that XML documentation being generated by this project so I kind of lost it here we can pivot and go find it and tell it where to load this data but for the purposes of getting this to work right if I tell it yeah try it out go get the speakers and there it is it still loads my data so it still works that's great but we need to add more we need more models and things in here so we need information about attendees so we're gonna add an attendee class into the mix here so these are just more model classes that are gonna help to round out over here that are gonna help to round out our our project that we're building here so there isn't too much to really see with these they're very much doing the same thing that we did with our speaker object ID name user name email address along with some constraints around those attendee properties that we're going to create and we have another one here for session so we can define the sessions that a speaker delivers so I'll create a session and it's funny it's a session class shouldn't be a class class so now we have sessions scroll down here and here's the tracks right so we have tracks in a conference the live coders confess only one track that's okay we only need one track we're just that good so there we go we've got a track now and we're gonna create some derived models so if we think back to the the database model there were different ways that things had to be connected right we had session speakers that referenced a session and the speaker who is delivering that session because we have this many-to-many relationship in relational data so we're going to go back over there and we're going to rename our models folder to data and start adding some of these other capabilities here so I'm going to f2 there and call this data and if I open this up did it rename no it didn't I wanted it to rename that namespace everywhere and it didn't can I so let's create a session speaker this is that intersection like I was saying that many-to-many relationship and this is this is where I'm starting to pick up speed we took some time really explaining what each of the fields and how a class worked well we're these are more of just the same types of classes here that we're just creating and interacting with so I'm not pulling that out of conference DTO we actually want ya we're gonna create our own session objects over here we need a session attendee object I'm gonna watch this I'm gonna cheat a little bit here paste it into the same file and I can control dot on this and say move it to its own file and it did it's right there so I'm gonna continue to go through here we need an attendee object right that has a collection of session attendees for the various sessions that they're attending let me paste in some of these other ones here's our session object so there's our session object in the backend service and it's got some other things here that you need to know when you're writing to the database how it relates to other write a session how it relates to its speakers and how it relates to its attendees and what track it's a part of right those are important things that you need to know when writing and interacting with the database we need to know what a track is so let's add a reference to the track and the track has a collection of sessions fantastic will I think I already updated the speaker right that was the first one so now I'm gonna do that same control dot and see move type to attendee CS I'm just gonna go down the line here and move all of these files out so we have one class in each file that's a nice way to organize things by having one class in each file it means that you only change the file because the class changes right it helps to limit any any friendly-fire any accidental breaking where you may have accidentally changed something else that doesn't relate to this class thank you for the follows is that crisp of ponta and a neat neat pic thank you so much for the for the follows appreciate you joining us hey Nikki yep we've been going for more than three hours now so now that we have all of those objects we need to specify how do you save it how do you get those into the database we do that by putting more entries into our database context so we're gonna define I don't wanna talk about model creating yet I wanted we're gonna define we had we had speakers in here as a DB set right a DB set says this thing's a table well we're gonna define these other three four sessions tracks and speakers right so let me take that and replace it so sessions tracks speakers and attendees there we go that's what it was so we have those four tables defined but there's also a little bit of this many-to-many right we define those many-to-many relationship objects right what a session attendee was and what a session speaker is well how do we tell it that relationship between these objects so in entity framework we have this on model creating method that you can override and specify how that relationship exists so for an attendee it has an index for a username and the user names or you meek so we're specifying a little database information from here in dot next we're gonna right we're gonna generate a migration that updates the database appropriately and a session attendee has a key that points to the session ID and the attendee ID because you can't write you can't have the same attendee attend the same session twice so an attendee can attend different sessions but they can't add the same attendee you can obtain attend the same session more than once same thing with speakers speaker will give a session but they can't give the same session with more than once right they might do a rerun of the session at a later time so you can work with a foreign key attribute yes we're not gonna be using that today oh there's plenty of time here plenty plenty of time and let's make sure that everything builds here so I did it alt be you to build there it goes build succeeded it says over there and at the package manager console I can add migrations and update the database so it right so that it knows here's how the database needs to be updated I'm gonna do it here at the command-line I like the command line for this so it's going to build and add that refactoring migration so it knows where things reside where that goes so there we go so now we have that refactor and I'm gonna update my database with dotnet EF database update dot Nate entity framework tools work with the database here's the verb update apply all those updates that that we just made to the database and here it goes build started so it's rebuilding because it just added the migrations for all those new objects we created done very descriptive done okay you know that's great if we look over here we look back at that migrations folder right there was the initial one we created in the last here's the refactor and you could see all the things in the up that it added right there's attendees there's tracks there's sessions right then the primary key for it and it also created session attendee and it created session speaker right it created these other tables because we referenced and said that they exist as a connector between these other two objects really neat and it managed and if we go back to our DB browser for this and we reopen that database and it's sitting right there there's all of our tables built for us in fact if I look at speakers browse that table it's still left my entry right where it was great oh my gosh death night I'm flattered really I'm I definitely want to do more of these workshops um I I think we have an update to the Blazer workshop we need to do and I think we're almost I'm almost done the Blazer for web forms developers book I think we want to do a blazer for web forms developers workshop in May is gonna be an interesting month maybe in May but I think we can do the Blazer workshop later this month I think we'll see but that that is very kind of you to say thank you so much this is a one day one video right through and it'll be one really big video over on YouTube I tried breaking it up into smaller videos before and smaller videos hmm they don't get as many views where does one pre-order of the book no pre-orders necessary it's completely free it's a PDF that's gonna be available from Docs Microsoft com oh gosh dukkha soft um thank you so much that's very kind and veronica hex is already falling in love with blazer cool I'm glad you're enjoying it you're not backing it up this Thank You SMAP the the workshop that I gave with with our friend James Monta magno we lost it we lost it and fortunately SMAP how to recording the messy coder is here happy Friday to you my friend the messy coder is another member of the live coders team welcome in so good to see you we're working through this workshop here so now our speaker's controller how we fetch and interact with how we interact with our speakers it's a little bit different there's a little bit more going on here that we need to get back because not only do we want to get speakers we also want to get the sessions that they're including that they're that they're presenting and we can do that not just by saying well context speakers and to return those speakers but we can say include the sessions that those speakers are at and then include the actual session information so you get back one block of information that you can present on screen so let's let's update this in our speaker's API controller and and you can see right this is adding just a little bit more definition right using a technology called link right link stands for language integrated natural query it's a cue on the under linq you can see the reference right there but it lets us do this very fluent API here speakers no tracking I'm fetching data you don't need to track what I'm doing here and include the session speakers object then include the session and now this is telling me it doesn't know what this is [Music] why doesn't it know what that is did we update the speaker to include sessions speakers did I forget to include that in the speaker object I did oh no hold on friends hold on so there's that property of these session speakers everything right there is it okay good everything lit up highlighted that it found it all right I may have to build another migration I may have to build another migration okay built succeeded let's try adding another migration refactor part two you can the name of your migration can be whatever let's if it finds that it needs to create a migration it'll create it or I could down and create a new one I could do that too you're right you're right Johan there we go mm-hmm then let's see what it created refactor port two nope didn't create anything so I could actually remove that see so dotnet EF migrations remove and since it didn't actually do anything will remove it right there it goes and it's gone and everything still works so ok Kamal asked a good question what's the difference between in my collection and a list it's a good question let me put that up there there it goes and there was Walter has that rolled right over I shouldn't have rolled right over you got a 24 cup of madrenas fantastic but I wanted to focus on Kamal's question and come back to it here there we go what's the difference between an I collection and a list so I'm trying to think where was the I collection it wasn't session speaker there so when I collection is an interface that defines that this is a collection of something it's a generic collection of speakers a list is a concrete definition of a of a collection that allows you to add and remove items and I collection lets you add and remove item I believe it lets you hadn't remove items as well but it generically defines it because the implementation of this collection when it's sent over to the database we don't know what it could be but we do know that it implements an AI collection it could change at some point so by staying with a very generic interface a very simple interface that isn't a concrete implementation we can have our session speaker objects send back to us appropriately and it doesn't break our code each time digital drummer J asked will this session be available later on vaad and YouTube sure will yep yep yep absolutely it'll be available on the YouTube all right so we updated the application context we updated the refactor the API controller so that's nice that we have a little bit of this searching put together here inside the API controller but that's database logic and an API controller shouldn't have to do database logic right this is a little bit of application architecture discussion your API controller shouldn't know about the implementation of how it gets the data it should know reach into this object get the data get it from the repository painted on the screen or or send it out to whoever requested it so what's suggested here is let's create a speaker response object that is a collection of sessions so I'm going to you know and I'm just going to grab I didn't work where to go I should have just done a control after go find it get back here there we go so let's create this in our conference DTO a speaker response because this contains a little bit of a payload that we're going to bring from one server to the next and that payload is our collection of session objects so okay we and actually we're implementing this is a speaker as well so it's a speaker that has sessions right I don't care about the middle table I just care about the speaker in the sessions so that's what we've done here is we've we've dropped out that middle information that we don't need thank you for the follow is that zhannar double O one hey coding with Jerry is here the YouTube channel just like oh just like the github the Twitter c-sharp Fritz real easy to find Thank You Veronica for executing the YouTube command there kamal asks a question here can we use a virtual list of session speakers or is it okay to use that so that the change tracker is able to track the records you don't know if the collection implementation is going to change it might not be a list someday it might be something else and so at by using I collection it kind of gives you a little bit of a little bit of what's the word I'm looking for future proofing that's a good way to describe it a little bit of future proofing by taking that most generic of interfaces to reference it you can do this I think you can I'm nearly positive you can do this but just a future-proof it take it down just a notch to the less to the more generic interface reference and you should do well so yeah death night I went when you're referencing something that implements my collection or implements ienumerable in the same case if you can reference that then when the implementation changes your code doesn't break so and particularly when you're crossing application boundaries use interfaces as much as possible so that you don't run into any kind of binary incompatibility and that'll help so yeah there's a link in the chat if you're if you want to if you want to check out and explore around the code you want to navigate around maybe you have Visual Studio or Visual Studio code open you can do that you can even browse through in your browser open another tab throw it on another window and as I'm talking through what's going on here you can certainly browse through the rest of the solution right there in your own browser or in your own visual studio check it out click that link that's in chat from stream elements when that timer pops up it's completely free for you to click through and use if you're here on twitch if you're watching on youtube click the link to the source code you can navigate it there okay so this is our speaker response object and we're gonna create an extension here just a class that does this mapping so that we can take a speaker and go get those sessions and turn it into the appropriate shape that I want to actually present right this is separating our database from our presentation layer you might call this even a view model because it's it's the model of what we're presenting in the user interface for folks to be able to interact with so in our back-end data when we fetch data there we're gonna create into the extensions and we're gonna add this there we're gonna add this method I think we're missing we are we're missing a curly brace there so that was in the data folder we'll call this entity extensions just to do this mapping right I don't know maybe I was right there we go and this is going to be a static class as well there we go now I don't you look there we go so we're gonna take in a speaker object and we're gonna turn it into a speaker response that we're gonna return right that's what this arrow fat arrow is is it says when this method is called return a new speaker response and here's how we map and turn it into that specialized thing that doesn't include those session speakers that so now we turn our get speakers method in our API to map right we're gonna map that out so that we get our speaker's format it very nicely here so let me save that I'm gonna go back over to speakers controller in here right paste that in there it's doing select map speaker response right just like you would do in a relational database or whatever database right you're gonna select out something and you might choose specific fields you want return from your table something like that well that's how we change this in our return type is now not a ienumerable of speakers it's not a collection of speakers it's a collection of speaker responses and we're going to get our using statement in there as well cool right we're gonna do the same thing with the get speaker method here right so right so when it gets just one speaker at our conference we'll paste that men and this is returning the speaker response there we go everything should update here in just a second there it goes so looks good all right this is saying to remove put post and delete speaker on the speaker's controller that's I don't think we need speaker exists either cool all right let me take a look let me I think this is a good point to pause and take a look over here at the chat room see if we have any comments any questions we need to follow up on death night every time he does that I wait for the calling number in the call letters reminds you of a radio pitch for a commercial break thanks so much for tuning in you're talking to you're listening to C sharp for it's right here on www.twitch.tv/sonictrent nice guys over we'll open it up and you can call it I don't know maybe we will do that maybe that'll be fun so I need a good radio DJ stick write something that sounds radio DJ ish that we can respond to I don't know so we'll figure it out we'll do something there right good good good good I have the cadence info well thank you so here let me confuse Lele has a good question here and and this is another application or architecture thing why not have the logic for map speaker response in the constructor in speaker responsive that's another great idea sure you could do that actually no you can't I'll tell you why you can't so the constructor for speaker response it you can't put map speaker response in here because map speaker response knows what session speakers are the speaker object here right this is in the back-end service knows what knows that relationship the DTO object doesn't know that relationship this that session speaker relationship table is a database concern we as as web browser consumers web users of this application we don't care what session speaker tables are we care about the sessions the speaker belongs to so we can we can make this go away with a little bit of magic right with a little bit of magic we can make it go there we go phone in for its day that's not a bad idea we might be able to do something with them is that abstract has a question for us here what's the difference between putting static extension methods in the static class versus in a non static class good question very let's talk about that so by putting this a static class like this these are called extension methods I didn't I didn't explain this - well when I created this um a static class only holds static methods static methods and Static entities there's only one of these in the entire application so this method Maps speaker responds it hangs off of the entity extensions v1 into the extensions class but it's an extension method because the object that we pass in the parameter here starts with the keyword this and that's a trigger that tells the compiler oh well go find this type and this type speaker is the back end data speaker and in extended add a feature spot-weld on to this this method Maps speaker response ending end skip this there is no other parameter to pass in here let me pause for a second because we've got a hundred percent sentiment in the chat room everybody's happy havin a good time here and I hope you out there watching the recording or having a good time as well and you're learning a lot let me know drop me a line on Twitter on the YouTube channel or even over here on twitch we're always happy to hear from folks that are watching the video so this is added as an extension instead of on the session the word ago the speaker object over here because right by like putting it over there it keeps this class since we're using this to persist to right back to the database it keeps it clean of those methods so it's just the properties that we're saving and reading back and forth from the database and we're extending we're adding these features to it there aren't exactly methods for each instance right or it is for each instance there aren't exactly methods we want to pollute the logic for persisting and working with the database and and the brave Cobra does make a very good follow-up point there let me make sure I share this classes that use extension methods are harder to test and you cannot mock them out it is so right you cannot test this very easily using one of those unit test frameworks we talked about earlier very good point [Music] Johan what will make me sad no dotnet Kyle if you say boo does that bring but we're at a hundred percent everything brings the sentiment down at that point so yeah don't make me say is this Chi dev rim asks can you make desktop apps using ASP Nets the answer would have been no but what you're seeing folks do is asp net core is hosted inside of a console application so what folks are doing is they'll write asp net core applications and host it inside of an electron application an electron application is right it's a it's a window frame it's an application frame that hosts the chromium web browser so it's just serving from a web server and folks who use chromium based electron based applications like Visual Studio code teams Dischord slack it's just an it's it's a chromium browser hosting a node application and serving web pages that you're interacting with and trafficking data back to the web server where it makes a decision maybe so folks are doing this with asp net core more and yep there we go there's a link to electron net is one way that folks are doing this there's an interesting way folks are doing it with blazer the Blazer framework and will look a little bit at blazer later where they're using blazer with an application frame that's cross-platform compatible that uses even less memory than the chromium browser so you serve blazer components and it hosts inside of it and you get a lower frame lower processor and memory usage so folks are trying that out as well so the answer I would say is yes but it's not a recommended thing that the asp net team says go out and do there are open source projects that go out and do that and there are some tremendous experiments to support that thank you so much for the feedback I really liked that discussion thank you so much Kai for for asking the question really happy to to talk that the bot is Fritzing out what did the bot do can't stop the bot can't stop no we're okay you run a blazer application using Kestrel locally on their machine says Marcos voice programmer cool why are we using virtual what if we have lazy loading enabled context and you could do that you can certainly do that we were passing across the boundary here across application boundaries you don't want to lazy load this you want to eagerly load this and pass it out you don't need lazy loading for this we're passing an API you're not gonna go back and reload data right we've cost it across an application boundary so you can't really do lazy loading at that point right load it all at once and and output it and it's a simple database format so doing the aggressive loading and bringing back the entire data set isn't too hard jean valjean comments that entity framework works pretty good with mysql and uses it for a few projects yeah the the point of entity framework is to abstract away the database implementation whether it's MySQL like we're doing here with sequel Lite or sequel server or Postgres or Oracle it all works with the same language here in my c-sharp code and you have a translation layer that turns it appropriately into the SQL to interact with the database yes it a link does trigger the bot well food bars and isn't the link right I can write something like what school at bing.com and in answers the fritz pot is eager for social interaction at these these trying times dotnet Kyle thanks for the resub thank you so much I'm much how far back did that happen tonight I missed that some time ago seven minutes ago my goodness I'm sorry appreciate it and with every sub every cheer here on the channel we're gonna make a donation to the World Health Organization to support them as they fight the good fight against kovat 19 and get us past a little bit of the problems that we're having here get us out of quarantine so Thank You Kai I appreciate the kind words Nikki asks a question I want to get back into the code here but I want to make sure we touch this question for Nikki do you need a data access layer da l is the three-letter abbreviation three-letter acronym for data access layer something like a repository pattern if you use entity framework no you don't we are using a little bit of this is a little data access pattern ish because we are putting all of our data access in our back-end micro service so all of our entity framework all of our database interaction is in that application so effectively the entire back-end service is becoming a repository so it's not bad you can do that you don't have to and it's a question of how far do you want your data concerns to pollute your the rest of your application right this is a little bit neat and tidy putting all the data concerns in one place which then feels more like a repository pattern if I add my my choice I would encourage more of a repository pattern so you can hide those database concerns and switch out your provider at some point in the future so thank you so much Johan with the five hundred bits cheer fight the fight so that we don't have to say fight the fight stay home absolutely stay home enjoy tune again I have some fun with us asking questions and having a good time here and and they you've seen the link for the live share if you want to join in and those 500 bits will make another donation to the World Health Organization get them some support in fighting the fight against covet 19 all right so we've got our map speaker response here so we've got things formatted appropriately and there are other classes that are available out here in the save point folder you can click through and see exactly what these look like we're gonna do the exact same thing with all of these other objects you're you're welcome to download the source code and look at it it's very repetitive I don't want to repeat the same thing again and again and again so I'm going to go into the safe point folder that I have here on disk and just copy in those features right we don't we don't need to see how all of those are structured like I said they're pretty well the same so this is the folder to back-end completed and we're gonna grab each of those response objects in the conference dto project here and I'm going to go to that same folder in another and I'm here in twitch workshop conference planner conference DTO and we're gonna copy an attendee response session response conference respite uncie conference response tract response in tech I don't see those other ones hopefully they're somewhere up here paste those in Shore and if they should appear down here their session response speaker responsible where'd the rest of these go let me go up and see are they and are they over here no don't see them over there either where'd they go they're not over here either that feels weird they should have been there and the other update is the entity extensions class with these other new methods here so that was in back-end data mm-hmm there it is open Thank You entity it's work my entity extensions class go where'd they go [Music] did I put it in the wrong place into the extensions Oh create an infrastructure folder I put ideas I put it in the wrong folder nuts all right let's move it add new folder infrastructure and I'm gonna move here to there yep good move it [Music] right and yeah good so we're gonna update that with the one that's completed that has these other mapping files other mapping methods so going up one infrastructure copy that in yep replace it so map session response so if we have a session go get the session speakers and bring back the speaker information and bring back the track information map a speaker response there those map attendee receipt I don't have an attendee response class did I it's got to be around here somewhere where'd I put it right is it out here do we have a way late in the day here in the backend service data nope don't have those other responses where'd they go oh because they're in the DTO project there's a tenday response i'll copy that one there we go so there we go that updated good all right who a terry andrew davis this is the asp net core workshop you can see get a link to the source code there and follow along if you'd like there's also a link floating in chat you'll see it pop up every now and again to get into the visual studio live share if you'd like to participate that way as well so i copied in a lot of these right these are a lot of the same types of things and there's the ability to upload data into this we added the ability to upload because there's there's a bunch of file a bunch of data that it makes sense to have loaded see actually see some some data that kind of looks familiar here there is a session eyes loader there's also a deaf intersection loader here for the Deaf intersection for the Deaf intersection that format that that conference uses for their their their sessions so I think did I put it where is it I've seen it here there we go copy these two now copy session is also and I'm gonna go update you don't need to worry about what these things do just that they load data and save it to the database okay so it's it's a data loader here that loads data asynchronously from some file for the dev intersection one it takes in a file and here's how it iterates over the the JSON in that file and writes it to the database this isn't what we're trying to teach here today how we load data into a database but it's stuff that we're going to use just so that we can load data in there and what this is suggesting turn the option to display enum says strings yeah [Music] right it was under options swagger doc here so you'll see what this does for us in a minute and there is a file here for in DC Sydney 2019 there's a couple other files in here as well there we go for other conferences that we've presented this at in the past tell you what let's grab yeah let's grab NDC Sydney 2019 and open that and I'm going to I want to view the raw version of this yeah raw there all right I'll save this file to disk just so I can upload it right ASP actually sure I should have this on disk shouldn't I it's probably out here somewhere right right because I've cloned this come on Jeff think this through you know what you're doing maybe I don't back end data import all right so maybe I already have it on disk back end yeah well that's my version that I'm working through dude a little source back-end data import eight there they are will load one of those files so we get some sessions here that we can look at its a session from another conference would be nice if I had one for the live coders conf but I don't and I don't want to spend time building it I want to get through and build the next thing so run the application to see the updated data via swagger you I use the swagger UI to upload with the API sessions upload API so let's do that so I'm going to start and we'll have updated user interface here with all these new features that we have to interact with the data for all those different data types of our conference sessions and tracks and attendees and all these different things and we'll be able to get in here and take a look coding with Jerry asks where'd I get the Hat this is a custom hat that I made I had made at my local embroidery shop and I had it made for the visual studio twenty twenty nineteen launched coincidentally was a year ago this weekend and I was the emcee for part of that and I had two of these hats made one for myself and one for Scott hunter has the other hat so look here I can get speakers and here's information about the various schemas those other controllers didn't appear then we didn't we load controller we didn't load controllers in here I forgot to copy those over didn't yeah I need these sessions controller in the attendees controller so let's go back over here controllers so I want these sessions and attendees yeah all right copy those into my version because these are these really do all of the same thing that we have been doing right so try this one more time Terry Andrew Davis has a question let me come to your question here in just a second Terry I want to get the data loaded up here and and we'll come to your question it should be loaded any second now here we go and interface just like I planned so we're going to upload sessions there we go post into API sessions upload so I'm gonna post there try it out format is that's kind of crummy which one is zero and which ones one this is a sessions rank wasn't that it where's the upload there we go conference format and it was 0 and 1 so 0 is session eyes that's what NDC uses so we'll browse let me go get the file see do ASP that workshop and I'm gonna drop down into the source because it's here under right it was data import and let's grab NDC Sydney 2019 and load that data it's gonna go through and did it work I got a 200 okay so that's good so give me all the sessions let's see what all the sessions look like that we're gonna load now and here's my response body there's there's the session from our friend Heather downing if Heather's out there watching look at that the care and feeding of software the care and feeding of software developers there we go so all kinds of stuff all loaded up from that json source file and now it's in our database that we can work with as we continue through so terry had a question here let me make sure i put this up one of my thoughts on using auto mapper to create mapping profiles for mapping the dt o--'s instead of the manual mappings auto mappers great for exactly this Terry makes a very good point here um absolutely great way to do this if you want to use Auto mapper um we don't have that many objects here so not that big a deal to do it by hand but Auto mapper from our friend Jimmy Bogart and his open source community is really great for that and I could tell you really liked it because a hundred percent sentiment at the chat room are you kidding people know me you must and you love the the workshop thank you so much for the 100 percent sentiment that is tremendous so I agree with Terry checkout news Auto mapper to help map your details that's a really great idea let me take a look here let's keep a look at what else is happening here in chat doo doo doo doo doo doo doo doo doo okay there was Terry Shane Boyer is here he helped write a little bit of this workshop Shayne okay you over there she there you Jeff has swagger while showing swagger that's right bring it all right um let's see what else is going on here in the chat room let's make sure we capture everybody wanna paradise I didn't turn the thing back on let's turn that back on is this asp net learning you bet it is all day long for beginners were going through this vertical slice okay Johan with a comment about Heather downing she's an amazing speaker Heather's a great speaker and in if things work out I'm gonna I'm gonna tried invited invite Heather weird she's very interested in joining us for our 12-hour session that we're gonna do in two weeks two weeks from today 12 hours on stream next week we've got 14 hours with the live coders two weeks out the week after that 12 hours here live on stream as a reward for hitting 10,000 followers on stream Thank You Terry for the follow all right how we doing dude dude there's a link to OTO mapper fantastic I think we're good all right let's move on that's the end of the second module and that only took us an hour and a half we got to pick up speed here friends we're never going to get this thing done so now we've got now we've got sessions that are available in our back-end data service they're being saved to disk inside of a sequel Lite database in sequel Lite database that's pretty flexible easy to use it works on every platform including Windows Mac Linux iOS and Android so let's start building the front-end a website that can actually start reading from this API we're not pushing the folks through this swagger API this open API user interface so they have to interact with it um we're getting there Neef we're getting there coming that's that's coming up I think it's another module or two down we're gonna get to security and and at that point the the the police lights I need to have police lights come down a visual effect I have police lights come down from the top of the video and-and-and Klaxons go off to summon our our friend on the security team barry Dorrans barry is the chief security officer for for the.net frame frame works and tools making sure that that things aren't published that that are insecure so we're gonna add now a front-end project that's gonna consume this is going to be our web front-end that is gonna let folks interact here with with this back-end service that we created so let's add another project you know at this time let's do well in the command line I showed you how to add a project here in Visual Studio let's do it this time on the command line real easy to do so I'm gonna clear up let's shrink the font size there a little bit because you can see the font over here what I'm doing I'm going to add a front end project let's go up there we go and dotnet new web app - Oh front-end and it's going to create a new project in a folder called front end that's what - oh is it says output in this folder now we're gonna add a reference to the conference DTO project right that's that shared library of things right the the various data objects let's add a reference I mean I'm not in the right folder dude no no you add that reference right here come on no it did it alright and it didn't add it to the solution file we need to add it to the solution file as well so dotnet SLN add front-end that should work yeah there we go so now it's in the solution file so before I delete any unwanted content check this out Visual Studio says oh the solution was changed let's reload it and three of three projects there's my back-end project close up you close up and now I've got these circle patients I'm still trying to ask you to close up thank you and here's my front-end project right here so next we're gonna get rid of index we're gonna get rid of the HTML content on the default page here and we're gonna start we're gonna start making this do some more than just display some static content this is a front-end web project it's a web project it references our conference DT OS and it's a dotnet core three one project I like to have the framework as the top item in the project file that's just me it feels right to have it at the top inside of our project we have several different folders here properties is just a collection of properties that says here's how you launch the application we've got our dub dub root folder here this is a folder that contains all of the static content that we don't want dotnet to interpret everything that you're just gonna serve directly to folks browsing the website goes into the dub dub dub root folder here CSS JavaScript any libraries that we might be referencing like jQuery sure your fav icon end right we have our classes and things hanging out here but here's the razor pages these are the page first page centric models that we can use to build our application they're right here and we're gonna start inside that index file these are razor files that very mash up of c-sharp and HTML so you have some HTML down here and you have a little c-sharp at the top and every c-sharp statement starts with the @ sign so we have these directives these single line items up here at page this is a page this is intended to be served as a page from this location inside the application so because I'm inside the pages folder index is actually a default page name so when you browse to the root of the application you're gonna get this conversely well similarly if I go to the privacy page here this is at page here it's gonna answer on the name of this file so privacy but I can change it I can have it listen on a different name maybe I don't want to have it listen on privacy maybe I want to have it listen on Briggs it's for the win and I want it to listen on that location you can do that and that's where it will listen and that's where it will respond but typically you want it to listen on the same name as the file name it helps with discoverability for your developers that need to navigate through this okay something happened in sentiment is - - what's going on there in the chat room um scrolling up here do let's see lemons galore how does the speaker response object handle errors what if there's an error when posting a speaker to the database that's different you'll see that a little bit here we're getting there it's coming all right dudes it - there we go yep stream started at 10:00 a.m. Eastern let's see was this from you looks I've lost the thread of what you're talking about there live shear did live sure go oh because it restarted Oh rats because it reloaded all right let's kick live share here make it read-only and I'm gonna update the live share there we go and here's the live share link sorry about that friends must be halfway know or not nope so alright so this is the content here that it displays on the home page welcome to building web apps with asp net core hmm it's lame let's get rid of that and we're gonna start wiring up a client and an HTTP client to go fetch data from that other surface so that it always gets our content this API client is what's going to handle the errors is going to behave appropriately for us so we're gonna create a services folder here that's gonna contain information about how we interact with other services so I'll create that folder and I'm going to create my API client and it's not a class this is an interface that we're implementing right just like we were talking about I collection earlier this is a generic interface that defines how we interact with our other services so copy and these are the methods that we want our website to be able to interact with from the backend service get sessions get speakers get sessions for a speaker right get a specific session maybe get a single speaker put a session upload a session add an attendee to just create an attendee right get an attendee based on their name and delete a session so these are what we're creating an art default API so now we're gonna set up the API client the HTTP client so that it knows how to make requests to web servers hey doctor fracks good to see you so let's add this package I'll do this at the command-line because why not that's where we are there it is on the command line add the package [Music] good all done so we have that reference now let's create an API client that's actually going to use that HTTP client right the the to be able to make requests to other servers so I'll add a class API client there it is let me copy in the source code and let's talk about what this is doing because this implements all of those features that we just described in the interface and I'll scroll up here we'll fix some of these red underlines yep get our using statement in there we'll get another using statement over here one more down here here a using statement there using statement everywhere a using statement Old MacDonald had a using statement ee i ee i oh okay got them all so let's talk about this control-m ctrl o collapses up everything so you can see very clearly these are just the methods that we declared in our interface and we're going to implement that interface ok so we've got our generic definition of what a client an api client is and here it is and when we want to get let's get a session right when we want to get a session we know because we when we built the backend the backend services right we have our sessions controller and it has a method here to get a session well it's listening to retrieve this session on API slash member controller with square brackets is the name of the controller before the word controller so API slash sessions and if we pass in on the the ID it'll retrieve a session so that's what's going on here go to slash API slash sessions whatever the ID is we've requested now this dollar quote turns on a feature in c-sharp seven called string interpolation so you can change your that your string to start interpolate it by putting curly braces there so this is all text curly brace whatever's inside here now is C sharp and curly brace so by just putting ID there it says well drop the ID right here in the string cool so this is gonna take the HTTP client and go get API sessions ID triggering this method and returning sessions now there was a question about what happens if there's an error interacting with the database if there's an error interacting with the database because this is marked as an API controller it will turn it appropriately into an error response object and return that to our calling method brilliant right if it doesn't find the session that you requested it'll return a 404 not found because it's not in the database not found so it knows how to do this brave Cobra we're gonna do that in our seven we'll talk about G RPC so really great stuff that's built in here to be able to handle this appropriately so got that all set up so now it knows how to go through and do these and if you look at the rest of these methods they're doing very similar things Oh get sessions we'll go to API sessions in return and this is the interesting part here right not just ensure success status code right this says well if you return to a file not found or something right file not found will return null here well if you return any kind of an error code throw an error is what this method does right there's look throws an exception if there's a problem there so it'll the API controller will appropriately format as an error this will raise that up and you can handle it appropriately on your page so different things you can do there if it did succeed it'll proceed into here and will return as a list of sessions the JSON that was returned to us really great stuff and I hope easy to follow along and see but now we need to give it the location we need to tell it well where's that web server running so you know where to go and find it is it running on bing is it running locally is it running on there on this cloud that cloud the other cloud I don't know so we need to tell it where it is well inside asp net there's a way to configure just like we had services on the backend we have services and startup over here that we can configure and we're going to configure our HTTP client so that it knows how to create an api client and pass into it a configuration that says well at nar configuration somewhere eases the location of those services those backend serve back-end services and we're gonna write that out and tell it well here's where you can go find it this HTTP client that were injecting and manage and into our service locator will be managed and passed around just like our database of our database application context was in the back-end service it's gonna manage how many instances of this the lifetime of it and pass it around appropriately but we need to tell it where that service exists well this configuration object is saying well go get the service URL where does it get that from in asp net core you can store configuration on disk in this app settings JSON file and it'll it's it's JSON you could put whatever content in here hierarchically higher hierarchic hierarchically in whatever format you'd like and you can traverse it from your configuration object with exclamation points I believe it is between the various things that you want it to navigate down exclamation point might be colons so can we transcript these streams and turn it into a book sure so we need to give it a service URL and this is saying to make it look host HTTP localhost 56 double o 9 but we're gonna need to make that wherever it is that this is being served up here so what I'm going to do is go up here into a properties and it's actually localhost 5001 is where this one is being served yours might be somewhere else so now it knows how to find it how to connect to that service and it's going to reuse my HTTP client right there so how do I get data in certain listing sessions on that home page here's what we're gonna do we're going to create an index model right this is some C sharp that sits next to that that razor template that CS HTML file that knows how to go and get that data so let's do that right here not sure here it is so this is our page model this defines how the the code that interacts with and executes behind that razor template you don't have to use a page model it's nice to have it available to you so that you can test and execute this thing directly if you like and we're yeah we're automatically gonna reference these things OTAs colons to separate those thank you to navigate the hierarchy of configuration its colons I get it confused between colons and exclamation points and underscores it's double underscores if you create the environment variable you can store these in environment variables and load configuration from there too but it was exclamation point at one point for something so and I keep yeah I get confused about that so we need to receive just like we did with the database object we need to receive our our input of the API client I'm going to keep that logger around - yeah I want to keep the logger but I want to add that API into the mix so let's kind of smush these together smush is a technical term for merging source code it's a technical term I've got red underlines we fix red underlines with ctrl dot there we go give me those using statements so that it as is adds the front end services reference there we go so now I can add some properties to store some of the data that we're going to fetch sure let's do that right we know what properties are we're gonna lay this out with some information about different data that we're gonna end up presenting on screen I controlled spaced thank you all right so we're gonna we're gonna go get sessions and put it into a property so we can paint that on the screen someday offsets right what are the the various days of our conference so that we can display those in the current day what's the current day that we're looking at so we're gonna get those properties and we're gonna do it when we navigate using an HTTP GET to this page right that's just like when you browse somewhere on github you browse to the Google you go to the Bing you go to the DuckDuckGo you put the in front of the names of all the search engines that you're referencing and right you do that HTTP GET you just browse you typed in the address and said go to this location you went to the twitch TV you went to the the youtube.com and you're going to get because you type that into your browser or you click the link and it went somewhere you're gonna get that data so one get when we do an a get of this page execute this code now I got a red squiggle here I need to change this into an asynchronous method and this is a thing with with with c-sharp you have asynchronous methods and you have synchronous methods asynchronous methods are decorated with a keyword async at the beginning and you can release the thread that you're working on right let it go do some other work and come back when it's done processing so asynchronously go get data from that other web server and we're gonna wait for it write a wait wait don't do anything else here go let the other threads do their three things when it's done processing resume right here and put the results into the sessions object so that's what a sink and a weight does here for us so we're gonna get the sessions we're gonna figure out what's the start time what's the minimum start time here we're going to determine what are the days of the event so we're gonna get the distinct dates of the event so select out the individual dates of each session start order by those days and we're gonna select out the different offsets for them we'll set up a little bit of a filter if there's a day selected that was passed in here and we're only going to select Outlook sessions where this is doing a filter where the sessions start time date right so this is saying for each session take a look at the start time grab the date and where that date is the date that we're filtering by that was defined here order by the track group by the start and order by the start time that key is a start time now we can put some HTML on the page I went through a lot there let me go back over to chat and see if there's any questions mmm can we automatically reference the service URL for the project settings no you can't going across to the other URL you can only reference the URL for your current project so yeah link is very Darryl Darryl code stuff is here yeah link is very flexible it feels as somebody who's a database very familiar with database I wouldn't say I'm a database person this feels like a nice database query here on lines 48 through 51 this feels it's like something that I can wrap my head around that I understand what this means I just need to know what the SS and the G's are that it's filtering grouping and ordering by but that makes sense to me right so let's go over to that index razor page and let's add some markup to output information about these I'll just post it right there so we'll have an agenda and they'll say my conference and year of my conference for each time slot in our sessions collection so model is the page right model is a reference to this class right to give you the instance of this index model in the dot sessions so that's the sessions property here that we set at the end of the on get all right so for each one of those let's write out the timeslot in hours and minutes right so we take the timeslot the date of it and read it out in 24 hours and minutes 24 hour hour syntax and for each session in that time slot write out put the title kind of makes sense and the the HTML around this it's pretty straightforward and we need to set up both projects to start at the same time I see a question there in the chat room I want to come to you in just a second I want to make sure I get to your question here before I go too far but I'm gonna set this up to start both the backend project and the front-end project so I can run both at the same time because I I need to have the backend web service running when I run the front end so I can have it connect to the two let me come over here to chat I saw a question over here um hypnotoad asks how do you get those nice arrows in your link instead of the equals greater then he's talking about these right here is what hypnotoad I'm sorry hypnotoad I assumed agender they're my apologies and there's also the double equals and the double plus these are called ligatures font ligatures and the font that I'm using here called Cascadia code you can execute the font command there it is SMAP executed for you has these types of characters in it and Visual Studio is aware of how to handle those if I do a ctrl Q and I type font we take a look at the fonts that are configured here there's a way that you can configure the font to do font ligatures and I don't see it here I [Music] thought there was a fun ligatures ligatures feature now I guess if it knows if it sees that it's a font that has ligatures it'll use them and it and it looks really nice it's it's certainly a little bit more readable the intent of having those two characters next to each other there's also you can do less than equal you can do greater than equal whoops I put if you do right that was if you put that does not equal less than and greater than next to each other right it'll put them together like that I can do like this and you can do right exclamation point equals right and when you get rid of the space between those it turns it into an appropriate does not equal so just looks more like the actual characters we'd like it to be vs code is the one with the ligature option that's it Thank You SMAP um angry little hamster asks what happens if you have a select a s dot start time question mark dot date here if the start time is null um it'll just make it no it'll just select null into the collection so what all of them do so it's good um when nods a very good comment here I like I like seeing this sometime somehow I felt like c-sharp is feeling like typescript in JavaScript funny thing the same folks that make typescript also make c-sharp so right that typescript is very much a way to bring strong typing into JavaScript and they're both object oriented so to to bring those features into JavaScript is tremendous and things features that are proposed from typescript are being slowly added to JavaScript terrific that's great everybody if you want this type of strong typing if you want some of these features in your programming language or the web if you're targeting JavaScript typescript is a great way to use that very good point when Anza you miss the Java versus JavaScript horses yep I have them turned off today sorry about that so and there's all kinds of high jinks that we have during the week during normal normal sessions together here on stream including the JavaScript horses that go running by we could use some buttons to allow set navigating to those different sessions on different days so let's add an unordered list to the page just below that h1 so an unordered list will create some navigation pills and for each day in the day offsets the collection of days of our event will create a list item that is a nav item and it'll be appropriately decorated that's a navigation link that's active or inactive and check this out over here we'll route it will generate a route when we learned about routes way early in the day here about for our back-end service we're gonna generate a route parameter for a day and we know what a day is for this because it's right there so we'll pass in the day as a route parameter based on the day offset and we'll just do a day of the week to string as the text to appear inside this navigation pill we'll see how that looks when we start this right now so it's starting it's compiling the entire solution and it's gonna start both the back-end service and the front-end service at the same time and load things up hypnotoad thank you so much for the follow I appreciate you joining us and I look forward to seeing you in the channel I mean if we've already had a couple nice questions there and happy to answer any questions no question is too simple today this is really targeted for beginners and to get folks comfortable with dotnet core with asp net core so here we go loading up you're gonna see actually two browsers open here if I did this correctly so this is opening on there we go so there it is localhost 5001 that's where we saw it working earlier and here it is up here there's the front-end to my application okay so we wrote a little bit of HTML it connects using that API client and copies and end write does a query it doesn't know that API client is is going across HTTP but there's nothing keeping us from having that access the database directly right I can use that same interface that I a P I client in in a blazer application and go across the HTTP boundary there as well but it queries and returns my data and it places appropriately here just outputting for this on screen and these are hyperlinks to look at the other days so I can see that data and notice when I click back and forth the URL here puts a day equals up here and that day equals that you see is being passed into that on get method that was written in our index right it's passed in here for us by asp net and it's using that as the parameter to do the query and bring back the appropriate data that's over here that's right Darryl so now those of you that are on live share it opened a browser for you to and you can navigate around the application if you're on the live share and right on cue Darryl well done points to you see the Darryl got some codes um the the bot just dropped the live stream link right as it went left um hypnotoad know the font ligatures are a relatively new thing that I have that are being used in the text editors so check out that link if you want to be able to navigate around I'll restart the app and and it should join you into the application running here on stream I'll start and I'll stop and restart this one more time so that you can see it running in your browser literally on your browser on your machine so check this out coding with Jerry asking about different libraries other folks use for different database providers okay that's a discussion for those folks so now if you're connected on life here you should get both of these browsers opening and you should be able to navigate around them and even more so I should be able to see your requests coming through both in the debugger over here and maybe in the info panel here so really really great stuff to be able to share and allow other folks to navigate around the application live share really is changing the way that folks collaborate so that you can get the most out of working together with your teammates while and I'll let some folks take some time doing this Barney hang on Barney of the rubble says I bet it won't let you work on Safari give it a try click through click that link there in the chat and see if you can get connected it should work even on even on a high phone dr. fracks exit asks a question let me bring that up hey there it is what's the idea behind blazer web components is it aimed at developers who are comfortable with c-sharp I don't want to dive into JavaScript or angular web components or is it intended to compete directly with the effort mentioned my concern is that it's another Silverlight in the making okay so let's break this down there's three or four questions there that I want to make sure we we land on blazer is intended to be a component based user interface framework that way you can build and reuse sections of of components um using c-sharp and and HTML CSS JavaScript wherever you're building an asp net application whether it's going to run in web assembly on the browser or it's going to run on the server side your choice of where you want your blazer application to run concerned that it's a Silverlight in the making is completely unfounded and I'll tell you why Blazer since it'll run on the server means even if for some reason web assembly gets turned off gets blocked in the browser um you still can run it on the server however it won't get turned off blazer I'm sorry web assembly is an html5 feature that every browser supports and thanks to our friends Specter in meltdown when we had that issue two years ago everybody had to upgrade their browsers even grandma at home on her web TV so when they upgrade their browsers they got all the latest features of html5 it even works on your mobile phones on iPhone Android and the like that support html5 so it's not Silverlight in the making is it intended for developers who are comfortable with c-sharp and don't want to use javascript angular and those things sure absolutely it is it's not intended to take over the world but there's a lot of folks that are comfortable with with C sharp and dotnet have a lot of business logic built they want to be able to reuse so use it absolutely [Music] when ODS ax asks a question you're about live share live shares breaking some company policies is there chance you can host the live share server for internal purpose so here's a really neat feature about live share you don't have to host a server it'll actually do peer-to-peer connections and it only goes to the live share server if there is if there is a slow connection between two endpoints so if there's folks in Australia and Asia that are trying to connect to me here in North America it's not correct connecting directly to my machine instead it's connecting to a server in the cloud and relaying through there but you can turn this on to not sure I've turned on shared servers but you can set this Ergo connection mode you can set this so it's only direct connections or it's only relay connections I have it set to auto so it'll decide appropriately how to serve and connect with those so if I set that to direct it will turn into a different formatted URL that you can share with your colleagues and they can connect directly to your machine no no middle connection required so thank you for the question one answer you're welcome dr. fracks that's that's kind of the goal with today is try and be clear and concise here and get folks in and and productive here quickly I'm gonna stop the application here's our friends that were on live share interacting with it I'm gonna take that away from you here and let's let's clean up that user interface a little bit more we can make sessions look better but by using bootstrap cards so check this out let's replace that list of sessions with some with some cards right go over here and for each one of these I think this is where we're replacing them for each one of the sessions so timeslot will create a row and for each session in the timeslot we're gonna generate some bootstrap cards it's a terrible Russian Russian accent that I'm imitating from rounders and John Malkovich Malkovich Malkovich all right um so I can save that and should be able to really quickly restart this because the razor doesn't get recompiled and everybody that's out there on the live share should get a new copy of the application starting right now yes Evan absolutely be really useful working remote with your group a lot of folks are using live share while we're in quarantine while we need to work remotely to be able to collaborate and navigate around code together in in full read/write mode it's very handy that a lot of folks right now especially or seem good success with that so now I get cards being output here for this and now I can see nice looking set of cards here for each one of the sessions in the event and it wraps nicely because it's bootstrap very cool I'm hypnotoad this is a common question I get would I use blazer over angular and view yes yes blazer is going to give you it the same support as as what you get from dotnet you're gonna get three three years of free support you're gonna get a fourth year of upgrade support so you can upgrade to the next version blazer is included Blazers server-side is included with asp net core 3-1 so you're gonna have great support for blazer for the next four years you can't say that about angular and view their open source the support you have is go read the source code when we get out an angular 12 is released you're not going to get support for angular 8 you're not but you will have support and you can pay for a additional support if you'd like for blazer so strictly from an enterprise application development point of view I'm gonna pick blazer over one of the JavaScript or frameworks every day of the week and twice on Sunday especially if my team is familiar with dotnet support is a big big thing here when you talk about enterprise applications if your startup and your folks are more familiar with JavaScript absolutely go with the JavaScript I'm not gonna debate you on that at all but you need to consider long term when you're building applications because you don't want to be maintaining the same application and the same features every day for years and years and years trust me you're gonna get bored and you're gonna find another job and then your employer's gonna have a real hard time finding somebody to support an a knows the ins and outs of angular 4 because that's the version that you developed with way back in 2018 so it's it's a thing that you're going to want to consider so debating with an architect with an enterprise feature about a enterprise feature is really hard it is your right hypnotoad as a follow up and this is a good follow-up question thinking of private personal use still blazer coming from dotnet and c-sharp that hate hate that you have to work with angular so if you're I use for personal use use what makes you happy you're familiar with dotnet and c-sharp use blazer you're familiar with angular you're familiar with JavaScript use angular in JavaScript nothing wrong with it nothing wrong with it at all but it's a question of how happy are you going to be to maintain these applications not just you but your enterprise your employer the company the investment for support when we talk about something that's going to be supported in the year 2030 these angular still gonna be around don't know blazer will be asp net web forms has been around for 20 years and they've committed to at least tend more and there's people asking for 10 more after that so when you think about long term applications that you're building you're going to want to go with something that you can support over that time and you have all the source code for blazer as well so coded beard has a follow-up comment they're writing home automation system with blazer running on raspberry PI's okay home automation system running on raspberry PI's you don't even have to drop blazer in that for me home automating system running on blazer running on raspberry PI's that's pretty cool that's neat blazer with that generally awesome I'm very happy to hear that I've never heard this term the Lindy effect means that something widely used will remain supported because of inertia by who by who who can I go to and pay for that support it's not Google angular is not bad no complaints about it and nothing against any of these frameworks but if you're looking for long-term support if you've already got great familiarity with dotnet uh Barney thinks that blaze will be another vbscript instance I patently disagree you're welcome to that let's see where we are in a year currently working on a voice assistant that works from a progressive web app on the Raspberry Pi turning out to be difficult without using cloud well yeah right there's things that you're going to want to bounce off of other services to get assistance with um deep is that is that draffa how do you pronounce that thank you for the follow um good luck finding somebody at Google just finding people at Google just finding a contact on the Google thing you can patent that sure how is page model going to behave when one page has many different get methods that's a great question they're abstract so if you have different ways to come in and filter and do this you can add different parameters to it so that it will filter and behave appropriately you can change the way that get method is prioritized and there's even ways that you can set up different handlers different handler names for that so that it will behave appropriately and answer differently so you can have different on get methods with different input parameters so different there's ways to do that I'm not going to dig into it here but you can I I'm not sure if that additional filter is here but there there's there are ways to add additional add additional get methods to handle those additional parameters so you overload is what it calls their having multiple get methods we need a session details page for this so let's add a session HCS HTML page I'm gonna stop so all are all of our friends that we're navigating around there we just broke them and we are going to add a razor page we call this session okay um come on finish loading let's go [Music] hey that noob welcome no I can't continue working you didn't paint the screen thank you and we're gonna put in the page model for this so we need an API client we've got some red underlines here get those in and we need a session response object down here add that there we go so now it's gonna receive an API client we have a session object that we're gonna load up the day that it's on we're gonna have that information and we need to add a page handler method this is that write a page handler that one get we're gonna output this so that it knows how to go and get that data there we go so on get we're gonna return an action result right we're gonna return that page we're gonna get the session for the ID that was passed in if we can't find a session with that here's here's the error handling right we can't find it right we got a 404 that bubbled up to us we're gonna redirect back to the home page go get all of the sessions and find the start date that look feels weird but okay we're gonna go get the start date for this and grab the day offset for that well we'll have all of the day offsets right no why is it getting this [Music] hmm that's the number of days that's the start date okay so I guess it's just gonna count up well we've built the user interface let's take a look at that so here's the user interface let me I'm gonna copy this in so we understand what's going on with this so session just add page model and then some content but now remember I mentioned we have you can change up how the page is handled where it's located on the page directive here so we have the this ID in curly braces it says this is a route parameter this is a parameter that's gonna be passed on on the URL that you need to capture and we're gonna do something with it and that's what's being passed in right there so we're gonna receive that and our model is that session model class this which is another page model and here's some HTML we're gonna output the breadcrumbs for the agenda with the various width it which day it is and the session title and will output here's the details about the speaker's about the abstract if there's an abstract and the name of the session so kind of makes sense when you think about what that's going to look like and if I I start this I'm gonna start this without debugging so it starts a little bit quicker we'll see what this looks like yes identity server you can use with blazer and blazer is not something we're focused on today that's another topic really for another day and another workshop so here this is loading I've got I've got two tabs in the same browser now which feels a little bit better so now if I click through into here's Heather's session so it opens up I'm in session page and see it put the URL on the end the session ID on the end there one write nicely formatted top they're using agenda slash day and write the number day it is the title there's the title and there's information about our speaker but we need to have this route and go over and tell us something about Heather right we'd like to learn a little bit more about other sessions that how that Heather is presenting some other information about you know maybe there's right we had bio and hyperlink there in our speaker details so right maybe there's some data we want to load up for that as well so we'll create a page for our speaker details so I'm going to add another page and it this feels natural that I'm adding razor pages that are specific to that I didn't spell that right that's not spelled right [Music] but I'm generating pages that answer for what are very page specific content so write it the the concepts that we're working through here match nicely so yeah see I spelled this wrong I'd like my cursor back please thank you rename that and it's it's not gonna rename these things I'm gonna have to do this by hand and I'll rename that file fix that alright so that works there we go yes I got that wrong and actually so let's update our page model for the speaker we're gonna teach it how to go and fetch information about the speaker which is over here know what some what I was looking for [Music] that paste it in there we go format it a little bit fix some of our red underlines there we go and get that speaker response object populated come on everything's starting to grind to a halt it's gonna be time to restart visual studio so nope there we go all right but we need a page handler so it knows how to go and get the speaker that's easy that's easy alright come on put that put that using statement in there so one get we're gonna pass in an ID we're going to get speaker async get that speaker information from our API if you don't find it return not found otherwise return the page and we'll populate that page so let's load this up look at this it almost looks the same as what we had before we're gonna receive an ID on the URL use that same speaker model object have some breadcrumbs at the top that say speakers and then our speaker name Heather in our case it use our keynote speaker the speaker name goes in in an h2 right and these @ signs are saying output this information from from the model right from the model go grab the speaker object and output their bio here and then list out the sessions that they're presenting easy we can add some object so you can do a search if you'd like let me run this so you see what the speaker page looks like so yeah it's the live share instance yeah it's it's transmitting so much data that it's having a little bit of a problem navigating around so when I click in here now I can click on to Heather and yes if you can see way small down there in the corner it's going to speaker slash 72 so there's Heather and here's her one session that she has as the keynote speaker and I can scroll down here and let's see let's let's find here's Brian Nowak right and Ryan doesn't have a bio listed but he has two sessions here and I can click into those and you could see who the speakers are and where and when they're presenting so I'm good that's nice I've got a little bit of back and forth there that I can do between those various instances and let's add some searching right we're gonna add a search controller all the way down the stack roller all the way down the stack oh my goodness so that we can do searching right this is right now we've got this vertical slice and a little bit of what Jimmy Bogart does right we've got a vertical slice now if we want to add a whole new piece of functionality searching I need to add a DTO something that's going to traverse across the application boundary I need a DTO search result that contains well here's the information I'm returning I need to have a back-end API controller that knows how to search the database I need to update my API client so it knows how to search and interact with that search and then I need a front page that knows how to actually serve the search now I think I've walked through a bit of this so you know how to do this so you can see a little bit of how you've seen a bit of how this works and I'm gonna leave it to you to be able to navigate through and look at all the different things they're interesting so sorry about that so this is all its we're gonna take the exact same thing that we did before and we're just gonna build it again except searching across the database searching through sessions for a search term searching through speakers for a specific search term and outputting that information so there's a lot of time there's a lot that can be done here to to update and bring out this data appropriately and what I'm going to do I'm going to cheat this is already built it's already available for you out there I'm actually going to go back and grab the source code for this because you don't want to see me type all this in that's boring right do I know I've only got the one open so let me open twitch workshop and let me open the source over here this is the finished code so I'm gonna go into the back-end service here and I'm gonna go into controllers and grab the search controller bring that into my back-end sir here does the exact it's the exact same source code that's just the finished code over there there is no search over here that's the only place that it's updated I'll go into conference DTO and grab search result and search term bring those forward to here so now we can search we have we have awaited trains to transport our search query term and the results of that search back ok and finally i'm gonna go to the front-end and go into pages here and i'm going to grab the search bring that in okay and i'm going to back up just oh i need to update the i think i already have it in the api client don't I because I brought it in there when I built that right it's under services no it's not here let's see it go under services and I'll bring these two in this is like I said the completed version so everything that we're going to get to is in here as well yep replace those two files so now I can add search the search page is on the front end which just outputs the results of your search or you can take a look at that but we needed a navigation item so I'm gonna go into the layout so here's how razer does layout this is kind of interesting we've looked we've kind of passed over the shared page shared folder this is where the shared assets that Razer uses and combines are located so it has this underscore layout by default this is the layout that's applied to all of our Razer templates and you see down here a render body method that's where all of our content is going to be placed inside of our application so it wants me to add this to the navigation pane so where those nav items are so we have home we have privacy I'm gonna put it right in between the home and the privacy links and you're not gonna format for me are you there visual studio fine just for that I'm gonna put a cue tag in there save that so now I have a search link yeah right let's give it a shot [Music] yep Pluralsight is free this month but there are no there are no authors out there listening and answering to your questions thank you for the follow of that noob appreciate it all right so there's the swagger UI here's my front end I can click search and now I can search so let's search for people named Scott and nothing comes back why does nothing come back maybe we search for while we know Heather is somebody and we're not getting Heather so what's happening let's let's do a little debugging here and see what's going on so our search page is over here when I click that link it should be doing an on get async and going in getting the data if I go over to the UI over here we try and do a post on search try it out and we're gonna pass in Scott do that and it doesn't return anything change that to Heather and nothing so something's happening on our back-end service that it's it's not finding anything why is that there's my search controller so it should be hitting here the search finding the session results finding the speaker results and gluing those together so let's put a breakpoint right here and restart this and see what's going on am i searching case-insensitive lis oh I bet you that's it in fact I know that's it I know that's it yeah include track where title contains that right so not only do I want to do it contains I want to say my string comparison is invariant culture ignore case right so that it's case insensitive and I'm gonna copy that down into each one of these I've made this mistake before let's rerun that and we should start getting some search results yep those bite you every time thank you for the follow the shoes welcome in is that the shoes are the shows not sure there we go alright so now I should be able to do a search right oh look at this we broke it what do we do oh my goodness it shouldn't have searched for anything yet hmm so we got a little bit of a problem there let's see if we can go fix that so let's do this let's put a catch in here right and let's say if string is null or empty the term return don't do anything let's see how that works I have to go in a few ads thanks so much for sticking around all day Evan really appreciate you tuning in and let's get this restarted here alright so let's try search again nope why is it searching I told it not to search search line 29 how to get there if string is null or empty right why does it think it's doing that shouldn't get there [Music] [Music] let's say here right try search we hit my breakpoint there it is term is null so it should return good and now we're hitting this again term is still no okay so we need a all right let's do model is a thing and I only want to go through this is search results he's not null he's I can kind of force that can't I yeah let's do this let's say search results equals new list search results Wow I think I'm typing too fast for life share we had Elvis there no you can't because model is always a thing [Music] and you need to fix that that should work [Music] yeah good not so when you use question mark dot like model question mark dot search results no no it confuse Laila that's a very good question can you do model question mark dot search results so when you do that syntax eat only evaluates search results if model is not null so in this case model is always something we want it to behave differently if search results is null so slightly different but I can I absolutely understand the confusion and I actually had that confusion just a second ago so yeah we came to a for each on null you can do a for each on an empty list and that's what we just provided there so that that handles appropriately there we go so now if we search for Heather still we get in there look at this whoo all right let's see if we can fix this one where did where did we break this so something broke back here look at this right a comparison type in variant culture ignore case could not be translated all right so this is this is because of how I tried to wire up the the case insensitive search right these so if we change this slightly right and if we say query is that to lower invariant then we can say title to lower in variant right and do the same thing with the name there and we'll do the exact same things down here and it's only on this where clause right excuse me there we go one more time let's see if we get this [Music] yeah the queries are gonna run client-side now they're gonna run the collation sequence on the database I don't want to I don't want to have to do that the database is a separate concern I just want to get it match I want to do a search do I prefer method or query syntax I prefer the methods so now try this search again oh look at all them errors oh look at all them errors no so we're really running into an issue here with the we're really running into an issue with the with the search here and by do it trying to do the search here it's pushing the yak can't turn these into sequels what's running into here is it it doesn't know how to where there is a to lower command in sequel server there isn't in sequel light is what I'm running into here so another way to do this would be to force the two lists in here so that it actually filters inside this method alright so this is a client-side filter it's going to do two lists so it this returns a and I need to put some parentheses now on this and man this feels Cluj right so that oh wait right I should be able to yeah I can dot we're on that and I don't need to list async on this I can just do two lists and that's okay that should work that should build change the first character of the search trim to capital well you don't know it might not work that way further down hypnotoad thank you for the sub and we're gonna make a donation to the World Health Organization Oh Evan weeks gifting a sub to hypnotoad thank you so much and we'll make a donation to the World Health Organization so they can fight the good fight here with Cove in nineteen let's restart see we get come on I did a control f5 there it goes thank you for the following commander q welcome in yep I know to list is not a singer but the to list async is async we need to wait for that to finish before we do a where Clause on it and a to list you're right Matt extracting some variables would be good for readability you're right I know build succeeded run already here we go we want to find Wow object reference not set to an instance of an object look at this search controller line 40 here there's no bio that's what that is there's no bio oh it's getting Messier but we're putting all of our database search logic the messy code in one place so we can reference it and we don't have to worry about it right let it let it live over there and we'll keep this running cleaner outside of here come on and I think I think Visual Studio Live cher has taken a powder here on us because it's flat not responding are we coming back there we go okay yeah where's the jeopardy music when you need it yeah now that I have this in here right think I want to do that right because this will return null there we go so adding the double question work here says if this is null - fold it to false if it doesn't have a bio it doesn't match now you're gonna yeah I'm gonna get this now I knew I put the value in the wrong place I knew it yes yes now wait a sec hang on let's take a look at this come on man [Music] right and the contains yeah the intellisense stopped responding here locally I'm gonna stop I'm gonna stop live share [Music] string doesn't have a value property but a nullable string value does right stringed up right speaker by oh and I'm I've lost intellisense I can't even save I look tired oh we're not done yet I'm did this yeah [Music] where are you going windows yeah Visual Studio has me eight processes running let's reopen them more coffee required absolutely we're gonna finish this search and then we're gonna eat we'll take a little break absolutely here we go all right right so I should be able to say dot bio here and no you're not gonna you're not gonna give me this are you there we go speaker dot bio to lower invariant contains and that should return that should return right and if at if that's null we'll get a false out of it one more time are we back on AI April and Sunday you bet yep thank you for the follow Shannon Tierney welcome in Shannon tin we welcome let's see if we can get this search working this right I wanna be able to search for our keynote speaker Heather bang look at that object reference not set on line 40 which is now its name there's folks that don't have a name I mean I write I guess it's gonna have to do the same thing here as well I mean it feels weird to do but where to start with C sharp um about six hours ago take a look at the video rewind about six hours now what try that again yep learn Microsoft comm is a good source for everything a sure they're slowly getting C sharp features up there there we go all right so now we can do a search right so if we want to search for a blazer so here's the session there's a session right if we want to search for just dotnet as a keyword right now we've got here's all these sessions right really great stuff so now it works all right fantastic so now I've got search working and I'm gonna commit that source control so that I don't screw this up in the future and we haven't even made it into section 4 again and now we're gonna let you login in the next section of this

Channel: Jeffrey T. Fritz

Views: 11,367

Keywords: c#, aspnetcore, dotnetcore, .net core, asp.net, asp.net core, workshop, how-to, get started, first, software, programming, development, code

Id: bpwxXo8GBrg

Length: 160min 55sec (9655 seconds)

Published: Mon Apr 13 2020