1 00:00:05,390 --> 00:00:11,780 In the previous videos in this section of the course, we created our get raw data class to download the data 2 00:00:11,780 --> 00:00:13,220 asynchronously, 3 00:00:13,220 --> 00:00:16,550 and we made some changes to main activity so that we could test that. 4 00:00:16,550 --> 00:00:22,340 So the next step is to parse the downloaded data, to get meaningful information from the json that's 5 00:00:22,340 --> 00:00:23,990 being downloaded. 6 00:00:23,990 --> 00:00:30,810 So let's start off by having a look at a diagram showing how the program's ultimately going to function. 7 00:00:30,810 --> 00:00:37,960 Now this diagram shows the complete program with the Recycler View and its adapter. We'll be adding them later. 8 00:00:37,960 --> 00:00:44,530 For now we're only interested in the classes on the right hand side. Now we've got main activity, and 9 00:00:44,530 --> 00:00:49,980 in it's onCreate function we created a new get raw data object. 10 00:00:49,980 --> 00:00:55,880 Now we saw that running as an async task which is that red dashed arrow going from main activities on 11 00:00:55,880 --> 00:01:02,880 create function, to the execute function of get raw data. Now that part's already working. 12 00:01:02,880 --> 00:01:10,720 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. 13 00:01:10,720 --> 00:01:16,390 But what I'm going to do next is add another class called get flickr json data. 14 00:01:16,390 --> 00:01:23,230 Now this new class will be responsible for parsing out the information we want, and creating a photo object 15 00:01:23,230 --> 00:01:25,750 for each photo that's downloaded. 16 00:01:25,750 --> 00:01:32,230 So looking at the diagram, we create a new async task called get raw data. When that finishes downloading, 17 00:01:32,230 --> 00:01:38,730 it calls the on download complete function in main activity, and we saw that working already. Now in there, 18 00:01:38,730 --> 00:01:45,790 we're going to create another async task called get flickr json data. Now that'll parse out the data, then 19 00:01:45,790 --> 00:01:51,980 call an on data available function in main activity, and there's a solid arrow as you can see from 20 00:01:51,980 --> 00:01:53,420 get raw data's on post 21 00:01:53,420 --> 00:02:00,040 Execute function, to the on download complete function in main activity on the screen. Then there's a red dashed 22 00:02:00,040 --> 00:02:06,340 arrow coming out from on download complete to the execute function of get flickr json data. 23 00:02:06,340 --> 00:02:10,330 So that shows the second asynchronous call. 24 00:02:10,330 --> 00:02:17,500 Now when get flickr json data finishes parsing, it'll let main activity know by using another callback, 25 00:02:17,500 --> 00:02:23,330 and that's the solid arrow from get flickr json data's on post execute function, to on data 26 00:02:23,330 --> 00:02:26,290 available in main activity. 27 00:02:26,290 --> 00:02:32,370 Now this diagram on the screen is a sort of odd mix of a UML class diagram and a flowchart. 28 00:02:32,370 --> 00:02:37,900 Now UML is great for large projects, but it's not very good at showing program flow. 29 00:02:37,900 --> 00:02:43,600 So if we tried to stick to UML, we'd be jumping between different diagrams to see what's really going on, 30 00:02:43,600 --> 00:02:46,120 but hopefully this is a good compromise. 31 00:02:46,120 --> 00:02:52,360 So it shows the flow of the code, as well as all the classes involved, all in one place. 32 00:02:52,360 --> 00:02:57,850 Now I won't go into too much detail on the rest of the diagram at this stage, but basically the data 33 00:02:57,850 --> 00:03:03,220 will be displayed in a Recycler View, which is a more recent version of a list view that you've already 34 00:03:03,220 --> 00:03:07,210 seen in this course. Now a list view would have done just fine here, 35 00:03:07,210 --> 00:03:15,200 but this is an opportunity to see how the Recycler View works, and the differences it has compared to a list view. 36 00:03:15,200 --> 00:03:19,210 Now a Recycler View uses a adapter just like we did for the list view, 37 00:03:19,210 --> 00:03:22,930 but what it does do differently is enforce the view holder pattern. 38 00:03:22,930 --> 00:03:28,690 So whereas we improved the list view to use a view holder class, but could have managed without one, 39 00:03:28,690 --> 00:03:32,260 you don't get that option with a Recycler View, you need to use one. 40 00:03:32,260 --> 00:03:38,330 Now I've shown the view holder, and also the photo objects, being passed between the classes by adding a red 41 00:03:38,330 --> 00:03:41,190 asterisk to the flow arrows. 42 00:03:41,190 --> 00:03:46,870 So get raw data will send a string back to main activity, which then passes it on to get flickr 43 00:03:46,870 --> 00:03:49,530 json data. Now get flickr 44 00:03:49,530 --> 00:03:55,750 json data will send a list of photos back to main activity, and main activity will send that list 45 00:03:55,750 --> 00:04:02,440 to the adapter, so it can feed the photos to the Recycler View. And the Recycler View will then receive 46 00:04:02,440 --> 00:04:07,420 view holders from the Flickr Recycler View Adapter. 47 00:04:07,420 --> 00:04:12,800 Now another thing I'll mention is that all three of the activities that we'll be using, are subclasses of 48 00:04:12,800 --> 00:04:15,850 a base activity class that we'll create. Now 49 00:04:15,850 --> 00:04:22,430 I've done this so that we can reuse all the toolbar code in the three activities, without having to include 50 00:04:22,430 --> 00:04:28,570 it in all three of them. So base activity's just an appcompat activity class with the toolbar code 51 00:04:28,570 --> 00:04:34,910 added, and the three classes that we'll create for our activities will extend base activity, and I've shown that 52 00:04:34,910 --> 00:04:36,140 class hierarchy 53 00:04:36,140 --> 00:04:43,550 on the diagram. But at the moment though, we're interested in how the main activity get Flickr json data 54 00:04:43,550 --> 00:04:46,640 and get raw data classes work together. 55 00:04:46,640 --> 00:04:50,480 So we need a simple photo class to store the individual details. 56 00:04:50,480 --> 00:04:52,550 So let's switch back to Android Studio, 57 00:04:52,550 --> 00:05:01,330 and create the photo and get flickr json data classes. Alright so back in Android Studio now. So I want to create 58 00:05:01,330 --> 00:05:08,650 a new class as we've done before by opening up the package name that you've used, which if you've 59 00:05:08,650 --> 00:05:13,300 been copying what I've done, will be something along the lines of academy dot learning programming dot 60 00:05:13,300 --> 00:05:21,350 flickr browser. So right click that, select New, Kotlin File/Class, select Class from the dropdown, and the name for this one 61 00:05:21,350 --> 00:05:26,940 is going to be photo, as I mentioned. Now this is a very simple class. 62 00:05:26,940 --> 00:05:31,410 It only exists to hold all the data relating to a single photo. 63 00:05:31,410 --> 00:05:34,770 So it's going to contain a few properties and very little else. 64 00:05:34,770 --> 00:05:37,380 So let's go ahead and define that, so we're going to add parentheses 65 00:05:37,380 --> 00:05:47,680 after the class definition, val, or after the class name I should say, val title colon String comma 66 00:05:47,680 --> 00:05:52,050 val author colon String, val 67 00:05:52,050 --> 00:06:06,540 author ID colon String, val link colon String, val tags colon String, the last one val image colon String. 68 00:06:06,540 --> 00:06:11,730 Now these are the fields that we'll be extracting from the json data. 69 00:06:11,730 --> 00:06:19,410 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 70 00:06:19,410 --> 00:06:21,900 size this up so can see this a little bit better over here. 71 00:06:21,900 --> 00:06:28,440 But you can actually see the items array, we can see the individual fields within them, title, link etc., 72 00:06:28,440 --> 00:06:33,010 author ID, author tags that we're going to capture. 73 00:06:33,010 --> 00:06:36,500 So at this stage we probably want to record the title and the image. 74 00:06:36,500 --> 00:06:38,700 Now the image feels slightly strange. 75 00:06:38,700 --> 00:06:45,030 It's basically this m object, over here you can see under media, m, and so I've called the field for that in 76 00:06:45,030 --> 00:06:47,840 our Kotlin class, image. 77 00:06:47,840 --> 00:06:52,560 Now we're also going to store the author, and also the author ID, because we could use that to retrieve 78 00:06:52,560 --> 00:06:55,200 more photos uploaded by the same photographer, 79 00:06:55,200 --> 00:06:59,820 so it's a useful thing to have, and the tags are also worth storing as well. 80 00:06:59,820 --> 00:07:03,420 So they're the fields that we're going to be storing in this photo class. 81 00:07:03,420 --> 00:07:07,020 Now we're not going to be storing the image itself in our object. 82 00:07:07,020 --> 00:07:10,620 We don't want to be storing any more data than we have to on our mobile device, 83 00:07:10,620 --> 00:07:14,100 and that's because storage is limited on a mobile device. 84 00:07:14,100 --> 00:07:19,560 So we're going to use a much smarter process, to only download the image just before we need it. 85 00:07:19,560 --> 00:07:22,460 We won't be downloading a lot of images and trying to store them. 86 00:07:22,460 --> 00:07:27,720 Now if you've programmed in other environments, then you may well have not had to worry about space restrictions, 87 00:07:27,720 --> 00:07:33,930 but when working with mobile devices you have to consider things like the available storage space. 88 00:07:33,930 --> 00:07:36,960 OK, so let's go ahead now and actually generate or log 89 00:07:36,960 --> 00:07:42,880 the photos that we create by the two string function. I'm going to come up to the Code menu, 90 00:07:42,880 --> 00:07:51,300 select Generate, generate to string, and we can choose the implementation. 91 00:07:51,300 --> 00:07:54,220 So we're going to leave all the properties selected by default, 92 00:07:54,220 --> 00:07:57,300 click on OK, and we've got this simple override, 93 00:07:57,300 --> 00:08:03,390 overridden version of the to string function, that now gives us all the available data from a particular photo object. 94 00:08:03,390 --> 00:08:09,620 So basically it's not doing anything fancy, it just returns the values of the properties with suitable labels. 95 00:08:09,620 --> 00:08:11,610 Alright so that's the photo class created. 96 00:08:11,610 --> 00:08:14,670 So I'm going to stop the video here. In the next video we're going to write 97 00:08:14,670 --> 00:08:19,740 the get flicker json data class to actually parse the data, so see you in that next video.