1 00:00:01,290 --> 00:00:04,410 Let's now keep promisifying things 2 00:00:04,410 --> 00:00:05,800 and this time around, 3 00:00:05,800 --> 00:00:09,820 we're gonna promisify the geolocation API, 4 00:00:09,820 --> 00:00:12,330 and this is gonna be really cool 5 00:00:12,330 --> 00:00:15,170 because it will allow us to take the small app 6 00:00:15,170 --> 00:00:17,880 that we built in the last coding challenge 7 00:00:17,880 --> 00:00:19,393 to the next level. 8 00:00:21,580 --> 00:00:25,250 Now we used the geolocation API before, 9 00:00:25,250 --> 00:00:28,023 and so let's start by reviewing how it works. 10 00:00:29,090 --> 00:00:31,959 So remember we use navigator 11 00:00:31,959 --> 00:00:36,959 .geolocation.getcurrentposition, 12 00:00:38,276 --> 00:00:41,030 and then this function here accepts two callbacks 13 00:00:41,030 --> 00:00:43,240 where the first is for the success 14 00:00:43,240 --> 00:00:46,080 and the second one is for the error. 15 00:00:46,080 --> 00:00:47,830 So this first callback function 16 00:00:47,830 --> 00:00:50,683 actually gets access to the position object. 17 00:00:51,540 --> 00:00:53,780 So let's pass that in as an argument 18 00:00:53,780 --> 00:00:55,779 to this callback function, 19 00:00:55,779 --> 00:00:59,003 then let's simply log that to the console. 20 00:01:00,570 --> 00:01:02,640 So this is our first callback, 21 00:01:02,640 --> 00:01:05,763 and now let's create a second callback with the error. 22 00:01:07,000 --> 00:01:07,833 So for example, 23 00:01:07,833 --> 00:01:12,180 in case that the user does not allow the page to get access 24 00:01:12,180 --> 00:01:14,190 to the current location 25 00:01:14,190 --> 00:01:15,410 and so in that case, 26 00:01:15,410 --> 00:01:20,000 let's just lock that error to the console 27 00:01:20,000 --> 00:01:21,653 just as we did previously. 28 00:01:22,510 --> 00:01:25,950 To now, just like before Andy mapped the app, 29 00:01:25,950 --> 00:01:29,050 JavaScript asks us for permission here 30 00:01:29,050 --> 00:01:30,800 and when we allow, 31 00:01:30,800 --> 00:01:34,140 then at some point when JavaScript actually figures out 32 00:01:34,140 --> 00:01:37,810 the location, then we get that data back 33 00:01:37,810 --> 00:01:40,210 and so here it is, 34 00:01:40,210 --> 00:01:41,570 and so again, 35 00:01:41,570 --> 00:01:44,280 this is actually asynchronous behavior 36 00:01:44,280 --> 00:01:47,870 in exactly the way that we have been talking about. 37 00:01:47,870 --> 00:01:52,083 So the code is not blocked, which we can check here. 38 00:01:54,730 --> 00:01:58,760 So we have a console.log after the geolocation. 39 00:01:58,760 --> 00:02:03,760 Now part here and still, this part here is locked first 40 00:02:04,770 --> 00:02:06,900 and so this one happens first 41 00:02:06,900 --> 00:02:09,760 and so that's because this function here 42 00:02:09,760 --> 00:02:12,880 basically offloaded its work to the background. 43 00:02:12,880 --> 00:02:15,950 So to the web API environment in the browser, 44 00:02:15,950 --> 00:02:18,790 and then immediately it moved on right here 45 00:02:18,790 --> 00:02:19,793 to the next line. 46 00:02:21,590 --> 00:02:25,433 So this is very clearly a callback based API. 47 00:02:26,622 --> 00:02:29,860 So we have to pass in these different callbacks 48 00:02:29,860 --> 00:02:32,580 and so this is another great opportunity 49 00:02:32,580 --> 00:02:37,537 to promisify a callback based API, to a promise based API. 50 00:02:38,410 --> 00:02:40,440 So let's do that 51 00:02:40,440 --> 00:02:42,623 and it's actually pretty simple. 52 00:02:43,470 --> 00:02:45,560 So let's create a function here 53 00:02:45,560 --> 00:02:48,240 just like before with the wait function. 54 00:02:48,240 --> 00:02:49,090 So get positioned 55 00:02:51,350 --> 00:02:54,253 and we don't need to pass anything into this one, 56 00:02:55,520 --> 00:03:00,220 and just like before we are going to return a new promise, 57 00:03:00,220 --> 00:03:02,573 which we then can handle later on. 58 00:03:03,530 --> 00:03:06,310 So here we pass in the executer function, 59 00:03:06,310 --> 00:03:10,700 which gets access to the resolve function 60 00:03:10,700 --> 00:03:12,900 and the reject function, 61 00:03:12,900 --> 00:03:16,350 which remember we can use to mark the promise 62 00:03:16,350 --> 00:03:19,023 as either rejected or fulfilled. 63 00:03:19,960 --> 00:03:20,793 All right. 64 00:03:21,670 --> 00:03:26,670 So let's actually grab this code here and paste it here 65 00:03:26,760 --> 00:03:28,680 and now all we need to change 66 00:03:28,680 --> 00:03:30,320 is basically what happens here 67 00:03:30,320 --> 00:03:32,323 in each of these callback functions. 68 00:03:33,240 --> 00:03:35,120 So remember that this one here 69 00:03:35,120 --> 00:03:37,720 is the success callback function 70 00:03:37,720 --> 00:03:40,060 and so it receives the position, 71 00:03:40,060 --> 00:03:43,853 and so when we have success, we want to resolve the promise. 72 00:03:44,950 --> 00:03:47,800 So we want to mark it as fulfilled, 73 00:03:47,800 --> 00:03:51,210 and so therefore we call the result function 74 00:03:51,210 --> 00:03:54,040 and we pass in that position object, 75 00:03:54,040 --> 00:03:56,863 because that is actually the fulfilled value 76 00:03:56,863 --> 00:03:59,470 that we want to get from this promise 77 00:03:59,470 --> 00:04:01,263 in case that is successful. 78 00:04:02,750 --> 00:04:04,180 So that's the whole reason 79 00:04:04,180 --> 00:04:06,620 of using this function in the first place. 80 00:04:06,620 --> 00:04:09,760 It is to get access to the current position, 81 00:04:09,760 --> 00:04:12,070 and that is in this object 82 00:04:12,070 --> 00:04:15,453 and so therefore that's what we're gonna pass into resolve, 83 00:04:17,820 --> 00:04:18,850 So in the last lecture, 84 00:04:18,850 --> 00:04:21,880 we just passed a simple string into resolve 85 00:04:21,880 --> 00:04:24,460 because that would then be the resolved value 86 00:04:24,460 --> 00:04:25,890 of the promise. 87 00:04:25,890 --> 00:04:29,000 So basically the future value of the promise, 88 00:04:29,000 --> 00:04:32,830 but in this case, it has this more meaningful object, 89 00:04:32,830 --> 00:04:36,220 which we actually need outside of the promise here 90 00:04:36,220 --> 00:04:37,173 when we handle it. 91 00:04:38,940 --> 00:04:43,173 But anyway, here we do the same, but with reject. 92 00:04:44,600 --> 00:04:47,000 Now to this is going to work just fine, 93 00:04:47,000 --> 00:04:50,040 but we can actually make this even simpler 94 00:04:50,040 --> 00:04:53,200 because if this function here automatically 95 00:04:53,200 --> 00:04:55,660 calls these callback functions here, 96 00:04:55,660 --> 00:04:59,920 and if it also automatically passes in the position, 97 00:04:59,920 --> 00:05:01,883 then we can simply do this. 98 00:05:02,990 --> 00:05:04,515 So let's copy it here 99 00:05:04,515 --> 00:05:07,283 and that will comment this part. 100 00:05:08,330 --> 00:05:13,330 So we can simply do this resolve and reject 101 00:05:14,630 --> 00:05:15,900 and that's it. 102 00:05:15,900 --> 00:05:19,160 So this is exactly the same as this one here. 103 00:05:19,160 --> 00:05:23,810 So before we specified the callback manually like this, 104 00:05:23,810 --> 00:05:26,210 but all we did was to take the position 105 00:05:26,210 --> 00:05:28,970 and pass it down into resolve, 106 00:05:28,970 --> 00:05:31,690 but here that now happens automatically. 107 00:05:31,690 --> 00:05:34,780 So now resolve itself is the callback function, 108 00:05:34,780 --> 00:05:36,920 which will get called with the position, 109 00:05:36,920 --> 00:05:39,993 and so that's exactly what we do here, 110 00:05:42,649 --> 00:05:44,783 and the same of course, here with reject, 111 00:05:45,670 --> 00:05:47,953 and so now let's actually try this out. 112 00:05:48,850 --> 00:05:53,850 So get position and then we want to handle the result. 113 00:05:55,350 --> 00:05:57,990 So again, this is exactly the same thing 114 00:05:57,990 --> 00:06:00,723 that we did previously with the fetch function, 115 00:06:02,030 --> 00:06:03,683 or also with the wait function 116 00:06:03,683 --> 00:06:06,453 that we created in the last lecture. 117 00:06:07,930 --> 00:06:11,570 So let's now log this position to the console 118 00:06:12,930 --> 00:06:15,630 and for now we don't need the catch block 119 00:06:16,890 --> 00:06:18,083 and so let's see. 120 00:06:19,200 --> 00:06:22,960 So it probably is now getting the position in the background 121 00:06:22,960 --> 00:06:26,000 and yeah, so now we get it back. 122 00:06:26,000 --> 00:06:28,779 So the promise was marked as successful 123 00:06:28,779 --> 00:06:30,867 by the resolve function 124 00:06:30,867 --> 00:06:33,060 and so therefore then here, 125 00:06:33,060 --> 00:06:36,280 this callback was called in the den handler 126 00:06:37,130 --> 00:06:40,600 and so the position was passed in and here finally, 127 00:06:40,600 --> 00:06:45,500 we logged it to the console, so beautiful. 128 00:06:45,500 --> 00:06:47,230 This worked just fine 129 00:06:47,230 --> 00:06:51,077 and so we just promisified the geolocation API 130 00:06:51,077 --> 00:06:53,600 to a promised based API now, 131 00:06:53,600 --> 00:06:57,173 but now let's actually take it to the next level. 132 00:06:58,059 --> 00:07:01,360 So remember how in the last coding challenge, 133 00:07:01,360 --> 00:07:04,990 we built a function which received GPS coordinates 134 00:07:04,990 --> 00:07:09,310 as an input, and then rendered the corresponding country. 135 00:07:09,310 --> 00:07:13,970 Well, now we actually got these coordinates via geolocation 136 00:07:13,970 --> 00:07:17,230 and so we don't even have to pass in any coordinates 137 00:07:17,230 --> 00:07:18,423 into that function. 138 00:07:19,260 --> 00:07:21,180 So let me actually get that function 139 00:07:21,180 --> 00:07:22,493 from the coding challenge. 140 00:07:24,070 --> 00:07:26,520 So that's this one here 141 00:07:34,020 --> 00:07:35,320 and so remember here, 142 00:07:35,320 --> 00:07:38,130 we passed in the latitude and longitude 143 00:07:38,130 --> 00:07:41,780 and then based on that, we did reverse geocoding, 144 00:07:41,780 --> 00:07:43,400 which gave us the country 145 00:07:43,400 --> 00:07:46,670 that basically these coordinates belong to 146 00:07:46,670 --> 00:07:49,100 and so then based on that country, 147 00:07:49,100 --> 00:07:51,910 we could get all the data about the country 148 00:07:51,910 --> 00:07:54,503 and then display it here on our page, 149 00:07:55,710 --> 00:07:59,450 but now since we have this get positioned function, 150 00:07:59,450 --> 00:08:02,420 we actually no longer need to even pass in 151 00:08:02,420 --> 00:08:04,170 these coordinates 152 00:08:04,170 --> 00:08:06,840 and so now we're gonna be able to build a function 153 00:08:06,840 --> 00:08:09,860 that will tell us where we are in the world, 154 00:08:09,860 --> 00:08:13,690 simply based on the geolocation of our device. 155 00:08:13,690 --> 00:08:15,923 So how cool is that? 156 00:08:16,980 --> 00:08:19,590 So we no longer needs this one 157 00:08:19,590 --> 00:08:21,060 and now here this time, 158 00:08:21,060 --> 00:08:23,883 we are gonna start by getting the position. 159 00:08:25,330 --> 00:08:26,180 So get positioned 160 00:08:29,670 --> 00:08:34,670 and then let's do something with the position. 161 00:08:35,500 --> 00:08:38,120 So we already know what that the coordinates 162 00:08:38,120 --> 00:08:41,040 are here in this coords property. 163 00:08:41,040 --> 00:08:45,000 I just don't remember if they are an array or an object 164 00:08:45,000 --> 00:08:48,170 so let's lock that to the console here for starters. 165 00:08:48,170 --> 00:08:49,770 So console.log(position.coords). 166 00:08:54,360 --> 00:08:55,290 All right. 167 00:08:55,290 --> 00:08:59,140 And so for now, we'll just leave it at that 168 00:08:59,140 --> 00:09:02,293 and we will not yet connected to this part here. 169 00:09:05,640 --> 00:09:06,967 So let's run this 170 00:09:06,967 --> 00:09:11,650 and probably we're gonna get an error when we run this 171 00:09:11,650 --> 00:09:13,940 and actually we first need to set it up 172 00:09:13,940 --> 00:09:15,263 with the event handler. 173 00:09:16,350 --> 00:09:20,750 So remember that's the button and then add event listener 174 00:09:21,950 --> 00:09:25,550 and of course we could also immediately run the function, 175 00:09:25,550 --> 00:09:27,420 but I think that it's nice to call it 176 00:09:27,420 --> 00:09:29,730 only when we click that button 177 00:09:29,730 --> 00:09:33,430 and here we actually can simply pass in that function now. 178 00:09:33,430 --> 00:09:35,073 So the, where am I function? 179 00:09:36,140 --> 00:09:38,863 Because we don't need to pass in any arguments. 180 00:09:40,150 --> 00:09:41,493 So if we click now, 181 00:09:43,662 --> 00:09:47,310 so here, then we get an error that latitude is not defined, 182 00:09:47,310 --> 00:09:50,920 but what we were interested in any way is get the latitude 183 00:09:50,920 --> 00:09:54,193 and longitude of this coords object, 184 00:09:55,310 --> 00:09:59,703 and so let's not go ahead and destructure this object. 185 00:10:03,100 --> 00:10:08,050 So const latitude and longitude equals this, 186 00:10:12,960 --> 00:10:16,930 but now here we call them lats and lng 187 00:10:16,930 --> 00:10:19,753 and so let's do this. 188 00:10:25,590 --> 00:10:27,780 So basically giving them new names 189 00:10:28,750 --> 00:10:30,643 and next, all we need to do done 190 00:10:30,643 --> 00:10:33,053 is to chain the next promise, 191 00:10:34,160 --> 00:10:38,170 and so let's grab this code here and put it in here 192 00:10:39,750 --> 00:10:41,140 and so just like before 193 00:10:41,140 --> 00:10:45,560 we now simply create a new promise here, basically, 194 00:10:45,560 --> 00:10:47,320 and then return that, 195 00:10:47,320 --> 00:10:51,583 and so then we can handle it here in the next, den handler, 196 00:10:54,690 --> 00:10:58,920 and so now we have an even longer chain, as you can see, 197 00:10:58,920 --> 00:11:01,430 this one here still comes from here, 198 00:11:01,430 --> 00:11:02,860 no need for that anymore 199 00:11:04,370 --> 00:11:06,070 and so now let's see what happens. 200 00:11:07,270 --> 00:11:09,593 So a latitude is not defined, 201 00:11:11,130 --> 00:11:14,440 but that's because I got the syntax here wrong. 202 00:11:14,440 --> 00:11:16,720 So in the structuring, the equal sign 203 00:11:16,720 --> 00:11:19,443 is actually to set a default value. 204 00:11:21,210 --> 00:11:22,840 So this is not what we want. 205 00:11:22,840 --> 00:11:25,720 We want to still destruct latitude 206 00:11:25,720 --> 00:11:27,670 and then we want to say that, 207 00:11:27,670 --> 00:11:31,840 We basically want to create a variable called lat. 208 00:11:31,840 --> 00:11:34,120 So based on that latitude, variable 209 00:11:35,220 --> 00:11:39,353 and to your lng to fit this one and this one. 210 00:11:41,370 --> 00:11:43,400 So let's try again, 211 00:11:43,400 --> 00:11:45,280 and so it does take some time. 212 00:11:45,280 --> 00:11:46,210 So in the real world, 213 00:11:46,210 --> 00:11:48,880 we would have like some loading spinner, 214 00:11:48,880 --> 00:11:50,773 but it works. 215 00:11:53,320 --> 00:11:57,150 So we got now the country that I'm currently in, 216 00:11:57,150 --> 00:11:59,130 which is indeed Portugal 217 00:11:59,130 --> 00:12:02,833 and all of that was simply done using geolocation. 218 00:12:03,870 --> 00:12:06,800 So again, we got to the coordinates here, 219 00:12:06,800 --> 00:12:10,730 then from those coordinates, we got the location. 220 00:12:10,730 --> 00:12:13,030 So the actual location with country 221 00:12:14,000 --> 00:12:15,400 and so then from there, 222 00:12:15,400 --> 00:12:18,460 we got all the data about the country, 223 00:12:18,460 --> 00:12:21,540 and so now we have the ability of 224 00:12:21,540 --> 00:12:24,300 basically displaying the flag of a country 225 00:12:24,300 --> 00:12:27,763 simply based on geolocation on any device. 226 00:12:28,630 --> 00:12:31,120 Now, just imagine that you would have to handle 227 00:12:31,120 --> 00:12:33,940 all of these asynchronous operations here 228 00:12:33,940 --> 00:12:36,020 using callback function. 229 00:12:36,020 --> 00:12:39,403 So that would literally be hell. 230 00:12:40,390 --> 00:12:43,040 So therefore the name callback hell, 231 00:12:43,040 --> 00:12:44,350 but again, with this, 232 00:12:44,350 --> 00:12:48,480 we have a really nice flat chain of promises 233 00:12:48,480 --> 00:12:52,270 that's easy to handle and also easy to manage. 234 00:12:52,270 --> 00:12:53,280 Now. 235 00:12:53,280 --> 00:12:57,870 But anyway, with this, we saw that We can really promisify 236 00:12:57,870 --> 00:13:01,790 all kinds of asynchronous stuff in JavaScript. 237 00:13:01,790 --> 00:13:04,400 For example, we could also promisify, 238 00:13:04,400 --> 00:13:07,660 the old XML HTTP request function 239 00:13:07,660 --> 00:13:11,180 that we used in the beginning to make Ajax calls, 240 00:13:11,180 --> 00:13:15,260 or also we could promisify the image loading example 241 00:13:15,260 --> 00:13:18,980 that We have seen a couple of times in our slides 242 00:13:18,980 --> 00:13:22,060 and actually that's exactly what we're gonna do 243 00:13:22,060 --> 00:13:23,853 in the next coding challenge.