Building Bots Part 1

it's about time we did a toolbox episode on BOTS hi welcome to visual studio toolbox I'm your host Robert green and joining me today is Sam bazoo of progress hey Sam hello welcome to the show welcome to the cozy confines of Studio B and that's nice it's changed but it's nice yeah we're just gonna sit back and chat about BOTS it's about time now so bots is one of these new things that there's a lot of buzz about a lot of cool demos of bots running in Skype or you know BOTS calling and making appointments for you and there's just an amazing amount of stuff that's going on and that's all cool of course but what I want to focus on is you know us as traditional enterprise minded business developers whether we're doing desktop or web or mobile or whatever what does it take to build one of these things because it turns out it's not that hard to get started and then what are some of the uses that we might think about where we would actually take advantage of these in the types of businesses we're currently in mm-hm so we're gonna do that this is a two-parter so obviously this is part one of two so tell us about bots let's jump in yep let's switch to slides so we can talk through so what you see I think over the last couple of years is human-computer interaction is evolving mmm-hmm be it through a RvR be it through any other ways and you see the impact of AI so we are not only interacting differently with computers we're also expecting different things for computers and this is where BOTS come in and BOTS aren't new they're about maybe two three years old now but they're evolving fast so I think it's kind of the next frontier of apps so let's kind of dive in so as Cortana Alexa Syria those bots sort of their agents okay let's dive in all right so Robert already introduced me I'm Sam Basu I'm a telluric developer advocate at progress I kind of focus on the dotnet side of things across web desktop and mobile and BOTS is something that that actually does excite me nowadays so I think one of the fundamental questions we need to ask is what exactly are we talking about because yes BOTS is a very generic term we're not talking about robots we're not talking about like the spider BOTS that Bing or Google used to kind of crawl the web there are different types of BOTS what we are focusing on for enterprise application in particular are chat BOTS more conversational BOTS bots that we can actually have a conversation with be it over voice or be it over text and what can they do for us how smart can they get so actually automate things for us and can actually help us okay yeah one of the fun things that I've actually seen many people do whenever we talk about conversational BOTS back in 2013 I think there was a movie that came out it was called her it right hook in Phoenix in them in it and it got a little weird quickly it was about conversational BOTS but this lonely writer he started having a relationship with his conversational bot because it was so smart and it kind of got him very quickly right so that's kind of the AI aspects of being a bot and how smart it can get so let's kind of break down what exactly is a bot and how we can build it okay okay I think one of the reasons why building conversational BOTS is interesting and challenging and fun in a way is because we're all trying to make a cake we have a lot of ingredients there is no fixed recipe because it really depends on what exactly you want your body to be okay so you have to kind of break down what are my ingredients and how am i exactly going to build it so it suits my needs so let's kind of break down where conversational BOTS stand today and we're possibly looking at a slice of it but bots are apps okay that's fundamentally it I mean these are web-based apps that we can communicate over HTTP and they can be housed in different things but they're fundamentally apps but there are complex apps because they have lots and lots of integrations that's what makes them smart so a bot by itself if it was just talking to you and had no brain will be pretty dumb it was only going to go off if else statement and a bunch of rules and not be able to a whole lot so the real benefit of having a bot is all of these integrations that make it smarter okay so that's what we're talking about so there is a lot of plumbing there is a lot of different things that make up a bot so to your point are the voice assistant spots in a way they are but they are in the front end to the intelligence that's behind so when you talk to Alexa when you talk to Cortana or Google assistant you are firing things off over voice but things that you are firing off beat and as your function wheezed in an Amazon lambda that's what the intelligence lies so those are BOTS okay you're just using an agent to get to the bots yeah and I mean with Cortana you can type it in so I mean essentially is a conversational bar over over text right yeah so these are agents and then we talk about platforms because this is where BOTS can recite and this is kind of a big benefit of having a bot it really is platform agnostic what you're building is very fundamental and there are multiple platforms who can all talk HTTP so you can have your bot house inside of Facebook Messenger or filio or it's slack or team wherever your users are you can have a bot kind of integrated in there so it's easy for them to find it and talk to it okay so these are the platforms and then we have agents so like we said BOTS by themselves don't do much it's what we do behind the scenes with boss that makes it interesting so first up is there's got to be some sort of rules engine that tells you about what to do what questions to ask what path to kind of guide you down as we're having a conversation with your bot next thing is natural language processing if your bot is literally going off a bunch of strings to say find me a flight out of Seattle then that's the only thing it will understand if you say get me out of Seattle it's going to get confused but that's kind of how we naturally speak to each other so this is where natural language processing comes into play and all of the voice agents do it as well so when you say get me out of Seattle they find so it's an utterance intent what exactly are you trying to do like get a flight out of Seattle and then we'll find the parameters like what airport are you flying out of and then it's going to trigger the corresponding contextual thing that's going help you flying the fly so in that way it's it's a step or several steps beyond just voice enabling an app right like you could voice enable an app so that instead of having to pick from a menu choice or click a button you could say open the report open the monthly report right right so at that point there's one thing that the app does it opens the monthly report there is a command and you say open the monthly report but if you went in and said what happened last month then obviously the app has no idea what you mean because you didn't hardwired in a bunch of commands so the the beauty of the bot is that it can be trained to be more natural more cognizant right of what you're saying instead of just expecting if you say these five things I will do these five things if you say anything else I have no idea what you're talking about okay so there is a command there's a thing that the bot knows how do you know it's how you get to it because I think that's that's an important distinction because I think the very first time I saw a bot I was thinking oh well I can voice in and I can voice enable apps and I've been able to do that for a long time what's how is this better right so it's a bunch of things that your bot knows how to do and a bunch of different ways that the user can come to it okay yep so that's a natural language processing then there is some state management there's some logic that you will have obviously behind it what if you told you about order me the pizza that I had last week right now by nature bots are supposed to be stateless like it's one turn-off you saying something and the bots getting back to you but how is it going to remember if you what pizza order last week so you can actually persist some state in your BOTS and that kind of goes back to wherever you want to store your data and how you want to authenticate and authorize the user but it's possible to maintain some state so the bot is more of a conversational and how do humans will interact sure yeah so these are the things that kind of make up the bots intelligence and then they're about frameworks because we don't want to do everything from scratch right difficult so there's Microsoft bought framework which which we'll talk about exclusively today I actually have not played a lot with others but there's there's a lot for sure there's Facebook what AI Amazon makes Lex IBM makes Watson and dialog flow from Google so there are lots of these frameworks they all are about the same and they have their SDKs they have their ways to kind of bring you on so all of this is kind of geared towards helping developers build BOTS ok that's it so let's kind of dive into Microsoft bot framework and then see what it can do for you before we do that to answer your initial question of what what can this do for enterprise apps mm-hmm so yeah all the skype bots are fun but when it comes down to what line of business apps can fit as bots it's a lot of little things that can be automated workflows and I'll give you two classic examples where we actually have customers doing this we have a hospital where people call in and they want to schedule an appointment it's a very basic task and yes somebody has a calendar open every doctors calendar is in sync and at that point you're really just choosing a bunch of things and click and you're done you have an appointment that's something that can be automated and we have in a hospital that actually has it sounds bad but they've been able to cut one human and kind of having two other things but over like six months they were able to train their BOTS enough that is good enough to schedule simple appointments it's all about like what can we automate before you have to talk to a human being right yeah another example is support systems if you have like an IT Help Desk that's trying to help you kind of go through problems and roadblocks maybe the initial things maybe your basic problems can be dealt with with a bot it just knows the basic things that can go wrong and then if you're having more problems than transfer to a human being okay so some some common examples so that's going to talk about the Microsoft side of the world because this is where we live and breathe so this is what such a kind of opened up a couple of years back conversation as a platform this is the next interface this kind of helps AB developers have ways new ways to interact with their system as an end user so it's it's a new frontier for us the benefits are obvious we get to have increased productivity we have to we we are able to reduce the time that a human has to spend over just trivial things things that can be automated and the big benefit is being able to reach customers where they are at so if you are already plugged into messenger or Twilio or slack then we'll meet you there you don't have to install a new app we just kind of have a part that's embedded into what you are that's where we stand that's the benefit of pause okay okay so now let's dive into what we can do with it what benefits we can get and how we can start building it so based on who you ask Microsoft bot framework is a big thing I think it's comprising of two fundamental things one is bought builder this is the SDK this is how you actually build your apps your bots you don't want to do it entirely online unless it's something super simple you want to have it locally and that's how you will have it in your IDE and you code it up and you make it work and you test and then he'll push it out to wherever you want to have it hosted and there is a developer portal which kind of helps you get started it's gets you the SDKs it's a place where you can actually host your apps as well a host your BOTS and then it has all of these little connections which help you get your app into slack into Skype into Facebook those things are really nice and then this is just a bot part of it and then we get into what's called cognitive services which I don't think it's really a part of the bot framework at all it's it's AI suite right but this is what really gives your body intelligence these integrations I think we are about maybe 30 or so restful api is right now you don't have to be a data scientist you don't have no AI you're literally making restful endpoint calls to use cognitive services but these things can be trained if you are into machine learning a little bit and then your bot starts getting smarter and smarter okay okay so that's where we are cognitive services these are Microsoft slides but we we know what they do it's a lot of things it's vision it's speech it's a big part of it is latch language Louis which is learning natural human interactions language and an azure is very very good at this so all of these api's are part of common e-services and this is what helps us make our BOTS smarter okay yep that's what we're going to integrate with I won't go too much in details but just to kind of give you a hint of where things are at and then there is a Shabbat service so you don't have to use this essentially a bot is a restful endpoint you can have it hosted anywhere you want but this comes bundled with a whole bunch of goodness that kind of helps you get started quickly helps you have your bot nice and hosted easily and then have all of these connections so you can put your bar anywhere you want okay yeah so that's the adabot service it has those SDKs that we talked about and it has templates it has integrated ways in which you can test your bot and then you can deploy our bots through the channels and then once you are successful building your bot and having a deployed then you kind of take it to the next level let's do see ICD pipelines let's do as you're functions that trigger other things based on what your bot is doing so all of those extra things can be built in and how you scale your part based remand and so okay so as you're Bob service is a very compelling offering when you have to get them get started with BOTS okay so that's enough slides I'm getting bored of slides altogether so let's let's look at some demo all right so the first place I will point anyone to go to is do a search on bot framework and you will end up land on dev bot framework comm this is the landing page for Microsoft offering work and it has a lot of goodness to it so take a look at to what it can offer and it talks about all of your audiences all of your channels and how you cannot get started with documentation this is actually really really well done this is a Shabbat service that you're looking at but some of it can be local so we're going to walk you walk through some of these things that you can do to get started so notice how right out of the gate you have different ways of getting started you can do bot service which is directly in Azure or you can be local in c-sharp and og okay so before we go in right now the Microsoft bot framework is at v3 mm-hmm we started about 2016 so we are at v3 right now v4 is what's coming next and we have a preview bit of it and v4 is substantially different actually in some ways but we will talk about v3 because that's the present stable production release but v4 is coming sometime this year are already next so in terms of languages and programming IDs and and tools that you can use to build your bot you are looking at C sharp and nodejs right now okay so pick your poison C sharp or JavaScript and then go at it in v4 you will be able to do Python and Java okay but we're not there yet okay so this is the best place to start and this is kind of guide you through let's look at the Azure side of the story so I'm going to go to portal - accom so this is a sure and if I make it a little bigger so we can see if you're going in here and say create a resource what you want to pick is a I in machine learning and then in there is a whole bunch of things but you want to pick web app BOTS mm-hmm once you select this it's gonna ask for a bunch of things what's your bot name where what subscription resource group you can create a new one if you have a whole bunch of bots maybe you kind of group them into one resource where do you want to have this hosted pricing and and so on templates we'll talk about that in a second it does use some address storage maybe the state management in particular does use Azure storage app insights and so on so you kind of set this up and then you here to create and it'll go ahead and create a bot for you so instead of having as you're kind of waiting waiting on Azure to spin this up let's kind of look at what we have so here's a simple bot that I have and I have not changed a word of this it's just purely what the template gives you but this thing is spun up it's called the the Sam echo bot so it's just a simple echo engine but this thing is spun up and it's hosted and hosted in a charade now so this is what you will get when you hit the create button so before we even look at anything else if you go do this test in a web chat so this is a bot that's ready and it's deployed so when you hit that test it's actually gonna bring up this little console it looks like a little web chat engine and this is where you can test so I can write things here like hello and it'll it's gonna come back and said you said hello right so we can say more things hi from Redmond it's gonna come back and say you you said - Redmond so this is literally a echo bot that kind of repeats what you said okay okay but it's a quick and easy way of you being able to deploy this and be able to test this right away so you know exactly how how your app is working so this is what's called the web chat and if you are using this and if you're using this from a web application you can just kind of plant this and embed this as is so this web chat can be taken and embedded in your verification so all of this chats functionality is available from your web app it's just one measure you don't need to know about it it's just a web chat okay okay so when I go into this thing called channels this is what makes apps interesting this is where you get a whole bunch of things that are easy to configure web chat is already running which is what we saw and then Skype this is another channel some of these channels are kind of featured and already configure for you like Cortana Skype they're very easy to get started same with teams if you are going to Facebook Messenger or slack or Twilio there are some extra like authorization and things that you have to do to make sure your app is registered with Facebook you're carrying acts like authentication tokens back and forth but it's not that difficult and when you kind of go through this Wizards they kind of step you through like go register your app bring back nap key and have it set up but essentially this is a restful endpoint that knows how to get an HTTP message from you and then echo back what it just said okay so you notice the Skype thing here which is also the same Bart running in Skype because I already went through this but what it does is let me pull up Skype show essentially that echo bot now becomes a contact in your skype list so this guy here once you configure it and open up skype it's gonna say hey you have a new contact so your bot now becomes a contact so you can talk your bought just like you talk to a human being so in here we can say hola it's gonna come back and say hopefully you said so same exact part that we saw on Azure through a web chat now it's not a venture it's part of Skype now and this is the big benefit that you get with all of these channels because you can deploy your functionality in a platform agnostic way through whatever channel your user is using okay yeah so that's just just a Skype app Skype channel there are other things you can do like obviously Skype for business and slack and Facebook Messenger so this is the nap that's running let's take a look at build and that'll show you what it's doing behind the scenes so it's saying hey we have an app a bot it's running in Azure but you have not made any code changes yet you literally haven't even seen your code you went from a template and you said give me a basic bot and this is what we spun up for you there is some code behind it how do you want to work with it so you can say I want to download the zip file which is your entire solution can download it a zip file you open it up in Visual Studio and then when you're done with your changes you push it back up - that's one way or you can say I actually do want to do continuous deployment engineers bills and deployments so this is where you say no I want to push my code to github or VST s team services and then when every time I do a push and I commit you do a build and even I should treasure so you can do CI city but if you are working with something super simple like this one you can do the online code editor and what that does it just opens up your solution inside of a browser and if you kind of recognize the look and feel of this visual studio code it's actually aware that right it's an electron app so you kind of see that shell you see the same code intellisense and some of the benefits that you get so this is what as you created for you when we said file new project and then create a new bot this is what it did and it's gonna say hey you can change things here when you're done just hit build CMD we can build it and deploy it back for you so there's a whole bunch of things in here that are not important the only thing that's important here is this echo dialogue CS this is literally the one file that's controlling what your bot does so this is going to standard for any Microsoft bought framework bot so there is a message received this is fired when your bot receives a message from the user so the users say something it comes to us and you can actually reset it so you'll notice that we actually have a counter that counts how many times you say it and then if you say reset it's just gonna reset the counter so there's a prompt to make sure you're you're confirming it but otherwise it's just gonna say contacts start post async you said that okay so this is literally the one line of code that's echoing back what you're saying that's it that's the one so just one line that can echoes you back what you're saying so this is a bot that's deployed when you go to a sure and just do file new project give me about service ok so this is a bot because it's built on the bot framework but it's not a bot because it only does one thing yes ok so if this is all you wanted then wrapping it around a bot maybe a little bit of overkill yes but this is a nice template to give you some basic plumbing and then you can build on top of that but I mean this is a good starting point because not only are you creating a bot you're also hosting it in a sure and you already have those channels that are configured so you can put that bot in Skype and slack so again I would point people to the documentation which is really good if you go through the QuickStart here this is what we did creating a bot with the bot service but if you want to get the bot builder SDK then right now you have dotnet and nodejs so if you look at what the dotnet side of the story is you need vs 2017 and then you need the bot template c-sharp I mean it's a template extension that gives you this template simple echo bot mm-hmm so you'll get the bot framework and then you start with that and then it spits out the same code that you just but just in c-sharp and it's it's local to you and then you can test you about right now this simple bot is just web app so you can kind of fire this up now is Express and run it locally and then we'll talk about a different type of way in which you can test your bot that's the emulator so same exact idea you can do it with a dotnet and c-sharp what I like being on a Mac today is the node.js side of things because if you're in JavaScript you can do the exact same things the bot framework is time from agnostic that way so what this expects you to do is have NPM installed and then you get this part builder package essentially so it has all of the bits that bot builder can do for you so let me show you what that looks like so I'm gonna go in here into a folder and bring up my terminal alright hopefully this is big enough so I'm going to go into my folder here this thing is called the node echo bot and if I kind of fire this up if I say node fjs I'm firing up the app you don't see in it anything because it's just a console app but I can say the same exact things mm-hmm so it's just echoing back what I say so same exact idea it's just running locally in a console app so if you look at what this is essentially so I'm going to fire up vs code and look at the same folder essentially this being a node app we did a NPM in it so we have some package JSON we have the node modules in here but this is that one file that's making the bot work so essentially with node.js you have dependencies so we're depending on the bot builder and we're saying we are building a console connector and whenever you kind of fire off the message received thing we're going to take your text and kind of said you said that okay one line so this is no js' this is pure JavaScript running on the server side or wherever you have it hosted but it's it's your bot written in node.js now this is just local this is a console app they kind of step you through there are some extra packages called Resta Phi which kind of helped translate this console app into a end point because the bot has to be reasonable in mind so if I do an NPM install of rs.25 which is what the docs will actually walk you through so this is Resta phi is what we're using it's a very simple package that kind of helps you make restful endpoints out of your node.js code whatever your app is doing so we're using this and then once we have it we can change a little bit of code here this one is requiring Resta phi and same bot builder but we are creating a little server here so we can host it as a restful endpoint and then we can take into the cloud or whatever web endpoint it is that's our our port number and then we are creating a chatbot the app ID and password we'll talk about this so every part that's deployed to that robot service has to have a unique identifier okay and as your create that for you but otherwise it's just gonna say you said that so if we actually go back and run this now instead of app jeaious let's run node restful app dot j s this one said hey I'm not a console app I'm running at this port because you use Resta Phi so I'm running it as a restful service on 439 78 so how do you test this you can go to your browser or you can use this little thing which also comes with the bot framework this is called the bot framework emulator it looks kind of a little bland without having any inputs here but this is a local emulator that will help you test your BOTS locally before you're ready to deploy it to whatever service so in here I can actually go to that same port that we are on again it's going to ask for app ID password you can skip it for now you can test this locally but once you have to go to a show you do need the app ID so this is the exact same app and now you see that working here in the inside the emulator so this is the restful endpoint I don't have it hosted anywhere but I'm able to invoke it and the last thing is this one kinda shows you all of the JSON that's coming back and forth about service and and you so this is a super simple emulator but it does a lot of things and actually the emulator on Windows is a little more sophisticated than the emulator on Mac because one of the things that you get into with bought development is kind of conversations and you have to test your conversations and sometimes you have to kind of start midway in a conversation to start so it's like a little bit of template where you can pick up a conversation as just simple JSON and gonna start Midway and start testing so it'll let you do all of those things right yeah so that's the emulator that's one way of running it so let's let's close this that's just a quick example of doing it locally in no chairs let's kind of go back to Azure and I'll show you the other side of the story here so this was our echo bot so let's go home if I did a new resource again if I did a web app and then you look at these templates so it's not just the basic template which you can do it comes with five or so templates which kind of help you down the right path of building a bot first thing is formed this is one of the most commonly used templates this is where you have to order a pizza or you have to book a flight out and those repetitive things because essentially when you do this on your web applications today you are going through a wizard none of this is new right it's how you want to interact with your computer are you more comfortable doing a more natural conversation rather than just clicking around on your website okay so we can kind of walk you through that wizard in a bot so these are like a series of steps then language understanding this is where we're actually going to call into Louis in cognitive services because this is what actually understands what you mean when you say natural things okay so behind it it's going to be an azure Community Services app which has to have its own app ID and it's needed it needs to be registered and then that's when you're going to have to train your model so when you say booked a flight out of Seattle what are the 20 different ways in which you can say it so they're your bot understands okay and then passes it back to the bot so essentially what we are getting is from the bot framework you are pre-configured to call in to Azure cognitive services and then as your community services makes sense of what you are saying and brings it back to the bot and you can do this from C shop or no js' okay so just a quick example of the form thing which is very easy to look at I do have a form bot here which is called the sandwich bot because that's just a normal example so let's go ahead and look at this thing here we can test this in a web bot or web chat window so here if you notice the little messaging here I can say hi I'm up here and the bot knows that it's a specialized bot and says hey it looks like you're trying to order a sandwich because that's what I know what type of sandwich do you want so these are now Pickers okay so you get to pick what you want I would like a steak and cheese now it's gonna go through a list of things now you're getting two rules right so you said this then that then this then that so and you can kind of back-trace sometimes if your user does not give you the right response you can say oh I didn't understand that I wanted this from you so you can kind of go back and forth a little bit so 6-inch sub what bread you want that and then within breads with in Italian breads you have two types what do you want what type of cheese so these are all Pickers then you get to pick a whole bunch of things so these are like just numbers that you can pick cucumbers what type of sauce do you want let's do honey mustard and that's it so it's essentially said I went through these six steps with you and I made you choose things every step and you gave me this sandwich and once you are ready is this your selection you said yes and then said okay that's your sandwich I'm going to send it off to the shop and they're gonna deliver whatnot okay so just a super simple way of using the form template which actually kind of gets you quite a bit into these like flows okay how to ask the user and if you look at what this does for you I'll give it a second all right so now this one has a little more stuff to it so there's a model which is our sandwich this has all of your options like what type of sandwich what was it what type of bread what type of cheese it's all in here and then you have your dialogues as to how you actually control what you ask the user that's message controller so this is where your tasks and your your your post and you your awaiting the message from the user all of that is going to code it up here and then you kind of let bot kind of drive the conversation as to what exactly it needs to get all the information from the user so we can go about it so all of this is kind of bundled in and it's part of the template that you get it's really easy to call into most cognitive services like and good examples of this are like vision api's if you have to have a bot that knows how to understand or make sense of images from the user you hand it off you take the image you hand it off to the azure Community Services vision API we have another customer of ours who uses the vision API to do quality control on shipping so they have a little camera that's mounted on top of shipping containers mm-hmm and they do quality control as inside going out of their warehouses you can also do sentiment analysis with with common services so as you are talking to your bot you can kind of sense that the user is getting angry right and you can sense his sentiment and say oh maybe we can do other things to make you happy and so on so all of these things are intelligence that you're adding to your bot and this is what makes BOTS smarter and they kind of let you automate workflows so this is this is where we are this is where we start some things that I really like pointing out is the thorough documentation that the bot framework has there are tutorials on how to do just about everything let me show you some things that are really interesting the concepts here let's do Congress services language understanding let me do a how-to I thought it was really nicely done they talk about channels and the thing that I was trying to get to is how you can hook this up to language services that's something we'll do in part two yeah we could so essentially I mean just just start here essentially is what I'm saying okay and they have documentation on how to use vision API and language services all of these things that help you go from your bot to other places that give you about intelligence okay that's it so bots are nothing more than apps you can a restful endpoint but it's platform agnostic so you can put it in whichever channel that your user is using and start automating little things in your workflows that don't need human interaction very cool yeah yeah I mean if you look at some of the most common things that we do on most websites it's a bunch of steps that we follow wizards and this is where BOTS can come in and make it more conversational and more natural right yeah all right that was a good introduction we'll end it for here in this part and we'll come back in part two and and see more about how to build them absolutely so again this was all about BOTS you can find me at SMI div that's my social handle on Twitter and github in everywhere but thanks for watching all right and we will see you next time on visual studio toolbox [Music]

Building Blazor Web Apps Faster with GitHub Copilot in Visual Studio 2022

in this demo I'll show you how to use GitHub co-pilot within a simple Blazer project and the cool thing about this is we'll get to see how copilot can help us navigate a couple different contexts here including C sharp code HTML CSS even some bootstrap elements so the project I'm working on is a simple Blazer resume website and this comes from the.net conf Student Zone demo so on the right hand side here is my resume page of my website and there's three main sections so far there's an about me and experiences and an education section but I think every resume should include a list of your skills so you can showcase them to Future employers folks you're networking with Etc so I'm going to go ahead and add that in and I've actually already included some of my skills data in the resume.json so now I'm going to go into the resume.razer file I'm gonna go down below the education section here and on line 36 I'm going to prompt copilot to help list my skills they'll say list skills and co-pilot's given me the following suggestion and this looks pretty good it's following a very similar format to that of the previous education section so I'm going to go ahead and accept that but one thing I am noticing is it didn't include the closing div so I'm going to go ahead and add that in for Copilot and now it's adjusting that to me which is perfect co-pilot once again isn't here to run the show it's just here to be a pair programmer and sometimes it doesn't do everything perfectly so I'm going to save that and as we can see on my resume page my skills section is here another thing to notice is that the list skills comment is also included there so I'm actually going to go ahead and delete that um just help co-pilot out a bit but I'm still not seeing my skills being displayed so I need to go in and add those so I'm going to go into my skill.razer file and I'm going to ask copilot to help me list these skills so I'm going to ask it to display my skilled data okay the skill Theta let's see what it comes up with okay so it's giving me something pretty similar to what I want um I'm gonna see if there's any alternate suggestions which would show up when I hover over that ghost text um but I'm not seeing those so I'm just going to hit tab and I'm going to add in what I wanted to see here so I'm going to say estimated level perfect doesn't always do everything perfectly so it's all good I'm gonna help it out and also add in that closing div great so now you can see the skills are displayed here on the right once again that comment is also displayed but I'll take care of that after I refine this a little bit because I want this to pop a bit more so I'm gonna have copilot help me to make these show up with a little bit more contrast to the background and the way that I'm going to do that is to integrate a bootstrap card in here and make that pop so I'm actually going to go ahead and delete this and I'm now going to ask copilot to display the skill information in a card in bootstrap bootstrap and this looks pretty promising so I'm going to go ahead and check if there's an alternate not seeing one I can accept this add in that closing div awesome so it's given me those cards uh in white unfortunately that means that we can no longer see my skills again so I'm going to further refine this and continue to get more and more specific with copilot one of the reasons I'm doing this is to show to you all that copilot works best when it has very specific clear instructions um for the task that you want its help with so I'm going to go back in I'm going to delete this and I'm going to give it some more specificity here I'm going to say with a blue background and white text all right it's giving me the BG primary text white this is looking pretty promising I'm gonna accept that and add in my closing div all right looking much better but I'm going to go ahead and refine even further because I don't like the way that these uh estimated skill levels are showing up in Gray so I'm going to go back in um refine what copilot gave me wasn't perfect but did a pretty good job and I'm gonna make that no longer muted Perfect the final thing I'm going to do here is delete this comment so that it doesn't show up on my resume page and there you go I've got my resume copilot helped me to edit it up a bit give it a bit more contrast there's definitely a lot more that could be done here but I hope this was a helpful display on how copilot can help assist in your Blazer projects

Building Blazor applications on a Mac

hello so welcome to the building fleas their applications on a Mac and definitely check out the weather app that Scott hunter just mentioned it's really cool but we have some kind of simpler stuff to get started to talk more about what blazer is and take you through an intro app how to get your feet wet and then we'll move to a more realistic app and make some changes there as well yeah oh and I'm Kendra havens I'm a program manager on dotnet and Visual Studio and I'm Dan Roth I'm a program manager on the asp.net team cool okay so Dan what is blazer is boy so much talk about it and so much excitement so Blazers a modern web framework for building client-side web apps using c-sharp and net instead of JavaScript it's cross-platform it's open source and it's based only on open web standards now we've had ways to build web apps with dotnet for a long time a traditional don''t web app you take your dotnet code and you put it on the server and then the browser sends requests to your server and it responds with dynamically generated HTML or Jason that's pretty typical dotnet web application but if you wanted to do anything that ran in the browser well that meant you had to use some Java scripts like using one of whatever the popular JavaScript framework of the day is and that's cool I mean Java scripts great I mean yeah it's great you kind of have to switch context though and that can kind of slow you down so they can stay in dotnet code that's kind of convenient if you can use the same language the same frameworks the same tools same build system across your entire application that's what blazer is all abouts enabling you to build full stack web apps using Donette and c-sharp that's what we've been working on sweet okay so Blazer you build client-side web apps using just net and c-sharp code it also comes with a component model so you can build reusable web UI components you can package them up as NuGet packages and libraries and share them with your friends it also enables you to use the same code on both sides of the wire if you have some common logic like validation logic or data models that you want to use both on the client and on the server you can do that with Blaser it's full stack web development with net at the same time if you have existing JavaScript code or you want right so we're sharing dotnet code so even like working and like f-sharp or Visual Basic if I have libraries that I want to call from blazer yeah you can do that it's just normal donít assemblies that you're calling is your into in your blazer application absolutely and also if you have JavaScript you can still use that as well you can call into existing JavaScript libraries from your blazer code and even call back from the JavaScript code back into net through JavaScript Interop you can use that to also leverage all of the native functionality of the browser okay so if I'm not-like or if I'm slowly migrating my app to blazer alright trying it out in some section I can still use javascript elicit don't have to throw your JavaScript away you can just you reuse it in your existing blazer application how does that work is that possible I know it seems like magic well there's two ways that blazer apps function the first mode we call blazer server the way blazer server works is that we set up a real time connection with the browser we use signal R to do that it's basically a WebSocket connection Brady has a talk on all on signal once we've got that real time connection with the browser we run your blazer UI components on the server any UI events that happen in the browser we send them over to the server dispatch them to your components the components run they render and then blaze are very cleverly figures out just the parts of your UI that have changed and see arises that diff back down to the browser to then be rendered and updated so it's a kind of a thin client model you're you're still running your UI components on the server but you get that rich interactive field that you would expect from like a JavaScript based single page application ok and in server all of my c-sharp is compiling on the server still not at all inside the browser all the compiled compilation happens at Build time but your build code is gonna be running on the server on dotnet core it's not actually going to execute in the browser right but you still get the rich interactivity of being able to handle all the UI events and update the Dom seamlessly without having to do a full browser refresh but I have heard about things you started to do that you know I are not compiling but executing executing that's right in the browser with blazer webassembly your web assembly what we do is we we can download with your app a full dotnet runtime that's implemented in web assembly now web assembly is an open web standard it's basically a bytecode for the web if you can compile your code to web assembly that code can now run in any browser on any platform at near native speeds native as in like browser natives well pretty close to the wire like it's almost like an assembly language that's been standardized for the web so it's pretty fast super fast and it's so we built a dotnet runtime in web assembly that you can bring with your app it's small and compact and then you just download normal dotnet assemblies into the browser and execute them using that runtime the same come you I components the blazer components in this case they're running in the browser itself they do they handle UI events they calculate the diff in process in the browser client side so I see our little slide here says preview that's right so please our web assembly is in previews lays our web assemblies in preview laser server however is ready to go for production I want to use which one here server versus web assembly so Blaser server shipped with dotnet core 300k also shipped with three one LTS LTS is a long-term support release so Blaser server is ready for production use today you can put it in your websites put it out in production it's fully supported with a long-term support life cycle blazer web assemblies still in preview isn't quite done yet but we're working real hard on it we expect to have that finished up in just a few months later this this year how do you pick between the two well there's there's some some trade-offs with blazer server the benefits there is well your your well first of all its production yeah if you can actually use it right now but if your code is also running on a full dotnet core runtime so it's super fast on the server and it treats the client as a basically a thin client it has less demands on what the the browser or the client device needs to do so for example if you want to support older browsers like IE 11 you can do that with the blazer server application because there's no requirement to support web assembly blazer web assembly on the other hand gives you that option of pushing and offloading load from your server onto the client because it's a true client-side application it can support things like offline scenarios that's still in preview so it's not ready for use today but it will open up some really cool scenarios in the future oh my gosh I'm so pumped now regardless of which model you pick though like don't don't get too hung up I'm picking one versus the other because the component model is the same you write your components once and then you can use them in either hosting models so you could start out for example with the blazer server app and if you want to switch the Blazer web assembly in the future that's pretty trivial maybe when it goes to production we can switch our components over if that's what you wanted a oh my gosh I'm so pumped shall we get let's get started ok you say laser I know you can get started by going to blazer dotnet so we have a really simple URL to remember just Blazer dotnet and it'll take you to our main blazer and I guess landing page and we can go to this get started documentation and this will walk you through everything that you need to do to get started with blazer all the stuff you need to install and if you're on a Mac like I see that you are there's a tab there that gives us to do for Mac that has all the steps for getting Visual Studio for Mac set up with blazer so it's already installed dotnet core 3.1 and actually since you're here I won't read this I'll just I'll just launch Visual Studio and you can walk me through since you've already done it you've already installed Visual Studio from that you have dotnet core 3-1 on your machine which comes with Visual Studio for Mac so you're all ready to actually to go with blazer development right now alright so since I got 3.1 installed I already have a blazer server template and if I didn't see that there I could actually just find that in just the regular app templates blazer server under dotnet core that's right oh ok didn't see it's already targeting 3.1 they have a little authentication tab so on the latest preview of Visual Studio for Mac we they now have support for the authentication options for blazer server so you can create blazer server apps that support auth using asp.net core identity cool all right I'll go ahead and initialize one I called it blazer at seven that's a one seven just my favorite number it's nothing to do with the precise number of times we practice nothing at all just lucky it is so this will create you a new blazer server application it's all ready to go a blazer surfer app is just an asp.net core application with a couple of additional things wired up to support blazer server why don't we go ahead and just run it so we can see what the application looks like yeah that sounds good so the visual studio can now build your application get it running you can debug you have full support for blazer development within Visual Studio for Mac once this gets building and actually running we should see a sort of you know standard single page app style style UI and give it a second it's coming slowly will blame blame that on the browser yes you can tap around you have different tabs for different different pages this is all being handled through client-side routing on the home page you have some simple static markup nothing too fancy going on there on the counter page though you have a a button that you can click and as you click the count goes up there's no page refresh happening here the Dom is just getting fluidly updated normally that would require some JavaScript to do but that's all happening using c-sharp and on that neat not to see how that's working yeah and then this is fetch data page is basically a dynamically generated table of weather forecast data so let's take a look at that counter page so that's implemented in this counter dot raiser file and you can see it's pretty simple it's mostly just H standard HTML markup at the top it says that this is a routable component so app page says that we browse to slash counter we should end up here so if you go to the browser you should see in the URL at the counter tab yep slash counter that's where we're at and then you have some normal HTML markup we've got a button that we can click and there's that onclick attribute normally that standard HTML onclick attribute would have some JavaScript in it but here we're using razor syntax a little at sign to say no no I would like to use some c-sharp we've got c-sharp code here go down to that and it's pointing to your c-sharp method increment count that's incrementing the current count field which then gets rear-ended on the page now to show that that really is running c-sharp code whenever every time we click that button set that breakpoint let's see we can hit a breakpoint counter page yeah there you go we're in our C sharp method neat writing client-side web UI using using blazer let's see what else is going on here well the nice thing about these components like all these don't razor files they they get turned into normal dotnet classes as part of the build and now you can reuse them like you if you wanted to have another counter component someplace in your app you can do that by just adding that component wherever you'd like it to be so for example if we wanted to add a counter component to the home page like let's say we wanted two counters one on the counter tab bone on the home page if you go back to the let's go to the index dot razor file that's the home page for the application okay so here it just has markup there's nothing really interesting going on but let's start typing bracket counter angle bracket counter on here so yeah and you can see you get awesome intellisense in Visual Studio for mac and now it's showing up purple that's that's signaling to you that this is a component yeah you know what a blazer component if we rerun the application is purple or brown I think I might be a little bit color dot net purple everyone you learn new things about how you perceive the world yeah okay so I added the counter component and I'm going to go ahead and f5 again and so now when I go to the index yeah it has a completely new component a part of it so I didn't need to like copy in the counter code or anything it's just inheriting that component a reusable chunk of UI you can click on it it works just like the other one did and if you go to the other counter page you see it has a an independent count that's separate from from counter on the home page you can also pass data into components like components can have parameters to define a parameter on the on a component let's let's go to counter and make it configurable you parameterised how much it counts with each click so to do that you just add a property and the property can be made a component parameter by attributed it with the parameter attribute gotcha I have a little tip I want to show in here Visual Studio for Mac does indeed have snippets so if i just type prop and tap Todd OH it automatically loads in my property okay save some typing what st. yeah and let's call it increment amount I think would be good and let's default the value of that property to just one yeah give it give it the parameter attribute to that's that's cool that's what's really gonna make this a parameter for the component that we can pass in so by default it'll be one and now in the increment count method instead of incrementing by one each time doing a standard increment will increment by increment amounts of current count plus command amount perfect you get lovely intellisense for your c-sharp code inside your razor for local variables now go back to the index page and let's use that parameter let's pass in an argument so if we go to index now just add some space after they are and you can see incremental mount shows up wait way you set parameters and blazars just using standard attributes in tax and now the counter on the home page or in commit by 10 whereas the one on the counter tab should just default to the standard increment domenica the one i just kind of chose 10 I hope that's a good number that is a great number 10 times better that was before and we should see okay let's check this yes and now it's incrementing by increments of 10 whereas the counter on the the counter tab should still be doing by 1 because we didn't pass of past any parameter value the houses working like we said this was all based on that magic real time pipe we can actually see that happening if you yeah inspect the in the browser dev tools let's look at the network and if do a do a full reload so we can see all the stuff that's being downloaded holding a shift key or something there we go so you can see that this app's pretty thin it's not downloading very much stuff it's just a little over 400 kilobytes of download and all the magic is really happening in that first request that underscore Blaser WebSocket request yeah you see when you look at the messages you can see there's all these binary messages flying on that WebSocket connection yeah it's updating as you speak if you clear it lets clear them all out and then go click on the button on the sorry there's lots of try the yeah a lot of work yeah then click clear I'll click me thank me but nothing you clever every time you click we send the UI event to the server your counter component gets the message it rear Enders itself and then the Dom updates get sent back to the client that's what's happening here this is how that's how this app is working this is ablaze every base that cool so that's that's counter now I know if you go back to the code real quick on the counter dot razor file some people really like you notice that there was that act code block at the bottom yeah right there so at code that's basically a chunk of code that's going to get added to the generated class for this counter dot razor file it's like a bunch of class members and some people really like that that code lives in the same file because all your UI codes in one place other people would prefer to have that in like a normal C sharp file like in a code behind file which is totally cool you can do that in blazer as well what you can do is add a let's add a c-sharp file to the pages directory let's call it counter crazier dot CS that's sort of this the standard naming convention for a code behind file look good yeah it's good what it automatically put it underneath I put a whole bunch of they got Razer license information I was messing with my header demo later today for the productivity talk a delete that we won't you don't get to see this yet you have to wait till this afternoon I'll talk about how to put header and we don't automatically license like all your c-sharp files I'll get at it no no no that would be bananas right specifically chose that mighty license cool well we have a counter a class now now this matches the name of the class that would be generated from counter dot razor so let's make it a partial class ok grab you grab that code go ahead and grab that that's fine go ahead and copy that out of there and we're gonna move it into here we don't need the constructor so we can just copy over the constructor but make the class a partial class so it'll be combined with the generated class for the component and then you probably need to resolve some namespaces right and I can do that with alt enter so that opens up the little light bulb that I get so I can automatically add using beautiful so I guess all the normal C sharp productivity enhancements and features now are available to you in this I'm getting another little suggestion so this actually might have annoyed some people and I did this originally use a compound assignment it was all part of my plan yeah so vo Cermak gave me the suggestion that I can simplify that it does look better yeah well so this should be the same as what you had before like there's no difference in their code it's just that we've refactored they run it to prove it yeah go ahead and run it to make sure it's still working that's pretty nice like the C sharp so I've got a lot of nice features my gosh all of the little things that's what I work on that's nice t-shirt little things productivity that looks like it was before so she should still have like you know income increment looks good what other c-sharp stuff can you can you do and in yester Mac does it support all the the visual studio it does so right now we actually share the same editor so basically everything that we've added actually latest and like Visual Studio and Windows 16.5 preview 2 I believe is what we're on all of those are actually already piped into Visual Studio for Mac I can demo those later today with Mikaela there's a whole talk on that yeah there's like a shared editor so it's all piped in okay yeah so like like adding an overload like is that is that oh yeah so if I do alt enter um our keyboard shortcut to open the little tooltips I can't override sorry terminologies do something like as you can see all of the component life cycle events in this UI like the on initialize on parameter set these are all standard events in the life cycle of a component so yeah if you wanted to like run some code when this counter component is first and after it's initialized you would override on initialize or on initialize async if you have some async logic I think the fetch data component actually does that so this is this is the component that was generating that dynamic table of weather forecast data and if you look at the bottom all the way at the bottom there's a yeah there so you see uninitialized async there's exam distracted by how cool it was to have a c-sharp for each blue printing out your people we're cool okay continue so yeah there's uninitialized async that's that's when this component gets initialized you see it's using that weather forecasts service to get all the weather forecast data where's that forecast service coming from if you scroll all the way back up to the top there's this @inject directive what @inject is doing is it is a way to do dependency injection into your components you can get services that you've configured here we have a weather forecast service that we're injecting into this particular component and then below it's just normal razor syntax lucky where you were saying it's mostly standard HTML markup but intermingled with C sharp logic statement yeah if statements for each loops like we're just looping over each weather forecast instance to generate the rows in that table that's how that weather forecast table is being generated super cool so we started sort of to get more into realistic scenarios this was just the file new template is the basics they're like a level 2 app that we can use and show us short so I've been working on a recipe app in Glazer to like you know manage the list of recipes and do recipe ratings and those types of things why don't you pull that up yeah that's my repo you give you guys one if you want to download it and see my code like ok got it best for you recipes best for you recipe all right so let's see if I can open this up now usually I've been developing this on window is actually on Visual Studio but it opens great on Visual Studio for Mac builds runs debugs all those things just work as expected once this opens up why don't we just go ahead and run it first just to see what the app is capable of I'm gonna wait till I load my workspace documents perfect and maybe restore my new get packages that's probably always kind of always that restore your new get packages before you build and run its lifestyle choice okay so I'll try to it's saving might have gotten a weird thing well we're yeah we for that we can go ahead and look at the home page of these let's sit let's open on index dot dot razor so we can see a little bit what the when we see the app we'll have an idea of what the code looks like this is the home page for the application and you can see at the top it's mostly just there's a search box and then a little bit of an if else then just to see if the recipes have loaded and once they've loaded it's just generating an unordered list with the list item for each recipe that it loads from a recipe store and again we're using dependency injection to get a recipe store service and to initialize the the list of recipes so that's all that's doing that search box at the top is a custom component for handling the searches once you scroll back up to the top and we can look at that real quick yeah so you can see that on the search box we're passing in normal HTML attributes to like specify a placeholder but we're also able to specify a delegate for when a search has occurred so that we can hook into that and actually then run the query against our store so looks like the app is now up and running yeah so here's that home page that they actually read beautiful nice nice images design is not my forte you can put down recipes you can see details about the recipes some basic functionality you sort of search bar search for chocolate stuff yeah now notice that as you type the search is updating like you're not hitting enter as your house your typing is just looking at the current state of the search query and running a search but it's not doing it on every single keystroke it's like a little visible pause then it waits to see if you're done typing and then it does a search and that's nice because it's throttling all the searches to your database you're not just hammering the database with every single keystroke so it's interesting to see how that's implemented in Blaser if we look at the search box component that's where all that logic is encapsulated so search box that razor there's off now this is that component that just implements the search text box and it's handling all that debouncing logic where every time you search it'll wait a little bit until the even two you're done typing so mostly you can see that this is just an input like Scrolls we'll see the mark up at the top is an input and that's not about timers yeah and it's bringing in the timer's namespace the attributes attributes attribute there what that's doing is allowing you to grab any additional attributes that are passed on the component and sort of splatting them wherever you want them to be that's how that place total holder attribute is getting on to the input and then that app bind is binding the value of the put to the search query text search group property so as you type blazer we'll see that the text has changed and then set that text on to the search query property which I think you have below yeah right there it's actually even specified as a parameter so if you want to pass it in you can do that and we know that it's gonna do that on every single keystroke because after at bind back at the top at the end of the the input all the way the end see that at bind : event that's specifying which event we want to use for the bind like by default we will do it on change here we're saying no no no I want it on every single input every time you type please update the value of the search query uh property and then now let's look at search query cuz there's some of that's where the little bit of cleverness is happening search query when it's set like when the value gets bound it just starts a normal net timer and this is just you know like you saw up above system timers or whatever whoever the name space is it's a normal dotnet timer from the base class library where it will stop the timer if it's already been started and start a new one and if that timer completes then you know there was a pause without any keystrokes hit and that's when it'll actually call back into the the search query changed then call back that was passed in so I thought that debounce parameter there about 300 milliseconds that's that's the the amount of time we want to wait and you can see in an on initialize there's that component life cycle event again that's where we're moving up the timer setting up the defense time frame and wiring up the event handler for when the timer actually completes so all the event handler does is call into your delegate that you passed in and then you get your search results that's the balancing logic and you know 50 some odd lines of code all done in c-sharp no JavaScript required that's great and so should we go back to slides are we short on time I think we want to make one change oh we got five minutes okay let's make a change to this out okay so um if you go back to the yeah let's go back to the app and look at the reload oh right I stopped yeah so the we can click on the recipe that brings you to a recipe details page okay and most of that's just markup and there's even a form where you can do star ratings but there's also these tags and currently if you click on a tag they are links but they don't they don't go Oh like they don't think okay so what we want to do it is it is going to a new URL it's going to slash tag and then the name of the tag that we that you clicked on let's wire that up so that we actually end up on the search page but with the correct list yeah of recipes okay so go back to index dot razor what we want to do is grab that value out of the URI so in order to do that we're gonna add another route so add another app page directive and make a slash tag and then slash now if that's in curly braces cuz this is the value we want to grab out and we'll call the value that we're gonna grab out tag okay now to get that value we're gonna bind it to as a parameter on this component so add a new parameter remember we added a property before to create a parameter do in the code block let's create a new property so property anywhere thank you drink call it tag okay so and then put the parameter attribute on it so now what the Blazer will do is it will take the value from the route and set it on that property so now we can just pass it in to the get recipes yeah it's no it's not specified yet then we probably just will pass empty that will give us all the recipes when the attack is initialized one more thing is up above in the in the search box let's make sure we populate the search box with the tag if there's one there so set the search query parameter a little space in there [Music] sign and tag oh so we're actually getting into the c-sharp property there you go that's all you so now it should populate the tag so go ahead and run it okay let me start it and that should populate the search box with the tag as you click on tags that will filter the search to just that tag whenever you click on a tag like on the page and it should be just that easy okay so click on a recipe let's go down to the tags let's know fruit there's only one food that that works and it populated it you just added a feature to my heart right you're welcome now top back to slides real quick sure so that was getting started as blazer and some blazer in action um we know the number one question on a lot of people might people's minds if we have time for Q&A and stuff as um what is an expert blazer webassembly when wouldn't cute when we get it when will it be out of preview yeah so so this was all blazer server work that we were doing with Visual Studio for Mac Visual Studio for Mac fully supports blaze a server which is great blazer web assembly is still in preview it hasn't shipped yet it is the the focus of the blazer team right now and we are planning to release it in May of this year as a supported release and that will include full support in Visual Studio for Mac the initial release of blaze our web assembly will be based on dotnet course redone in fact we plan to add the template in an update to the dotnet core 3.1 SDK it will be a current release not on LTS release so it's not gonna inherit the LTS status of the rest of dotnet core 3.1 it is the first release of blaze or webassembly we want to give it a little bake time before we bless it as an LTS release to try and make that clear we're going to update the versions of the packages to be 3.2 we've actually already started doing that so the latest previews our version does 3.2 after may blazer web assembly will become part of down to 5 and will then be just part of the normal dotnet update release cycle so you just need to remember to keep clicking YES on that update prompt keep updating and look in May for the the released version of a blazar webassembly got it so in summary we talked a little bit about being productive in blazer on vs or mac blazer server is what we show today it is in production you can go and use it with dotnet core 3.1 and get excited for May 20 2002 a time question in turquoise that's exactly I'm glad I actually start with a statement somebody said I won't Don Ross Visual Studio you know what we have some exciting t-shirts for this event and we'll be giving them out as part of our party so make sure you stick around for until the end of the day so notice but more and we actually have some questions as well so the first one is habeas from a is there any way I can explore on blazer webassembly in Visual Studio Mac that we were just talking about that you can actually open a blazer webassembly app in vs for mac today you'll need to do is the a smith core hosted version of the template the standalone version of the blazer webassembly template isn't working just yet mb/s for mac but it will by the time we ship blazer webassembly in the May time frame you don't have the ability to create laser webassembly apps from vs for Mac just yet but that is coming as well so you can create apps from the command line as long as they're hosted in a nascent core app and run and develop your components and all that the rest of the functionality will be cut will be coming later as we get closer to the may release that's great well there you have it and next one is just close this one down is there performance benefit using blazer server over a blazer webassembly yeah so blazer server runs on a full dotnet core runtime your components are running on the server so you get all the performance benefits of dotnet core which is honestly one of the fastest stacks on the planet it really treats the the client machine also as a thin client so it has very little requirements on the client side of the of the application blazer webassembly runs on an isle interpreter based runtime today so if you have components that are doing really computationally intensive stuff it can drag a little bit when you're running that type of code in the browser so you might want to offload that to like a web api somehow on to your server so you're running on the folder core runtime perfect I think we have time for just one more question so yep question is is there a benefit using blazer over angular react or some other spa oh yeah I mean you see sharp yeah context you get all that syntactic goodness like productivity features in Visual Studio yeah it's a full stack solution for web app development with net and c-sharp I think also there's just a lot of really nice simplicity that comes from the the blazer programming model and tooling like it's really easy to get started file new project and you're up and running in less than five minutes so that can be really nice that said if you if you love angular and react in view and you want to continue to use those for your front-end development you can absolutely still do that and still use net core for your back in api's G RPC services signal our hubs and so forth great well thank you very much for your time it was fantastic to hear about all the Blazer cool myths out there and I'm looking forward to the 2020 build announcements that we're probably gonna have

Building apps for iOS with Visual Studio

are you an iOS Developer or potentially you're looking to build your first IOS app now this might surprise you but Microsoft actually has a bunch of tools and services that can make a developer life just a little bit easier regardless whether you want to build the app using JavaScript and web standards C or even C++ I'm Jonathan Carter and in this video I will show you how Visual Studio can make you a more productive iOS Developer visual studi easy setup gets your Dev box ready fast including a handshake with a local or remote OSX box for build it comes pre-installed with many project templates so that you can get started building your app fast it also has integrated debugging support for both devices as well as remote simulators Visual Studio team Services support continuous integration and deployments for iOS apps no matter how you've built them even if you're using xcode and you can use hockey app for your post- production needs like Distributing betas analyzing crash reports and getting feedback from your customers let me show you how all of this works Visual Studio gets you going fast by setting up your Dev box with everything you need for iOS development with with a simple handshake you can set up a local or remote Mac machine for building your iOS apps once set up you can see that Visual Studio provides you with a variety of templates to get started building your IOS app if you want to build your app using web standards you can choose one of the Apache Cordova app templates using either JavaScript or typescript you can iterate quickly using a workflow that is even familiar to web developers if you want to build your app using C the zamar and extension for visual studio provides you with a variety of project templates including traditional UI kit apps openg GL Sprite kit and even Apple watch extensions once you've created your project and are beginning to write some code you'll even notice that directly within Visual Studio you get a great intellisense experience even for the iOS apis you can even connect to the storyboard design surface to build the visual components of your app directly in visual studio if you're building using C++ visual studio also has project templates for iOS to help you get started building static or shared libraries building your app with JavaScript C or C++ allows you to achieve maximum code sharing which makes it easy to build with a common code base to Target not just iOS but also Android as well Visual Studio team Services comes pre-built with support for iOS applications which allows you to automatically build your xcode projects as part of your CI server you can also use hockey app now a part of Visual Studio team services to automatically deploy your app to testers as well as to gain insights into the health of your application using crash reporting so as we saw in the demo no matter how you're building your IOS app Visual Studio can make your team more productive and your life as a Dev a little easier to learn more check out the other videos that go deeper into some of the topics that I've discussed Additionally you can follow us on Twitter and watch the vs blog in order to stay current with new functionality that we enable for mobile development as well as best practices and tips thanks for watching

Building apps for Android with Visual Studio

are you an Android developer or are you looking to build your first Android app this might surprise you but Microsoft has a bunch of tools and services that make an Android developers life a little bit easier whether you want to build the app using javascript and web standards c-sharp or even c++ and java i'm amanda silver and I'll show you how Visual Studio can make you a more productive Android developer visual Studios easy setup gets your dev box ready fast its pre-installed with many project templates so you can get started building your app it has integrated support for debugging across devices and emulators we even have a visual studio emulator for Android which is fast and can be used with other IDs like Android studio or eclipse visual studio team services supports continuous integration and deployment for Android apps no matter how you've written them and you can use hockey app for your post-production needs like distributing betas analyzing crass reports and getting feedback from your customers let me show you how visual studio gets you going fast by setting up everything you need for Android development once setup you can see that visual studio provides you with a variety of templates to get going if you want to build your app using web standards you can use the Apache Cordova app templates to iterate quickly using workflow that's familiar to web developers if you want to build your app using c-sharp the xamarin extension for visual studio provides you with the variety of project templates and even support for Android wear you also get great intellisense for Android you also get the world's best Android designer if you're building using C++ you can build an app using OpenGL a native activity or just a shared library if you're building using C++ Visual Studio has one of the fastest debuggers out there new in the latest update we even allow you to step into code for Android written in Java building your app with JavaScript C sharp or C++ allows you to have maximal code sharing which makes it easier to build with a common code base when you're also targeting iOS no matter which programming language you use you'll find the Visual Studio emulator for Android super useful because it's x86 based it's really fast to get started it supports multi-touch which is amazing when you're developing on a touch enabled dev box like the surface book with Windows 10 the emulator is even available standalone and can be used from Android studio or eclipse today we're announcing that it's coming soon to the Mac visual studio team services allow you to build for Android using Gradle and you can use hockey app now a part of visual studio team services to deploy your app and gain insights into how it's performing in the wild things like feedback and crash analytics even into Java code no matter how you're building your Android app visual studio can make your team more productive and your life as a dev a little easier check out other videos that go deeper into some of the topics I discussed follow us on Twitter to stay current as we enable new functionality for mobile development and watch the vs blog for best practices testimonials and tips and tricks

Building and Deploying your Code with Azure Pipelines

hi my name is Abel and I'm a senior cloud developer advocate specializing in DevOps today I'm going to show you the ultimate DevOps tool for creating your own CI CD pipelines for any language targeting any platform I'm gonna be showing you a sure pipelines with Azure pipelines we've made it ridiculously simple to go from nothing at all to a new as your pipelines project see people have been telling us it's too complicated to get started with your DevOps tools and guess what we listen so let's go check this out let's say your code is sitting somewhere like on github and you don't have an azure DevOps account and now you want to create a CI CD pipeline well just go to this landing page click on start free with pipelines and it's going to create for you your own organization where now all you have to do is jump in here type in your project name click create and bam that is all you need to do now when it's done creating the project you'll have an empty Asscher pipeline project like this so let's go ahead and create our first pipeline so we'll jump into our pipelines and we'll go ahead and create a brand new one and the very first thing it asks you is where is your code is it up and github is it in and Azure repos we also support tfv c and bitbucket cloud but for those you have to use the visual designer now my code is sitting out in github so let me go ahead and authorize with github and once it's done authorizing with github I'll be able to see all of my private repos and public repos out in my github account so let me choose my repo and now it's going to go and analyze the code and the technology used inside my repo and based on what it sees it's going to offer me a couple templates it just so happens my application is an asp.net app but if my repo held let's say no js' app running in a docker container guess what it will create for me a bill pipeline that makes sense for the technologies that we picked all right so now it's going to create for me my pipeline using a yamo file now I'm gonna go ahead and add a couple more tasks and basically the tasks that I'm gonna add I'm just gonna go ahead and copy my zip file that's created and deploy and take my build artifacts and publish them back up to Azure pipelines now once that's done let's go ahead and save and run this build and voila that is literally all we have to do and now it's kicked off our build so now it's gonna go ahead and spin up a build agent and it's gonna go ahead and build our application for us now it's going to download my code from github is gonna restore my packages from you get is gonna compile everything using Visual Studio it will go ahead and run my unit test right is this right here is just what we used to have in V STS now if you remember we defined this build using a yamo file if you guys like yamo files that's freaking awesome I love yamo files because pipeline s code what we're doing here this really speaks to the DevOps in me right however if you still want to define our builds or describe our builds using the visual editor you absolutely still can and hooray for that looks like our build has finished let's go ahead and jump into the summary where now you can see a timeline of everything that's happened during this build including all the tests that were run now notice the one thing that's missing is going to be where's my deployments well there are no deployments because we haven't created a release yet so let's go ahead and create a release for this build I'll go ahead and click on the release link and it will take me to the visual editor for the release pipeline now because I'm deploying into Azure it makes things insanely simple let's choose the azure app service deployment template click apply and hurray for that that's all we need to do now when you go and create a pipeline for your releases the first thing you have to do is you have to define your stages so we'll call this our staging and next you have to define what are the tasks that are going to run for this particular stage now everything is filled out for us because we're using a template but I do need to connect my accounts with my subscription so what I'm doing right now is I'm connecting my Asscher pipelines account to my Azure subscription once this is done we can go ahead and jump in here and select the app service that we're going to be deploying to in my case I am deploying to Azure DevOps launch now there's one other change that I want to make because this is my staging environment so I'm going to go ahead and deploy this into my slate staging slot so first I have to choose my resource group then I have to come in here and choose my staging slot now what if you wanted to do more than just deploy an app to Azure app service well to customize these release pipelines what you would do is add and remove tasks now out of the box as your pipeline gives you about a hundred tasks that you can just download and start using now if what you want to do doesn't exist out of the box it's not a big deal because go to the marketplace in the marketplace our partners have created over 700 build and release tasks that you can just download and start using now if what you want to do doesn't exist in the marketplace and doesn't exist out-of-the-box guess what you can create your own custom tests as well custom tasks those are nothing more than PowerShell or no js' so what that means is anything you can do from the command line you can easily get Azure pipelines to do as well all right so we've created a really small pipeline right we're just deploying into one staging environment let's go ahead and look at this a little bit deeper because after you've created your stage and you've created the tasks that should run in your stage you have the ability to add approvers before and after each stage so let's go ahead and add a post deployment approver and I'm just going to add myself select that and you know what let's go ahead and clone this because I want to add a new stage I want to add a new stage where I can deploy to my production so we'll call this production and from here jump into the production tasks and I do need to make a couple of changes one of them that I'd need to make is instead of deploying to a slot this is production so I'm just going to deploy it to my app service itself so I'll go ahead and save this now and now let's go and release this I'll click on release click create and just like that I've created a release and now the release will start flowing through our staging environment and after I approve it it can flow all the way out into production easy peasy so there you go Azure pipelines for your code we've made it so simple to go from nothing to a full CI CD pipeline for any language targeting any platform and yes this is your code sitting in your repository of choice deploying to wherever you need it to be deployed it can be in Azure of course but it can also just as easily be behind your firewall in front of your firewall anywhere remember any language targeting any platform and not only that if you have an open source project guess what if you get all of this for free you get 10 parallel pipelines out-of-the-box and if you need more just ping us and we'll give you more so go and check out as your pipelines today by going to dev calm

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]