1 00:00:00,140 --> 00:00:00,320 Okay. 2 00:00:00,470 --> 00:00:05,630 And once we're done discussing the new features, let's set up a basic crud. 3 00:00:05,660 --> 00:00:14,000 Now, if you're not familiar with crud, crud stands for create, read, update and delete. 4 00:00:14,270 --> 00:00:23,420 And in my opinion, essentially it's a most important building block regardless of the application you're 5 00:00:23,420 --> 00:00:27,620 creating, because everything else is basically built on top of it. 6 00:00:27,650 --> 00:00:30,230 And I want to start somewhat. 7 00:00:31,010 --> 00:00:37,100 Nice and easy and I want to build a Crud application with the local data. 8 00:00:37,130 --> 00:00:38,480 Now what do I mean by that? 9 00:00:38,480 --> 00:00:46,220 Eventually we will connect to our database and of course we'll create everything in a database and it's 10 00:00:46,220 --> 00:00:47,750 going to be persisted over there. 11 00:00:48,260 --> 00:00:53,930 But totally honestly, some of the functionality actually is going to be very similar to the local data. 12 00:00:53,930 --> 00:01:03,860 And in my opinion, it's very useful to set up the entire Crud application where we can create, read, 13 00:01:03,860 --> 00:01:08,030 find and delete jobs with the local data. 14 00:01:08,180 --> 00:01:14,990 And long story short, I just think that it's really going to help you grasp the entire concept. 15 00:01:15,020 --> 00:01:20,210 Now, in order to have some kind of data, we'll need to use the IDs. 16 00:01:20,300 --> 00:01:25,670 Basically, each item will have a unique ID and of course you can hardcode. 17 00:01:25,850 --> 00:01:28,790 And when it comes to our database, it will do for us. 18 00:01:28,790 --> 00:01:31,160 So we'll right away grab that ID. 19 00:01:31,670 --> 00:01:37,700 But for the local data, since I didn't want to type one two and then start calculating the values when 20 00:01:37,700 --> 00:01:45,050 we create the job, actually we'll install a nice package called Nano ID, which provides that unique 21 00:01:45,200 --> 00:01:50,400 ID and this is super useful if you want to use it in your applications, you can use it in the node 22 00:01:50,400 --> 00:01:51,150 project. 23 00:01:51,180 --> 00:01:54,480 You can use it actually also in React projects. 24 00:01:54,510 --> 00:02:01,470 It just provides a nice unique ID and that way again, you don't need to do any acrobatics. 25 00:02:01,500 --> 00:02:08,039 So long story short, in order to get started with nano ID package, you need to install it. 26 00:02:08,070 --> 00:02:12,630 We want to import it and then let's set up some local data again. 27 00:02:12,900 --> 00:02:18,060 Eventually, of course, we'll have more data and it's going to be stored in the database. 28 00:02:18,060 --> 00:02:20,490 But for now we simply want to start with three things. 29 00:02:20,520 --> 00:02:23,820 ID company and the position. 30 00:02:23,820 --> 00:02:28,800 And then we want to set up a route which essentially sends back all of the jobs. 31 00:02:28,950 --> 00:02:33,750 So let's say user requests all of the jobs, and we just nicely send it back. 32 00:02:33,750 --> 00:02:40,440 And also, as far as the setup, we'll be able to create the entire structure in the Thunder client. 33 00:02:40,440 --> 00:02:44,670 And this is something that I'm going to repeat probably 15 times during this video. 34 00:02:44,880 --> 00:02:53,450 The main ideas will stay exactly the same, whether it's a local data or it's a data stored. 35 00:02:54,200 --> 00:02:55,700 In the database. 36 00:02:55,730 --> 00:02:56,720 Hopefully that is clear. 37 00:02:56,720 --> 00:02:58,750 So let's navigate back to the server. 38 00:02:58,760 --> 00:03:04,610 Eventually we will of course set up the separate files and all that, but for now we just want to. 39 00:03:05,260 --> 00:03:07,600 Import the package first. 40 00:03:08,020 --> 00:03:15,880 Effectively, I'm looking for import, then we want to go with nano ID from nano ID and let's create 41 00:03:15,880 --> 00:03:18,140 that local array. 42 00:03:18,160 --> 00:03:19,780 So I'm going to close the sidebar. 43 00:03:19,780 --> 00:03:21,330 I'm going to call this jobs. 44 00:03:21,340 --> 00:03:25,440 Essentially it's a jobs array and we just want to provide it. 45 00:03:25,450 --> 00:03:31,510 So we're going to go here with ID in order to get the unique ID, we simply need to invoke it. 46 00:03:31,540 --> 00:03:34,150 Of course, if you want to log, you can do it. 47 00:03:34,150 --> 00:03:38,410 But remember, we'll be sending back those jobs, so you'll clearly see the values anyway. 48 00:03:38,440 --> 00:03:42,190 Now, as far as the company, I'm not going to be particularly original. 49 00:03:42,190 --> 00:03:44,380 I'm just going to go with Apple because why not? 50 00:03:44,380 --> 00:03:48,400 And then position is going to be equal to front end. 51 00:03:48,870 --> 00:03:49,810 Beautiful. 52 00:03:50,410 --> 00:03:52,150 Let's save let's copy and paste. 53 00:03:52,330 --> 00:03:54,040 Let's add here a comma. 54 00:03:54,430 --> 00:03:56,110 This one stays the same again. 55 00:03:56,110 --> 00:03:58,560 They will be unique and you'll see that in a second. 56 00:03:58,570 --> 00:04:00,670 And then we want to go with Google. 57 00:04:01,800 --> 00:04:03,840 And position is going to be backhand. 58 00:04:03,900 --> 00:04:10,740 And once we have the array in place, now we want to set up a route which essentially is going to serve 59 00:04:10,740 --> 00:04:12,120 all of the jobs. 60 00:04:12,510 --> 00:04:18,070 Again, at this point, it doesn't really matter where we place it because we will remove the post eventually. 61 00:04:18,089 --> 00:04:22,110 So I'll place it right after both of the requests. 62 00:04:22,140 --> 00:04:26,010 We're going to go with App and what is the method we're going to use? 63 00:04:26,010 --> 00:04:29,520 Well, get since we're providing those jobs. 64 00:04:29,520 --> 00:04:30,060 So. 65 00:04:30,860 --> 00:04:35,030 Anyone can access those jobs with a get method. 66 00:04:35,030 --> 00:04:38,330 And then we need to decide on the URL. 67 00:04:38,490 --> 00:04:43,660 In my case, I'm going to go with API version one and then the jobs. 68 00:04:43,670 --> 00:04:49,760 So effectively this is going to be the starting point for all of our requests. 69 00:04:49,760 --> 00:04:53,990 And this is quite common because that way you can control the versions. 70 00:04:53,990 --> 00:04:58,850 And also keep in mind that normally on a server there's more than just an API. 71 00:04:59,030 --> 00:05:01,310 So this is very useful to distinguish. 72 00:05:01,310 --> 00:05:07,640 Okay, so these are going to be my API requests and then I have, I don't know, something else on the 73 00:05:07,640 --> 00:05:09,860 server, some other resource. 74 00:05:09,890 --> 00:05:12,230 And lastly, we just add here jobs. 75 00:05:12,230 --> 00:05:20,000 So the full URL is going to be the domain then API forward slash version one forward slash and then 76 00:05:20,000 --> 00:05:20,630 the jobs. 77 00:05:20,630 --> 00:05:26,480 So this is a get request to get all jobs and then of course we'll work on the rest of them as well. 78 00:05:26,810 --> 00:05:32,700 Again, we have our route controller and here we want to go req and res. 79 00:05:32,730 --> 00:05:36,930 And as far as the response, let's go with res then. 80 00:05:36,960 --> 00:05:41,340 This is technically an optional, but it's a good practice to add the status. 81 00:05:41,370 --> 00:05:44,520 Or essentially you're saying, well, what is the status of requests? 82 00:05:44,520 --> 00:05:49,100 So if I'm sending back 200, that means that everything went smoothly. 83 00:05:49,110 --> 00:05:54,180 If I'm going to go with 404, then in that case it's a resource not found. 84 00:05:54,180 --> 00:05:58,740 And of course, we'll cover those other options as we're working on this project. 85 00:05:58,860 --> 00:06:01,320 And I want to send this back as a Json response. 86 00:06:01,320 --> 00:06:07,740 So I'm going to go with dot Json and effectively I'm sending back an object and in there there's going 87 00:06:07,740 --> 00:06:14,490 to be a jobs property which is going to be equal to my local data. 88 00:06:14,490 --> 00:06:22,650 And with this in place we want to navigate to a Thunder client and we want to set up a collection because 89 00:06:22,650 --> 00:06:30,000 essentially we want to create quite a few requests and it's nice if we can structure them, right? 90 00:06:30,000 --> 00:06:31,890 So technically, again, this is optional. 91 00:06:31,890 --> 00:06:40,830 You don't have to do it, but this is really going to make things easier later on as your project grows. 92 00:06:40,830 --> 00:06:48,540 So we want to go here with new collection and I'm going to call this job fi recording since I already 93 00:06:48,540 --> 00:06:49,530 have one. 94 00:06:49,530 --> 00:06:53,910 While I was creating the application and inside of the recording. 95 00:06:53,910 --> 00:06:55,920 Let's go with new folder. 96 00:06:56,630 --> 00:06:58,510 And we'll call this job route. 97 00:06:58,520 --> 00:07:05,720 So in this folder, we'll keep all of the routes that do something with the jobs, whether that is to 98 00:07:05,720 --> 00:07:08,510 get the jobs, create a job and all that. 99 00:07:08,510 --> 00:07:16,490 And then inside of the job routes, we want to create a new request and we're going to go with get all 100 00:07:16,490 --> 00:07:17,270 jobs. 101 00:07:17,690 --> 00:07:24,740 And like I keep saying, we can technically copy and paste the URL each and every time we create the 102 00:07:24,770 --> 00:07:27,140 new request with the Thunder client. 103 00:07:27,140 --> 00:07:32,150 But a better option is to create the Env variable. 104 00:07:32,150 --> 00:07:37,760 So first let's just set up a request and then we'll set up that value as env variable. 105 00:07:37,760 --> 00:07:43,460 So it's much easier for us to reuse it in our upcoming requests. 106 00:07:43,460 --> 00:07:44,480 So for now. 107 00:07:45,210 --> 00:07:47,190 I'm going to go back to the get one. 108 00:07:47,220 --> 00:07:52,590 Basically, the first request we made, again, we're looking for this get all jobs. 109 00:07:52,590 --> 00:07:57,690 Then remember, it's API version one forward slash end jobs. 110 00:07:57,720 --> 00:08:02,820 And if everything is correct, we should see this array in the response. 111 00:08:02,820 --> 00:08:08,160 And notice how nano ID package adds these unique IDs. 112 00:08:08,280 --> 00:08:18,740 And then let's take everything up to a jobs so effectively localhost 5100 API version one. 113 00:08:18,750 --> 00:08:20,060 Let's cut it out. 114 00:08:20,070 --> 00:08:21,540 Let's go to Env. 115 00:08:22,020 --> 00:08:24,720 We have multiple options, but I'm going to go with Global one. 116 00:08:24,720 --> 00:08:26,040 So let's click on it. 117 00:08:26,070 --> 00:08:28,170 We want to come up with the variable name. 118 00:08:28,170 --> 00:08:32,370 In my case I'm going to go with URL, then let's copy and paste. 119 00:08:32,370 --> 00:08:34,679 So this is going to be the value. 120 00:08:35,039 --> 00:08:39,600 Let's save it over here and then let me navigate back to all jobs. 121 00:08:39,600 --> 00:08:41,760 And I think I can close this one at this point. 122 00:08:42,030 --> 00:08:44,910 And instead of hard coding or. 123 00:08:45,470 --> 00:08:46,880 Copying this value. 124 00:08:46,910 --> 00:08:49,340 We simply want to go with double curlies. 125 00:08:49,340 --> 00:08:51,680 And right over here, Earl. 126 00:08:51,710 --> 00:08:53,330 Yeah, that's the syntax. 127 00:08:53,330 --> 00:08:54,560 So double curly. 128 00:08:54,590 --> 00:08:56,330 Then the name of the variable. 129 00:08:57,310 --> 00:08:58,000 Then send. 130 00:08:58,000 --> 00:09:01,210 And if everything is correct, we should get the same response. 131 00:09:01,210 --> 00:09:10,450 So now we have successfully set up our first route to read, basically to allow the user to read all 132 00:09:10,450 --> 00:09:12,490 the jobs, to access all the jobs. 133 00:09:12,490 --> 00:09:14,110 So we have our local data. 134 00:09:14,140 --> 00:09:19,540 This is a get request and the URL is API version one jobs. 135 00:09:19,540 --> 00:09:25,180 And once we hit this URL and as a side note, we can actually do it in the. 136 00:09:26,600 --> 00:09:27,500 Browser as well. 137 00:09:27,500 --> 00:09:28,680 So let me go over here. 138 00:09:28,700 --> 00:09:31,610 API version one and jobs. 139 00:09:31,610 --> 00:09:39,230 And remember, by default browsers perform get request and therefore in the browser I'll see my Json 140 00:09:39,230 --> 00:09:39,860 data. 141 00:09:39,860 --> 00:09:43,730 And if you have the same result, we can move on to the next step.