1 00:00:04,930 --> 00:00:09,640 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 2 00:00:09,640 --> 00:00:14,920 be using Flickr. Now Flicker's an image sharing website, previously owned by Yahoo, 3 00:00:15,070 --> 00:00:20,180 but now part of Verisign. Now there's basically billions of images on that website. 4 00:00:20,440 --> 00:00:23,620 It's quite hard to get accurate data as it keeps changing. 5 00:00:23,620 --> 00:00:29,420 Now not all photos are public but there's certainly at least three billion public photos on Flickr. 6 00:00:29,920 --> 00:00:34,840 So what we're going to do is develop an app that'll enable the user to search through Flickr using specific 7 00:00:34,840 --> 00:00:37,970 tags to show the results of that search. 8 00:00:37,990 --> 00:00:43,210 Now we'll display the images and details about them, such as the author, that allow the full image to be viewed 9 00:00:43,300 --> 00:00:47,630 when you tap the thumbnail, and again you saw that demoed in the previous video. 10 00:00:47,650 --> 00:00:48,750 So first things first. Here's Flickr, 11 00:00:49,220 --> 00:00:51,500 so let's go to the Website. 12 00:00:51,640 --> 00:00:54,270 so that's available at flickr.com, 13 00:00:57,860 --> 00:00:59,150 Now if you haven't seen it before, as 14 00:00:59,150 --> 00:01:02,470 you can see here, there's an option to search through the billions of photos. 15 00:01:02,480 --> 00:01:11,240 So you can just type anything up here at the top, Android Oreao for example, 16 00:01:11,510 --> 00:01:16,430 and that gives us lots of photos that have been tagged with Android or Oreo. 17 00:01:16,800 --> 00:01:19,070 So it gives people the ability to upload photos 18 00:01:19,110 --> 00:01:25,110 and, as you saw, search the billions of photos on line. Now what we're going to do with this app is 19 00:01:25,110 --> 00:01:30,030 to use the API from flicker and get some images downloaded to our app. 20 00:01:30,410 --> 00:01:35,070 Now they've actually got a lot of APIs, and we can actually see them on this link. 21 00:01:41,330 --> 00:01:46,150 And when you first come to this list of the various APIs they've got available, you'll probably see that it's 22 00:01:46,150 --> 00:01:50,440 quite overwhelming because there's so many different activities and so forth. 23 00:01:50,680 --> 00:01:56,840 Now there's authentication as you can see there, there's activity blogs and scrolling down, 24 00:01:56,980 --> 00:02:02,040 you can see there's a ton of information here on the various APIs and languages that Flickr support in 25 00:02:02,040 --> 00:02:03,070 their APIs. 26 00:02:03,410 --> 00:02:06,740 But what we're going to be doing is to keep it pretty simple. 27 00:02:06,790 --> 00:02:12,250 We're going to be using one of their public services and that's because it doesn't require authentication. 28 00:02:12,450 --> 00:02:16,190 Now some of these other more advanced APIs need an API key. 29 00:02:16,730 --> 00:02:22,420 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 30 00:02:22,420 --> 00:02:23,490 thing for Flickr. 31 00:02:23,800 --> 00:02:28,960 So you could certainly do that, but we're just going to keep this simple and use a public feed that doesn't 32 00:02:28,960 --> 00:02:36,380 require any log on details. Alright so to get to the public feed, and come up here to feeds and click on that. 33 00:02:36,430 --> 00:02:42,670 That takes us to a page, flickr.com/services/feeds 34 00:02:42,710 --> 00:02:47,250 Now all the links I'm visiting by the way will be available in the resources section for this video. 35 00:02:47,330 --> 00:02:53,900 Now on this page there are a number of data feeds in a variety of formats, RSS Atom and so on. 36 00:02:53,930 --> 00:02:58,280 You can see these various formats that we're talking about here, and it's even different languages that you 37 00:02:58,280 --> 00:03:00,680 can actually specify as well. 38 00:03:00,700 --> 00:03:05,960 Now I'm going to be using English which is the default, but I'll specify it explicitly in the app so 39 00:03:05,990 --> 00:03:09,020 that you can change it to a different language if you prefer. 40 00:03:09,120 --> 00:03:13,050 And we're going to keep it pretty simple, we're already going to be going for public photos and videos. 41 00:03:13,100 --> 00:03:18,650 So click this link under available feeds. 42 00:03:18,650 --> 00:03:24,770 Now the description states that the public feed returns a list of public content, matching some criteria 43 00:03:25,190 --> 00:03:28,630 and we can see the URL for the public feed that we're going to be using up here. 44 00:03:29,140 --> 00:03:34,280 There's also a description of all the parameters that we can add to the URL. 45 00:03:34,280 --> 00:03:36,960 Now they're all optional, and we won't be using the first two, 46 00:03:36,980 --> 00:03:43,370 the id and the ids. Now if you've got some of your own photos on flickr, then you can provide your 47 00:03:43,370 --> 00:03:49,670 ID or the IDs of your friends, to get just those photos, and once I've shown you how we're going to build 48 00:03:49,670 --> 00:03:53,960 up the URL, you should be able to include that parameter as well if you want. 49 00:03:53,960 --> 00:03:59,420 Now we've got an option next though for tags, which is what we're going to be using to filter the photos. 50 00:03:59,720 --> 00:04:04,340 We'll also be using the tag mode parameter which affects the way that the tags are used. 51 00:04:04,340 --> 00:04:08,290 So ALL means is that we'll only get photos with all the tags that we use, 52 00:04:08,560 --> 00:04:14,060 ANY will return photos if they have any one, or more obviously, of the tags. 53 00:04:14,060 --> 00:04:20,029 So what we have here is the ability to search on multiple tags and only return images that have all 54 00:04:20,029 --> 00:04:21,160 those tags attached, 55 00:04:21,180 --> 00:04:22,450 or just some of them. 56 00:04:22,730 --> 00:04:29,180 Now in case you're wondering how tags work, when people upload images to flickr, they type in tags and 57 00:04:29,180 --> 00:04:31,750 they associate tags to that image. 58 00:04:31,760 --> 00:04:38,570 So for example if you're uploading a photo about Android Oreo, you might have the tags Android and Oreo, 59 00:04:38,810 --> 00:04:41,950 so that when people are searching they can find your images. 60 00:04:42,040 --> 00:04:47,030 Now we can also choose the type of the format, and we saw the supporting formats on the previous feeds 61 00:04:47,030 --> 00:04:47,950 page. 62 00:04:48,030 --> 00:04:51,020 Now we're going to be using JASON in our app. 63 00:04:51,050 --> 00:04:52,290 So let's actually have a look at that. 64 00:04:52,290 --> 00:04:54,530 URL to see what we'll be working with. 65 00:04:54,560 --> 00:04:55,650 So I'm going to copy this 66 00:04:55,670 --> 00:04:57,180 URL on the page here now, 67 00:04:59,950 --> 00:05:02,700 and I'm going to paste it into a browser tab. 68 00:05:07,730 --> 00:05:15,260 Now if you're using Google's Chrome browser as I am you'll see a load of XML, rather than the actual photos 69 00:05:15,260 --> 00:05:20,360 and descriptions that you see in another browser. Wow other browsers such as Fire Fox will 70 00:05:20,360 --> 00:05:26,210 also render the feed, and will look more like what other browsers look like, but chrome doesn't do 71 00:05:26,210 --> 00:05:27,620 that unfortunately. 72 00:05:27,860 --> 00:05:33,370 Now you can get a plug in for chrome to render RSS feeds, but we don't really need to do that. 73 00:05:33,380 --> 00:05:36,350 In fact the chrome output is more useful for what we want. 74 00:05:36,380 --> 00:05:39,180 That's because we're going to be working with the raw data, so 75 00:05:39,230 --> 00:05:42,890 don't worry if you can't see the photos in your browser and you get a load of XML like I'm showing 76 00:05:42,890 --> 00:05:44,410 you on the screen instead. 77 00:05:44,800 --> 00:05:47,470 Now on microsoft's new edge browser for Windows 10, 78 00:05:47,550 --> 00:05:52,610 the feed doesn't seem to work at all, and that's because it attempts to download photos_public.gne 79 00:05:52,620 --> 00:05:55,700 instead of showing the photos. 80 00:05:55,700 --> 00:06:03,110 Internet Explorer will work fine though. I go into Safari on my Mac I'll actually get this weird message about 81 00:06:03,110 --> 00:06:05,220 no RSS reader being installed. 82 00:06:07,170 --> 00:06:08,670 But if I do it in Firefox 83 00:06:12,320 --> 00:06:13,600 on my Mac and have a look at that, 84 00:06:16,810 --> 00:06:21,630 you see that we do get some representation of the actual data showing, so it is browser dependent. 85 00:06:21,910 --> 00:06:26,200 But again don't worry too much if you're not seeing exactly what I'm showing you, because ultimately 86 00:06:26,470 --> 00:06:27,150 you'll be able to use it. This is 87 00:06:27,270 --> 00:06:30,430 just one way of actually getting access to that data. 88 00:06:30,460 --> 00:06:34,950 Now as I scroll down, you can see there's quite a few photos there. 89 00:06:35,170 --> 00:06:40,810 Now this feed returns 20 photos but you'll probably see an entirely different set of photos, because there's 90 00:06:40,810 --> 00:06:43,700 a few million new photos uploaded every day to flickr. 91 00:06:44,020 --> 00:06:50,020 So obviously for that reason the list is going to change literally all the time. 92 00:06:50,020 --> 00:06:55,780 Now remember that, when we come to look at the JSON data. The data you get won't be anything like the 93 00:06:55,780 --> 00:06:57,000 list I get in the video, 94 00:06:57,160 --> 00:07:02,350 but the structure, most importantly, will be the same. It'll contain the same basic information but will 95 00:07:02,350 --> 00:07:06,450 have different photos to what I'm actually getting here. 96 00:07:06,500 --> 00:07:09,760 Alright, so I'm going to close and go back to the chrome version of it. 97 00:07:10,340 --> 00:07:15,880 And basically every time you refresh this you'll find you get a different set of data anyway, and that's 98 00:07:15,880 --> 00:07:20,790 again because people are continually uploading new images to flicker. 99 00:07:21,960 --> 00:07:28,240 OK so now we can see here, looking back in chrome, we can see the source code. Now because I'm using chrome I 100 00:07:28,240 --> 00:07:31,810 don't need to view the source, because that's the view of the feed that chrome's giving me. 101 00:07:32,080 --> 00:07:38,140 But if you're in another browser that is showing you the photos like how Firefox did previously, right 102 00:07:38,140 --> 00:07:44,290 click that and select View Source and you'll get the representation, the XML representation 103 00:07:44,290 --> 00:07:47,280 of the data showing, as its showing on the screen here for me here now. 104 00:07:47,710 --> 00:07:51,560 So basically you can clearly see that this is XML. 105 00:07:51,580 --> 00:07:56,590 Now we used XML in the top 10 app and we we wrote an XML parser if you recall, to extract the 106 00:07:56,590 --> 00:07:59,770 data into a format that we could use. 107 00:07:59,770 --> 00:08:00,990 Now we've already passed XML. 108 00:08:01,000 --> 00:08:06,120 so this time we're going to get the data in JSON format to see how to deal with a different format. 109 00:08:06,130 --> 00:08:08,570 Now you could just pass this XML if you wanted, 110 00:08:08,650 --> 00:08:12,940 and when we're done with this app you could perhaps change it to use the techniques from the top 10 downloader, 111 00:08:12,940 --> 00:08:17,470 to deal with the XML if you want to practice. Before we go any further though 112 00:08:17,500 --> 00:08:21,720 let's play with some of the parameters that we saw on the previous flicr page. 113 00:08:21,970 --> 00:08:27,190 Now it's a very good idea to make sure you understand how the parameters work, before you start processing 114 00:08:27,200 --> 00:08:27,950 a feed. 115 00:08:28,300 --> 00:08:32,490 It's much easier to see what's happening by playing with the parameters in your browser. 116 00:08:32,710 --> 00:08:35,049 That way you can instantly see what effects they have. 117 00:08:35,049 --> 00:08:40,400 And if you've got them right, rather than trying to debug a program with parameters used incorrectly. 118 00:08:40,809 --> 00:08:45,730 So this is what I recommend you do when you're testing an API using a variety of formats like XML JSON 119 00:08:45,730 --> 00:08:46,940 and other formats. 120 00:08:47,020 --> 00:08:49,470 You should test it first in your browser. 121 00:08:50,110 --> 00:08:55,000 Now you add parameters to a URL by adding a question mark to the end, followed by the name of the 122 00:08:55,000 --> 00:08:56,710 parameter and it's value. 123 00:08:57,040 --> 00:09:01,830 So to use the tags parameter to search for Android photos we just add the following, 124 00:09:01,850 --> 00:09:13,150 so come up here, at the end we put a question mark, tags equals Android, press enter there. We then get a representation 125 00:09:13,180 --> 00:09:15,460 of photos relating to android. 126 00:09:15,460 --> 00:09:18,630 And what I might just do is load up Firefox again, 127 00:09:19,450 --> 00:09:24,460 so you can see that a little bit more clearly. 128 00:09:24,520 --> 00:09:25,510 Let's just change it again. 129 00:09:25,510 --> 00:09:30,370 So after the gne we'll put question mark, tags equals Android, 130 00:09:33,930 --> 00:09:38,970 and there's the list of images that have been marked or tagged as Android. 131 00:09:39,110 --> 00:09:44,570 You can see that the title also changed when I did that, Recent uploads tagged Android, to show that obviously 132 00:09:44,570 --> 00:09:48,570 we're seeing recent uploads that have been tagged with that word Android in this case. 133 00:09:48,830 --> 00:09:58,190 And if we go back to Chrome, we can actually see the same information, we can see the URL used as well as 134 00:09:58,190 --> 00:10:03,100 the title here, Recent uploads tagged Android. 135 00:10:03,160 --> 00:10:08,350 Now that's a bit confusing, because XML uses the word tag to mean the XML entities between 136 00:10:08,350 --> 00:10:09,360 angle brackets. 137 00:10:09,380 --> 00:10:12,060 They're the less than and the greater than sign symbols. 138 00:10:12,060 --> 00:10:13,630 So a tag in XML 139 00:10:13,740 --> 00:10:19,840 is not the same thing as the text that is added to the Flickr photos to tag them. The flickr tags 140 00:10:20,170 --> 00:10:26,120 are more like the Facebook tags where you tag people and posts. Alright so I've added a tag parameter to 141 00:10:26,120 --> 00:10:28,040 the URL to filter the results. 142 00:10:28,040 --> 00:10:32,670 Now we can break it down a bit further, and if have a quick look at the documentation again. 143 00:10:32,730 --> 00:10:33,620 Let's go back to that, 144 00:10:36,860 --> 00:10:42,860 and we'll have a look at these arguments down here. We can add a comma separated list of tags to search for. 145 00:10:43,280 --> 00:10:47,480 You can see it says that in the documentation, a comma delimited list of tags to filter the feed by. So if I 146 00:10:48,030 --> 00:10:56,160 go back to Firefox, I can come down and at the end of that, let's go to android, I can put comma Oreo, 147 00:10:56,640 --> 00:10:58,810 so at that point we're now searching on two tags, 148 00:10:58,850 --> 00:11:04,230 Android and Oreo. So if I press enter there now, 149 00:11:04,390 --> 00:11:08,250 you can see recent uploads tagged Android and Oreo, and you can see that we've got some different photos 150 00:11:08,730 --> 00:11:10,550 as a result of that search. 151 00:11:10,810 --> 00:11:12,880 And back to the documentation again. 152 00:11:15,150 --> 00:11:21,060 There's this other parameter, tag mode, controlling whether items must have all the tags, tag mode equals all, 153 00:11:21,330 --> 00:11:24,970 or any tag mode equals any of the tags and the default is all. 154 00:11:25,320 --> 00:11:26,380 So we'll see how that works 155 00:11:26,380 --> 00:11:29,460 but first I'm going to add SDK to the tags that we're searching for. 156 00:11:29,700 --> 00:11:32,090 Let's just go back to Firefox. 157 00:11:32,290 --> 00:11:35,100 So I'm going to add SDK again, 158 00:11:35,550 --> 00:11:40,390 so we've now got Android comma Oreo comma SDK. 159 00:11:40,420 --> 00:11:44,700 Now obviously you might get different results, but at the moment there aren't any photographs 160 00:11:44,710 --> 00:11:46,500 that have all three tags. 161 00:11:46,630 --> 00:11:52,630 Now as we add more tags and narrow the search down more precisely, we get fewer and fewer photos until 162 00:11:52,630 --> 00:11:54,540 eventually there's none that match. 163 00:11:54,580 --> 00:11:57,110 So you can see in this case I've got no results back. 164 00:11:57,130 --> 00:12:00,610 We've got the title correctly showing but obviously no photos. 165 00:12:00,690 --> 00:12:02,000 And if I go back to chrome, 166 00:12:05,610 --> 00:12:06,770 and if we did the same thing, adding comma Oreo 167 00:12:06,850 --> 00:12:12,820 comma SDK, we can see clearly now there's no data as there was 168 00:12:12,830 --> 00:12:17,530 before. 169 00:12:17,540 --> 00:12:21,770 So that's great because it means that we get to see something different when we add tag mode. 170 00:12:22,050 --> 00:12:28,060 Now it currently only matches photos that have all three tags, so let's change that to any. 171 00:12:28,120 --> 00:12:31,410 So to do that we come out at the end of the URL. 172 00:12:32,150 --> 00:12:38,990 We put an ampersand, and that's because a question mark's used to separate the parameters from the URL, 173 00:12:38,990 --> 00:12:44,930 but then each parameter is separate from the previous one by an ampersand character, and that's how it knows that 174 00:12:44,930 --> 00:12:46,380 we're no longer entering tags, 175 00:12:46,550 --> 00:12:50,420 but I've started to specify a new parameter, tag mode in this case. 176 00:12:50,680 --> 00:12:59,490 So I'm going to enter the ampersand, tag mode equals any. 177 00:12:59,590 --> 00:13:03,880 So now we're getting a list of photos again and the title's changed to show recent uploads 178 00:13:03,880 --> 00:13:07,040 tagged Android, Oreo or SDK, 179 00:13:07,050 --> 00:13:09,340 rather than and as it was showing before. 180 00:13:09,340 --> 00:13:14,530 Now I want to do something different for this app, so let's change the format and go with JSON, Now in 181 00:13:14,530 --> 00:13:19,900 case you wondered what JSON stands for it's Javascript Object Notation, and essentially it's giving us a 182 00:13:19,900 --> 00:13:22,460 light weight data interchange format. 183 00:13:22,690 --> 00:13:26,970 So it works similarly to XML but it's really just another file format. 184 00:13:27,100 --> 00:13:31,440 It's very useful for data manipulation and it's probably more readable. 185 00:13:31,450 --> 00:13:35,960 It's certainly less verbose than XML because it doesn't use XML tags. 186 00:13:35,980 --> 00:13:41,350 Now there's a lot of programs that can process JSON, and Android apps can process it as well. 187 00:13:41,350 --> 00:13:45,660 In fact it's used a lot in Java programming in general other languages. 188 00:13:45,670 --> 00:13:47,980 So to do that, again looking back at the documentation, 189 00:13:52,050 --> 00:13:58,430 you can see the option here for format, the format of the feed, and see the feeds page for feed format information. 190 00:13:58,520 --> 00:14:01,640 So I click on that page to have a look. 191 00:14:01,790 --> 00:14:04,000 It talks about these various feed formats. 192 00:14:04,260 --> 00:14:10,190 It mentions RSS which is essentially XML, RSS 200, Atom, RSS 91. 193 00:14:10,200 --> 00:14:16,800 All of these are essentially very similar to XML or actually are XML, but there's other feeds down here 194 00:14:16,800 --> 00:14:20,700 that it talks about as well, php json and a few others. 195 00:14:20,760 --> 00:14:27,720 So let's actually try the json one. So we go back to our chrome browser. and on the end of this query 196 00:14:27,720 --> 00:14:30,270 we're going to add our tag mode, 197 00:14:30,270 --> 00:14:38,900 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 198 00:14:39,080 --> 00:14:46,100 But on the end of that now lets also put, at format equals json, noting how the data looks currently. 199 00:14:46,100 --> 00:14:52,860 We press enter now, and see how the data's, the format of the 200 00:14:52,860 --> 00:14:55,780 data has completely changed to a different format. 201 00:14:55,860 --> 00:15:00,210 Now if you're running Windows 10 you'll have to switch back to the edge browser, because Internet Explorer doesn't 202 00:15:00,210 --> 00:15:01,180 handle Json data 203 00:15:01,190 --> 00:15:06,240 well. I think it tries to execute it as javascript, but I wasn't about to let it execute code in order 204 00:15:06,240 --> 00:15:07,210 to find out. 205 00:15:07,620 --> 00:15:11,580 And as a general rule browsers don't render json data very well. 206 00:15:11,580 --> 00:15:16,020 So now we're getting the same display, or you will get the same display as you can see with chrome here. 207 00:15:16,320 --> 00:15:20,760 And you should also see something similar to what's on my screen, whichever browser you're using, except 208 00:15:20,760 --> 00:15:24,380 Internet Explorer. Alright so let's finish the video here 209 00:15:24,410 --> 00:15:26,850 so we've still got a bit of work to do. In the next video, 210 00:15:26,850 --> 00:15:32,460 we'll continue on and talk a bit more about these formats, and then we're going to discuss json in a 211 00:15:32,460 --> 00:15:35,220 little bit more detail. So I'll see you in the next video.