WEBVTT 1 00:00:01.340 --> 00:00:05.310 Welcome to the last video of this project. 2 00:00:05.310 --> 00:00:09.120 And so, let's finish this section by learning a little bit 3 00:00:09.120 --> 00:00:13.120 about how we can write some documentation for our code, 4 00:00:13.120 --> 00:00:16.070 in order to make our code easy to understand 5 00:00:16.070 --> 00:00:18.130 also for other people, 6 00:00:18.130 --> 00:00:20.950 and then, at the end of the video, I will again 7 00:00:20.950 --> 00:00:23.780 show you some challenges and some improvements 8 00:00:23.780 --> 00:00:26.823 that you can implement on this application on your own. 9 00:00:28.690 --> 00:00:32.640 So, there is a standard way of writing documentation 10 00:00:32.640 --> 00:00:37.280 for JavaScript functions and that is called JSDocs. 11 00:00:37.280 --> 00:00:41.420 So, let me choose one function here for which 12 00:00:41.420 --> 00:00:45.140 I'm gonna write some documentation and that's going to be 13 00:00:45.140 --> 00:00:46.973 this render function. 14 00:00:47.980 --> 00:00:49.420 So this one. 15 00:00:49.420 --> 00:00:52.060 So of course I'm not gonna document now 16 00:00:52.060 --> 00:00:54.540 the entire code base, but let me just show you 17 00:00:54.540 --> 00:00:57.990 how it works with this function here. 18 00:00:57.990 --> 00:01:02.990 And, we can also go to JSDoc.app, for that's JSDoc.app, 19 00:01:08.840 --> 00:01:12.710 and so, here you can find some more information besides 20 00:01:12.710 --> 00:01:14.260 what I'm going to show you now. 21 00:01:15.110 --> 00:01:18.630 So to write documentation, we basically write a 22 00:01:18.630 --> 00:01:23.270 multiline comment like this, and then a second star, 23 00:01:23.270 --> 00:01:27.390 and then you see that automatically, a JSDoc comment 24 00:01:27.390 --> 00:01:29.380 is initialized here. 25 00:01:29.380 --> 00:01:32.680 And so, if we hit enter, then you see that already 26 00:01:33.840 --> 00:01:36.810 this has a prefilled some code here. 27 00:01:36.810 --> 00:01:37.860 You see? 28 00:01:37.860 --> 00:01:41.850 So data and render are actually already the parameters 29 00:01:41.850 --> 00:01:44.130 that we have here. 30 00:01:44.130 --> 00:01:47.090 So VS code automatically found them. 31 00:01:47.090 --> 00:01:48.110 Right? 32 00:01:48.110 --> 00:01:51.453 But let's start with a quick description of this function, 33 00:01:52.300 --> 00:01:57.300 let's say, render the received object to the DOM. 34 00:02:00.810 --> 00:02:03.220 Then here the data, we can describe it 35 00:02:03.220 --> 00:02:07.760 inside of this calibrasis, so we can say 36 00:02:07.760 --> 00:02:10.700 that we expect an object here, or, 37 00:02:10.700 --> 00:02:13.840 we also expect an array of objects. 38 00:02:13.840 --> 00:02:16.993 And so that is represented with the 'or' symbol here, 39 00:02:17.910 --> 00:02:20.743 and then again object, and then array. 40 00:02:21.640 --> 00:02:24.330 So again, this means that we are expecting 41 00:02:24.330 --> 00:02:26.460 an array of objects. 42 00:02:26.460 --> 00:02:29.250 Then this here is the name of the parameter 43 00:02:30.320 --> 00:02:32.810 and then here after that we can also write 44 00:02:32.810 --> 00:02:34.760 a short description. 45 00:02:34.760 --> 00:02:35.963 So the data, 46 00:02:38.980 --> 00:02:39.873 to be rendered. 47 00:02:41.160 --> 00:02:45.600 For example a recipe. Okay? 48 00:02:45.600 --> 00:02:48.530 Then we have render here as well, 49 00:02:48.530 --> 00:02:51.400 and so here again we can define its type, 50 00:02:51.400 --> 00:02:53.373 and this one is a Boolean. 51 00:02:54.350 --> 00:02:58.100 Now, this parameter is actually optional and so, 52 00:02:58.100 --> 00:03:02.660 we can put that here, inside of these brackets, 53 00:03:02.660 --> 00:03:06.170 and we can also specify then here, the default value 54 00:03:06.170 --> 00:03:07.063 like this. 55 00:03:09.660 --> 00:03:12.883 So, another description here, so if false, 56 00:03:13.830 --> 00:03:16.893 create markup string, 57 00:03:18.900 --> 00:03:21.683 instead of rendering to the DOM. 58 00:03:22.520 --> 00:03:26.331 Now, you might ask, what is the big advantage of this, 59 00:03:26.331 --> 00:03:28.900 and of course the most obvious one, is that 60 00:03:28.900 --> 00:03:31.530 if you're working with someone else on your project, 61 00:03:31.530 --> 00:03:34.360 they can now more easily understand what exactly 62 00:03:34.360 --> 00:03:36.110 your function is doing. 63 00:03:36.110 --> 00:03:39.510 Because, this standard way of writing it, 64 00:03:39.510 --> 00:03:41.290 everyone understands. 65 00:03:41.290 --> 00:03:44.950 Or at least everyone that is familiar with this 66 00:03:44.950 --> 00:03:47.030 JSDoc format. 67 00:03:47.030 --> 00:03:49.580 Because, if everyone describes their function 68 00:03:49.580 --> 00:03:52.600 in the same way, using this standard, then, 69 00:03:52.600 --> 00:03:55.670 that becomes really easy for everyone to understand 70 00:03:55.670 --> 00:03:57.573 the documentation of each other. 71 00:03:59.120 --> 00:04:02.510 Now what's also great about this, is that JavaScript 72 00:04:02.510 --> 00:04:05.900 or actually VS code, takes this data, 73 00:04:05.900 --> 00:04:08.220 and then when we hover over the function, 74 00:04:08.220 --> 00:04:12.170 it will take that data, and give us this nice overview 75 00:04:12.170 --> 00:04:13.223 of the function. 76 00:04:14.180 --> 00:04:16.920 So here you can see that parameter is data, 77 00:04:16.920 --> 00:04:20.200 and then with the description, and here the same, 78 00:04:20.200 --> 00:04:22.023 also to the script and for render, 79 00:04:23.040 --> 00:04:26.560 here we can also see that the render is optional, 80 00:04:26.560 --> 00:04:30.050 so we have this question mark, and it should be a Boolean. 81 00:04:30.050 --> 00:04:30.883 Okay? 82 00:04:30.883 --> 00:04:34.210 And then for the data, we can also see that it receives 83 00:04:34.210 --> 00:04:37.850 any or an array of any type. 84 00:04:37.850 --> 00:04:41.300 And the same happens when we, take a look at that 85 00:04:41.300 --> 00:04:42.603 in some other file. 86 00:04:44.160 --> 00:04:46.150 So it looks a little bit different, 87 00:04:46.150 --> 00:04:48.733 but the main information, is still here. 88 00:04:50.590 --> 00:04:51.490 Okay? 89 00:04:51.490 --> 00:04:53.550 But we can add more, than just 90 00:04:53.550 --> 00:04:55.860 the description of these parameters. 91 00:04:55.860 --> 00:04:59.780 For example, we can also write, or describe 92 00:04:59.780 --> 00:05:01.293 what this function returns. 93 00:05:02.630 --> 00:05:05.053 And so usually, it doesn't return anything, 94 00:05:06.020 --> 00:05:08.320 and so that's then undefined, but, 95 00:05:08.320 --> 00:05:10.360 it might also be a string. 96 00:05:10.360 --> 00:05:14.013 And so that in case, that render here is set to false. 97 00:05:15.480 --> 00:05:16.313 Right? 98 00:05:17.840 --> 00:05:22.713 Let's write that here, is returned, 99 00:05:24.810 --> 00:05:27.683 if render, is false. 100 00:05:28.760 --> 00:05:33.760 Next, we can also define the this keyword so, 101 00:05:33.800 --> 00:05:36.190 I think this is another interesting one, 102 00:05:36.190 --> 00:05:38.880 and so here the this keyword points, 103 00:05:38.880 --> 00:05:40.603 to the Vue object itself, 104 00:05:42.810 --> 00:05:45.013 so let's just write Vue object, 105 00:05:46.010 --> 00:05:47.573 so let's see what happens then. 106 00:05:49.080 --> 00:05:52.220 Oh and here, object is basically the description 107 00:05:53.690 --> 00:05:57.650 so here, it expects the type basically. 108 00:05:57.650 --> 00:06:00.577 So let's actually put here, that it is an object, 109 00:06:00.577 --> 00:06:04.170 and so then here we can say that it's a Vue, 110 00:06:04.170 --> 00:06:05.333 let's say instance. 111 00:06:08.250 --> 00:06:11.263 Alright, so that makes more sense. 112 00:06:12.170 --> 00:06:14.660 And here, you already can see that the function 113 00:06:14.660 --> 00:06:17.773 is going to return either undefined or a string. 114 00:06:19.530 --> 00:06:23.090 So let's try another one, and you see there are a lot of 115 00:06:23.090 --> 00:06:26.090 different options, and again, you can check them out 116 00:06:26.090 --> 00:06:28.970 in the website that I just told you, 117 00:06:28.970 --> 00:06:31.070 but another one that I like is the author, 118 00:06:33.050 --> 00:06:37.110 and so here you can put your own name, 119 00:06:37.110 --> 00:06:39.760 and just to finish, there is another one called todo, 120 00:06:40.680 --> 00:06:42.440 and so here we can specify, 121 00:06:42.440 --> 00:06:44.970 everything that we still need to do. 122 00:06:44.970 --> 00:06:48.903 Let's just say finish, the implementation. 123 00:06:50.170 --> 00:06:52.120 And so again, when we come here, 124 00:06:52.120 --> 00:06:54.710 it then contains all of this data, 125 00:06:54.710 --> 00:06:56.693 at the same, when we see it here. 126 00:06:58.840 --> 00:06:59.970 Alright? 127 00:06:59.970 --> 00:07:04.180 And so, in your own projects, you can go ahead and add, 128 00:07:04.180 --> 00:07:07.530 maybe not all of this but, at least part, 129 00:07:07.530 --> 00:07:09.130 to some of your functions. 130 00:07:09.130 --> 00:07:11.490 Like at least the most important ones 131 00:07:11.490 --> 00:07:13.860 so that when you come back to them, in like 132 00:07:13.860 --> 00:07:18.650 one or five years or so, that you can still know 133 00:07:18.650 --> 00:07:20.460 what exactly they do. 134 00:07:20.460 --> 00:07:24.450 And what data they get in and what hey output. 135 00:07:24.450 --> 00:07:28.120 Alright. And that's it for this project. 136 00:07:28.120 --> 00:07:31.380 Now, here in package.json, remember we also have 137 00:07:31.380 --> 00:07:35.340 this build command, so basically to actually build 138 00:07:35.340 --> 00:07:37.580 the final project files like 139 00:07:37.580 --> 00:07:40.520 with compression and tree shaking and all of that, 140 00:07:40.520 --> 00:07:43.000 before we then deploy it to a server. 141 00:07:43.000 --> 00:07:45.800 But we will actually do that in the next section 142 00:07:45.800 --> 00:07:48.360 and so for now, let's leave it like this 143 00:07:48.360 --> 00:07:51.223 and really call this application finished now. 144 00:07:52.970 --> 00:07:56.180 However, before we go, once again, 145 00:07:56.180 --> 00:08:00.130 I have a couple of ideas for features and improvements 146 00:08:00.130 --> 00:08:03.030 that you can implement in this application. 147 00:08:03.030 --> 00:08:06.240 So let's start with some easy changes and then 148 00:08:06.240 --> 00:08:09.183 all the way to really complex feature additions. 149 00:08:10.100 --> 00:08:13.820 So to start, you could display the number of pages 150 00:08:13.820 --> 00:08:16.820 between the two pagination buttons. 151 00:08:16.820 --> 00:08:19.890 And so with that, the user would then immediately know, 152 00:08:19.890 --> 00:08:22.770 how many ages there are, which is a little bit more 153 00:08:22.770 --> 00:08:24.570 user friendly. 154 00:08:24.570 --> 00:08:28.460 Also about the search results, you could add the ability, 155 00:08:28.460 --> 00:08:32.560 for the user to sort the search results by the duration 156 00:08:32.560 --> 00:08:36.990 or by the number of ingredients of the found recipes. 157 00:08:36.990 --> 00:08:39.920 However, that data is actually not available 158 00:08:39.920 --> 00:08:43.820 on the search results, well, unless I do some changes 159 00:08:43.820 --> 00:08:46.210 to the API I guess. 160 00:08:46.210 --> 00:08:49.560 So maybe I might do that so you can actually implement 161 00:08:49.560 --> 00:08:51.270 this idea here. 162 00:08:51.270 --> 00:08:55.140 Otherwise, you would have to basically get this information 163 00:08:55.140 --> 00:08:57.960 for all of the recipes in the search results 164 00:08:57.960 --> 00:09:00.650 but that that would require quite a lot of work 165 00:09:00.650 --> 00:09:04.120 and also a lot of API calls. 166 00:09:04.120 --> 00:09:08.070 Next, another thing that you could do, is to perform 167 00:09:08.070 --> 00:09:11.540 the validation of ingredients, right in the view 168 00:09:11.540 --> 00:09:14.700 so, before actually submitting the form. 169 00:09:14.700 --> 00:09:18.660 So for example, while the user is inputting the ingredients, 170 00:09:18.660 --> 00:09:22.220 you could warn the ahead of time, that for example 171 00:09:22.220 --> 00:09:23.710 the format is wrong. 172 00:09:23.710 --> 00:09:28.260 And so that would then again, be a little bit user friendly. 173 00:09:28.260 --> 00:09:31.960 Also, maybe alternatively, you could actually improve 174 00:09:31.960 --> 00:09:34.370 the input of the ingredients. 175 00:09:34.370 --> 00:09:38.170 So instead of having the quantity unit and description 176 00:09:38.170 --> 00:09:42.070 all in one field, you could add a different field for 177 00:09:42.070 --> 00:09:43.950 these three data points, 178 00:09:43.950 --> 00:09:47.030 and then read all that data into your application. 179 00:09:47.030 --> 00:09:50.470 And, besides that, you could also allow for more 180 00:09:50.470 --> 00:09:52.320 than six ingredients. 181 00:09:52.320 --> 00:09:55.410 So there's a lot to improve, I guess, 182 00:09:55.410 --> 00:09:58.300 here in the @recipe functionality. 183 00:09:58.300 --> 00:10:00.100 But of course here in the videos, 184 00:10:00.100 --> 00:10:03.430 I had to keep it kinda simple in order not to make 185 00:10:03.430 --> 00:10:05.133 like a 20 hour project. 186 00:10:06.210 --> 00:10:07.043 Okay. 187 00:10:07.043 --> 00:10:10.010 So these are some of the more simpler improvements 188 00:10:10.010 --> 00:10:12.450 you can make, and now, let's talk about 189 00:10:12.450 --> 00:10:15.620 four additional features that could be implemented 190 00:10:15.620 --> 00:10:17.380 in this application. 191 00:10:17.380 --> 00:10:21.060 And the first one would be a shopping list feature. 192 00:10:21.060 --> 00:10:24.440 So somewhere on each recipe, you could have a button 193 00:10:24.440 --> 00:10:28.010 which would then add all the ingredients of that recipe, 194 00:10:28.010 --> 00:10:29.950 to some kind of list. 195 00:10:29.950 --> 00:10:32.150 And so, you could then display that list 196 00:10:32.150 --> 00:10:36.930 on the user interface for example, in another hidden panel 197 00:10:36.930 --> 00:10:40.740 in the menu bar besides the bookmarks for example, 198 00:10:40.740 --> 00:10:44.120 and so that list would then contain all the ingredients 199 00:10:44.120 --> 00:10:47.240 that you might add from different recipes. 200 00:10:47.240 --> 00:10:50.173 And actually, the original version of Forkify, 201 00:10:50.173 --> 00:10:54.040 that I had in my previous course, had this functionality, 202 00:10:54.040 --> 00:10:57.300 but in this version too I had to remove that feature, 203 00:10:57.300 --> 00:11:01.530 in order to make place for the add recipe functionality 204 00:11:01.530 --> 00:11:05.493 which is new and which I think is way more important. 205 00:11:06.330 --> 00:11:09.450 Now, the next feature that you can try to implement, 206 00:11:09.450 --> 00:11:12.610 is a weekly meal planning feature. 207 00:11:12.610 --> 00:11:15.900 So, you can make this as crazy as you would like 208 00:11:15.900 --> 00:11:19.690 but, in the easiest form, you would simply assign recipes 209 00:11:19.690 --> 00:11:23.430 to the next seven days, and then show them somewhere 210 00:11:23.430 --> 00:11:25.470 on a weekly calender. 211 00:11:25.470 --> 00:11:29.370 And for this one, you could add like a drop down menu to 212 00:11:29.370 --> 00:11:31.970 each of the recipes and from there, 213 00:11:31.970 --> 00:11:35.530 choose which of the next seven days, you want to assign 214 00:11:35.530 --> 00:11:37.300 that recipe to. 215 00:11:37.300 --> 00:11:41.620 And then, in the menu bar, you could again have like a panel 216 00:11:41.620 --> 00:11:44.350 which shows the next seven days and then 217 00:11:44.350 --> 00:11:48.030 which of the recipes was assigned to each day. 218 00:11:48.030 --> 00:11:51.520 But of course you could make it also a lot more complex. 219 00:11:51.520 --> 00:11:53.960 This is just the first simple implementation 220 00:11:53.960 --> 00:11:55.283 that comes to my mind. 221 00:11:56.120 --> 00:12:00.060 And now finally, so, actually I have three features for you 222 00:12:00.060 --> 00:12:01.470 and not four. 223 00:12:01.470 --> 00:12:04.370 And this last one is the most complex one, 224 00:12:04.370 --> 00:12:08.670 and it is to get nutrition data, for each ingredient 225 00:12:08.670 --> 00:12:12.710 of a certain recipe from a special food API. 226 00:12:12.710 --> 00:12:15.570 And the best API for food that I know 227 00:12:15.570 --> 00:12:18.450 is the spoonacular API. 228 00:12:18.450 --> 00:12:20.630 So, you could check out their website, 229 00:12:20.630 --> 00:12:23.510 and their documentation, and from there, 230 00:12:23.510 --> 00:12:27.790 for each of the ingredients for example, get the calories. 231 00:12:27.790 --> 00:12:30.890 And then, you could calculate the total calories, 232 00:12:30.890 --> 00:12:34.750 of one recipe and maybe also per serving. 233 00:12:34.750 --> 00:12:39.060 And there is a lot of other different and interesting stuff 234 00:12:39.060 --> 00:12:42.930 that you could do, with this application together with the 235 00:12:42.930 --> 00:12:44.830 spoonacular API. 236 00:12:44.830 --> 00:12:47.490 So, the possibilities are endless here, 237 00:12:47.490 --> 00:12:49.470 if you want to have some fun. 238 00:12:49.470 --> 00:12:50.750 Alright? 239 00:12:50.750 --> 00:12:54.540 So, these are just some of my suggestions, but I'm sure 240 00:12:54.540 --> 00:12:57.240 that you can come up with even more. 241 00:12:57.240 --> 00:12:59.900 So, I've seen some really creative stuff from 242 00:12:59.900 --> 00:13:03.400 students of this course in other projects. 243 00:13:03.400 --> 00:13:05.500 And hopefully, you can come up with 244 00:13:05.500 --> 00:13:07.083 some of your own as well. 245 00:13:08.130 --> 00:13:11.220 And with this, we now actually reach the end 246 00:13:11.220 --> 00:13:15.040 of this biggest project, of this course. 247 00:13:15.040 --> 00:13:19.290 And I hope that you had as much fun building it, as I had 248 00:13:19.290 --> 00:13:22.820 while going through this, together with you. 249 00:13:22.820 --> 00:13:26.970 And this is really a great, great achievement. 250 00:13:26.970 --> 00:13:28.350 Really well done. 251 00:13:28.350 --> 00:13:30.280 Congratulations. 252 00:13:30.280 --> 00:13:33.340 So, even if you just coded along with me, 253 00:13:33.340 --> 00:13:36.430 you still learned a tremendous amount of skills 254 00:13:36.430 --> 00:13:40.580 throughout this project and of course throughout the entire 255 00:13:40.580 --> 00:13:45.400 last like 50 or 60 hours of course videos. 256 00:13:45.400 --> 00:13:49.080 And now, I would really love to see your implementation 257 00:13:49.080 --> 00:13:51.680 of at least a couple of these challenges 258 00:13:51.680 --> 00:13:53.430 that I just told you here. 259 00:13:53.430 --> 00:13:56.590 Because, I think that they will be really beneficial 260 00:13:56.590 --> 00:14:00.120 for your own learning and so maybe, you can take some hours 261 00:14:00.120 --> 00:14:03.610 when you have the time, and, really continue practicing 262 00:14:03.610 --> 00:14:05.150 your skills here. 263 00:14:05.150 --> 00:14:08.900 And, if you do that, please make sure to share 264 00:14:08.900 --> 00:14:12.580 some of your screenshots of the implementations that you do 265 00:14:12.580 --> 00:14:13.610 on twitter. 266 00:14:13.610 --> 00:14:16.120 So, I really would love to see that. 267 00:14:16.120 --> 00:14:20.340 But, anyway, it's actually not time to say goodbye 268 00:14:20.340 --> 00:14:23.880 to this project yet because in the next section, 269 00:14:23.880 --> 00:14:27.910 we will deploy this project onto a live server, 270 00:14:27.910 --> 00:14:30.420 so that you can share it with the world 271 00:14:30.420 --> 00:14:33.440 and like with everyone that you know. 272 00:14:33.440 --> 00:14:37.420 So, there is still a lot of interesting stuff to learn. 273 00:14:37.420 --> 00:14:40.810 So, when you're ready implementing these challenges, 274 00:14:40.810 --> 00:14:43.263 then let's go to the next section.