In the previous videos in this section of the course, we created our get raw data class to download the data
asynchronously,
and we made some changes to main activity so that we could test that.
So the next step is to parse the downloaded data, to get meaningful information from the json that's
being downloaded.
So let's start off by having a look at a diagram showing how the program's ultimately going to function.
Now this diagram shows the complete program with the Recycler View and its adapter. We'll be adding them later.
For now we're only interested in the classes on the right hand side. Now we've got main activity, and
in it's onCreate function we created a new get raw data object.
Now we saw that running as an async task which is that red dashed arrow going from main activities on
create function, to the execute function of get raw data. Now that part's already working.
Now we're going to be moving the get raw data call from on create to on resume, and we'll talk about that shortly.
But what I'm going to do next is add another class called get flickr json data.
Now this new class will be responsible for parsing out the information we want, and creating a photo object
for each photo that's downloaded.
So looking at the diagram, we create a new async task called get raw data. When that finishes downloading,
it calls the on download complete function in main activity, and we saw that working already. Now in there,
we're going to create another async task called get flickr json data. Now that'll parse out the data, then
call an on data available function in main activity, and there's a solid arrow as you can see from
get raw data's on post
Execute function, to the on download complete function in main activity on the screen. Then there's a red dashed
arrow coming out from on download complete to the execute function of get flickr json data.
So that shows the second asynchronous call.
Now when get flickr json data finishes parsing, it'll let main activity know by using another callback,
and that's the solid arrow from get flickr json data's on post execute function, to on data
available in main activity.
Now this diagram on the screen is a sort of odd mix of a UML class diagram and a flowchart.
Now UML is great for large projects, but it's not very good at showing program flow.
So if we tried to stick to UML, we'd be jumping between different diagrams to see what's really going on,
but hopefully this is a good compromise.
So it shows the flow of the code, as well as all the classes involved, all in one place.
Now I won't go into too much detail on the rest of the diagram at this stage, but basically the data
will be displayed in a Recycler View, which is a more recent version of a list view that you've already
seen in this course. Now a list view would have done just fine here,
but this is an opportunity to see how the Recycler View works, and the differences it has compared to a list view.
Now a Recycler View uses a adapter just like we did for the list view,
but what it does do differently is enforce the view holder pattern.
So whereas we improved the list view to use a view holder class, but could have managed without one,
you don't get that option with a Recycler View, you need to use one.
Now I've shown the view holder, and also the photo objects, being passed between the classes by adding a red
asterisk to the flow arrows.
So get raw data will send a string back to main activity, which then passes it on to get flickr
json data. Now get flickr
json data will send a list of photos back to main activity, and main activity will send that list
to the adapter, so it can feed the photos to the Recycler View. And the Recycler View will then receive
view holders from the Flickr Recycler View Adapter.
Now another thing I'll mention is that all three of the activities that we'll be using, are subclasses of
a base activity class that we'll create. Now
I've done this so that we can reuse all the toolbar code in the three activities, without having to include
it in all three of them. So base activity's just an appcompat activity class with the toolbar code
added, and the three classes that we'll create for our activities will extend base activity, and I've shown that
class hierarchy
on the diagram. But at the moment though, we're interested in how the main activity get Flickr json data
and get raw data classes work together.
So we need a simple photo class to store the individual details.
So let's switch back to Android Studio,
and create the photo and get flickr json data classes. Alright so back in Android Studio now. So I want to create
a new class as we've done before by opening up the package name that you've used, which if you've
been copying what I've done, will be something along the lines of academy dot learning programming dot
flickr browser. So right click that, select New, Kotlin File/Class, select Class from the dropdown, and the name for this one
is going to be photo, as I mentioned. Now this is a very simple class.
It only exists to hold all the data relating to a single photo.
So it's going to contain a few properties and very little else.
So let's go ahead and define that, so we're going to add parentheses
after the class definition, val, or after the class name I should say, val title colon String comma
val author colon String, val
author ID colon String, val link colon String, val tags colon String, the last one val image colon String.
Now these are the fields that we'll be extracting from the json data.
So if I switch back to my browser now, and I've got Firefox here, which has got the json raw data, and I'll just
size this up so can see this a little bit better over here.
But you can actually see the items array, we can see the individual fields within them, title, link etc.,
author ID, author tags that we're going to capture.
So at this stage we probably want to record the title and the image.
Now the image feels slightly strange.
It's basically this m object, over here you can see under media, m, and so I've called the field for that in
our Kotlin class, image.
Now we're also going to store the author, and also the author ID, because we could use that to retrieve
more photos uploaded by the same photographer,
so it's a useful thing to have, and the tags are also worth storing as well.
So they're the fields that we're going to be storing in this photo class.
Now we're not going to be storing the image itself in our object.
We don't want to be storing any more data than we have to on our mobile device,
and that's because storage is limited on a mobile device.
So we're going to use a much smarter process, to only download the image just before we need it.
We won't be downloading a lot of images and trying to store them.
Now if you've programmed in other environments, then you may well have not had to worry about space restrictions,
but when working with mobile devices you have to consider things like the available storage space.
OK, so let's go ahead now and actually generate or log
the photos that we create by the two string function. I'm going to come up to the Code menu,
select Generate, generate to string, and we can choose the implementation.
So we're going to leave all the properties selected by default,
click on OK, and we've got this simple override,
overridden version of the to string function, that now gives us all the available data from a particular photo object.
So basically it's not doing anything fancy, it just returns the values of the properties with suitable labels.
Alright so that's the photo class created.
So I'm going to stop the video here. In the next video we're going to write
the get flicker json data class to actually parse the data, so see you in that next video.