Jonas: Welcome to the last video of this project.
And so, let's finish this section by learning a little bit
about how we can write some documentation for our code,
in order to make our code easy to understand
also for other people,
and then, at the end of the video, I will again
show you some challenges and some improvements
that you can implement on this application on your own.
So, there is a standard way of writing documentation
for JavaScript functions and that is called JSDocs.
So, let me choose one function here for which
I'm gonna write some documentation and that's going to be
this render function.
So this one.
So of course I'm not gonna document now
the entire code base, but let me just show you
how it works with this function here.
And, we can also go to JSDoc.app, for that's JSDoc.app,
and so, here you can find some more information besides
what I'm going to show you now.
So to write documentation, we basically write a
multiline comment like this, and then a second star,
and then you see that automatically, a JSDoc comment
is initialized here.
And so, if we hit enter, then you see that already
this has a prefilled some code here.
You see?
So data and render are actually already the parameters
that we have here.
So VS code automatically found them.
Right?
But let's start with a quick description of this function,
let's say, render the received object to the DOM.
Then here the data, we can describe it
inside of this calibrasis, so we can say
that we expect an object here, or,
we also expect an array of objects.
And so that is represented with the 'or' symbol here,
and then again object, and then array.
So again, this means that we are expecting
an array of objects.
Then this here is the name of the parameter
and then here after that we can also write
a short description.
So the data,
to be rendered.
For example a recipe. Okay?
Then we have render here as well,
and so here again we can define its type,
and this one is a Boolean.
Now, this parameter is actually optional and so,
we can put that here, inside of these brackets,
and we can also specify then here, the default value
like this.
So, another description here, so if false,
create markup string,
instead of rendering to the DOM.
Now, you might ask, what is the big advantage of this,
and of course the most obvious one, is that
if you're working with someone else on your project,
they can now more easily understand what exactly
your function is doing.
Because, this standard way of writing it,
everyone understands.
Or at least everyone that is familiar with this
JSDoc format.
Because, if everyone describes their function
in the same way, using this standard, then,
that becomes really easy for everyone to understand
the documentation of each other.
Now what's also great about this, is that JavaScript
or actually VS code, takes this data,
and then when we hover over the function,
it will take that data, and give us this nice overview
of the function.
So here you can see that parameter is data,
and then with the description, and here the same,
also to the script and for render,
here we can also see that the render is optional,
so we have this question mark, and it should be a Boolean.
Okay?
And then for the data, we can also see that it receives
any or an array of any type.
And the same happens when we, take a look at that
in some other file.
So it looks a little bit different,
but the main information, is still here.
Okay?
But we can add more, than just
the description of these parameters.
For example, we can also write, or describe
what this function returns.
And so usually, it doesn't return anything,
and so that's then undefined, but,
it might also be a string.
And so that in case, that render here is set to false.
Right?
Let's write that here, is returned,
if render, is false.
Next, we can also define the this keyword so,
I think this is another interesting one,
and so here the this keyword points,
to the Vue object itself,
so let's just write Vue object,
so let's see what happens then.
Oh and here, object is basically the description
so here, it expects the type basically.
So let's actually put here, that it is an object,
and so then here we can say that it's a Vue,
let's say instance.
Alright, so that makes more sense.
And here, you already can see that the function
is going to return either undefined or a string.
So let's try another one, and you see there are a lot of
different options, and again, you can check them out
in the website that I just told you,
but another one that I like is the author,
and so here you can put your own name,
and just to finish, there is another one called todo,
and so here we can specify,
everything that we still need to do.
Let's just say finish, the implementation.
And so again, when we come here,
it then contains all of this data,
at the same, when we see it here.
Alright?
And so, in your own projects, you can go ahead and add,
maybe not all of this but, at least part,
to some of your functions.
Like at least the most important ones
so that when you come back to them, in like
one or five years or so, that you can still know
what exactly they do.
And what data they get in and what hey output.
Alright. And that's it for this project.
Now, here in package.json, remember we also have
this build command, so basically to actually build
the final project files like
with compression and tree shaking and all of that,
before we then deploy it to a server.
But we will actually do that in the next section
and so for now, let's leave it like this
and really call this application finished now.
However, before we go, once again,
I have a couple of ideas for features and improvements
that you can implement in this application.
So let's start with some easy changes and then
all the way to really complex feature additions.
So to start, you could display the number of pages
between the two pagination buttons.
And so with that, the user would then immediately know,
how many ages there are, which is a little bit more
user friendly.
Also about the search results, you could add the ability,
for the user to sort the search results by the duration
or by the number of ingredients of the found recipes.
However, that data is actually not available
on the search results, well, unless I do some changes
to the API I guess.
So maybe I might do that so you can actually implement
this idea here.
Otherwise, you would have to basically get this information
for all of the recipes in the search results
but that that would require quite a lot of work
and also a lot of API calls.
Next, another thing that you could do, is to perform
the validation of ingredients, right in the view
so, before actually submitting the form.
So for example, while the user is inputting the ingredients,
you could warn the ahead of time, that for example
the format is wrong.
And so that would then again, be a little bit user friendly.
Also, maybe alternatively, you could actually improve
the input of the ingredients.
So instead of having the quantity unit and description
all in one field, you could add a different field for
these three data points,
and then read all that data into your application.
And, besides that, you could also allow for more
than six ingredients.
So there's a lot to improve, I guess,
here in the @recipe functionality.
But of course here in the videos,
I had to keep it kinda simple in order not to make
like a 20 hour project.
Okay.
So these are some of the more simpler improvements
you can make, and now, let's talk about
four additional features that could be implemented
in this application.
And the first one would be a shopping list feature.
So somewhere on each recipe, you could have a button
which would then add all the ingredients of that recipe,
to some kind of list.
And so, you could then display that list
on the user interface for example, in another hidden panel
in the menu bar besides the bookmarks for example,
and so that list would then contain all the ingredients
that you might add from different recipes.
And actually, the original version of Forkify,
that I had in my previous course, had this functionality,
but in this version too I had to remove that feature,
in order to make place for the add recipe functionality
which is new and which I think is way more important.
Now, the next feature that you can try to implement,
is a weekly meal planning feature.
So, you can make this as crazy as you would like
but, in the easiest form, you would simply assign recipes
to the next seven days, and then show them somewhere
on a weekly calender.
And for this one, you could add like a drop down menu to
each of the recipes and from there,
choose which of the next seven days, you want to assign
that recipe to.
And then, in the menu bar, you could again have like a panel
which shows the next seven days and then
which of the recipes was assigned to each day.
But of course you could make it also a lot more complex.
This is just the first simple implementation
that comes to my mind.
And now finally, so, actually I have three features for you
and not four.
And this last one is the most complex one,
and it is to get nutrition data, for each ingredient
of a certain recipe from a special food API.
And the best API for food that I know
is the spoonacular API.
So, you could check out their website,
and their documentation, and from there,
for each of the ingredients for example, get the calories.
And then, you could calculate the total calories,
of one recipe and maybe also per serving.
And there is a lot of other different and interesting stuff
that you could do, with this application together with the
spoonacular API.
So, the possibilities are endless here,
if you want to have some fun.
Alright?
So, these are just some of my suggestions, but I'm sure
that you can come up with even more.
So, I've seen some really creative stuff from
students of this course in other projects.
And hopefully, you can come up with
some of your own as well.
And with this, we now actually reach the end
of this biggest project, of this course.
And I hope that you had as much fun building it, as I had
while going through this, together with you.
And this is really a great, great achievement.
Really well done.
Congratulations.
So, even if you just coded along with me,
you still learned a tremendous amount of skills
throughout this project and of course throughout the entire
last like 50 or 60 hours of course videos.
And now, I would really love to see your implementation
of at least a couple of these challenges
that I just told you here.
Because, I think that they will be really beneficial
for your own learning and so maybe, you can take some hours
when you have the time, and, really continue practicing
your skills here.
And, if you do that, please make sure to share
some of your screenshots of the implementations that you do
on twitter.
So, I really would love to see that.
But, anyway, it's actually not time to say goodbye
to this project yet because in the next section,
we will deploy this project onto a live server,
so that you can share it with the world
and like with everyone that you know.
So, there is still a lot of interesting stuff to learn.
So, when you're ready implementing these challenges,
then let's go to the next section.