1 00:00:03,790 --> 00:00:05,950 Hello, everyone, and welcome back. 2 00:00:06,180 --> 00:00:10,250 Please listen, we are going to continue the implementation of our courts, this service. 3 00:00:10,300 --> 00:00:13,310 So what is the purpose of this service class? 4 00:00:13,450 --> 00:00:19,270 This class is going to gather a series of commonly used, cursorily related operations that are useful 5 00:00:19,270 --> 00:00:20,750 throughout the application. 6 00:00:20,770 --> 00:00:25,700 For example, this code that we have here for fetchingly list of courses from the back end. 7 00:00:25,840 --> 00:00:30,610 This is something that might be useful in several other components of the application other than the 8 00:00:30,610 --> 00:00:32,360 application component itself. 9 00:00:32,380 --> 00:00:38,170 So if we would like to get the same data elsewhere, we would need to repeat this code instead of doing 10 00:00:38,170 --> 00:00:38,550 that. 11 00:00:38,560 --> 00:00:43,930 What we're going to do is we are going to move this functionality to a service, the courses service 12 00:00:43,930 --> 00:00:50,170 that is going to provide to the view, such as the application component and observable based APA, 13 00:00:50,200 --> 00:00:55,020 where internally we are fetching the data using our HTP client. 14 00:00:55,060 --> 00:00:57,190 Let's see what this would look like. 15 00:00:57,190 --> 00:01:03,260 Let's first switch here to the courses service and start defining the API of our service. 16 00:01:03,280 --> 00:01:07,960 So these APA will start by having a method called Lulworth courses. 17 00:01:07,960 --> 00:01:14,810 And the return type of these courses method is going to be unobservable, of course, array. 18 00:01:14,860 --> 00:01:21,910 These means that the values submitted by the observable return by lower courses will be instances, 19 00:01:21,910 --> 00:01:23,290 of course, array. 20 00:01:23,470 --> 00:01:29,170 This is the same type of observable that we have here written by the HTP get coal. 21 00:01:29,410 --> 00:01:35,560 So let's start by injecting here the ETP client directly in our courses service. 22 00:01:35,560 --> 00:01:39,740 As we can see, it's available anywhere in the application where we need it. 23 00:01:39,760 --> 00:01:45,220 Now what we're going to do is we are going to take this goal and we're going to move it here inside 24 00:01:45,220 --> 00:01:52,660 because this service we are going to define here our parameters and we are going to return these observable 25 00:01:52,660 --> 00:01:58,350 here generated by the ETP, get Cole to the color of lower the courses. 26 00:01:58,360 --> 00:02:04,870 So our application component will no longer have a direct dependency towards the HTP client. 27 00:02:04,900 --> 00:02:08,690 It will only have a dependency towards the courses service. 28 00:02:08,710 --> 00:02:15,700 Now we can obtain the same courses observable that we were obtaining here by calling courses, service 29 00:02:15,700 --> 00:02:21,070 dot load courses and notice that we don't even need here these parameters. 30 00:02:21,070 --> 00:02:27,730 So this code for fetching data from the weekend is now nicely packed in this function and can be easily 31 00:02:27,730 --> 00:02:30,880 reused elsewhere on the application where we need it. 32 00:02:31,000 --> 00:02:32,050 Let's try this out. 33 00:02:32,060 --> 00:02:37,270 We are going to lower the application and as we can see after these refactoring, our application is 34 00:02:37,270 --> 00:02:39,040 still working as expected. 35 00:02:39,070 --> 00:02:46,450 As we can see with these refactoring, we have moved all the HTP specific logic to one central service, 36 00:02:46,450 --> 00:02:53,590 making it very easy to call the same ERP operation in multiple parts of the application and also abstracting 37 00:02:53,590 --> 00:02:58,140 away the implementation detail, which is the ETP client itself. 38 00:02:58,150 --> 00:03:04,720 This component here only knows that the data is getting returned via an observable, but it does not 39 00:03:04,720 --> 00:03:06,700 know where the data came from. 40 00:03:06,850 --> 00:03:12,430 If it came from a backend, from a browser cache, these component is not aware of that. 41 00:03:12,430 --> 00:03:19,060 It simply knows that when the data is available, it's going to be emitted and received by the component 42 00:03:19,060 --> 00:03:20,530 via the observable. 43 00:03:20,770 --> 00:03:28,660 As you can see, isolating the logic in a custom injectable service is a good pattern to adopt in our 44 00:03:28,660 --> 00:03:29,560 applications. 45 00:03:29,710 --> 00:03:35,800 Our code at the level of our components, such as the application component, is going to become much 46 00:03:35,800 --> 00:03:41,890 more readable because a call to a method like, for example, load courses is much more descriptive 47 00:03:41,890 --> 00:03:43,300 than a typical. 48 00:03:43,480 --> 00:03:50,460 Besides the readability aspect, these logic might also be needed in several components of our application. 49 00:03:50,740 --> 00:03:58,460 So moving it into a common shared service is a great way of reusing the logic across components. 50 00:03:58,600 --> 00:04:02,170 Let's now continue the implementation of our courses service. 51 00:04:02,380 --> 00:04:09,760 We are now going to show how to use the HTP client to not only fetch data from the backend, but also 52 00:04:09,760 --> 00:04:10,810 to modify it.