Constructing the application - Services

[00:00 - 00:21] In this lesson, we are going to implement all necessary injectable services that we are going to use in room front-end application and admin front-end application. Let's start by adding two new libraries. So I'm going to execute command-yard-nx-generate for library leaps-state-rooms with import-path-state-rooms.

[00:22 - 00:43] And the second library called leaps-state-meetings. So we have two new libraries, one for meetings, second one for rooms. And we are going to use them to do HTTP calls, to fetch all necessary data, and so on. So let's start with rooms.

[00:44 - 01:14] I'm going to create five files inside of that library. First one, room-backend- url.ts, will contain injection token to start necessary back-end-url string. Then I'm going to add room-converter-service that will be used to convert room-dt-url into room, and then room-dt-url. The next one is rooms-http-client-service that will be used to make HTTP calls to fetch data from back-end.

[01:15 - 02:07] The next one, room-state-service is the main state-service, so we are going to keep all fetch data there. It's going to be a public API for applications. And the last file is the room-state module that will be ng-module that contains all these necessary services. I'm going to use modules to generate a clear and easy-to-use API for applications. So give me a few seconds, I will prepare all the files and I will show you the code that is inside them. So I have the code, let's start with room-converter-service. As you can see, I have two methods from dt-url and to dt-url, and I'm basically converting room-dt-url that we have from show to dt-url, libraries that we extracted from back-end application, and I'm converting it into room-interface that is simple interface with free methods, get ID, get name, and get image.

[02:08 - 02:24] So it's nothing complicated, and let's continue to the next service. The next service is room-http-client-in. So this service is using HTTP-client and back-end-url, which is an injection token that stores back-end-url.

[02:25 - 04:08] I'm using this token to get the base-url of my back-end application, and then I 'm using HTTP-client to get all the data or to add a new room using a post-method. I want to avoid hard-coding back-end-url because this library may be used in different applications. You may want to migrate to your back-end to AWS Lambda or something else, so it would be great not to hard-cote any URLs. It's a good practice and I can recommend doing that. Once we have room-h ttp-client-service, we can move to room-state-service. So first of all, we have a behavior-subject that contains array of rooms that we fetched. So you want to avoid fetching rooms every time when you enter a page or you change navigation or something. So we want to store all fet ched data in this behavior-subject. Then I'm using HTTP-client-service that you have just seen in the previous file, and then I'm using converter-service. So I have three methods. First one is fetch and it's return-invoid. When you call this method, it's calling get-method-on-http-client-service to fetch all the room data and store it in the state, which is a behavior-subject. The rest two methods are get and add. The get one is returning an observable with array of rooms. So when you want to use rooms, you have to subscribe to this get method and add, of course, is adding a new room. So I'm using fetch and get to create some kind of unidirectional data flow. So reading the data and writing data is separated.

[04:09 - 04:49] It's a bit similar to NGRX or other state management libraries that you may know. The last piece of the whole puzzle is rooms-state-module. To make it working, you have to provide somehow these rooms backend-url-injection-doggen. And I'm using pattern for root. In my case, it's for backend-url to create a module that contains all the providers. So it contains HTTP-client- state-service-conversor-service. And then I'm using static-for-back-end-url, where you can define that I'm going to use this library with this URL. That's the way of providing backend-url to the whole library.

[04:50 - 05:27] And of course, we have to go to index.ts and expose all necessary interfaces and classes as public API. All right, so let's switch to the second library called meetings . I'm going to prepare the code. And once again, I will show you everything that you need to know about it. Meeting's library is very similar to rooms library, which means that most of the code will look the same. I'm going to use the same approach. So let's start with converter service. We have two metals from DTO and 2DTO. Of course, DTO as previously comes from shared D TOs library.

[05:28 - 05:57] And then I have meeting implementation here. It's a simple class that implements meeting interface. As you can see, I decided to create a constructor that gets DTO to make code look cleaner in the constructor. So we can create a meeting implementation using meeting DTO directly. It's a bit different approach, but it works as well. Let's go back to converter service. As you can see from DTO is very simple, that just create meeting implementation using DTO.

[05:58 - 06:26] And to DTO, we just create a plain object. The next class is meeting HTTP clients service. And it's similar to rooms HTTP client service. We have HTTP client, we have backend URL. I'm using different injection token because I want my packages to be independent from each other. So I don't want them to have any connection between them. And I have get and add because you can get all meetings for room ID.

[06:27 - 08:15] So we have a parameter here and you can add a new meeting and meeting DTO, of course, comes from shared DTOs library. So the next class is meeting state service. It's quite similar to rooms state service. I really like this approach. So I have a state which is a behavior subject. And it keeps all the data that I fetched. I have my HTTP clients class. I have my meetings converter service. And most of the important work is done by fetch, get and add. So I'm using client to fetch DTOs. Then I'm converting these DTOs to meetings. And then I'm setting a new state on my state behavior subject. Get returns and observable from that behavior subject. So if you want to use array of meetings for current room, you need to subscribe to get the last one is add. And it simply calls HTTP client converting the data to DTO because I want to send DTO not the implementation of meeting. And then here, I'm calling fetch once again. So every time when I add a new room, I need to refetch the state and set it in my behavior subject. Because I'm using get here, all current subscribers will get the information that the state has changed. If you know how to use NGRX, NG XS, or other state management libraries, it's pretty similar. And the last thing is to export all necessary classes from index.ts here. As you can see, I'm exporting everything from state module, meeting, and service. And NG module looks basically the same. So I have HTTP client module imported, I have free providers, and I have static for backend URL, which sets the current backend URL to meetings, backend URL injection token.

[08:16 - 08:28] As you can see, the data flow in my application is not very complicated. So we have everything that is necessary to build admin and room front-end applications. Let's put everything together and see how it works.