Containers for Existing .NET Apps Part 1

[Music]
hi welcome to visual studio tool box I'm
your host Robert Greene and today we're
gonna talk about containers and joining
me to do that is a dd-do guard hey
everyone how are you good thanks for
coming on thank you we've done
containers a few times in the show we've
had episodes on docker we just did as
part of the smart hotel 360 series dive
on the back-end services which are all
containerized micro services but what I
wanted to do is kind of start from
scratch right go back to the beginning
if you will and talk about what
containers are and what some of the
tooling is in visual studio to help
because there is quite a bit of tooling
that helps and then approach it from a
different angle not so much the fancy
modern micro services you know where
some are in.net core and others are in
Java and they're orchestrated in
kubernetes and all that which is you
know good stuff to know but what if I'm
just somebody who's building and
maintaining his built and is maintaining
all right classic dotnet applications
days is p.net web forms or MVC or a wind
forms or WPF app that talks to WCF to
talks to a sequel server right what a
containers have to do with me because it
turns out the answer is a lot yep for
sure um yeah that's a great point so
let's take a look here at what the term
modernization actually means and where
containers really fits into that so
really we're talking about here existing
absent services we're talking about so
applications built with net framework
usually on Prem and we want to make sure
that we can move those to the cloud
right without necessarily having to
rewrite it as a dotnet core app exactly
can do if you do decide a requirement no
and there's much easier ways to move it
to the cloud if you don't want to spend
the time rewriting it in dotnet core so
the first option you could do would be
to migrate it so this really means
making it cloud infrastructure ready
which is really just Rijo stting in VMs
so here you have don't code changes
really easy but you use VM
which is kind of the more traditional
route right when we're talking about
modernizing you can do this in a couple
different ways one is making a cloud
DevOps ready and this is where
containers come in so containers really
make it more portable lightweight easy
to deploy and more DevOps ready and here
again minimal very minimal code changes
so you don't really have to reaaargh
attacked your app at all it's really
just adding some extra few lines for
container support okay which is pretty
easy to do and I'll go through that in a
little bit and or you could cloud
optimize your app and that's kind of
what you were talking about before with
rewriting your app we are connecting
your app into dotnet core may be
utilizing micro services but obviously
that will require a lot more work so
containers can be more of an easy step
in between though it's a first step it
may be the only step you need to take
yeah exactly you don't have to go fully
to micro services if you don't want to
okay and let's take a second for and
talk a little bit about VMs versus
containers just so people can get a
sense of what the differences are
between the two so in a container what's
different is that you're sharing an
operating system kernel and you're
really deploying the containers with the
binaries libraries and the application
and that's what makes it so lightweight
and so portable versus a VM you actually
have the operating system that for each
one right it's called a virtual machine
for a reason an entire machine
virtualized so it's everything from the
base operating system on up so they're
huge they require huge amounts of disk
space
there's certainly scenarios where that's
good
they're not exactly portable not exactly
lightweight the container is you take
the application and all of its
dependencies and that's what's in the
container and then it runs on the
operating system which already exists
exactly Windows server or of course no
server in the cloud
yeah yes yes so you could have Linux and
Windows so today we're focusing on
Windows that's just because we're
talking about dotnet framework
locations so you'll have to use windows
containers but yeah you can also have
yet to use meniscus yes to use Windows
containers exactly but if you wrote a
dotnet core application and wanted to
containerize that you could pick if you
want to choose Windows containers Linux
containers whatever you actually want to
use yep Linux containers a little bit
more lightweight that can be faster at
the moment a little bit where they work
a little bit better with kubernetes
although great windows support is coming
on the other hand I don't know nothing
about Linux I know a lot about windows
so you know there's a benefit to
choosing the container that's the
operating system you know about very
true right so let's go into talking a
little bit about docker just too many
people are familiar with docker so
docker is basically a container platform
provider and it helps you automate your
containerization so you can easily
deploy your app season containers and so
Microsoft actually has a set of images
hosted on docker that makes this really
easy for you
so if you go to docker hub here you can
see that Microsoft has published all
sorts of images so you have your Windows
server core image your dotnet images you
have your asp.net images so here's where
you can find kind of all of the images
that these are starting points exactly
take that image and then you add things
to it like your application or
additional functionality that you want
to added you can start out with a
stripped-down container and then add
more things to it you could just choose
the the asp net or the ASP core image
which already has asp.net core running
and then you can just do nothing more
than put your app into it and then of
course you can make any other changes
you need to it to add functionality or
restrict functionality right you don't
have to start from scratch no you don't
have to start from scratch which is
great and all of these have
documentation associated with them which
is even better because it makes it even
easier to get up and running on a very
regular basis correct definitely um so
let's talk first before we go into the
demos about why you want to containerize
your app because it's the cool thing
doing it exactly that's the only reason
you should do it so modernization in
general can be useful for improving
agility growing your applications
lowering your IT costs say you have an
on-prem database that you want to move
to the cloud really modernization in
general is about lowering your total
cost of ownership containers in
particular are useful because as I
mentioned before you don't have to re
are katuk to your code so that makes
things a little bit easier for you
there's less of a learning curve
less code required lower deployment
costs improved productivity improved
DevOps ability and portability which is
what we talked about with containers
versus VMs I also give you some
act as kind of a I know it's rightward
almost l-like a firewall between you and
the rest of the machine right so you
could have a web app running on a
machine that you wrote on dotnet 3:5 and
you're leaving it there because it works
fine but then people keep making changes
to that machine and new versions come on
or new libraries come in and now your
app is subject to whatever's going on on
that machine so right you know how many
times is your app broken because
somebody fiddled with the server you
stick it in a container it's fixed that
container runs on that machine then
people can do whatever they want to that
machine as long as they don't you know
take away the ability to run a container
and your app will never be affected by
that and if you need to make changes to
your app in the container then you go
ahead and do that
whether it's update to new version of
the framework or apply different patches
or whatever but you get this isolation
that's the what I was looking for you
get an isolation and the ability to move
it around right oh this machine's going
down for three weeks we're gonna replace
it with a new machine can you get your
app up and running on this new machine
yeah right if you have to then go and
install on that machine you know that
can be a bit of a nightmare oh you say
yeah here's the container run it done
easy yeah yeah I mean another point
there is really dev test environments as
well so you hear a lot of people who are
like I worked in testing on my machine
weird on my machine but somehow this
just yeah doesn't work in production
right so that's also solved we use this
app twice a year right because we have
our annual poll or we have our annual
raffle twice a year so you just want to
you know necessarily want that up having
to run all year you spin it up when you
need it and you take it down containers
make it really easy to do that as well
so there's a lot of things agreed um so
let's get into some demos so I can
actually show how this works in visual
studio so let's take a look at this
first scenario here so a common scenario
might be to have a web application and
this could be an MVC F this could be a
web forms up and you could containerize
this you could have it talk to a
sequel server also in a container for
the purposes of the first demo we're
just going to stick with container izing
just the MVC portion of the app okay you
have to put in some additional
dependencies in to talk to the sequel
server which I'll show you in the second
demo which is a little bit more complex
but let's start with the basics alright
so if we go to our legacy MVC app and
move the word legacy legacy means
existing apps that are running the
business today
exactly existing business applications
yeah so I've started this up already and
this is basically an eShop which has a
bunch of different catalog items and you
can manage the catalog from this web app
here so you could create new items you
could edit delete do whatever you need
to see meta log framework three five
four four probably four something
probably four seven it's cooked how was
that recent okay yeah we just made these
recently I think oh yeah we update them
pretty regularly but it could be older
if it needed okay
doesn't matter what right what framework
version per se so as you can see this is
running locally just on my machine here
so if we go back to the application in
Visual Studio and I want to add docker
support all I need to do is right click
here and say add now before you click
that mm-hmm not that this is hasn't
happened to me like every day first of
all you need docker installed on your
local train yep and you need it running
yes that's a great point yeah
so I had a dollar for every time I
either built this project or tried to
add doctors support before I had
actually started docker yeah I could
retire yeah that's a really good point I
automatically have it up and running at
the time so I forget that that's a
critical step in the process you can see
by this little icon down here it's up
and running another point there is that
you see here it says switch to Linux
containers so right now I'm running
Windows containers and you have to make
sure you're running Windows or Linux
containers whichever one you want to
choose okay so if we go into here and
say add darker support it's going to
auto generate a few files for us and we
can walk through each of them talk a
little bit about what they're doing so
this first is the dockerfile and this is
basically describing the environment
that your app is running in so the
important point here is that it's using
this Microsoft asp net image yeah so
this is basically the recipe for how you
build this container it says if you
haven't already downloaded it to your
computer which can take a while go to
docker hub and get this particular image
window server core version 1709 with
asp.net 4.7 not one that's pretty new
right right so go get that file which is
large it is pretty large so the first
time you run this it actually takes a
little bit of time to download that
image and make sure it's on your machine
once it's already there and unless you
delete it and it's pretty quick to
startup right but yeah the first time
it'll be a little bit yep lengthy you
also have this docker compose node that
was created and this really has all of
the assets to build and configure your
containers when you actually run it okay
so you have this docker compose file
here and this is really just saying get
that image that eShop legacy embassy
image and it uses that docker file that
I just showed you for context ok and you
also have an override file and this is
just defining some additional
environmental variables to help it run
so it's for example exposing important
so the cool thing you know studio is it
wraps all the plumbing for me you can do
this from the command prompt many many
people do yeah or you can right-click
and have Visual Studio do it for you
yeah and the other cool thing is these
are all text files yeah so instead of
having to install a bunch of things on
your VM you can just go and make some
changes in these text files and it's
pretty easy to add dependencies add new
things or configure how you need to
which is very cool and you haven't
touched the app nope haven't touched the
apps app is exactly the same all I did
was add docker support mhm
so now if I start up with adding docker
oops I wanted to start without debugging
so you can debug into your container if
you need to but for a faster startup I
just started without debugging here and
you can see down here it's getting these
images it's making sure all the
containers are ready and it'll start up
the same web app now at an IP address
so this is the IP address of the
container itself and if that's something
that you want to find out later you can
even go to your command prompt say and
say first you'd have to find out what
the name of the container is right so
docker PS is a good way to do that so
that'll give you all the containers that
are currently running on your machine so
once you have that container ID you can
say docker inspect and this is going to
give you all that information about the
container including what that IP address
is if you now have this app running in a
docker container locally on your Windows
10 machine correct exactly cool and it's
running at this IP as you can see it's
the same exact catalog as I showed
before yep talking to sequel server not
yet not yet
for this one we didn't implement so if
you see the docker PS only brings up
your one container for this each shop
legacy MVC but if this app was talking
to a sequel server then the container
can talk to that machine - exactly it's
essentially when it's equivalent of a
Windows machine running on your network
yep right exactly and we'll show that in
the next examples you don't have to do
anything with the sequel server no no
it'll be in its own container
it'll just a Janee in a container though
you could contain it you can't leave it
where it is you could okay exactly it
could be either way right okay cool
easy yeah and then another thing you can
do is type docker images and this is
going to show you that you have that
image on your machine so we have that
asp.net core image right here mhm and we
also have that you shop like a CNBC ok
right which is so the the basic image is
peanut running on core seven and a half
gigs this asp net one is today they take
a bit of space they do take a windows
can
sandurz take a bit of space of you yeah
are sitting there with like 12 gig left
on your hard drive then you're gonna
have a hard time yeah running on that
machine if you wanted to delete these
images those you could also do that and
you wouldn't affect things on your
mission so there's also a way to there's
a dr. command to take the image and put
it in a tar file but you could then move
to a different computer wipe all the
images off if you needed the disk space
great we're just playing around with it
and then take the tar file and rehydrate
it as images I discovered that when a
while ago yeah pretty cool that's a good
one too huh yeah I have quite a few
images on here just because I play
around with this a lot but yeah I'll
probably have to clean them out at some
point cool so let's get into the second
scenario which is a little bit more
complex but pretty similar so in this
one so you have a three-tier scenario
and for for this you have a WinForms
front end you have a WCF middle tier and
a sequel server back-end okay so this
might be a little bit more traditional
three-tier and to your app that you
might have in your mind of business
application so this is based on the same
a shop example again we go back to
visual studio I have this up and running
just so we can show you and in four
seven one you at the high DPI support
isn't at all it doesn't get all crazy
yes so this isn't a high DPI monitor
itself okay which is why it looks a
little funky here but what if you had a
high if you had a hundred would
automatically adjust exactly so we can
do the same thing here and right click
on this WCF service and say add docker
support
and again it's going to auto-generate
some files here but we're gonna have to
make some modifications this time and
that's because this is only generating
files just for the WCF service since
that's what I right clicked on and not a
docker support for it so now I want to
put that sequel server in a container -
okay and say ok now we have two
containers and I want to make the
service actually talk to the e sequel
server ok so if you're gonna leave it
that the WCF service talks to the same
sequel server mm-hmm
sitting somewhere else then you wouldn't
need to yeah additional changes right
there's a few changes in this base file
that you need to make which is
documented on the site yeah what WCF
services does this have does it have all
of them right no WS transport WS this
that the other thing exactly you might
need to add some additional things yep
so first we're gonna add those
additional things just for the WCF
portion and
all we're doing here is adding some
additional things to make the
environment full and this is all
documented online and something you have
to do when you advertising port 83
that's what that is
and then if we go to the compose file
here's where we're going to add the
dependency on the sequel server so we
will take this
and this now depends on sequel data and
this year is referring to the sequel
server image so now it's gonna pull both
that WCF image and the sequel image onto
your machine so again the first time you
run this it's gonna take quite a bit of
time because you have to pull both of
these images and on that container
you've got sequel server but you'd have
to put your database on and then setup
your users and your security the same
way you do any sequel server because
again that's it is a sequel server
exactly yeah
the last step is to actually put that
connection string info and your override
files cool yes so I thought you know a
lot sequel management's do you know
actually I can just put in the text so I
have my connection string I have my
password here I have all the credentials
here and I'm talking to that port 83
that I exposed okay and that's really
just these in additional environmental
variables right here and that's actually
it so even to add support and dependency
for the sequel server container there
was a little bit of work but it wasn't
we architected my code didn't go into my
app and change it at all now it's
running and now it's all set up to run
in docker
okay so let's start
docker and this one will take a little
bit more time just based on the fact
that you have these two containers that
need to start up so you started without
the debugging which is faster but if you
start with the debugging then you
actually can set the breakpoints and
debug the app all that's running it yes
yeah you can do that as well if that's
something that you need to look into
right
I mean presumably the apps been tested
locally and works just fine but
hopefully you never know it's always
useful to have that option right exactly
and so you can see here we've created
it's creating this equal container now
and now it's moving on to the WCF
container you can see in the output here
so if I go back here and I type in
docker yes you'll see that I have I
still have that container from before
because I didn't do anything with it but
now I have this new sequel container and
when the WCF container is done that will
show up here as well now in the WinForms
app you need to point it to see to the
WCF service running somewhere else no so
that I didn't have to make any changes
to the one for his front end so the wind
farms was already talking to the WCF
service just locally and you just had to
containerize the WCF service and it can
still talk isn't it running on a
different yeah oh yes yes okay that's
what you're saying yeah yes exactly
point in the web not the app config
current is to a different server yes
exactly so again the I P address right
exactly so now we have this starting up
here and we have the service so this is
the service itself and exactly we're
going to take this IP address and we're
going to put this into the app config
file here
and so right now it had the endpoint as
localhost that's what we were talking to
you before so this is what you'll
replace with the IP address and do you
get to assign names or do you always
have to use IP address I have to use IP
address unfortunately I don't know if
there's a way to do it with the ID of
the container or not I haven't looked
into that at all but IP is definitely
the easiest way to go so now if we start
yep it's so sterile not impersonal it's
true you can't name your container
something something interesting so now
I've started up an instance of the
WinForms front-end again and that's
going to be talking to the IP address
I'll take a few seconds
you
this is so cool because you didn't have
to change any of the app you just had to
basically change the where the sir the
pointer to the sir exactly and you
Visual Studio menu obviously you need to
you need to learn more about docker
right but that's it's not that hard to
learn how to yeah yeah exactly
where the image is what does it mean how
do you start and stop a container you
this is really good documentation on the
docker site there's you know inexpensive
books you can get but you've taken this
application and containerized it in 20
well we talked to 16 minutes right yeah
not counting the time it takes to
download the images right yeah so that
would take a little bit more time sure
listen now so a question I have we
talked about some of the benefits of
containers there's to modernize to cloud
enable these things you could have taken
that NBC app and published it to an
azure web app you could take this WCF
service and publish it to an azure web
app so talk about when you might do one
versus the other yeah I think there's a
couple of key points so the first is
about deployment so as we were talking
about before you don't know what
framework version this is running in and
so you publish this to app service and
this is running in the latest framework
version but app service doesn't yet
support the latest done at framework
version so sometimes a gap there okay so
with containers that's not an issue
because your frameworks gonna come with
your container and all those
dependencies are kind of baked in in
addition to framework it could be
another third-party dependency so a lot
of existing line of business
applications have things like complex
components or other dependencies and so
all of those dependencies are really
packaged in for you and you don't have
to worry about installing them
separately or worrying about them the
second is really to improve DevOps and
improve dev test environments so you can
start up a test environment really
easily like
talked about before so you can set up
your dev test environment using the
container you don't in this case you
don't have to even install sequel server
on your right because you have it in the
container the containers gonna come down
to your machine and that's much easier
than say installing all of that from the
ground up yeah
so should really help if this app was
using sequel server 2010 for example and
we weren't going to touch it but I've
got 2017 on my machine exactly and in
addition you could test it into your dev
your test environment and you could be a
lot more certain that it's actually
gonna work in production so I think
those are kind of the key things I would
point out I guess also you can run
containers locally you don't need a
server just fine so yep you can run them
locally you can deploy them to the cloud
if you want to right we obviously when
we DS when we talk about containers were
typically you know deploying them into
Azure you know for a couple reasons one
because we also want to talk about Azure
none of us are lugging around Windows
Server machine so it's just a heck of a
lot easier to put it in a jar right
exactly yeah that's actually what we can
talk about the next time okay that we
chat so I think in the next session we
can talk a little bit more about okay
now we have them running in containers
locally but right how do we get this to
the cloud what are all the different
ways you can get there how do you scale
out your application we can talk about
orchestrators okay which you may have
talked about in your microservices
episode as well a little bit yeah yeah
so I think those are kind of the next
steps in this scenario yeah but this is
really the basics and the first part of
getting towards they're cool so this is
a good stopping point and we will pick
this up again and the next one see you
next time on visual studio toolbox bye
picture
[Music]

Cool features in Visual Studio 2022

Hello everybody and welcome to this video where I 
want to go through some of my favorite things in  
Visual Studio 2022. My name is Mads Kristensen and 
I work on Visual Studio and I have for the past 12  
years and I just want to share some of my favorite 
things, because I think that there's something  
here that you might not be aware of that will make 
you more productive and more happy as a developer  
I want to go through a bunch of new features 
some updates some tweaks to existing features  
that kind of just makes it all feel a lot 
better to be a developer when we're using 
Visual Studio. But before we dive in where I 
want to begin is with the new kind of reality  
in the way we work right. A lot of people have 
gone back to the offices but a lot of people  
have not and then there are people that are 
sometimes in the office and sometimes at home  
And when we have environments like this 
we tend to move between different screen  
resolutions and different monitor setups. 
So, for instance even though when I'm at  
home sometimes I take my laptop out of the 
docking station here and I sit in the couch  
and I do a little work from there. In that 
situation, I just have a small little screen  
but when I'm up at my desk like I am here 
I have a one of these ultra-wide monitors,  
so that's a completely different layout right 
and when I go to the office I will I might  
have multi-monitors and, so I want to make sure 
that no matter where I am where I'm plugged in  
what screen setup I've got Visual Studio is 
always in an optimal condition to allow me  
to do my best work and so let's take a look at 
some of the cool things that we can do with that  
So, here I have visual studio and you know and 
I have my various different windows like the  
Toolbox and I have the Solution Explorer out on 
the right side here and this works well for this  
particular monitor with this resolution that 
I'm using right now when I'm sitting with my  
laptop I want more of a kind of a minimal layout 
like this so in this situation I have a small  
screen so I don't want all these tool windows 
to show up I need that extra space to code  
and I actually also have a kind of a 
separate thing is when I work on extensions
I like my layout to be a little bit different 
so I write extensions for Visual Studio and  
when I do that, I always want like the errorless 
to be visible like you see here, and I show a third  
tool window over here by the Solution Explorer  
but that's only relevant for when I do that 
if I work with websites I might have other  
requirements different tool windows like the 
Task Runner Explorer or other things that I  
want to have shown that I otherwise don't 
need and then when I'm at my ultra-wide  
I really like to spread out horizontally over 
that big area and so it will look something  
like this now this doesn't look very good 
on this monitor and this screen resolution  
that I'm using right here but maybe you can get 
the idea how I can like spread out horizontally
Let's go back here so let's say you have dual 
monitors you could actually take the different  
tool windows in Visual Studio and spread 
out on these various different monitors  
so I don't have that here for this 
video so we'll have to pretend  
So, let's open a window here. A 
tool window - the Test Explorer  
and let's imagine that I take this and I drag 
that onto my secondary monitor okay and maybe  
I'll make it full screen or make it really 
big so I can easily see all my unit tests
All I have to do to save that windows layout 
so I can easily come back and forth to it  
is to go to window it's a save window layout and 
then we give it a name let's call it "testing"  
and that's it so now I saved this layout 
if I go back up to window you can see that  
I have all of my saved window layouts 
right here and I can apply any of them  
For instance, we can go to this one and 
then back to the one we just created  
"Testing". And I can do that with keyboard 
shortcuts to make that very very easy and fast  
So, this is super helpful I use this every day all 
the time as I move between different development  
scenarios but also different monitor setups so I 
can't recommend this high enough go check that out  
it was a feature we were introducing 
in Visual Studio 2019 and we've been  
improving it uh as time has gone by so 
super life saver for this new world a new  
situation with dual monitors and oh sorry 
multi-monitors for different locations
All right, so here's another thing. I have my 
code base here I got a bunch of files open  
but I can't really see how many how many 
files do I have open and it you know I don't  
really know I can only see what whatever my screen 
resolution allows me to see how wide the screen is  
and that's why we always have had this 
little thing up here you can click next to the  
the tabs and if you click that, now notice how 
you can see the list of open files  
There are some that are grayed out and italics.
Those are the ones that are not visible right now  
And then we have the ones that just look 
kind of normal. Those are the ones you see  
on the screen. And the one in bold 
is the one that's currently active  
So, that makes it really easy for me to get a 
picture of what's open and where can I find things  
But you know, sometimes I kind of just want to see 
everything all the time all the open documents  
So, if I go to the settings icon I can 
now click "Show tabs in multiple rows" 
and what's really nice here is that if you have 
the screen real-estate - if you have the vertical  
space, you can now stack all these tabs so you 
can see everything that's open. Very very handy
But there are some monitors that are you know 
have you know that are extra wide for instance  
and in those it would be kind 
of nice if we can take our  
tabs and instead of having them on top then 
move them to the side where we have more space  
So again, go into the settings and 
click on "Place tabs on the left"
So, it's really nice I can resize 
this to whatever. I want to make it fit exactly  
my monitor here right so what I'm doing here is 
I'm getting that extra vertical space. I can now  
see maybe a couple lines more of code in the 
editor because I moved the tabs to the side
But let's see what else we can do here because I 
have all these open documents and you can see by  
default, it's actually kind of nice they are sorted 
by the project they belong to, so my solution has  
multiple projects and they're all listed under 
each of those projects. That's very nice I don't  
have to sort that or, sorry, group by project. I 
don't have to do any grouping at all, but I really  
like that so now it's just alphabetically sorted. 
But I want it to be group by project like here
And if we
take it one step further here what if 
we colorize these documents per project  
So, now each tab has the same color if 
it belongs to the same project and that  
makes it even easier for me to kind of 
at a glance see where these files belong  
If we don't want it per project because 
I already group my tabs for project here  
Instead, we could do it by file extension so 
that's also very handy, so I can see all my Razor  
files, all my C# files, all my JavaScript 
files. They all have a separate color so  
it makes it easier for me to get that overview and 
that might be exactly what you'd like to do here  
And as a new thing we can also go in and 
say, let's do it by regular expression and  
let's configure the regular expressions. So, it's 
a file here that opens up and I can start typing  
I'm just going to copy that line up 
from above and let's say we want to do  
CSS and as soon as I save the file we can see 
the CSS file has now got updated with a color  
we have Razor I want to have something specific 
here and we can even take it further we can say  
you know everything that contains the 
word um you know category let's say  
so like something like this foreign so not all 
everything that has the word or c-a-t-e-g will  
be colorized so you can do that by folder 
you can do that by file name and all these  
things so you can really customize how you 
colorize these tabs it's pretty phenomenal
And, of course, if you move uh back up and use 
the tabs on the top they maintain their colors  
so that's really really nice so let's go back 
to per project I kind of like to do per project  
when I have the tabs up top and that um because in 
this case they're not grouped by a project and so  
having them colorized by project is my preference 
yours might be different but I really enjoy this
So, colors can be very very helpful to us when 
it helps us kind of identify the different files  
and so on but there's another thing where 
I feel a color is a big deal and it has  
to do with us sitting in Visual Studio using 
visual studio for you know eight hours a day  
10 hours a day sometimes five days a week 
right. This is this is home away from home  
and just like you do with your regular home you 
want to have a certain furniture you put in your  
house right you have uh what colors do you want 
your walls and so on you want to make it yours you  
want to make it feel like a place where you're 
comfortable and visual studio is no different  
so what's really cool now in in Visual Studio 
2022 is that we have made it such that you can  
take any visuals any Visual Studio Code, VS Code 
color theme and convert that to a Visual Studio  
color theme very easily and there's a bunch of 
these available out on the extension Marketplace  
and I want to just show you a few right here so go 
to tools theme and you can choose from any of the  
themes that you've got installed of course you 
get some out of the box with Visual Studio you  
can choose from and you can always go 
and say click for get more themes and  
that will get you to the Marketplace where 
you can install all these different themes  
and they're fantastic there's so many great 
ones in here and they really help us if we  
want a nice dark theme if we're sitting in a 
dark room for instance and we can even have  
Visual Studio changed the theme automatically 
when Windows changes its theme there is this  
thing here called use system setting and when we 
do that if Windows is running in a dark theme at  
night for instance after sunset Visual Studio 
will automatically switch to the dark theme at  
that point in time and back to the light theme at 
Sunrise if that's your Windows settings right so  
that's really really cool so a whole lot of colors 
that makes our lives better in Visual Studio 2022
but let's change that back 
to the blue theme for now
and I'm gonna change to a different  
project here so here's a just a very simple 
.NET console app and I want to show you some  
cool things and improvements we've done to the 
AI-based coding assistant in in Visual Studio
so I'm gonna type a new line here oh  
and notice how Visual Studio automatically 
will suggest that I put in a last name which is  
exactly what I want in this case I want the last 
name property to be inserted for me right here  
I also want the full name so let's hit 
enter again and this time it suggests age  
which is could be could be the accurate one but 
I want full name so I'm just going to pretend  
it's not showing me anything and just start 
typing public string full name and notice here  
I can just hit tab and I get my full name and 
it understands that full name is a product of  
first name and last name this is really really 
fantastic so the AI engine here in Visual Studio  
understands the context I'm in it understands 
that I'm right under the first name property  
chances are that I might want another property is 
relatively big and based on the name it also then  
first name it then also suggests hey the last 
name is usually what other people will add when  
they you know as the next logical property but 
what I was really impressed by was the full name  
that it understands what a full name is right 
it understands that when people have a first  
name and a last name and they need a full name 
this is what they want absolutely fantastic here
Let's scroll down and you can see here 
I have a method here called remove data  
and all it does it removes some data from 
the list that I have defined above it  
so what's missing here is a method for adding 
data so again I'm going to hit enter and  
Visual Studio already knows what I'm gonna do 
here. I'm going to create an "AddData" method  
so notice that based on the name remove data you 
know it understands what remove means and add  
and so it suggests that I created a method 
called "Add" but what was crazy was that it  
knew what that would do inside the method 
right so it knew that it should not take  
the list and remove something it should add to 
that list so this is just absolutely fantastic  
here I'm just coding by tapping enter and hit 
hitting the tab key here it's absolutely great  
and we can take it a step further so let's say 
that I want to create a new method or I want  
some code but I'm not entirely sure how I should 
write it what I can do is that I can express it  
in a code comment like this one so here I have 
a comment it says take the two arguments and add  
them together so the args refers to the args 
that come into the to the main method up here  
so I'm just writing here in plain English what it  
is that I would like to have 
happen and now I can hit enter
and Visual Studio will automatically 
suggest what that code might look like  
so it understands what I'm saying in English 
in the code comment and can translate that  
into something that is might be what I 
want so this is absolutely fantastic so  
this is the AI engine that is built upon a huge 
data set and using machine learning it's able to  
take the context that the AI engine is aware of 
and pair that up with the big machine learning  
model of what do people do in situations like 
this that's basically what the machine learning  
model knows and when we pair those up together 
Visual Studio can do amazing things like this
so um a big step forward for the AI 
engine here in Visual Studio 2022  
now let's call our new method here the "AddData"
"AddData" and we're just going to give it
some string what are we going to call 
it we're going to call it just one  
here and I'm gonna just duplicate the 
line Ctrl+D duplicates the line like this
and then we can I'm using an extension here called 
Shifter that lets me change integers and other  
things by keyboard shortcut here Ctrl+Alt+Up/Down 
and so now I can fill my list here with data  
now let's set a breakpoint and I'm going to 
set a specific type of breakpoint this is a  
new type of breakpoint temporary breakpoint so 
what's really nice about a temporary breakpoint  
is that it disappears as soon as the debugger 
hits the breakpoint so let's run this console up
so here it runs and it comes down here and you 
see the breakpoint is now gone right the break  
point is gone because it was temporary it only 
hits once so let's stop debugging here and um  
let's scroll up so here on line 18 I'm making 
a method call into a nougat package called  
Newtonsoft JSON and I don't really know what's 
going on inside the method called serialize object  
I might be able to find the source code 
somewhere on GitHub and then go figure it out  
but it would be really nice if there's a way for 
me to just go straight to the definition hit F12  
and go to definition so let's try that and it 
takes me straight to the source so this is not  
um disassembly or anything like that this is the 
actual source code using something called Source  
Link all NuGet packages can opt in to Source Link 
and that will allow Visual Studio to understand  
how to get to the actual source code that made 
up this particular version of this NuGet package  
and even when you're inside these files you 
can keep hitting F12 you know go definition  
until we come down here and it's a serialized 
object internal and this is a private string  
so I'm F12 and I'm going to definition 
through a file that made up the NuGet  
packets that I'm working on and I can see 
everything that's happening super helpful
all right I want to switch over to uh  
different project and I'm going to open it 
here it's the one I had opened just before  
notice how how when I open it up here all the 
files that were opened before are now open again  
and in my Solution Explorer I can see 
that all my folders and projects have  
all been expanded to the same levels that 
they were last time I used this project  
and that's all good that means that I 
can get right back into where I left off  
but very often this is not what I want very often 
I come in I open the project in the morning to  
start working on something and I don't want sort 
of yesterday's state to be expanded into Visual  
Studio I want something clean I want something 
fresh I want that fresh car smell in the morning  
right I come in I just want none of this open 
but I want to be able to open my app and work  
with it so I'm going to show you a couple 
of settings that are really really helpful  
so if you go to Tools > Options and then go to 
Projects and Solutions there are two check boxes  
that are really good to uncheck here if you're 
if you're someone like me that likes that fresh  
car smell so "Reopen documents on solution 
load" I'm going to uncheck that and "Restore  
Solution Explorer project hierarchy state on 
solution load" I'm going to uncheck that as well  
so now let's go back to the previous 
console lab here we can see that
the document was not open and the demo console 
project over here is collapsed it's not expanded  
so now let's open this project again that 
we had before I'm going to switch again  
and first of all I don't know if you notice this 
but it's instant the loading of these projects  
are now instant because no other files have to 
be opened no state had to be read from disk and  
hydrated into memory and applied on the UI thread 
in Visual Studio to expand all the tree notes  
in Solution Explorer none of that was necessary 
when you open a file let's say you open a C# file  
if it's the first time you open a C# file in 
that instance of Visual Studio that you've got  
open then it has to boot up all of Roslyn and 
everything to get IntelliSense and colorization  
and all of that working and that's called a 
language service and a language service can  
sometimes take a little while to load 
now it's not necessarily a long time  
but it's not instant like it is if we don't 
need it and we do like I do here so this is  
my default this is what I always do just a little 
performance trick if you like the fresh car smell  
come on all right I'm going to show you a 
one of my favorite new features that we are  
putting into Visual Studio this one started its 
life as a an extension and it's now coming into  
visual studio so let me let me demonstrate 
that so let's say I want to add a file to  
my project you know I can right click go down to 
add and new item and that gives me this dialogue  
but what if I go in to Tools > Options 
here and click a preview feature flag here
and what I want to search for is here enable 
quick add okay so now when I right click and  
say add new item or kick Ctrl+Shift+A is the 
same thing I get this little dialog up instead  
so I can still click on this link that's shown 
as well that says show all templates which gives  
me that experience that I'm used to but I want to 
get the simplified view we call it the quick add  
dialog and so in here I can just 
type a file name so a name .cs  
and that's what it does it just gives 
me the internal class and this actually  
respects if I have how I how my namespace 
rules are in my editor config or in my  
settings and it will do the right thing 
it uses the templates behind the scenes
but it's a little bit more clever than that so 
control shift a again for add new item to bring  
it back up let's type something a little bit 
more interesting let's what if we create two  
files what if I create a Client.cs and IClient.cs 
now let's try that I just comma separated them  
and I now have those two files but check this 
out IClient is an interface whereas Client is a  
class so the quick add method or dialog is able 
to understand that I client that pattern naming  
pattern should match an interface template and 
then give me that so that's really really handy
but I can also click create folders so 
I'm going to create a folder here called  
"folder" and you can name it whatever you want 
and just end it with a forward slash hit enter  
and now you have an empty folder I could 
also have gone in and said okay let's do  
what if I do some sub directories here 
and then end with a file - file.css
so I can create subfolders I can create 
files in those folders again I can comma  
separate these to create multiples really 
really handy to have all this working  
so this is in the preview behind a feature flag 
so you saw how I went into Tools > Options under  
Preview Features and enabled this feature so I 
can't recommend this highly enough I love this  
thing I use the extension and for years and 
I'm very happy that this is now in the box
So ,now that we have a CSS file open 
let's write some CSS. Let's do background  
let's do blue and let's do set 
index you know three four something  
all right so I'm going to show you an extension 
here called Shifter it allows me to flip between  
values in the editor really really easily let 
me demonstrate so I have a keyboard shortcut  
here Ctrl+Alt and then either the Up Arrow 
or Down Arrow and so if I'm on a number here  
like the z-index and hit up Ctrl+Alt+Up it 
increments the number like this if it was a
I say 0.08 here you see it will know to keep those 
values depending on the decimals and all this sort  
of stuff so really really handy if you just need 
to like increment by one or something like that  
but we can do more it doesn't have 
to be just numbers it could also  
be colors so here's the color blue so 
if I do Ctrl+Alt+Up I get Royal Blue,  
Dodger Blue you see here it gets lighter and 
lighter the color gets lighter and lighter  
and lighter and then it gets darker if I go down 
Dark Blue and so on so forth so I can flip through  
these very easily I can do the same if if we 
have a let's see here let's grab a color here  
with the color picker that color right there 
so if I have a hex value like this I can do  
the same and it understands what hex is and it 
knows it's a color in this case and so it will  
make the color darker or lighter as I either 
go up or down with the keyboard shortcuts
so I'm just going to write some invalid 
CSS here we can do other things like  
switch between true and 
false or you know yes and no  
or on off and so on and so forth right so so every 
time we can toggle between kind of known values  
shifter comes in and makes that super 
easy for us Ctrl+Alt+Up and down
so let me pin the upper window here let me build 
our project now notice what's going on down here  
in the output window I'm 
getting a very nice colorized  
output here because I'm using an 
extension that colorizes everything  
which is really nice something is green or gray 
means like it's fine there's no no problem but  
let's introduce a syntax error let's forget all 
right let's delete this semicolon and run again  
so now yeah we get an error in the error list 
but we also see that our output is now red  
because there was an error so it makes 
the output window really really easy to  
kind of just glance over or skim and 
you can see if you have anything red  
or anything orange if it's like a warning and 
that's just really really helpful so there's  
a bunch of these extensions out there that you 
can use the one I use is called VSColorOutput,  
VSColorOutput so go check that out 
really really handy thing to have
and the last extension I want to show you  
is compile again is one called 
Solution Colors so you may have  
the issue where you have multiple instances of 
Visual Studio open and how can you tell them  
apart they all look the same what if it's the same 
repo you have open in both but different branches  
now they look almost identical the solution 
names are the same all the all the files in  
Solution Explorer are the same how do you tell the 
difference between open instances of Visual Studio  
well what we can do with Solution Color 
is that we can right click the solution  
and set a color so I can give it any color I 
want or I can enable auto mode so auto mode  
basically takes the solution path and the branch 
name and other things and makes like a unique  
color that it will always map to that same color 
so if if I now open another Visual Studio here
we can see here it will apply a color as the 
solution is low to see this one turns blue  
you can see the blue color up here and the other 
one got the magenta color or pink right up there  
now I can go in here and go to options 
and make it a little bit more visible  
I can go and say instead of just colorizing 
up here the up there and it also puts a line  
at the bottom of the screen you know maybe I 
want a little bit extra maybe I want it on the  
let's hear let's look at the borders instead 
of just the bottom what if I wanted at the top  
as well so I'm gonna go ahead and do that 
and so now I have a thing here at the top  
this is very very cool because 
now I can very very easily see  
that this is the you know I have a 
magenta one I have a blue one and so on  
and I can even tell by hovering down in the 
taskbar those colors are also present here  
under each of the thumbnails in the
Windows task bar
and if I don't like magenta I don't 
have to have the even though we have  
auto mode is on I can always say no 
no I want you know give me a burgundy  
and I can keep that color and all all other 
solutions will still have the automatic one  
except for the ones that I manually said hey no 
no I want to specify the exact color for this  
particular solution and of course I can also hit 
the custom one and then select any color you know  
RGB color that I can find here so or that that 
exists rather so you can be really really specific  
here and it stores it um in the .vs folder at the 
solution root so it's not something you want to  
check into source control you can but it's not by 
default so this is just a personal setting to you  
having you having put colors on yours does not 
change the colors that your team members might  
have chosen for theirs or if they don't want 
any colors that doesn't make any difference  
either because they're kind of 
just local to you your machine
so this is called Solution Colors - Solution 
Colors so throughout this whole demo you  
probably didn't notice because there's no way 
to tell that I've been working inside a VM  
but not just any VM or virtual machine I've been 
working inside a Dev Box a Microsoft Dev Box and  
just you can tell there's really no way to tell 
this is just Visual Studio running you can run  
with any other app that I have installed that 
I need to have installed to make my uh make me  
able to work on the project I'm working on right 
so it's it's just another VM but it's hosted in  
the cloud and it's super powerful so if I go to 
devbox.microsoft.com this is where I have access  
to my Dev Boxes and this is where my it department 
has given me the opportunity to create new  
Dev Boxes that I can connect to so I have two here 
I got Legacy and I got Podcast those are two and  
they're pretty powerful uh eight core 32 gigs of 
RAM and a terabyte of SSD very fast SSD drives  
so depending on your workload you may want 
to have a super-fast powerful machine or  
if you wanna if you have a lighter 
workload you can go sort of smaller  
and it's very easy to create a new one so anyone 
can just come in here say hey I want to start  
on a new project I want a clean machine and you 
just set it up very very easily from this website  
so it's a very very cool technology it makes sure 
that your Windows is always up to date and the  
latest patches it's kind of a managed thing 
your IT department can manage all these Dev  
Boxes the way they can also manage your own you 
know physical workstation or laptops um to always  
keep them secure compliant up to date connect 
them back to your network have all those things
um so that you won't even notice that you're on 
a VM and the first time I tried this I was I I  
will admit I was a little bit skeptical 
but I signed in for the first time and  
OneDrive started synchronizing my files so all of 
a sudden I had all my files everything was there  
all the images and all these different things 
that I have on my Desktop and you know in the  
My Documents and whatnot it was all there and the 
image came pre-installed with Visual Studio and a  
bunch of other tools that I needed so I could just 
get to work immediately and it really didn't feel  
like it was like a a VM that was hosted in the 
cloud or anything like that it felt just like  
another one of my machines and um I'm very excited 
for this I have I have a specific specific use  
case uh which is you know Visual Studio sometimes 
can use a lot of uh resources when you compile  
all the time and run debug and all that sort 
of stuff it takes a lot of resources we want  
it to take a lot of resources right we wanted to 
compile as fast as possible we don't want to sit  
and wait so we wanted to use be able to use all 
the resources that we've got now the problem with  
that is that it for me I have a laptop and it kind 
of drains the battery so I can't use Visual Studio  
on battery on my laptop for very long but with 
Dev Box I can I can go all day long because I  
don't do any of that heavy lifting locally on 
my laptop it all takes place in the cloud with  
much beefier hardware than what I've got in my 
laptop so I get a much faster experience and I  
get battery that lasts all day it's perfect so is 
it public preview you can go ahead and try it out  
um I encourage her to do that I think it would 
be fantastic and um there's a whole admin story  
for your it admin you may want to uh talk to 
them about it as well because there's a whole  
opportunity for them to make this secure and 
compliant and all this sort of stuff making sure  
that you don't spin anything up uh that they don't 
think you should and um it's so it's a win-win  
it's a win for the developer and it's a win for it 
you really get that flexibility that productivity  
that and get all the hardware you need when you 
need it so um go check out Dev Box - Microsoft 
Dev Box and that was it for this uh 
brief video of me going through some  
of my favorite features in Visual Studio 2022 
new features are added all the time so make  
sure you go check it out uh install the latest 
version and try it out for yourself thank you

CosmosDB Serverless NoSQL for the .NET Developer

[Music]
hi and welcome back to another episode
of visuals to your toolbox I'm back
again with my guest Jeremy hey Jeremy
welcome back to toolbox thanks glad to
be here
it's awesome to have you and it's almost
like we never left the studio or we
weird the same thing all the time that's
right this is the only actually have a
closet full of hangers that have nothing
but there's your logo shirts on them
that is amazing the cats out of the bag
there you go so we were doing two
episodes today but they'll be published
separately so folks might have not even
seen the previous episode that's totally
fine so today we're gonna really focus
down on cosmos DB right absolutely
cool so what are we gonna talk about
give us give us a summary so I want to
just drill into a lot of the aspects of
cosmos TV I've gotten pretty excited
about it in the other episode we talked
about a link shortening tool that I used
yeah and I enhanced that tool to store
data into cosmos TV so I could find
insights from my application what I
found is just you know it works
incredibly it works really well as a.net
developer there are a lot of ways to
interface with it so I want to talk
about you know what cosmos TV is why
it's important to dotnet developers and
show a little bit about how to get
plugged into cosmos TV and start using
it as a service right and you know folks
didn't see a previous episode that's
fine we'll link it it's not a grindin C
or anything you know the core function
thing and that was a really good thing
to watch your folks are interested but
let's start with what cosmos DB is again
I want to make sure folks coming in may
be really not knowing what does database
technology is all about if you can give
us a quick summary that'd be great sure
so you know when we talk about functions
we talk about serverless which I talked
about flipping that last server cosmos
DB is what functions are to compute
cosmos DB is to storage right it's the
idea of sort of a hands-free ability to
host an enterprise-grade database it's a
sequel right I mean is kind of the
defining way to describe right at a
baseline and then it has a lot more
because of what's being built into it
right so it's no sequel it's it's
document based but what's neat about it
is it supports a bunch of different
interfaces to connect to it
one of those interfaces is what everyone
who has followed the history as familiar
with document DB right so that was the
previous incarnation and what's
interesting about document DB is that
supports sequel syntax so even though in
the database we're storing documents
that can have different schemas and
properties I can still go to my
comfortable select star from group by
order by and use that familiar syntax to
quarry the database if however I'm a
traditional no sequel developer and I'm
used to something like MongoDB we have a
MongoDB driver that works out of the box
in fact I can take an existing MongoDB
application update the connection string
and connect to cosmos DB and use that
yeah that's very cool and then there's
two other api's there's a table storage
API which again you update the
connection string your app that uses
table storage is completely transparent
and then there's one that I always love
to bring up this interface name because
it's called gremlin right so gremlin is
what we call a graph interface and the
idea is that you're storing nodes and
vertices that connect the nodes and the
canonical example is airports so you
have airports as nodes and then there's
flight paths that connect them and
gremlin is a a language that can
describe how to traverse those paths and
then find information things like what's
the shortest path what is aggregate
information along the path etc that's
really cool in folks that you know might
may be googling later on trying to find
some information about about this
product the rename is always like a
moment in time with Microsoft and it
changes after like that so to be clear
like that community B was what this
product was called right it's now called
cosmos DB but we still refer to document
DB interface right over the way the way
we you can interact with it
right but that that does just a historic
factor right of what it was called so
the name might be dead from the product
name perspective but it's still alive
from a interface perspective it is so
alive in fact I did a workshop that was
a node workshop based on or based
on document DB and of course it's
iterated now to cosmos TV so I created
cosmos DB and was able to migrate that
existing application without changing
code I just
they did the connection string and that
existing document DB driver worked yo
asses out of the box yeah we changed the
name because it was honestly just
causing confusion and remember the
conversation for students realize the
power of this technology and hopefully
the new name gives us a new new life and
it's a lot more fun that's yeah sure
yeah yeah I was impressed that you know
sometimes we don't pick the best names
I'm I'm in marketing so I've spent time
naming stuff you you can blame me for
code lines for example oh praise me or
blame me I was on that project but yeah
this this was a good one I I like cosmos
DB and let's jump in to see what it's
all about
sure so the first thing I'm going to
show you just from the portal is the
experience of creating a new cosmos DB
I'm not going to go all the way through
it because I have an existing one but if
you click in to add a new resource and
just pick cosmos DB it's going to ask me
for an account ID so this is just a
unique identifier to access the most as
your resources there's some URL and that
URL needs that and you can then find a
beginning you can always change it kill
it later but right so we'll do my vs
toebox DB and then you pick your API
this is what we're talking about it
supports different ways to interface the
traditional document DB the MongoDB
interface the gremlin or graph interface
and then key value storage table simple
storage so we can pick any one of these
let's just do table storage I picked my
subscription that's my billing I can
create a new resource group I pick my
location and then I can enable geo
redundancy what this is key because this
is going to give me the ability off a
map to basically click different regions
and have it automatically span those
regions for me which is a pretty cool
feature yep what what I often hear
people describe this technology of ours
as a globally distributed database you
know something they can live in lots of
data centers and I believe you mentioned
there's different kind of retention
policies right of how how many
triplication you need we kind of
concurrency you need oh that's right
exactly in fact this is one that I've
created and this is a live one that I'm
using for my link shortening tool and it
stores metadata and you can see that for
my purposes because I'm the only one
he's actually exploring the day
yeah I just have this in the Atlanta
region which is close to me the eastern
US I've got an activity log that'll show
me how it's been accessed so I can
quickly look at you know basically have
there been any errors or issues or
anything along those lines and this is
just basic you know what's available in
Azure by default you didn't configure
any of this till incorrect this is
completely out of the box what's really
nice with this is the the data Explorer
and this allows me to look at my
collections which are containers of
documents they're kind of the corollary
of tables if someone's used to
relational databases you can see I have
these URL stats and this is using a
sequel like syntax like star from from C
and it's giving me IDs so that I can
expand these on demand so if I click on
one of these you can see the actual
document that's stored in this case
there's a unique identifier it
redirected to a page has a timestamp and
this particular document was a facebook
redirect I click on another one though
this is the the power of Cosmos DB and
document databases is this one as a
property called Twitter yeah so I'm not
locked into a specific schema I'm
counting different types of items for
that yeah this is a great power I mean
as a person that's used to creating a
table you know back in the sequel world
and having that table be sort of the
definition of what you look kind of data
you can store that this is a different
way of thinking about it right right no
sequel well and here's what's really
nice I want to jump into some code and
show an example project that I created
but what I love about the way that both
the document DB and the DB
interfaces are written is developers
used to sequel are also pretty used to
object relational mapper z-- yeah so you
know entity framework is a very popular
one and the whole idea is I deal with my
code and classes the database stores
them as relational tables so I need
something to map between the two of
those
what's nice when you take a document
approach is even though the document is
schema lists and you can have open data
and you could do you know a dictionary
key value pair to set the document yeah
you can also create strongly type
classes and you don't need to go through
any intermediary to store them the
driver just accepts that classes and
stores it right into the database cool
let's see so if we we take a look and
I'm going to come back to the the link
shortener in a second but I've got a a
Visual Studio code window opened here
and in this project what I did was took
the USDA food database and imported into
cosmos TV and then stood up an
application so you can search food items
cool and if we look at these links in
the configuration I'm going to just
click on this food group link you can
see the way it's stored actually on the
website is this format of these weird
squiggly lines and arrows and whatnot so
part of what this application does that
won't spend too much time on it says a
parser and that parser is going to read
the lines in and split them up cool and
then it has an importer that actually
imports the collection the transformer
is how it maps them to this is a food
group item or something different but
the importer this this is the actual
code that I'm using to populate the
database and you can see that we have a
helper method that gets our database
connection so we're pulling in our
secrets making a connection then what I
love about this is I have git collection
so I'm getting a collection of a
particular type it might be food group
food item something like that if that
collection exists because this is the
import utility I'm going to drop it and
recreate it so I can just import fresh
this is the code that inserts an item
and that's all there is to it this item
is passed then you can see this is a
generic type of tea so the item might be
a food group class and I'm gonna show
those in a second but literally
collection insert one a sink and that
loads it into the the database for me
I've got a completely separate project
that has my models my classes so here's
food group for instance this could be a
completely poco right plain old yeah see
sharp objects ELR object if you will but
I've chosen to go ahead and add some
metadata that says okay this is a unique
identifier right so using that attribute
to to make code the
Rayo so nae and you know some people
might want to do this fluently so keep
it out of the class completely and you
can do that yeah but for the purpose of
this demo we did metadata the other
brain power and flexibility a great
responsibility exactly with great powers
great responsibility the other thing I
wanted to show and this is a nuance I
think it's important to call out because
this is what people run into when they
move from that relational model to the
document model the first time I decided
to create a food item what happens is
every food item in the database has a
set of nutrients and it can be protein
fat carbohydrate M&C whatever right the
database doesn't necessarily have all
nutrients for all foods so I may have a
food that only has three I may have a
food that has 200 right so the way we
would typically model that in a c-sharp
class is just like this right I have a
nutrient and I have an array of
nutrients which is straightforward the
problem though is when it stores that in
the document database it's just an array
that can have whatever inside of it cuz
variable is a schema schema 'less so if
I wanted to ask a question like what are
the foods with the top protein content
it would have to go into each one of
those records right scan the array find
the entry and pull that out right
becomes a very intensive operation to
come right because of the distributed
nature of the data so what I'm going to
do is search for this cosmos database
that I have pre-loaded so that I can
show you exactly what the data looks
like inside the database and once again
I have this experience that I can go
into the data Explorer I can expand my
collections and here you see I have food
groups nutrient definitions of food
items the way this is stored in the
database and we'll pull up this document
you can see that I have an array of
weights which is fine but this nutrient
doc has nutrients and then water here is
a property it's not an entry in an array
this is nutrient doc dot nutrients dot
water or nutrients dot energy so now I'm
reference
just a path on the document right and I
can do that indexing I still want to be
able to work with it as an array from
c-sharp but all I had to do for that is
just put a helper method that basically
when we pull it from the database we
look at this freeform document format
that's this nutrient doc and build up
our strongly-typed list of nutrients and
then on the flip side when we're saving
we just go through our strongly type
list of nutrients and create a more
loose form JSON type document yeah so
this makes sense I mean I've seen this
kind of pattern before like processing
the XML in some cases you wind up in
very similar because some other systems
XML data right and you're converting it
into some structured thing all right and
your database and they're the way
they've organized it doesn't make sense
for you as a as a query you know
performant thing and you have to
reorganize it right so that will
actually map in and I want show the the
simple case of accessing this data now
yeah so I showed the experience of
importing it I've got a little test
application and this is just making sure
that I have my connection set up
correctly so you can see here this is
the power of dotnet core right we've got
a very flexible configuration model I
can have my keys stored in app settings
I personally don't want to check those
in and have someone steal secrets yeah
so in this case I've set environment
variables you can see here it'll pull
from the JSON unless it's overridden by
the environment and then those secrets
come in and when we deploy this into a
website we can always set them up in the
application settings right so it's very
flexible like that this is getting the
list of groups and this is the code this
is using the MongoDB driver it's
basically getting the name of the
collection that's just a helper I have
as Cori able to a list this is link
syntax that everyone should be familiar
with yeah looks a lot like in any
framework only I don't have to add that
as an intermediary so we here doesn't
developer although this is like being
home you know nothing nothing unusual
so it just iterates the groups and write
some and then here we're gonna grab the
first food item so again it's getting
that collection as Coria Bowl first or
default and then I just pull some
information out so let's take
look at that from my terminal and run it
let me see where I'm at I'm in the
console test and of course this is
dotnet you can just do the donít build
release and it'll come through and in
this case I've got a helper for
connecting to cosmos DB and I share my
models
between several projects so you can see
it built the models the connector and
now built the test so let's run that
that test project really quickly so
we'll go and this is USD a console test
DLL and so it's going through the
connection string getting that list of
food items it's listed it out and then I
tapped that and it grabs that last food
item for me cool so we know it's working
the next logical step in most
applications is to build a Web API
so I've got this Web API and this is
where the scenario that I talked about
with you know give me the top nutrients
comes into play if I want to sort for
example from protein so if we look at
the controller and again what I love
about this is the dotnet developers are
going to be just very familiar with this
type of syntax so here I'm getting a
specific food group so that's my route
passes in the code I'm gonna return not
found if you pass me an empty code
that's just logical right being safe now
I come through and I grab that
collection and here we go find async
food group where code equals code just
link syntax straightforward when it
grabs that I decided to enhance this as
well and grab all the food items that
are in that food group so if you get
that group detail you can get a list of
items and drill into those right and
then it just returns an okay result
that's it that's the API endpoint so if
we come inside of this application now
let's actually expand this out and ctrl
K is the secret code to clear the screen
I did not know that yep so I think this
some right-click equivalent that I use
well go into this and again Don that
bill will go to release you can build
the debug if you want and we'll let that
spend
again models connector being reused
across projects and then we'll do dotnet
and we'll go and run this and one of the
cool things when looking at your code is
is like you said it's very familiar to
dotnet developers of the cosmos
you know client library that the cosmos
team builds gives you a lot of that link
sinks in think against this so that
meant developer you can come in here and
be like yeah in a couple of hours I'm
building against kozmo so you don't have
to really write some new thing and you
have your Explorer in the cloud to see
the data is but they usually question
like my apps malfunction is it's writing
the data is it reading that exactly you
have multiple points they're just there
well there's actually a quick start to
that I love because when you build a new
cosmos DB you can literally click a
button in the portal and it'll create a
populated list of items and give you a
download for a project to hit the ground
running so it's not building it yourself
but it's having an app that you can look
at and interact with so we're going to
just hit this food groups in point to
get the list and again what's happening
here is my API is going out grabbing
cosmos DB it just pulled back those two
food groups let's pick one of the food
groups I'm going to do 200 which is baby
products so for the actually spices and
herbs so then we got this list of foods
with spices and are your baby like
spices and herbs on that they're here to
tell you exactly so now that we have a
database and we have an API we have
everything we need to do to build a
front-end yeah the focus of this is
cosmos DB so I'm not gonna go into too
much detail with the front-end but what
I do want to show you is actually let's
keep this running and we'll open up a
new terminal and in this same project I
have a web actual web page it's a single
page application that just uses Vijay s
I'm not here to say angular react
whatever it was just a great at picking
side but that's a quick way to get up
and running yeah so what I'm gonna do is
see if I have any docker pieces running
let's actually make sure docker is good
to go that little detail yeah it is
good to have go docker spinning for that
there will give it a second what I've
done is I've just created a really tiny
application you can see it's got a bunch
of HTML that uses templates and data
binding to do things like list nutrients
and lists food items just you know one
page of information it there's no
there's no back-end code this is all
JavaScript using yes you render off the
public endpoint that you've built yes
exactly exactly and for this the the
JavaScript include is just using very
simple code to make calls out to the API
endpoints so we've got queries and and
that actually reminds me well Dockers
spinning up it might be done here I
wanted to show you this inside the web
api for the foods controller this is the
one that allows me to do things like
sort or filter by a group so I've got
from the query string I've got a group
ID I've got a from the query string a
search and so this will come through and
basically project the item so MongoDB
has something called projections where
you can say even though there's this
much data in the database this is what
I'm really going to show so subset you
subset of records exactly filters and
sorry yeah and I'm just like link that
I'm used to you know entity framework
and all that exactly it's the same thing
this should be very familiar description
contains the search and the food group
ID equals the food group and you can see
I can chain these together or basically
do one the other or both and then I go
out get the Cori order it and and list
it so again very straightforward in that
sense let's come back and see how our
Dockers doing we'll do doctor all right
there you go so I'm gonna run the image
I created there's a very simple docker
file that uses something called busybox
which is a really tiny web server
because all I'm serving is an HTML page
and there's book page basing right so
I'm gonna map for day today because port
80 is an explicit inexplicably
inexplicably taken on my laptop and we
call this USDA web so we run that I'm
just gonna do this to make
it's the running it looks good let's
come back into our browser and hit like
a foot dev is so powerful it is
undervalued sometimes and here's my
simple view J s app and I can select a
food group let's do spices and herbs
click filter boom it pulls these and
then when I click on them it's going to
give me all the nutrient information so
zinc magnesium and C and then as a
person who eats a hundred percent
plant-based diet
what I might be interested in is
breakfast cereals which one has the most
protein so I'm picking the group
breakfast cereals nutrient protein give
me the top foods look how fast that was
I just came back sorted and these when I
click on this presumably it's gonna have
a higher protein kind of well actually
that's kind of small there but it's also
a small serving size so if we change to
something that has a bigger serving size
like a cup you can see the okay well
let's do one and a half let's actually
take the maximum cup amount there we go
now we've got good good protein yeah and
then we can search with the text so this
is a fully functional app on cosmos TV
and what's really neat is for the front
end I don't even have to care I'm just
working with straight api's yeah for the
back end I can use either document DB
driver or now what I showed you in
this dotnet core app was the MongoDB
driver sure I want to take one quick
second and show you what I use for my
URL shortener and that is the document
DB and what's really nice and we talked
about this in the episode with Azure
functions is the the fact that we have
these things called bindings that make
it really easy to interact with external
sources
yeah there's triggers and bindings so if
I open up this project I'm using the
document DB interface to store all my
information and when I look at this
function host what I did was added this
attribute for document DB I gave it the
name of the database the name of the
collection created if it doesn't exist I
love that about bindings the first time
it calls it can do that
and my connection string is a secret
that I store an app settings so that no
one else sees it I notice I have this
out dynamic dock
so remember schema lists so I can create
the dock however I want using this API
at the very end of my method I create an
expander object which is just you know
key value pair basically for dynamic I'm
adding a gooood to make it unique
putting the page in the count and then
based on the custom event and this is if
it's Twitter Facebook Linkedin my blog I
add that notice that there's no other
code this is an out parameter so by
setting the value of the parameter when
this function exits automatically writes
the document into Cosmos DB formance now
even though Cosmos DB is a document
database I can plug it into power bi and
pull up rich metrics and data and
filters so what I've got here is where
my redirects are coming from I'm just
doing one day so I'm saying where are
the most click throughs what hour of the
day is popular and these are my popular
links and I can come into the filter for
example and let's look at change this
from last one day to last one month and
apply the filter and now you can see
this is Sunday Monday Tuesday so
Wednesday wins for click throughs this 4
o'clock UTC which is around noon Eastern
Time is popular for clicking during time
of day and then I've got all my links
here so I get all the information I want
pulled out that Cosmos DB cool very nice
you've got the whole story basically end
to end if you can store data your
flexibility in how you query it you've
got the ability to add power bi
dashboards the top of that data what
more can people one specially you know
just to give it a try
exactly it's working great for me and
again on on the site there's plenty of
quick starts that let you download the
project pre populate the database and
get up and running in seconds all right
sounds good anything else you wanted to
show about this today that's it and
everything I've shown today is open
source on my github we'll put the links
on the site there's the cosmos TV that
will import the data for you from the
USDA it's got that built in as well as
the URL shortening project that I have
here all right well that sounds good and
we really hope people
give cosmos to be a try and thank you so
much for coming on yet again
yeah thank you I'll have you back it's
always a pleasure and again hope folks
give our technology I try at sober we're
trying to show you all the coolest stuff
and this is definitely some of the most
cutting-edge things that we've been
working on so glad to do it
a lot of fun thanks for having me on
I'll make sure to wear my my eyes are
shirt you always gotta wear it's from
now and if you don't worry ban from the
show thank you for watching everybody
have a good one
[Music]

Create Objects and Bind to Your UI (12 of 18) Building Apps with XAML and .NET MAUI

[Music]
hi welcome to visual studio toolbox I'm
your host Robert Green and I'm your
presenter Paul sheriff and we are
continuing our miniseries on building
apps with zaml andet Maui and in the
previous episode we saw how to bind
controls to other controls today we're
going to go a little step further than
that right Paul what are we going to do
yeah we're going to take a look at now
creating things in C uh which is you
know what most have we have a bunch of
classes and stuff and we want to bind
those classes up because that's what's
going to fill in the data for our
screens right yeah all right before we
do that however I did want to kind of
because a lot of people ask they say you
know having this hardcoded down here if
I wanted to have that same picker and
use it on a few other screens I had to
copy all of that man that's not
something we generally want to do so
let's go ahead and cut it out of here
let's go over to our app doz example
right so if you remember this is where
we're able to put in things like in our
app Styles right we did all of that so
what I want to do is I going to add this
as a resource here now to be a good
resource we need to make sure it's has a
key to it I'm going to call it phone
types so this is just another resource
just like in that app Styles if you
remember the app styles that we
created app style sorry there we go we
created like a string resource and a
double resource all we're doing now is
creating an array that is now a resource
so that means down here what I can do is
I can eliminate the item Source part
here I can then set the item Source
property to that static resource called
phone types
nice so that you know does a couple of
things number one it kind of simplifies
the code here but it also makes it so
that's a reusable ible array of strings
that you could use on other places
throughout your application so if you're
just going to use it once in one place
you can just leave it in line but the
second you need to use it twice right
second you the second you copy and paste
it there you go tells you there's got to
be a better way absolutely absolutely
it's kind of just like in C right I mean
if you're refactoring code you know you
know you're GNA use something you want
to just make a little tweak to it then
you you basically cut it out and you put
it in a new class or something right
that's all we're doing cool all right so
now let's go ahead and start really
start building this up I'm going to add
a new project now into our solution this
will be a class
library and I'm going to call it
adventureworks do entity
layer and I'll make sure we're using Net
7 or if net 8 is out feel free to use
that none of this should be changing
okay I'm going to go ahead and delete
this class one
I'm going to add a new folder called
entity classes here and then into this
I'm going to add a
class so we're kind of classy people
over here so we like to use classes well
I am I don't know about
Robert J's been out on that for a
while all
right so I'm going to create this user
class here all right and it's just got a
simple little Constructor that just
initializes things and if we look at all
of these properties here what do those
look like those look like exactly what
we're seeing on that user details screen
that we've been creating right y okay
yep so now if we go over here and I've
got this in this entity classes over
here make sure it builds of course so
hopefully everything will build and once
it's built you can now come over here
and right Mouse click on the
dependencies and add a project reference
over to that entity layer so that we're
then able to use any of the classes
within that
project then we're going to go to our
user detail view now I want to do some
binding up so if I need to get over to
there what do I have to do you got to
add another Nam space that's right so
now I'm gonna just simply call this one
okay this one's actually going to be my
view model so even right click add
namespace here don't you think pardon
there should be a rightclick add name
space little dialogue that comes up yeah
yeah need put somebody needs to put that
in
uh in
um that's the word I'm looking for where
do you go to to make featur one of our
yeah put that in GitHub so they can add
that there as a little say hey here's a
new feature we'd like feature
request so all right so I've added this
XML namespace and I'm calling it View
model then here's what we're going to do
we're going to add an xon data type here
and I'm going to type in user and you'll
see user and then in parentheses it
tells me the name space that's that that
class is within so if I just hit tab
there it puts it into the right format
what this is doing is this is
identifying to this content page the
overall class that you're going to be
using to bind here and why we do that so
we can get intell sense within visual
studio all right now within this content
resources here's what I'm going to do
view model user and then I'm going to
give it a key name and I'm going to
Simply call it view model and then look
at
this all of our properties now show up
here isn't this cool M all right so all
we have to do is start filling in the
data and I've already got it here so we
don't want to have to watch me type all
of that so there we go I have now
created an instance of the user class
this right here when this runs it
creates an instance of the user class
and assigns the properties to these
values so if I have a real instance of
something I can now start binding these
properties to each of those entry
controls but here's the thing this
border is the kind of the parent now
right of all the other
controls so what I can do is I can set
the binding context one time
here right so I'll do the static
resource Q model OKAY by doing this it
means that I don't have to do The
Binding context on each individual entry
control all right so now what I can do
is for the text I can now do a binding
and look at that it gives me my list
here so this is the login ID okay if I
didn't do the binding context up here I
would actually have to put this on every
single entry control but Microsoft said
well you shouldn't have to do that that
would be just silly so they say if you
put it at the parent level so and all
these other children underneath it hey
we'll go ahead and assume that you're
you're good do you do it at the can you
do it at the content page level at the
highest highest level or does it have to
be at the first okay contain question is
can we put it up here right can you do
this binding context up here so again if
we come down here and we take a
look Okay cool so really it's fine even
though you know you kind of think that
well this is coming before where we're
actually defining it but it does seem to
actually because it all just getting
compiled down right right so yeah now
Community was the words that were
escaping me by the way ah yes
oh so you could make that feature
request there we go developer Community
all
right I digress now you digress so but
personally I do like putting it here at
my kind of my parent level because
that's the place that I'm looking most
often but that's that's just me I mean
you know again there's absolutely
nothing wrong with putting it up there
either so right so what we would do is
we would simply go through and we do the
bindings on each one of these like so
right I mean it's really simp simp
Le try to do these as quick as I can
here by finding
email right so then we get down here we
got the check boxes now the check boxes
obviously are not on a text property
they're on the is checked property okay
so this one is the is enrolled in
401k and then this next one is checked
would be a buy name to the is enrolled
in Flex time so we just keep doing this
little by little we just build this
up is enrolled in
healthcare and then our last one here on
the radio buttons is is enrolled in
HSA all right the switch right so we do
actually have you know switch control as
well this one is is toggled so it's not
a you know checked or anything it's
actually a toggled and I actually have
an isactive property in there that we
can use for that so that's at still
employed
okay now down here we start getting into
the radio buttons so again it's on the
is check isn't it so it's The Binding is
fulltime and then on the radio button
here this is checked okay let's set this
one here is
checked this one is a binding
on uh ouch sorry just hit my thing I'm
still going to bind on the is fulltime
because I don't have an is part-time
but what am I going to use my converter
yeah if you remember I had that nice
little inverted Boolean converter that
nice so beautiful that's a really good
example of using a converter like that
where you've got a single value but you
got two radio buttons that's where
you're probably going to use this most
often so on the date picker we're going
to bind to the date property there and
we're going to bind the birth date and
here in the time picker we're going to
bind up to the uh what is it the uh
start time yep remember what my names
are
there now okay on this one let's see so
is this
one right so this one we're not going to
do our binding context here anymore okay
uh because we want our binding context
actually go to The Binding context of
the parent so we're going to change this
to back to what it really should be
so instead of actually binding to the is
check we're going to actually still bind
it to the is full time right so if we're
not full time I'm converting it then
this will become enabled right and also
that start time will be set right so
I've got two different kind of bindings
there all right now the Picker so we're
down here on the Picker and we've got
the items Source but what about what
about the selected item okay well the
selected item would be a binding to oops
sorry Dean there it is to the phone type
so in that user class there is a phone
type and that's Home Mobile right or
other so does the entry need to be bound
to something the phone
number uh oh yes thank you forgot about
that one good eye so that would be a
text again right MH and then that would
just simply go to the phone okay thank
you I would have missed that all right
well so let's go ahead and run
this and let's make sure everything is
working as we'd expect so and then I
guess we'll talk about the address view
in a
bit um actually I'm not going to even
worry about the address at this point
that's a little bit more to add on so
okay really feel like doing that at this
point okay okay but there you go look at
that there's all our data now being
bound
from awesome this instance right here
so so if I start changing this you'll
notice that it's not changing over here
okay and you also notice right here that
this uh part-time and full time is not
toggling the is enabled on the start oh
yeah boy what's wrong with that
huh well actually I'm not going to talk
about that quite yet okay that'll be
actually be in the next section we're
going to talk about why these things are
not updating okay obviously if I make
the changes here uh maybe I change
another one here to false then we stop
and restart those values will now be
reflected but changing them on the fly
like this doesn't work because we're not
informing the UI through any mechanism
and that's what we're going to have to
do and that's what're okay okay but you
can see that things did change here you
see the values here did change okay so
we will talk about that in the next
section but one thing is I've created
this instance of this user class here
right is there any way that I can get at
it from the code behind right so if I
wanted to get access to that created
component can I do that yeah actually we
can I would need to do a using on the
adventure works and layer right that's
the first step then I can
create a property here that's of the
type user that's the one that we created
I'll call it user object here and then
here's how we can access it in the key
the Constructor here after you've done
the initialized component I can go after
the
resources right these are the resources
and I can look for the key called view
model and I can convert that to uh user
class and there we go it'll Now set that
okay so to prove that out what we can do
is we can come all the way back down
here and we can to add a clicked event
here I'll call it save
buttonclicked I'll hit F12 to have it
create this down here and I'll just
simply do this I'll do a
system. Diagnostics debugger. break like
so let's go ahead and run on this all
right so when this comes
up we'll come in here I'm going to
change a lot of this here let's call
Paul Sheriff 234 Paul
sheriff sheriff psa.com
all right I'm gonna go ahead and hit
save
now okay and if I look at this user
object and I hover over this okay sorry
hover over it there is look at that okay
so the values are going one way they're
going from the UI back to the object but
we saw earlier that when I made the
changes in the xamel to the object it
wasn't going back to the UI right so
obviously we need to do something to do
that and that's what we're going to
cover in the next section but there we
go we've got a little bit start of
binding up objects to our
zaml excellent okay so we're stopping
here with the application a little bit
broken y but we'll fix it in the next
episode so stick around and we will see
you next time on Visual Studio
[Music]
toolbox