Building a Windows 10 IoT + Azure Cloud Apps

[Music] hi welcome Visual Studio toolbox I'm your host Robert Greene and joining me today is Daniel Jacobson hey Daniel hey how's it going good how are you I'm good I'm good Daniel's a program manager on the visual studio team that was correct and you are an expert in building Windows 10 apps sure yeah absolutely um you this app that you showed it net conf on channel 9 you also showed it at one of our internal technical events that I thought was just so cool that I wanted you to come on the show and talk to us about building window 10 apps using the universal Windows platform in the context of this actual application because I think it really kind of drives home why people should be interested in this and what the possibilities are it's not just about the surface it's not just about the phone so you know the universal Windows platform runs anywhere Windows runs and that opens up some really interesting possibilities such as sure yep you're going to show yeah so the real beauty of the universal Windows platform is being able to write one application and run it on any one of the Windows 10 device families which right now includes IOT as you see here does top mobile surface hub xbox hololens you name it so one app runs everywhere it's really things that no doubt are being worked on that we're not allowed to know about yes probably who knows so the inspiration for this application actually came to me when a friend approached me saying that they were interested in starting their own small business in Seattle a coffee shop if you will of course coffee Seattle make sense yes so what they wanted to do to optimize their chances of success being a new business was be data-driven be smart about the way they run their application so I thought this is a perfect use case for Microsoft technology I could build universal Windows platform applications that target multiple devices Usenet technology and Azure and pretty much build an end-to-end solution that would help them out so what I built here is a device that will help determine when someone enters or exits their store then send an event to an azure hosted asp.net web application which will be listening for those events then store it in a database and then when they want to review that data over time they can use a desktop or mobile application to actually look at graphs see how is my store trending how many people are in my store at different times in the day what's the busiest day of the week what's the busiest time of the day that way they know when do I need a higher help what days what times how successful are the promotions that they're running do they see a spike in traffic when they run promotions etc oh so that was the idea behind this and as you can see here the app design has quite a decent plethora of parts but it's actually a relatively simple application when you get into the nitty-gritty details for all of these apps so the IOT device really only has one class of code that actually does anything same with the Azure hosted web API it's really just a single class that does everything that's like 200 lines of code and then the client app is a little bit more involved we're not going to go through all the code but I'll point you to the github link after this so you can take a look at it yourself so the way this is going to work is on the IOT device which is what we'll spend some of our time it's it's it's more unique in modern application development era phones have been around for quite a while now same with desktops but these are up-and-coming so what this is going to do is based off of these devices I'm going to fire an entry or an exit event saying someone has entered my store or someone has exited in my store and when that's done it'll send an HTTP request sorry an HTTP request to my Azure hosted Web API listening for a post response which will then write the event information to a database including what type of event is it and at what time did it occur okay and then it will actually send a push notification to the device running the application so one example here is Sam in the back um it's a small shop I'm doing inventory work or I'm doing bookkeeping I'm the only one working at the time right someone walks into my store no one's there to greet them well I'll get a notification instantly saying hey someone has entered your store you better better go take their order so it's another neat way to reduce the number of people I need working yeah this is the modern Bell there you go who needs a bell when you have active smart phones and then finally when the push notification is sent the client at the data visualization app that has some graphs it's notified - hey update the number of people in the store and then it refreshes the data cool yeah so I guess we'll just go ahead and get started yeah so in Visual Studio I have a solution that I've already pre-populated with some of the infirm I'm not going to spend too much time on the asp.net application but as I mentioned this is hosted on github and only cut at the end but what I want to show with the asp.net application is how easy Visual Studio makes it to publish it to a live running web well web app so here's my API I'll look at the one class that I've actually modified most of this is from the template but here's my single controller of interest which has some metadata about my Azure services these are just keys and other private information that's all office gated from the code through a resource file then I have two methods of importance git which is just going to get a list of all the documents and post which is going to post a new document so it actually takes in the parameter my custom event from my portable class library so this is actually shared code and then it writes that to the database and that's pretty much it so two classes you can find those online but what is Keys hard-coded in the code somewhere yes so keys is in my portable class library and a resources file okay I don't want to show that to everyone cuz I can mess with my service here yeah so what I'll go ahead and do is show you how easy it is to publish so if I right-click on the application itself and I have the web tools installed all I have to do is find publish right here I sign in with my credentials which I've already done so it should cache it I can see my profile so I would select Microsoft Azure app service yep it would populate with all of my services select the servers okay and if this was a production environment I would just hit publish that's it but since I want to actually debug this later I'm going to go ahead and change the settings to make sure it is debug in ECP which I did that before so I'll publish and that's it so now this is actually going to send this code to my live running asp.net web application hosted in Azure yep so just to test that as soon as the finished pub finishes publishing we'll debug it real quick make sure this is working before we get into the uwp applications and while this is going the reason I want to focus on this one first is because as you can see both the IOT device and the data visualization app have dependencies on the azure app right so the IOT device is reading to the web app the client app is up sorry got that backwards the IOT device is writing you have a document through through this cloud service and then the client app for mobile and PC that's visual as I visualizing the data who's reading from it okay so as you're a speed on that first and then you WP publish succeeded I can see now in my browser here is my running application so what I want to do now is actually attach the debugger to that and make sure it works so I'm going to press a breakpoint on the post event go to cloud Explorer another tool within Visual Studio I don't have to leave the IDE navigate to my web apps shop analytic service right click attach debugger and then that'll try to find the live running process to attach to in my Asscher service so it will launch the service and if I return to visual studio once I see the breakpoint is ready to go I should actually be able to send a post method to my live service and hit this breakpoint make sure it's working so I'm using a another application called postman which is just a simple web debugging tool that enables you to send HTTP requests to any website you want and what I have here is a pre filled out body so I'm going to send an event type event to my live service that is event type of true which means someone has entered the store and I'm going to send it for today which is September 1st it is so let me go ahead and change this oh if it will let me that's interesting post body oh that's why I was in the wrong one September 1st and this is 8 p.m. global time so 20 o'clock ok I will hit Send I should hit the breakpoint I hit the breakpoint as expected it is loading the information so now I can actually take a look at the variables that are being passed in so a new event crew a fight time you'll see 9 or September first 20 o'clock I can continue to execute this code and now I should actually see a push notification on my device so this device had been previously registered for the push notification service um so even though the app isn't running the data visualization app isn't running because I had run it in the past I'll get the push notification so what that means is if I've got my Windows 10 phone and I don't have the app up and running but someone enters my store I'll still know that they're entering my store right which is pretty cool so I'm pretty confident that's working now I'm not going to worry too much more about the asp.net application let's actually build the uwp application so one thing I'm going to do is actually continue to attach the debugger to this running service and I'm going to build the IOT app in another instance of Visual Studio you'll see why in just a bit so let me open another version of Visual Studio with the solution open there we go and I'm going to actually start from scratch I'm going to add a new project to the solution I don't have an IOT client project tip so I'm going to right click on the solution I don't need cloud Explorer since this is a client up I don't need to worry about this controller anymore now we'll minimize that so let's go ahead and add new project and I will just select blank Universal Windows platform application and I will call IOT client so as soon as I create the project it lets me select my target platform version in this case I'm going to choose the anniversary edition I like to play with the latest and greatest stuff go ahead okay so to get started with this app and for those of you who have worked on IOT devices before what you'll recognize is a lot of the code is just boilerplate code that essentially defines where all these devices are registered on the IOT device and the breadboard so I can say this device is here I want to communicate with this device is it an input or an output device it's really not any logic it's just kind of getting getting everything set up so I'm not going to write that code that codes boring I do want to write the logic so what I'm going to do now is navigate to the main page of my application woops that's the wrong one and I'm going to include that code so let me go ahead and find that code does stops it bits and I'll walk you through what this code means it's just not as exciting to write it cool so let's start at the top I see a lot of squiggly lines that's because I'm missing some references so to start with keys as I mentioned before is in my portable class library so I can add a reference to the same portable class library that's included in my asp.net application I'm sharing resources across both apps the next thing I will see is missing is GPIO pin I can hit control dot to add a reference to the class if I go further HTTP client is missing the references I'm just going to resolve all my references so GPA what someone opere keys actually have to add a reference to the portable class library so GPIO status is actually not something I can resolve immediately what this actually is is a representing a text block on the UI so because it is just a Windows 10 application in order to help me debug that I'm doing everything correctly I just added a text block to the UI of it okay so let me go ahead and navigate to the zamel and for those of you familiar with sam'l development this is just as a molap I will add a textblock X colon name whoops equals GPIO status beat the designer but that's alright horizontal I'm an equal center vertical alignment Center and then I'm gonna make it really big so we can actually see it 72 now I should be able to reload the designer there we go now let's since I closed my tag so I'm not going to see anything here yet but when we run run the application you'll see that so if we return to the code behind that results down no squigglies and all that remains is to event handlers and I'll explain those in just a second but that's what makes a IOT development with Universal Windows platform really easy Wow so I'm just going to create empty methods to handle those for now okay and let's take a look at what this is doing and then just deploy it and see what happens so if I go to the right top the first thing I'm doing is defining the base URI for my azure Web API and this is essentially going to be used to send the post message so I'm going to construct my HTTP client object with this as my base URI and then when I send the post message it knows ok target the right live running servers right these pins if we take a look at the schematic for this device are just actually mapped to pins on the Raspberry Pi so you can find diagrams for the the specific bread where the specific IOT device that you're targeting that'll have a pin mapping for all of the digital devices that you'll be connecting to it ok so if I take a look back to the code 5 and 17 refer to the pins for my sensors so that's what we have here we so that's what we have here yup connected to a breadboard on metal board and then the breadboard has wires connecting to the Raspberry Pi device and correlating to those pins that I specified so the black wire here is ground red is hot so it's the voltage and then the four colors are just different digital devices connected to the pins that enable me to control them through the app okay yep so for somebody who has is a good c-sharp coders done built apps it hasn't really played with the Raspberry Pi know how long look how long does it take to get to the point where you could wire up sensors like this like this yeah probably a day maybe thank you okay yep so I built this in an afternoon and the only previous IOT experience I had was Arduino based it was not uwp it's you don't have to be electrical engineer done soldering I mean so so though in the past right the commonality that all of these devices have is that they're all just digital devices okay they're all very they'll behave similarly so even though I'm using an IR beam sensor here it behaves just as a button would I mean it's going to have a value of 0 or 1 depending on the state of the device so if it's a button and it's pressed it'll have a different value than when it's depressed just like when this is covered versus when it's not covered it'll have a different value okay and is there good introductory material on let's actually show you where that is so if I just search for Windows 10 IOT core on Bing what I will find is tons of documentation so if I just select learn about Windows 10 IOT core there's really great information about what it's like to develop for these boards including examples that people have built so an air-hockey robot and then some tutorials as well so if I click on documentation and I look at the samples hello blinky is essentially the hello world of IOT development so I could select c-sharp C++ does it show you and it shows you exactly how to buy everything ok so to get started it tells you exactly the the hardware you need how you hook it up together and here's the pin mapping that I was referring to before so this is actually the same board that I have and as you can see here GPIO 2 and GPIO 3 are just the numerical pins that I'm referring to here so 5 17 4 and 6 are the ones I'm using so 17 5 6 and then 4 I think is here so all in the same thing yep so it's not too difficult so that's what those are referring to those are just the constant integers that define where I'm plugging those into my raspberry now these are the objects that are actually going to reset represent those pins and then these enter and exit boolean's are going to be used for the actual logic of the code so we'll explain that in detail as I'm writing the code and then client is my HTTP client that is going to be used to send my HTTP web request to my live running service finally the last thing you need to do is actually initialize the GPIO controlling so you'll pretty much see this method in any of the tutorials you go through for an IOT device development but once you have all of the GPIO pins determined first you make sure that a controller exists on the device and what this means is if I were to deploy this application to a desktop or a phone it would hit this line hit this if statement and GPIO would in fact be no there's no GPIO controller on my surface yeah so then it would return out of the method yeah at least nothing that I can control um so then I would send there is no GPIO controller on this device and my application wouldn't do anything that's it so nothing would crash I'm only using the universal API set right meaning I don't have any platform specific API is everything is just common and then I'm actually opening the pins for those four sensors so as you can see GPIO pin I'm defining the sensors and opening the pins okay so after that I need to say is it an output device sir is it an input device so these LEDs are output devices I cannot interact with them the values never going to change I can write a value to them I can say it's on or off but I can't read anything from it so when I set the drive mode for the lights I set it to output and then the sensors are the opposite they're all they're going to give me a value back when I cover it or uncover it so those are input devices just like a button would be okay um after that the debounce timeout is really just to filter out any noise from the IR beam sensors so for some reason the the value changed for 50 milliseconds really really quick like unregister below something that was undesirable it wouldn't actually cause anything to happen after that I just create value changed event handlers and that's really what IOT programming is all about when something happens the value is going to change I have some sensor that changes the value and then I respond to it so what I want to do is I want to place breakpoints on both of these and deploy my application to this device so first I'm going to make sure it's my startup project set a startup project I'm going to select a debug and I'm going to choose armed because I'm debugging to an armed device Raspberry Pi 2 has an ARM processor would finally - electro machine it's hooked up to the network and I'm going to copy the IP address from before and to play so while this is deploying the very first deployment to a Raspberry Pi takes a little bit but it's a $30 computer so you can only expect so much after the radio first f5 oops I it speeds up drastically and you know you'll observe in just a moment so while this is deploying I do want to explain the logic of how this device is actually going to work so if we go back to the PowerPoint I can see this is kind of the overhead view of my device so if I were looking at it like this yeah this is what I would be seeing okay and I can see I've got my customer ready to enter the door it's my ninja cat riding a t-rex with the Microsoft flag and I can see both of the boolean values are going to start at false right meaning they have not crossed any of the sensors so as soon as my customer enters through the first sensor so they've gone half way through the door yeah I change the value for my enter device I know the value of this sensor has changed I can respond to it and I can change the boolean value that I'm tracking as it continues through the door I can now see both of those boolean values have been set to true or in this case both of the sensors have been broken right and I know an entry event has occurred because entry sensor was fired off first and then exit sensor right now if the reverse were true if it went through the exit sensor first and then the entry sensor that's an exit event someone's walking straw just went like that and messed with you so someone so actually if you look at the github repository and someone goes like this and messes with you so that it messes it up I actually have a timeout after a couple seconds and nothing happens it resets the state of the device another example could be say a fly goes by and it messes it up right yeah so so there are ways to counteract that and if you just know some simple c-sharp programming it's pretty easy to do okay but for the purposes of this we don't worry about that case so as soon as the event is triggered though I'm going to immediately reset the state of the device so that when the next customer comes through it's ready to go it needs to respond instantly so let's see so the application is almost done f fiving should take just a couple of second it's kind of like using an emulator takes time the first time yeah I understand right get everything over there you're good flanked to you a device sits and then this app along with dotnet runtime the subset of it yep in all likelihood that runs on this device right dotnet saw dot nets already on here right the runtime so you're copying the literally you putting on it just the executable so in this case it's everything that comes with the application so all of the references all of my new get packages so the it's interesting you mentioned the DA at runtime so with the universal Windows platform you can actually package your dotnet runtime as a part of your application okay so since this is a debug application it's not a store application it's actually deploying but net basically okay however if I were submitting an application to the store for example that shares the same exact net runtime as all of the other apps in the store obviously we're not going to include that version of the.net runtime with every app so there are shared frameworks that you can take advantage of okay um but you can actually change the version of the dinette libraries you want to reference through nougat it's pretty cool cool and then how much storage is on this device how many so it's like this can you get on there it depends on your SD card so I actually have a micro SD card on here AC but that actually has the operating system as well so if I want to flash this device with a new operating system I can take out that micro SD card plug it into my computer download the latest preview build of IOT core and plug it back in and ready to go alright yep so great so the application has gone and it looks like a breakpoint was already hit probably when I reached over yeah so I triggered one of these sensors and we'll go into more you to get the exit further you've reached through I think you actually exited the store I think so I always get it mixed up which ones entrance and which ones exit so now might just have to turn it around but okay I trigger one of them first but what's interesting is I just need to know what is happening when that breakpoint is hit what are the values that I'm tracking at this point so in this case I can see the value has changed for my exit sensor and I want to track the arguments that are being passed into this event so I can just use Visual Studio debugging tools to look at the local variables and see that args that edge is equal to falling edge and I know that seems kind of cryptic almost but this is the the parameter that you're going to track with most of the digital devices that connect to these IOT devices and if you did more of the tutorials that would become more obvious but even if you don't do the tutorials you can figure it out just some clever debugging right so what that means is the instant that that breakpoint was hit meaning means the sensor is broken right and when the sensor is broken args that edge is equal to a GPIO pin edge falling edge so that's how I track if it's broken if it's unbroken it's going to be equal to rising edge okay and those are just enumeration values so I can stop otherwise I'm going to throw an exception and use that knowledge to finish my logic so this is the important part and then for reference the beam is broken and now else the beam is unbroken there are really only two states for this device your long effectively so now I can write the logic for my application on here using those if statements yep so as soon as the beam is broken that's when I want to set the boolean value to true so since this is my exit sensor value equals value changed I need to set exit equal to true now if the enter sensor had already been fired that boolean value would already be true meaning this one was fired second that's when I know what event has happened right so if enter now I'm going to say customer has entered true that means someone has entered my store that method doesn't exist we're going to write in just a moment okay else well exit is already equal to true otherwise I really don't need to do much so in this case actually want to break out of my method and not do anything else did the backwards from how I normally do it normally I put exit equals true at the bottom but it shouldn't really matter okay so the only other thing that I want to do if enter is equal to true is reset the state of the device as soon as I fire off the event so I reset both of those boolean values to false so now it's ready to go for the next person so the code in customer has entered is what's going to send a message send the event to Azure correct okay yep so now um if the beam is unbroken I actually have a light to track when the beam is broken and I'm broken for debugging purposes that's all that's going to happen here so as soon as the beam is broken let's turn the light on so exit light dot right GPIO pin valued low and if you do blinky that the hello world of IOT devices letting that line of code we're pretty similar the light so the LEDs here's red and yellow LED in the device yeah so now I'm just going to copy and paste that to here and I'm going to write the value of hi to turn it off and that's really all I need to do for this so I can just copy and paste this segment into the customer has entered method oops sorry no the entry sensor value changed method and let's take a look here so let me lower the output a little bit so we can see everything so now if our edge equals GPIO pin edge falling edge they're the same exact devices this is the same exact behavior this is right the only thing that's going to change is now I'm working with the entry sensor right so enter light enter equals true whoops and free light yes entry light now if exit so if exit was already fired I'm actually going to be sending an exit event so exit was fired first and then enter I'm still going to reset the state of the device that is the same else entry light dot right GPIO pin value hi so the last thing I want to do is remove the not implemented an exception here and just place a breakpoint to make sure that the events are working as proper or as we expect before we before we send a message to the edge of your website let's make sure we're getting the right expected behavior right so now you'll see deployment should be much faster this time deploy succeeded that was much faster yes there you go so the breakpoint is ready to go so the first thing I'm going to do is just cover one of these oops sometimes when you have some bright lights like a studio light it interferes with the censors but if I cover this one pretty closely I can see the red light is turning on the lights blinking yeah so now if I cover this one the yellow one I can see the lights actually staying on because a break points it so the code is not continuing to execute to turn the light off all right so here I can see in this case V is false that is an exit event so that is going out of the door that means if I were to continue execution of the code and go the other way it should be true so let's try it let's cover yellow first and then red so again breakpoint and now I see V is equal to true yeah red stays on because again the codes not going to turn the light off until it continues to execute right so that's all I need to know so my entry and exit events are working properly on the device now let's actually do something with that information so again just using c-sharp code I can create my object triggered event which I need to first add a reference to my portable class library models folder let's call it event T event equals new trigger event and I'm just going to go ahead and create the event in line so event time equals state time dot now event type equals V I'm thinking I might actually I have a theory that when I'm gone my cat just sleeps all day long I don't be able to find out yeah that you could actually use proximity sensors instead of IR beam sensors so instead of tripping a beam if it goes near it you could also trigger an event right so you can track things at the home you can use this as a security device or some type of monitoring if you're one of those data obsessed people as well you could figure out where your cat spends the most time in the house I know her just by all near the bed so I already know that but a sense in another bed and you could actually calculate how much time spent under the bed versus other other places so lots of funny stuff you can do so I've got my event now I just need to actually create the content to send to my HTTP a web application so HTTP content equals new string content the string itself is just going to be T event to string and then I'm actually going to use some of the overloaded parameters to send the media type so I'm interested in telling my asp.net application that this is Jason that I'm sending because of my tea event to string method I overload it I can actually navigate to it to return the json serialization of that object and that's that it works properly with my asp.net app so let me just do encoding dot utf-8 and then application jason and one thing that i always accidentally do is do forward slash or backslash always get it confused so I can make sure I do it right application slash JSON perfect cool so the only thing I need to add now is I just have to post it so this is the one I want content should actually give it a name and now all I need to do is HTTP client which already have open sorry client I already have my HTTP client I don't need to recreate it dot post async the request UI is going to be API slash event and I'll show you where that comes from and then the actual content so the API event is just what's appended to my base URI so my base URI is shop analytic service as your website's net API event is what's at the end so now if I were to do this so how does it know where did you specify the base URI so I specify up right yes so I specified the base you are I lost debugging to my life service sometimes it times out so I'm going to test debugger again and you'll see why very very soon so up above is where I specified the client information base UI equals keys that has your web app AP UI and then when I actually create the client in main page load sorry at the bottom clavicles narrating yeah ok client equals new HTTP client so yeah so as soon as this page loads what I do is I create my HTTP client with that base address and then I initialize the board right yep cool plot explores um let's try it touching one more time sometimes you get finicky behavior with live writing services so anyways let's go ahead and actually deploy this application to the device and set a breakpoint when the customer has entered the store what or exited depending on the parameter passed through and just so we can track the entire this codes running on the device this code is executing on the device and you've set a breakpoint it's going to show up in visual studio because you are debugging on the remote machine I'm deep but I'm doing remote machine debugging on the IOT device yeah so remote machines bugging has existed for a long time I could do PC to PC yet but now I can do PC to xbox pc to IOT PC to surface of Xbox you name it let's see what's going on with this one my life service is not behaving so well but that's okay we'll go ahead let's see a breakpoint perfect this should be true someone has should be coming into the door so on my local variables load V equals true yeah I can hit f5 again and now what I should see is as soon as it sends the event it has executed properly I should get a push notification that's where I was saying my life service my other reel so a little bit delayed but someone has entered the store example seconds later now it's interesting is I can actually view all of the events that I sent sent so far again in Visual Studio so if I go to document DB accounts loving that because it's just unstructured data and no need to spin up a whole database so this is I'm actually using yeah it's just a list so I'm using document DB which is a no sequel database all it is is a JSON document for the demo I just have a single document but one of the things we're working on in the repository is making it more scalable to use the the no sequel query that is supported so creating a new document for every event and then a collection for every month for example and then we could kind of parse it however okay but you'll see why I use a single document when I copy and paste all my fake date and it's really convenient so if I find my document C document EB is very powerful but I just have single document I can go ahead and load and here we go so at the very beginning we did 20 o'clock ah a clock global standard time and I said true and then I've done one real event that I sent through the IOT device which happened just a couple about a minute ago which is 144 and it's now 145 yep so that is the real event and I didn't have to leave visual studio at all for that so now just for convenience I want to show you another tool that you can use for document DB to copy and paste the data so you can actually see the data when I run the next app okay so in the azure portal i can again go ahead and refresh this document this is the live document here are the two events that i was just working with now let me go ahead and find my fake data i have a lot more than just that and this will actually make the app look like something there we go many more events so I can go ahead and save that okay and not my database has been updated with that data so makes it really easy to schedule in going linked better than going about 1,500 times exactly although we get lots of steps on the band my mom would get really tired though so I'm actually going to break out a Visual Studio 2015 for now but first I want to deploy the IOT device so I'm not going to debug it I'm just going to hit ctrl f5 to deploy it without debugging and that will just continue to run it on on that IOT device for pretty much ever okay um so I think one funny example is I went on vacation and deployed it before vacation came back a little over a week later it's still running fine I came back and swung my hand across all the lights on the push notification cool it's pretty reliable no crashes or anything like that so deploy is succeeded I can go ahead and close this instance at Visual Studio let me go ahead and get rid of this instance of Visual Studio I don't know why that debugging wasn't working that's okay and let's take a look at Visual Studio 15 preview which which preview version is this so this is the next major release of Visual Studio or agile studio 15 preview 4 is available to smore this is actually beyond 4 but now okay so this is latest and greatest sigh you never know what could happen hopefully everything works properly so 4 is available publicly and this is something past that yes something password is available publicly right this is one of the beauties of working at Microsoft is getting to play with daily bits of everything it's awesome so let's go ahead and take a look at this application this is what's going to visual the data mm-hmm I really just have one page that I'm doing there's a lot of code that processes the data behind the scenes and that's where again we can optimize our database structure to just do that in the cloud using querying but for now we're not going to worry too much about it up here you go we might have some intellisense bugs with this version of Visual Studio but I don't think we need it if we're not actually gonna write too much sam'l but the designer works so that's good so let's take a look at the designer first to see what this looks like so on a phone I can see I have a grid here mm-hmm and it's a little easier to view the structure on a desktop first because of adaptive code so if i zoom in I can see I effectively have a grid within a grid so here's my main grid is the outer entire rectangle is the first main grid and in that grid I have two rows this is the first row and then this entire thing is the second row so the first row just contains my coffee shop name the hours and I'm open it'll also give me information about when the data was refreshed then in here I have this picture that tells me how many people are currently in my store okay it's really busy and people are like lining up to the door or something I want to know how busy it is and then I have three graphs that will be displayed in quadrants and what I do is I actually write this adaptively so that if it were on a phone I would just be able to scroll through each of those charts so I can see here's one of the charts below and then it's not going to show you the rest because it's cut out of the UI but I could scroll through it and I'll demonstrate that as well so I'm going to go ahead and just deploy this application and what I want to show here is one of the new features that's coming out in Visual Studio 15 for zamel development to really help you build performant zamel apps okay so this should take just a second I'll also show you a couple of tools that have been out for a little while now but a lot of people still don't know all about them they've only been out for a little over a year so this application is running so let me close some of this so what I want to show you first is what is new so inside of the Diagnostics tools window we have these Diagnostics wall debugging tools that run just while you have five rewrap there's a new one called UI analysis for uwp tools now this is not on by default since it's brand new so for those of you watching if you want to turn this on all you have to do is click select tools check on UI analysis and then you'll have to reset the debugging session okay it's pretty painless but what that does is it gives me a whole bunch of different events about my application and the performance of my application so the number one is using binding instead of compiled bindings I'll have to go ahead and fix that at some point but the one that I want to show you is one that actually surprised me and I found out about this because of this tool so let me restart my application here's the app you can see all the data let me restart my application and describe what I'm doing that is bad that UI analysis told me about that I had no clue about it's actually pretty cool so when my application first launches I can see I don't see much except for this loading ring right and what i'm actually doing behind the scenes is i'm creating these objects and i'm just hiding them so i'm setting their visibility property to visibility collapsing and what that means is on startup it's still loading that zamel control into memory it's having to do the processing to create it and just not doing anything with it right and what UI analysis told me is let me find one of them here we go element numpy 'pl in store of type 1 RT it's the the charting control was collapsed at load time so it told me that collapsing an element or setting its opacity to 0 will not prevent the element from being created so it is creating the element it's using processing power it's slowing down my startup time well that's something I definitely want to fix so not only that but I can actually this is going to work it might be broken because of this it's the problem with daily builds so when this is out if I double click on this it'll take me to the line in zamel that is causing that to break mmm so I can actually just go ahead and navigate to it so numb people in store right here so here's the chart so now what I want to do is change one of the properties so it's going to be hard without intellisense but I can do it so X : the flirt load strategy is the way to fix this oh I do have intellisense lazy cool just I don't have the highlighting I guess so I'm going to set a property called X : to furloughed strategy equals lazy on this chart and then I have to do one other thing so I have to navigate to it in the code-behind up one other tool that I always do this myself I've just gotten so used to it samo edit and continue is another new tool in Visual Studio 15 as you'll notice this application is still running I'm still debugging is app and I just added that property to my zamel without having to stop anything and I just did there because I'm used to it now so I think that's really going to transform the way people create sam'l applications yeah so I will stop it because not going to have to edit the code behind let's go ahead and here and let me make sure I get the right property name so X not num people in storm so the way I'm going to get rid of that warning and UI analysis is I'm going to set that property and then I'm going to call some it's somewhere in the code where it actually makes sense to finally load that element so it's not going to be read at startup it's going to be when I have the data available to actually make that chart meaningful so I'm going to look at my code and I can see on main page loaded I get the data and then I set the data context and as you can see I already did it for a different control before but if I do this dot fine name num people in store this doesn't actually do anything but it tells the code hey I need to create this object I'm trying to do something with this object so it will create an airline so this is going to retrieve the object that has a specified identifier name so in trying to retrieve it it's telling the sam'l hey you need to create it so now if I run this again I should only see five I guess infractions of that specific UI analysis time so here we go so now if I go back here and I sit select filter you analysis it's down to 48 instead of 49 visibility collapsed so as you're debugging what's amazing about this is since its while you're debugging you'll catch these as you write your code so rather than waiting until the very end doing your post-mortem profiling you're at all ready to go oh wait you have 60 performance things to fix on your UI threads well now as you hit these issues you just go ahead and fix emit persuade yeah so the last thing I want to show is UI debugging is my UI debugging that has can you get those before running is there a no so those are actually calculated at runtime so there's a process running that will tell you that this issue is occurring okay so the last thing I'm going to demo is actually in Visual Studio 2015 with this same application and I want to show it because not many people know about it Oh hardcore example developers definitely know about it now but there's still a lot of new developers that are not aware of this feature and I want to make sure it's pretty evident to them that they have this tool toolbox available to them so Sam will you eye debugging is kind of the precursor to zamel editing continue which I showed you before and I think it might be a little busted in Visual Studio 15 but that's what happens when you play with today's build yeah so let's go ahead and hit f5 it should still work I've seen that warning before it's because I forgot to add a reference to my portable class library but the binary output of this folder is enough to get it to work because in another project I have the reference it's confusing but yeah the app works I just want to show the same with your ID buggy so live visual tree now I can see it so here I've got this actual Dorner in my running application let me go ahead and actually while this is running let me show you the adaptive UI nature so if I make this really skinny after a certain point it makes everything in a single column and I can just roll down so the behavior on the phone is I just go ahead and swipe and I can see everything working but now let's say I wanted to change some of the styling on this say I don't like the size of contoso coffee shop I can go and click on the adorn er is that always been collapsible like that uh since update three yeah Wow cool and it's also you can do it start it showed up so you can also hide it I didn't notice collapsed this one is right so you can get rid of it entirely if right interfering with your app so are on the topic of getting rid of things go back there yep why is this decision tools options so that's a global setting a frame I never ever wanted I never ever want it unless I explicitly turn it on and I shouldn't have to go into abductors oh yes for every single one and get rid of it yes sure that's good for you we've actually had this feedback before there's there's two sides of the fence there's the people who actually do use this information line that's why examples options you said it globally alright I'll take that back to my time thanks it's a great feature but when I'm building an applications give them away I didn't know if that if the thing works yet I'm frame rate is one of the last things I'm gonna check that's true never the first thing yep okay but you can see kind of see that's one of the benefits of having a show and inviting there you go close to the product any prior wisdom so what Sam what your ID bugging does is it lets me select that control and then when that control is selected in my effectively this is kind of like the Dom for those of you have to web debugging I can see all of my visual elements that are at runtime and this could be programmatically generated controls if it has this next to it it means it was user generated in a page okay so I can actually click that to navigate to the control in the sam'l so let me actually just show the same oh so that's the textbook that I'm actually looking at here so this version of Visual Studio does not support sam'l edit and continue but the power of that is I can use them or you I debugging to find the control right then I can use the live property Explorer to modify local properties of it so I can set that to 30 to make it bigger I think that looks a little bit better and now if I were to stop this application and run it again it would revert back to 24 right but with zamel edited continuing editing I can then after testing am a lot property explorer I could then edit the zamel file while it's debugging changes the values of the property hit save and then just keep going and I don't even need to stop the application so that's cool yeah it's pretty powerful one of my favorite new features in Visual Studio 15 oops don't know what I did there Ike's and I hit alt tab I wanted to go back to this one oh it's still gone but yeah that's those are some of the new tools cool any questions umm yeah one question so the the PI Raspberry Pi sends a message to the azure service yep which then use notification hub to send a message out to the client right yes okay so some someone a event-driven model where an event is fired the azure service kind of wakes up that sounds like what Azure functions are so did you consider using Azure functions ah for the server side so I initially didn't consider using Azure functions mostly because I wanted to demonstrate the power of sharing dotnet code across all of these different platforms so I'm using uwp I'm using asp.net and I'm using the same code for all of them yeah but as your functions would also serve the purpose of what I'm doing okay cool yep but just to show this one last time as I'm running this it should trigger an event and I should see current people in store either increment or decrement I don't decrement that was exiting so now I don't want people in the start so I got this way then it should go back to zero cool and it's pretty fast so ready oops I might have missed oh yeah they got one so takes two seconds three second clearly notification and update it so you could have that you can have a screen like this in the window of the store shows the number of people in the store and what the average wait time I could eat that too yes I can hook this up to my register so so one of the things I was considering just additional functionality is having register functionality in this app and then I could do how quickly our orders processed how much is the average order I could show correlate this data with money instead of just how many people in the store if I'm running a promotion maybe I'm giving discounts so more people might not equal more money yeah it's such a but the last thing I did want to show is a couple resources for this mostly the github page I think that's what's all this all the code is up in github yeah for both the client and the server and if you have any issues with it or any questions raise an issue or tweet me at pm at Mike this is going to be a living repository for awhile who makes a good sample of all the different services available to you and did they open the coffee store are they using this are they using it today now so this is still just v1 we have to first create our printed circuit board and put it in not um no not yet okay maybe Sunday thanks so much yeah all right cool this is a great example thanks for coming on and showing other problems yeah lot of fun alright hope you enjoyed that take a look at the code play around with it let us know what you think and we'll see you next time on Visual Studio toolbox [Music]

Build a Custom ML Model Using Model Builder

>> In today's Visual Studio Toolbox, we're going to continue our look at machine learning. Veronika's going to show us how easy it is to create and use a model inside Visual Studio. [MUSIC] >> Hi welcome to Visual Studio Toolbox. I'm your host Robert Green and today we are continuing our discussion of ML.net this is part 2 of a three-part series featuring Veronika Kolesnikova. There she is. Hey Veronika. >> Hey Robert. Good to see you. >> Good to see you again. In the previous episode, we did a high-level overview. We didn't really get into Visual Studio yet but I think it was very good to set the stage what is machine learning? Where does it fit into artificial intelligence? Today we're ready to dive in, fire up Visual Studio and start building a model and then seeing how we can use it. >> Yeah that's right. Let me share my screen and show my Visual Studio. >> Which Visual Studio is this? Is this the old Visual Studio 2019 or the brand new just released Visual Studio 2022? >> That's the brand new Visual Studio 2022. >> Good answer. >> I've been using the old one and new one in parallel for some time, but now I fully switch to 2022. >> Excellent. >> Here I want to create just a simple empty console application. Creating new project window and choosing just a console app. I have a bunch of them so it's number two. I'm using C-sharp here and then creating a new solution. You can always name it something more meaningful. I think I'll just keep it as ConsoleApp2. >> Next one. Then here you can choose framework. I'm sure .Net developers have seen that window and they can choose the right .Net version that they prefer. >> It's in all about .Net 6, they can go back and watch .Net conferences a couple of weeks ago where it was talked about in great detail. >> Exactly. I will choose .Net 6 and create a new app. It is empty. Doesn't have anything, just Hello world. >> We actually recorded this before the launch so that's why it says Preview and it says watch the .Net launched on November eighth which I said we published this will have already happened. Not that anybody is surprised that when we recorded an episode at a time we actually did it ahead of time. >> So maybe we can cut out that yellow notification but then it still assess preview here. >> Leave it in. >> You can see in the Solution Explorer at the ConsoleApp, doesn't have anything other than ProgramCS file and now I'll be adding machine learning magic here. Click on "Add" and then add machine learning model. >> Now did you have to install? Did you have to select a particular workload or add a specific component to get that or does it come by default? >> ML.Net ModelBuilder is available inside Visual Studio you just need to make sure that when you are installing it this component is checked. >> It's not a workload, it's one of the components? >> Yes. Or you can install it later if for some reason it's not there you can always go back and add it to your installation. Here when we are adding that ML.Net ModelBuilder we are able to change the name. I'm not going to change name just leave it by default since it's not the main goal of this demo but when you're working with production code working on your glam project, definitely don't forget to update the names. It just takes a couple of seconds and then you can see that beautiful UI that is ML.Net ModelBuilder. Now you can see the scenarios available data classification, value prediction and limited scenarios that I mentioned in our previous episode like anomaly detection, forecasting, and clustering. I want you to pay attention to those little labels here. It says locals for some of them and then Azure and local. For example, for image classification, you might not have enough compute power on your local machine in order to perform that model training and model creation so if that's the case then you can always connect to Azure and use that Azure magic. But today I want to start with the most basic, in my opinion, scenario. It is widely used in all applications, so I'll start with the data classification. >> This would be a good place for people new to this to start out and learn how this stuff works? >> Yes. You can use your local processor and the memory you have, you even need to connect to Azure you'll be using just text data so nothing too complex there or no heavy data is involved usually. Before moving forward you can see on that screen that it shows my local CPU environment just to make sure that that is working correctly, that I have enough computer power to actually move forward with that scenario. Then for next step, I have two options here connect to a file uploaded here or connect to SQL server. I have all the data inside ATSV file, so let me actually find it. I have a couple of options available I just want to use an option with less data so it is not taking too long. >> Did you create that data? Is it from a sample? >> It's a sample data. You can find it on GitHub there are also lots of third party tools and datasets that are available. I chose that Wikipedia detox file with only 250 lines. That is not enough for a production model but for demo purposes that's good enough, it will run through it faster. I will save a little bit of time and I got that data from GitHub but they are also online for those with datasets so you have lots of options for demo purposes. Here you can see data preview or what's happening in the dataset. It's not going to show you the whole dataset obviously because it might be too long. But just 10 rows out of 250. Then here we need to choose column to predict and we'll be predicting sentiment based on the text we are trying to figure out if it's a rude comment or non-rude comment, non-toxic comment. Also, you have that advanced data options. I have only two columns herein the dataset but if you have more then you can pick and choose what columns you're going to use and other data options that might be needed before that actual training. Now we need to move to next step and next step is training. Here is that higher tricky part where you need to choose how many seconds you want to train it. Out of the box and by default it tries to estimate the amount of time you might need but also they have that link to documentation so you can read more about training time and figure out what is better for your data set. Here I can start the training. In the output window I see what's happening there. It actually checks different model types and tries to figure out the best and the best model that was selected is that model here. I'm not going to try to pronounce it but again you can read a lot about types of models for all data that documentation. You can see that actually went only through two types because we had only 10 seconds but usually if you have more time to train it, then it will go through more types of models and pick the best one for your data. Also a good thing that you can see here on the screen is the accuracy. You can see that the accuracy's pretty low. I won't to recommend using the model with that accuracy unless you're building something not important at all. >> But then what would happen if you trained it for longer? >> That's a good question. >> Does it depend on the data? >> It depends on a data, we can definitely try to train it longer and just check if that accuracy increases. It might increase a little bit. I'm just saying that based on my experience but it's not going to increase a lot because of a pretty small dataset and you can see the same output but now because we have more time it went to three types. >> Interesting. >> It increased a little bit but still not production grade accuracy but that's okay we are using it just for demo purposes so I'm going to go to next step. Next step is evaluation. Here by default it's just picking out the first row and it gets that sentiment text from there. Ideally in the real world case, I wouldn't recommend just using the first row. Usually what data scientists do, they split the dataset into two parts, one they're using for building the model and the second one they using for evaluation or you need to have at least a couple of options for evaluations that were not part of that training dataset. But here I'm going to use just the default option click on "Predict". It is toxic. Its pretty sure 99 percent so that's pretty good. We can move to next step. Next step is consume. There are really good options here if you already have your application built up and you are just waiting for that machine learning parts then you can just copy that snippet that they are providing and start using the model. But if you want to play a little more with the model, see how it works, see a good example of usage and you don't mind creating a separate app that you will delete later most likely, then you can just add a ConsoleApp or a web API. I'm going to use the ConsoleApp here, and again you can rename it here. I'm not going to do that. Here you are getting basically the whole console app which is connected to ML. Net model. It is already using it so we can just run that console application and see how it actually worked. Let's go. Here, I'm going to close that and this part 2. You can see in the program file it is automatically passing that first line so whatever we did during that evaluation step it is trying to do the same thing here. It is using the text to predict and passing it to the model than some writelines in the console so they are helping to understand what's happening there. It provides them sentiment. Also repeats the sentiment texts and then provides their prediction. It's a good way to understand how you can use the model but you definitely don't have to include a console application in your solution. If you know what you're doing you just grabbed in that snippet that was there and then connect the ML.Net model. The model itself is here. It's that MLmodel1.zip. Can see it in both applications. I think I can just run it and make sure it is working. >> We basically created a model and then we're using that model in a couple lines of code and we're just passing in some text which could be read from a file or picked off a entry in a form or on the screen and then we're applying it against the model and coming back and saying that's rude. That's it? It's that easy? >> Yeah. That's it. >> That's amazing. Then of course all the difficulty comes in obviously the dataset and then somebody ahead of time needed to decide for all of this whether, what is a rude statement, what's not a root statement? What the values are, so the initial dataset initially this might be a manual process. Somebody just has a quick screen, brings all the comments and they say negative, positive, neutral? Then just go through that and eventually you'd have enough of that data in there to create an accurate model. You can create a model from any amount of data but the more data you have, the more good data you have, the better your model so then you replace that manual process with your ML model, review it to keep training the data and training the model and eventually whether it's a week, a month, a year who knows, hopefully sooner rather than later, you'd have a model that's good enough that you don't need to do that manual process anymore. You probably just on a regular basis check it to keep training of the model but eventually, you've automated this process. >> You need to keep logs as for any software for machine learning, you need to have logs to make sure that the predictions are accurate or maybe user feedback if you're especially building bots then usually people need to have that opportunity to complain or maybe say that something didn't work correctly and then you are keeping those logs. They can be automatic. They don't have to manually type anything but based on those logs, you can actually provide more data and retrain your model with that new data and make it more accurate and just overall better. >> That's basically all it takes to get started doing this with a very simple model very simple scenario but the key takeaway is about ModelBuilder which is part of Visual Studio you just have to make sure it gets installed. There is an amazing amount of power in there and of course, it gets better and better and better as the team behind it who knows an awful lot about this subject continues to improve it. >> I started using the ModelBuilder may be just as they released it a couple of years ago and I can see big changes definitely gets more convenient. Better faster, more convenient to use and I'm really impressed with the work amount that that team is putting on. >> What are some of the other basic scenarios that people could look into or that or that you've seen? Here we just did sentiment analysis. I know we've seen image classification. Is this a dog? Is this a cat? What type of cars is? But what are some of the other things that you've seen people be pretty successful with? >> I think all scenarios are definitely a popular that's why they decided to include them all here. Value prediction is popular. You can predict the value of your house if you're trying to sell your house or maybe buy a house. Data classification is simple and powerful and it is easy to set up, maintained with image classification and there are lots of tools that are available so you can mix and match maybe you are creating some parts using the model builder and then you can add cognitive services on top of it, doing speech recognition or something like that. >> If you wanted to do something with image classification you just need to know what the categories are ahead of time and then have enough images and identify that this type of images, this category and the more images you have ahead of time to go into each category, the better job the model would be able to do to figure things out? Then it's just a question of constantly monitoring how good your data is and how good your model is and your model is only going to be as good as the data you put into it, so it becomes this feedback loop of my models no good that's because my data is no good so you got to get better data which leads to a better model which leads to better data leads to better model and you get this virtuous cycle I would imagine. >> Yeah, data is constantly changing so we need to make sure that you're staying up to date. >> This would be a good place to wrap up this episode and what are we going to see next week? >> Next week we'll see a more advanced scenario. I want to show image classification. >> Hope you join us for that. We will see you next time on Visual Studio Toolbox. [MUSIC]

Blazor Tips and Tricks

>> On today's Visual Studio Toolbox, Ed Charbeneau is going to show us how to set our Blazors to run. [MUSIC] >> Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today is Ed Charbeneau. Hey, Ed. >> Thanks for having me, Robert. >> Welcome back. >> It's great to be back. >> Ed's a Developer Evangelist with Progress software, and a regular guest on the show, but it's been about a year since you were last on, right? >> It has been. I've been working hard on Blazor for that entire time. >> So a year ago, you and Sam Basu did an episode on Blazor, I believe it was one of our long ones. >> It was. >> Well-received. >> An hour show cut into bite-size pieces. >> Back when we used to do hour-long shows. So it was an introduction to Blazor. Today, we're going to take a look a year later, and you're going to catch us up to speed on some of the most frequently asked questions that you hear, some tips and tricks that people doing Blazor would need to know. >> Yeah. >> But before we dive into that, let's do a brief refresher of what is Blazor. >> Yeah. So like you said, we took a look at Blazor a year ago, it was a very early beta back then. It's now rolled into the official ASP.NET Core pipeline. So Blazor is a brand new front-end development framework, so a SPA framework that uses C#, Full Stack. So we can actually write client-side application code with C# and not have to rely on JavaScript like we normally do with jQuery, React, or Angular, we now have Blazor to take place of all of that, and we have.NET end-to-end. >> Cool. >> So we saw it early last year, a lot of things have happened since then, and every time I present on Blazor, I get asked these questions that are really great questions, but just at a glance, you don't quite catch when you're talking about Blazor so I thought I'd bring some of those questions up with you today. >> Yeah, cool. Let's do it. >> All right. So I'll hit one of the ones that is the most popular question I get, and that is, does identity work with Blazor? Now, people usually frame that question, does authentication work with Blazor? Authentication is actually a browser behavior, so that's usually happening on the client, but what they usually mean is, does Microsoft Identity work with Blazor? Actually, now it does. So with server-side Blazor shipping in ASP.NET Core 3.0, Microsoft Identity will be available with the application. If you click "File New Project" just like you do with an ASP.NET MVC application or Razor Pages application, you get the dialogue in the File New Project, where you can click to change your authentication type. You get that same experience with Blazor. What you get out of the box is actually what we have running here. Just like in an MVC application, you have your login and your register links at the top of the page. So we can click "Log In" and we get prompted with the identity log in experience, and I don't have an account, so we can click "Register" and create a brand new account. Just like with MVC or Razor Pages, we can create an account here, and what I want to show if I can get a correct password through this system here, I don't remember what their requirements are. Now, we get an error screen or what looks like an error screen, but it's actually something very helpful, and MVC does this as well. It says data operation failed processing requests, it's because we haven't created a database yet. >> Okay. >> This is a brand new File New Project experience, but what's nice is we get a button on the error page that says, "Apply Migrations", we click it, will actually create the database for us, Microsoft identity database. It will apply the migration to our database, create all the tables we need, and then it will bring us back into the application, sees us try refreshing the page so we can come back, hit "Continue", and now, we're actually logged in. It says, "Hello Ed Charbonneau@progress.com." So we have identity working, it's backed by SQL and.NET Framework and this comes out of the box with a few button clicks during the File New Project experience. >> So this is a generic identity provider. Can you hook it up to Active Directory? >> You can hook it. >> Or Azure Active Directory? >> You can hook it up to Azure and that steps you through as well in the File New Project experience. >> Okay. >> One other notable thing that's really interesting about the way identity works in Blazor right now is another question that I get asked a lot, and that is, do Blazor components work with MVC, and can you mix MVC, Razor Pages, and Blazor in the same project? So if we go under "Areas" and "Identity", and we look at our "Pages" in here, our logout or login pages, these are actually Razor Pages. So we have Razor Pages that exist in our Blazor application, and they're able to work side-by-side. Now, another thing is people ask, can I use Razor components or Blazor, the component framework inside of an MVC or Razor Pages application. That ties into the same idea. If we go into our host cshtml file. So.cshtml is a Razor Pages or Razor MVC view, inside of here, this is the bootstrapper for a server-side Blazor project, but this is a Razor page. If we look right here, this is where the application starts up, and we have inside of our app tag an HTML helper that says, "Html.RenderComponentAsync." This RenderComponentAsync method is something that we can call and bring Razor or Blazor components into MVC in Razor Pages views. >> Cool. >> So that's another frequently asked question. Two things tie together in my opinion, talk about using all of ASP.NET in a Blazor application, and that is possible. >> Cool. >> So the next thing that I wanted to show is people asked frequently because they see Blazor component. You can refer to these as Razor components. Razor components is something that is the component model of Blazor. So Blazor components, Razor components, interchangeable. >> Okay. >> But when they look at one of these, it's all written in C#, and your markup and your code is all in the same file. So one of the questions I get right away is, can I separate those two things because I don't want my markup and I don't want my C# code intermingled? So I've got an example here where I've already started taking these two things and decoupling them. So we'll finish this up here. What I want to do is I have a fetch data component, and I have the code section down here. What I want to do is remove this code section. So the first thing I want to do is create a C# file, and I want to name this file the same as my component, but with the extension.razor.cs. >> Okay. >> So what that does is it matches up with our component filename. So our component is FetchData.razor, our code behind is going to be FetchData.razor.cs, that allows to the nest in Visual Studio. So when we name them like that, that semantic allows that nesting to happen. So we get this nice tree effect where we can collapse that code behind down if we'd want to. So I'm going to click on "FetchData.razor.cs, and this is the same code that is inside of that code block. I went ahead and moved it out to keep this nice and short. >> Okay. >> So in FetchData.razor, we can now take out this code block because we have that inner code behind file. >> Okay. >> So to marry those two things back up together, we simply come back up to the top here. We just call inherit, so we have an inherits directive. Then we point to that code behind file. So this is called fetch database. The component name is fetch data, so this is the base of that component. So we'll save that. I can also remove this dependency injection from it because that now happens in the code bar. So now I have tied those two things together, and all of our little red squiggles have gone away, and we separated those two pieces of logic. So our markup is in one file, logics on the other. >> So you named that fetch database? >> Yeah. So the filename itself is fetchdata.razor.cs. >> Okay. >> To provide that nesting. But we can't call it fetch data, because it will collide with the component names space. >> Right. >> So we can't have two fetch data classes. >> Okay. >> So we got to give it some things. >> It's a partial class, it's an entirely separate class. >> Excellent question or observation. Partial classes aren't supported yet. >> Okay. >> But it is something that may come in the next release of the preview. >> Okay. So fetch database was just a naming convention that you use. >> It's a naming convention that I use, and it's pretty common in the community right now, is to name that as your base of the component itself. >> Okay. >> Partials may be coming soon. >> It's okay. >> So this may change a little bit over time, but this is one way that you can separate those out today. Also we need to inherit from component based on that. So that gives us all the lifecycle methods, and everything that is part of the component. >> Right. >> So another notable piece is the inject parameter here. So we're injecting through property injection when we do the code behind versus when we're on the markup side, we use an inject directive instead. >> Okay. >> So that's one piece that people look for when they start refactoring this out, is they don't know how to inject that properly. So the inject attribute on the back end side, and it's inject directive on the front end side. >>Okay. >> So that's one of the pieces that people ask a lot about. >> You then you would expect ultimately that that would just be an available refactoring inside the Visual Studio editors so you don't have to do it yourself. That might be a nice feature request. >> Would be a good feature request. There's a lot of tooling changes that will come with all of this new blazer stuff. >> Right. >> I've talked with Daniel Roth and his team. They're very optimistic about what they can do with the razor engine itself. There was a lot of tooling that can come in the future. >> Cool. All right. >> All right. So we can look at some more frequently asked questions. Another one is we get this application out of the box. We need to rerun that, we've done some code changes here, we'll pick this back up and run it. We have this counter component that comes out of the box. The count starts at zero if we click on the counter. This is all file new project experience. So anybody that runs blazers probably seen this counter component before. If we go back home, and then we visit the counter page again, our state is gone. >> Right. >> So don't share a state if I created more counters. They don't share that count. So we can have multiple counters on the page, they would all have their own independent counts. So how do we manage state if that's something that we do on? So there's actually two ways to handle state in, well there's multiple ways to handle state in blazer. I'm going to show you two of them. There's actually some components that are designed for this, so we'll look at a component approach and then we'll look at using dependency injection and do some application state. So one thing I've added to this project, and under my shared folder, I have a component that I wrote, very simple one, is called counter state provider. So this is a provider component that I can plug into my application, and anything that is a child of it will receive the values that I assign to this component. So it uses a special blazer component, this is something built into the system called a cascading value component. Inside of that cascading value component, I can provide child content. That's essentially what this component is for anyway. On value, I'm going to keep this as simple as possible and I'm just going to assign this. So this component's value will be just assigned to the cascading value. Any child component can subscribe to this value now. So what we'll do is we'll take this, and we'll put our current count for a counter component in that object. So what I need to do to implement this, is I'll go into my main layout and now I can surround any piece of HTML in my application that I want to be able to receive the data from. So we'll go right around the main component of our application, and we'll call in our counter state provider. We'll wrap that around the body of the application. >> So this is now at the application level? >> This is at the root of our pages. >> Okay. >> So anything, any of the pages that we load will be inside of the body. >> Okay. Got it. >> So now anything that's in the body which includes our counter component, will be able to receive that. So how did we receive that inside of our component? So there is a special parameter that we set up. I'm going to use a shortcut here, and we're going to use the cascading parameter attribute on a property. We'll set this up and call this current count, or actually, we need to bring in the component namespace , because this is going to resolve to a counter state provider, and then we can name it, and we'll name this, let's keep this simple and just call it state. So this state will be assigned the value of this that it brings in from the counter state provider. So now, we can consume it, we can get rid of this current count equal zero. When we increment our count, we'll use the state instead. So we'll say state.currentcount, that's coming from the state provider. >>Okay. >> Up in this section, we'll do the same thing; state.currentcount. So that should tie it all together. Now, when we run our application, we won't lose that state as we go from page to page. We can also take advantage of that. So now we have our Current count. We can go to our "Home" page, go back and still have a four. Make this a little bit cooler. On our Index page, we can consume that same StateProvider. So then we have shared state across the application. So we'll do the same CascadingParameter. It's going to be a CounterStateProvider. We'll call it State. Then in my Hello world section here, I can just write out Current Count at State, CurrentCount just like that. Now, this will appear in our Home page. So now, we're getting the count off the counter even though they're not on the same page together. So our Current count is zero. We click this up. We go back and our "Home" page changes. >> Very cool. >> So that's one way that we can share state across the application. This is using a piece of markup, the StateProvider uses the cascading value component. So this is markup-driven. We can also do this through code. So we don't have to have this markup piece that drives the State management. So in my application, I've added a very simple poco object, plain old-class objects, called CounterState. I have a CurrentCount on that as well. This is something we can just inject in our application through dependency injection. So if I go into "Startup.cs", I'm going to scroll down to where all of my dependencies are registered. In services, I'll just uncomment this line that I've added earlier. Services.AddScoped of type CounterState. So now, I have this object, this CounterState that is available to my application through dependency injection. So if we go back to our "Counter" component, instead of using a cascading parameter, we'll come up to the top of the page and we'll use the inject directive. We can inject to that dependency injection that CounterState through dependency injection. So we'll call it CounterState. I think I'm missing a namespace here. This is on data. Data CounterState. We'll simply call that State again. So since we named it the same, we actually don't need any code changes here. I can remove this. Now, our data is resolved through dependency injection instead. So it has the same idea but it's application level. Then in our "Startup.cs", we'll go back here for a moment. We used AddScoped to add that to the application. We have several ways to add things to our container. We can use AddSingleton, AddScoped. The reason I chose AddScoped versus AddSingleton, so on Serverside Blazor, you're sharing that application state with the entire user base if you use AddSingleton. So that will be a single instance per application not per user. So it's a very important thing to know. You don't want to share certain things with everyone. Whereas, our weather forecasts service, something is pulling a weather data, we can share with all users because it's going to be the same. So those are some of the most frequently asked questions that I get when I present on Blazor. People ask about state management, they ask about identity, and they ask about code separation. Those are the real heavy hitters that I get all the time. So hopefully that clears things up for you. >> Yeah. That's awesome. So if someone who is starting out with Blazor, what are briefly some tips and tricks on how to get up to speed on it, how to get used to it, how to understand what it is and how to use it? >> So my biggest advice would be first of all you go to Blazor.NET and you walk through the Getting Started materials. The.NET Docs team, they've done a fantastic job there. Second of all, Blazor is a lot different from MVC, where in MVC applications, we're rendering strings. Blazor has something called a render tree that it builds. It's not a string, it's a representation of the DOM, the Document Object Model that is held in memory and it does diffs against it to see what's changed. So it's a big difference from HTML Helpers and Razor Views that just render out strings all the time. The reason for that is those string rendering mechanisms, the client-side code is done in JavaScript. So it goes back and it finds pieces of the DOM, manipulates it, edits it, deletes it, those sort of things. In Blazor, we work with the render tree. The developers do. Then the framework takes to render tree and applies the changes for us. That's what allows C# to be able to work on the client-side. >> Cool. Your impression of how far along this is. Is it preview? Can you put stuff into production with it? >> In September, we will see a GA release. >> Okay. >> So it's coming soon. For server-side Blazor, we'll have the global availability soon. Client-side Blazor will come sometime next year. We haven't got a solid date just quite yet. I've heard quarter one, quarter two. So that is coming soon. >> It requires.NET core? >> Yes. >> Is that true? >> Blazor requires.NET core. >> Okay. >> It's currently on set for.NET Core 3.0. Client-side will likely come with.NET 5. >> Okay. Cool. Thanks for that. >> Thank you very much. >> All right. >> Hopefully, everybody found something useful out of this. Getting started with this stuff is a little tricky. It's a brand new preview. So I figured that most people are new to the concepts because the entire framework is new. Something I've been working on very closely for the last year because of my job with progress, we build UI components for everything. So we jumped on the bandwagon early and created a suite of Telerik UI Components for Blazor. It's been my main focus. >> We will have links to that in the show notes along with the places people can go to learn more. So I hope you found that useful and we will see you next time on Visual Studio Toolbox.

Azure Pipelines - Release

>> On today's Visual Studio Toolbox, part two of our two-parter, we're going to look at release pipelines and continue to see how you can deliver more value to your customers, more frequently and more efficiently. Hi. Welcome to Visual Studio Toolbox. I'm your host Robert Green. In this episode, we're going to continue our two-part look at how you can start adopting basic DevOps practices, and we're going to focus on pipelines. We created a build pipeline last time. Today, I want to show one more thing about build pipelines and then we're going to look at release pipelines. So again, best place to get more information on this is the Azure DevOps services documentation, aka.ms/vst/azuredevopsdocs. Great place to look at that. So in the previous episode, what we did was we created a build pipeline, and that build pipeline waits for a machine to become available, downloads the latest version of NuGet, restores the packages, builds the solution, runs the unit tests, and then publishes the build artifacts, which is the thing that you built so that it can later on be deployed. We saw that we ran one of these. It took about a minute-and-a-half. Then I went into Visual Studio and made a change to the broker unit test. Check that code in, push that code into the repo that triggered the build, which then failed because I broke a test. Then in the meantime, I went back to that code, change the code back. So the test worked again, checked it in, and that triggered a build which succeeded, and I did this part off-air. What I want to do is show one more thing about build pipelines, and I want to talk about branching. Because so far, we've just been working with the master branch. So I'm going to come into Visual Studio and I'm going to, in the master branch, I'm going to create a new branch, and I'm going to call it AboutPageV1.1. It's off of master and I'll create that branch. Then what I want to do in this branch is make a change to the AboutPage and, let's say, provide more additional information. Perfect. Now, I'm going to check this in to that branch because this is V1.1 about the AboutPage. Updated AboutPage text, commit all push. This push is add up to the branch. Then in the last episode when we push things to master, that trigger the build, we've now push things to a branch which does not trigger a build. The reason it doesn't trigger a build is because, we come in here and we edit this, there we go. Because this build gets triggered when we check into master. Now, you can if you want, have this build triggered when things are checked into branches, but the default is that it's only triggered when it's checked into master. Now, that means that if we come over to here and to our repo, we create a pull request. So let's do a new pull request, and this is AboutPage V1 into master. You can do this from inside Visual Studio. You can do this in Azure DevOps Services, either way. I'm going to call this AboutPage V1.1, etc. I can assign reviewers. I'm not going to do that. I'm just going to create the pull request. Then I can approve it. I can reject it, etc. I'm just going to approve it, and then I'm going to complete the PR. I can delete the branch if I want. Complete the merge. I have approved the PR. That code gets checked into master. Now, you might expect a build to be kicked off, and indeed it is. At this point, again, we could sit here and wait for a minute-and-a-half. We can look at some additional information. We can view reports on pipelines. We can see how often this is building and failing. It's worked two out of three times. There's a whole bunch of information that you can get here. But I think what we'll do at this point is we'll just let this go. Then in the meantime, we're going to build a release pipeline. There are a couple of ways you can build release pipelines. You can come into "Releases" and create the release pipeline from here. What you can also do is go into the "Repos." Go into your "Repo," and you can select to set up a release from here. So either way, it works. I'm going to go back to doing it from here. So we'll go to a "Release," and I'm going to create a "New Release Pipeline." The Release Pipeline says two questions; What are you releasing and where is it going? So the first question you get asked is, where is it going? I could do an Azure App Service deployment. I can do a bunch of things to Azure. I can do an IIS website with SQL Server. If I keep scrolling down, there's IIS without SQL Server. There's a whole bunch of options here you can get more in the marketplace. I'm going to deploy to an Azure App Service because I have created a couple Azure app services. So I've got vstoolboxtest.azurewebsites.net, that is a place to test the application. Then vstoolbox.azurewebsites.net is production. At the moment, I haven't put any code up in here. I just created the app services. I'm going to call this stage test because what I'm going to do is create a release pipeline and that releases to test first, and then to production. Now, the question is, what are you releasing? So if I click "one job one task," I said that I was going to deploy to Azure. So the question is, what Azure? So I will select one of my Azure subscriptions. I'll choose this one. Now, I need to authorize, I need to say that from Azure DevOps Services, I can go and talk to Azure, to my Azure, username and password, and of course, now tokens come down. Things are configured. It takes a little bit of time. You'll have to do this once per project. So the next time I create a Pipeline on this subscription, everything will already be on my computer to enable me to talk to Azure. I said it was a Web App on Windows. Now which one? It's VS Toolbox Test. Now, then I come back to the Pipeline, and the first couple of times I tried this out I forgot to specify something in the Artefact, so I said, let's publish to Azure, but I never said what are we publishing, don't make that mistake. Let's click "Add an Artefact". You can base it off a Build. You can go directly to the source code. I'm just going to do it off a Build. I'm going to select the YAML Build that we built last time, Toolbox DevOps Show, and click "Add". Now, look at a couple options. If I look at the trigger, the continuous deployment trigger, just as when we built the Build Pipeline using the classic build process, we had to enable Continuous Integration. So too here, we need to enable Continuous Deployment. Meaning that after the Build succeeds, we will take what got built and send it up to Azure. You could also do it on pull request, I'm going to leave that disabled for now. Then what I also want to do is I want to create another Stage. I could create a new Stage and specify all the things, or I can clone this Stage because it's almost the same. Instead of saying copy of tests, I'm going to call this Production. Then the only thing here that's different, same subscription, but I want to deploy to VS Toolbox which is the Production site. There's other options, I can pass in variables. I can say, how long to retain or release. There's all kinds of things I can do here. But I also want to look at the pre-deployment conditions and the post-deployment conditions. I don't want any conditions on Test. The thing built, send it to Test, Test can start working on it. But before we go to Production, I want to require approval. So let's set pre-deployment approvals to Enabled. Let's say me. There's an option here to say that if you requested the release or deployment, you can approve it, so can approve your on stuff. Here, because I'm a glorious team of one, I'll make me the approver. The default timeout interestingly is 30 days. That seems a bit long to me. I would probably make it earlier, but that's okay. You also have the ability to define gates if you have. More than just approval, one person's approval is required. You want to see that certain load tests passed or certain statistics that you want to be met, certain conditions that you want to be met. You can learn more about that here, but it's really more of you can set a particular bar. Unless the application meets that performance bar or security check or something, then and only then can it be deployed. So I set a pre-deployment approval on the way in, and you can also set deployment conditions on the way out. All right. Now let's save this. Now we have a Release Pipeline. Now, if we pop back to our previous example, where we merge the PR that kicked off a Build. Okay, perfect. All right. Now, what I want to do is I want to create, well, I have a Pipeline. We have a Pipeline that's created, that's automatically going to run if we do another Build, so let's go do one last Build. Then "Okay". Let's make yet another change here. Actually, let's not do that because I still am on the About page. I want to bring down Master. Stash that. I want to bring down Master. Because we did the pull request, so now I want to make sure that I have in Master the current versions. Now, what I'm going to do, I'm not going to work off a Branch, I'm going to work off Master. I'm going to check this in, updated, about page texts, not going to worry about my typos. Yes, I am because it's in perpetuity. All right, let's push this. Now, checking in this change into Master, which will kick-off a Build, and we're not going to sit here and watch that Build go, so let's fast forward until this Build completes. Fantastic. The Build worked, which should kick off a Pipeline. There it is. Release one is just been kicked off because the Build succeeded. What happens is, we're now going to deploy that to Azure. Again, you're starting to see why this is beneficial, and how this helps you deliver value more consistently, because all of this is automated. The idea of building, running the test, taking what got built, and deploying it to Azure. In our case here, we're just taking a simple app and putting it into an Azure Web App. You can imagine that for testing, you might have an ARM template that not only puts the app up there, but creates a new copy of the database, maybe populates it with some sample data. There's a lot going on. Do you want to have to manually do that over and over again? No. What you want to do is work, work, work. Then when you're done with your code, you check it in, you go home. The build works, the deployment works. Whether it takes 15 minutes or three hours, who cares. The next morning test comes in. That application has been deployed. It's all ready for tests to go. That's repeatable, and it happens the same way over and over again. That's the benefit of these pipelines, is to get repeatable, reliable, things happening automatically so that you make a change, they test, you make a change, they test. You do that over and over then you release, and then you do that again in the next Sprint. In the meantime, this has succeeded. It has deployed this to Test. Let's see if that's true. Let's refresh here. We should see the website. There's the website with the course, the latest version. Now, in the meantime, there is an approval pending to send this to Production. Again, if we go into mail, I see that the Build worked, and there is pre-deployment approval. Me as the approver, I get an e-mail telling me that we will go to Production when I approve. Now, what is the process for me to approve? It's probably more than I got an e-mail. I want to see what the Test results are. I want to talk to the Testers. Whatever process there is, let's say that's all happened. Again, I can do this from the mail. I can view the approval from the mail. I can come in here. Click "Pending Approval", we'll take many of the Approval. I can add comments. I can differ for later, but because its all good, I'm going to approve this. What that does is, it kicks off the process of sending this to Production. This may take more time, it may take less time in the Test. It may take more time because you're creating a new version of the database, you want a clean environment. In production, you're probably not wiping out all the data. It may actually take less time. Although, you may then have a series of tests that occurs to see if we literally roll this out. There is canary deployment, blue-green deployment. There's some techniques you can use to roll out the changes bit by bit rather than just have everybody use the new version, only to discover then that there's a mistake, a bug, or something got wrong. There are ways to roll that out beyond our scope here, but what's discussing. Now we're just waiting for this to get sent to Production. That worked. Now, we come over to the Production site like that. There we go, and head over to the About page, and of course it's correct. Again, the docs here they are, Azure DevOps documentation, aka.MS/vst/AzureDevOpsdocs. Great place to learn how to do this. Start slowly, build some simple Build Pipelines, some simple Release Pipelines. Learn at the cadence that makes sense for you, and start adopting the DevOps practices to be able to shorten your release cycles, better value for the customers, better world for you as the Developer. Hope you enjoyed this. We will see you next time on Visual Studio Toolbox.

Azure Pipelines - Build

>> On today's Visual Studio Toolbox part 1 of a two-parter on how you can deliver more value to your end users more efficiently. Hi, welcome Visual Studio Toolbox. I'm your host Robert Green. Today we're going to look at how you can get started using some of the basic DevOps practices. Now, DevOps is a hot topic. Lots have been written about it. Lots of people talking about it. There are entire channel 9 shows devoted to DevOps. But it's really important, and I thought we would take an opportunity on Toolbox to look at how you as a Visual Studio developer can get started down the path. Now, the question is, why? What does DevOps offer you? DevOps, one of the key things about it is, it gives you the ability to continuously deliver value to your customers. Key point there is the idea of continuously delivering. Now, think about apps on your phone. How often do the apps on your phone update? The answer, often. Why is that a good thing? It's a good thing because you're more likely to get bug fixes sooner, and you get new features sooner, which all in all is a better experience for you as the customer. Now, you as a developer, you should also want to take advantage of this. So consider an application you've built. You and your team just spent a year building V1 of a very important internal application. You released it, and your users are using it. Everybody's happy. Users being users, they do two things. One, they find bugs that they want fixed. Two, they have feature requests. Sometimes large, sometimes small. So if someone comes to you with a bug or a minor feature and says, I would like this updated. What do you want your answer to be? Do you want your answer to be, yeah we'll fix that bug in the next service pack which ships quarterly? Or yes that's an interesting feature we'll consider that for the next version of the application which will be six months to a year from now? Consider a world flipping that where you could say, well yeah, we do weekly bug updates, so we can fix that bug this week. We do twice monthly minor feature updates. So we'll take a bunch of features, and you can have those in a couple of weeks. All right. The latter's a better world for the customers who at the end of the day are why you're building software. So how do you do that? How does DevOps enable you to do that? It's a couple of key pieces. One, is the concept of sprints, which is a fixed period of time in which you're going to do work. So maybe you're on two-week sprints, three weeks sprints, and at the end of that sprint, you've got some shipping software. It's a very interesting topic but not what we're going to discuss here. The other part of it is DevOps pipelines, particularly build and release. What we're going to do in this video and the next one because I think this will be a two parter. Is we're going to look at build pipelines in this episode, and release pipelines in the next episode also known as Continuous Integration, Continuous Deployment, and therefore CI, CD pipelines. It's basically a way of having machines in the Cloud do a lot of the work for you of building an application and then releasing it to test to production to QA etc. All right. So what have we got? Best place to learn about this of course is the docs.aka.MS/VST/AzureDevOpsdocs. Azure DevOps docs are excellent, and you can learn a whole bunch of stuff in there. All right. So I have an application. It's a very simple MVC application, built with.net framework it's ASP.net application. I could've used core. I didn't. Doesn't really matter. I have the webapps. It's an MVC app. I've got tests. Of course, I have a grand total of three tests. They all pass, the app builds everything's good. So if I'm going to build this, then I need the source code to be somewhere that Azure DevOps service can get to. So I will add this to source control. What I'm going to do is pick a place to store the code. I could use GitHub. I can use Azure DevOps repos. Both are excellent. To keep things really simple here, I'm going to use Azure DevOps. So I go to my Azure DevOps site which is rogreen.VisualStudio.com. I'm pretty sure if you sign up now, there's a different URL naming scheme. But because I've had this for quite some time, it's still uses the old one rogreen.VisualStudio.com. I'm going to create a new project. This project will be Toolbox DevOps Show. Okay. I can make it private or public. I will keep it private. Then I can choose to use get I could use TFVC, and I can choose from the Agile, the Scrum, the Basic templates are here. I'm just going to leave the defaults, and I'm going to create a project. Now, this is my central location for doing DevOps, if you will. Okay. There are a bunch of pieces in here. There are boards. This is where you maintain work items, and your sprints in your backlogs. Again, that'll be a good subject for a feature Toolbox. Your repose, this is where we have our code, and then the pipelines, is what we're going to focus on. We're going to work on a build pipeline and a release pipeline. You can also do test plans and artifacts, which is a way of managing your NuGet packages. But again, we're going to focus on pipelines. Okay. We don't have code in here yet because we haven't pushed it in here yet. So we were in Visual Studio, we said add to source control, and we're going to publish this to Azure DevOps. So at Visual Studio will now do is, based on who I am, go out and find what Azure DevOps organizations I belong to. So I obviously belong to the rogreen.VisualStudio.com, there's actually a couple others I belong to. If you notice this line here keeps moving, so it's going out and searching. It has found a number of organizations. I'm going to pick this Ro Green one. Then what I'm going to do after it connects and brings down information on that. Notice that it suggests a repository name of Toolbox webapp, which is actually the name of this application. But in reality, my repo's called Toolbox DevOps Show. So what I really want to do is come in here, choose this Toolbox DevOps show project, and that gives me the right repository name. I don't want to create a second repository. I want to put it in the existing repository because I created the project first. Now, if I come in here and do a refresh, here's my code in an Azure DevOps repo. Okay. Perfect. Now I'll be checking code into that. What I want to happen is, I want to set up a build. So the first pipeline I'm going to build, is a build pipeline also known as a Continuous Integration pipeline. Couple places I can do it. I can do it from here. I can click "Setup Build". What I'm going to do is, duplicate this page because I'm going to create two of these. So from the code, I can set up a build. I'm asked what type of application is this. Here are some of the more common ones: ASP, ASP Core, Xamarin, etc. There's a whole bunch more: Docker, etc., Node, and you can get additional ones in the marketplace, but we have an ASP.NET application here, and now what happens is a build pipeline is created using YAML. Now, YAML, some people think YAML stands for Yet Another Markup Language. YAML.org says it's YAML Ain't Markup Language. Either way, it's like XML, it is a configuration language, and what we've configured here is a build. So this says trigger on master. So anytime I make changes to master, if I check code into the master branch in my repo, trigger this build. Then grab a machine, a machine sitting in a pool of machines. So up an Azure, there's a pool of VMs ready to do my build. The one Windows latest, this says there's a machine running Windows Server 2019, also running Visual Studio 2019, so there's a pool of those. Pick one of those machines, then set some variables, then get the latest version of NuGet, do a restore, and then build using these variables. What's the solution? It's *.sln, the buildPlatform and configuration are any CPU and release, and then also run any tests I have. Remember, this application has three tests. So this says run those next, all on a server up in the Cloud. Now, before we actually take a look at this, I want to show you another way of building a pipeline. So if I come down to pipelines here, then I create a pipeline, again, it asks me where's my code. It also gives me the opportunity to use the classic editor. There's two ways you can do builds. One is in YAML, one is in the classic editor. If you've done build pipelines before, you're more used to the classic editor. YAML is the new way of doing it, but let's go look and see what happens if we use the classic editor. First question is, where's your code? Could be in GitHub, could be anywhere else. Here, it's in an Azure repo called Toolbox Show. I click "Continue," and now I can create an empty job and build from scratch. I can just go and do YAML, or I can choose what type of application this is. It is ASP, where is it? There it is, ASP.NET. I click "Apply," and I'm going to rename this Classic Build Pipeline. It says grab a pool agents. The agent pool is the machines that are available. This one defaults to a machine running Windows Server 2016 with Visual Studio 2017. I'm going to choose Windows 2019 running Visual Studio 2019, which is equivalent to this Windows latest in the YAML. Then we're going to get the sources. We already said that. We're going to get the latest version of NuGet and do a restore, which again is equivalent to this YAML here. You're going to install or NuGet command, and then this will build the solution based on some variables, release any CPU, so so far the same. Then this will also run the unit tests. So we're still doing the build, is still doing the tests. So far, these are pretty much the same. One big difference though is using the classic build, the build pipeline or published a symbols path and publish the artifacts. Interestingly, the YAML build at the moment does not publish the artifacts, which means when it's time to release this and deploy this application somewhere, like to testing, there's nothing to deploy because you built it, but you didn't take the results and put it somewhere. Now, why is this? Needs to be said that YAML at this point is still in preview and will improve over time. So eventually, hopefully sooner, this will contain that. So what do we do about it? We need to add some YAML to this. Well, there's a couple of ways we can do that. One, is we can say we want to publish the artifact, and we can view the YAML for that. So for any of these tasks that constitute the build, we can look at the YAML. So here's the YAML that will do that. So I'm just going to take this and copy it, bring it over here, and put it in the YAML for the build I want to use. Another way to do it, if I click "Show assistant", here's a number of tasks including, if we scroll down, the Publish build artifacts tasks. So if I double-click on this and then "Add," I can add that YAML in here. They're not 100 percent the same, so I'm going to use the one from the classic build. Then the last thing that I want to compare the YAML to the classic build is, this automatically is triggered when there is any code written to master, whereas in the classic, you have to come to triggers and turn that on by enabling continuous integration. Now, at this point, these two build definitions do the exact same thing. Now, I don't actually need two of them, so I'm only going to run the YAML one. I'm going to save this and run this, and we'll see what happens. It triggers a build like this. So if I click on this, I can actually watch it. Now, granted, watching builds go is not anybody's idea of a good time, but when you're learning and you want to know what's happening, it's actually quite instructive, also this build takes about a minute and a half, so it's not too too terribly bad. So what happened is we waited for a agent to be available, a machine somewhere in this pool running in the Cloud. Once that's available, the job initializes, tasks get downloaded, code gets checked out.. Then we Update NuGet, the latest version of NuGet, then we do a restore for all our packages. Okay that's happening. Then we do a build. Now remember this build agent is a VM running Visual Studio 2019, so it's using MSBuild obviously. So all of this is going to look very familiar because it's essentially the same thing you do in your machine when you build solution. So all of that should look familiar and again this takes about 90 seconds. Your build might take longer, might be a five-minute build, it might take 10 minutes to run all your tests. You're certainly not going to sit here staring at this. One of the benefits is you're not expected to, you've handed this off to a machine sitting somewhere, a VM from a pool of VMs available and that machine is going to do all the work for you. So all the tests are run and then in one minute and 19 seconds this works. Okay, so now if we go back to here we can see the job succeeded in one minute 19 seconds. We look at the tests, we can see that all of the tests passed and life is good. Okay, so now, we said that every time we check code into master, we're going to do a build. So let's see this happen again, or let's see this be triggered by checking in code. So if I pop over to Visual Studio, let's make a change to some code here. I'm going to come into the home controller and I'm going to change the ViewBag message, save that then I'm going to check this code in. Check this code in by clicking here. Put a comment, updated about ViewBag message. All right, let's "Commit" it. Let's "Push", now what this does is it pushes the current branch and this failed because since I created a build I need to do a "Pull first, usually when doing this demo I remember to do that occasionally, I don't. So let's try this again updated about ViewBag message. Now, let's "Push", and now this gets pushed into master in my Azure DevOps Repo which because I've set up continuous integration kicks off another bill. Now we could sit here and watch this for a while but while that goes let's look at a couple other things. An additional thing that happens when a build is kicked off is that when it succeeds or potentially fails is you get mailed. So here's the scenario. You write a bunch of code, you test it locally, you check it in and then that builds the entire application. Now, try to think about this, on your machine you've got the code you're working on, you've got the tests you're working on. You've got the latest version of everything as of the last time you pulled everything down, but you're focused on your code. You don't want to have the entire application necessarily sitting locally. You're really interested in stuff you're working on or maybe you're doing a PR, you've got a branch and you're going to do a pull request. So everything works on your machine and then you check code in and what's built is the entire application. Now, it's entirely possible that you've written some code that breaks somebody else's code or somebody wrote a test that you didn't get updated, now the code you wrote working on the old version of the test fails the new version of the test. Anything can happen to break the build. So the idea is that you check in code and then you run a build, you run the entire application, not just your piece of it but the entire application as it stands with everybody's code, and this is still queued, it's not running. Okay, so what we'll do at this point is speed this up a little bit, so we don't have to actually sit here and watch. We see that the job failed. Apparently now if we were watching carefully, we would have seen somewhere in here that VSTest, that task failed and there's a hint in here I saw as it was scrolling by, some red, a test fail. Now, again, I'm not going to look at that but if I come back here, I see that the test failed and if I go to look at the tests it is because a test failed. Then in addition I get an e-mail that tells me that the build failed and the reason the build failed is that a test run failed. Okay. Again, I can come back here, view the results, which takes me back to here. I can click here on "About" and I can see exactly why this failed. So again, the beautiful thing about a build pipeline is that every time anybody checks in code we can do a build of the entire application and make sure that things one person has created or worked on don't interfere with another and that entire application builds. Now, if you're the only one working on this, it's still useful to do if it's a complicated application. Now here, of course, it's a simple MVC app and you might be sitting there and saying to yourself, "Well, yeah no kidding green. If you would just run all of your tests before you check that code in you would have discovered this." So it is not the case that the beautiful thing about Azure DevOps is it means you don't have to run your unit tests. I am just using this as a simple example. The beautiful thing is that once I check in code the entire application gets built and then we can see if it still works. Okay, I think this is a good place to stop, we'll pick this up again in our next episode where I think I might show you one more thing about build pipelines but then we'll move on to release pipelines. So I hope you're enjoying this so far, we'll see you next time on Visual Studio Toolbox.