0 1 00:00:01,980 --> 00:00:08,040 So as you can see, when you go on to Wikipedia, you usually see this image that shows you the item that's 1 2 00:00:08,040 --> 00:00:09,150 being discussed. 2 3 00:00:09,150 --> 00:00:15,120 So we want to pull down this image of the Barberton Daisy and show it in our app, instead of the image that 3 4 00:00:15,120 --> 00:00:16,590 the user took. 4 5 00:00:16,590 --> 00:00:23,070 So this is actually relatively easy to do. And the tool that we're going to use is a pod called SDWebImage. 5 6 00:00:23,070 --> 00:00:29,550 So you can have a read here on cocoapods.org about what other features and how you can use 6 7 00:00:29,550 --> 00:00:29,900 it, 7 8 00:00:30,120 --> 00:00:34,000 but I'm just going to show you how to implement it in our project. 8 9 00:00:34,070 --> 00:00:40,630 So let's head back into our list of Pods and let's just add that at the bottom here. 9 10 00:00:40,640 --> 00:00:44,080 So it's called SDWebImage. 10 11 00:00:44,690 --> 00:00:45,090 All right. 11 12 00:00:45,110 --> 00:00:54,160 And hit Save. And now I'm going to close down Xcode, go into my Terminal and cd to desktop slash-- 12 13 00:00:54,160 --> 00:00:55,460 I think it's called WhatFlower. 13 14 00:00:55,850 --> 00:00:57,680 And here, I'm going to say pod install. 14 15 00:01:01,030 --> 00:01:04,220 And you can see that it's added the SDWebImage. 15 16 00:01:04,240 --> 00:01:16,010 So, now if we open our WhatFlower, then we should be able to import SDWebImage. 16 17 00:01:16,150 --> 00:01:22,510 And as usual, with Xcode, sometimes it's a little bit weird when you just added in a new pod, so go ahead and command B 17 18 00:01:22,500 --> 00:01:23,560 to build, 18 19 00:01:23,800 --> 00:01:25,630 and that should work without a problem. 19 20 00:01:25,630 --> 00:01:31,600 So, now what we want to do is we want to add to our parameters for making our GET request 20 21 00:01:31,660 --> 00:01:37,770 and there's two extra parameters that we need. We need to add another item to the property's key. 21 22 00:01:37,810 --> 00:01:41,810 And also I want to specify the size of the image that I want to download. 22 23 00:01:42,130 --> 00:01:43,790 So let's add that first one. 23 24 00:01:43,810 --> 00:01:49,480 So to do that, we need to add an additional item to our list of properties that we want. 24 25 00:01:49,480 --> 00:01:54,860 So in addition to extracts, we also want something called pageimages. 25 26 00:01:54,880 --> 00:02:00,660 Now, it's all lowercase and you have to separate it from the extracts using a pipe symbol on your keyboard. 26 27 00:02:00,670 --> 00:02:07,510 Now, in addition to asking for the URL of the pageimage, we also want to specify the size of the image 27 28 00:02:07,510 --> 00:02:08,300 that we want. 28 29 00:02:08,440 --> 00:02:17,320 And you can do that through pageimage or pithumbsize and I'm going to specify "500" for 29 30 00:02:17,320 --> 00:02:22,090 500 pixels by 500 pixels which should work just fine for our purposes. 30 31 00:02:22,180 --> 00:02:23,380 So let's give it a go. 31 32 00:02:29,820 --> 00:02:30,180 All right. 32 33 00:02:30,190 --> 00:02:37,240 So, as you can see, we've now got this thing called Page Image and it's got a name BarbertonDaisy.jpg, 33 34 00:02:37,240 --> 00:02:40,900 and most importantly, is this source here. 34 35 00:02:40,930 --> 00:02:46,030 You can see that this is a URL that is going to lead to our image. 35 36 00:02:46,030 --> 00:02:46,680 There we go. 36 37 00:02:46,690 --> 00:02:49,820 That's exactly what we want to display on screen. 37 38 00:02:49,880 --> 00:02:56,830 So, now let's use that SDWebImage that we incorporated earlier on in order to download that image 38 39 00:02:56,890 --> 00:02:59,030 and display it in our image view. 39 40 00:02:59,110 --> 00:03:05,560 So let's go ahead and delete this line where we're setting the Image View to the userPickedImage, and 40 41 00:03:05,590 --> 00:03:12,770 instead, let's go and parse that JSON that we get back and store that source somewhere. 41 42 00:03:12,820 --> 00:03:19,760 So let's store that URLl inside a constant and let's call it flowerImageURL, 42 43 00:03:19,870 --> 00:03:22,030 and we're going to set it to equal to 43 44 00:03:22,030 --> 00:03:30,640 flowerJSON. And, again, we need to go inside query. The next level down from query is pages. 44 45 00:03:34,700 --> 00:03:41,980 And then, we're, again, using that pageid that we got from earlier on to go into here. 45 46 00:03:42,310 --> 00:03:48,650 And now, you can see you've got extract. You've got page image, then you've got this thing called thumbnail. 46 47 00:03:48,650 --> 00:03:51,430 So let's go into thumbnail. 47 48 00:03:51,640 --> 00:03:59,080 And finally, at last level, we need to go inside thumbnail to source, so that's last one we need to add. 48 49 00:03:59,710 --> 00:04:03,110 And let's change it to a stringValue again. 49 50 00:04:03,200 --> 00:04:08,200 All right. So, now we have this flower image URL, and all that we need to do to update our ImageView 50 51 00:04:08,290 --> 00:04:17,620 by using SDWebImage is just to specify self.imageView.sd_setImage with URL. 51 52 00:04:17,620 --> 00:04:23,830 So this requires data of type URL, but at the moment, we've got type of string. 52 53 00:04:23,860 --> 00:04:26,980 So all we need to convert it is just a right URL, 53 54 00:04:27,190 --> 00:04:36,760 and then we're going to use a string to put in as our URL and the string is, of course, flowerImage URL. 54 55 00:04:37,330 --> 00:04:38,410 And that's it. 55 56 00:04:38,680 --> 00:04:40,340 That's all you need to do. 56 57 00:04:40,750 --> 00:04:43,000 So let's go ahead and give it a spin, shall we? 57 58 00:04:43,150 --> 00:04:44,940 And there we go. 58 59 00:04:45,010 --> 00:04:48,360 We've got our Barberton Daisy being shown up onscreen 59 60 00:04:48,580 --> 00:04:51,770 and also our description being shown up on our app. 60 61 00:04:51,790 --> 00:04:53,250 Isn't that really cooL? 61 62 00:04:53,320 --> 00:04:57,240 So in the next lesson, we're going to be giving our app a little bit of a makeover. 62 63 00:04:57,460 --> 00:05:03,340 And also I'm going to create a app icon for it using Photoshop and Illustrator. So you can follow along 63 64 00:05:03,550 --> 00:05:07,880 or you can just go ahead and modify and design your app, however, you want it to be. 64 65 00:05:07,900 --> 00:05:13,390 So if you want to join me on designing some assets for our app, then have a look at the next lesson. 65 66 00:05:13,420 --> 00:05:15,220 Otherwise,, I'll see you on the next module.