This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Services Solution: Remote Endpoint" Lesson
[00:00:00]
>> We have the service, we've abstracted it out, but kind of this next level, this next piece that we need to kind of bake in, talking about stage management is ultimately in an application, what is the single source of truth? Well, it's not in the front end usually.
[00:00:20] Typically, it's within the database but exposed via some API, and so we definitely need the ability to communicate to a remote endpoint and perform actions. And so if we go into our application and this was kind of baked in from the beginning. But I wanna talk about first, how do you mock out a REST API?
[00:00:52] This is a really valuable tool that I've used quite a bit. And so using JSON server, the package, that you can then point to a JSON file, and so in this case, it's db.jason. And you can expose a data structure as a REST endpoint. And and I think if I look at my terminal, I'll see this up here, so localhost 3000, so let's go here, we save this.
[00:01:38] And let's just go into browser real quick so you can kinda see what this looks like. Here we go, so we have courses. And so now, we have this basically this REST endpoint just off of this JSON file. And so this is really, really handy when you wanna start building and developing an application locally.
[00:02:02] Now, I will say this is that I have worked on projects where the frontend team is working faster than the backend or the API team. Not a problem, but because we can agree on the data models, all we did is we basically spun up JSON server with some mock data that matched the native models that we agreed on, and we got our end working.
[00:02:28] And then when the API team was done, they just swapped out the endpoint and it just worked. So with that said, we are going to consume this endpoint, so let me close this down. And now, we're going to start to flesh out the courses service to actually communicate with the backend.
[00:02:54] And so in order to do that, the first thing that we need to do is we need to make sure that we're using the HTTP model, and so it is here. So typically, when you generate a CLI project, it will add this in, so this is the HTTP client module.
[00:03:17] And this makes it possible to make HTTP calls. So now, if we go into our courses service, we can start to migrate or transition this to instead of using kind of this home brewed functionality to, in fact us or make remote calls. So I'm going to inject HTTP quiet, and from here we can start to make call.
[00:03:54] So let me see real quick, I may have a slide for this but, I do. So let me just pull this over and just so we can see this in just from a high level. So if you're familiar with RESTful verbs, which is get, put, post, delete, patch, I really don't use requests with a very general one.
[00:04:28] And I don't think I've ever used head. But I definitely use get, post, put, and delete quite a bit. And so HTTP client essentially has these methods on it that match up to HTTP verbs, very, very convenient. And so I think it's just easier to see that as a list.
[00:04:53] And so from here, under all, what we're going to do is we're going to make a call this.http.get and you can see here, it's looking for some bit of information. Because this is a simple get, we need essentially to pass in a URL. So if we go back into our browser, I think I had localhost 3000 in this case courses.
[00:05:35] And there are some things you can do around this but we'll start nice and easy. I'm just going to do CONST BASE_URL. Typically, I would add this to like an environment config file. And so this is the the base URL, and that's not uppercase, there we go. And then what I'm going to do here is we're just gonna add in a property called model and we're dealing with courses.
[00:06:18] So this is an endpoint for the courses data model. And so what we can do now is we can construct this URL using base URL and this.model. Now, when I call this all, what it's going to do is it's going to make an HTTP call and then it's going to return an observable.
[00:06:53] So an observable is very much like a promise, except that instead of getting one value, it gets many, many values. And I absolutely love observables, this could be an entire frontend master's course. Wait, it is Jafar saying hi five, that changed my life and so there's a lot of power, there's a lot of things you can do with observables.
[00:07:18] I'm not going to have time to get into all of them. But do know that I think one of the other things that Angular got, right really, really right is by baking observables into the framework, making it very easy to be reactive because observables when something changes at the origination point, it pushes it out to anything that is consuming it.
[00:07:47] And so maybe if we have time, I may talk about that a bit more. But for now just know that sort of a promise, you're getting an observable. So if I go back to my courses component, now when we call this courses service, what we're going to get is a promise that we have to Resolve, so I can go .subscribe.
[00:08:19] And then from here I can go courses, this.courses = courses, all right? So let's save this. And let's see if indeed, Let's see if I get this right, I love this keyboard, there we go. So one thing I'm noticing in the template, I'll fix certainly not a deal breaker, but I somehow have duplicated that line, all right?
[00:09:05] So if we go back to our component here, refresh this, and we're seeing that it's loading, I think everything is okay. Let's look in the Network tab, let's do this one more time. And hopefully, what you'll see here is that we now have courses and it's doing a get request and calling courses.
[00:09:37] And then you can see the response here is that it's returning the object from the endpoint. The thing I like about RST by the way is that it is pretty conventional, so let's do create. Now when you create, you can do return this dot HTTP, for create I use post and we'll use the same URL.
[00:10:17] Now, what's interesting is my muscle memory, my spidey sense, is going off. And it's saying, you just duplicated this, like what's up? And so at this point, I'd go here, private getUrl, And return, This. And so this is a way for me to not have to duplicate this code.
[00:10:57] I think now when I find myself typing something more than once, especially in the same class, so that's where I kind of draw the line is there's there's three convention and duplication. In this case, it was very much duplication. And then what I also need to send is the payload which is course, so when we create the course then it's going to also send as that URL, it's going to pass the payload over the wire.
[00:11:32] So now, if we go here and, I'm just gonna go, subscribe, and let's just see what this is cuz I'm not for sure what exactly it is. And so this would depend on whatever server using whatever server you are using what the result could be, I've seen it vary.
[00:11:57] So console.log, COURSE CREATED. Result, okay, so of course created and let's dump out the result. So in our application, we'll go, Ryan is a demigod, that was a really good course by the way, 0% and let me pull up the console. Submit and course created. Now, if we look at the Network tab, preview so this is over the wire, what we're sending is title, all the stuff, etc and you'll notice that up at the top This is a post.
[00:13:08] Now, the response is we now have an ID. And so that's where I delineate between a new component or something I need to create or something I need to update. And so now one thing, we've created this, but it still doesn't exist. So there's a couple different ways that you can handle this.
[00:13:36] You can do optimistic or pessimistic loading. And so for instance, you can say I'm not going to update the UI until I'm certain that this operation has completed. You can do optimistic loading or an optimistic operation or say I'm going to update the UI, which is a better, more responsive user experience.
[00:14:00] But if something goes wrong, then you have to figure out how to go kind of undo that. So what I'm going to do is I'm going to do probably the easiest thing, and that is when this is completed, all I do is I just rehydrate the data structure in.
[00:14:26] In I think for very small data set, this is fine or something is basically is changing a lot of the server you kind of need to redehydrate that anyway. So now, I could see here like core services all I kind of need to use this again. So what I'll do is we'll extract this into or extract this rather, I guess abstract would probably work and we're going to create a load courses method and boom water ta.
[00:15:04] Now, what I'll do up here is this.loadcourses, cool. And now, because I've extracted that method, I can now come down here and just say load courses. What is this? There we go, okay, now let's try this one more time. Over here, refresh, I think we're good, it does exist.
[00:15:46] And so let's create a new one. What's the last course I watched? Do GraphQL for the masses. This was Scott Moss is the boss, I'm sure he's never heard that. And we'll submit, and notice, ta-da, hopefully we captured this, we did. Let me do it again, We'll do Creating a Course Empire, we'll call this Learning Empire.
[00:16:39] Mark G, gets it done, All right? So now, there we go. So we sent it over the wire, but then once I completed, then we went and we got the rest of it, so there we go. So on that note, I think we can infer on some level what it would take to finish, create, read.
[00:17:19] So we've done, read and create, what it would take to do update, and delete? And as well, there's a little bit of an issue here that I'm going to challenge everybody to think about how would I solve this? Notice I created this course, but it's still selected over here.
[00:17:45] How would we fix that? So let me check in what I have and then we will do a challenge.