Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,340 --> 00:00:05,310 Welcome to the last video of this project. 2 2 00:00:05,310 --> 00:00:09,120 And so, let's finish this section by learning a little bit 3 3 00:00:09,120 --> 00:00:13,120 about how we can write some documentation for our code, 4 4 00:00:13,120 --> 00:00:16,070 in order to make our code easy to understand 5 5 00:00:16,070 --> 00:00:18,130 also for other people, 6 6 00:00:18,130 --> 00:00:20,950 and then, at the end of the video, I will again 7 7 00:00:20,950 --> 00:00:23,780 show you some challenges and some improvements 8 8 00:00:23,780 --> 00:00:26,823 that you can implement on this application on your own. 9 9 00:00:28,690 --> 00:00:32,640 So, there is a standard way of writing documentation 10 10 00:00:32,640 --> 00:00:37,280 for JavaScript functions and that is called JSDocs. 11 11 00:00:37,280 --> 00:00:41,420 So, let me choose one function here for which 12 12 00:00:41,420 --> 00:00:45,140 I'm gonna write some documentation and that's going to be 13 13 00:00:45,140 --> 00:00:46,973 this render function. 14 14 00:00:47,980 --> 00:00:49,420 So this one. 15 15 00:00:49,420 --> 00:00:52,060 So of course I'm not gonna document now 16 16 00:00:52,060 --> 00:00:54,540 the entire code base, but let me just show you 17 17 00:00:54,540 --> 00:00:57,990 how it works with this function here. 18 18 00:00:57,990 --> 00:01:02,990 And, we can also go to JSDoc.app, for that's JSDoc.app, 19 19 00:01:08,840 --> 00:01:12,710 and so, here you can find some more information besides 20 20 00:01:12,710 --> 00:01:14,260 what I'm going to show you now. 21 21 00:01:15,110 --> 00:01:18,630 So to write documentation, we basically write a 22 22 00:01:18,630 --> 00:01:23,270 multiline comment like this, and then a second star, 23 23 00:01:23,270 --> 00:01:27,390 and then you see that automatically, a JSDoc comment 24 24 00:01:27,390 --> 00:01:29,380 is initialized here. 25 25 00:01:29,380 --> 00:01:32,680 And so, if we hit enter, then you see that already 26 26 00:01:33,840 --> 00:01:36,810 this has a prefilled some code here. 27 27 00:01:36,810 --> 00:01:37,860 You see? 28 28 00:01:37,860 --> 00:01:41,850 So data and render are actually already the parameters 29 29 00:01:41,850 --> 00:01:44,130 that we have here. 30 30 00:01:44,130 --> 00:01:47,090 So VS code automatically found them. 31 31 00:01:47,090 --> 00:01:48,110 Right? 32 32 00:01:48,110 --> 00:01:51,453 But let's start with a quick description of this function, 33 33 00:01:52,300 --> 00:01:57,300 let's say, render the received object to the DOM. 34 34 00:02:00,810 --> 00:02:03,220 Then here the data, we can describe it 35 35 00:02:03,220 --> 00:02:07,760 inside of this calibrasis, so we can say 36 36 00:02:07,760 --> 00:02:10,700 that we expect an object here, or, 37 37 00:02:10,700 --> 00:02:13,840 we also expect an array of objects. 38 38 00:02:13,840 --> 00:02:16,993 And so that is represented with the 'or' symbol here, 39 39 00:02:17,910 --> 00:02:20,743 and then again object, and then array. 40 40 00:02:21,640 --> 00:02:24,330 So again, this means that we are expecting 41 41 00:02:24,330 --> 00:02:26,460 an array of objects. 42 42 00:02:26,460 --> 00:02:29,250 Then this here is the name of the parameter 43 43 00:02:30,320 --> 00:02:32,810 and then here after that we can also write 44 44 00:02:32,810 --> 00:02:34,760 a short description. 45 45 00:02:34,760 --> 00:02:35,963 So the data, 46 46 00:02:38,980 --> 00:02:39,873 to be rendered. 47 47 00:02:41,160 --> 00:02:45,600 For example a recipe. Okay? 48 48 00:02:45,600 --> 00:02:48,530 Then we have render here as well, 49 49 00:02:48,530 --> 00:02:51,400 and so here again we can define its type, 50 50 00:02:51,400 --> 00:02:53,373 and this one is a Boolean. 51 51 00:02:54,350 --> 00:02:58,100 Now, this parameter is actually optional and so, 52 52 00:02:58,100 --> 00:03:02,660 we can put that here, inside of these brackets, 53 53 00:03:02,660 --> 00:03:06,170 and we can also specify then here, the default value 54 54 00:03:06,170 --> 00:03:07,063 like this. 55 55 00:03:09,660 --> 00:03:12,883 So, another description here, so if false, 56 56 00:03:13,830 --> 00:03:16,893 create markup string, 57 57 00:03:18,900 --> 00:03:21,683 instead of rendering to the DOM. 58 58 00:03:22,520 --> 00:03:26,331 Now, you might ask, what is the big advantage of this, 59 59 00:03:26,331 --> 00:03:28,900 and of course the most obvious one, is that 60 60 00:03:28,900 --> 00:03:31,530 if you're working with someone else on your project, 61 61 00:03:31,530 --> 00:03:34,360 they can now more easily understand what exactly 62 62 00:03:34,360 --> 00:03:36,110 your function is doing. 63 63 00:03:36,110 --> 00:03:39,510 Because, this standard way of writing it, 64 64 00:03:39,510 --> 00:03:41,290 everyone understands. 65 65 00:03:41,290 --> 00:03:44,950 Or at least everyone that is familiar with this 66 66 00:03:44,950 --> 00:03:47,030 JSDoc format. 67 67 00:03:47,030 --> 00:03:49,580 Because, if everyone describes their function 68 68 00:03:49,580 --> 00:03:52,600 in the same way, using this standard, then, 69 69 00:03:52,600 --> 00:03:55,670 that becomes really easy for everyone to understand 70 70 00:03:55,670 --> 00:03:57,573 the documentation of each other. 71 71 00:03:59,120 --> 00:04:02,510 Now what's also great about this, is that JavaScript 72 72 00:04:02,510 --> 00:04:05,900 or actually VS code, takes this data, 73 73 00:04:05,900 --> 00:04:08,220 and then when we hover over the function, 74 74 00:04:08,220 --> 00:04:12,170 it will take that data, and give us this nice overview 75 75 00:04:12,170 --> 00:04:13,223 of the function. 76 76 00:04:14,180 --> 00:04:16,920 So here you can see that parameter is data, 77 77 00:04:16,920 --> 00:04:20,200 and then with the description, and here the same, 78 78 00:04:20,200 --> 00:04:22,023 also to the script and for render, 79 79 00:04:23,040 --> 00:04:26,560 here we can also see that the render is optional, 80 80 00:04:26,560 --> 00:04:30,050 so we have this question mark, and it should be a Boolean. 81 81 00:04:30,050 --> 00:04:30,883 Okay? 82 82 00:04:30,883 --> 00:04:34,210 And then for the data, we can also see that it receives 83 83 00:04:34,210 --> 00:04:37,850 any or an array of any type. 84 84 00:04:37,850 --> 00:04:41,300 And the same happens when we, take a look at that 85 85 00:04:41,300 --> 00:04:42,603 in some other file. 86 86 00:04:44,160 --> 00:04:46,150 So it looks a little bit different, 87 87 00:04:46,150 --> 00:04:48,733 but the main information, is still here. 88 88 00:04:50,590 --> 00:04:51,490 Okay? 89 89 00:04:51,490 --> 00:04:53,550 But we can add more, than just 90 90 00:04:53,550 --> 00:04:55,860 the description of these parameters. 91 91 00:04:55,860 --> 00:04:59,780 For example, we can also write, or describe 92 92 00:04:59,780 --> 00:05:01,293 what this function returns. 93 93 00:05:02,630 --> 00:05:05,053 And so usually, it doesn't return anything, 94 94 00:05:06,020 --> 00:05:08,320 and so that's then undefined, but, 95 95 00:05:08,320 --> 00:05:10,360 it might also be a string. 96 96 00:05:10,360 --> 00:05:14,013 And so that in case, that render here is set to false. 97 97 00:05:15,480 --> 00:05:16,313 Right? 98 98 00:05:17,840 --> 00:05:22,713 Let's write that here, is returned, 99 99 00:05:24,810 --> 00:05:27,683 if render, is false. 100 100 00:05:28,760 --> 00:05:33,760 Next, we can also define the this keyword so, 101 101 00:05:33,800 --> 00:05:36,190 I think this is another interesting one, 102 102 00:05:36,190 --> 00:05:38,880 and so here the this keyword points, 103 103 00:05:38,880 --> 00:05:40,603 to the Vue object itself, 104 104 00:05:42,810 --> 00:05:45,013 so let's just write Vue object, 105 105 00:05:46,010 --> 00:05:47,573 so let's see what happens then. 106 106 00:05:49,080 --> 00:05:52,220 Oh and here, object is basically the description 107 107 00:05:53,690 --> 00:05:57,650 so here, it expects the type basically. 108 108 00:05:57,650 --> 00:06:00,577 So let's actually put here, that it is an object, 109 109 00:06:00,577 --> 00:06:04,170 and so then here we can say that it's a Vue, 110 110 00:06:04,170 --> 00:06:05,333 let's say instance. 111 111 00:06:08,250 --> 00:06:11,263 Alright, so that makes more sense. 112 112 00:06:12,170 --> 00:06:14,660 And here, you already can see that the function 113 113 00:06:14,660 --> 00:06:17,773 is going to return either undefined or a string. 114 114 00:06:19,530 --> 00:06:23,090 So let's try another one, and you see there are a lot of 115 115 00:06:23,090 --> 00:06:26,090 different options, and again, you can check them out 116 116 00:06:26,090 --> 00:06:28,970 in the website that I just told you, 117 117 00:06:28,970 --> 00:06:31,070 but another one that I like is the author, 118 118 00:06:33,050 --> 00:06:37,110 and so here you can put your own name, 119 119 00:06:37,110 --> 00:06:39,760 and just to finish, there is another one called todo, 120 120 00:06:40,680 --> 00:06:42,440 and so here we can specify, 121 121 00:06:42,440 --> 00:06:44,970 everything that we still need to do. 122 122 00:06:44,970 --> 00:06:48,903 Let's just say finish, the implementation. 123 123 00:06:50,170 --> 00:06:52,120 And so again, when we come here, 124 124 00:06:52,120 --> 00:06:54,710 it then contains all of this data, 125 125 00:06:54,710 --> 00:06:56,693 at the same, when we see it here. 126 126 00:06:58,840 --> 00:06:59,970 Alright? 127 127 00:06:59,970 --> 00:07:04,180 And so, in your own projects, you can go ahead and add, 128 128 00:07:04,180 --> 00:07:07,530 maybe not all of this but, at least part, 129 129 00:07:07,530 --> 00:07:09,130 to some of your functions. 130 130 00:07:09,130 --> 00:07:11,490 Like at least the most important ones 131 131 00:07:11,490 --> 00:07:13,860 so that when you come back to them, in like 132 132 00:07:13,860 --> 00:07:18,650 one or five years or so, that you can still know 133 133 00:07:18,650 --> 00:07:20,460 what exactly they do. 134 134 00:07:20,460 --> 00:07:24,450 And what data they get in and what hey output. 135 135 00:07:24,450 --> 00:07:28,120 Alright. And that's it for this project. 136 136 00:07:28,120 --> 00:07:31,380 Now, here in package.json, remember we also have 137 137 00:07:31,380 --> 00:07:35,340 this build command, so basically to actually build 138 138 00:07:35,340 --> 00:07:37,580 the final project files like 139 139 00:07:37,580 --> 00:07:40,520 with compression and tree shaking and all of that, 140 140 00:07:40,520 --> 00:07:43,000 before we then deploy it to a server. 141 141 00:07:43,000 --> 00:07:45,800 But we will actually do that in the next section 142 142 00:07:45,800 --> 00:07:48,360 and so for now, let's leave it like this 143 143 00:07:48,360 --> 00:07:51,223 and really call this application finished now. 144 144 00:07:52,970 --> 00:07:56,180 However, before we go, once again, 145 145 00:07:56,180 --> 00:08:00,130 I have a couple of ideas for features and improvements 146 146 00:08:00,130 --> 00:08:03,030 that you can implement in this application. 147 147 00:08:03,030 --> 00:08:06,240 So let's start with some easy changes and then 148 148 00:08:06,240 --> 00:08:09,183 all the way to really complex feature additions. 149 149 00:08:10,100 --> 00:08:13,820 So to start, you could display the number of pages 150 150 00:08:13,820 --> 00:08:16,820 between the two pagination buttons. 151 151 00:08:16,820 --> 00:08:19,890 And so with that, the user would then immediately know, 152 152 00:08:19,890 --> 00:08:22,770 how many ages there are, which is a little bit more 153 153 00:08:22,770 --> 00:08:24,570 user friendly. 154 154 00:08:24,570 --> 00:08:28,460 Also about the search results, you could add the ability, 155 155 00:08:28,460 --> 00:08:32,560 for the user to sort the search results by the duration 156 156 00:08:32,560 --> 00:08:36,990 or by the number of ingredients of the found recipes. 157 157 00:08:36,990 --> 00:08:39,920 However, that data is actually not available 158 158 00:08:39,920 --> 00:08:43,820 on the search results, well, unless I do some changes 159 159 00:08:43,820 --> 00:08:46,210 to the API I guess. 160 160 00:08:46,210 --> 00:08:49,560 So maybe I might do that so you can actually implement 161 161 00:08:49,560 --> 00:08:51,270 this idea here. 162 162 00:08:51,270 --> 00:08:55,140 Otherwise, you would have to basically get this information 163 163 00:08:55,140 --> 00:08:57,960 for all of the recipes in the search results 164 164 00:08:57,960 --> 00:09:00,650 but that that would require quite a lot of work 165 165 00:09:00,650 --> 00:09:04,120 and also a lot of API calls. 166 166 00:09:04,120 --> 00:09:08,070 Next, another thing that you could do, is to perform 167 167 00:09:08,070 --> 00:09:11,540 the validation of ingredients, right in the view 168 168 00:09:11,540 --> 00:09:14,700 so, before actually submitting the form. 169 169 00:09:14,700 --> 00:09:18,660 So for example, while the user is inputting the ingredients, 170 170 00:09:18,660 --> 00:09:22,220 you could warn the ahead of time, that for example 171 171 00:09:22,220 --> 00:09:23,710 the format is wrong. 172 172 00:09:23,710 --> 00:09:28,260 And so that would then again, be a little bit user friendly. 173 173 00:09:28,260 --> 00:09:31,960 Also, maybe alternatively, you could actually improve 174 174 00:09:31,960 --> 00:09:34,370 the input of the ingredients. 175 175 00:09:34,370 --> 00:09:38,170 So instead of having the quantity unit and description 176 176 00:09:38,170 --> 00:09:42,070 all in one field, you could add a different field for 177 177 00:09:42,070 --> 00:09:43,950 these three data points, 178 178 00:09:43,950 --> 00:09:47,030 and then read all that data into your application. 179 179 00:09:47,030 --> 00:09:50,470 And, besides that, you could also allow for more 180 180 00:09:50,470 --> 00:09:52,320 than six ingredients. 181 181 00:09:52,320 --> 00:09:55,410 So there's a lot to improve, I guess, 182 182 00:09:55,410 --> 00:09:58,300 here in the @recipe functionality. 183 183 00:09:58,300 --> 00:10:00,100 But of course here in the videos, 184 184 00:10:00,100 --> 00:10:03,430 I had to keep it kinda simple in order not to make 185 185 00:10:03,430 --> 00:10:05,133 like a 20 hour project. 186 186 00:10:06,210 --> 00:10:07,043 Okay. 187 187 00:10:07,043 --> 00:10:10,010 So these are some of the more simpler improvements 188 188 00:10:10,010 --> 00:10:12,450 you can make, and now, let's talk about 189 189 00:10:12,450 --> 00:10:15,620 four additional features that could be implemented 190 190 00:10:15,620 --> 00:10:17,380 in this application. 191 191 00:10:17,380 --> 00:10:21,060 And the first one would be a shopping list feature. 192 192 00:10:21,060 --> 00:10:24,440 So somewhere on each recipe, you could have a button 193 193 00:10:24,440 --> 00:10:28,010 which would then add all the ingredients of that recipe, 194 194 00:10:28,010 --> 00:10:29,950 to some kind of list. 195 195 00:10:29,950 --> 00:10:32,150 And so, you could then display that list 196 196 00:10:32,150 --> 00:10:36,930 on the user interface for example, in another hidden panel 197 197 00:10:36,930 --> 00:10:40,740 in the menu bar besides the bookmarks for example, 198 198 00:10:40,740 --> 00:10:44,120 and so that list would then contain all the ingredients 199 199 00:10:44,120 --> 00:10:47,240 that you might add from different recipes. 200 200 00:10:47,240 --> 00:10:50,173 And actually, the original version of Forkify, 201 201 00:10:50,173 --> 00:10:54,040 that I had in my previous course, had this functionality, 202 202 00:10:54,040 --> 00:10:57,300 but in this version too I had to remove that feature, 203 203 00:10:57,300 --> 00:11:01,530 in order to make place for the add recipe functionality 204 204 00:11:01,530 --> 00:11:05,493 which is new and which I think is way more important. 205 205 00:11:06,330 --> 00:11:09,450 Now, the next feature that you can try to implement, 206 206 00:11:09,450 --> 00:11:12,610 is a weekly meal planning feature. 207 207 00:11:12,610 --> 00:11:15,900 So, you can make this as crazy as you would like 208 208 00:11:15,900 --> 00:11:19,690 but, in the easiest form, you would simply assign recipes 209 209 00:11:19,690 --> 00:11:23,430 to the next seven days, and then show them somewhere 210 210 00:11:23,430 --> 00:11:25,470 on a weekly calender. 211 211 00:11:25,470 --> 00:11:29,370 And for this one, you could add like a drop down menu to 212 212 00:11:29,370 --> 00:11:31,970 each of the recipes and from there, 213 213 00:11:31,970 --> 00:11:35,530 choose which of the next seven days, you want to assign 214 214 00:11:35,530 --> 00:11:37,300 that recipe to. 215 215 00:11:37,300 --> 00:11:41,620 And then, in the menu bar, you could again have like a panel 216 216 00:11:41,620 --> 00:11:44,350 which shows the next seven days and then 217 217 00:11:44,350 --> 00:11:48,030 which of the recipes was assigned to each day. 218 218 00:11:48,030 --> 00:11:51,520 But of course you could make it also a lot more complex. 219 219 00:11:51,520 --> 00:11:53,960 This is just the first simple implementation 220 220 00:11:53,960 --> 00:11:55,283 that comes to my mind. 221 221 00:11:56,120 --> 00:12:00,060 And now finally, so, actually I have three features for you 222 222 00:12:00,060 --> 00:12:01,470 and not four. 223 223 00:12:01,470 --> 00:12:04,370 And this last one is the most complex one, 224 224 00:12:04,370 --> 00:12:08,670 and it is to get nutrition data, for each ingredient 225 225 00:12:08,670 --> 00:12:12,710 of a certain recipe from a special food API. 226 226 00:12:12,710 --> 00:12:15,570 And the best API for food that I know 227 227 00:12:15,570 --> 00:12:18,450 is the spoonacular API. 228 228 00:12:18,450 --> 00:12:20,630 So, you could check out their website, 229 229 00:12:20,630 --> 00:12:23,510 and their documentation, and from there, 230 230 00:12:23,510 --> 00:12:27,790 for each of the ingredients for example, get the calories. 231 231 00:12:27,790 --> 00:12:30,890 And then, you could calculate the total calories, 232 232 00:12:30,890 --> 00:12:34,750 of one recipe and maybe also per serving. 233 233 00:12:34,750 --> 00:12:39,060 And there is a lot of other different and interesting stuff 234 234 00:12:39,060 --> 00:12:42,930 that you could do, with this application together with the 235 235 00:12:42,930 --> 00:12:44,830 spoonacular API. 236 236 00:12:44,830 --> 00:12:47,490 So, the possibilities are endless here, 237 237 00:12:47,490 --> 00:12:49,470 if you want to have some fun. 238 238 00:12:49,470 --> 00:12:50,750 Alright? 239 239 00:12:50,750 --> 00:12:54,540 So, these are just some of my suggestions, but I'm sure 240 240 00:12:54,540 --> 00:12:57,240 that you can come up with even more. 241 241 00:12:57,240 --> 00:12:59,900 So, I've seen some really creative stuff from 242 242 00:12:59,900 --> 00:13:03,400 students of this course in other projects. 243 243 00:13:03,400 --> 00:13:05,500 And hopefully, you can come up with 244 244 00:13:05,500 --> 00:13:07,083 some of your own as well. 245 245 00:13:08,130 --> 00:13:11,220 And with this, we now actually reach the end 246 246 00:13:11,220 --> 00:13:15,040 of this biggest project, of this course. 247 247 00:13:15,040 --> 00:13:19,290 And I hope that you had as much fun building it, as I had 248 248 00:13:19,290 --> 00:13:22,820 while going through this, together with you. 249 249 00:13:22,820 --> 00:13:26,970 And this is really a great, great achievement. 250 250 00:13:26,970 --> 00:13:28,350 Really well done. 251 251 00:13:28,350 --> 00:13:30,280 Congratulations. 252 252 00:13:30,280 --> 00:13:33,340 So, even if you just coded along with me, 253 253 00:13:33,340 --> 00:13:36,430 you still learned a tremendous amount of skills 254 254 00:13:36,430 --> 00:13:40,580 throughout this project and of course throughout the entire 255 255 00:13:40,580 --> 00:13:45,400 last like 50 or 60 hours of course videos. 256 256 00:13:45,400 --> 00:13:49,080 And now, I would really love to see your implementation 257 257 00:13:49,080 --> 00:13:51,680 of at least a couple of these challenges 258 258 00:13:51,680 --> 00:13:53,430 that I just told you here. 259 259 00:13:53,430 --> 00:13:56,590 Because, I think that they will be really beneficial 260 260 00:13:56,590 --> 00:14:00,120 for your own learning and so maybe, you can take some hours 261 261 00:14:00,120 --> 00:14:03,610 when you have the time, and, really continue practicing 262 262 00:14:03,610 --> 00:14:05,150 your skills here. 263 263 00:14:05,150 --> 00:14:08,900 And, if you do that, please make sure to share 264 264 00:14:08,900 --> 00:14:12,580 some of your screenshots of the implementations that you do 265 265 00:14:12,580 --> 00:14:13,610 on twitter. 266 266 00:14:13,610 --> 00:14:16,120 So, I really would love to see that. 267 267 00:14:16,120 --> 00:14:20,340 But, anyway, it's actually not time to say goodbye 268 268 00:14:20,340 --> 00:14:23,880 to this project yet because in the next section, 269 269 00:14:23,880 --> 00:14:27,910 we will deploy this project onto a live server, 270 270 00:14:27,910 --> 00:14:30,420 so that you can share it with the world 271 271 00:14:30,420 --> 00:14:33,440 and like with everyone that you know. 272 272 00:14:33,440 --> 00:14:37,420 So, there is still a lot of interesting stuff to learn. 273 273 00:14:37,420 --> 00:14:40,810 So, when you're ready implementing these challenges, 274 274 00:14:40,810 --> 00:14:43,263 then let's go to the next section. 24210