Introduction to Web Services in Android using the Flickr API (Part 1/2)

hello everyone in this video we are going to start creating a project called web services fun web services fun is going to be an app that uses web services specifically it's going to use what's called a rest api which stands for application programming interface in order to fetch interesting photos from flickr if you hadn't heard of flickr before no worries i have flickr.com pulled up right here essentially it's a community for photographers it has some really beautiful photos which you can take a look at if you head over to flickr.com explore which shows interesting photos that change daily so here are some beautiful interesting photos that we can fetch using the flickr api and display in our app in order to follow along you will need an api key which you can get from flickr.com services api miscellaneous overview.html which is essentially the overview of the flickr api it says the flickr api consists of a set of callable methods and some api endpoints you will need an api key in order to call these api endpoints so you can follow this click this link right here flickr.com services api keys in order to get your api key let's take a look at the app when the app first launches it's going to fetch about 100 or so interesting photos from one of the flickr api endpoints called interestingness list and then it'll display the first one and there'll be a floating action button which we can use to flip through interesting photos so we'll see the title the date taken and the photo while the photo is being fetched we will see a indeterminate progress bar which is going to be a circular spinner we'll also see a snack bar message saying fetching next photo so these images that i'm fetching here are truly the images from flickr explorer you can see here so let's get started i have an overview of some warm-up tasks that we're going to follow in order to get the project set up and then from there we will start writing a bunch of code to create our url for the request to get a json response back from the request and then to parse the interesting photo information out of the json data and then of course to display some of that information in our app so let's start with task zero create a new basic activity template called web services fun the basic activity template is nice because it gives us this floating action button here and a little bit of starter code so let's do android studio new project basic activity we will name this activity project web services fund over the years the basic activity template has grown it now includes some basic support for fragments which are like many activities we don't need fragments for this project so one of the first things that i'm going to do is delete the fragment code just to keep our project simple so you'll see under com. whatever your package name is dot web service is fun there's main activity plus first fragment and second fragment so right off the bat i'm going to delete first and second fragment we don't need them in main activity there's some code that sets up a navigation controller for use with the fragments we don't need it so i'm also going to delete that and there's a call mat call back on support navigate up that we also don't need that i'm going to delete if you expand the layout directory there's also fragment first and fragment second which belong to those fragments that we deleted we can delete those as well and the last thing we need to delete is heading over to content main.xml if we look at the xml code for content main.xml there is a fragment in our constraint layout which we do not need so let's delete that and now let's run our basic activity template with all of the fragment stuff stripped out here it is we have no content in our constraint layout and we have this floating action button which is also called a fab fab and it has a little email icon we'll want to replace this with a little next icon to let the user know they can click this button to flip to the next photo if we click it out of the box we get this behavior where a snack bar that says replace your own action is displayed and it nicely animates moving the fab up so let's just make a few little cosmetic changes here and then we'll get started with the bulk of what we're here to do which is working with an api so first if we go to activitymain.xml here's where our floating action button is defined i'm going to change it from ic dialog email for its drawable icon to ic media next zoom in here so you can see what it looks like this nice little next icon is now being displayed here and by the way with the basic activity template activitymain.xml now uses what's called a coordinator layout and you can see we get a bunch of boilerplate code in our coordinator layout including an app bar layout a toolbar and the floating action button the key line of code here is include layout layout content main this is where as you can see in this little preview over here the bulk of our screen layout is defined so it's essentially taking what we were doing all in one file and breaking it across two files in order to add support for this coordinator app bar and toolbar layout so content main.xml this is where we have our constraint layout and we'll start adding our views which will be two text views one for the title of the image one for the date taken of the image and then an image view one for displaying the image source itself before we do that let's head over to main activity and see where we have our floating action button the fab right here the fab has an on click listener with an on click method so this callback executes whenever the floating action button is pressed so here's where the snack bar which is like a toast is being displayed so it says replace with your own action what we're going to say is fetching next photo so whenever the user presses the fab they'll see fetching next photo in the snack bar and then we'll also show a little indeterminate progress bar which is that circular spinner looking thing that'll let the user know hey we are working on something which is fetching that next photo now let's head over to androidmanifest.xml before we forget we will need to add a permission here for using the internet in order to fetch this content from an api so let's add users permission and we'll add the android permission for internet this isn't considered a dangerous permission request so we won't need to prompt the user to get their explicit permission but we do need to put this in our manifest to declare that we are going to be using the internet in this app all right let's head back over to contentmain.xml and here we are going to set up our layout our layout is pretty simple let's add two text views and an image view this first one will be for the title give it an informative id split title in for some placeholder text here and i'm going to make the appearance for this text view large so it displays a little bit bigger i'll do the same thing for date taken next i'm going to add my image view it already has a nice id i will change its scale type to fit center that way no matter what the aspect ratio is for these interesting photos that we're going to be downloading it won't get skewed it'll just fit it in the center based on its aspect ratio so let's have title date taken and our image view all be essentially constrained to the parent start and the parent end i'm not going to put any layout margin around the image the image view should fill all the available horizontal space so i'm going to set its width to be matched constraint now i'm going to take my image view my date taken text view and my title text view put in a vertical chain and now the last thing i'm going to do is specify that this image view should fill all the available vertical space and now everything is fully constrained and we are ready to head over to main activity and start writing some code i'll make my font nice and large here so in on create here's the game plan for main activity essentially what we need to do is we need to in on create fetch a list of interesting photos from the flickr api and i'm putting interesting photo in capital i capital p casing to denote that this is going to be a type we are going to define an interesting photo type and then we truly will have a capital l list of interesting photos once we have the interesting photos then we will display the first one and we will set it up so that our floating action button will flip to the next photo in the list on click so on fab click flip through the photo list and download the current interesting photos bitmap so we make our initial request to the api we're just going to get information on the interesting photos like their title date taken and a url we won't actually use that url to fetch the source photo image until we flip to that photo in the list with the floating action button next so this is the game plan in order to start working on one we'll need to learn a little bit more about the flickr api so back to the warm-up tests we're on task three so we've already taken a look at the featured interestingness photos on flickr explorer that's these beautiful photos of the day right here next if you're interested you can read this post about what interestingness is you can take a look at it if you want to know more it's essentially an algorithm that ranks the photos based on how interesting they are and the most interesting photos end up on the explore page next let's read the flickr api overview so here's the overview we saw this earlier if you haven't already made your api key you'll want to do that now so on this page it's giving us an endpoint which is essentially the base url for all of the api requests that we're going to make so i'm going to copy this and i'm going to create a new java class called flickr api for wrapping all of our flickr api operations at the top here i'm going to declare some static final strings the first one will be to represent the base part of our url for making our requests and i'm going to add rest on the end here since we'll be using the rest api next we will add our api key as a final string variable i'm going to note before i do this that this is generally considered bad practice to put your api key as a string in your code mainly because doing this is risky because if you say push this code to github someone could steal your api key if your repository is public or let's say your api key changes and you have your api key essentially compiled down into your apk or your executable it's very difficult to change it's better to put this in say an environment variable or to fetch this from a server or store it in a file that's encrypted these are all different ideas for better ways to store your api key rather than here in your source code but we just want to get started with web services fun so we'll do this but i just want to emphasize that it generally is considered bad practice i'll paste mine in here in a moment let's also add a tag that way when we write things to logcat we can easily find them next we're going to need a reference to main activity so we can do things like find view by id so that we can essentially call main activity methods when we have content available like when we have the list of interesting photos etc so here's a constructor for flickr api it's just going to take a reference to main activity and set the field of the class main activity to be that object reference parameter next let's define a method called fetch interesting photos the purpose of this method is to initiate the request to fetch the interesting photos and then later parse the response so how fetching content from the web works is typically with the rest api or the like you need a url to initiate the request this is exactly what happens when you open say your favorite web browser like chrome and you type in google.com or github.com you have a url for your get request for content and your content comes back in html format which is then rendered by your browser well we want json content to represent our data and not html because we want essentially the data not necessarily the visible content that a web browser wants so i've got a little diagram here of how apis work at a high level you have your app and it wants to make a request to a website or some service running on a server so you have to read the documentation just like we're going to do with a flickr api to see how to construct this request so we'll figure out how we need to format our url to get what we want which is interesting photo information the server is going to take that request parse it make sure that it all looks good for example we have a valid api key etc and then it's going to make a request to its database to grab the content we want structure it back in the format we want which will be json and send that back via response which our app will then have to parse in order to grab the data that we want put it into a format we can work with which will be an interesting photo object list and then display it in our ui so at a high level this is how working with an api works i've got here an example of an api request as we start to construct our flickr url this will be helpful just to get familiar with the different parts of a url so urls start with a protocol typically http or hdbs the s is for secure usually if at all possible you want to use https for your protocol so you have endpoint to endpoint encryption then you have a subdomain possibly and a domain so this is an example making a request to an itunes api which is represented by itunes.apple.com so our base url we already grabbed right here so the subdomain is api and the domain is flickr.com so api.flickr.com will be the equivalent subdomain or domain for our request and then we have a path to our particular endpoint on a server that's listing for a request so for us this is going to be a path to services rest and then the query string starts with a question mark and this is where we can put in essentially key value pairs that represent parameters for our request so we will need to read the documentation to see what we need to put in for our query string in order to parameterize our request so let's take a look at all the different methods that are available with the flickr api here's a list of api methods there are a lot of them we're going to scroll down to interestingness and look at flickr.inst.getlist so this is the endpoint method that we want to use in order to get a list of interesting photos for the most recent day or a user specified date we'll use the most recent day which will be today so for this particular method here's all of the arguments we have to potentially have to supply like api key see how this is required we have to provide this as a key in our query stream for our url and then we've got some optional date extras per page and page arguments we will set extras because we want to get some extra information for each return interesting photo record for example we're going to grab date taken and we'll grab also url specifically url underscore h which is going to be a url to a source image for the interesting photo that's longest size is 600 pixels i've had pretty good luck with url underscore h there are a lot of options here for different urls which you can take a look at in the url's documentation if you're interested so let's start working on constructing our url i'm going to write a method so our url is going to start with the base url and then we are going to add our key value pair parameters as part of our query string in order to customize or parameterize our request so let's start by specifying the start of our query string with a question mark and then that our method we want to call is flickr dot interestingness dot get list pretty easy to misspell that so i'm probably just going to copy and paste this just to make sure didn't misspell anything there if we have more than one key value pair in our query string then the key value pairs are separated by ampersands so next we're going to add our api key which i still need to add mine up here i'm waiting till we scroll a little bit further down like here so that it'll be off screen it's not good practice to share your api key in a youtube video like this so i'm not going to do that so url string concatenate with ampersand to separate this key value pair from the previous one api underscore key this key here this name must match exactly the documentation we'll add our api key next there are some additional key value pairs that i know we need to add by reading other pages in the documentation if you're interested in knowing where these came from definitely take a look at these resources here read these first developer guide overview and coding and user authentication and then there's the urls url link that i was referring to earlier about the different urls you can use for getting interesting photo source images so i read all these and i know that there are some essentially additional key value pairs that we're going to want to include so this includes format equal to json saying that we want our data to come back in json which stands for javascript object notation format next ampersand no json callback equal to one essentially what this represents is we're asking for raw json and then the last one are the extras that we saw on the interestingness.get list documentation page so this is a comma separated list we want date underscore taken and url underscore h [Applause] now we have our string what we want to do is write this string out to log cat just to make sure that it is properly formatted and we can test this by taking our url and pasting it into our favorite web browser's url bar like chrome and seeing if we get a nice valid json response back so we'll test it there before we start trying to test it in our code so let's head over to main activity step number one and oncreate fetch a list of interesting photos well we've started writing code to do this notice that fetch interesting photos isn't going to return anything because we're going to set this all up to be asynchronous so that our main ui thread which is what's running on create right here in main activity doesn't block waiting for fetch interesting photos to finish because it can take several seconds to get that request and parse the response so we will later write essentially a callback method that we will call when our interesting photos list is available let's try this let's open logcat take a look at our url we've got our protocol our subdomain and domain we've got our path the start of our query string we've got our key value pairs method api key json no json callback extras looks good we can click on it or we can copy and paste it into the url for our favorite web browser and it looks like we are successfully getting back json it is pretty long and pretty hard on the eyes but if you're not what i like to do is copy this and paste it into a pretty printer or install an extension for your web browser that will nicely format this json jsonformatter.org print is one of the first results that show up in a google search for json pretty printer if you paste your json here and then say make pretty what it does to make it pretty is essentially twofold one is for all of the nested objects it's going to use indentation and then it's got some nice syntax highlighting for integer constants and strings etc so essentially what json is is a dictionary or aka a hashmap which is essentially a collection of key value pairs all keys in json are strings so for example photos page pages etc these are all keys it's easy to know these are the keys because there's a colon right after them which separates the key from the value so the key is unique and it maps to a value the value can be many different types it could also be a string which is the case here for an id or let's look at a date taken right here date taken title okay these are string keys that map to string values they can be integers like page and pages so there are five pages of 100 results per page so we've got 500 total photos they can also be arrays or lists for example photo key maps tube this huge huge huge 100 item photo array where each element in the photo array is a json object which is also a value that a key can map to in json which is a nested json object so the json objects themselves are represented by curly brackets so here photo the key maps to an array of photo json objects you can see the comma which separates them so right here this is all the information for that first image pull it up again right here called atomic explored atomic explored so there's the title right there here's the date taken and here's the url h so if i grab this url h and paste it in chrome you'll see that the extension is jpeg this is truly a unique identifier for the source image right here looks pretty cool so let's close that and i will stop here in this video and carry on in the next video with creating an interesting photo class to model an interesting photo object whose data we're going to parse out from each one of these json objects in the photo array and we will start doing that json parsing in our flickr api class that's it for now thanks for watching and stay tuned for the next video

Channel: Gina Sprint

Views: 131

Keywords:

Id: mVK2utGi0Yo

Length: 30min 56sec (1856 seconds)

Published: Mon Nov 22 2021