1 00:00:05,590 --> 00:00:12,830 Alright, so we've now got our data downloading, and the app can parse out the information we want from the raw json data. 2 00:00:12,830 --> 00:00:18,800 So in this video, we're going to build up the url to allow different tags to be specified. 3 00:00:18,800 --> 00:00:24,110 Now we're going to be adding a search facility to the app later, so that users can display photos matching 4 00:00:24,110 --> 00:00:27,230 different criteria. Now for that to work, 5 00:00:27,230 --> 00:00:32,549 we need to provide the tags they want as a parameter in our url. 6 00:00:32,549 --> 00:00:35,990 Alright so let's see how that works, so we know what we're trying to achieve here. 7 00:00:35,990 --> 00:00:40,550 So I'm going to use Firefox for this because it's easier to see the result without having to scan through 8 00:00:40,550 --> 00:00:48,640 the raw Json code. OK I'll paste in our link. 9 00:00:48,640 --> 00:00:51,430 Now I just said that we wouldn't have to scan for the Json, yet 10 00:00:51,430 --> 00:00:55,380 we've got a load of raw Json to read now. Now that's fine in our app, 11 00:00:55,380 --> 00:01:00,270 and the reason we're getting Json is because of the last two parameters in the url, these last two 12 00:01:00,270 --> 00:01:05,230 bits here, the app format equals Json and at no Json callback equals one. 13 00:01:05,230 --> 00:01:11,190 Now when we build up out url in the app we're going to need these two parameters, but I'm going to delete 14 00:01:11,190 --> 00:01:14,040 them from the url in the address bar. 15 00:01:14,040 --> 00:01:20,920 So basically delete everything from the ampersand format right through to the end. 16 00:01:20,920 --> 00:01:25,860 Once we do that we actually get a format that Firefox can display with images. 17 00:01:25,860 --> 00:01:27,390 Aright so our base url is 18 00:01:27,390 --> 00:01:32,560 what you can see up here, I'll just size that up, minus the tags. 19 00:01:32,560 --> 00:01:37,700 So the tags equal after the question mark is the first parameter, and that's the one that we're going 20 00:01:37,700 --> 00:01:41,280 to be changing when users search for different photos. 21 00:01:41,280 --> 00:01:45,860 Now at the moment as you can see the tags parameter's set to Android comma Oreo, 22 00:01:45,860 --> 00:01:48,190 so changing that will return different photos. 23 00:01:48,190 --> 00:01:57,080 So let's have a look for some sunsets by replacing this android oreo with the word sunset. 24 00:01:57,080 --> 00:02:02,370 Now the photos change all the time but we've now got some photos of sunsets. Alright so in our code, 25 00:02:02,370 --> 00:02:08,169 we're going to be building up the url so that we can provide different values for this tag parameter. 26 00:02:08,169 --> 00:02:16,360 Alright so let's go back to the code to get that working. Now before get raw data's created and it's execute 27 00:02:16,360 --> 00:02:17,590 method called, 28 00:02:17,590 --> 00:02:22,180 we build up the url so that it's got the correct parameters, 29 00:02:22,180 --> 00:02:27,970 and we're going to do that in the Create uri method that we'll write next. Now when we use our create uri 30 00:02:27,970 --> 00:02:33,520 function, the code's going to look similar to what I'm about to type in MainActivity. 31 00:02:33,520 --> 00:02:38,560 So we're going into MainActivity, and we're going to go into the onCreate method, and we're going to change the 32 00:02:38,560 --> 00:02:40,360 code a little bit. 33 00:02:40,360 --> 00:02:49,700 So we're going to, above the val getRawData line, we're going to put Val url is equal to create uri 34 00:02:49,700 --> 00:02:52,060 parentheses double quotes, 35 00:02:52,060 --> 00:02:57,510 and I'm going to copy this link, right up to but not including the question mark. 36 00:02:57,510 --> 00:03:03,720 So basically the dot gne is where it ends. I'm going to paste that in as the first argument to our create uri. 37 00:03:03,720 --> 00:03:09,810 And then I'm going to put another parameter on the end of that, so comma double quotes android 38 00:03:09,810 --> 00:03:17,050 comma oreo, another parameter comma double quotes en-us, 39 00:03:17,050 --> 00:03:26,100 and lastly comma true. And then what we're going to do is change this getRawData dot execute with the parameter. 40 00:03:26,100 --> 00:03:35,120 We're going to change that to instead, pass the url. So I can see that we've actually added that now, 41 00:03:35,120 --> 00:03:39,560 and obviously we've got an error at the moment because we haven't written the create uri function. 42 00:03:39,560 --> 00:03:44,030 I'm going to create that next after the onCreate method, so just immediately below 43 00:03:44,030 --> 00:03:57,170 that. So private fun create uri parentheses, and it's going to be baseURL colon string. 44 00:03:57,170 --> 00:04:02,060 We're just matching the parameters that we've defined or we're showing on line 20. 45 00:04:02,060 --> 00:04:10,690 So the next one is search criteria, search criteria, and that's going to be a string also, languages the 46 00:04:10,690 --> 00:04:14,450 next one, so lang colon string. 47 00:04:14,450 --> 00:04:23,170 And the last one's going to be matchAll colon Boolean, then outside of the parentheses, the right parentheses we're going to have 48 00:04:23,170 --> 00:04:26,600 colon String because we're returning a string. 49 00:04:26,600 --> 00:04:31,720 And we'll open a code block there, and obviously that fixes the error now on line 20. 50 00:04:31,720 --> 00:04:39,550 So let's go ahead and actually write that function though. I'm going to start with Log.d parentheses tag comma double 51 00:04:39,550 --> 00:04:48,110 quotes dot createUri starts. Then we're going to do var 52 00:04:48,110 --> 00:04:58,660 uri is equal to capital U r i dot parse baseURL, that's parsed to this function. And we'll do var builder 53 00:04:58,660 --> 00:05:10,380 equals uri dot buildUpon. I'm just going to scroll this up a little bit. Alright next we're going to do builder equals builder dot 54 00:05:10,380 --> 00:05:18,360 appendQueryParameter and its parentheses and double quotes tags, being the name of the parameter, comma 55 00:05:18,360 --> 00:05:21,180 searchCriteria. 56 00:05:21,180 --> 00:05:27,960 The next line, we're going to do builder equals builder.appendQueryParameter again. 57 00:05:27,960 --> 00:05:34,020 This time it's going to be double quotes, tagmode being the name of the parameter, comma, then I'm going to type 58 00:05:34,020 --> 00:05:43,270 if, parentheses matchAll double quotes ALL in uppercase, else, ANY in 59 00:05:43,270 --> 00:05:51,450 uppercase. And next we're going to do builder equals builder dot appendQueryParameter parentheses double 60 00:05:51,450 --> 00:05:57,900 quotes, and it's going to be lang this time, for language, and the argument will be lang, builder equals builder 61 00:05:57,900 --> 00:06:04,150 dot appendQueryParameter, format this time, double quotes comma 62 00:06:04,150 --> 00:06:13,310 and it's json in double quotes, in lower case there, and builder equals builder dot appendQueryParameter. Next one's going to be 63 00:06:13,310 --> 00:06:21,930 double quotes, so it's nojsoncallback, which is the next parameter, comma one in double quotes. 64 00:06:21,930 --> 00:06:26,790 Then we're going to type uri equals builder dot build, 65 00:06:26,790 --> 00:06:33,740 then we're going to return uri dot toString. Alright so what are we doing here. 66 00:06:33,740 --> 00:06:42,410 Well we start off parsing the base url on line 30, and that's to create a uri object, which I've called 67 00:06:42,410 --> 00:06:44,120 uri with a lowercase u. 68 00:06:44,120 --> 00:06:49,390 So you then need to build the parameters on top of that. Now the code uses the uri dot builder 69 00:06:49,390 --> 00:06:55,250 object to get a builder using the buildUpon command. Obviously that's on line 31. Now 70 00:06:55,250 --> 00:07:00,670 next we're using the builders appendQueryParameter function to add each parameter to the uri. 71 00:07:00,670 --> 00:07:06,800 Now the appendQueryParameter function takes care of separating the parameters with a question 72 00:07:06,800 --> 00:07:09,230 mark or ampersand as appropriate, 73 00:07:09,230 --> 00:07:13,340 and also makes sure that the next step results in a valid uri. 74 00:07:13,340 --> 00:07:18,380 So each time we're appending another parameter. We get a builder object back from the calls to append 75 00:07:18,380 --> 00:07:24,440 query parameter, with the new parameter added to the end of its previous value. Now because each step 76 00:07:24,440 --> 00:07:25,850 returns a builder, 77 00:07:25,850 --> 00:07:31,370 we don't need to assign the result to a variable. We just call the next function directly on the return 78 00:07:31,370 --> 00:07:38,960 value of the previous function call. So what we can actually do here is just to show, to demonstrate that this is working, 79 00:07:38,960 --> 00:07:41,420 we can actually delete this last line here, 80 00:07:41,420 --> 00:07:50,480 this builder equals builder, and go right back to there, and delete. And that's basically doing the equivalent thing, 81 00:07:50,480 --> 00:07:56,760 and then we can actually go back and build up and do all of this on the one line. So we can come back to here and do 82 00:07:56,760 --> 00:08:00,740 that, and we can come back to here, and 83 00:08:00,740 --> 00:08:11,290 do that, and for the last one, like so. Now that line starts getting pretty long and scrolling off screen, 84 00:08:11,290 --> 00:08:16,770 so it's a good idea to split it and start each call on a new line. So we can do something like buildUpon, 85 00:08:16,770 --> 00:08:23,130 we can even come back onto here, and do the same there. 86 00:08:23,130 --> 00:08:26,200 and we haven't used a variable at all 87 00:08:26,200 --> 00:08:30,920 as you can see. So again that's avoiding the use of a variable, 88 00:08:30,920 --> 00:08:36,440 and again just to make it a little bit tidier, we can separate these on a different line. So we can put 89 00:08:36,440 --> 00:08:46,180 dot, and then do each append on a separate line just to make it a little bit easier to read, like I'm doing now. 90 00:08:46,180 --> 00:08:50,770 And in actual fact we don't even need the builder variable at all if we do that. We can chain the code 91 00:08:50,770 --> 00:08:55,230 to dot build upon as well. So we can just use the dot build upon, 92 00:08:55,230 --> 00:09:15,380 so we can just highlight this and delete, just to make it a little bit tidier. We can go, we can add the dot here, 93 00:09:15,380 --> 00:09:21,410 dot build, like so. So basically as you can see now I've removed the reference to the variable, where we've just got 94 00:09:21,410 --> 00:09:27,650 our uri that's been built up as calling the relevant functions and then returning the two strings, 95 00:09:27,650 --> 00:09:34,220 so the string version of the built up uri, ready for us to actually send to flickr. And I'm showing you 96 00:09:34,220 --> 00:09:39,080 this for a reason, and the reason is that a lot of Java classes are designed in this way. 97 00:09:39,080 --> 00:09:43,640 So the function append query parameter, in this case, returns the object it was called on, 98 00:09:43,640 --> 00:09:46,280 so you can actually keep chaining function calls together. 99 00:09:46,280 --> 00:09:51,800 So it should now be pretty obvious from this code that we're just appending a load of parameters, one after the other. 100 00:09:51,800 --> 00:09:56,070 Now append query parameter takes two arguments. The first one's a string, and 101 00:09:56,070 --> 00:09:59,540 that's the name of the parameter that we wanted to add to the url. 102 00:09:59,540 --> 00:10:03,800 The second one's the value that we want to specify for the parameter, and that should probably be pretty 103 00:10:03,800 --> 00:10:04,960 straight forward now 104 00:10:04,960 --> 00:10:10,460 that you can see that, because you've used to, and have seen tags, tagmode and format and no json 105 00:10:10,460 --> 00:10:16,260 callback, when we were calling those links, the urls directly in a browser. 106 00:10:16,260 --> 00:10:19,040 And basically there's no need to store the value in uri 107 00:10:19,040 --> 00:10:23,120 when we're only going to return it, and this function is defined to return a string. 108 00:10:23,120 --> 00:10:28,130 So we finish the chain by calling two strings, so we can even do that by getting rid of the variable all 109 00:10:28,130 --> 00:10:36,190 together, and just putting return and adding dot toString 110 00:10:36,190 --> 00:10:40,950 on the end, and returning the redundant variable. 111 00:10:40,950 --> 00:10:45,240 So again there's no need to store the value in uri when we're only going to return it, and this function 112 00:10:45,240 --> 00:10:46,700 is defined to return a string, 113 00:10:46,700 --> 00:10:52,250 so I've just chained to, or added to the chain by calling dot toString and returned that instead 114 00:10:52,250 --> 00:10:59,310 of uri dot toString. And again you'll find that sort of thing done a lot in Java classes. 115 00:10:59,310 --> 00:11:04,370 It results in pretty compact code and the classes have been designed to use that way. 116 00:11:04,370 --> 00:11:10,070 So although it might look a bit confusing at first, but it's just calling a function on the return value of 117 00:11:10,070 --> 00:11:13,880 the previous function call, and so on down the chain. 118 00:11:13,880 --> 00:11:17,780 So now that we've done that, let's just run this application again just to make sure that it's still 119 00:11:17,780 --> 00:11:35,010 working, given we've actually made some changes to it. We'll open our log cat 120 00:11:35,010 --> 00:11:38,830 and you can see we've got our dot createUri function call, 121 00:11:38,830 --> 00:11:44,440 so that's working nicely, and we can still see that we've got our photo objects being created, and our onDataAvailable 122 00:11:44,440 --> 00:11:46,330 called with the array list of photos. 123 00:11:46,330 --> 00:11:51,920 So everything looks good and is working nicely, Alright so I'm going to stop the video here now. 124 00:11:51,920 --> 00:11:58,390 In the next one we'll make a start on the user interface, so that we can display the data that we're now downloading. 125 00:11:58,390 --> 00:11:59,450 So see you in the next video.