Alright so it's now time to build our next app, and for this one, as mentioned in the previous video we're going to
be using Flickr. Now Flicker's an image sharing website, previously owned by Yahoo,
but now part of Verisign. Now there's basically billions of images on that website.
It's quite hard to get accurate data as it keeps changing.
Now not all photos are public but there's certainly at least three billion public photos on Flickr.
So what we're going to do is develop an app that'll enable the user to search through Flickr using specific
tags to show the results of that search.
Now we'll display the images and details about them, such as the author, that allow the full image to be viewed
when you tap the thumbnail, and again you saw that demoed in the previous video.
So first things first. Here's Flickr,
so let's go to the Website.
so that's available at flickr.com,
Now if you haven't seen it before, as
you can see here, there's an option to search through the billions of photos.
So you can just type anything up here at the top, Android Oreao for example,
and that gives us lots of photos that have been tagged with Android or Oreo.
So it gives people the ability to upload photos
and, as you saw, search the billions of photos on line. Now what we're going to do with this app is
to use the API from flicker and get some images downloaded to our app.
Now they've actually got a lot of APIs, and we can actually see them on this link.
And when you first come to this list of the various APIs they've got available, you'll probably see that it's
quite overwhelming because there's so many different activities and so forth.
Now there's authentication as you can see there, there's activity blogs and scrolling down,
you can see there's a ton of information here on the various APIs and languages that Flickr support in
their APIs.
But what we're going to be doing is to keep it pretty simple.
We're going to be using one of their public services and that's because it doesn't require authentication.
Now some of these other more advanced APIs need an API key.
Now we saw in a previous app that we created, that we were able to get a Google API Key, and you can do the same
thing for Flickr.
So you could certainly do that, but we're just going to keep this simple and use a public feed that doesn't
require any log on details. Alright so to get to the public feed, and come up here to feeds and click on that.
That takes us to a page, flickr.com/services/feeds
Now all the links I'm visiting by the way will be available in the resources section for this video.
Now on this page there are a number of data feeds in a variety of formats, RSS Atom and so on.
You can see these various formats that we're talking about here, and it's even different languages that you
can actually specify as well.
Now I'm going to be using English which is the default, but I'll specify it explicitly in the app so
that you can change it to a different language if you prefer.
And we're going to keep it pretty simple, we're already going to be going for public photos and videos.
So click this link under available feeds.
Now the description states that the public feed returns a list of public content, matching some criteria
and we can see the URL for the public feed that we're going to be using up here.
There's also a description of all the parameters that we can add to the URL.
Now they're all optional, and we won't be using the first two,
the id and the ids. Now if you've got some of your own photos on flickr, then you can provide your
ID or the IDs of your friends, to get just those photos, and once I've shown you how we're going to build
up the URL, you should be able to include that parameter as well if you want.
Now we've got an option next though for tags, which is what we're going to be using to filter the photos.
We'll also be using the tag mode parameter which affects the way that the tags are used.
So ALL means is that we'll only get photos with all the tags that we use,
ANY will return photos if they have any one, or more obviously, of the tags.
So what we have here is the ability to search on multiple tags and only return images that have all
those tags attached,
or just some of them.
Now in case you're wondering how tags work, when people upload images to flickr, they type in tags and
they associate tags to that image.
So for example if you're uploading a photo about Android Oreo, you might have the tags Android and Oreo,
so that when people are searching they can find your images.
Now we can also choose the type of the format, and we saw the supporting formats on the previous feeds
page.
Now we're going to be using JASON in our app.
So let's actually have a look at that.
URL to see what we'll be working with.
So I'm going to copy this
URL on the page here now,
and I'm going to paste it into a browser tab.
Now if you're using Google's Chrome browser as I am you'll see a load of XML, rather than the actual photos
and descriptions that you see in another browser. Wow other browsers such as Fire Fox will
also render the feed, and will look more like what other browsers look like, but chrome doesn't do
that unfortunately.
Now you can get a plug in for chrome to render RSS feeds, but we don't really need to do that.
In fact the chrome output is more useful for what we want.
That's because we're going to be working with the raw data, so
don't worry if you can't see the photos in your browser and you get a load of XML like I'm showing
you on the screen instead.
Now on microsoft's new edge browser for Windows 10,
the feed doesn't seem to work at all, and that's because it attempts to download photos_public.gne
instead of showing the photos.
Internet Explorer will work fine though. I go into Safari on my Mac I'll actually get this weird message about
no RSS reader being installed.
But if I do it in Firefox
on my Mac and have a look at that,
you see that we do get some representation of the actual data showing, so it is browser dependent.
But again don't worry too much if you're not seeing exactly what I'm showing you, because ultimately
you'll be able to use it. This is
just one way of actually getting access to that data.
Now as I scroll down, you can see there's quite a few photos there.
Now this feed returns 20 photos but you'll probably see an entirely different set of photos, because there's
a few million new photos uploaded every day to flickr.
So obviously for that reason the list is going to change literally all the time.
Now remember that, when we come to look at the JSON data. The data you get won't be anything like the
list I get in the video,
but the structure, most importantly, will be the same. It'll contain the same basic information but will
have different photos to what I'm actually getting here.
Alright, so I'm going to close and go back to the chrome version of it.
And basically every time you refresh this you'll find you get a different set of data anyway, and that's
again because people are continually uploading new images to flicker.
OK so now we can see here, looking back in chrome, we can see the source code. Now because I'm using chrome I
don't need to view the source, because that's the view of the feed that chrome's giving me.
But if you're in another browser that is showing you the photos like how Firefox did previously, right
click that and select View Source and you'll get the representation, the XML representation
of the data showing, as its showing on the screen here for me here now.
So basically you can clearly see that this is XML.
Now we used XML in the top 10 app and we we wrote an XML parser if you recall, to extract the
data into a format that we could use.
Now we've already passed XML.
so this time we're going to get the data in JSON format to see how to deal with a different format.
Now you could just pass this XML if you wanted,
and when we're done with this app you could perhaps change it to use the techniques from the top 10 downloader,
to deal with the XML if you want to practice. Before we go any further though
let's play with some of the parameters that we saw on the previous flicr page.
Now it's a very good idea to make sure you understand how the parameters work, before you start processing
a feed.
It's much easier to see what's happening by playing with the parameters in your browser.
That way you can instantly see what effects they have.
And if you've got them right, rather than trying to debug a program with parameters used incorrectly.
So this is what I recommend you do when you're testing an API using a variety of formats like XML JSON
and other formats.
You should test it first in your browser.
Now you add parameters to a URL by adding a question mark to the end, followed by the name of the
parameter and it's value.
So to use the tags parameter to search for Android photos we just add the following,
so come up here, at the end we put a question mark, tags equals Android, press enter there. We then get a representation
of photos relating to android.
And what I might just do is load up Firefox again,
so you can see that a little bit more clearly.
Let's just change it again.
So after the gne we'll put question mark, tags equals Android,
and there's the list of images that have been marked or tagged as Android.
You can see that the title also changed when I did that, Recent uploads tagged Android, to show that obviously
we're seeing recent uploads that have been tagged with that word Android in this case.
And if we go back to Chrome, we can actually see the same information, we can see the URL used as well as
the title here, Recent uploads tagged Android.
Now that's a bit confusing, because XML uses the word tag to mean the XML entities between
angle brackets.
They're the less than and the greater than sign symbols.
So a tag in XML
is not the same thing as the text that is added to the Flickr photos to tag them. The flickr tags
are more like the Facebook tags where you tag people and posts. Alright so I've added a tag parameter to
the URL to filter the results.
Now we can break it down a bit further, and if have a quick look at the documentation again.
Let's go back to that,
and we'll have a look at these arguments down here. We can add a comma separated list of tags to search for.
You can see it says that in the documentation, a comma delimited list of tags to filter the feed by. So if I
go back to Firefox, I can come down and at the end of that, let's go to android, I can put comma Oreo,
so at that point we're now searching on two tags,
Android and Oreo. So if I press enter there now,
you can see recent uploads tagged Android and Oreo, and you can see that we've got some different photos
as a result of that search.
And back to the documentation again.
There's this other parameter, tag mode, controlling whether items must have all the tags, tag mode equals all,
or any tag mode equals any of the tags and the default is all.
So we'll see how that works
but first I'm going to add SDK to the tags that we're searching for.
Let's just go back to Firefox.
So I'm going to add SDK again,
so we've now got Android comma Oreo comma SDK.
Now obviously you might get different results, but at the moment there aren't any photographs
that have all three tags.
Now as we add more tags and narrow the search down more precisely, we get fewer and fewer photos until
eventually there's none that match.
So you can see in this case I've got no results back.
We've got the title correctly showing but obviously no photos.
And if I go back to chrome,
and if we did the same thing, adding comma Oreo
comma SDK, we can see clearly now there's no data as there was
before.
So that's great because it means that we get to see something different when we add tag mode.
Now it currently only matches photos that have all three tags, so let's change that to any.
So to do that we come out at the end of the URL.
We put an ampersand, and that's because a question mark's used to separate the parameters from the URL,
but then each parameter is separate from the previous one by an ampersand character, and that's how it knows that
we're no longer entering tags,
but I've started to specify a new parameter, tag mode in this case.
So I'm going to enter the ampersand, tag mode equals any.
So now we're getting a list of photos again and the title's changed to show recent uploads
tagged Android, Oreo or SDK,
rather than and as it was showing before.
Now I want to do something different for this app, so let's change the format and go with JSON, Now in
case you wondered what JSON stands for it's Javascript Object Notation, and essentially it's giving us a
light weight data interchange format.
So it works similarly to XML but it's really just another file format.
It's very useful for data manipulation and it's probably more readable.
It's certainly less verbose than XML because it doesn't use XML tags.
Now there's a lot of programs that can process JSON, and Android apps can process it as well.
In fact it's used a lot in Java programming in general other languages.
So to do that, again looking back at the documentation,
you can see the option here for format, the format of the feed, and see the feeds page for feed format information.
So I click on that page to have a look.
It talks about these various feed formats.
It mentions RSS which is essentially XML, RSS 200, Atom, RSS 91.
All of these are essentially very similar to XML or actually are XML, but there's other feeds down here
that it talks about as well, php json and a few others.
So let's actually try the json one. So we go back to our chrome browser. and on the end of this query
we're going to add our tag mode,
firstly from the last sort, search, we'll do that. So tag mode equals any, just to make sure that's working. I'm getting some data back now. 198
But on the end of that now lets also put, at format equals json, noting how the data looks currently.
We press enter now, and see how the data's, the format of the
data has completely changed to a different format.
Now if you're running Windows 10 you'll have to switch back to the edge browser, because Internet Explorer doesn't
handle Json data
well. I think it tries to execute it as javascript, but I wasn't about to let it execute code in order
to find out.
And as a general rule browsers don't render json data very well.
So now we're getting the same display, or you will get the same display as you can see with chrome here.
And you should also see something similar to what's on my screen, whichever browser you're using, except
Internet Explorer. Alright so let's finish the video here
so we've still got a bit of work to do. In the next video,
we'll continue on and talk a bit more about these formats, and then we're going to discuss json in a
little bit more detail. So I'll see you in the next video.