 Hi, welcome to Visual Studio toolbox. I'm your host Robert Green and joining me today are Maria Nakaga. Yes. Thank you Maria me first time in the show. Welcome. Thank you and Brady Gaster making his return appearance on the show Thanks for having me back and we're gonna talk about the smart hotel 360 app This was the app that we used at connect back in November which is our annual event to introduce all kinds of goodness and this app was shown at Connect and the source code is all available in github. Yes, it is and we're doing a number of Episodes where we talk about various pieces of the application. So last time Erica early and I did kind of a broad overview and Starting today, we're gonna do some deep dives and today. We're gonna talk about the web app side of this And so just to review This is it. We've got a web app here public web app running up in Azure written with ASP core Which calls in as your function to do some really cool stuff that we're gonna look at and then Talks to a bunch of services. So booking a room and searching for rooms and all that stuff is running in Microservices in a Kubernetes cluster. We're gonna do a separate episode on that part of it So I just want to make sure that we understand that that type of stuff. We're not gonna cover today We're gonna talk about the website Which makes those calls? And we're gonna talk about Azure functions and we're gonna look at some code and see what it does Yeah, yeah, it sounds great. All right And and really what what this demo kind of shows is kind of the lay of the land It really kind of goes through a lot of the different components that we talked about at connect We're obviously talk about serverless functions. We're saving data and retrieving it from Cosmos DB database And we're also using some really awesome APIs and cognitive services like the computer vision API We've actually got a tab open if you're interested in reading the documentation for Cognitive services vision API. Here's the product information And of course we have awesome documentation on docs MS com for everything all the different Azure APIs and SDKs You could ever think of or didn't even know existed and this is Just to reiterate that this is all shipping code. This isn't futures This isn't stuff that's coming down the pike everything. We're gonna show everything. We're gonna do is available Available today. We're using visual studio 2017 Latest refresh you can download it and party on it all you want to But with that I'd like to yeah, you kind of introduce what we're doing here and talk about this ASP net and react app that we built Oh, yeah So this is the app that we developed and I'm gonna open it up And this is a booking app and it's something that people can relate to pretty much if you travel a lot for work And this is a real-world example real-world. They're probably solutions that are just like this So what I'm going to walk you through is the ASP.net core 2.0 application So this is all built in ASP.net core 2.0, which is our cross-platform open source framework Mm-hmm And one of my favorite things about ASP.net core is one of course It's open source I can use it and I can contribute to it, which is great It's cross-platform where you know it works on my machine will also work on your machine, which is brilliant And then finally I also really love the performance of it. It's really really fast as well So that that seems to me that you know if I'm a ASP obviously working at Microsoft I think the fact that it's open source is critically important I know why and I think the fact that it's cross-platform is critically important And I know why but as a developer who has done a lot of ASP The full.net framework, maybe web forms, MVC, now I'm asking okay, so For my day-to-day job, which is building a website, maybe I care, maybe I don't care that it's open source I'm not going to contribute to it, good Lord And it's cross-platform, but I only run Windows and yeah, I'll put it up in Azure Which last time I checked was running Windows, so those two things don't necessarily Steer me in one direction or another, but the fact that it's more performant now You're starting to get me interested right right and if you wanted to have a full you know a containerized environment You could put an ASP.net core app inside of a Linux container because it'll run on that right So if you go down that route of containers and you're gonna run Windows containers, okay The fact that it runs on Linux doesn't interest you, but if you're choose to or Guided to choose Linux containers, then the fact that it's that you wrote it in core means It'll just go there. You don't have to do anything different So and even better if you don't want to rewrite your existing ASP.net application in core if it's just working great and you don't need to you know change it around you can actually Bring that application up into app service or into a you know service fabric or some sort of container environment in Azure and run It there as well and then extend to using things like serverless functions and anything else you want So you don't have to you know abandon your existing, you know investments in ASP.net You can just bring in a party and I think it's also important and and I think this gives us a great opportunity To actually switch to the code for a moment before we run the application Because the biggest fear when I talk to a number of.net developers who have been doing this for 20 years is that Why am I learning this do I have to learn something new and it's made me really Sympathetic because I actually came into ASP.net core. That was my introduction to.net But if you look at the control if you actually look at that this does look like an app you have today, right? You have your controllers, right? You have your models and your views like it isn't different We aren't calling it any different It's not like now all of a sudden we have this thing called HTML pages and then you have to put everything in there MVC is still MVC. Razor is still MVC. The pattern will not change and that's a good question That is a thing like I've invested all this time in getting to know razor. Does razor still exist? Yes, it does right so if you actually go over to the page you have maybe we don't have razor in this particular Yeah, we do it does exist. It does exist So like just not to panic so I always tell people do not panic you are not learning a new skill Right, you're just enhancing the places that you can take your application right and then this app is Uses react for the client side right right. We've done angular before this one's written in react Yeah, you could use jQuery doesn't matter and really what we're doing if you look at that architecture what you've got is You know this public web app is actually making calls into a back-end Containerized infrastructure and a lot of those calls are actually being made through the react.js, you know libraries You know if you wanted to use angular you could do that as well If you want to use view you can do whatever you want If you want to create a fork of this and change it from react to view or to angular feel free We'd love to have you know a couple different versions of it. Yeah, it's flexible core is flexible now exactly completely flexible You can do whatever you want flexible and fast Okay, so Let's what else would people want to look at the controllers Yeah, let's have a look at the controllers because let's talk about the scenario here You do a great job of walking through this scenario because so the scenario and this will be a greater vision once you actually look at The application but the scenario is that you'll want to go and look stay at a hotel Yes, and let's say you love your pet and you don't leave your pet at home Does this hotel? Let me bring my pet with me So the whole point is that you would actually go Select your pet and see if your pet is allowed to stay or not Okay, and the way we're able to figure out if your pet is allowed is first of all, we're using cognitive services Okay, right and cognitive services using the vision API is able to say with extreme detail. It's actually quite spooky and scary What you're if it is an acceptable pet so you can actually set the premise and the website knows this because It what what happens is It's like you can actually see here what we're doing is we'll upload an image Yep, and save that and save that into you know our from the website I'm gonna upload an image of my pet exactly and the vision service is going to be able to determine Like what kind of a pet it is. Yeah, yeah, it is right So it so it takes a look so this document that's currently on screen right here You can see here that we've got a we've got a property called message Yeah, so let's back up. What are we looking at right now? This is actually the Cosmos DB data that we've saved in previous uploads that we've done so So to back up so in the browser, right? I'm gonna upload a picture of my pet exactly which is going to go into Azure, right? That is going to call an Azure function. Exactly. Yeah, the functions are basically event handlers, right? And that function is going to call the cognitive services cognitive service Yes, which we'll look at that picture and say cat dog something else exactly return a message to me Telling me whether it's okay to bring this hat Exactly, and in this particular case you can see that this guy hasn't been processed yet And one of the reasons we do that is we didn't want to add all that code to our existing ASP done application The pets thing was like a feature we wanted to add later on so You could have right you could have but you don't have to right you could you could use something like functions or a Back-end service to do that processing for you so you don't have to make some and that way if I upload a picture of the Pet from my mobile app, right? I don't have to write the code once you got not having two different places That's exactly right, but what we've got here in the data Explorer in the Cosmos TV data Explorer This is a guy that hasn't been processed yet So this is a pet that I've uploaded that we haven't actually sent ever to computer vision This is one that we have so if I click on the second island right here You'll see we've got this message the message a brown and white dog lying on the ground So this is the case where we've actually uploaded an image. Let's give this a shot and see if this Let's go and see what happens. Okay, so let's go over the website and go walk through the experience So I am going back home to New York. So let's see. I don't know why I'd need a hotel Maybe they're renovating your house. Yes, they're renovating my awesome apartment And I'm going to select the dates and I click apply and suddenly are you bringing a pet and I'm like, of course I am so let's see what happens when I bring my cat and I notice that hotels don't really like cats So they're biased, but let's see what happens. So I'm going to upload a picture of my cat and Now it's processing it using cognitive services vision API and then go ahead and hit f5 And if I hit f5, okay, so the code we're looking at right now is the Azure function code, right? Which we are debugging from inside Visual Studio. Exactly. Well, really cool I mean if you and if you look over here and you look at the tags that it's fetched Okay is allowed contains dog All right, so I if you look at the the level of description of what it brings back It's a cat sitting. It's an animal a mammal gray top looking and I was like, this is a bit This is a bit spooky about how much it gives you an actual sentence describing But as you can see we're looking for one specific tag, right? Which is dog dog, which you means we're probably not gonna have a you know a favorable result here So if I just you click it Can't click from over here. I know when we have too many hands on the on the tools go ahead and hit f5 All right, we'll let everything process and if we were to flip back to the Yep Just do let it keep running get back to the code. Yeah, just take that break point off and then hit f5 There we go Mouse issues setting break points too many break points are being debugging this too much Yeah, we've been debugging quite a such thing as too many break points. That's true That's true. So that should have finished running and once that's finished running. You'll see that we have an error here Yeah, so look at the words that came back and had so many had mammal had gray a cat that is looking at the camera Very specific to try this again and upload Let's click from here. I will do the clicking. Do not worry. Let me click So I'm going to upload a picture of a chihuahua Right and now it's doing the processing again, right? Let's see if we can see what's happening in the back and the other cool thing about this now is the website has a picture of your dog So when you come to the hotel think I said, well, that's not the dog you registered Yes, you registered a chihuahua. You brought a great day, right exactly It's gonna cost more Exactly so you have you can see the description over here I'm just saying it is allowed and if we click over the captions and we look at the results. Oh Sorry, no, it's af over tags the tags There we go Whoa, okay, dog. It's running in the grass It's brown and that cool and that's that's again the cognitive services sitting up in Azure anyone can play with them Anyone can play with them. And we actually leave this we leave descriptions in the github repo on how you can get up and running Okay, and we'll see if it's allowed And there you go, there we go, but it wasn't carrying a frisbee, but right, but you know close enough It's a dog in the distance and exactly exactly so if we wanted to we could go in and we could change the tag We're looking for and make it small Republish our function and then you know any small animal will show up And then if you bring a big animal as you said you'll say this isn't what you all right, okay? Interesting One last thing I think we should show is where is this trigger actually happening in the code? Yeah, that's a big one That's a big one So in the code and I hope it again. This is the function. Yes So if you are downloading it and you're using our repo it will be the pet checker function. Okay. Yeah There we go, there we go. So this is where we're calling the trigger Right. So the trigger that we're looking for is the cosmos DB trigger. So as you upload the picture It's triggering a function which calls a cosmos DB trigger. It's cosmos DB because it's a picture It's not relational data. Otherwise, you could use we have we have a bunch of yeah We have a lot of different document types like we have a document type for doing sentiment analysis We're actually using cognitive services to analyze tweets We have this information which is a series of tags that comes back from cognitive services that we can then you know Just store in our database of a weed We won't come with a document approach if you wanted to go with a sequel approach Yeah, but for this scenario just made sense to do more like a and this is this is a Awesome new feature that we have functions You could you used to could trigger easily from a cue or from a blob or from a table that got updated The Cosmos DB triggers one of the newest triggers in the functions arsenal. So cool. Yeah, that's pretty cool That's kind of the end-to-end kind of the flow of the public web app and one of my favorite features Yeah, I'm tried at home with a teacup pig until us you see so pretty straightforward Very which is good news ASP core talked about why we looked a little bit of the code written in react We we're not going to do a deep dive on react on this show We may come back and and do one we can find someone well versed enough who wants to get on camera We could ping John Popper or Burke Holland. Yeah, they could do that Because it would be kind of fun to actually look at the react code And walk through how it all works actually one of the creators for view actually works at Microsoft now Oh, there we go on the edge team. Yeah, so okay Plenty of people. Yeah, cool. But as we said, you could do the the client-side and angular or anything else you want anything Yeah, angular View you have to keep bringing and then we didn't look at a lot of the code that does things like searching and booking and stuff Like that because it's all running in containers and we're gonna do a separate episode on that Which another thing that we also remember when people are watching this episode It does relate to different developer teams within their company and how they can work separately right on one application Yeah, I'm looking forward to seeing the whole series. Yeah, that's actually an interesting point. Go back to the architecture diagram That's a very interesting point Because you might you could have the web team You're obviously gonna you'd have the mobile client team You have the web team you might have the Azure team and then for each of these individual pieces bookings suggestions notifications Maybe they're all using C sharpen dot net, but maybe not yeah, right? So you might have some folks the Java guys that doing notifications sentiment or writing that in this case they they are I could say maybe they are I could use the real ones tasks and reviews are in Java Right suggestions and sentiment are in note. Yeah, everything else is in the core. Exactly, right, which I think is beautiful Again, it's kind of sort of the microservices approach is that each piece could be written by a different team And then you as the web guy making calls to that just need to know You know what end point do I get a stressful API what endpoint do I hit? I don't care what is written in right? I just want what do I send right? What's gonna come back? Does it work? Who do I go yell at when it doesn't and that's what I care about exactly And the other part that a lot of our customers care about I definitely care about is like How do you get all that up into Azure? Yes, you could use our DevOps tools all of our great VSTs tools You can publish containers package everything up ship it up to the cloud just by doing a commit And if you were to also tie in we had a kind of a side demo of this that we talked about doing Where you can actually attach an app insights Instance to your app service running in Azure and then you can attach that to a VSTs back end So I could actually go into the portal. This is kind of what we're talking about doing took too long So we didn't do it but what we were kind of thinking about doing was you know I want to go and create a work item for myself because I want to allow all small animals that work item You could do it directly in the portal and it would flow all the way through and then when you do a commit You could reference it the build happens and you got that full end-to-end more than work life cycle. So it's great. Nice. Mm-hmm All right, cool. All right. Thanks for doing this. Well, thanks a lot for the time All right, hope you guys found that helpful go check out the code play around with it Let us know How much more of a deep dive you might want us to do on this and we will see you next time on Visual Studio toolbox