API calls in FlutterFlow - Tutorial

hello and welcome to the tutorial for using api calls inside of flutterflow this is a very powerful feature which will allow you to integrate your apps with all sorts of services now if you're already familiar with the concept of api calls uh just skip to the next section so what's an api call in many cases when you're building your app you want to communicate with different services for example you may want to send an email when a user signs up you also want to in some cases retrieve information from these different services for instance if you've seen our launch video we demoed this app called fluttermet which lets users browse and search the catalog of the met museum and as you can see we have a list of departments here which we fetched using an api call and if you wanted to dig into a department we're also getting all the different works of art for that department using an api call so api calls are powerful lets you integrate with different services now in this tutorial there will be three parts we'll talk about setting up api calls and then we're going to talk about how to trigger them and finally how to use the results in your apps all right without further ado let's get started so here we have the api configuration page inside of flutterflow you can get to this page by clicking the api calls tab here once you're inside of the project this feature by the way is only available to our users on the pro plan okay as you can see we haven't defined an api call yet so let's get let's hit this add api call button and start creating one okay there's already a couple of sections let's start with the first one api call name and this is where you just give it a name this is for your benefit so that when you're calling the api later you can easily reference what the api call was now for this api call for the demo we're going to build something that lets you send an email so let's call it uh send email here as the api call name and there's the different type is it going to be a get or post api which kind of changes the settings based off of what the method type is and i recommend if you're not familiar with get a post apis the different methods just doing a quick google search at a high level typically a get api call is really just the url all of the information is going to be encoded in the url and it returns a response with post you can associate more data in what's called the post body which can contain a lot of a lot more information there's a header section which is common between regardless of the method type and we have what we call variables here when you're doing a post call this is variables that you can use for flutter flow so if you have let's say a text field and you want to get the value from the text field and pass it into the body you'd use a variable or if you you can also use it for the api url and the url is just an address for this webpage for example that's the url or it could also be for an endpoint for the service that you want to trigger in this case we're going to do send grid api so let me get a sample send grid email api example search so that we can um do an email api all right so here you can it already tells you the url is going to look like that so i'm just going to copy that paste it in here now there's a header section um and i've already created a twilio sendgrid account and set up api keys and so on so depending on what service you're using this could be different but the way you set your api key actually is based off of this header that says authorization and the value of the header is bearer and then there's a space and then followed by your api key so what we have here is we'll add a header the name is authorization typo and the value is going to say bear space paste the token all right so i've pasted my api key in here and uh there's no more headers although here says content type application json and we'll automatically actually set that for you based off of the the body type here here i'll select json and once i select json there's the section that appears that lets me paste in the message that's going to be synced and if we go here you'll see this is the data that they have as an example let's just copy this whole thing and paste it in i'll just copy that in here and hit paste and let's format that real quick so it's a little easier to read cool so there's this is an email service there's the person i'm sending the email to the email address the name of the person a subject line the actual content just very simple message here and there's a from and reply to field and what we'll do here is i'll show you how to take each of these different pieces and use variables to replace them to what your what you desire all right so let's add the variables we'll start with the email the destination email so who you're sending this email to let's call that destination email and that's going to be a string as you can see it's text no default value and as soon as we've added that variable it shows up here and you can just drag and drop it into the destination let's just start now i'll drag and drop here well there you have it so now i can delete this original part add the comma back in so we have the destination email and the name we can skip let's just make this simple and just send the email we're not going to customize the subject flutter flow test email and for the content we'll just say hey yeah that's fine and there's the from field and this depends on your same good setup i've set it up so that the from is gonna come from team flutterflow.io so this is going to be fixed we're not going to use a variable for this and let's just call it f15 and we don't need to send a reply to all right i believe we need to remove this trailing comma and hit add call there you have it we've created our first api call and now we can look at how we trigger it in the ui all right here we have a very simple screen that i have built but we're still in the same project as you can see we have the send email api set up and this is just a page that i created from a template from one of the many templates stitch week that we have and as you can see it has a text field uh where the user is going to enter their email address there's the send me an email button and when they tap this you want to associate that with the api call and then after making that api call we can navigate to this page that just says email set so this is the expected flow now let's see how we trigger the api call so i'm going to first select the button to send me an email button and i'll go to actions this is the actions pane here on the property editor section so i'm going to add an action on top and action type for api calls is going to be under this category so we have a lot of different categories for the kinds of actions that are supported in flutter flow for api calls you want to do back-end call and select api call all right now we don't have a lot of options here there's only one api call we've set up we'll just select that and as you can see as soon as you select it this parameters section appears and these are the variables that we've defined and so if you try to add a parameter there's um only one option the destination email parameter now how what is that parameter going to be set to uh we need to set the value source so you can hard code something in here uh if you wanted so when you set variables you can hard code values explicitly here or you can use um from variable here as an option and select the source and there's different sources based off of what is on your on your available on your page so in this case uh any stateful widget like a checkbox or text field etc is going to be under this widget state there could also be an action output and other options here so we're going to select widget state available options phone number okay so here it says phone number because this field when i use the template actually this field is called a phone number and i'll select it for now as soon as i select it you can see it highlights that field and one thing you can do is you can just go in here and rename this set of phone number to be email field so if we call it email field now and i go here to this button as you can see the name will be updated to email field so this makes it a little bit cleaner and now actually what i'll do is i'll take a second to look at the code the generated code for this page okay um here is the generated code for this screen um one thing i'll note you can already see there's the email field controller that is going to be the controller for the text field and if we look at the button the send email call so when this button is pressed it actually has this send email call function and it uses the email controller's text and i can zoom into just the button the code for the button as you can see it's relatively clear and easy to read cool so this this is this should work now um one thing we want to do is navigate after sending this email uh let's add a navigation action so it goes to the page that says email test done all right so now that's it triggering api calls is super easy let's run it and see how it works okay the build just finished so now i can test to see whether the email api integration works i'm going to enter my email address here and hit send me an email cool all right i went to email sent and i'm going to bring up my email and see if it's there there we go uh i got the email it's from teammates4.io and it's mailed by sangrit.net and was just sent zero just now perfect uh one thing i should mention i had to go in and modify my url in the api because i had incorrectly left out this part slash mail send which is important okay so far we've seen how to configure an api call we looked at the post method we added a body we triggered it we verified that it works and for this last part of the tutorial i'm going to show you how to do calls that have responses how to make api calls that have responses and use those responses in the ui or possibly in follow-up actions and what we'll do is actually go back to the home page here and use flutterman because flutter met like i demoed earlier is an app that uses api requests that talks to the met museum data so let's do api demo flutter submit the project name i'm going to use the sample app which already comes configured with all the api definitions which is nice so i can just show you how it works before i go into the api call page here let me quickly bring up the math museum api so you can see how we [Music] put it together so we just looked up the met museum api here's the github page and it tells you there's end points there are four different endpoints and there's descriptions of each one so this object's endpoint lists all the valid objects it says um but for our opinion we want to be able to display the departments so we need this api it's a listing of all valid departments with their department id search unless you search given some search query great and then for a single object we can look it up by using this object endpoint okay let's look at this object endpoint i click that link it shows me the url is slash public slash collection etc and here's the object id now usually you're going to see this when you make api look at documentation this means this is the and the ending part after the domain name so if this google.com or in this case museum.org this is the part that follows and you pass in the object id and as you can see the request is only a url when the request is only a url you know it's a method get and not a post request so so to now that you've seen the object definition here let's go back to flutter flow and see how we've added it so get art piece is the name of the uh api if i dig in here you can see api call name is get art piece it's some method type get as we expect collection api dot met museum slash public slash collection and we in fact use the same kind of structure with the square brackets to identify the the parameter object id and we also define it down here query parameters object id and this has to match exactly as specified here for instance if i have a typo here object ids and try to save it it'll tell me this is misconfigured the missing parameter parameter object ids can't be found in the definitions here so we make sure that you've specified the any variable you're using in your urls or in your headers you can also do the same thing in a header um let me verify that it exists here okay so it's very simple let's look at the other ones let's look at get departments get departments is actually very easy there's no parameters or headers it's just the url i'm going to paste that in to my browser and you can see just gives me the result there's different departments the american decorative arts and so on so we'll see how to format this later and use it in the ui we have get departments you've already seen get art piece department highlights okay um the way the met museum api specifies how to search for all of the artwork in a specific department you have to specify department id and uh i believe you need this for the image and you have to specify queries star if you want to load all this data now this is in the tutorial on the met museum's api so we're not going to dive into why we're specifying these different parameters it's just in the documentation if we looked it up so we have a search that takes in a department id and these are our default values which means when you make the call you don't have to set them you can only set the department id and all of these other ones will be automatically set for you which can save you time as opposed to sending all these variables every time you make the call they're going to be the same the same value cool and finally you look at search art which is exactly the same as department highlights with just fewer query parameters still the search endpoint but it doesn't have the department id so it's giving you the results across their whole catalog cool now that we've seen the different apis we can kind of understand where the different api calls are going to be made as you can see here these are going to be the different museum departments that's what we want to display and so we need to make a query that gets us all of the departments and we we want to be able to display them nicely in this grid format how do we do that so what we do is we do a query on this grid view an api call so you go to this kind of back-end query tab for it after you select the grid view and you can do api call select get departments and that's it so once you've set this call what this means is this whole section is going to load once that api call returns a value and what we'll do is we'll actually end up using that same value on the same grid view because we want this grid view to populate its children based off of the results of git departments and if you um just so i can quickly show you what that looks like let's bring this up again we have the departments um so it's going this list there's this thing that says departments and there's like a list of all these different values so how do we use that in the in the ui um well if you want to be able to display elements in a list like this or a grid um there's this section that says generic generate dynamic children and that's what you use to generate children from a variable that has multiple values so we know there's going to be multiple departments so we're going to use this value generate right when you hit generate you can give it a variable name so each of these are going to be departments we're going to select a maximum of 30 and now we need to figure out the source so in fact if i remove this um i can show you how to build this query um there's this thing that's called json path let's actually take a step back and and and look at that so the way we get values out of a json response like this in flutter flow is by using this thing called json path now jsonpath is essentially a simple expression that lets you get specific parts out of a json object so for instance if you wanted to get the first display name of the first department in this field you would use jsonpath and there's an online evaluator we use specifically jsonpath.com and you can come in here paste in some value um and and test the different matches so here if i try dollar.departments and i recommend just quickly looking up jsonpath syntax if you look at this jsonpath github page you can kind of see there's different examples and the kind of stuff that you can do i'll add the dart that what we use the json path version that we use it's slightly limited it doesn't have all of the functionality that you you'll see on this github page in fact it's going to be the same as what you'll find for the json path library in the dart package so it's the same thing that's supported here and this is going to be linked in this youtube and the descriptions for the video cool so if we do departments i guess it gets us all of the departments as a list as you can see here so what we want to do is we want to now not have removed the generate children um so it's not actually showing me multiple children anymore it only has the outer card um i'll go back to grid view um i'll do generate children it's going to say departments up to 30 items the source is going to be the get department's response now this is the api call we made right here in this tab uh if i go to the widget builder we already know we have a query on here so we're going to use that the result of that query in here you're going to get departments you're going to get a json path dot departments what does that do you can see it in the evaluator it just gives us the list of all the different departments and there's an id the name id name that are for all the departments that are in here now if i hit save it will generate as children dynamically yes that's exactly what we want and that's why you see it repeating here now for each of these cards we can come in here and say i want the value of this text here to be set based off of the json path for that department item remember we had a list of different objects so what will happen is for each grid view element each one of these is going to be passed in so if you're here you're going to get the first one if you're going to get the second one etc and what you need to do is save this display name is coming from a jsonpath that is just displaying because the input at this point is not this whole thing at this point you're going to get a single one of these department id display name so it's basically one of those gridviews is going to get this this input because we've said because on this grid view we've said we want to generate children dynamically she's going to take each one of these elements and basically expand them so that all of each one of the cards gets that item um that's not the most efficient way of explaining it um but that's the best i can do so like if i paste it in here now if i want the display name it's just dollar sign display name and i can verify that that works it's giving me the value that i want so when we say display name set from variable we just put in jsonpath and we can set a default value if it doesn't exist n a or something like that and so for some reason if that display name did not exist if this was empty um it would it would end up saying n a uh if one of the departments didn't have a display name cool let us now look at the other pages let's look at department highlights page um now when this card is pressed we wanted to navigate to the department highlights page and we need to pass in not only the display name but also the department id so if we look at the action here oops if we look at the action for this card is going to be a navigate action which goes to the department highlights page and it's passing the department id which is jsonpath department id just like we got the display name we can use it to pass as a parameter to follow-up page and we also pass in the display name and this is pretty straightforward right do we have a parameter department id comes from a variable it's the department item for that specific item which could be different depending on where you are in this grid view and we just say department id because that that's what the field is called here so let's look at how that looks from the department highlights page here we have the different parameters the id and the name and this is just what this page defines and it doesn't necessarily need to come from that home page right it could be coming from anywhere but it uses a department id and a name to query a list of objects and if you remember for department highlights what we do is we hit the search api and give it a department id so you know we're going to call this api and if you look at the widget tree we make that query here on this list view we have an api call in this query tab api call uses department highlights and it passes in the parameter department id now there's also other parameters we could have said right we have the is highlight and the search term but we've already hard-coded this in the configuration so we don't need to pass those but we'll pass the department id based off of what was given to this page and um so that gives us a response uh from this call and that response we're going to use to populate this list again so this is going to look familiar it's the same thing as we had for the grid view um department highlights you know what one thing we should do is maybe make this search request giving it the department let's use department id one so i'm gonna say search um the different the parameters are department id um q is higher i'll just pass in department id and q is start believe that's necessary this is gonna id equals one um and probably wants q equals star yeah there we go so that's that's why we hard code this in it's just how this api is defined it always wants a query parameter and there's just a bunch of numbers and all of these are just different object ids um and so this view here is going to be populated all these different items are going to come from um single department id and let's actually look at um our flutterman run mode which is actually on our landing page here we have the different sample apps that you can quickly get right on and just test so we have a running version of this app that we can see inside of flutter flow if i click one of these it just load all of them so this is happening live as you scroll down it's loading all of this data and that there's there's nothing really fascinating it's really just as simple as doing this list view api call and generate the children dynamically and this using the object ids so if you look at the response we got from the met museum let's paste it in here and json about the evaluator i just pasted it in if they happen to be too long i'll just cut it off okay so it's a little too long for let me just take the first like six values i paste it in here i can close this how's that okay there we go so if i just do dollar we have this is what the object looks like there's going to be a lot more object that is in reality in fact there would be 11 000. but we only need to pass in these different object ids to this um to each of these list items so what we do is we say generate children jsonpath object ids easy okay so what that means is now all of these containers so each of this these containers are going to have access to a search results item field it's going to say search results item it will be this object id and what we do with one of those items is well we just have what is the item it's just an object id let me know what to do for object id we just use the get art piece call which takes in an object id so let's let me go back here um we have a query on this container that just looks up api call get our piece the object id is just the search result item and it's json is just a dollar sign the reason that's just the dollar sign is if we go in here and we query for dot object ids um you have a typo that's case sensitive it's just a list of different numbers right so each of these list items is going to get one of these items in this list so let's just take that one for example if i replace everything i have here with just that item you just get that value directly and if you just leave it at dollar sign which is what we have by default when you do json path just getting that item so the search result item is actually the object id and we make an api call to fetch that art piece um and let's actually fetch an item um and visualize it here in in the browser i'll get this url sorry i'm gonna go back to the get art piece url and copy that paste it in here and replace object id with this example one if i paste that in here it says object id not found that's let's try a different one um okay there we go so that object id maybe there was a typo earlier it didn't work but this one gives us data let's visualize it so it has the id there's some there's a primary image and if we open this in a url we're going to see what it looks like and there's the department the object name and there's more information and this is stuff we will be showing it on we do have a small preview in here you have the title the end date the artist display name classification so we get all this stuff based off of a query we do where we load each specific item um so if i go back to the widget tree and here for this card sorry i'm sorry for this container we do the get art piece and now each of these different values is a json path so for example dollar title on this jsonpath gives me george washington right from this object and then for the image as you can imagine you're going to get the image url probably for the smaller you're using like a thumbnail primary image small that makes sense as opposed to using the the larger image so there's primary image primary is small um i'm just using those um yeah i think that's i think you get the picture here you can go into the art piece detail page but this is already the same thing we've already queried the data and we're just we're just passing in the id here um yeah that's it so i've showed you how to do a get query um even if it was a post square you can get it you can get the response and manipulate the values using jsonpath you can visualize them here online and use it in your ui to build awesome apps cool thanks for watching

Channel: FlutterFlow

Views: 68,669

Keywords:

Id: Lbp1G6n4Kzs

Length: 35min 21sec (2121 seconds)

Published: Thu Sep 23 2021