Alright so continuing on from the last video, we started talking about this new format of data that we
got when we changed the parameter to @ format = Json. Browsers in general don't render json
data very well.
So as I mentioned you probably get the same display irrespective of what browser you're using, unless
you're using Internet Explorer which probably won't be able to handle the data at all.
But that does show the beauty about an API because it's doing all the hard work for you.
So you can see how we now have Json data rather than XML just by changing an argument.
Now I want to talk very briefly about this, just so you understand how Json works.
Now what you're seeing on the screen here isn't quite valid
Json code, so ignore the json Flickr feed and the opening parentheses at the start up here, and I'm going
to be coming back to that in a minute.
But anything that's between the curly braces, the first left curly brace and the closing
right curly brace, is an object, and anything inside square brackets is an array, so you can see we've
got a square bracket here,
we got some items there.
We're going to have to go right down to the bottom,
there's the closing square brackets as you can see down there.
So that's an array, and items that are within an object are called properties, so go back up to the top of
the file again, title in this case here, and link - they're both properties.
Both of these appear in the main object, and then properties with the names
title and link, appear within the items array as you can see here, title and link.
Now items is an array of objects and you can see where each object in the array starts and ends by
the curly braces.
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
will.
So each object starts and ends with a curly brace and is separated from the previous one with a comma.
So these objects are the individual records, one for each image.
Now you might be thinking it looks a bit complex, but essentially, if you remember that an object starts
with a curly brace and an array is the square bracket,
then it makes sense. And the good news is that we don't really need to worry about all that.
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
expect because each image is a separate item.
Now each item has a tags property, you can see down here for one, which is what we've been searching on.
So all of these items should have tags that contain one or more of the words that we were searching
on, Android, Oreo or SDK. Android
there, Android there for that one, and Android for that one, and so on.
Now the next thing to do, and I suggest you always do this when you're working with this type of data,
is to check that the data's actually valid.
Now valid means that it conforms to the specification for whatever type of data it's supposed to be, json
in this case.
Now we could assume that flickr is giving us valid json data, but it's not good to assume that.
In fact it's not good to assume anything when programming.
What I suggest you do is go to a site that lets you validate json data, then literally copy and paste
this in and be sure that it's correct.
Now the reason we want to do that is that we're not spending hours trying to debug problems in our program
code,
only to find the data itself is invalid.
Now you can search online for json validators, but I'm going to go to one called
Json lint which I know is one that works fairly well. I'll paste that link in. Now I could copy and paste all
the data that's on the screen,
but instead I'm going to just copy the URL because that's a lot easier, and then paste that into this web
site. So I'm going to go back to the website where we had all that data, I'm
going to copy that, and go back to the json lint website. Now
this is json validator,
so you can paste in here the actual json data or url.
Now sites like this are there to help you confirm that a particular piece of json's valid.
Now you can also find XML validators online if you're working with XML data, and it's always
a good idea to make sure your source data is valid as I said. So I'm going to paste in the URL that
we're looking at, which I've copied, and I'm going to click on validate, json down here. Now we actually get errors
here.
So what that's telling us is that this isn't valid Json,
and we could end up causing ourselves problems if we try to work with it within our code.
Now if you're already familiar with json, you've probably already spotted that the Json flickr feed
and the left parenthesis at the top shouldn't be there and the result is that it's showing an error on
line one, pointing to Json flickr feed down here in the red box.
So it expected one of the values listed down here,
but instead it got something that's undefined json flickr feed
Now I'm going to take you through a process here, so that you understand how to debug these things, because
if you don't understand the process of going through and figuring out this data, then you're going to
be hitting insurmountable roadblocks.
Now it's always good to know how to sort out problems like this in case, you get something similar with
another feed that you want to work with.
So clearly this is telling us at the moment that this Json data that we got back from flickr isn't
valid, and it tells us what is objecting to.
So what would you do at this point?
Well what I wouldn't do, I wouldn't go and spend hours on the documentation because it's probably an
answer right here in the text on the screen.
So what I would probably do is copy this little bit of code here, this json text that it's complaining
about, I'd copy thatn and I'd open a new tab and I'd do a search for jsonFlickrFeed Invalid json, because
obviously that's where the problem is.
It's invalid json data and that's the identifier which will hopefully lead us to an answer.
The other option is to write something in our code to strip out the invalid text, and that's obviously a solution
if you can't find anything else.
The problem is that once we've written code for parsing Json, we can reuse that whenever we have Json
data to deal with.
In fact we could produce a generic json parser that we can use.
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
with this data.
So it's worth trying to get something that's valid before we write any code. So pasting json flickr feed invalid
json or searching for that in Google, you can see
it's produced a couple of results.
The stack overflow, this first one, is one that looks interesting.
So we click on that, and
you can see down here it's talking about the old web API.
Now that's interesting. Someone has said that the old web API, and that's very similar to the URL that
we're using. Now we didn't use ID but we did use format = Jason and we also added some tags.
Now that comment talks about using the current web API, but also adding this extra parameter,
no json call back equals one.
So what's actually happening is that flickr is passing us something about Json P rather than Json.
Now if you experiment with other feeds such as Photobucket, you'll see that they list the two formats
separately, but flickr just uses the format Json and allows us to specify this no json callback parameter
to get Json rather than Json p.
So let's actually try adding that to see if it stops us from getting stuck.
So I'm going to go back to the browser URL where we had the data showing. Let's add at that option,
the argument, right on the end. We're going to add...
....
Now you can see when I got that right,
that the json component got stripped out immediately,
so basically without the first bit that was causing problems. Now at the time I'm recording this, Firefox
formats the Json really nicely.
So if you want to experiment to make sense of this Json then try the URL in Fire Fox.
So let's quickly try that to see what it looks like.
And you can see how fire Fox has done a good job with this because
its nicely indenting the array allowing us to specify the individual items if we
want to as well.
Alright so that's one way but I'm going to show you a different way to use Json lint. Instead of the URL,
I'm going to copy all the data and paste that in. So I'm going to go back to
Chrome, and I'm going to copy the contents of this page after we've reused the URL with no Json callback equals
one. I'll go back to json lint, I'm going to delete the existing contents,
paste in that the json code, and click on validate Jso,n and this time we get a nice green box down the bottom
that says valid Json.
So that's our problem solved, and we can now the parse the json data using one of
our java kotlin libraries without getting any problems.
Now by the way I'd get the same thing if I'd pasted in the URL.
So just to confirm that I'm going to do that, paste in the URL, delete existing contents, put the URL in
there again and validate, and we're getting valid Json again as well.
Now with that said, I have noticed that sometimes you may still get an error even after the Json flickr feed
text has been removed from the data, and if that happens it's caused by a bug in Flicker itself.
The program will still work successfully so you can ignore any other errors that appear,
if you're sure the data was copied and pasted correctly, and you've definitely got that no json callback
argument specified in the URL.
So if you do get another error try pasting in the URL again.
If that also gives an error,
don't worry at this stage.
Take a screenshot and file it away in case your program doesn't work and you think that may be the
cause,
but continue with the videos and it should be fine. The data being returned is changing all the time
so by the time you run your app, flickr may well will be returning valid data again.
So the lesson here is make sure your source data is correct before you start using it in your code.
You'll be quite frustrated spending hours trying to figure out where the issue is, and if it's all relating
to the source code or the source data coming in the first place. You could've saved yourself hours
of frustration in that scenario.
Bottom line, always make sure the data is correct before attempting any coding relating to parsing that
data.
Alright, so at this point hopefully you understand how to add parameters to the URL as you've seen me doing to
modify the data that's returned by the flickr feed.
For this mini challenge, refer to the feeds page to get the codes for the available languages and then
enter this URL as you can see the screen there, and use the lang parameter to view the results in German.
Then once you've done that, modify the parameter to view the results in another language or in other
languages that you can recognize.
Be aware though that your browser may not be able to display asian character sets for example.
Most can these days but you may get a series of little boxes instead of the Chinese or Korean characters.
So that's your challenge.
See how you go.
Pause the video and I'll see you when you get back.
Alright so hopefully you managed to get that working.
So firstly the available languages, that's available in this URL,
you can see the various languages there.
So we actually need to add the lang parameter with the values de de for German. So essentially if you go back and
copy our
other link that we were using before, and open that in a new tab.
Firstly there's the English version,
and if you want to use the German version, we need to add, on the end of that ampersand.....
...and you can see clearly we're getting that in another language now, we're getting that showing in German, as
an example, some of the code there.
And notice up here how the title's showing in German,
that's the main title of the feed. Instead of the text posted the photo after the author,
we're getting the results in German. Now flickr doesn't translate text that was typed in by these
people posting the photos though, so keep that in mind.
And to get the feed in Chinese, all we need to do is change the language code from de de to zh hk
zh hk
traditional Chinese as you can see there.
So we'll go ahead and do that.
...
and obviously we're getting these weird little characters, these Unicode characters showing in the browser, as I'm attempting to show there,
and if you go back to flickr,
to Firefox rather, you can perhaps see that a little bit better.
You can see that Firefox is showing it a little bit better,
now clearly showing it in Chinese, and again you can see Firefox is much better at seeing this sort of data.
You go back to German again to see what that looks like, and
clearly there's the German for the title.
So there you go, that's it sorted out.
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
out-of-date.
You can see I don't use Firefox that often.
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
start some coding.
So I'll see you in the next video.