1 00:00:00,990 --> 00:00:07,380 And believe it or not, we're actually done with our basic setup as far as the API. 2 00:00:07,860 --> 00:00:15,510 And in order to showcase that, I'll simply go back to Abcess and I want to serve my static files because 3 00:00:15,510 --> 00:00:17,730 this is where my app is sitting. 4 00:00:17,940 --> 00:00:23,880 And of course, since our API is up and running, we can simply set up those static files. 5 00:00:24,120 --> 00:00:27,500 The app and the functionality should work. 6 00:00:27,840 --> 00:00:33,990 And if you remember, in order to serve static files, we need to use another middleware and we're going 7 00:00:33,990 --> 00:00:39,240 to go with app that use of Paskin Express and the name is Static. 8 00:00:39,420 --> 00:00:43,680 And then in here we just simply need to say where these static files are located. 9 00:00:43,830 --> 00:00:47,420 And in our case, of course, that is in the public folder. 10 00:00:47,850 --> 00:00:52,830 And let me just say that if your code is exactly like mine. 11 00:00:53,720 --> 00:00:59,080 Everything is going to work now back in the U.S., I don't think we need that one anymore. 12 00:00:59,510 --> 00:01:02,870 So let me remove this one for the roots. 13 00:01:03,350 --> 00:01:06,230 I won't just leave the version one and then tasks. 14 00:01:06,650 --> 00:01:14,270 And then if I go to localhost three thousand and I remove that hollow, I should see my job. 15 00:01:14,510 --> 00:01:19,190 And I can clearly see that these are all the tasks that I currently have. 16 00:01:19,430 --> 00:01:23,520 And if I want a new one, I'm just going to say testing app. 17 00:01:23,870 --> 00:01:28,040 And once had of course I have all the way worrying the bottom a testing app. 18 00:01:28,190 --> 00:01:31,220 Well, effectively I have to part with right away. 19 00:01:31,220 --> 00:01:33,060 I can also practice on deleting. 20 00:01:33,560 --> 00:01:34,450 So there it is. 21 00:01:34,460 --> 00:01:38,450 Now I can delete the items all the way to your second task. 22 00:01:38,750 --> 00:01:42,290 But if I want to see the single desk, just click over here. 23 00:01:43,160 --> 00:01:46,250 Now I have the task as well, a second task. 24 00:01:46,550 --> 00:01:53,300 And eventually, if I want to edit, well, I just click here on Completed and I'll say third task. 25 00:01:54,260 --> 00:01:58,350 Their task, and if everything is correct, we should see task at it. 26 00:01:58,760 --> 00:02:04,540 Now I still need to fix the cows, but as long as you see the correct text, you should be in good shape. 27 00:02:04,550 --> 00:02:06,740 Now, of course, by the time you're watching this, I'll fix this. 28 00:02:07,070 --> 00:02:08,070 But the idea is following. 29 00:02:08,180 --> 00:02:13,240 If I try to edit the item without providing the name now, of course, I'll get error. 30 00:02:13,280 --> 00:02:14,300 Please try again. 31 00:02:14,450 --> 00:02:16,580 I just need to fix the access point. 32 00:02:16,580 --> 00:02:22,930 Essentially, if I'm successful, I still get this red color and then once I get back. 33 00:02:23,240 --> 00:02:25,100 Now, these are going to be my task. 34 00:02:25,550 --> 00:02:30,470 If you're interested in the actual app, just navigate through the public one. 35 00:02:30,830 --> 00:02:36,740 You'll see that I used Vanilla Jarius just so everyone can be on the same page. 36 00:02:37,130 --> 00:02:43,430 And essentially, as far as the logic, you're looking for browser objects and I'm not going to show 37 00:02:43,430 --> 00:02:44,510 you the entire thing. 38 00:02:44,510 --> 00:02:50,750 But as far as submitting the new task, I'm just listening for submit event. 39 00:02:51,080 --> 00:02:58,010 Then I prevent a default, looking for the value in the input and notice that I'm using the actual library 40 00:02:58,430 --> 00:02:59,740 and check out the method. 41 00:03:00,230 --> 00:03:01,190 What is the method name? 42 00:03:01,560 --> 00:03:03,050 That is why? 43 00:03:03,590 --> 00:03:07,460 Because that's how we can pass data onto the server. 44 00:03:07,470 --> 00:03:07,870 Correct. 45 00:03:08,180 --> 00:03:10,930 Now what is the URL that should be familiar? 46 00:03:11,270 --> 00:03:18,160 We have API version one and then of course I'm looking for the tasks and in here I pass in the data. 47 00:03:18,860 --> 00:03:22,490 So unlike the postman where we were doing that manually. 48 00:03:22,490 --> 00:03:26,330 Now of course I just grab the input and I'll pass it in. 49 00:03:26,510 --> 00:03:32,420 And if you remember, the completed was set to force right from the get go. 50 00:03:32,750 --> 00:03:34,310 So I don't need to worry about that. 51 00:03:34,310 --> 00:03:35,780 I just need to pass in the name. 52 00:03:36,230 --> 00:03:39,320 And again, everything is in Trie catch. 53 00:03:39,740 --> 00:03:49,100 So if I'm successful and of course what happens, well then I am the correct alerts and all that and 54 00:03:49,100 --> 00:03:52,060 then I just refresh one more time tasks. 55 00:03:52,460 --> 00:03:59,270 Now if I'm getting the error then of course a lot of different alerts and hopefully I get the gist. 56 00:03:59,600 --> 00:04:02,540 And just lastly, showcase the delete one. 57 00:04:03,020 --> 00:04:07,400 If we scroll up a little bit, notice the method here. 58 00:04:07,760 --> 00:04:12,230 And like I previously mentioned, the only thing I'm looking for here is the response. 59 00:04:12,890 --> 00:04:19,339 If everything is correct, if I have two hundred awesome, I just refresh all the task. 60 00:04:19,490 --> 00:04:24,200 If not, then there's an error and essentially I don't remove it from my thumb. 61 00:04:24,380 --> 00:04:30,830 That's why I said that technically, when you're set up for the delete, in most cases, you're not 62 00:04:30,830 --> 00:04:34,130 going to have to send back that item that you're removing. 63 00:04:34,460 --> 00:04:41,180 And now it's simply about making this app better because, yes, we have the core functionality in place. 64 00:04:41,510 --> 00:04:45,560 We can definitely test it out on the front end and everything is awesome. 65 00:04:45,920 --> 00:04:48,740 But there's some things that we would want to fix. 66 00:04:48,950 --> 00:04:51,650 For example, I want to remove all these try catch blocks. 67 00:04:51,890 --> 00:04:53,960 I don't want to repeat myself in such a way. 68 00:04:54,140 --> 00:04:59,540 I also want to set up one place where we're dealing with errors and other improvements. 69 00:04:59,780 --> 00:05:03,890 So in the following videos, we'll make our app better. 70 00:05:04,220 --> 00:05:06,200 So we have the core functionality in place. 71 00:05:06,410 --> 00:05:08,090 Now we just want to make it better.