How to Execute API Calls

in this video I want to show you how to use API calls in flutter flow now to use API calls you can come down here to this icon over here and if you don't know what an API call is it's simply how you get data in and get data out of your app so if you have another service it could be Twitter or Gmail you interact with those Services say getting tweets from or sending an email you do that with API calls and we've recently updated our API calls so I want to show you some pretty cool stuff but let's start with the basics so if you come over here and you just click on the plus sign we can add an API Group or API call we'll get to groups in a second but we just want the Bare Bones one right here so here we go and we need a service to use for our API call and for this one we're going to use Json placeholder and it's just a fake API that you can use for testing and so if you scroll down you can see what resources you have available so we can grab posts and users and if you just click on here we'll actually see the data that we're going to be getting from this API so you can just see here we've got an array of objects and each object is a post that has a body a title and a user ID okay so that's what we're getting and the URL that we want is right here so this placeholder.typaco.com and that's just the base one so we're just going to grab that so first we need to give our API call a name now this doesn't have to do with any of the sort of technical parameters so this won't affect the API call this is just for our reference when we see our all our API calls here and when we're building our app so you wanted to something that like makes sense right so maybe this one we will we will just get our posts right here and so we'll just call this posts next you have the method type and you've got five different method types but to be honest most of the time you're going to be using get and post and these are kind of what you would guess they would be get is for getting data most of the time and post is for posting data like when you're sending data over to like a database or a service or something like that no this isn't 100 true so you just want to check the documentation of the API you're using and it'll tell you which method types to use but we're just getting some data so that's what we're going to get now our API URL is that what we just got so we're going to paste that in and remember this is post so we want to get specifically the posts ones so this should be just slash posts like that now that's enough for this API call that we need so we are going to go over to our response and test and we're just going to test it right here and we can see there we go this is the same information remember when we actually clicked on that link we're getting that user the body it's just an array of objects and that's it that's like the simplest thing in the world right but let's look at a few more of the additional options that we have so when you're making an API call most often you're gonna send along additional information and the two main ways to send additional information are with headers and query parameters now headers are going to be things like authorization so if you need an API key to be able to access it for Json placeholder it's open and anyone can use it but for many apis like the Yelp API that we'll look at in a second you actually need to get a key so you sign up for an account and generate a key but Json placeholder is open that's why we can click on these links and we don't need any other additional information but if you do and we'll do this in a second you can add the header here you can also add other information Nation like what type of data do you want in return query parameters is another way to send information and these will be attached to your API URL so you'll see it it'll be added on to this URL when you actually make the call itself and we can see an example of this with our Json placeholder we can see a query parameter down here with this comments root we have the comments and then we've got this question mark which is saying that there will be a query parameter after this and then you have post ID and one so if we click on this we can see what we get all the comments on a certain post that has the ID one okay so let's try this out in flutter flow we want to get this exact thing so how would we do that well first we're going to change our route to this comments right here so instead of posts we're going to say comments and just for good measure let's keep it clean comments and then we're we're going to add this query parameter and the name is going to be this first thing before the equals and after the question mark so here it's going to be post ID so we'll copy that in and then the value in our example was one so we're going to put that in one and of course you can get this from a variable so it's from somewhere else in your app we're just going to hard code it now for the example and come over to our response and test and we're going to test this call and if you can see we get the same exact thing we got one two three four five comments and one two three four five the first one is this Elise Gardner and that's what we've got here and we can see the complete URL right here we got that Json placeholder comments and then notice we didn't put in that question mark or the equals because that's part of the construction of the final URL when you have query parameters okay sweet let's come back to our call definition and see see a few other things let's get rid of this right now and let's go back to just our posts and let's test this again and I want to show you something pretty cool so here we've got all of our posts and if you scroll down this will be expanded kind of big so you can scroll down to see these Json paths and we've got a whole video on what a Json path is but it's just a query language that allows you to filter down this data that you get back because often you'll make a call to a server so you'll get some data back but you don't want all of it you just want some of it like you know you'll probably display the titles and you won't display everything and you want an easy way to be able to filter through then you do that through Json path but we've added a cool feature here which is recommended and this is going to look at the response the structure of the data here and it's going to make some intelligent guesses as to what are the types of things that you are going to want to filter down to so here are examples of what jsonpath looks like and and it's looked over these things and it says hey maybe you want to grab all of the user IDs or the ID title or body and you can see the logic that it's done is that in each of these objects it's got four key value Pairs and so and each object has that structure so it's thinking hey you probably want to grab one of those four things right but it gets better and smarter too because these are color coded according to the data type so if you hover over here we can see that the type it's a type of list of integers that's what that means and any integers is going to be this purple or down here we have a list of strings and all the different data types are going to have a different color so you can quickly reference them here we can say is it a list and it's already recognized that these are because you're collecting all of them into a list so you can see here let's look at this ID here is it a of one two three it's a list you can click the I right here to see what the data is actually going to look like a bigger preview than the actual that short preview so we can see it right here and what that's doing is it's just running the actual filter and showing the complete data so here we're grabbing the ID which is these guys right here and if we see them we can see that when you run this Json path query this is exactly what it's going to look like and then if you want to include any of these things any of these paths then you select it right here and this will be part of the saved call that is pretty awesome okay let me show you one thing before we get to some more advanced things and inside this advanced settings we can see we've got some pretty cool options so this first one is if you want to make this private and what this means is that if you have if your call needs to be secure and the most common reason would be if you have credentials authentication that is an API AI key that you don't want exposed that is users to be able to access it you want to turn this on because then the API call will be rooted through a cloud function so what does that actually mean so when your app is shipped if this is not on someone could look at that ship that compiled code and could see the API key in there if this is turned on then all of that API call all that logic will be moved into the cloud and you'll get a different URL that will be the actual URL in your app and so you use that URL it goes to a cloud function and that cloud function will have your credentials there but it will be sitting on a Cloud Server and it'll be secured so no one can access it the second cool feature down here is turned on die default and this is for Cores errors or cross origin resource sharing c-o-r-s now many apis don't like it and don't allow you to use it if you are client side that's like on a website and so here we are on a website we're on a client and these apis are gonna say Hey listen you can only get this data you can only interact with our service if you are a server not if you're a client and this is done for security reasons it's done for rate limiting issues but if you've ever run into Coors eras before they're really annoying but this makes it easy to just avoid those all together and you use a proxy so that even if you're using a client-side and the API doesn't want you to use it you'll be fine okay sweet so let's move on to API groups and this new thing here variables which are super helpful and very cool so we're going to get rid of this API call we're going to delete it and we are going to make an API Group now you use an API Group when you have multiple endpoints that you're going to be using that have a same base URL and for this example I want to use the Yelp API and if you see here the base URL for the Yelp API is this HTTP blah blah API yelp.com V3 and then after here is going to be everything that changes so if you're doing a business search then you would have slash businesses slash search if you were doing a phone search then it's going to be slash businesses slasher slash phone but this part is the same so if you've got an API Group it allows you to set up this base URL and more importantly set up shared headers so let's grab this base URL right here and let's dump this in we're just going to call this Yelp and here's our base URL and now we can set up headers and these headers are going to be shared amongst all of the individual API calls that we put in this API Group and so obviously authentication be one of them so I've got an API key right here so I'm going to grab that so I've got an API key already and I'm going to add it in here and the structure of headers is just like you see here in the example where you have key value pairs that are separated by a colon and you can check whatever API you're using for the proper structure for whatever headers you need so the most common authorization is going to be authorization colon and Bearer space and then your API key okay great so these are the things the base URL and this authorization is going to be everything that gets inherited by the individual API calls in this group so let's add our group and boom we're done so let's just open this up we don't have anything yet but let's open it up and so now we've got a new API call inside here so what's the first one well let's do that business search first so it's V3 slash businesses slash search awesome so we we already get a business search here so we're just going to call this business search it's space make it pretty awesome and let's add that in there yes it's a get now we don't see it here but we're inheriting that authorization header right there so that's good and cool let's go over to our response and test so we're testing our call and we get an error what's the error it says validation error and we get a nice description because this is a well done API so we get good error handling and it says please specify a location or a latitude and longitude okay that's super helpful right because we set this up but it's telling us hey you want to search for business you didn't actually enter a business in this is the proper end point but you didn't say what you actually wanted to search you got a search box with nothing in the search box okay so let's add this in but how do we add it well remember there's two main ways to send additional information in our API call that we talked about headers and query parameters and how you know that is to go look at the documentation of the API okay so let's go back here and we can see here the parameters right that's our query parameters that's the same thing Okay cool so we look in here and normally it's going to tell us whether they're optional or required so down here we can see that we can search for a location that's the name of it okay great and the description is going to be it says it's required if either latitude or longitude is not provided and we've got some examples so like New York City or NYC or a full address so this is a pretty forgiving property here which is pretty cool okay so let's grab this location I'm copying that sucker coming over to our query parameters I'm adding in a query parameter I'm going to say location and let's search for Chicago because that's where I live let's go over to our response and test and test it again and sweet we get this great response status 200 beautiful and we get an object with a business properties that's an array of objects presumably this is a bunch of different restaurants girl the famous girl on the goat and if we scroll down we'll probably see another restaurant yes we do wild pancakes whoa wild Pancakes and Cafe that's awesome and so we get a bunch of restaurants down there and once again if we come down here we see all of these beautiful recommended Jason paths oh look at that lovely okay but and here's where it gets very cool we don't want a hard code in Chicago to this API call because we're probably using this as a service to be like hey search for your own you know like maybe we have this is a conference app that people can use and they say where are your conferences you can search for us restaurants there you know so we don't want to hard code this in but we want it from a variable and what variable do we want well let's create a new one so we could create it here or we could create it and that's what this variables field is for so let's just add a variable here so we can see it come in and we can just call it location now remember this is not going in our string or anything right now this is just an abstract sitting in flutter flow variable so we're just calling it location so this doesn't correspond anything this is just however we want to name it the type is we don't have it set but let's set it to string because it's always better to have a type and we're not going to have any default value okay so then let's come back to our creative parameters we're going to say from variable yes and now we can see that location variable right there all right sweet now let's go to our response and test Let's test our API call up we could not execute the search try to specify a more exact location that is to say we called it without a location that's because we got to put it in but now right here we see our variables and if we click into our variables we can set a location now let's do a new one let's say Miami and we that's just saying we're including it in this test call right here so let's test it and now we get a list of restaurants in Miami this one right here that I cannot pronounce okay so that's sweet but you can also reference variables not just in query parameters but in the URL string itself so maybe you have an API that you want variable data say in the middle of this URL string you can reference a variable in here and you just do that by putting it in square brackets so once you define the variable down here you can reference them up here so I can just go location and that would reference it but I can also add that into the middle of the string so I could maybe I could search location and something on the end here food or something and it'll render that as whatever the variable is and you can reference that in your app so that's how to use API calls in flutter flow if you have any questions please leave them below and we'll see you in the next video

Channel: FlutterFlow

Views: 34,027

Keywords:

Id: 22fuYHe0ZZU

Length: 18min 43sec (1123 seconds)

Published: Sat Oct 08 2022