Up next in 10
Full Stack App using gRPC Web, Web API, SQL Server, Cosmos Db || Angular Virtual Conference 2021
10K views
Nov 9, 2023
In this session, we will cover the following: 1. Micro Service using .NET 5 gRPC, SQL Server 2. Micro Service using .NET 5 Web API, Cosmos Db 3. Creating Angular 11 Web Application 4. Integrating the Angular Application with gRPC Web 5. Integrating the Angular Application with Web API Conference Website: https://globaltechconferences.com/eve... C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com C# Live - Dev Streaming Destination: https://csharp.live #angular #webdevelopment #fullstack
View Video Transcript
0:00
So what are we going to do
0:03
So this is a big time integration kind of thing. Like you have Web API, you have GRPC web
0:11
and your Angular app, you have Blazor VASM. You have two of the SPAR technologies talking to two kinds of
0:20
backend systems, one through the web API and one through the GRPC
0:25
And a lot of things will start learning. We'll start with a base version, which is this one
0:32
We'll have our application like this. And within next 40 to 45 minutes
0:37
I think I might stretch first five minutes, we'll come to this version
0:41
So from here till here, we will come. And this is the one integration which is happening
0:47
through the GRPC web. And this is through the web API. This is through the web API
0:54
You can see this. The content is pretty much human readable. and this content is purely from
1:04
it looks like a pneumonics, a little bit of this. This is the GRPC web
1:09
And another important point to observe is the number of bytes, if you are hitting the web API
1:17
it's coming to 1.2K. And when you're hitting the GRPC web, it is 480 bytes, 18 bytes
1:26
it's less than half. and see the time perspective, it took 31 milliseconds, it took 6 milliseconds
1:33
I mean, whatever I'm telling it, we should not take it that
1:38
but you guys should have done the performance testing thoroughly because I ran a couple of rounds of benchmarking on this
1:47
It's almost like a close call. Sometimes GRPC was winning. Sometimes the way BPA was winning
1:54
I was doing it on my laptop. That might be one reason
1:58
but and also the content which the length of the content should be one more driving factor
2:05
Suppose if you go more than the allowed limit, the max allowed limit is 4mB
2:10
If you go more than that, there might be memory issues, but we have to do a thorough ysis
2:15
but most of the times if I see that, from the size perspective, from the size perspective
2:22
it's always less than half. So you're winning the race, a little bit, 50% of the race there
2:27
you have to bring less content than the wire. And the number of milliseconds, that varies
2:32
I'm really can't guarantee you on that, but from the content perspective
2:37
it is 50% of the content. So we are winning the game there. Okay
2:41
And this is our application, starting point of the application. Just before starting this session
2:47
I just ran a couple of NG generate commands. So that, you know, I have created all those blank files
2:57
there's nothing in there and we'll start going it and here is one where I have the grpc server
3:06
which is running and here that is grpc web and this is the web API and both of these has been
3:15
using the common components have a core college core college dal and business
3:22
logically typical in in layer and that I'm using it in WebbPi as well as the GRPC. Let me quickly spend a couple minutes on each before we come back to purely console mode and go ahead and do that
3:41
So let me do clear of that and so I'm switching on my clock so that I can be
3:52
Okay, so let's quickly come back over here. Here I'll ensure. that the port on which the WebAPA runs is on port 5,002, and my GRPC web runs on 501
4:10
So that's a couple of points. And other important points is all the dependence injection is happening over here
4:18
So I just want to spend much time over here. So let's go ahead and start and look into this for a minute or so
4:27
and then we'll proceed to see how we come and talk to this
4:35
the GRPC web. And here is this professor's API, and here is the data
4:41
I have three of those rows in the data store, three rows
4:49
So you can see this, Wignesh, George, and Mithun. These three people are there
4:53
And that content, we can try, give that a shot. Everything is in .NET5
4:59
Latest, I mean, dot net fight. I didn't do it in dot net 6. It is in dotnet 5
5:04
You can see this. We have all those three records which is coming in here
5:10
And that's one thing. And the other thing is I can quickly go and start the GRPC web two
5:22
So let me start this GRPC web. I mean, these are the foundational blocks
5:26
Let's assume that someone is exposing their endpoints, API endpoints as well as the GRPC endpoints in different microservices
5:35
So how do we do integration? How do we hit those endpoints
5:39
That's the entire story. How do you create multiple spas and hit them
5:46
So this is the GRPC server. And what we can do is we can come in here
5:53
And I have a couple of ClarePC. Let me first show you the console client
5:59
And inside this, this is the console client where I can go and execute this console client to see how it goes and does an integration, how it talks
6:13
So this will be the fundamentals before we go towards the spa
6:18
So it's expecting one of the good of the professor. I took the Wignesh ID
6:25
I just hit that. The moment when I hit that, you see that the request comes to this
6:33
GRPC server. That guy goes and brings in the content and we get it. One thing to observe here is when
6:40
we hit through this channel, that means we are coming through the GRPC regular channel, the
6:45
client, GRPC client channel. We are not coming through the GRPC web channel. So what does
6:50
GRPC web means? So anything which you, which you, you know, use it as part of your spa apps that is what you're hitting through the grpc web so before we get
7:04
into this angular world i just wanted to show you the integration points how do you hit the
7:10
grpc service grpc server maybe through the client channel or through the web channel now you can we can
7:18
see that differentiation here when we hit through the console application it was coming through the
7:22
the GRPC channel. When I come through here, you can see that it will give us this different session
7:33
You can see that we are coming over the web channel. When we were integrating with the console application, we are coming over the GRPC channel
7:42
When we come through the SPAR, that means we are coming through the web channel
7:47
So that's the key difference which we have to understand before we go any further
7:52
towards. So I just wanted to quickly give you the server-side infrastructure
7:57
And when we do integration, we know that Web API, we always expose through the services in
8:05
Angler and go and hit that Web API. And when you're doing the C-sharp, the key piece here is
8:12
I mean, this is the server folks, they will take care. You have to enable the GRPC web
8:16
That means this will allow you to come and talk to it over the SPARCH, SPARCH
8:22
and I'll send the browser, browser apps will go and hit it. So that's the server side infrastructure
8:28
So what I'll do is I'll just keep those things aside. And I have opened up to console command lines
8:35
and kept it here just as a sidetrack So that we can go and switch between these windows to start the web APIs or the GRPC services
8:49
I titled it as GRPC service, so it will be easy for me to understand
8:53
Okay, that's pretty good. So what I'll do is I'll just start with dotnet run and dotnet run
9:02
So there are multiple things which we will learn here in this fast track
9:08
express train. All that technologies and how does you develop a spa application using Angular
9:19
I used 12. So let's start with this. When a couple of points to observe here is the first important
9:28
there are a few things I would like to go real quick. So the first important point is inside this
9:34
Package.j. Most probably we should use that NGGS. serve iPhone Ho. So it doesn't wait for us to go and click. It opens the browser once it starts
9:45
That's one important point. And the second important point is we can go ahead and customize the
9:50
port on which port we would like to run. And that port we can go ahead and mention it over here
9:58
In this server builder configuration, you have this one. And the second important point is
10:06
How does Angular knows that how to bootstrap it and that we will pretty much will see that
10:13
Before seeing that, I would like to go and remove all the HTML which comes by default
10:20
I am going and removing everything and let's come back. Now we have a clean slate
10:28
Without this, no programmer will do any program. So I'm also the programmer
10:36
So that's Hello World. So now let me come back over here and go to this inspect
10:42
The moment we do inspect, what are all the things which we are seeing over here
10:46
We are seeing that there is something known as app route. And this is H1 tag is there
10:51
We have the router outlet and we have something known as an app route. Okay
10:56
So something he's happening behind the scenes. So let's come back and see that who has got that app route
11:02
So when we go and search that app route, we see this here
11:08
So app component has got app route. So that means it is creating a directive
11:14
This component has been used as a directive over here. That's what we understand
11:20
App route. Okay, what is happening inside this app route? Who asked to go ahead and load this app route
11:27
So any of this files, you have a default file. So we have the index dot HTML
11:34
So that has got the app root. So we tracked back. Index. Dot HTML has got app root and app root is one of the component
11:41
And here we have used that app root, the component as a directive
11:45
And that's how it loaded this one. So who gave the instructions to load this app route here
11:53
Where is the other instructions which are? So we can come to this file here in this Angular JSON
12:02
And you can see here the server, this is a builder. It helps us in building this
12:08
And if you slowly scroll up, here is what the instructions. So it says that the builder over here
12:15
the build angler browser, and here is the output path, and here is the instruction which says that go and pick up
12:20
this index file, HTML. And while you're picking up, go and use this main.t
12:25
So this is the linking. So when we go and check this main
12:29
The main dot TS is telling to bootstrap the app module. So when we come to this app module
12:36
app module is asking us to go ahead and use the app component
12:40
And when you go the app component, it has got the app route. So that's how he knows that how to load this component
12:47
Okay, that's a little bit of a little bit of fundamentals. And then the next thing, what we need is we need to have a UI of this kind
12:58
So what we will do is we'll slowly, bits and piece will build it, not slowly
13:03
I have to run pretty fast. So first what we will start is we'll start building this components
13:08
For that, what all the things I have created. I didn't write any code
13:13
We will copy paste a bunch of codes now. And other important things to understand is the URLs
13:19
one of the way to have the URLs is in this environment
13:22
so that we have the prod as well as the dev environments
13:27
And we can have this specific URL. So I'm coming, if it is a GRPC channel
13:33
I'm coming on 501. If it is web channel, I'm coming on 5,002
13:37
That's one more important point. You can see this are multiple things I've created
13:41
Under the shared, I have the top nav wire, footer, page not found in the rating component
13:46
And Hunter, home, I have the dashboard. Under employees, I have the card
13:51
So we need to set up the routing system. So at this point of time
13:55
we don't have anything in the routing system. So let's go and steal some code
14:00
from this routing. So what I'll do is I'll just copy this block from here
14:06
The fast track stealing. So I stole some of these things. And I executed a lot of NG new commands
14:16
sorry, NG generate commands. So that it creates and also it comes and adds those
14:22
in the app module. So everything gets automatically created, those links and everything, where the file
14:30
will be there how to load it. Everything will be done automatically when we use this NG component
14:35
There will be a lot of errors we'll see every now and then. Sometimes I'll create wantedly so that we know that what mistakes we are doing. Right
14:44
So at this point of time, we do not have anything except this routing has been set up
14:49
So it says that dashboard works. So here we should understand couple of points
14:54
So a directive, a component can be used multiple ways. here I am talking about two things
15:01
Here, the app root component has been injected here. So that means the component as directive
15:08
And once you go to that any specific route, at the time it displays the component
15:13
So you can use the component as a directive or a component as a single page for the spa
15:18
So let me come back over here and dismantle this piece. And I will block that, block these two
15:29
and unblock this guy. It looks pretty ugly. From there, we'll start the beautification
15:37
That's our dashboard. From here, we'll come back to this mode. Just give me two minutes time
15:43
I'll guarantee you will come to this mode, from that page to this mode. So it's pretty ugly
15:49
That's good. The next thing, what we do is the styling. I'm using this bootstrap as well as the font awesome
15:58
So there are multiple ways. you can get into this Angular JSON file
16:03
And here you have the styles. So you can inject those styles over here
16:08
Or you can go ahead and inject those here in this head
16:12
Or you can go ahead and import that here on top, here on top of this existing styles.cs
16:21
So what I'll do is I will steal the entire styles just to speed up the time
16:27
I come back to here. and I will paste it over here
16:33
Once we paste that if you come and you should see a minor difference in this UI
16:41
So a little bit of fonts has changed and we have some background
16:45
That's pretty good. So what we will do is next thing, we'll go and start building the top nav bar
16:53
So we'll come back over here. Let me reduce this and come back to this top nav bar
16:59
So top tab bar is where we have the navigational links. And I'll come back over here and quickly go to the top nav bar
17:11
And this top nav bar, I will copy that and drop it over here
17:17
It looks pretty ugly. We'll make it beautifying. We have some links over here And the next thing what we do is we have the styling specific to that in that CSS file So we drop that styles over here
17:34
I'll dub styles and come back and see that. Okay, boom. There's something, we have something to see that
17:41
Okay, I'll minimize this so that we'll get an extra space. Okay, next thing what we do is we will go ahead and work on the footer
17:49
So we'll go and check this footer. Let me quickly come back over here and check the footer
17:58
I have this footer over here. I'll drop this. There will be error because this method we have to copy
18:05
And I will copy this T.S. file, which has got a method over there
18:10
which will get this foliar of that. And we need the styling for this footer
18:16
I go and copy this styling. So that's pretty good. We see this, we have the footer
18:25
We have the header and footer and a little bit of background
18:29
And one thing I would like to highlight is if you comment that
18:34
what will happen is the footer will come and stick to the content
18:38
a little bit behind the content, what content do you have. Or you want to fix there at the bottom, you can fix it
18:45
So it will come and stick it over here. So you will have a scroll button
18:49
here. That depends upon your requirement whether you want to stick it over there or float it until the content is here. Okay, that's good. So the next thing, what I would like to do is just to speed up a little bit of time
19:02
I'll come to those components and I will steal the rating component. I think I have the I already stole the rating component. Let me check that to have it. Now
19:19
I have to steal it. Chello, we'll do that. Let me come back
19:26
That's the rating component. I am stealing that from here to here
19:36
I go into the shared and I drop this rating component. Cool
19:42
So the rating component is here. And apart from this rating component
19:47
we need the dashboard also. So I'm going and copying the dashboard too
19:52
so that we can spend time on other concepts instead of these
19:57
I just wanted to show initially how all this bootstrap and other techniques
20:03
HTML, CSS techniques will help us. So you can see this. We have the navigational links
20:09
We have the employee table and we have the employee card and we have the dashboard
20:14
And we are not seeing any errors whatsoever. Okay. So this is a little bit of styling and look and feel of the application
20:26
And if I select this, we have two navigational links and we are here
20:33
So what is the next concept we would like to go ahead and build it
20:38
The next concept we would like to go ahead. What if we have someone is trying to go to the different links and is not
20:49
finding that link. And we have to, behind the scenes, we have to use ytics to find what is the user journey
20:57
what user is trying to do which URLs is navigating. We will, one of the way we do is send it
21:03
to the application insights or any application performance monitoring systems to find out the user journey
21:08
what a user is going, what links is trying. So this is one of the needed page is this page not found
21:16
So let's quickly go ahead and steal that. code also let's go there and let me paste it over here now we'll come back here so we have an icon
21:35
and this one so you have to come back and suppose if someone is trying to play around with our
21:40
application trying to sneak in or do something you will we will redirect him to this
21:46
location from where we can come back maybe for one day The page not found is multiple reason
21:51
We did some mistake or something links we have broken or we have broken the application
21:56
with our latest fix for whatever the reason we have to provide that
22:01
In the routing we have to take care about one of the pointers while we are creating
22:09
The most likely things should be on the top. So the first hit will win
22:14
So the dashboard, employee cards and this one, the page not phone we are given
22:19
So if no route parameter has been given, that means if I don't give anything and I navigate
22:26
so if I do, still it goes and navigates to the dashboard
22:29
We are redirecting to the path. And any wild card routes, we are routing it to the page not form
22:36
So this wild card has to be at the last. If not, that will win and we'll never go and see any other page. Okay
22:44
So that being said, we'll see how we can integrate first with the web API and then we will see how we'll be able to integrate with the how we'll be able to integrate with this
22:59
with the grPC service also okay and one more important point i just wanted to talk about is the view component
23:09
or a presentational component so view component are a presentational components what does this view
23:15
component or presentational components are so the component uh the component uh the component uh
23:19
It is technical jargon, but it is a component which doesn't have intelligence or it doesn't need to go and talk to some other server or any place
23:28
Someone will feed in this information. That means if you see this, this is a rating component, five star rating or six star or seven star, whatever the number of stars you want it
23:36
You can give this rating to that. The star rating you can use it
23:42
So what it does is based on the inputs which we provide to it, it automatically goes and shows
23:49
that number of stars starting because it doesn't have intelligence of its own
23:55
So let's quickly see one example of that and then we will go to the next steps. Okay
24:07
Let me go to that app component and I want to use that over here
24:14
Rating I'm telling that 4.2 and I'm telling that 4.2 and I'm telling you
24:18
I'm telling this number of ratings should be five. And at this point of time, I don't want to use this because this is only just a demo
24:26
Okay, we'll come back over here and we can see this. This is five star rating and employee rating is 3.x
24:36
And what if I want to give six stars rating and seven stars rating and this is 5.3
24:46
Now we can see this. It is dynamic. The component doesn't look for the fixed number of things
24:54
The component is dynamically rendering itself based on the input it gets
24:58
If you see in this example where we have the number of cards
25:04
and other things which are, sorry, you see this number of cards which are getting displayed
25:10
So these cards are also, it's coming from the back end. The content for these cards are coming from the back end
25:16
And that each from we are looping or iterating through the number of employees
25:21
And we can inject one employee and this card will show up and it displays that
25:27
So if we make this particular thing as a component as a component, as a component
25:32
and there is an parent component that brings, that calls this backend systems
25:37
get the data and injects it. So this component we can do for loop and loop it through the collection of
25:46
employees and it does it. But this doesn't have any intelligence. This card component doesn't go out and talk
25:52
All it looks at is, hey, someone gives me the data, I'm going to populate it
25:56
So that's one of the technical jargon or the naming is called view component or the
26:04
presentational component. It doesn have any logic or whatsoever It like simple You give me the content I going to flush it out I going to appear there So that the kind of component This is one of the concept which we generally use Now if you
26:20
observe this, you see that when we go to the dashboard, when we go to the dashboard, what it is
26:26
happening is it is coming and displaying this dashboard component as the, it's displaying the dashboard
26:33
component as a page for a page for the single page navigation spa application but what I can do is I will
26:43
cut these two rating components and drop it at the top drop it at the top and we'll come back over here so still
26:57
it shows there so if you see this there are a couple of components a couple of concepts over here so
27:02
When we go to this route, it is showing the entire dashboard component
27:06
That means it is showing this component. The rating component, if you see this, the rating itself is a component
27:14
The rating thing itself is a component. That is either we can call it as a view component or a presentational component, but that component has been used as a directive inside another component
27:25
So now you have two concepts. When you go to a route, you can show a component as a page and you can as a component as a directive
27:31
So that's a couple concepts. So let's move further. So that's being said
27:40
Couple of things to discuss is, I'll close this block. I just created one interface and service
27:50
So for API, I created Professor's API service. And let's discuss about this just for a moment
27:57
So the Professor ID named Data Join teaches salary, PhD, picture URL, and rating
28:06
So all the assets I have dropped it here. So you have the page not found, you have the loader
28:12
and these things are coming in from here. So we might not see Spinner because the servers are already running
28:20
So the initial hit will take time, but the servers are already running and we are hitting it left, right
28:26
and center. I don't think so we will be able to see Spinner. But if you want, we can stop this and restart it
28:31
to see that. So we have spoken about this and we spoke about, we started speaking about this service
28:43
So once we are speaking about the service, we need to talk about the dependency injection
28:48
HCTP client is the one which goes and talks to the services to bring the content
28:53
So that's getting dependency injected in this one. So that's one thing. And we are going and talking through
29:01
through this HTTP channel and we are invoking the call. So this base URL, if you see this base URL that is coming from the
29:08
WebWeP URL, that will be tracked back to the environment. TS and you have this 5,002 URL
29:17
Okay, so that's pretty much over here. The service. So let's come back to, let's come back
29:25
5 minutes. Oh, okay. 5 minutes. Okay, then I will speed up
29:31
Thanks for the time check. Okay
29:47
So we are back here. So when we click this one, it's compiling
29:57
It's recompiling because we dropped some of the things. Let's give it a minute to recompile
30:06
I'll switch anytime it recompiles generating. Okay, so it's back
30:18
So you see this, the spinner is happening and I don't know whether it is hitting
30:24
okay, it was hitting this one. So the important thing is you can see that we are coming over the GRPC by
30:30
grPC web okay and when we come here so it will come and hit this hit this guy the web API
30:45
where are we what a fan network tap okay I'm coming in here did I stop that
31:00
No, no, no, no, it's there, it's here. I do
31:09
Okay, so I'm here. What happened? It's stuck somewhere
31:19
One second. So let me stop. It looks like it got hung somewhere
31:27
So let me start that so that we can see. so that we can see that integration how the things are happening so we are
31:38
here exactly we are in the same path okay that's pretty good so let's go and click on this
31:54
so we can come to that network sources it's going and talking this
31:59
grPC service so it comes and uh displace this uh in the tabular form the content representation
32:07
also we can do it multiple ways based on the requirement and here when we are going and hitting
32:12
the web API it will come and hit this uh way way API okay so that means the issue is in the routing
32:24
issues in the routing that's one is employee card and employee so that we can track it back to
32:36
the dashboard top nav bar menu okay one goes to imply cards and other goes to employee
32:46
table that's correct okay so let me let me show it here for some reason that link
32:54
It's not working. Why did I change it something? Okay, so it took some time for some reason
32:59
See this, it took some time. Sometimes it took some time. Okay, let's discuss over here
33:09
You can see this, whatever the content, which just now we see, we saw here
33:13
it was coming in from there, that we are displaying it in the card representation
33:19
Here also, you can see the rating component, has been used as a directive
33:26
And these are two representations. One is the table representation and one is the card representation
33:32
And even in this table representation, we can implement the concept of view component
33:39
or the presentational components. One of the driving forces, if you want to reuse the same table to display in two different places
33:46
one for the hardware employees, one for the software employees, or chemistry department professors
33:52
or some of the department professors, We can reuse this component. We don't need to copy paste and do some modification
33:58
So the parent component who is using this component as a directive
34:02
they can go and talk to different services. All they can do is they can inject the content
34:06
whatever they are getting it from the API into this, and it will start flushing out
34:11
Similarly, if you see this, here this particular component shouldn't need to have any intelligence
34:17
All it needs an object which will have all these values and it can flush it out
34:23
So we can use it here and do some content projection and styling
34:28
So we can use the same component, which is the presentational or view component
34:32
where we can change the background color and rest of the things, and use it at multiple places
34:37
So that's the thing. That's it from my sense
#Programming
#Web Services
#Windows & .NET