Original subtitles

1 1

Alright, so let's set up our project 2

2

and also start to load some recipe data 3

3

from the Forkify API. 4

4

And here as always, I already have the starter files loaded. 5

5

Now this time we have a bit of a different structure here, 6

6

so I have index.html out here, but then all the rest, 7

7

all four assets for this project are here 8

8

in the source folder. 9

9

So in the source, we have images, JavaScript, and Sass. 10

10

So for JavaScript, right now we have controller.js, 11

11

which contains this little starter code here. 12

12

And then I have this Sass folder. 13

13

And in case you don't know, 14

14

Sass is basically a better way of writing CSS, 15

15

which has some nice additional features, 16

16

which makes writing CSS in a large scale application 17

17

a lot easier. 18

18

Now, browsers actually don't understand Sass 19

19

and so it has to be converted to CSS. 20

20

And so Parcel is going to do that for us. 21

21

And so I left these Sass files here 22

22

so that you can see that Parcel is actually also capable 23

23

of doing that. 24

24

And then here just some images and of course down here, 25

25

we have our flowcharts and also a small diagram 26

26

about the architecture. 27

27

Okay. 28

28

But now let's open up a new terminal here. 29

29

And then just like before we need to initialize 30

30

a new project by writing npm init. 31

31

And so this command will then create or package .json file. 32

32

So this project should be called simply Forkify 33

33

and the version might be version one. 34

34

Here, let's just say Recipe application, 35

35

or really whatever you want. 36

36

Then this one doesn't matter neither this one. 37

37

And now you can just add your own name here if you'd like. 38

38

And so that's it. 39

39

And so again, 40

40

this now created this package.json file right here. 41

41

Let's get rid of this one here actually, 42

42

or actually let's just change it to .html. 43

43

So this is kind of our entry point 44

44

so let's specify it here, 45

45

even though it's not really important. 46

46

And here I will start by setting up the npm scripts now. 47

47

So just as we did in the last section, 48

48

so this one is going to be npm start instead. 49

49

And here we will want to start Parcel on index.html. 50

50

So index.html is again going to be your entry point. 51

51

And then since we are here, 52

52

let's also already add or build script. 53

53

So basically the command that we are going to run 54

54

in the end once we're already building the application. 55

55

And again, index.htm. 56

56

Now, sometimes in projects we don't even have an html. 57

57

And so of course the entry point 58

58

can also be a JavaScript file. 59

59

And also this could be in a different folder 60

60

and we can specify all that here in the Parcel command. 61

61

But once again, we are just keeping it very simple here. 62

62

Now, in order to actually run Parcel, 63

63

of course we need to install it. 64

64

Now in the last section, we simply installed Parcel 65

65

by writing npm install Parcel, 66

66

and then as a dev dependency like this. 67

67

And so this would then basically install 68

68

simply the latest version that is available on npm 69

69

for Parcel. 70

70

And at the time I'm recording 71

71

that is version one point something 72

72

However, Parcel 2 is almost ready at this point. 73

73

And so I want to use a beta version of Parcel 2 74

74

so that you can use Parcel 2 in the future. 75

75

Alright. 76

76

So if Parcel 2 was already out, 77

77

then we would simply write @2 like this. 78

78

However, right now it's just a beta version. 79

79

And so I have to type @next 80

80

and then edit as a dev dependency. 81

81

So again, I am writing @next here 82

82

to install a beta version. 83

83

So let me run this and in case you get any error, 84

84

then please go ahead and simply install Parcel@2. 85

85

So you see here that this is going to install 86

86

at 2.0.0-beta.1. 87

87

Now okay, and here we go. 88

88

So again, you see that we are at 2.0.0-beta.1. 89

89

And if you got some error here again, 90

90

then please try a Parcel@2. 91

91

So it's really important for the rest of this section 92

92

that we are actually all on Parcel 2 dot something. 93

93

So here it doesn't matter if you have 2.1 or two or three, 94

94

but it should be two. 95

95

So that's what matters from this part. 96

96

And so now let's actually start Parcel 97

97

by running our npm script, npm run start. 98

98

And actually the start script is a special one in npm 99

99

for which one you don't even need the run. 100

100

So you can just write npm start 101

101

and that will then call your start script. 102

102

So it's installing Sass and now we got this error here 103

103

for the module, Sass. 104

104

And so lets quit this here with control C 105

105

and then I just say, npm install. 106

106

And so this will then install Sass here for us. 107

107

But if you're still running into some kind of error 108

108

with Sass here then please just try to install Sass 109

109

using the exact same version number. 110

110

So npm install Sass, and then at 1.26.10. 111

111

And so that should then fix any remaining problem. 112

112

And if it didn't, so if even after that 113

113

you still run into some problems either with Sass 114

114

or with installing Parcel or running Parcel, 115

115

then please take a look at the frequently asked questions 116

116

in the GitHub repo. 117

117

And only in the last case, you can of course also ask 118

118

in the course Q and A section. 119

119

But anyway, if we now try to run npm start again, 120

120

then it will work. 121

121

And indeed here it is. 122

122

So we now have to note modules folder, 123

123

which contains well tons of modules. 124

124

And then we also have our distribution folder, right? 125

125

And you see that here everything is in one folder. 126

126

So our index.html and then also the controller script, 127

127

which is this one, well not really this one, 128

128

but the compiled one. 129

129

And also you see that now we have an actual CSS file 130

130

and you also see all the images. 131

131

So a real CSS file, let's take a look at index as well. 132

132

And so you see that now it replaced the controller js 133

133

here in the source and also here I was referencing 134

134

the SCSS file, so the SCCS file. 135

135

And it is because of this that Parcel actually knows 136

136

that it needs to compile the Sass file to CSS. 137

137

So basically I referenced the Sass file here 138

138

and therefore Parcel knew that it had to include that file 139

139

in the distribution as well and to also replace 140

140

the under link to the actual final CSS file. 141

141

And the same is true for all the images. 142

142

So it basically copied all the images 143

143

to the distribution folder and gave them a new name 144

144

and replaced their source here in the html. 145

145

And this is very important to keep in mind 146

146

as we go building this project. 147

147

But of course this folder here 148

148

is not really important for us in development. 149

149

So everything that we will develop 150

150

will be here in the source folder 151

151

and only what we then see in the browser 152

152

is actually coming from this distribution. 153

153

So again, that's the whole logic of having a module bundler. 154

154

So it takes, or basically a raw source code 155

155

and compiles it into this nice package here, let's say, 156

156

so this folder that is ready to ship to browsers. 157

157

So for now we no longer need this html file 158

158

and so we can now think about our controller here 159

159

and actually think about making our first API call. 160

160

And we can actually also open the page here 161

161

by clicking option down here. 162

162

Well, that opened in another tab for me. 163

163

So let me just copy it right here. 164

164

Let's open up the developer tools as well, 165

165

but for now of course we have nothing here 166

166

because we don't have any code yet. 167

167

But let's just lock something to the console, 168

168

just to see that our Parcel setup is working. 169

169

And you see that it already built a new version. 170

170

And indeed we have tests now in our console. 171

171

Great. 172

172

So everything is working and so yeah, 173

173

let's now make our first API call. 174

174

Now, for this project I actually developed my own API 175

175

so that we are not dependent on any third party services. 176

176

And the API is at this page. 177

177

So let's copy it and let's go there 178

178

to check out the documentation. 179

179

So any good API needs some sort of documentation. 180

180

And so this is the documentation that I wrote 181

181

for our Forkify API version two. 182

182

So version one was for the old version of this course. 183

183

So some details about this API 184

184

is that search terms are limited. 185

185

All you can search for is the terms 186

186

that are in this list here, 187

187

but to test this application that should be enough. 188

188

And you can only make 100 API requests per hour 189

189

in order not to overload our servers. 190

190

Because again, this is here my own API 191

191

that I'm running on my own server. 192

192

Then the API key is what we will need 193

193

to upload our own recipes. 194

194

But again, more about that later. 195

195

And then here we have basically our main URLs 196

196

or routes of this API. 197

197

So the first one is used to get all the recipes 198

198

or to create a recipe. 199

199

But for now let's focus on this one, 200

200

which is simple to get one single recipe. 201

201

So the path of this part of the API is this here. 202

202

So this URL then slash recipes slash the ID of a recipe. 203

203

And down here is an example of that. 204

204

So for example, this one here might be the ID 205

205

and then here the key, 206

206

but again the key doesn't matter for now. 207

207

And we can click on this and then see exactly 208

208

the kind of result that we will get. 209

209

And so actually this is the URL 210

210

that for now we will use in our code 211

211

to basically get exactly this recipe here 212

212

in our application. 213

213

So let's copy this and go back to our code. 214

214

And so now as always to make an Ajax request to an API 215

215

we use the fetch function. 216

216

And now that we have this, 217

217

let's actually create some function around this. 218

218

So an async function so that we can use a single wait. 219

219

So let's call it showrecipe. 220

220

So an async function. 221

221

And then here as always, we use a try catch. 222

222

And if there is an error, we want to alert that error. 223

223

So very simple error handling for now. 224

224

And now let's take this here and await it 225

225

and store the result into the res variable, 226

226

which stands for response. 227

227

And I hope that all of this here 228

228

is nothing new for you at this point 229

229

after the last couple of sections. 230

230

So just keep in mind that using the fetch function here 231

231

will return a promise. 232

232

And so, since we are in an async function, 233

233

we can then await that promise. 234

234

So basically we will stop the code execution here 235

235

at this point, but that's not a problem 236

236

because this is an async function anyway, 237

237

which only runs in the background. 238

238

So we are not blocking our main thread of execution here. 239

239

But anyway, once we have that result, 240

240

we then need to convert that to json. 241

241

So as always, let's create a data variable 242

242

and then await the response .json. 243

243

So the json method is, again, a method that is available 244

244

on all the response objects. 245

245

And a response object is exactly 246

246

what the fetch function here returns. 247

247

And so yeah, we can then call json on that response, 248

248

which returns another promise, 249

249

which we then have to await again. 250

250

And in the end we will then get our data 251

251

stored to that variable. 252

252

And then that's actually console.log, 253

253

both the response and also the data. 254

254

So, give it a safe. 255

255

And we also should call this here right at the beginning 256

256

because otherwise nothing is going to happen. 257

257

And so which one is ours? Here we are. 258

258

And you see that we already have a result here. 259

259

So first is the response. 260

260

And so again as I mentioned, 261

261

this returns a response object, 262

262

but then the data itself is here. 263

263

And so we get this status here and then the data itself. 264

264

Make it a bit bigger here. 265

265

And so then here, inside of data we get the recipe itself. 266

266

So it contains all of this data here, cooking time, 267

267

the ID itself, then the ingredients, publisher, servings 268

268

and so on and so forth. 269

269

So that works beautifully. 270

270

And as always, we started here assuming 271

271

that there will be success, 272

272

but now let's try to create a wrong ID here, 273

273

which doesn't exist on the server. 274

274

So just something like this and let's see what happens then. 275

275

And so you see, we get the bad request. 276

276

Here then in the response, 277

277

we can see that ok is set to false. 278

278

And so this is what we're going to use, remember that. 279

279

So when ok is set to false 280

280

means that there was some kind of error in the fetch. 281

281

And so we can then use that to create our own errors. 282

282

So again, 283

283

just like we learned in the asynchronous JavaScript section. 284

284

But then we still get a response here 285

285

and this response says fail. 286

286

And then also this message of invalid_id 287

287

and then the ID that we provided. 288

288

So also the API itself returns a nice error message. 289

289

And so lets actually use that error message now. 290

290

Because simply bad requests 291

291

is not a very informative error message. 292

292

It's way better to actually use the one 293

293

that the API returned to us. 294

294

And so that's at .message of this object. 295

295

So, we need to do that after this one here. 296

296

And so we can say if res.ok is false. 297

297

So basically if response is not okay, 298

298

then we want to throw a new error. 299

299

And then in there we can use the .message property 300

300

that I just mentioned. 301

301

And again, that one is already coming from the data. 302

302

So from the response of the server 303

303

while the ok property is stored in the response itself. 304

304

And then that's also provide the status code. 305

305

So that is at res.status. 306

306

Now okay and so... 307

307

And you see that somehow we already get the error here, 308

308

even though we're not at Chrome. 309

309

But anyway, that alert window appeared, 310

310

of course because down here the catch error, 311

311

we are alerting exactly that error 312

312

that we throw here in the try block. 313

313

Right? 314

314

And so as we go here, let's just try to reload. 315

315

And so indeed, here we get our error as an alert window. 316

316

But now let's take it back actually... 317

317

But now let's take it back actually. 318

318

And so when we're back then our data here is also back here. 319

319

Now just to finish, lets actually format that data 320

320

a little bit nicer. 321

321

So basically I want to create a new object 322

322

based on this object which has some better variable names. 323

323

So here we have for example these underscores 324

324

and these are very unusual in JavaScript. 325

325

And so many times what we do 326

326

is to basically kind of reformat this object 327

327

that we get here. 328

328

So basically I want to get rid of these underscores. 329

329

And so... 330

330

So lets create a new recipe variable, 331

331

which should be data. 332

332

And then remember that it is again data, 333

333

and then dot recipe. 334

334

So let's see that again, just to make sure. 335

335

So this here is the data variable. 336

336

And then in there we have data again 337

337

and then in there is .recipe. 338

338

And so here we have recipes on both sides 339

339

and so we can use this structuring. 340

340

So let's take that back. 341

341

And I called this one a recipe with let 342

342

so that we can now basically create a new recipe object 343

343

based on that. 344

344

So the id is the recipe.id. 345

345

Your title is gonna be recipe.title. 346

346

The publisher will be recipe.publisher. 347

347

And there would have been other ways of doing this, 348

348

but this is kind of the quick and dirty way (chuckles). 349

349

So source URL is going to be recipe.source_url. 350

350

So this is one of the ones I wanted to change. 351

351

Then there's also an image URL property. 352

352

And this one I want to simply call image, 353

353

image_url. 354

354

Then the servings might be just recipe.servings. 355

355

And we're almost done here. 356

356

So cooking time is the recipe.cooking_time 357

357

with an underscore. 358

358

And finally ingredients is recipe.ingredients. 359

359

Now let's actually get rid of this 360

360

and simply lock to the console, the recipe object 361

361

that we just created. 362

362

And here ingredients looks wrong ingredients like this 363

363

and here the same. 364

364

Everything else looks correct. 365

365

And yeah. 366

366

So here is our nicely formatted recipe 367

367

that we just got from the server. 368

368

And of course, that would work for other recipes as well. 369

369

So let's go back to our documentation page 370

370

and get some other ID. 371

371

And so that ID, we can basically get from the search URL. 372

372

So this path here will take us 373

373

to all the recipes there are for a certain search query. 374

374

So let's try this one here, which is for pizza. 375

375

So you see it is the route. 376

376

So the URL that I just told you slash recipes. 377

377

And then we have this query, search set to pizza. 378

378

So after this question mark. 379

379

And this is a very common format 380

380

of basically sending variables over your URLs. 381

381

So search is like a variable and then pizza is that value. 382

382

And so in this case, this is the query string. 383

383

And in this case, what we want to search for is pizza. 384

384

And so let's now just take any random ID of this. 385

385

So with just copying it, let's go back here 386

386

and then I will just duplicate this line 387

387

and comment it and then replace this part here of the URL 388

388

with this other ID. 389

389

So you see it's slightly different. 390

390

And so now we should get a different recipe. 391

391

So let's see. 392

392

And yeah, this time it is called Pepperoni Pizza Burgers. 393

393

And so of course later in the real world, 394

394

we will then get these different IDs 395

395

from our search results here in the sidebar. 396

396

So, we successfully started up our project 397

397

and already did our first API call to the Forkify API 398

398

that I created just for this project. 399

399

So this was a nice start of the project. 400

400

And now in the next video, 401

401

we will then actually already render this data 402

402

to the user interface 403

403

in order to create something like this here. 404

404

And I hope you're excited for that. 405

405

And so let's quickly move on.