0
1
00:00:01,190 --> 00:00:07,160
So we've managed to use Alamofire to get the response from Wikipedia about the flower that we
1

2
00:00:07,160 --> 00:00:08,050
detected.
2

3
00:00:08,240 --> 00:00:11,920
The next thing that we need to do is to parse that JSON that we get back.
3

4
00:00:11,930 --> 00:00:18,050
So as usual, we're going to use our trusty JSON editor online to visualize the data in a more human
4

5
00:00:18,050 --> 00:00:18,920
readable way.
5

6
00:00:19,010 --> 00:00:25,280
And if you look inside this query key, you'll see three objects: normalized, pageids, and pages.
6

7
00:00:25,400 --> 00:00:32,390
So the two that we're interested in is the pageid because that allow us to tap into this key here and
7

8
00:00:32,390 --> 00:00:34,060
we can grab that extract.
8

9
00:00:34,100 --> 00:00:38,960
So let's go about chaining together some of those keys so that we can access this extract.
9

10
00:00:38,960 --> 00:00:46,070
So let's contain our JSON object inside something called flowerJSON, and it's going to be of type
10

11
00:00:46,120 --> 00:00:46,820
JSON.
11

12
00:00:47,090 --> 00:00:55,940
And this is going to be parsed using our SwiftyJSON's library. And we are going to tap into the 
12

13
00:00:57,080 --> 00:01:00,790
response.result.value.
13

14
00:01:04,170 --> 00:01:07,450
So at this point, we know that the response result is success,
14

15
00:01:07,620 --> 00:01:11,370
so it's reasonably safe to unwrap this value object.
15

16
00:01:11,370 --> 00:01:18,330
Next, I'm going to create a page ID that's going to contain this page ID value that will enable me to
16

17
00:01:18,330 --> 00:01:20,250
be able to use it as a key.
17

18
00:01:20,250 --> 00:01:22,830
At this stage and get into this extract.
18

19
00:01:22,830 --> 00:01:25,940
So Page ID is going to equal flower Jaison.
19

20
00:01:25,950 --> 00:01:28,130
So this is at the top level here.
20

21
00:01:28,260 --> 00:01:32,160
And the first key we need to give in is the queery.
21

22
00:01:32,160 --> 00:01:34,410
So let's add that as a string.
22

23
00:01:35,160 --> 00:01:38,610
And then the next level down is page ID right.
23

24
00:01:38,610 --> 00:01:43,570
So you've got these three objects and we're going to tap into this key called Page ID here.
24

25
00:01:45,020 --> 00:01:50,160
And finally we're going to pull out the zeroth object so the first element in that array.
25

26
00:01:50,250 --> 00:01:58,620
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

27
00:01:58,620 --> 00:02:03,600
is of type JSON and we need to convert it into a String value.
27

28
00:02:03,600 --> 00:02:07,380
So, again, this is provided to us from SwiftyJSON.
28

29
00:02:07,410 --> 00:02:14,780
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

30
00:02:14,970 --> 00:02:22,950
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

31
00:02:22,950 --> 00:02:29,460
So from the top level down, we're going into query, and then we're going into pages, and then we're passing
31

32
00:02:29,460 --> 00:02:30,450
in that key.
32

33
00:02:30,510 --> 00:02:35,290
And finally, we're passing in the key extract in order to get all the way down here.
33

34
00:02:35,430 --> 00:02:39,070
So let's do that. Let's call it flowerDescription.
34

35
00:02:40,080 --> 00:02:49,390
And this is going to equal flowerJSON, passing in the key "query," next key is called pages, I think.
35

36
00:02:49,450 --> 00:02:50,320
Yeah, pages.
36

37
00:02:50,370 --> 00:02:54,700
And then after pages is the pageid.
37

38
00:02:54,750 --> 00:02:57,390
And finally, that last key was called extract.
38

39
00:02:57,390 --> 00:03:03,030
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

40
00:03:03,120 --> 00:03:06,180
So let's go ahead and add that last key "extract."
40

41
00:03:06,210 --> 00:03:10,130
And, again, we want to get the string value of it.
41

42
00:03:10,190 --> 00:03:17,790
All right. So now we can add a label to our main storyboard in order to visualize it on screen.
42

43
00:03:17,880 --> 00:03:20,430
So at the moment, all we've got is a Image View.
43

44
00:03:20,490 --> 00:03:26,330
So I'm going to move that Image View up a bit, so that maybe it's still a square.
44

45
00:03:26,350 --> 00:03:32,600
We can check that in the size inspektor, width: 375, so I make the height 375 as well.
45

46
00:03:32,700 --> 00:03:39,120
And then I'm going to clear the constraints for this view, and instead, I'm going to stick it to the top,
46

47
00:03:39,120 --> 00:03:44,790
left, and right, and also maintain the aspect ratio so that it's a 1 to 1 ratio.
47

48
00:03:44,880 --> 00:03:45,240
All right.
48

49
00:03:45,240 --> 00:03:48,840
So then at the bottom here, we're going to add a UILabel.
49

50
00:03:48,900 --> 00:03:56,820
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

51
00:03:56,820 --> 00:03:59,460
whole bunch of constraints,
51

52
00:03:59,790 --> 00:04:04,700
all four corners, basically, and hit Add, and we're done.
52

53
00:04:04,710 --> 00:04:11,370
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

54
00:04:11,370 --> 00:04:12,850
here.
54

55
00:04:12,870 --> 00:04:14,030
Let's just put it down here.
55

56
00:04:14,290 --> 00:04:16,760
Let's call it just label.
56

57
00:04:16,770 --> 00:04:18,870
I'm going to tap into it here.
57

58
00:04:19,020 --> 00:04:25,770
So self.label.text = flowerDescription.
58

59
00:04:25,770 --> 00:04:29,570
Let's just check that query, pageids, 0.
59

60
00:04:29,580 --> 00:04:32,210
Okay. So we've already got one typo here.
60

61
00:04:32,460 --> 00:04:37,350
So instead of pageid, it's pageids, because it's actually an array of values.
61

62
00:04:37,470 --> 00:04:41,260
And the next one is query, pages, extract.
62

63
00:04:41,400 --> 00:04:45,110
Let's check that query, pages, and extract.
63

64
00:04:45,240 --> 00:04:46,200
Okay. It looks good.
64

65
00:04:46,260 --> 00:04:49,830
So let's give it a spin. So you can see we've got a bit of a problem here.
65

66
00:04:50,070 --> 00:04:54,680
It's only showing in a single line and it's truncating our entire sentence.
66

67
00:04:54,690 --> 00:04:56,240
So let's go and change that.
67

68
00:04:56,340 --> 00:05:02,300
If you go into Main.storyboard and select the label, then we can change the number of lines that are
68

69
00:05:02,300 --> 00:05:04,830
showing. At the moment, its only allowing a single line.
69

70
00:05:04,830 --> 00:05:10,550
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

71
00:05:10,550 --> 00:05:15,600
that it needs. The other thing that we can change is this Autoshrink. Instead of having a Fixed Font Size,
71

72
00:05:16,020 --> 00:05:18,490
we can specify a Minimum Font Size.
72

73
00:05:18,510 --> 00:05:23,040
So let's say maybe shrink down to 10 at the minimum.
73

74
00:05:23,040 --> 00:05:28,260
So then between these two things, it should be able to fit in a paragraph of text without much problem.
74

75
00:05:28,260 --> 00:05:33,840
So let's try that again. Much better, right? Now, in the next lesson, we're going to improve this app even
75

76
00:05:33,840 --> 00:05:38,460
further. Instead of showing the image of the flower that we took onscreen,
76

77
00:05:38,490 --> 00:05:42,010
why don't we show an image of the result of the classification?
77

78
00:05:42,020 --> 00:05:45,720
And when you go on to All - Wikipedia articles, you see a main image being displayed,
78

79
00:05:45,720 --> 00:05:46,190
right?
79

80
00:05:46,440 --> 00:05:51,420
So let's try and download that and display that in the image view, instead of the image that we took.
80

81
00:05:51,420 --> 00:05:53,630
So I'll see you on the next lesson to do that.