[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]
No comments:
Post a Comment