1 00:00:08,050 --> 00:00:13,920 A guys this is Caleb with Dev slopes and in this video we're going to download images using a new function 2 00:00:13,920 --> 00:00:15,420 called retrieve images. 3 00:00:15,450 --> 00:00:20,160 We're also going to write a little function called cancel all sessions that's going to allow us to cancel 4 00:00:20,160 --> 00:00:25,580 the download session so that we don't end up having a lot of duplicate sessions. 5 00:00:25,680 --> 00:00:30,100 And so that we can properly terminate them when they need to be terminated terminated. 6 00:00:30,110 --> 00:00:31,710 Anyway let's move on. 7 00:00:31,740 --> 00:00:36,930 So we're going to open our X code project here and we're going to start by writing a function called 8 00:00:36,990 --> 00:00:38,650 retrieve images. 9 00:00:38,850 --> 00:00:46,530 So go ahead and type that phunk retrieve images and the cool thing is that this function whip's retrieve 10 00:00:46,530 --> 00:00:47,400 images. 11 00:00:47,400 --> 00:00:52,350 This function is going to be much easier to parse through the data because we've already downloaded 12 00:00:52,350 --> 00:00:55,880 it and appended it to the image you are LRA. 13 00:00:55,890 --> 00:01:00,480 So we're just dealing with a local array of you or else of all these images so it's going to be much 14 00:01:00,510 --> 00:01:03,150 easier to use the data. 15 00:01:03,210 --> 00:01:04,140 Pretty cool. 16 00:01:04,140 --> 00:01:10,410 So let's go ahead and we need to basically create a completion handler because we need to be able to 17 00:01:10,410 --> 00:01:16,260 notify that we have downloaded all of the images and get a notice that it's done so that we can reload 18 00:01:16,260 --> 00:01:20,040 the collection view load in all the images to the cells et cetera et cetera. 19 00:01:20,070 --> 00:01:28,110 So to do that we're going to basically create an identical handler to appear by typing handler at escaping 20 00:01:29,100 --> 00:01:34,400 or making it escaping so that the value can be passed outside of this function. 21 00:01:34,580 --> 00:01:36,690 Ok so it doesn't get stuck in the closure. 22 00:01:36,910 --> 00:01:41,970 And let's go ahead and create a function that's going to return an empty function we don't really need 23 00:01:41,970 --> 00:01:45,660 to return anything and that's why we're doing that inside the function. 24 00:01:45,660 --> 00:01:49,720 We use an underscore because function types are not allowed to have names. 25 00:01:49,800 --> 00:01:51,280 So we use an underscore. 26 00:01:51,420 --> 00:01:57,990 And we're just going to use this call this the status of type Boolean in case status means finished 27 00:01:57,990 --> 00:02:00,070 or not call. 28 00:02:00,120 --> 00:02:01,400 So that's that. 29 00:02:01,440 --> 00:02:07,530 Now we need to actually first create an array that's going to hold all the images just like we did with 30 00:02:07,530 --> 00:02:09,080 image you are right. 31 00:02:09,090 --> 00:02:15,480 So let's go up to the top of our class here and let's create a variable for that as well called var 32 00:02:15,810 --> 00:02:17,640 image array. 33 00:02:18,180 --> 00:02:25,010 And let's go ahead and call that type UI image. 34 00:02:25,590 --> 00:02:27,490 Okay and let's instantiate it. 35 00:02:27,780 --> 00:02:29,580 Scroll back down. 36 00:02:29,910 --> 00:02:31,000 And where were we. 37 00:02:31,050 --> 00:02:33,240 We were right here retrieve images. 38 00:02:33,270 --> 00:02:33,870 OK. 39 00:02:34,170 --> 00:02:37,830 When we enter this function we should first clear out image array. 40 00:02:37,830 --> 00:02:43,440 So go ahead and type image array and then equals empty brackets that way if there are currently images 41 00:02:43,440 --> 00:02:47,200 in there it's cleared out so that the new ones can come in and not interrupt. 42 00:02:47,430 --> 00:02:52,950 But basically what we're going to do now is we're going to cycle through our recently filled image you 43 00:02:52,950 --> 00:03:00,000 r l array and we're going to basically create an Alamo file request to download each image from it's 44 00:03:00,000 --> 00:03:00,760 you are out. 45 00:03:00,960 --> 00:03:06,030 So go ahead and type for you Arel an image you Arel array. 46 00:03:06,330 --> 00:03:14,310 Then we're going to call Alamo fire request and we'll pass it in the U R L K from our array. 47 00:03:14,310 --> 00:03:16,700 Now this is where we're using Alamo fire image. 48 00:03:16,710 --> 00:03:18,040 This is the coolest thing. 49 00:03:18,060 --> 00:03:23,130 Normally Alamo fire does not have the capability to download a straight up image. 50 00:03:23,190 --> 00:03:28,290 It does have the ability to download data or we could parse through Jason and then cast that as data 51 00:03:28,320 --> 00:03:31,210 and then create a UI image pass in the data. 52 00:03:31,260 --> 00:03:32,550 All of that. 53 00:03:32,550 --> 00:03:40,870 But Alamo fire image allows us to call daat response image to see that dot response image and it returned 54 00:03:40,870 --> 00:03:43,230 to completion handler of type image. 55 00:03:43,230 --> 00:03:50,040 So press enter on that and we're going to call this response because that's the response is a data response 56 00:03:50,770 --> 00:03:52,770 of type image. 57 00:03:52,770 --> 00:03:59,010 Now what we can do inside this function is we're going to deal with the response and we're going to 58 00:03:59,190 --> 00:04:02,480 create a constant that holds the image value. 59 00:04:02,490 --> 00:04:09,320 So go ahead and type guard let image equals response result value. 60 00:04:09,430 --> 00:04:14,970 It might help if I spell response right response that result value and that pulls out the image value 61 00:04:15,060 --> 00:04:16,470 from the response. 62 00:04:16,470 --> 00:04:21,450 Now of course if we don't get anything else we want to just return. 63 00:04:21,510 --> 00:04:24,660 Meaning get out of this function so that we don't have a crash. 64 00:04:24,660 --> 00:04:27,340 That's a way we can be a safe coder. 65 00:04:27,360 --> 00:04:28,730 Now we need to use this image. 66 00:04:28,740 --> 00:04:32,160 So we're going to go ahead and for this particular you are. 67 00:04:32,190 --> 00:04:40,220 We're going to call a self image array append and we're going to give it the image from our response. 68 00:04:40,240 --> 00:04:46,540 Now if you go ahead and look at what this is you'll see that it's of type image. 69 00:04:46,750 --> 00:04:51,050 And if we go into image array it's of type UI image. 70 00:04:51,070 --> 00:04:57,640 Now the cool thing is when we pass it in image is a comparable type from Alamo fire that we can use 71 00:04:57,640 --> 00:05:00,970 as an image is really really cool that it lets us do that. 72 00:05:00,970 --> 00:05:08,110 So we just downloaded an image from our u r l we appended it to our image array and now we need to update 73 00:05:08,140 --> 00:05:11,770 our progress label right to show that that image has been downloaded. 74 00:05:11,950 --> 00:05:21,370 So let's go ahead and type self up progress label text and that's going to equal blank out of 40 images 75 00:05:21,770 --> 00:05:23,770 downloaded. 76 00:05:23,860 --> 00:05:31,230 Now if you remember we basically have a number that is being downloaded every time this comes through 77 00:05:31,240 --> 00:05:32,850 we want it to be updated. 78 00:05:32,860 --> 00:05:37,320 So what we can do is we can give it the number of items in the image array. 79 00:05:37,330 --> 00:05:40,510 So let's go ahead and do that by using string encapsulation. 80 00:05:40,510 --> 00:05:46,840 And let's just call a self image array count that way once we have one it will show up as one out of 81 00:05:46,840 --> 00:05:49,660 40 images downloaded then two then three than four. 82 00:05:49,840 --> 00:05:55,930 And that is how we're going to store that value so that we can see how many images have been downloaded. 83 00:05:55,930 --> 00:05:58,490 So the user has a clue of what's going on. 84 00:05:58,690 --> 00:05:59,980 That's really easy. 85 00:06:00,010 --> 00:06:06,760 Now what we're going to do beneath this is we're going to set up a check to see if the amount of images 86 00:06:07,030 --> 00:06:10,790 in our image array matches the amount of you or else we downloaded. 87 00:06:10,990 --> 00:06:17,800 So to do that what we're going to do is we're going to go ahead and type if self image array count is 88 00:06:17,890 --> 00:06:22,970 equal to self image you are LRA count. 89 00:06:23,800 --> 00:06:25,970 Then we're going to go ahead and use our handler. 90 00:06:25,990 --> 00:06:27,960 That's when we know that we're done. 91 00:06:28,120 --> 00:06:32,710 So type handler and pass it a boolean of true. 92 00:06:32,950 --> 00:06:34,520 That is how we know that we're done. 93 00:06:34,540 --> 00:06:38,160 And that's how we can tell that we have all of the images that we need. 94 00:06:38,440 --> 00:06:45,340 So let's go ahead and let's go up to where we called this originally which is in drop pin and we need 95 00:06:45,340 --> 00:06:46,790 to think why are we going to do now. 96 00:06:46,800 --> 00:06:49,080 We've retrieved all of our you ourselves. 97 00:06:49,210 --> 00:06:55,420 And we actually can get rid of this print function but now that we have retrieved them we need to retrieve 98 00:06:55,420 --> 00:06:57,080 all of the images from them. 99 00:06:57,160 --> 00:06:58,490 But I see a problem. 100 00:06:58,600 --> 00:07:01,330 We passed in through here and that works. 101 00:07:01,330 --> 00:07:09,700 But the issue is that this is supposed to be a constant with its own unique name like finished K meaning 102 00:07:09,700 --> 00:07:15,610 that the value could be set as true or false but simply by passing in true here we're sort of overwriting 103 00:07:15,610 --> 00:07:17,080 this to always return true. 104 00:07:17,080 --> 00:07:18,370 But what if it failed. 105 00:07:18,370 --> 00:07:23,560 So we need to pass in finished so that we know whether or not we actually have a true or false value 106 00:07:23,630 --> 00:07:30,610 should be able to change and we need to do a conditional check here so if finished meaning if finished 107 00:07:30,610 --> 00:07:33,520 returns as true we could also do if finished equals true. 108 00:07:33,520 --> 00:07:36,280 That's fine but you can just say if finished. 109 00:07:36,280 --> 00:07:41,950 Meaning if it's true then what we need to do is retrieve images. 110 00:07:41,950 --> 00:07:43,480 Simple as that. 111 00:07:43,570 --> 00:07:48,600 And of course we we're going to want to use the handler so that we know when that is finished. 112 00:07:48,880 --> 00:07:50,200 And let's go ahead and type that. 113 00:07:50,200 --> 00:07:53,420 So finished is what we can use for that handler. 114 00:07:53,440 --> 00:07:56,550 That's how we know that we're done downloading all of our images. 115 00:07:56,770 --> 00:08:03,130 And what do we want to do if finished what should we do. 116 00:08:03,130 --> 00:08:09,600 Well we should hide the spinner because remember the spinner is spinning on our collection. 117 00:08:09,910 --> 00:08:17,110 We should hide the label and we should also reload our collection view with all of the images that we 118 00:08:17,110 --> 00:08:17,990 just now download. 119 00:08:18,000 --> 00:08:21,900 We want them to show up right so we can do two of these things. 120 00:08:21,900 --> 00:08:25,030 Now we can hide the spinner and we can hide the label. 121 00:08:25,030 --> 00:08:33,610 So I'm going to delete those and call self dot remove spinner and self remove label or remove progress 122 00:08:33,610 --> 00:08:34,730 label rather. 123 00:08:34,780 --> 00:08:37,360 And those are the two things that we can do. 124 00:08:37,360 --> 00:08:42,710 We have not yet set up our collection view to even pull data from our image array. 125 00:08:42,760 --> 00:08:44,030 We'll do that in the next video. 126 00:08:44,200 --> 00:08:47,810 But I'm going to save this here so that we remember that that's what we're going to do. 127 00:08:47,830 --> 00:08:53,050 There's only one last issue we need to look at and that is here since we're inside of another closure 128 00:08:53,050 --> 00:09:00,010 we need to call self because this this is publicly accessible in this class and we need to call self 129 00:09:00,010 --> 00:09:02,560 so that we can use it from the view controller. 130 00:09:02,590 --> 00:09:08,360 So we should go ahead and check to see if this works we should get all of our images downloading. 131 00:09:08,420 --> 00:09:12,890 It should update our label it should remove our spinner and progress label when it reaches 40. 132 00:09:12,890 --> 00:09:14,600 Let's go ahead and build and run. 133 00:09:14,600 --> 00:09:15,950 Let's see how we did. 134 00:09:16,010 --> 00:09:20,960 And then in the next video we'll set up our collection view so that it actually loads the images into 135 00:09:21,020 --> 00:09:23,240 all of the different cells in the collection view. 136 00:09:23,600 --> 00:09:26,190 So let's give it a try. 137 00:09:26,270 --> 00:09:30,030 It's loading OK. 138 00:09:30,040 --> 00:09:30,760 There we go. 139 00:09:30,790 --> 00:09:31,990 We have zoomed in. 140 00:09:32,080 --> 00:09:35,750 Let's drop a pin and let's see if the label gets updated. 141 00:09:40,400 --> 00:09:40,840 All right. 142 00:09:40,850 --> 00:09:41,510 Awesome. 143 00:09:41,510 --> 00:09:43,000 So it looks like the label is showing up. 144 00:09:43,000 --> 00:09:45,470 It says three out of 45 out of 46 out of 40. 145 00:09:45,470 --> 00:09:45,870 OK good. 146 00:09:45,890 --> 00:09:51,200 So it's updating every time there's a photo downloading and I'm noticing that the fonts too big so I'm 147 00:09:51,200 --> 00:09:57,120 actually going to go change that where we create the label which I think is up here near the top and 148 00:09:57,200 --> 00:09:58,850 progress label. 149 00:09:59,000 --> 00:10:02,830 Let's make it maybe size 14 that that will update in the next build. 150 00:10:02,840 --> 00:10:06,790 So for now we're just waiting until it gets to 40 to see if it properly hides. 151 00:10:06,950 --> 00:10:11,410 And later it will reload the collection view. 152 00:10:11,430 --> 00:10:11,940 All right. 153 00:10:12,060 --> 00:10:12,420 Awesome. 154 00:10:12,420 --> 00:10:14,430 So it looks like it made it to 40. 155 00:10:14,430 --> 00:10:15,460 It hid. 156 00:10:15,780 --> 00:10:18,120 And that's exactly what we were hoping for. 157 00:10:18,120 --> 00:10:18,960 This is awesome. 158 00:10:18,960 --> 00:10:27,000 So now we need to handle the instance of what if a user cancels What if they swipe down like we can 159 00:10:27,210 --> 00:10:29,640 to cancel it should stop the request. 160 00:10:29,640 --> 00:10:30,720 It should stop the download. 161 00:10:30,720 --> 00:10:31,580 Right. 162 00:10:31,680 --> 00:10:35,910 And we're going to set up a function that can do that call called cancel all sessions. 163 00:10:35,910 --> 00:10:41,420 So in order to get to that scroll down and we're going to put it right beneath retrieve images. 164 00:10:41,420 --> 00:10:50,220 Go ahead and type phunk cancel all sessions and then inside of those curly braces we're going to actually 165 00:10:50,250 --> 00:10:53,420 access a singleton class from Alamo fire. 166 00:10:53,430 --> 00:10:56,940 So go ahead and type Alamo fire session manager. 167 00:10:57,120 --> 00:10:58,500 That's a singleton. 168 00:10:58,500 --> 00:11:01,220 We're going to get the default session manager. 169 00:11:01,320 --> 00:11:07,050 We're going to get it session and we're going to call a function here called Get tasks with completion 170 00:11:07,050 --> 00:11:08,420 handler. 171 00:11:08,430 --> 00:11:15,610 Now press enter to set up this completion handler and we're going to call this session data task. 172 00:11:15,840 --> 00:11:18,970 Ok this is all of the data tasks that come in. 173 00:11:19,050 --> 00:11:24,000 This is going to be called upload up load data. 174 00:11:24,290 --> 00:11:26,810 OK and this is going to be download data. 175 00:11:26,820 --> 00:11:34,380 These are three constants that are used to hold all three different types of sessions that can be happening 176 00:11:34,410 --> 00:11:35,330 in your app. 177 00:11:35,340 --> 00:11:40,710 Now we're required to use all three of these here but we are not required to use them all within the 178 00:11:40,710 --> 00:11:41,520 closure. 179 00:11:41,520 --> 00:11:42,570 We're not uploading anything. 180 00:11:42,570 --> 00:11:45,960 So we actually don't need to worry about the upload data session task. 181 00:11:45,970 --> 00:11:47,490 But here's what we're going to do. 182 00:11:47,490 --> 00:11:53,100 We're going to cancel every instance of session data task and every instance of download data. 183 00:11:53,310 --> 00:11:58,110 If you look you can see that session data task maybe you can't at the moment. 184 00:11:58,110 --> 00:12:00,910 Well anyway session data task is an array. 185 00:12:00,910 --> 00:12:01,530 This is an array. 186 00:12:01,530 --> 00:12:06,240 This is an array we have arrays here meaning we're going to need to cycle through all of them to cancel 187 00:12:06,240 --> 00:12:07,470 all of the tasks. 188 00:12:07,470 --> 00:12:10,430 There's a really cool and easy Swiftie way to do it. 189 00:12:10,590 --> 00:12:18,240 So let's start with the session did a task by typing session data task for each and for each allows 190 00:12:18,240 --> 00:12:20,970 us basically to cycle through like a for loop. 191 00:12:20,970 --> 00:12:27,180 But instead of saying for a task in-session data task and then calling tasks cancel what we can do is 192 00:12:27,180 --> 00:12:34,200 instead we can give it some curly braces we can use dollar signs zero and dollar signs zero basically 193 00:12:34,200 --> 00:12:41,550 creates that placeholder as if we were typing for a task in session data task right. 194 00:12:41,550 --> 00:12:45,170 We could do print task or will like. 195 00:12:45,180 --> 00:12:53,120 Like I said we can do tasks cancel right now task is like a temporary variable that is used for every 196 00:12:53,130 --> 00:12:55,120 instance in that array. 197 00:12:55,320 --> 00:13:00,410 Dollar Signs zero is the same thing it's just kind of a generic variable name. 198 00:13:00,570 --> 00:13:04,440 And so we can just call DOT cancel we can fit everything on one line. 199 00:13:04,440 --> 00:13:05,820 It's like a single line for loop. 200 00:13:05,820 --> 00:13:07,090 Really really cool. 201 00:13:07,110 --> 00:13:11,850 So we just canceled all of the session data tasks and now we need to cancel all of the download data 202 00:13:11,850 --> 00:13:16,890 tasks as well so called download data for each wups for each. 203 00:13:16,890 --> 00:13:18,290 Make sure you get the right one there. 204 00:13:18,480 --> 00:13:20,840 Curly braces and then inside. 205 00:13:20,970 --> 00:13:24,300 Dollar Signs zero dot cancel. 206 00:13:24,480 --> 00:13:28,650 Now using this function we just canceled all of the sessions that we need. 207 00:13:28,980 --> 00:13:35,070 And that's actually the perfect way to make sure that you're not having multiple data sessions happening 208 00:13:35,070 --> 00:13:38,660 on top of one another that can be really really inefficient. 209 00:13:38,790 --> 00:13:42,000 In your app and so we're going to make sure that our app is nice and efficient. 210 00:13:42,300 --> 00:13:44,790 And now we need to just think of where does this go. 211 00:13:44,790 --> 00:13:46,510 Cancel all sessions. 212 00:13:46,800 --> 00:13:54,220 Remember in our app when we drop a pen it pulls up our view here like that when we swipe down. 213 00:13:54,270 --> 00:13:55,410 It hides. 214 00:13:55,440 --> 00:14:00,660 I think that's where it should be cancelling every session as well so we need to go find the animate 215 00:14:00,660 --> 00:14:03,770 down function which I believe is up here. 216 00:14:04,110 --> 00:14:04,680 Yes. 217 00:14:04,680 --> 00:14:05,100 OK. 218 00:14:05,370 --> 00:14:10,410 So animate view down is here and whenever we swipe down we should cancel all sessions. 219 00:14:10,410 --> 00:14:12,960 That's a great place to put it. 220 00:14:13,020 --> 00:14:14,460 So that's looking good. 221 00:14:14,460 --> 00:14:16,340 That'll cancel all of the sessions. 222 00:14:16,380 --> 00:14:23,580 Now there's another thing that we should do is well what if the view is up and what if we click to add 223 00:14:23,640 --> 00:14:24,270 a new pin. 224 00:14:24,270 --> 00:14:31,850 Right let's say we get to maybe 4 photos and we add a new pin believe it or not it's not actually canceling 225 00:14:31,850 --> 00:14:34,390 the session it's creating a new one on top of that. 226 00:14:34,400 --> 00:14:39,770 So in order to be the most efficient we should definitely remove or cancel all sessions before we start 227 00:14:39,770 --> 00:14:40,810 a new session. 228 00:14:40,880 --> 00:14:45,600 So in droppin that's that's where we double click and drop a pen. 229 00:14:45,610 --> 00:14:51,710 We should cancel the session and started over so that we get a brand new fresh fresh session every time. 230 00:14:51,710 --> 00:14:52,400 Very cool. 231 00:14:52,400 --> 00:14:57,800 So let's go ahead and call cancel all sessions from drop pendens Well when we remove all of the stuff 232 00:14:57,800 --> 00:15:00,580 we might as well remove the session as well. 233 00:15:00,600 --> 00:15:02,900 So very very cool. 234 00:15:03,020 --> 00:15:05,310 Well sorry let's actually go check to see if this works. 235 00:15:05,330 --> 00:15:07,860 Let's build and run it before we move on. 236 00:15:08,150 --> 00:15:14,210 We'll have the the terminal or the console pop up and the console will show us when the sessions are 237 00:15:14,270 --> 00:15:14,830 exited. 238 00:15:14,900 --> 00:15:17,690 So let's go ahead and open it up here. 239 00:15:17,690 --> 00:15:21,470 We'll get a lot of a lot of debug messages here. 240 00:15:21,500 --> 00:15:26,360 Now I'm going to go ahead and drop a new pin it cancelled out and you'll see right here it says finished 241 00:15:26,360 --> 00:15:32,390 with error and error just means that it printed an error saying maybe user cancelled session or something 242 00:15:32,390 --> 00:15:33,320 like that. 243 00:15:33,920 --> 00:15:40,910 But the cool thing is if I swipe down as well like so you'll notice we get the same finished with error 244 00:15:40,910 --> 00:15:43,880 message meaning the task is being canceled and we're starting over. 245 00:15:43,880 --> 00:15:44,840 Every single time. 246 00:15:45,080 --> 00:15:46,540 Which is really really cool. 247 00:15:46,550 --> 00:15:51,600 This is a great way to make sure that our app is nice and efficient and not wasting any resources. 248 00:15:51,640 --> 00:15:57,200 So go ahead and we're going to move on to the next video we're going to set up our collection view to 249 00:15:57,200 --> 00:16:00,930 have an image view to pass in an image to that image view. 250 00:16:01,070 --> 00:16:04,000 And to add that is a view to our collection view cell. 251 00:16:04,070 --> 00:16:07,630 That way we can show all of our awesome images that we just downloaded from Flickr. 252 00:16:07,630 --> 00:16:10,000 I'm really excited to get that working. 253 00:16:10,000 --> 00:16:12,980 So let's go ahead and head over to the next video and let's get it set up.