Original subtitles

1 1

Welcome to the last video of this project. 2

2

And so, let's finish this section by learning a little bit 3

3

about how we can write some documentation for our code, 4

4

in order to make our code easy to understand 5

5

also for other people, 6

6

and then, at the end of the video, I will again 7

7

show you some challenges and some improvements 8

8

that you can implement on this application on your own. 9

9

So, there is a standard way of writing documentation 10

10

for JavaScript functions and that is called JSDocs. 11

11

So, let me choose one function here for which 12

12

I'm gonna write some documentation and that's going to be 13

13

this render function. 14

14

So this one. 15

15

So of course I'm not gonna document now 16

16

the entire code base, but let me just show you 17

17

how it works with this function here. 18

18

And, we can also go to JSDoc.app, for that's JSDoc.app, 19

19

and so, here you can find some more information besides 20

20

what I'm going to show you now. 21

21

So to write documentation, we basically write a 22

22

multiline comment like this, and then a second star, 23

23

and then you see that automatically, a JSDoc comment 24

24

is initialized here. 25

25

And so, if we hit enter, then you see that already 26

26

this has a prefilled some code here. 27

27

You see? 28

28

So data and render are actually already the parameters 29

29

that we have here. 30

30

So VS code automatically found them. 31

31

Right? 32

32

But let's start with a quick description of this function, 33

33

let's say, render the received object to the DOM. 34

34

Then here the data, we can describe it 35

35

inside of this calibrasis, so we can say 36

36

that we expect an object here, or, 37

37

we also expect an array of objects. 38

38

And so that is represented with the 'or' symbol here, 39

39

and then again object, and then array. 40

40

So again, this means that we are expecting 41

41

an array of objects. 42

42

Then this here is the name of the parameter 43

43

and then here after that we can also write 44

44

a short description. 45

45

So the data, 46

46

to be rendered. 47

47

For example a recipe. Okay? 48

48

Then we have render here as well, 49

49

and so here again we can define its type, 50

50

and this one is a Boolean. 51

51

Now, this parameter is actually optional and so, 52

52

we can put that here, inside of these brackets, 53

53

and we can also specify then here, the default value 54

54

like this. 55

55

So, another description here, so if false, 56

56

create markup string, 57

57

instead of rendering to the DOM. 58

58

Now, you might ask, what is the big advantage of this, 59

59

and of course the most obvious one, is that 60

60

if you're working with someone else on your project, 61

61

they can now more easily understand what exactly 62

62

your function is doing. 63

63

Because, this standard way of writing it, 64

64

everyone understands. 65

65

Or at least everyone that is familiar with this 66

66

JSDoc format. 67

67

Because, if everyone describes their function 68

68

in the same way, using this standard, then, 69

69

that becomes really easy for everyone to understand 70

70

the documentation of each other. 71

71

Now what's also great about this, is that JavaScript 72

72

or actually VS code, takes this data, 73

73

and then when we hover over the function, 74

74

it will take that data, and give us this nice overview 75

75

of the function. 76

76

So here you can see that parameter is data, 77

77

and then with the description, and here the same, 78

78

also to the script and for render, 79

79

here we can also see that the render is optional, 80

80

so we have this question mark, and it should be a Boolean. 81

81

Okay? 82

82

And then for the data, we can also see that it receives 83

83

any or an array of any type. 84

84

And the same happens when we, take a look at that 85

85

in some other file. 86

86

So it looks a little bit different, 87

87

but the main information, is still here. 88

88

Okay? 89

89

But we can add more, than just 90

90

the description of these parameters. 91

91

For example, we can also write, or describe 92

92

what this function returns. 93

93

And so usually, it doesn't return anything, 94

94

and so that's then undefined, but, 95

95

it might also be a string. 96

96

And so that in case, that render here is set to false. 97

97

Right? 98

98

Let's write that here, is returned, 99

99

if render, is false. 100

100

Next, we can also define the this keyword so, 101

101

I think this is another interesting one, 102

102

and so here the this keyword points, 103

103

to the Vue object itself, 104

104

so let's just write Vue object, 105

105

so let's see what happens then. 106

106

Oh and here, object is basically the description 107

107

so here, it expects the type basically. 108

108

So let's actually put here, that it is an object, 109

109

and so then here we can say that it's a Vue, 110

110

let's say instance. 111

111

Alright, so that makes more sense. 112

112

And here, you already can see that the function 113

113

is going to return either undefined or a string. 114

114

So let's try another one, and you see there are a lot of 115

115

different options, and again, you can check them out 116

116

in the website that I just told you, 117

117

but another one that I like is the author, 118

118

and so here you can put your own name, 119

119

and just to finish, there is another one called todo, 120

120

and so here we can specify, 121

121

everything that we still need to do. 122

122

Let's just say finish, the implementation. 123

123

And so again, when we come here, 124

124

it then contains all of this data, 125

125

at the same, when we see it here. 126

126

Alright? 127

127

And so, in your own projects, you can go ahead and add, 128

128

maybe not all of this but, at least part, 129

129

to some of your functions. 130

130

Like at least the most important ones 131

131

so that when you come back to them, in like 132

132

one or five years or so, that you can still know 133

133

what exactly they do. 134

134

And what data they get in and what hey output. 135

135

Alright. And that's it for this project. 136

136

Now, here in package.json, remember we also have 137

137

this build command, so basically to actually build 138

138

the final project files like 139

139

with compression and tree shaking and all of that, 140

140

before we then deploy it to a server. 141

141

But we will actually do that in the next section 142

142

and so for now, let's leave it like this 143

143

and really call this application finished now. 144

144

However, before we go, once again, 145

145

I have a couple of ideas for features and improvements 146

146

that you can implement in this application. 147

147

So let's start with some easy changes and then 148

148

all the way to really complex feature additions. 149

149

So to start, you could display the number of pages 150

150

between the two pagination buttons. 151

151

And so with that, the user would then immediately know, 152

152

how many ages there are, which is a little bit more 153

153

user friendly. 154

154

Also about the search results, you could add the ability, 155

155

for the user to sort the search results by the duration 156

156

or by the number of ingredients of the found recipes. 157

157

However, that data is actually not available 158

158

on the search results, well, unless I do some changes 159

159

to the API I guess. 160

160

So maybe I might do that so you can actually implement 161

161

this idea here. 162

162

Otherwise, you would have to basically get this information 163

163

for all of the recipes in the search results 164

164

but that that would require quite a lot of work 165

165

and also a lot of API calls. 166

166

Next, another thing that you could do, is to perform 167

167

the validation of ingredients, right in the view 168

168

so, before actually submitting the form. 169

169

So for example, while the user is inputting the ingredients, 170

170

you could warn the ahead of time, that for example 171

171

the format is wrong. 172

172

And so that would then again, be a little bit user friendly. 173

173

Also, maybe alternatively, you could actually improve 174

174

the input of the ingredients. 175

175

So instead of having the quantity unit and description 176

176

all in one field, you could add a different field for 177

177

these three data points, 178

178

and then read all that data into your application. 179

179

And, besides that, you could also allow for more 180

180

than six ingredients. 181

181

So there's a lot to improve, I guess, 182

182

here in the @recipe functionality. 183

183

But of course here in the videos, 184

184

I had to keep it kinda simple in order not to make 185

185

like a 20 hour project. 186

186

Okay. 187

187

So these are some of the more simpler improvements 188

188

you can make, and now, let's talk about 189

189

four additional features that could be implemented 190

190

in this application. 191

191

And the first one would be a shopping list feature. 192

192

So somewhere on each recipe, you could have a button 193

193

which would then add all the ingredients of that recipe, 194

194

to some kind of list. 195

195

And so, you could then display that list 196

196

on the user interface for example, in another hidden panel 197

197

in the menu bar besides the bookmarks for example, 198

198

and so that list would then contain all the ingredients 199

199

that you might add from different recipes. 200

200

And actually, the original version of Forkify, 201

201

that I had in my previous course, had this functionality, 202

202

but in this version too I had to remove that feature, 203

203

in order to make place for the add recipe functionality 204

204

which is new and which I think is way more important. 205

205

Now, the next feature that you can try to implement, 206

206

is a weekly meal planning feature. 207

207

So, you can make this as crazy as you would like 208

208

but, in the easiest form, you would simply assign recipes 209

209

to the next seven days, and then show them somewhere 210

210

on a weekly calender. 211

211

And for this one, you could add like a drop down menu to 212

212

each of the recipes and from there, 213

213

choose which of the next seven days, you want to assign 214

214

that recipe to. 215

215

And then, in the menu bar, you could again have like a panel 216

216

which shows the next seven days and then 217

217

which of the recipes was assigned to each day. 218

218

But of course you could make it also a lot more complex. 219

219

This is just the first simple implementation 220

220

that comes to my mind. 221

221

And now finally, so, actually I have three features for you 222

222

and not four. 223

223

And this last one is the most complex one, 224

224

and it is to get nutrition data, for each ingredient 225

225

of a certain recipe from a special food API. 226

226

And the best API for food that I know 227

227

is the spoonacular API. 228

228

So, you could check out their website, 229

229

and their documentation, and from there, 230

230

for each of the ingredients for example, get the calories. 231

231

And then, you could calculate the total calories, 232

232

of one recipe and maybe also per serving. 233

233

And there is a lot of other different and interesting stuff 234

234

that you could do, with this application together with the 235

235

spoonacular API. 236

236

So, the possibilities are endless here, 237

237

if you want to have some fun. 238

238

Alright? 239

239

So, these are just some of my suggestions, but I'm sure 240

240

that you can come up with even more. 241

241

So, I've seen some really creative stuff from 242

242

students of this course in other projects. 243

243

And hopefully, you can come up with 244

244

some of your own as well. 245

245

And with this, we now actually reach the end 246

246

of this biggest project, of this course. 247

247

And I hope that you had as much fun building it, as I had 248

248

while going through this, together with you. 249

249

And this is really a great, great achievement. 250

250

Really well done. 251

251

Congratulations. 252

252

So, even if you just coded along with me, 253

253

you still learned a tremendous amount of skills 254

254

throughout this project and of course throughout the entire 255

255

last like 50 or 60 hours of course videos. 256

256

And now, I would really love to see your implementation 257

257

of at least a couple of these challenges 258

258

that I just told you here. 259

259

Because, I think that they will be really beneficial 260

260

for your own learning and so maybe, you can take some hours 261

261

when you have the time, and, really continue practicing 262

262

your skills here. 263

263

And, if you do that, please make sure to share 264

264

some of your screenshots of the implementations that you do 265

265

on twitter. 266

266

So, I really would love to see that. 267

267

But, anyway, it's actually not time to say goodbye 268

268

to this project yet because in the next section, 269

269

we will deploy this project onto a live server, 270

270

so that you can share it with the world 271

271

and like with everyone that you know. 272

272

So, there is still a lot of interesting stuff to learn. 273

273

So, when you're ready implementing these challenges, 274

274

then let's go to the next section.