1 00:00:02,170 --> 00:00:05,600 Now, being able to create and edit, 2 00:00:05,600 --> 00:00:09,240 and delete todos, here, with help of Vue.js 3 00:00:09,240 --> 00:00:13,030 and our browser is great because now we understood 4 00:00:13,030 --> 00:00:16,077 the basics of Vue.js, and you can hopefully see 5 00:00:16,077 --> 00:00:20,600 why using a framework like Vue.js can be very helpful 6 00:00:20,600 --> 00:00:25,055 when you're building a JavaScript-driven web interface. 7 00:00:25,055 --> 00:00:28,200 A user interface, running in the browser, 8 00:00:28,200 --> 00:00:30,716 which heavily relies on JavaScript. 9 00:00:30,716 --> 00:00:35,109 Vue.js, as you can see here, can really help you with that. 10 00:00:35,109 --> 00:00:38,990 But of course, this interface doesn't use 11 00:00:38,990 --> 00:00:41,010 any API. 12 00:00:41,010 --> 00:00:45,210 And before in the course, in the previous course section 13 00:00:45,210 --> 00:00:49,706 where we built the API, I, of course, wrote JavaScript code 14 00:00:49,706 --> 00:00:53,711 that ultimately did not just update the UI, 15 00:00:53,711 --> 00:00:58,711 but which also sent HTTP requests to our API. 16 00:00:59,360 --> 00:01:02,670 And I wanna get back to that, and I now want to connect 17 00:01:02,670 --> 00:01:07,670 this Vue.js code to this API we worked on before. 18 00:01:08,086 --> 00:01:11,270 Now, therefore, I started that API 19 00:01:11,270 --> 00:01:13,820 from the last course section again, 20 00:01:13,820 --> 00:01:17,360 and therefore, I also started my MongoDB database again 21 00:01:17,360 --> 00:01:20,680 so that I have this server up and running, 22 00:01:20,680 --> 00:01:24,460 and I have my API web server up and running here 23 00:01:24,460 --> 00:01:28,470 with help of nodemon and thanks to npm start. 24 00:01:28,470 --> 00:01:31,150 And with that all up and running, of course, 25 00:01:31,150 --> 00:01:35,860 now I can connect my Vue.js code to that API 26 00:01:35,860 --> 00:01:38,570 so that when we do add a newTodo, 27 00:01:38,570 --> 00:01:41,125 we don't just add that locally, 28 00:01:41,125 --> 00:01:46,125 but also on our server by sending a request to that API. 29 00:01:47,910 --> 00:01:51,840 And therefore, let's actually start with that case 30 00:01:51,840 --> 00:01:54,824 that we are creating a newTodo, 31 00:01:54,824 --> 00:01:56,913 which you wanna add to our API. 32 00:01:58,265 --> 00:02:01,750 For this, I wanna send a request to my backend, 33 00:02:01,750 --> 00:02:03,970 and if we have a look at it todos.js, 34 00:02:03,970 --> 00:02:05,800 which is that old code, 35 00:02:05,800 --> 00:02:08,979 which we wrote in the previous core section, 36 00:02:08,979 --> 00:02:13,410 we see that in the end here in createTodo in todos.js, 37 00:02:13,410 --> 00:02:18,220 I have this code here for sending a request to the API, 38 00:02:18,220 --> 00:02:21,360 for handling the response, for getting the ID 39 00:02:21,360 --> 00:02:24,640 of the createdTodo, and then using that ID 40 00:02:24,640 --> 00:02:27,253 to create a new todo list item in the DOM. 41 00:02:28,190 --> 00:02:30,720 And therefore, generally, 42 00:02:30,720 --> 00:02:35,070 I want to copy that code for sending my request, 43 00:02:35,070 --> 00:02:37,410 including the try-catch code here. 44 00:02:37,410 --> 00:02:42,240 I'll copy all of that and go back to app JS to my view JS 45 00:02:42,240 --> 00:02:43,180 code. 46 00:02:43,180 --> 00:02:44,370 And here, indeed, 47 00:02:44,370 --> 00:02:47,350 I want to execute that code in this L's branch, 48 00:02:47,350 --> 00:02:49,940 where we are creating a newTodo. 49 00:02:50,840 --> 00:02:55,160 Now you could create a new function outside of this Vue app 50 00:02:55,160 --> 00:02:59,740 object or a new method here to split your code 51 00:02:59,740 --> 00:03:01,870 and to not have all the code in here, 52 00:03:01,870 --> 00:03:05,423 but I will actually paste it all in here. 53 00:03:06,710 --> 00:03:10,260 Now, therefore I'll leave that newTodo for the moment, 54 00:03:10,260 --> 00:03:13,980 but between that and pushing it, I will add that code, 55 00:03:13,980 --> 00:03:18,980 which I just copied with all that try-catch code and so on. 56 00:03:19,290 --> 00:03:21,930 So that I create this response variable. 57 00:03:21,930 --> 00:03:26,300 Then I try sending a request to my API, a post request, 58 00:03:26,300 --> 00:03:30,380 and now we'll have to make sure that I sent the proper text 59 00:03:30,380 --> 00:03:32,103 here. The todo text. 60 00:03:33,160 --> 00:03:34,180 Now that of course means 61 00:03:34,180 --> 00:03:36,930 that I want to use my enteredTodo text 62 00:03:36,930 --> 00:03:39,820 And therefore I'll copy this enteredTodo text 63 00:03:39,820 --> 00:03:41,580 and use this for the text, 64 00:03:41,580 --> 00:03:43,833 which will be part of the request body. 65 00:03:45,780 --> 00:03:50,600 Then here I have the headers, I catch potential errors. 66 00:03:50,600 --> 00:03:52,770 Also, if my response code, 67 00:03:52,770 --> 00:03:57,770 my status code of the response should not be a 200 ish code. 68 00:03:58,000 --> 00:04:01,763 And then I want to continue with the response data. 69 00:04:03,030 --> 00:04:06,936 Now that's actually where I will delete this newTodo or 70 00:04:06,936 --> 00:04:09,653 where I will cut this newTodo up there. 71 00:04:11,040 --> 00:04:12,290 And instead now, 72 00:04:12,290 --> 00:04:16,394 if I go down to the bottom here after extracting 73 00:04:16,394 --> 00:04:19,952 the response data, I now want to create my newTodo, 74 00:04:20,970 --> 00:04:24,320 and the text should be the enteredTodo text, 75 00:04:24,320 --> 00:04:28,220 but here the ID will not be some pseudo unique ID, 76 00:04:28,220 --> 00:04:30,840 which I generate with help of the date. 77 00:04:30,840 --> 00:04:33,160 But instead I'll use that todo ID, 78 00:04:33,160 --> 00:04:35,313 which I get back from the response here. 79 00:04:36,190 --> 00:04:39,750 And of course, we could also do that in one line like this, 80 00:04:39,750 --> 00:04:41,523 without that extra const, 81 00:04:44,385 --> 00:04:48,140 This will now add a newTodo and then I pushed this newTodo. 82 00:04:48,140 --> 00:04:53,140 But since I await parsing the response data and awaiting the 83 00:04:53,200 --> 00:04:56,530 response in general, this to-do will only be added. 84 00:04:56,530 --> 00:05:00,773 once I have that response from the HTTP request I sent. 85 00:05:02,070 --> 00:05:04,000 Therefore, now, if we save everything, 86 00:05:04,000 --> 00:05:07,698 if we go back and we reload this page here, 87 00:05:07,698 --> 00:05:12,060 we get this code right now, because if I opened a console, 88 00:05:12,060 --> 00:05:17,060 I got an error, a wait is only valid in async functions. 89 00:05:17,540 --> 00:05:20,790 So I see this placeholder because of Vue didn't become 90 00:05:20,790 --> 00:05:24,040 active because I have an error in my code. 91 00:05:24,040 --> 00:05:26,130 Indeed, I'm using the await keyword 92 00:05:26,130 --> 00:05:29,500 and just as before in all the other parts of the course, 93 00:05:29,500 --> 00:05:33,220 we have to add the async keyword in front of this 94 00:05:33,220 --> 00:05:34,520 saveTodo method. 95 00:05:34,520 --> 00:05:38,890 Therefore that's always the same because it's really, 96 00:05:38,890 --> 00:05:43,000 really, really important to understand that with Vue.js, 97 00:05:43,000 --> 00:05:46,950 you still write regular JavaScript code in the end. 98 00:05:46,950 --> 00:05:50,710 So all those JavaScript rules still apply. 99 00:05:50,710 --> 00:05:54,110 There are some vue, specific behaviors and features, 100 00:05:54,110 --> 00:05:56,000 which you can use, but the general 101 00:05:56,000 --> 00:05:58,503 JavaScript rules still apply. 102 00:06:00,129 --> 00:06:03,150 Therefore now, if we saved this, that's gone. 103 00:06:03,150 --> 00:06:07,400 And if I now try adding a newTodo here or be more specific 104 00:06:07,400 --> 00:06:10,120 and say, learn Vue.js. 105 00:06:10,120 --> 00:06:13,100 If I click save, it's added here, 106 00:06:13,100 --> 00:06:16,700 I have no error here in the console and it should now be 107 00:06:16,700 --> 00:06:18,543 part of my database. 108 00:06:19,580 --> 00:06:21,350 Indeed, to verify that 109 00:06:21,350 --> 00:06:26,350 I'll start my Mongo shell and use my second API database. 110 00:06:28,090 --> 00:06:32,090 And then there, I can reach out to, todo's and call find. 111 00:06:32,090 --> 00:06:35,380 And in there I have this new learn Vue.js todo, 112 00:06:35,380 --> 00:06:36,563 which was added. 113 00:06:38,620 --> 00:06:40,660 So that was added. 114 00:06:40,660 --> 00:06:44,160 That's how we can send such a post request. Now, of course, 115 00:06:44,160 --> 00:06:48,380 we also want to make sure that if we reload this page or 116 00:06:48,380 --> 00:06:52,640 we visit this page for the first time that we load all the 117 00:06:52,640 --> 00:06:53,923 Todos that we got.