Original subtitles

1 1

Welcome to the first coding challenge 2

2

of this section and also in a long time actually, 3

3

and this one is gonna be a big one 4

4

and so let's get started right away. 5

5

And in this challenge you gonna build a function, 6

6

'where am I'. 7

7

Which then displays a country on the page, 8

8

but based only on the GPS coordinates 9

9

that you provide to the function. 10

10

All right? 11

11

So instead of providing a real country name like Portugal, 12

12

all you will provide is coordinates 13

13

of any place on the world. 14

14

And based on these coordinates, 15

15

then a country will be rendered, 16

16

just like we have been doing. 17

17

All right? 18

18

And so for that, we are going to use a second API 19

19

to basically geocode coordinates. 20

20

And so here are your tasks. 21

21

So, again create a function 'where am I', 22

22

which takes as inputs, the latitude and longitude. 23

23

So coordinates, as you already know 24

24

and that's always, we have some test data down below. 25

25

Then the next step, 26

26

once you've got these coordinates is to do reverse geocoding 27

27

on these coordinates 28

28

and reverse geocoding means to convert coordinates 29

29

to a meaningful location, 30

30

for example, a city or a country name. 31

31

And so the API that we're gonna use for that is this one. 32

32

So go to this URL, Geocode.xyz, 33

33

and then here click on API. 34

34

And so down here you then have the format 35

35

of the URL that you need to use, 36

36

in order to do reverse geocoding. 37

37

All right? 38

38

So the URL format is simply this one here, 39

39

but instead of XML, 40

40

you should use JSON. 41

41

So that's exactly what we have here. 42

42

All right? 43

43

So to do this, you should use the fetch API of course, 44

44

and then also promises just like we have been doing 45

45

in the last couple of videos. 46

46

However, do not use the JSON function 47

47

that we created previously. 48

48

So that would be cheating, 49

49

because it would make this whole challenge too easy. 50

50

Next, once you have the data take a look at it, 51

51

and then using the data print a message like this here 52

52

to the console. 53

53

Then chain of catch method to the end of the promise 54

54

and log any errors that might occur to the console. 55

55

Then finally there's one important thing about this API, 56

56

which is that it only allows you 57

57

to make three requests per second. 58

58

So if you reload the page really fast, 59

59

then you will get an error with the code four or three. 60

60

And this is an error with the request. 61

61

So it's a little bit like the four or four error, 62

62

that we worked on before. 63

63

Remember? 64

64

So the fetch function does not reject the promise 65

65

in this case, 66

66

and so you basically have to do that manually, 67

67

and so that is step five. 68

68

And so with that, you completed part one. 69

69

So part one is basically about reverse geocoding. 70

70

And then in part two it's time to use the data that you get 71

71

from step number one, to render a country. 72

72

And so take the relevant attribute from the geocoding API 73

73

and plug it into the countries API that we have been using. 74

74

And just like we have been doing rendered a country 75

75

and also catch any errors. 76

76

And for this one, you can actually even copy the code. 77

77

So there's no needs to type the same code, 78

78

at least if you're in a hurry. 79

79

So if you want to write the same code again 80

80

of course that's still great 81

81

because that will help your muscle memory 82

82

to really internalize these concepts. 83

83

Now if for any reason, 84

84

by the time you're watching this course 85

85

this API here is no longer working. 86

86

Then please just Google for another reverse geocoding API. 87

87

So I'm sure there should be another one that you can use. 88

88

Okay? 89

89

But anyway, once you have all of this done, 90

90

then you should test your function with these, 91

91

three tests, data coordinates. 92

92

So hopefully you can complete this challenge 93

93

and have some fun along the way. 94

94

So I designed this one too, 95

95

one more time, be fun for you. 96

96

So go have some fun now. 97

97

And I see you back here once you're ready. 98

98

All right. 99

99

So here I am back and here goes my solution. 100

100

So 'where am I' is the function that we're gonna create 101

101

and attach you, hopefully create it yourself. 102

102

And so if your coat works perfectly then, 103

103

there's actually not even a need 104

104

to watch this video probably to the end. 105

105

But anyway, let's now take this URL format 106

106

and then do a fetch request to this URL. 107

107

So fetch here, let's use a template string 108

108

because now here we need to plug in a latitude. 109

109

And then here after the comma, we need the longitude. 110

110

All right, then on this, 111

111

We call the then method and here we get to response. 112

112

Let's just call it res for now. 113

113

And then immediately we return res.json, 114

114

which remember we'll return a new promise. 115

115

And it is this one, which then we'll get the data, 116

116

because the data is going to be the resolved value 117

117

of this promise. 118

118

Right? So that's nothing you, 119

119

and so let's take a look at the data here. 120

120

All right. 121

121

So let's reload here. 122

122

Oh, and of course I need to call this function indeed. 123

123

So let's grab these coordinates, give it a safe. 124

124

And so now it actually already worked. 125

125

All right. 126

126

So let's open it 127

127

and let's see what kind of stuff we have here. 128

128

So we have the city, 129

129

we have the, 130

130

basically the confidence that this data is correct, 131

131

which is 90%, which is pretty good. 132

132

So the country is Germany. 133

133

And then here we have all kinds of stuff, 134

134

but what matters is actually the country, 135

135

at least for part two, 136

136

which is gonna be to render the country. 137

137

But for now, the task is to lock to the console as string. 138

138

You are in city and then country. 139

139

So like in Berlin, Germany. 140

140

Now, okay? 141

141

So let's do that. 142

142

So you are in, 143

143

and then (data.city), 144

144

(data.country), 145

145

country, like this, 146

146

and all right. 147

147

So we are in Berlin, Germany. 148

148

Let's actually already do this with the other coordinates. 149

149

So let's see what countries we are in. 150

150

I actually have no idea. 151

151

All right. 152

152

So we get undefined, undefined. 153

153

And so this is actually the problem that 154

154

I was mentioning right at the beginning. 155

155

So, this one where the API, sorry. 156

156

So where the API only allows three requests per second. 157

157

And so, now we got this error four or three. 158

158

And so indeed it is exactly this one. 159

159

All right? 160

160

And so one more time the fetch function 161

161

is not correctly handling this error. 162

162

So it is not rejecting the promise, 163

163

even though this clearly is an error. 164

164

And so as you already know, we need to now manually do that. 165

165

So here we need to now return. 166

166

And just to make sure let's take a look at the response 167

167

and this doesn't always happen. 168

168

Okay. 169

169

And so in this case, it actually worked just fine. 170

170

So one of this error is Cape town South Africa, 171

171

and the other one is Mumbai in India. 172

172

All right? 173

173

So let's try to reload again, very fast here. 174

174

And so now we get that error again. 175

175

Okay? 176

176

So where's that response? 177

177

So the one that's associated to 13.381. 178

178

So that's this one. 179

179

And so one more time you get that okay. 180

180

Is false. 181

181

So let's use that to our advantage. 182

182

So if res.okay, 183

183

is false, 184

184

then throw new error 185

185

with the error message problem with geocoding. 186

186

And again, let's actually include the status code here. 187

187

All right? 188

188

So, here we are throwing a new error. 189

189

And so we are rejecting this promise, 190

190

that's gonna be returned here, 191

191

but we are, as of now not catching it anywhere. 192

192

And so at this point 193

193

we would have an unhandled promise rejection. 194

194

And actually, let me show that to you. 195

195

So I need to save this a bit faster 196

196

in order to create the error. 197

197

So, sometimes it's not that easy to catch it. 198

198

Let's do it really fast here now, all right. 199

199

So now you get uncaught promise, basically. 200

200

So the error message is already the one that we want, 201

201

but it should not be uncaught. 202

202

Right? 203

203

And so, indeed we need to catch any promise rejection. 204

204

And so let's do that. 205

205

And all I'm gonna do in this case is simply log it 206

206

to the console as an error, 207

207

simply the error.message. 208

208

And then I will again, like add an emoji here, 209

209

just so we know that it's our own message. 210

210

Okay. 211

211

Something is missing here apparently. 212

212

So here again, we get problem with geocoding. 213

213

And so now we successfully handled the error 214

214

and could now do something more meaningful with it. 215

215

And if we had to like, 216

216

again displaying some kind of error message 217

217

or logging this error 218

218

in some error tracking application. 219

219

Now, okay. 220

220

So I think with this, 221

221

we actually already completed part one. 222

222

So we did four and five in the opposite order, 223

223

but that's okay. 224

224

And so now it's time to use this data 225

225

to render a country. 226

226

And so this is essentially what we already did before. 227

227

So I'm just gonna come here and copy that. 228

228

So, let's see where that is. 229

229

Well, it's even more up there, 230

230

or actually it's not, 231

231

so actually I will just copy this part here 232

232

of the error handling. 233

233

Oh, and actually I can get all of it. 234

234

Okay? 235

235

So let's paste that here then, 236

236

let's get rid of these comments, 237

237

and of course now here we need to do a new fetch. 238

238

So return fetch, 239

239

and then, well actually I need to go back 240

240

and get the country as well. 241

241

So yeah, that's essentially this URL here. 242

242

Okay. 243

243

So let's save it I'm not sure if it's gonna work yet. 244

244

And it doesn't. 245

245

And that's of course, 246

246

because this country here doesn't exist. 247

247

So the country that we need is stored in data.country. 248

248

And so, here we are now logging this string, 249

249

just like we were doing before. 250

250

And then based on that country 251

251

we have our next fecth here, which we will then return. 252

252

And then here we have a dead part where we handle the error, 253

253

if the country cannot be found 254

254

and finally here then we render that country. 255

255

But it is not gonna be a neighbor. 256

256

So let's get rid of this part. 257

257

And up there, we call it response simply res. 258

258

So let's do the same here. 259

259

And for now let's test it only with one testing data. 260

260

So let's see. 261

261

And now we still get an error, 262

262

cannot read properties, zero of undefined. 263

263

So where does that come from? 264

264

And so this stack trace here, 265

265

is once again not really helpful, 266

266

but I think that I still know the answer 267

267

and that is because here we actually needed 268

268

to take the first element of the array. 269

269

If I remember correctly, 270

270

well, now nothing happened. 271

271

Oh, but I think I know why. 272

272

And the reason for that is that, 273

273

previously we had this finally here. 274

274

So we had this finally which set the country's container, 275

275

a perversity back to one. 276

276

And as we did that, we removed this from here. 277

277

So right here. 278

278

So basically now we should set this back here, 279

279

so that we can be back to using it in the future. 280

280

And so if I saved us now, 281

281

Oh, beautiful, 282

282

there you have it. 283

283

And this is really amazing. 284

284

So just using the GPS coordinates, 285

285

we can now determine the country that we are in. 286

286

And then also display it along with a bunch 287

287

of information about the country, 288

288

here on our page, 289

289

and all thanks to the power of APIs 290

290

and also asynchronous JavaScript. 291

291

So let's now also test with these two. 292

292

Now, right? 293

293

But now here in one of them, 294

294

we actually got an error with geocoding. 295

295

And again, the reason for that is, 296

296

that we can only do three requests a second. 297

297

And so sometimes this 10 doesn't really work. 298

298

Now, but now we actually got all three. 299

299

Now this one here for India looks a bit weird, 300

300

right? 301

301

So this one is India but when we get the data for India, 302

302

then apparently because this country also has Indian 303

303

in its name, this is then gonna be 304

304

the first country that is found, 305

305

right. 306

306

So there's probably multiple countries for India, 307

307

but yeah, that doesn't really matter here in this case, 308

308

if you want you can just use some other coordinates here. 309

309

All right? 310

310

But anyway again, I hope you had some fun 311

311

and this was a great use case for how we can actually use, 312

312

multiple APIs in sequence 313

313

to create a really amazing result like this one.