Creating a League of Legends Player Searcher using React / Axios (League of Legends API)

hey there it's cooper codes today we're going to be taking a look at creating an application to search through players in the league of legends database riot games has a public api we can use to search through players so we're going to use react to make a pretty basic front end and then we also are going to use axios to handle the request to the api and then show data to the user so for example if i look up the player cooper here you'll see league is in case sensitive so it's going to find cooper here we can look up codes it's going to show me the level it's going to show me their current profile picture and we can look up you know any player and kind of find their specific data and this is all through using requests to the league of legends api so we're going to look into how to handle those using axios and making the react code flexible and usable to kind of build on top of this to make your player searches more complex and possibly show more data than just this let's get into it before we get into any development we want to make sure that you have an api key to use so you're going to want to go to developer.riotgames.com and then pretty much log in with your riot games account and make sure that under development api key there is a string here for you to use i'll show you guys how to use this later but just make sure you have one alright so i'm going to take a moment here before we get into code to kind of explain how our entire application is going to work overall so we have this react application that's very similar to the one i showed at the beginning of the video it's the same concept where you have a search for player and you have a little text box to empty your player here and then player information is going to show up down here and we also have the league of legends api be in contact with so let's look at the overall flow of what's going to happen when the user enters a player name so let's say we search for a double lift for example the league of legends api has documentation to show us what requests to make so if we want the player data for the certain name we can say get and it's going to be something like this this isn't the exact api call but this is just an idea of how it would work and this is probably going to return an object with all the player data such as profile picture and level like we saw in our application and it's going to look something like this so it's coming in a form called json which is javascript object notation pretty much it's an object of data and it has things that we can use so as you can see here it shows a profile picture and it also shows a level the profile picture is a string which shows a certain you know png file may be hosted on a cdn somewhere then you have the level which is an integer and if we wanted to show this in a way it's more easy to understand it probably looks like this is something you would probably expect to see as a user we're going to take this data and then bring it over to our front end and then show that result to the user that's kind of the process that's going on here so just to recap that there's kind of a three-step process in this diagram the first one is getting data from the user search getting that text input then we want to get data from the api using that text input for example searching for double lift and then we want to show that result to our user once we're there we're done and we're good to go alright let's get into coding the actual react application first things first you're going to want to open up a folder using visual studio code or whatever text editor you're most familiar with then you're going to want to get a terminal and then go to that specific folder from there we can create our react app using npx so we can say npx create react app and then the name of our application or the name of the folder so i'm going to say league search for now okay so once your create react app is done you're going to want to make sure you cd into the league search folder that's been created with all the different react parts inside of it you'll see we have node modules we have public we have source and the source folder is where we're going to do the majority of our coding for this project if we do npm start here we're going to be able to see the contents of the app.js so let's just make sure that's true get these side by side you'll see we have learn react here we have the edit source app.js and save to reload subscribe to cooper codes and this is just to show you that this will update in real time and so pretty much this is showing us the live version of what our app.js is looking like unfortunately we could probably get rid of a lot of the code in here we're going to make a very simple user interface with just a text box and some text input so first things first we are going to pretty much delete the entire header object here and we just want that outside div remaining so from here we can make a let's see we can make a container to kind of contain our header contain our search bar content into a little box pretty much and you'll see we can you know start by making a header here let's say h5 and say league of legends player searcher all right so it's looking good already now we can go in here and create a text input so we're going to create an input here we're going to make sure it's type is equal to text and then we'll see what that looks like all right looks great to me and then we also want to have a button which is going to pretty much be like the submit player or search for player button all right so this looks great to me now we have pretty much text input here and this is our very basic application so far so you'll see app is returning this block of code pretty much it shows we want the app to show this we can also have different types of functionality inside of our app outside of the return statement and why is that important right well we kind of want to create a variable that keeps track of what is inside of our input we can use the react use state hook to keep an active variable that shows the text content of our input box so a couple things you have to do initially to set this up is go to the top and then import you can just say react for now although it's not necessary and then we can also say use state from react so use state is going to give us two things it's a function and you give it a parameter and it's going to give us two things here where you say const the actual variable itself so let's say player search and then the function to set that variable so set player search that's what makes you state so interesting and powerful is that the only way to change the value of player search because as you can see it's a const right the only way to change it is to call the function set player search so even if your react application is refreshing and refreshing as long as it's not saying set player search for example or calling that function you're fine so a good example of uh using this is set player search hello world from here on now player search is going to be the string hello world right and this is an example of how that is going to work if we were to say console.log player search right here it would pretty much say hello world you know or however we did that there so that's just a simple way of understanding you state for this tutorial if you want to get more into it there are way more crazy things out there like react re-renders and like why it's powerful and i would suggest take a look at the react documentation or a video specific to use date so how do we want to use the use date here is we want to have a variable so whenever the input changes we want the player search to pretty much show that new string so whenever the input changes we can use on change here on change is pretty much going to call a function so we can take the event from the on change right since the event is coming from this input box you can say set search text and then this event dot target so the input box we're currently at and then dot value so getting the value of this text and that's pretty much going to help us out with having this consistent functionality working i'm actually gonna step back here and say that this should probably be called search text i think this makes more sense and so i'm gonna say set search text instead of set player search something we can do that's kind of interesting is we can console.log search text and we can go into our google chrome console over here and get an idea of what's actually happening in the back end here so let's refresh this and yeah as you'll see we have this thing being logged and that's actually our search text being changed to his new value so if you type you know whatever type your name in there if you want type anything else and you'll see it's getting constantly updated and so this is really good so if we wanted to do something like call an api with a specific name we now have this variable that is showing the name and so this is really great for us so now we can get into the actual axios part and calling the league of legends api just for making this a little bit easier we can do this make a const api key and then set it equal to whatever your api key is so this is going to make our code a little bit more reasonable so we don't have this random key popping up in different areas just makes it more reusable and easy to understand we're going to have to go install axios so pretty much you're going to go to wherever your directory is wherever your folder is with the racked application inside of it and you're going to say npm install axios so ax ios and this is going to install the latest version of axios all right so now axios is fully installed if we want to actually use axios inside of our application we have to say import axios from the package which is called axios so now you'll see if we say axios dot there are going to be a lot of different functions relevant to the actually you know axios object itself is getting passed in here so to set up our functions what we can do is make a function called let's say search for player right and pass in the event if we want i'll show you guys how to do that in a second when the player presses the search for player button here we want when it's on clicked we want to use a similar syntax to the on change above where we take the event of the click and then we pass it into the search for player and have the event there just in case you want the event it's going to do a similar thing where whenever we click on this button it is going to go and run the code of whatever is inside of this search for player function so we can go in here in console.log hello for example and if we go over to our react application make sure to npm start uh after you do any other npm installs or you know changing things okay looks good to go and let's inspect element and then go to the console here and so we can say hello oh let's see it actually doesn't matter so that's actually a good point i can type in a name here and i'm going to press this and you'll see every single time we click it it's going to say this hello and this is kind of showing whenever we click this button we're going to have this function be called now what do we want to do we have a couple of things that need to get done in this function first one is set up the correct api call handle the api call and that's pretty much it for now so setting up the correct api call you pretty much have to go into the actual riot games league of legends documentation to kind of get an idea of how the api works looking at the routing values part of the league of legends documentation we can see that our api is going to start with this string so let's make a variable in our code let's call it api call string just to be simple and you want to make sure it's https right here and then after that have this initial route so i'm in north america so i'm going to use that but even if you're outside north america i believe it's fine with you using whatever call you want and so now we have access to kind of like the base layer of the api but now we want to make a specific call so if we go to this slash apis page on the developer.rightgames.com this is where you'll see the actual routes that i'm talking about from before and even this little get request that i was talking about before so a little bit of looking through the documentation i was able to find the correct kind of get request that we want so we want to get a summoner by a summoner name and that summoner name is what the user is searching for for example so if we click on this we can kind of see all the different types of data that we're going to get returned and also how to request for it so we can take this string right then add it to the end of here to the end of our api call string but you'll see instead of summoner name we're going to instead place our search text this is what the user is searching for and it's that variable that we were looking at before and so this search text is going to allow us to pretty much have a specific user inside of there and we also want to do something where we pass in the api key so this is just something that it might be subject to change but you pretty much have to say api underscore key and this question marks pretty much says you're adding a variable to the end of your link for the riot games api to look at so you're going to say question mark api underscore key that's at riot games decided for their api and then you're going to add in your key to the end of your request so as we already have it we have an api key variable we created before which is just a string here so here's our entire request it's this initial setup where we're looking up a summoner by a certain name we're adding in that player's name we're searching for and then we're adding in our api key to the end all right so let's do an experiment so you don't have to do axios to make requests it's just a way to make requests inside of your programs but whenever you go to a website you're making requests all the time so we can go in and add our data here let's say double lift so we're pretty much doing the same thing we have this initial api call then we have double lift then we have question mark api key is equal to then i'm going to add in my api key here and you'll see it's actually returning us the data that we'd expect so you'll see double lift he has a profile icon id of this the other you know information here it also has a summoner level we can look at and so this is actually giving us a block of data and you can just do this from your regular browser so hopefully this helps you understand what's actually happening is we're just making requests and it's giving us data all right so now that we understand requests from our browser we can actually use axios to make those same requests so with axios you can say dot get and then just like you would in a browser you're going to send in that certain string we're using so for example api call string here right and then there's a catch and a promise here so this is like regular javascript promise syntax i would say don't worry about it too much because it's kind of simple to see once it's built up so pretty much you're going to have a a success here then you can also catch a error if you wanted to show api errors for example and so we might as well catch an error just to show the entire thing overall you'll see a good example of an error is let's say i go over to my browser here and i you know mess up my api key let's like delete a couple of characters it's then going to give us an error and so that would land in this you know error section here we can console.log the response we actually got in the success and also console.log the error we will get if we ever get an error so we should be able to go to our react application inspect element here and then move over to the console and so let's type in a player let's say vlots and you'll see we're actually getting this status 200 which means good api like block of text and so this is coming from app.js at line 16 and check out where line 16 is it's over here console logging a response under the success this actually has a config it has headers it has other things related to the response but one of the main things we care about here is the actual data you'll see this data shows the player name the profile icon id and the summoner level all things we care about so if we actually do response.data instead and let's refresh let's do the same player you'll see we're actually getting just that data with the account id all the things we're kind of expecting here we can kind of use this data to then show to the front end user to save the player data let's just make an object to kind of save the entire object of the player data as a state so we can say player data and set player data here and we can say use state and states aren't only specific to strings you can also say an empty object for example and same way we would set a string we can say set playerdata response.data this means that the playerdata variable is then going to be that request that we're seeing before right or that data block we're seeing before so if we get rid of this console log and we only console log player data for example so there actually were some issues there when we were logging the player data right after setting it it wasn't showing but you'll see here um when we log it outside of the function and so when react re-renders it's always going to call these things on the outside like console log player data imagine it's running through this code it doesn't call any functions of course but if anything's outside of a function it's going to call that you'll see the player data is then going to get changed there so just to see this working we can press votes here search for player and now it's going to show us right away that actual vlots player data which is great because that means we now have an object to then further use inside of our actual return statement here and so we can go and then create some logic in our actual react return statement to show a possible player data block we are going to use something called a ternary operator ternary operator is pretty much a way of doing an if else statement and one line it's a way of creating easy to understand react logic for example if player data is an empty object then we don't have any data to show so we only want to show a block of data if there is an actual new player for us to show so how can we do that we can pretty much say if player data itself doesn't equal an empty object there's some strange things that happen with javascript and understanding if a object is actually empty or not and you'll see if you look this up it's kind of a common issue one way to get around this is to do json.stringify which means take our object and make it into a string and we want to make sure that object doesn't look like this empty object string if it's anything else that means we most likely got a successful response from the api that we can show to the user so now let's create the full ternary operator so the first thing we have is the question mark the question mark is saying if this is true so let's say this is actual player data object that large object is not going to be an empty object so that's going to be true right so we can make a little react fragment and let's just say for now there's a paragraph inside of there and it's going to say true or like let's say you know we have player data and then you're going to have a colon here and the colon is going to represent the false part of the if statement and so now we can go in here and say okay no player data and so this is kind of a large you know line of code so let's block this out so we can say from here kind of separated out this way so now we have our two blocks right we have the one with the player data and we have the block with no player data and so let's go over here vlot is already saved so it says we have player data if we refresh you'll see we have an empty object so it says we have no player data if i look up lots it's going to say we have player data because now it has that object showing the vlots data that we searched up now we actually want to get certain attributes out of that player data and we look at this we already have a console.log of what the actual data looks like so let's make something easy well we have the name of the player so we might as well get that in there should keep this paragraph here but instead of that we're going to can actually use ob like you know variables for example like player data and say dot name this is going to show us the name of the player so let's just show that working all right showing vlots and you'll see if it's still going to say no player data because it's going to this part of the statement right all right so now we have playerdata.name and let's just also get the summoner level right so we can say summoner level and then same syntax we can say player data.summoner level and how do i know it's summoner level where is that coming from is let's go to our local host here type in a player see that console logged object you can see it's called summoner level inside here so you'll see we're already getting some actually accurate data let's look up random names and see if it shows different levels okay 232 we can look at vlots it's going to be 205. this is looking great so now we want this league of legends profile picture you'll see they have profile icon ids which is kind of strange but if you look into the actual league of legends documentation hey let's see if we can find it here profile so they actually use this link here to have different profile icons and that number is going to be you see where the 685 is it's going to show us a certain png based off that number so we can actually take this link let's create an image really quick with a width of 100 and a height of 100 just to make it a nice simple square and we can set that source equal to this string oh make sure it's a string that riot has over here and then we want to add in our specific you know tag their specific integer from the data of this object so it's profile icon id so we can go in here and say plus player data dot profile icon id and now oh one second i think i missed a something oh gotta make sure you actually close the image object whoops okay now the image object is closed and we have the actual profile icon showing unique to that specific user we can go to our web browser and then type in you know whatever we want here and let's just get an actual image id that exists so let's see the one over here it's four eight zero four okay so we can go in here say four eight zero four and look this is actually doing the exact same thing where it's showing us where that png is living on a cdn which is a content delivery network it's pretty much supplies you with like pictures for example in this example and so that allows us to use this integer they provided to us to show actual unique profile pictures so now we can say search double lift for example search you know i don't know if that exists there we go let's see we already got cooper going here and you can kind of see we're making requests to the league of legends api whenever you press search and it's updating that new player data this is pretty much the tutorial we are pretty much going in managing these requests to the api and then showing unique data to the user a really great thing about the league of legends api is it has a lot of depth to it there are a lot of different things you can do once you have access to all of you know these variables over here such as you know the id the account id uh the p uuid you know stuff like this you actually use those in other api queries to kind of show more unique data like you know ranked games and other things like that and you'll see the setup to do those calls is going to be very similar to how we do the setup for the axios calls over here you're going to do a get request you're going to you know set player data or set you know ranked game data for example and you can kind of keep moving forward working with the api hopefully this tutorial has been helpful in understanding how api calls work how to handle api calls with axios and how to show those called results to the user all right have a good one

Channel: Cooper Codes

Views: 18,541

Keywords:

Id: w9qaS6Q0Yr8

Length: 24min 21sec (1461 seconds)

Published: Mon Nov 01 2021