1
00:00:05,970 --> 00:00:11,630
Alright so continuing on from the last video, we started talking about this new format of data that we

2
00:00:11,630 --> 00:00:17,900
got when we changed the parameter to @ format = Json. Browsers in general don't render json

3
00:00:17,900 --> 00:00:19,210
data very well.

4
00:00:19,250 --> 00:00:24,290
So as I mentioned you probably get the same display irrespective of what browser you're using, unless

5
00:00:24,290 --> 00:00:27,710
you're using Internet Explorer which probably won't be able to handle the data at all.

6
00:00:28,100 --> 00:00:33,150
But that does show the beauty about an API because it's doing all the hard work for you.

7
00:00:33,310 --> 00:00:38,500
So you can see how we now have Json data rather than XML just by changing an argument.

8
00:00:38,650 --> 00:00:43,400
Now I want to talk very briefly about this, just so you understand how Json works.

9
00:00:43,400 --> 00:00:46,180
Now what you're seeing on the screen here isn't quite valid

10
00:00:46,310 --> 00:00:54,520
Json code, so ignore the json Flickr feed and the opening parentheses at the start up here, and I'm going

11
00:00:54,520 --> 00:00:55,960
to be coming back to that in a minute.

12
00:00:56,320 --> 00:01:02,290
But anything that's between the curly braces, the first left curly brace and the closing

13
00:01:02,290 --> 00:01:09,450
right curly brace, is an object, and anything inside square brackets is an array, so you can see we've

14
00:01:09,460 --> 00:01:10,160
got a square bracket here,

15
00:01:10,180 --> 00:01:11,710
we got some items there.

16
00:01:14,480 --> 00:01:17,860
We're going to have to go right down to the bottom,

17
00:01:21,210 --> 00:01:23,520
there's the closing square brackets as you can see down there.

18
00:01:23,840 --> 00:01:29,420
So that's an array, and items that are within an object are called properties, so go back up to the top of

19
00:01:29,430 --> 00:01:36,120
the file again, title in this case here, and link - they're both properties.

20
00:01:36,200 --> 00:01:39,590
Both of these appear in the main object, and then properties with the names

21
00:01:39,650 --> 00:01:44,760
title and link, appear within the items array as you can see here, title and link.

22
00:01:44,810 --> 00:01:50,340
Now items is an array of objects and you can see where each object in the array starts and ends by

23
00:01:50,390 --> 00:01:51,650
the curly braces.

24
00:01:52,040 --> 00:01:57,020
So again we've got this curly brace here that opens and closes, so that's one entry, that's one array entry if you

25
00:01:57,160 --> 00:01:58,340
will.

26
00:01:58,580 --> 00:02:04,470
So each object starts and ends with a curly brace and is separated from the previous one with a comma.

27
00:02:04,810 --> 00:02:08,530
So these objects are the individual records, one for each image.

28
00:02:08,530 --> 00:02:13,600
Now you might be thinking it looks a bit complex, but essentially, if you remember that an object starts

29
00:02:13,600 --> 00:02:16,900
with a curly brace and an array is the square bracket,

30
00:02:17,080 --> 00:02:21,260
then it makes sense. And the good news is that we don't really need to worry about all that.

31
00:02:21,290 --> 00:02:26,500
We've got a computer to do it for us. So you can see we've got lots of items in the array which you would

32
00:02:26,500 --> 00:02:29,710
expect because each image is a separate item.

33
00:02:29,730 --> 00:02:36,300
Now each item has a tags property, you can see down here for one, which is what we've been searching on.

34
00:02:36,370 --> 00:02:40,900
So all of these items should have tags that contain one or more of the words that we were searching

35
00:02:40,900 --> 00:02:45,620
on, Android, Oreo or SDK. Android

36
00:02:46,210 --> 00:02:50,770
there, Android there for that one, and Android for that one, and so on.

37
00:02:50,920 --> 00:02:55,210
Now the next thing to do, and I suggest you always do this when you're working with this type of data,

38
00:02:55,660 --> 00:02:58,430
is to check that the data's actually valid.

39
00:02:58,460 --> 00:03:05,020
Now valid means that it conforms to the specification for whatever type of data it's supposed to be, json

40
00:03:05,290 --> 00:03:06,540
in this case.

41
00:03:06,550 --> 00:03:11,320
Now we could assume that flickr is giving us valid json data, but it's not good to assume that.

42
00:03:11,800 --> 00:03:14,590
In fact it's not good to assume anything when programming.

43
00:03:14,830 --> 00:03:20,740
What I suggest you do is go to a site that lets you validate json data, then literally copy and paste

44
00:03:20,740 --> 00:03:23,020
this in and be sure that it's correct.

45
00:03:23,020 --> 00:03:26,920
Now the reason we want to do that is that we're not spending hours trying to debug problems in our program

46
00:03:26,920 --> 00:03:27,570
code,

47
00:03:27,640 --> 00:03:30,390
only to find the data itself is invalid.

48
00:03:30,400 --> 00:03:34,040
Now you can search online for json validators, but I'm going to go to one called

49
00:03:34,040 --> 00:03:42,820
Json lint which I know is one that works fairly well. I'll paste that link in. Now I could copy and paste all

50
00:03:42,820 --> 00:03:44,370
the data that's on the screen,

51
00:03:44,710 --> 00:03:50,460
but instead I'm going to just copy the URL because that's a lot easier, and then paste that into this web

52
00:03:50,460 --> 00:03:53,520
site. So I'm going to go back to the website where we had all that data, I'm

53
00:03:53,540 --> 00:03:59,780
going to copy that, and go back to the json lint website. Now

54
00:03:59,870 --> 00:04:01,620
this is json validator,

55
00:04:01,870 --> 00:04:06,010
so you can paste in here the actual json data or url.

56
00:04:06,010 --> 00:04:11,470
Now sites like this are there to help you confirm that a particular piece of json's valid.

57
00:04:11,470 --> 00:04:17,019
Now you can also find XML validators online if you're working with XML data, and it's always

58
00:04:17,019 --> 00:04:21,790
a good idea to make sure your source data is valid as I said. So I'm going to paste in the URL that

59
00:04:21,790 --> 00:04:30,400
we're looking at, which I've copied, and I'm going to click on validate, json down here. Now we actually get errors

60
00:04:30,410 --> 00:04:30,750
here.

61
00:04:30,860 --> 00:04:34,270
So what that's telling us is that this isn't valid Json,

62
00:04:34,440 --> 00:04:39,550
and we could end up causing ourselves problems if we try to work with it within our code.

63
00:04:39,570 --> 00:04:43,650
Now if you're already familiar with json, you've probably already spotted that the Json flickr feed

64
00:04:43,730 --> 00:04:49,590
and the left parenthesis at the top shouldn't be there and the result is that it's showing an error on

65
00:04:49,690 --> 00:04:54,120
line one, pointing to Json flickr feed down here in the red box.

66
00:04:54,210 --> 00:04:56,760
So it expected one of the values listed down here,

67
00:04:57,230 --> 00:05:00,530
but instead it got something that's undefined json flickr feed

68
00:05:00,920 --> 00:05:06,440
Now I'm going to take you through a process here, so that you understand how to debug these things, because

69
00:05:06,440 --> 00:05:10,850
if you don't understand the process of going through and figuring out this data, then you're going to

70
00:05:10,850 --> 00:05:13,640
be hitting insurmountable roadblocks.

71
00:05:13,640 --> 00:05:18,260
Now it's always good to know how to sort out problems like this in case, you get something similar with

72
00:05:18,260 --> 00:05:20,660
another feed that you want to work with.

73
00:05:21,170 --> 00:05:25,950
So clearly this is telling us at the moment that this Json data that we got back from flickr isn't

74
00:05:25,960 --> 00:05:29,120
valid, and it tells us what is objecting to.

75
00:05:29,690 --> 00:05:31,250
So what would you do at this point?

76
00:05:31,700 --> 00:05:36,420
Well what I wouldn't do, I wouldn't go and spend hours on the documentation because it's probably an

77
00:05:36,430 --> 00:05:39,090
answer right here in the text on the screen.

78
00:05:39,170 --> 00:05:44,990
So what I would probably do is copy this little bit of code here, this json text that it's complaining

79
00:05:44,990 --> 00:05:56,060
about, I'd copy thatn and I'd open a new tab and I'd do a search for jsonFlickrFeed Invalid json, because

80
00:05:56,060 --> 00:05:57,450
obviously that's where the problem is.

81
00:05:57,500 --> 00:06:03,100
It's invalid json data and that's the identifier which will hopefully lead us to an answer.

82
00:06:03,110 --> 00:06:07,760
The other option is to write something in our code to strip out the invalid text, and that's obviously a solution

83
00:06:07,760 --> 00:06:09,730
if you can't find anything else.

84
00:06:09,740 --> 00:06:15,550
The problem is that once we've written code for parsing Json, we can reuse that whenever we have Json

85
00:06:15,560 --> 00:06:16,900
data to deal with.

86
00:06:16,940 --> 00:06:20,910
In fact we could produce a generic json parser that we can use.

87
00:06:20,920 --> 00:06:26,240
Now I'm not going to do that in this app, and there are json libraries that you can use but they'd will fail

88
00:06:26,240 --> 00:06:27,210
with this data.

89
00:06:27,470 --> 00:06:33,820
So it's worth trying to get something that's valid before we write any code. So pasting json flickr feed invalid

90
00:06:33,830 --> 00:06:36,700
json or searching for that in Google, you can see

91
00:06:37,430 --> 00:06:39,880
it's produced a couple of results.

92
00:06:39,920 --> 00:06:42,550
The stack overflow, this first one, is one that looks interesting.

93
00:06:42,550 --> 00:06:43,360
So we click on that, and

94
00:06:48,140 --> 00:06:51,120
you can see down here it's talking about the old web API.

95
00:06:51,330 --> 00:06:56,460
Now that's interesting. Someone has said that the old web API, and that's very similar to the URL that

96
00:06:56,460 --> 00:07:03,130
we're using. Now we didn't use ID but we did use format = Jason and we also added some tags.

97
00:07:03,510 --> 00:07:08,140
Now that comment talks about using the current web API, but also adding this extra parameter,

98
00:07:08,220 --> 00:07:10,820
no json call back equals one.

99
00:07:11,310 --> 00:07:18,120
So what's actually happening is that flickr is passing us something about Json P rather than Json.

100
00:07:18,200 --> 00:07:22,830
Now if you experiment with other feeds such as Photobucket, you'll see that they list the two formats

101
00:07:22,830 --> 00:07:29,520
separately, but flickr just uses the format Json and allows us to specify this no json callback parameter

102
00:07:29,880 --> 00:07:33,180
to get Json rather than Json p.

103
00:07:33,540 --> 00:07:36,460
So let's actually try adding that to see if it stops us from getting stuck.

104
00:07:36,660 --> 00:07:41,710
So I'm going to go back to the browser URL where we had the data showing. Let's add at that option,

105
00:07:41,730 --> 00:07:45,830
the argument, right on the end. We're going to add...

106
00:07:46,920 --> 00:07:51,730
....

107
00:07:52,720 --> 00:07:54,400
....

108
00:07:54,800 --> 00:08:00,540
....

109
00:08:00,660 --> 00:08:02,500
Now you can see when I got that right,

110
00:08:02,640 --> 00:08:06,120
that the json component got stripped out immediately,

111
00:08:06,210 --> 00:08:11,740
so basically without the first bit that was causing problems. Now at the time I'm recording this, Firefox

112
00:08:11,930 --> 00:08:13,990
formats the Json really nicely.

113
00:08:14,010 --> 00:08:18,300
So if you want to experiment to make sense of this Json then try the URL in Fire Fox.

114
00:08:18,420 --> 00:08:20,650
So let's quickly try that to see what it looks like.

115
00:08:25,440 --> 00:08:30,930
And you can see how fire Fox has done a good job with this because

116
00:08:30,930 --> 00:08:36,330
its nicely indenting the array allowing us to specify the individual items if we

117
00:08:36,330 --> 00:08:37,980
want to as well.

118
00:08:38,730 --> 00:08:42,919
Alright so that's one way but I'm going to show you a different way to use Json lint. Instead of the URL,

119
00:08:42,929 --> 00:08:46,440
I'm going to copy all the data and paste that in. So I'm going to go back to

120
00:08:46,440 --> 00:08:54,220
Chrome, and I'm going to copy the contents of this page after we've reused the URL with no Json callback equals

121
00:08:54,250 --> 00:08:59,780
one. I'll go back to json lint, I'm going to delete the existing contents,

122
00:08:59,860 --> 00:09:07,470
paste in that the json code, and click on validate Jso,n and this time we get a nice green box down the bottom

123
00:09:07,530 --> 00:09:09,520
that says valid Json.

124
00:09:09,840 --> 00:09:13,520
So that's our problem solved, and we can now the parse the json data using one of

125
00:09:13,540 --> 00:09:17,370
our java kotlin libraries without getting any problems.

126
00:09:17,440 --> 00:09:20,540
Now by the way I'd get the same thing if I'd pasted in the URL.

127
00:09:20,740 --> 00:09:26,900
So just to confirm that I'm going to do that, paste in the URL, delete existing contents, put the URL in

128
00:09:26,900 --> 00:09:33,300
there again and validate, and we're getting valid Json again as well.

129
00:09:33,310 --> 00:09:38,110
Now with that said, I have noticed that sometimes you may still get an error even after the Json flickr feed

130
00:09:38,110 --> 00:09:43,570
text has been removed from the data, and if that happens it's caused by a bug in Flicker itself.

131
00:09:43,630 --> 00:09:47,880
The program will still work successfully so you can ignore any other errors that appear,

132
00:09:48,010 --> 00:09:52,750
if you're sure the data was copied and pasted correctly, and you've definitely got that no json callback

133
00:09:53,050 --> 00:09:55,610
argument specified in the URL.

134
00:09:55,990 --> 00:09:58,820
So if you do get another error try pasting in the URL again.

135
00:09:59,050 --> 00:10:00,310
If that also gives an error,

136
00:10:00,430 --> 00:10:01,720
don't worry at this stage.

137
00:10:01,780 --> 00:10:06,730
Take a screenshot and file it away in case your program doesn't work and you think that may be the

138
00:10:06,730 --> 00:10:07,130
cause,

139
00:10:07,150 --> 00:10:12,490
but continue with the videos and it should be fine. The data being returned is changing all the time

140
00:10:12,490 --> 00:10:17,340
so by the time you run your app, flickr may well will be returning valid data again.

141
00:10:17,500 --> 00:10:23,210
So the lesson here is make sure your source data is correct before you start using it in your code.

142
00:10:23,230 --> 00:10:28,270
You'll be quite frustrated spending hours trying to figure out where the issue is, and if it's all relating

143
00:10:28,300 --> 00:10:33,160
to the source code or the source data coming in the first place. You could've saved yourself hours

144
00:10:33,160 --> 00:10:35,050
of frustration in that scenario.

145
00:10:35,530 --> 00:10:40,420
Bottom line, always make sure the data is correct before attempting any coding relating to parsing that

146
00:10:40,420 --> 00:10:42,130
data.

147
00:10:42,740 --> 00:10:47,200
Alright, so at this point hopefully you understand how to add parameters to the URL as you've seen me doing to

148
00:10:47,200 --> 00:10:51,180
modify the data that's returned by the flickr feed.

149
00:10:51,190 --> 00:10:57,340
For this mini challenge, refer to the feeds page to get the codes for the available languages and then

150
00:10:57,340 --> 00:11:04,360
enter this URL as you can see the screen there, and use the lang parameter to view the results in German.

151
00:11:04,360 --> 00:11:08,440
Then once you've done that, modify the parameter to view the results in another language or in other

152
00:11:08,450 --> 00:11:10,510
languages that you can recognize.

153
00:11:10,510 --> 00:11:14,810
Be aware though that your browser may not be able to display asian character sets for example.

154
00:11:14,980 --> 00:11:20,360
Most can these days but you may get a series of little boxes instead of the Chinese or Korean characters.

155
00:11:20,620 --> 00:11:21,350
So that's your challenge.

156
00:11:21,350 --> 00:11:21,910
See how you go.

157
00:11:21,910 --> 00:11:24,600
Pause the video and I'll see you when you get back.

158
00:11:27,740 --> 00:11:30,370
Alright so hopefully you managed to get that working.

159
00:11:30,430 --> 00:11:33,800
So firstly the available languages, that's available in this URL,

160
00:11:38,270 --> 00:11:39,450
you can see the various languages there.

161
00:11:39,470 --> 00:11:46,760
So we actually need to add the lang parameter with the values de de for German. So essentially if you go back and

162
00:11:46,760 --> 00:11:47,510
copy our

163
00:11:47,530 --> 00:11:52,200
other link that we were using before, and open that in a new tab.

164
00:11:52,350 --> 00:11:54,250
Firstly there's the English version,

165
00:11:54,450 --> 00:12:01,920
and if you want to use the German version, we need to add, on the end of that ampersand.....

166
00:12:02,010 --> 00:12:09,080
...and you can see clearly we're getting that in another language now, we're getting that showing in German, as

167
00:12:09,770 --> 00:12:11,110
an example, some of the code there.

168
00:12:11,250 --> 00:12:13,430
And notice up here how the title's showing in German,

169
00:12:13,730 --> 00:12:19,910
that's the main title of the feed. Instead of the text posted the photo after the author,

170
00:12:20,090 --> 00:12:26,110
we're getting the results in German. Now flickr doesn't translate text that was typed in by these

171
00:12:26,110 --> 00:12:28,800
people posting the photos though, so keep that in mind.

172
00:12:29,140 --> 00:12:36,020
And to get the feed in Chinese, all we need to do is change the language code from de de to zh hk

173
00:12:36,170 --> 00:12:38,700
zh hk

174
00:12:38,720 --> 00:12:41,010
traditional Chinese as you can see there.

175
00:12:41,010 --> 00:12:42,300
So we'll go ahead and do that.

176
00:12:45,770 --> 00:12:47,600
...

177
00:12:50,460 --> 00:12:55,390
and obviously we're getting these weird little characters, these Unicode characters showing in the browser, as I'm attempting to show there,

178
00:12:55,400 --> 00:13:02,160
and if you go back to flickr,

179
00:13:02,160 --> 00:13:03,150
to Firefox rather, you can perhaps see that a little bit better.

180
00:13:05,680 --> 00:13:07,940
You can see that Firefox is showing it a little bit better,

181
00:13:07,980 --> 00:13:13,540
now clearly showing it in Chinese, and again you can see Firefox is much better at seeing this sort of data.

182
00:13:13,770 --> 00:13:16,240
You go back to German again to see what that looks like, and

183
00:13:18,010 --> 00:13:21,290
clearly there's the German for the title.

184
00:13:21,500 --> 00:13:23,680
So there you go, that's it sorted out.

185
00:13:23,690 --> 00:13:27,170
Alright so I'm going end the video now and I'm going to update my Firefox because it's telling me it's critically

186
00:13:27,190 --> 00:13:27,650
out-of-date.

187
00:13:27,650 --> 00:13:29,460
You can see I don't use Firefox that often.

188
00:13:29,740 --> 00:13:35,270
So let's finish the video here. In the next one I'm going to go to Android Studio, we're going to start our project and

189
00:13:35,270 --> 00:13:36,290
start some coding.

190
00:13:36,470 --> 00:13:37,740
So I'll see you in the next video.