Connecting to the API

Gary Simon
A free video tutorial from Gary Simon
Professional Freelance Designer & Course Instructor
4.3 instructor rating • 17 courses • 233,342 students

Lecture description

In this video, first, we're going to setup a free account and copy an API key. Then, we're going to create a provider with the Ionic CLI and use it to connect to the IGDB API.

Learn more from the full course

Create a Full Ionic App with Material Design - Full Stack

Build a beautiful hybrid app that people will actually want to use! Go from design to card, start to finish.

03:41:19 of on-demand video • Updated June 2017

  • Create a relevant and effective logo
  • Building App Mockups in Adobe Experience Design (XD)
  • App Prototyping with Adobe XD
  • Connect to an API
  • Understand Ionic Templating, Storage & Material Design
  • Integrate Search in an Ionic App
  • Integrate Cordova Plugins
  • Integrate Angular Animations
  • Build an awesome Ionic 3+ App
English [Auto] All right. So in your browser head on over to I g D-B dot com forward slash a p i now so this is for the internet game database and they offer a video game database for free. And of course they do have different paid plans. Now I of course you can read more about this here. But essentially it gives you access to a database and API of thousands upon thousands of games. And that's what our app is going to be based on. We're not going to have our own database. We're going to tie into this database instead. All right. So we're going to go ahead and you want to click on get freaky. I'm already logged in but I want to right click and open incognito so that you can see what it will look like for you when you're not logged in and where you need to click in order to basically go ahead and get started. So Ray here Sign-Up free. That's where you want to click so that you can start and start with your own account. Essentially the Senate process those little bit fidgety for me as I recall but hopefully have a little bit more luck than I did. I did eventually get it to work. So once you create your account and you log in you should be presented with a screen like this. Now this has all of the end points that we can use to tie into the actual database. So we'll be using the Games right here will be using genres. And it just gives you information about what type of options and you are all parameters you can specify and also what the responses are so we'll look at that a little bit later. But first we need to actually get our API password so notice right here we have applications. Now I have a default application I cannot recall if it was already installed or set up and when I created my account. If not then you just want to click on Create application. So I'm going to click on my default application and once that's set up what we want to do is click on get the keys and this will provide you with your API key that you need and you want to copy this and just save it temporarily in a notepad file or a text file whatever. Because we're going to be using that very shortly. So now we want to go back to our command line or our consul. And for me real quickly as we drag this up so you can see this in Commander we can just right click and open up a new console window and start. Or you can just get up a second instance of your console or your command line. And so what we want to do now is hop back into the correct folder which is coming iPhone G and we want to use the ionic command line interface to generate a provider. So this provider has a single file and it's what's going to allow us to connect to the API with the key and also define a series of methods that will interact with that API. Ans some of these method names will be get games get genres search games get a single game etc.. So let's go ahead and do that. So ionic generate or you just comput G for shorthand provider and then the name of it. So we're just going to call this data. All right. So it's very quick and all it does is generate a file for us with the basic scaffolding so we don't have to do it by hand. All right so now we need to get up our code editor. Now I'm using a free code editor and this is visual studio code. You can go to google and download it if you wish or you can use any other code editor that you're more comfortable with. So I have the project Oldman upcoming hyphen G for the Forder. And just so I don't forget. Let's real quickly go to configure ex-MIL and we're going to change the name of the app. This is essentially what shows on you know underneath the app icon launcher on your smartphone. So we're going to name this upcoming games and then give us a real quick description search for the latest upcoming games something like that. OK so you can if you wish you can go ahead and further refine this and customize this based on your needs. But it's going to hit save for now. And let's go ahead and go to our source app and app. Module dot TS file or type script file. And as we could see real quickly we use the Seelye to generate this provider and automatically added that for us and our import data provider which then adds it under the provider's section right here so we're going to be referring back and forth to this file especially when we generate our own pages as well with the Seelye. So let's visit that provider that we just created. So it's under providers right here under data and data that TS now in order to interact with this particular API we have to import to other specific functions. For from HTP. So that is headers and request options. All right. And next let's go ahead and just at the very top of our class we're going to define a header's new headers and this is in reference to the function that we imported up here. Inside of here we open up a parentheses and an object and we define x M A S H AP key. And this is where you paste in your API key that I told you to save earlier. So I just pasted mine in and you want to make sure you and this here with a semi-colon this line and then underneath here we're going to define options and it goes new request options which we also put up top and we open up an object with headers this header's All right great. So now when we define a new method to interact with the API like for instance to get games then we're going to pass in this options variable in the request and that's what's going to give us their permission to access it because we created the account and this is the key associated with the account. So let's go ahead and create our first method for getting all of the latest games from a particular genre. So first real quickly want to set up a new property of type number and 50. So we're going to say we're going to limit the results to 50. So the first method is going to be get games and we're going to pass in a genre and an offset number OK. And it's out of here. We're going to say let a genre equal John-Roger and let offset equals the offset number. And that's passed in right here. And then we're going to return. We're going to reference this start HGP dot get in this HP reference to dependency injection where it says public HP HTP which is imported up here. So we're going to get. And this is where we pass in the URL to the API endpoint. So understanding this part is pretty important. So you know where do we get this your all. Well we go back to the documentation. So if I hit back here real quick and we go to games we'll see that we have the endpoint definition. So this is the URL that we wanted to define initially. So we're going to take this and copy it and we're going to pace that in here and then we have to specify a series of us all parameters based on what we need so as we can see you're all parameters for this particular games and point fields. We have a limit that we can past in which will limit the number of results and this is capped at 50. Offset this will index the offset for if you wanted to use pagination we can order it by release dates for instance and then we can also search for keyword search if we want to specify that which we want initially although we will when we have a search function integrated. So with those in mind let's go ahead back here. And just inside or after that last slash we're going to put a question mark and that's for you are all parameters. The first one will be fields and this is what fields do we want to return. Well we could say fields equals all in which case it will return all the fields associated with the games are for each individual game. For me we're just going to say we want to return the name release dates the screenshots and that's it. So there's a lot more that it can return. And if you want to see that if we go back to the IGB Daugavpils JPI and good documentation it will. And if you go for instance to endpoints and game it will tell you all the fields that it will return and you can specify each one of these. Okay. So let's go back here. We're not done yet. So next we're going to put in an limit he calls plus this limit plus. And then also and offset equals plus offset. And then a another plus and we're going to put in an order we're going to order it by release dates date. And again you can reference this in the documentation that I just showed you. And we're going to order it by descending. And so what this means right here if we go back to that documentation real quick because I don't want to explain this is if we go down to reference and we go to ordering this is where I got this information from. So you can read this further if you wish to understand how to order results for instance. All right then we're not just done yet. And we're also going to pass in and filter. So the filter once again if you're trying to filter your results I'm just looking at this API we go to filters and this describes exactly you know what filters do. So we're going to be filtering in returning only results that let me bring this up real quick. Filter so genres don't equals so are not radicals but rather in brackets. So it goes genre ID. So what this is is saying we only want to return the upcoming games that are in this particular genre and also and philtre screenshots. Exists so we only want to return results that actually have screen shots. All right. And then passen this thought options OK I know that was very lengthy but take your time. Hopefully I type her out correctly myself. But finally we don't want to add a and then at the end we want to add a map going to map the response to of type. Jason and that is our first endpoint. So thats good and say of that. Now in the next video we're going to work with our first page and we're going to tie into this and see if we can get the results to get displayed in the app that's running in our browser. All right.