So we've managed to use Alamofire to get the response from Wikipedia about the flower that we 1
detected. 2
The next thing that we need to do is to parse that JSON that we get back. 3
So as usual, we're going to use our trusty JSON editor online to visualize the data in a more human 4
readable way. 5
And if you look inside this query key, you'll see three objects: normalized, pageids, and pages. 6
So the two that we're interested in is the pageid because that allow us to tap into this key here and 7
we can grab that extract. 8
So let's go about chaining together some of those keys so that we can access this extract. 9
So let's contain our JSON object inside something called flowerJSON, and it's going to be of type 10
JSON. 11
And this is going to be parsed using our SwiftyJSON's library. And we are going to tap into the 12
response.result.value. 13
So at this point, we know that the response result is success, 14
so it's reasonably safe to unwrap this value object. 15
Next, I'm going to create a page ID that's going to contain this page ID value that will enable me to 16
be able to use it as a key. 17
At this stage and get into this extract. 18
So Page ID is going to equal flower Jaison. 19
So this is at the top level here. 20
And the first key we need to give in is the queery. 21
So let's add that as a string. 22
And then the next level down is page ID right. 23
So you've got these three objects and we're going to tap into this key called Page ID here. 24
And finally we're going to pull out the zeroth object so the first element in that array. 25
So let's just add 0 at the end and, voila, we've got our pageid. So you can see, at the moment, pageid 26
is of type JSON and we need to convert it into a String value. 27
So, again, this is provided to us from SwiftyJSON. 28
So all we need to do is just to append all of that with a dot, and we can convert it into a String value. 29
And let's use the String value of the pageid in order to pass it in as this key and get into the extract. 30
So from the top level down, we're going into query, and then we're going into pages, and then we're passing 31
in that key. 32
And finally, we're passing in the key extract in order to get all the way down here. 33
So let's do that. Let's call it flowerDescription. 34
And this is going to equal flowerJSON, passing in the key "query," next key is called pages, I think. 35
Yeah, pages. 36
And then after pages is the pageid. 37
And finally, that last key was called extract. 38
So remember that if you make any typos in the key name, you won't be able to pull out the right item either. 39
So let's go ahead and add that last key "extract." 40
And, again, we want to get the string value of it. 41
All right. So now we can add a label to our main storyboard in order to visualize it on screen. 42
So at the moment, all we've got is a Image View. 43
So I'm going to move that Image View up a bit, so that maybe it's still a square. 44
We can check that in the size inspektor, width: 375, so I make the height 375 as well. 45
And then I'm going to clear the constraints for this view, and instead, I'm going to stick it to the top, 46
left, and right, and also maintain the aspect ratio so that it's a 1 to 1 ratio. 47
All right. 48
So then at the bottom here, we're going to add a UILabel. 49
So let's search for Label and then we can add this to the bottom, and then I'm just going to add in a 50
whole bunch of constraints, 51
all four corners, basically, and hit Add, and we're done. 52
All right, let's get rid of that Label default text, and then I'm going to link it up with my View Controller 53
here. 54
Let's just put it down here. 55
Let's call it just label. 56
I'm going to tap into it here. 57
So self.label.text = flowerDescription. 58
Let's just check that query, pageids, 0. 59
Okay. So we've already got one typo here. 60
So instead of pageid, it's pageids, because it's actually an array of values. 61
And the next one is query, pages, extract. 62
Let's check that query, pages, and extract. 63
Okay. It looks good. 64
So let's give it a spin. So you can see we've got a bit of a problem here. 65
It's only showing in a single line and it's truncating our entire sentence. 66
So let's go and change that. 67
If you go into Main.storyboard and select the label, then we can change the number of lines that are 68
showing. At the moment, its only allowing a single line. 69
So if we change that to 0, then it'll try to fit all of the content into the label in as many lines 70
that it needs. The other thing that we can change is this Autoshrink. Instead of having a Fixed Font Size, 71
we can specify a Minimum Font Size. 72
So let's say maybe shrink down to 10 at the minimum. 73
So then between these two things, it should be able to fit in a paragraph of text without much problem. 74
So let's try that again. Much better, right? Now, in the next lesson, we're going to improve this app even 75
further. Instead of showing the image of the flower that we took onscreen, 76
why don't we show an image of the result of the classification? 77
And when you go on to All - Wikipedia articles, you see a main image being displayed, 78
right? 79
So let's try and download that and display that in the image view, instead of the image that we took. 80
So I'll see you on the next lesson to do that.