Master Flutterflow API Integration: Complete App Tutorial

[Music] Welcome Friends to this new flut flow tutorial on how to implement apis into your flut flow applications so what is an API or application programming interface exactly well imagine a restaurant a nice fancy Italian restaurant where the pasta is handmade you as a customer will want to order a meal maybe a nice mushroom Resort now you can just walk into the kitchen and start cooking the meal yourself instead you need to interact with the waiter or waitress who serves as a bridge between you and the kitchen an API is just like that waiter or waitress who communicates your order to the kitchen and then proceeds to serve you your meal so let's look at the four main parts of this analogy firstly we have you the customer you the customer represents a user or a system that wants to access the data or services secondly we have the waiter or waitress which is the API the waiter or waitress acts as the API and they take your order communicating it to the kitchen and then bringing you back the meal thirdly we have the kitchen which represents the server or database it holds all the ingredients and cooking equipment necessary to prepare your meal and lastly we have the meal or the Daya and service which is ultimately what you want whether it's a delicious plate of Passa or information from a database now let's break down the whole process of how API Works firstly comes the ordering process just like how you would provide your order to the waiter or waitress in the digital world you would simply make a request to the API with something called a c or which is very similar to an internet link secondly will come the communication process here the waiter or waitress communicates your order to the kitchen similarly the API communicates your request to the server or database lastly is the response the kitchen prepares your me and the waiter or waitress brings it back to you likewise the server processes your result and sends back the data or service through the API if the mule is prepared correctly you get a good successful response and it gets sent out and given back to you however if there's something wrong with the mule then you don't get your food and instead get an error message and you will be left hungry which is bad news for theel restaurant to sum up in essence an API acts as a bridge allowing different software systems or components to communicate and interact with each other much like how a waiter facilitates communication between customers and the kitchen in a restaurant all right so now that you understand what exactly is an API and how an API works now let's get into making our app so in this app we'll be using the Poetry DB API basically what this API does is that it allows us to search for poems based on certain input fields for example we can search for a poem with a specific author or we can search for a poem of a specific title or we can even search for if certain uh lines of a poem have a certain phrase in the poem itself we can even search for the number of lines in a poem now let's implement the Poetry API into our flut Flow app let's just get the UI out of the way first so I'll right click my column under this widget tree over here and I'll wrap my column in a container and for the container I'll scroll down on the right over here and for the width I'll just make it infinite so that the column is now in the middle of the page so let's just add some child widgets for the inside the column so I'll press ADD child to this widget and the first thing I want is a drop down and this drop down will allow the user to choose between what they want to search for whether they want to search for the poem with a specific author title lines or line count so this is the drop down which will allow the users to search for that next in our column will be a Tex field so this this text view will be the search term that the user is able to input to search for the API and finally in the column we want to add a list View and this list view will will contain all the data that returned to us from our API all right so now let's just make our app look prettier so we can go under column and and scroll down and under item spacing we can just give it 16 and we can give a start spacing of 24 to add some spacing from the top okay so it looks better now and now let's go into how this API works so basically you can see that there under the API reference over here they have given us a general format of the API so there's this input field which lets us search for based on the author title line line count or even po count but we'll just be using the these four for now so basically this input field will be our options for the drop down so our options for the drop down will be the auor title lines or line count and this search term is what we are searching for which is basically what the user will enter into our text field over here let's see this example in this example we can see that is searching under the author input field and it's searching for the author of oen and then it's also returning only the author so you can see that this is what what field we are searching for and this is the exact search term that we want to search for and lastly this is Will is what will be returned in our result over here so the format is basically our input field what we want to search for our search term what we want to search the input field for and lastly will be our return values what we want to be returned the data that we want to be returned so you can see another example is searching for the author of Ernest dson and it's returning the author the title as well as the line count which will is seen in the result over here yep so that's the basic format of the API now let's just go back to our app and then we can click on our drop down and add all the four input fields that we see over here the author title Lin and line count and now on the right hand side we want to scroll down and we want to add all the four options so now that we've added all the four options we can move on to the text View so for this text field we'll just change the label of the text field so we just change the label text to search a simple one and now we can move on to our list view so inside the list view we can add a [Music] container and inside this container we want to add a column so inside this column we want to add two rows of text so we just add two rows of text now so the first text will be let's just put as title first oops and then the second row of text will be the author and I guess we can also add one more row of t Tex and this will be the line count let's just add some spacing item spacing in the column to make it look nicer and let's also add some and let's also add some padding to the main column over here so let's just add padding of 16 on the left and right side all right cool looks better now and let's just change the color of this container so that it stands out more cool so now let's get into the juicy part which is the API so in this left hand side column over here we'll go to this menu which is the API call and we want to add an API call create an API call so let's just give a name to our API which could be search poems this is the important part the API URL which is basically what will dictate our request to the API let's just copy the first part of this API which is this first part and we'll paste it here and since we want to allow the user to change the input field of our API which is changeable from the drop down we want to add a variable which could be called input field it'll be of type string and we'll just leave it as that so in order to add variables into your API URL you have to use square brackets and then you type in the variable name now we also want to allow the user to add the search string or the search term so we can add another variable and we'll just call it search term it will also be of typ string and same as the input field we can just use square brackets and then you can type insert string and this will reference the variable over here oh the search tone sorry and then we can add a slash and then we want to get back the title as well as the author the lines of the poem as well as the line count so we want these four data to be returned based on what we are searching for so we can just press add call and let's just try testing out our API so for the input field let's just search for line count and let's say I want all poems with a line count of of let's say 42 so we can test our API call and you can see that we do indeed have a lot of poems with 42 lines so it's a really long poem and as you can see the line count is exactly 42 yeah you can see that line count oops and as you can see the line count is 42 so all all of these poems returned have a line count of 42 all right so now that we have established that our API does indeed work how are we going to retrieve this data and use it to reflect in our UI in the UI of our flf flow apps so you can see that there's this option to pass the data over here that we receive as a data type and that is exactly what we are doing so now we will be creating our own custom data type over in our flood Flow app so we can move to this left hand side and we can press on data type and we can create a new data type we can give the data type a name for example P data then we'll just click on Create and now we can also add some Fields so the fields will be exactly the same so it'll be author which is of data type string there's also title which also be of type string then there's also the lines of the poem and this is of type string as well but this is unique as it will be of a is it is a list of strings and the last one will be line count which is also of type string okay so now that we have created our data type we can go back to our API menu our response and text and then we can toggle this pass as data type as true and we can pass in the poem data for the data type and you want to check this is list to be true since we may be receiving multiple poems for example in this test response we have one poem over here then we have another poem over here and so on and so forth so there could be multiple poems and that's why we want to check this is list to be true all right so now we can come back to our flut home screen and now we can start implementing the API call we want the API call to be called whenever the user changes this text field and then enters the new value into the text field we can click on the text field and open the action flow editor and we can just leave it as on Summit so we can press add action and we can search for API we can click on API call we can just remove this for now since we don't want the conditional action we can choose the API call that we just made the search PRS API call and we'll pass in the variables so for the variable of input field this is from our drop down which we can go which we can access from the widget State and we can click on drop down and for the other variable search term this will be from the widget State and the text field itself so the value that the user enters into the text field so now we can just close this so whenever the user submits this text field the API will be called so now we will want to update this text over here inside our con in our list view go under the list View and then we will click on generate Dynamic children we can give it a variable name of for example poem results and then for the value we want to set it as the action output of our API result and as for the response option we want to pass it as a data type and we want no further changes so we can just click on confirm and then we can save it and we just click on okay I just want to give them some space so we just we can just go to the container and we can add some padding of 16 nice now they are nicely spaced out so to change the text we want to change this text over here and we just click on PM results item for the available options you want to select data structure field and you want to select the the field of title because that's what it is so we can just give it a default variable value of space now you can see that it is generating the data from our P results item so we can do that we can do the same thing for the author text as well as the line count so now let's just make the text over here look a bit more spaced out and a bit nicer so just go into the column and under the cross under the main AIS alignment let's just select the space around so now they're nicely spaced or maybe let's select the space evenly the last thing that we're missing is that we want whenever we click on each of the tile you want to open a new page where there will be the poem and the content of the poem inside so what we can do is we can create a new page so right click on the page folder and we can add a page and we can just create a blank page under the page name we can just name it as poem page and then we can create the page now what we must do is we must pass the data from this list tole that we click into this poem page to do that we want to create page parameters which is in the top right hand corner over here so under the page parameters we can click on the plus icon and and then we can add some parameters the first one will be the title which will be a string and the second one will be the content of the poem so it's a content and it will be a string and this one will be a list as well so we can just click on confirm and now in order to show the content of the poem you can just add a text and then we can set this text to be the content okay so because the content of the poem or the lines field is a list of string which represents the lines for example in this two line poem you can see that the first line is one item is one string in the array and the second line is the other string of the array so because lines fu is an array it's a list of strings we cannot just add a text widget and then assign the text to be our content over here because that is a list of string and it doesn't work out you can see that the current variable is not valid so instead of a text widget what we have to add inside the column is a list view so and inside our list View we want to add text over here so this will be just a line of text this will represent the line of text and under the list view we want to generate children from a variable and this variable we can name it as poem lines and for the variable we want to pass in our page parameter that we just created for the content and then we'll just click on confirm and then we can save so now we want to change the text in our list view so we just click on this and we'll just click piz item and then we'll just click on no further changes for available options can click on confirm and yep it should be done now so now in this list view it will just be each line of our poem that we return here and one more thing I forgot was to change the page title to our page parameter of title over here can just give it a default variable of a space as well so we can confirm and now this page should be done one more thing we can add is we can add a back button so under the column we can just add a simple back button icon so just click on icon we can move it to the top of the column and then we can change it to back arrow and then under the actions flow editor we just open it and then we can add an action to navigate to back to the homepage so we can close this and then it should be done now we can go back to the homepage and we can add the action of clicking onto the column in the list onto the container of the list View and going to our poem page so open the action flow editor again and then under on T we want to add an action and we want to navigate to our poem page and we have to pass the parameters over here we have to pass the title which will be our P results item and data structure field it will be the title over here and we also have to pass the content which is the same thing the value will be the poem results item and data structure field and Lin so you just click on confirm and then we can close it and yep with that our app should be done and we can try testing it out all right so the test mod has just loaded up and you can see that this there's a problem over here over here we can see that our list view actually gives us an error widget over here which says no no such method to list but let's just try testing it out anyways under the author let's just search for an author let's search for Shakespeare let's search for Williams Shakespeare let's see if it gives us any results it does give us some poems by William Shakespeare let's try this one wow this a long poem is probably one of his proses not not exactly a poem but never mind you see that there's also this bottom overlap and this just happens because we forgot to make it scrollable as well so let's just go back for now so as you can see there's still this no uh this error wiet over here and this only occurs when there is when our search is empty when our result is empty so this gives us an idea of why this error is occurring it only occurs whenever our results are empty for example I can try searching for a line count I I can just give it a super random number that will never be possible so you can see that whenever our result is empty there will be nothing over here there will be this error widget so let's just try to fix that right now so let's fix the scrollable column issue so let's wrap our list view in a column then under this column we'll just make it scrollable all right so that fixes that and for our poem page we'll do the same thing we'll wrap this list fuel in a column and then we'll make it scrollable so that now a prevents the overlay error and now we can uh scroll to see all the full content of the poem as well so now let's fix this Arrow widget over here whenever there is no result returned so let's just try going to our API again and let's see the response that it gives us if we give us if it doesn't let's see the response that it gives us when there is no match so you can see that this is the response that it gives us when there is uh when it doesn't find a match to a line count of this number over here so you can see that the only things the only data that gives us is status 404 and reason is not found and so the error occurs because whenever we get this not found uh result or a bad result we will we are trying to pass this exact result into our data type of poem data and clearly is unable to because the fields are different and therefore it gives us this result of No Such method error to list in order to solve this problem we want to click on raw body text this is the raw body string that is given when the API is unable to handle our request and is unable to find an exact poem with the match over here that we asked for we will copy this and use this later to prevent the error from occurring we go back to our main dashboard and under the text field we will and we will open the action for editor one more time we'll add a conditional action this time so we want a single condition and for the first value we want the action output so we want to check if the raw body text of the X API output is equal to can just click on code expression is equal to this raw body text that we copied from just now so make sure that this uh string this one is enclosed with only single open and close inverted commas because there is already double inverted Conners here so you can check this string this custom string and since there's no error we can click on confirm so if there's no match then this will occur this action on the left hand side will occur but if we have a match from our API if there is a successful result then whatever is here on the action chain will occur okay so now the last thing that we have to do is we have to create a page State variable and this page State variable will contain the poem data it'll be of data type of type data type it'll be a list and the type will be our po data so we can just click on confirm and now in our text view we open the action flow editor one more time so when there's no match found you want to add an action and you want to set our we want to update our page State we want to set the field of poem data and we want to reset the value to a now value so whenever there is no match found it'll just reset the value to now and then if there is a match for the poems that we search we want to update our page State once more oops and you want to set the field of poem data to whatever is in our action output from our API result and we want to set it as a data type and then we can just click on confirm and then in the list view instead of generating the children from our API results now we want to edit this and now we want to generate it from our page date instead so this poem data over here click on confirm and one last thing is that under the list view we just want to add an empty list widget which we have to create as well so you can just click on components oops so you can just create a new folder for components we can right click on the con on the components folder and we can add a component we can just search for an Mt list [Music] component template over here let's just use this one so just empty list yes so now we have this component we go back to our homepage we click on our list view select the list View and then under this empty list widget we will toggle this as true to show the empty list widget and the widget type will be of a type component and we just select our empty list component over here can see that how it looks like also all right so that should be all of our Arrow handling and we can reload our test mode once more and see if our app works this time all right so test mode has just loaded up and unfortunately there's still this error widget over here as well as the Overflow over here so the Overflow even though we added the scrollable column over here it is because under the column is still taking up as much space as the list view is taking up because of this expansion over here and so if we don't want it to take up as much space as the list view is taking up and overflow we have to click on this expanded widget so it'll only take the column will only take up as much space as it is able to without overflowing the screen so we do that we do the same thing to the column over here and we just add the expansion over here we go back to our test mode and let's just try reloading our test mode so now you can see that the bottom overflow is gone now however we still have this Arrow widget so let's just try searching a super large line count and unfortunately we still get this error so let's just try to check out what's going on here we're not supposed to get the error so let's just try to check out list view oh and as you can see I have forgot to I have forgotten to save this generating children from varable so got to remember to click on Save whenever there's a save button let's just try instant reloading one last time so silly mistakes like that just small simple mistakes could cost you minutes or even hours of trying to debug what's wrong so you got to keep uh out keep an eye out for that save button if it does show up yes so as you can see now that when we instant reload our app when there is nothing over here we can see that there's this empty list widget so let's just try searching for a title now let's search for maybe husband and yep it does return some poems with the it does return poems with the title and just return poems with husband in the title let's just try clicking on one can see that we have the whole poem over here we can scroll and see the poem as well you can go back and now there's still this empty list widget let's just search for a super bogus line count and as you can see there is no longer the error widget and all we see is this empt list widget let just search for an actual maybe a large p 100 line poem winter interesting we can click on that and we can see that the all the the whole poem can be seen in this page as well as the poem title as well so that marks the end of the API tutorial in FL flow I included all the errors in this video to hopefully help you see that no one is perfect and while developing mobile apps you are bound to run into to multiple multiple numerous errors however the most important thing is to not give up and to try to find the root of the problem try to figure out what exactly is causing the problem and hopefully you'll be able to find a solution by working from there all right that's all for this video thank you for watching and I hope to see you in the next video [Music] ah

Channel: just xolotl

Views: 485

Keywords: flutterflow app builder, flutterflow, flutterflow tutorial, no code app, no code, flutterflow tutorial for beginners, app development, nocode tutorial for beginners, just_xolotl, Master Flutterflow API Integration: Complete App Tutorial, flutterflow api, flutterflow api call, flutterflow api get, flutterflow api integration, flutterflow api crud, flutterflow api json, api tutorial, what is an api, api, no code app builder, no code tools

Id: aruB1K92fB0

Length: 34min 8sec (2048 seconds)

Published: Mon Mar 18 2024