This AMAZING Tool Let’s Me Build COMPLEX Apps With Ease

remember the complex app that I built recently the one that you all Lov the one that creates custom gpts to do exactly what you want well I couldn't have done it without this tool I knew I needed to reach for the big guns so to speak why because from the moment that I realized I'm going to be building a custom app a complex app an app that's going to be doing a lot of things I knew that I needed extra help I knew that I couldn't have done it using an app builder alone now many people call such tools integration tools or custom backends or managed API tools but I simply call this tool my secret weapon and what is this amazing tool that we're talking about well this tool is called build chip and in today's video I want to show you the power of build chip and what makes this tool so special in my eyes now before we get started I'm going to be doing an extensive Deep dive on build chip I'm going to be showing you all my complex workflows I'm going to be sharing with you some extensive tips and tricks and that deep dive is going to be available exclusively for my patreon supporters and you can learn more about our amazing patreon Community using the link in the description below the video now Bill ship and the company behind it roy. are awesome sponsors on this channel which I appreciate very much but nevertheless this is my goto tool anytime I building a complex app and I need to create some very very complex but still very very easy to use workflows now the first thing that you want to do is you want to head over to build ship. app and you want to create your free account once you've created your free account you're going to be on a screen that looks something like this and in fact on my left hand side I have two workflows so if I click on this API workflow you will see that this is a rather complex workflow there's lots of things happening here and that really showcases the power and the flexibility of build chip but right now I want to show you some of the basics of build chip so that you can get started right away and start building amazing workflows so here I have created a brand new workflow I haven't even started to design it or build it I simply clicked on this and now I have an Untitled workflow now the next thing that I want to do is I want to click here and click on settings and I can rename it so let's say we want to name it workflow 2 because this is my second workflow click save and now this has been renamed now before we begin designing and building our workflows I want to first show you exactly what workflows are and why they're so important for your know app development so here's a quick build chip workflow architecture okay so we have the end user here and this is the user that's interacting with your app this is the user that you want to use your app right so when you're going to be marketing your app you want these people to come in and start to use your app and so they're interacting with this appui layer okay and this is exactly what I'm doing right now with build chip right I'm the end user I am interacting with this app and behind this appui layer we have something called a logic or a processing layer depends on who you ask and this layer is responsible for everything it's responsible for Mak your app well behave like an app okay because if we don't have this if we didn't have this then we would not have an app we would simply have a web page a web page with some static text but essentially a site that doesn't do anything interactive that doesn't do anything interesting and so this is where all the interesting things happen of course here we have our backend and this is where you are storing all your data for the apps if you need to store some data that you want to be available after the user exits the app after the user you know closes the app then this is typically where you're going to be storing but we're going to be focusing on this right here because this is where all the magic happens right like I said this is what makes your app an app now if you're using a tool such as flut oflow which is my favorite no code Builder you can definitely build your logic in there right you can create uh workflows you can create app actions you can create all of these things but for complex stuff you definitely want to be using another tool and you're going to see exactly why I feel that's the case you're going to see exactly why it makes it so much easier when you're using a specialized tool to do just that and so instead of having something like flut oflow handle your logic we are going to let build ship handle our logic by creating these workflows that are going to be doing something specific and so here here you have your build ship workflow that does something specific now in my opinion one of the ways that build ship truly shines is that when you are creating your workflows you're going to be doing something called a deploy and when you're deploying a workflow that you have created you're essentially going to be enabling that workflow to run in the cloud right so your workflow is not going to be running on buildship server it's going to be running on Google's Cloud architecture and as a result you get the scalability and the reliability of Google's manage platform when you're using a tool such as build ship now the last thing that's important to understand is that these workflows they don't run by themselves right they need a trigger to get started right and so this is this element here and a trigger could be anything right it can be an HTTP request it can be time or it can be manual or it could be a bunch of other things but we are mostly going to be focused on HTTP triggered workflows all right so now that you understand the general architecture of where exactly does a tool such as build ship come into play Let's go ahead and jump into build ship and start creating our workflows and while we're going to be doing that I'm going to be showing you some of the little things that make uh relatively complex process very very simple as well as intuitive okay so here I am back in build ship and we have a couple of workflows here and this is a new workflow that I've just created and as soon as you create a workflow you need to create a trigger okay let's go ahead click here and you can decide what kind of trigger that you want so we have basically five options here right we have a rest API call we have a rowy trigger we have a schedule we have stripe web Hooks and we have a telegram bot right so if you take a look at these triggers you can mentally start to get a picture of what kind of triggers each of these is right so this one right here is an API call this one right here is something else right this is another type of trigger this one right here is more of a Time based trigger right this is exactly what I was talking about here you have API HTTP time manual and then you have something like strip which is also an API HTTP based trigger and a teligram bot here which is ALS so kind of an HTTP API type trigger so for this specific workflow we're going to go with the simplest one right we're going to click on this rest API call and we're going to click and add trigger right here once we do that you can see that we have one Noe here and this node appears here and this is very useful because when you have a lot of nodes like if I have here I can easily browse them in this little viewer here as well as drag and drop them and rearrange them which is going to be very very use useful as you're building your app so with this one note here as part of our new workflow we almost have an app that we can deploy there's a couple of things that we still need to do we need to double check what's happening here now I can click here and I can change the path of how I want to access this specific workflow so what I'm going to do is I'm going to say workflow to and for the method we're going to leave it at get which is a simpler workflow and then a little bit later I want to show you another work workflow where we're going to be using this post method so that is all that you really need to do for a very very simple workflow and the next thing you want to do is you want to click on ship and that's going to deploy this workflow to the cloud and once it's deployed you're going to get back a URL with which you can access this newly created workflow so you need to wait a couple of moments okay so it has finished and now you have a message workflow successfully deployed now this note here is not enough because right now what's happening is this workflow allows us to receive requests but it's not doing anything right it's not responding with anything so the next thing that you want to do is you want to click here and you want to click on return right this is the simplest workflow and later on we're going to be creating uh more complex workflows right but just to get started just to get a feel for this tool you can click on return click add node and now you can Define what kind of value do you want to return with right so we're going to come here we're going to select okay and I'm going to say hello from build ship okay so now we have two nodes which is the bare minimum that you need in order to create a functioning workflow right which is your piece of logic so we have the input right this is where it's going to be you know waiting for your commands for your request and we have the output right this is enough to get started now the next thing you want to do is you want want to click on ship you want to wait a few moments for this workflow to be deployed and as you can see workflow successfully deployed and we can copy this endpoint URL and now your workflow is living on Google's managed infrastructure right so you're getting scalability you're getting reliability you're getting everything when you're using a tool such as build ship so we're going to say copy endpoint URL and then we're going to open a new tab and then we're going to paste this URL so when I do that it says here hello from build ship okay so now we've come full circle we've created an input right this is where we Define uh how one can access this workflow right because if you come back over here and you put workflow three you're going to get an error workflow not found right because it does not exist this you know workflow three does not exist and pretty much anything besides the workflows that you have defined here they do not exist workflow 2 exists as well as whatever I have defined for the other workflow exists but if you put anything else you're going to get an error as well as you have the output here so it says here okay hello from buildship so this is a very very simple workflow that we have created so right now let me show you a slightly more complex example and then we're going to jump into some of the truly amazing things that you can do with build chip such as interacting with apis and a lot of amazing things as well as connecting it to FL flow and so I'm going to come here and I'm going to change this to post so what is the difference between a workflow that has method get and a workflow that has method post well the difference here is that a workflow with method get is very very simple it's not doing anything it's not writing data it's not making any changes it's simply responding with something back to you so it's not making any changes on the back end with post on the other hand these kinds of workflows they can accept more data and typically they're going to be doing something behind the scenes maybe changing a document or maybe issuing another API call or something like that typically when you are you know interacting with other API systems they're going to have get they're going to have post they're going to have delete they're going to have uh put patch a bunch of other things and the way that you should think about this is that if you are accessing a method such as through G then you're not going to be modifying any data you're not going to be creating new accounts you're not going to be altering existing accounts You're simply going to be getting data right that's the whole purpose that's the convention that you should be thinking about whereas with post this is where you're creating new accounts you are doing something that's modifying data it's a little bit of a more complex flow put on the other hand is something kind of like post except you may be modifying you know one part of an account maybe you're modifying the name or the ID but you're not creating like new data alog together whereas delete is kind of self-explanatory workflows with a method delete are typically used for deleting various entities so if you have a users's entity right a get might be getting a specific user post might be creating a new user put might be altering an existing user and delete might be deleting a new user okay that is the convention that you want to be sticking to so we're going to change this to poll and now this workflow expects a body right so it's not just expecting a URL it expects a body so now if we click on ship and we deploy it it's going to change the way we interact with this workflow so check this out I'm going to copy this URL I'm going to go back to my um browser tab here and if I paste this URL it's a it's an existing URL we have this workflow but it's not going to work we're going to get an error check this out I'm going to say enter and it's still telling us workflow not found make sure you have it deployed with the trigger method set to get and path set to workflow too so why are we seeing this method well we have the path correctly right we have path as workflow to but it's not being set to get because when you send it from a browser you're automatically sending in a get request and remember we changed this workflow to post so it's not going to work it's not going to respond when you're sending your request from a browser so what do we need to do well we need to do something else we need to use a client that's going to send a post request and the client that I like to use is called rapid API and this is 100% free app for Macs so if you like this client and you're using a Mac you can go ahead and Google it and you can download it but if you're not using a Mac or you want to use another client there are tons and tons of clients available Postman is another one that's available on the web so you can just simply Google for one tons and tons of stuff available able and so with this client I can mimic a request that an application might be making so an application such as flut oflow right which is going to be connecting uh as you're going to see a little bit later in the video and so what I can do is I can uh click over here I can copy this endpoint and I can paste it in here and I can say post okay so when I select post I can send in a body okay if I do get it's not going to send this body so I can fill in this body but get request do not send the body okay get request just send whatever is in the URL okay whereas with post requests I can send extra stuff and this body could be fairly large okay so now we have a post request to here and this specific workflow is not expecting a body right it's not it doesn't need a body right all is all it's going to do is going to reply with hello from build ship okay so now we have post we have this workflow we can simply execute it and when we execute it what do we get back hello from build you see we couldn't have executed from a browser because a browser automatically sends a get request but by using a specialized tool such as rapid API we are able to change the type of request that we're sending so we've changed it to post and as a result uh we are able to successfully connect and uh you know get see this response right here we're not seeing an error another thing that we can do is we can respond with Json okay so remember if you're building your apps with flf flow and this is something that I talked in one of the previous videos uh you need to make sure that this thing here responds with Json if this responds with just text like what we have here your FL oflow app is not going to be able to parse this data it needs to see a Json response and so what we're going to do here is we're going to click here and we are going to convert it into a Json right and that's very simple you just put a curly braces put something like response hello from build chip Json okay so something like this and that's all you need to do right so now we have a Json uh response and you're going to see this response uh in Rapid API but you'll also be able to access this workflow from within flf flow as we're going to do a little bit later in the video so now I can click on ship that's going to compile my workflow convert it into code and upload it into Google so it has successfully deployed so now we can go back and as you can see now we have a Json response now this is great and all but unfortunately our workflow as this is not doing anything complex is not doing anything serious and so if you want to take this opon Notch you can introduce another node that will let you customize how this workflow behaves even more and so what we're going to do is we're going to delete this return right here we're going to click here and now if you search for empty node you're going to have this empty node right here and in fact if you delete that this empty node is part of these core nodes okay and these are going to be the nodes that you're typically going to be working with the most okay so I'm going to click on this empty node right here I'm going to say add node and when you initially look at it you may think to yourself this is a very very simple node it doesn't really do anything interesting well if you click this right here you will see that you can introduce something called node log and this is where you can write custom JavaScript code that can do pretty much anything that you want you have access to the entire workflow and you can take that data you can modify it you can change it around and you can return anything that you want as a result of some calculation you can think of this as a custom action or a custom function in flutter flow so if you click on inputs you can see that this workflow has a specific input okay and if you click on out puts it also has an output here right so you can work with all that data and you can kind of get it to do whatever you want and so as an example let's say that I want to set a name here and I want this workflow to reply to the user with whatever value is here so I'm going to put James here then I'm going to come back here and as you can see I have access to this name right here so what I can do is I can say hello and then I can put the name right I can just do something like this and now it's going to say hello name that is what it's going to respond with so we're going to say save and we're going to click here and we're going to have this uh return node cuz we always need the return node regardless of what you're doing you're going to be typically ending with this return node so we're going to say 200 okay and and now check this out I can go into value now of course I can type in the value I can say something like hey there or I can click here and I have access to all my nodes previously right so remember this node right here if you come in here you can see that the input is name and the output is output and what exactly is the output well the output happens in the node logic right this is the output hello name the input is name and the output is hello name so if we go back here I can click here and I can say well this is what I want to display this is what I want to respond in my workflow so I can just click here this is this empty node right here and I can just click shift wait for this to deploy okay copy this right here and now I can rerun my API call so let's go ahead and do that right now and now it's responding with hello James because it's taking into account the values in this workflow now of course this does not need to be James I can take something from a request right I have access to the previous node right here this request I can you know maybe a query a body um you request headers but right now there's nothing that really I need to access but if I want it to access it's there but the the beauty of this is that I can click here and I can modify it I can enter some code I can do whatever I want I can use chat GPT to generate this code which means that I can have code that does you know pretty much anything that I want another thing that I can do is I can click here and I can use this built-in AI uh node generation uh functionality to generate a node that pretty much does anything so this is what it starts with I need a node that does something right so let's say I need a note that returns with the current time in London okay and now let's go ahead and click generate let's go ahead and wait a couple of seconds and it's probably using chat GPT under the hood so you guys can do it uh using chat GPT if you want all right so it's all done so now if you click here you can see that it's the exact same node right it's that same empty node except it has gener erated a piece of code in this case it's just a function current time London that just you know it's a simple JavaScript function that Returns the time so now if you go into inputs we don't have any inputs right because this node does not need any inputs but if you go into outputs we have current sign which is a string and that means that we can potentially drag this node right here above this return and for this empty node we can click here variables and now we can just select this and that should hopefully display the current time in London right now right so let's go ahead and uh deploy this and let's see if it works okay so there it is let's go ahead and reissue that request okay and there's the time in London okay December 1st uh 2:56 p.m. in London and that's absolutely correct okay according to my humble calculations okay now I can also change a couple of things right I can in fact I can move this empty node here and I can say something like the time in UK is and then I can attach the result from that other uh node right so I can come back over here and I can insert a value right so I can do something like this the time in UK is whatever and now I don't need to do any calculation here I can just click here I can go into variables and I want this empty node now okay because that empty node has that whole string okay okay copy this you don't in fact I don't even need to copy it I already have my app testing right here set with the request so I'm going to send the request and there it is hello the time in UK is etc etc etc and so as you can see in a couple of minutes we were able to Cobble together a relatively interesting workflow that Returns the current time in London we generated that specific note using Ai and then we use this empty note to attach a a little bit of extra text so instead of you know returning the time we are you know prepending some text we're saying the time in UK Cas is etc etc now let me show you a couple of other slightly more advanced tips and tricks when you are working with these kinds of workflows and then we're going to jump into more interesting modules more interesting notes such as chat GPT and others now if you take a look at this workflow we are sending a post request but but we are not sending anything in the body right it's an empty request but with post requests typically you want to send stuff in the body that's kind of what they're for right with a get request you're not sending anything but with a post request you want to send some data that the system can use maybe to in order in order maybe to create a new account or change some data and that's called a side effect anytime the system changes the data either by creating new accounts deleting accounts updating accounts etc etc and so let's go ahead and put together a very very simple body that we're going to be sending in our request so I have your body selected I have your text selected and what I'm going to do is I'm going to say something very very simple so I'm going to say name James and I'm going to say hobby no code okay and maybe something like um okay so something like this next thing I like to do is I want to click on Json to make sure that it's able to parse it correctly right if your Json was not formatted correctly maybe you forgot a comma or a column somewhere uh you would have got an error message here okay but as you can see it was able to parse it everything is correct so now we have a very very simple Json request here and what's cool about build ship is that build ship makes it really really easy to work with Json request so if I head over to this rest API call and I click on this thing right here I click on edit I can specify some of the the fields in my body that I can access later right so what I can do is I can click on request and I can select body and I can add the fields that I'm working with so I can click on this plus button and if I know that I'm going to be sending name I'm going to be sending Hobby and Tool well then it makes sense to to kind of Define this data structure right I don't want to just have body because I have more information I know what I'm dealing with right so I'm going to give it a key and the key is going to be name Hobby in tool so I'm going to say name and the label is going to be name okay then I'm going to add another one here this is going to be Hobby and the last one is going to be tool and I actually use this extensively uh when I was building these complex workflows in one of my last videos this makes it super easy as you're going to see in a second so name Hobby and I'm going to say tool okay now it's important that the key matches exactly as this uh key in your Json whereas the label could be anything right but it needs to be you know self-explanatory all right so I'm going to click on Save and now let's say I go into here okay what I can do is I can click on request and I can click on this right arrow here and now I can click on the right arrow for the body and I can select the exact field the exact you know value that I'm dealing with right so if I just want to to deal with name I can select it here I don't need to parse the body I don't need to worry about you know the Json and all that I've defined my Json request for this API call by clicking an edit and clicking on request so now I can use it anywhere this is very very powerful and saves a lot of time and so now what I can do is I can say well uh Mis and then let's say my name so I can come back over here value I can click on request you don't want to click on request as is you want to click here you want to click on body and then you want to click on name and now it's going to say hello Mr James hopefully that's what's going to happen we're going to click on shift let's go ahead and deploy this all right it went ahead and deployed it and now when we have this request with this body here that we're going to be sending hopefully we're going to get something like hello Mr James let's go ahead and execute this right here and what do we see hello Mr James and you got to admit if you know your request then it makes a lot of sense to Define it here using these uh settings using these fields in the output that way it makes is super easy to access it down the road right or down the workflow so to speak now the last thing that I want to show you in this segment of the video is this test functionality that makes it super easy to test your workflow so if you click here you can mimic a request you can mimic the kind of requests you're getting so let's say we have we don't have anything in the query we just have the body and let's say I paste this body let's say hypothetically I am sending this body and this workflow received this body without me having sent it essentially I'm mimicking I can click on test workflow and it's going to build and execute it and there is the response okay very very simple very very easy and in fact this is what I recommend you guys to do I recommend that you guys test it first before deploying it because testing is almost instantaneous whereas deploying takes a little bit of time cuz you got to package all of this and upload it onto the Google's managed platform now it's important important to know the basics but you're definitely not going to be building any awardwinning apps with such simple workflows really the power of this tool lies in all the templates that you can use to gain powerful functionality very very quickly instead of building it all from scratch so as an example let's say I click here and I'm going to have this add node dialogue box and if I scroll down I have all of these Integrations and this is is why you know you should be using a tool such as this because it saves you a ton of time and you definitely do not want to be debugging your apis and trying to figure things out if you can avoid it okay so let's say I search for open Ai and I select open Ai and here I have a bunch of operations and essentially these are nodes that do a certain thing right they execute a certain API call so so for instance we have open AI chat we have you know text generation text to speech image multi-image gp4 Vision generate embeddings GPT 4 Vision I actually made a video about it just recently you can check it out right there but one thing that piqu my interest is this multi-image gp4 Vision because if you recall in my video I had to create this complex uh workflow this complex action flow in flut flow that had a loop and dealt with a lot of these images but if I knew about this specific um operation about this specific uh node here I could have just used it and would have saved me a ton of time so let's go ahead and try this out I'm going to click on edit and I'm going to delete a bunch of these other nodes that we have created they were just for illustration purposes okay so I'm going to delete them right here and I'm I'm just going to have this input node and I'm going to have this output node right so we have this post right here and this is where we're going to be posting the images and now we have this image urls here and so I can enter the images here statically or I can get them from a previous node it's really really up to you and so let's go ahead and try some of the static images first and then let's go ahead and try a full workflow where we're going to be passing the images uh via our workflow all right so I went ahead and prepared some images that we can use and you can take a look at this image these are kind of these abstract art images that I've been using in some of the other apps I actually had them generated using stability AI in one of the previous apps and this is kind of what the images look like and in fact GPT 4 Vision can successfully describe these images right so we have fashion we also have Fitness here and we also have Tech here as well so fairly abstract images and let's see if we can pass multiple of these images with one Noe to gp4 Vision so I'm going to go ahead and copy these URLs here one by one like this all right that looks good let's go ahead and exit out and now all I need is an API key and a question so the question could be something like describe the image and for the API key I can go ahead and get my API key I'm going to create a new key right here and this I'm going to call it for build ship so that I know where I'm using it okay I'm going to copy this key come back to build ship and paste it in here and now I want to make sure that my return node will successfully display the result but first we need to see what kind of d data that we're dealing with right it's very very important to understand the inputs and the outputs right so we're going to click here we have the node logic okay and as you can see it actually has a loop and this is a loop that I spent some time on when I was actually building this Loop in FL oflow so the functionality is very very similar except it packs a lot of punch it's going to save you a ton of time so if you click on inputs you can see these are the inputs and these are the inputs that are displayed here on this node so when you're configuring this node you need to um specify all of these values and if you click on output you will see that this is what we're getting back so we're getting back ad Json object that's going to be an open AI response over here so now we can click on Save and what we can do is we can go into value and we can delete this old value click on variables and now I'm just going to display this object right here and this is all that we're need to do we're going to be displaying this object because at right now we don't really know uh how to display the actual images once we see the object we will know how to display the actual images okay so I have this object right here I'm going to click on ship okay so now we can go back and send this so now when we send this we're not using the body so you can send whatever you want on the body you can skip the body doesn't really matter remember we're setting the images statically we're not getting them dynamically so I'm going to go ahead and execute this right here and I'm I probably need to wait a little bit right because we're going to be processing four images and it takes a little bit of time to process each of the images so let's go ahead and wait a few moments okay and there you have it the images you've provided are abstract and stylized digital artworks okay and there they are right so remember it took me some time to actually build out this exact functionality in flf flow right because you know flut oflow supports apis it does everything awesome it's an awesome tool but this is a more of a specialized tool right they give you code that you don't have to write yourself essentially right so there's the list of the images the first image features a dynamic composition etc etc so this looks sound right fitness equipment computer technology uh you know very vibrant shapes and colors this is you know this is not random text this is actually our images now the response that we're dealing with is just text this is not a Json response or anything at all this is simply text and so if you're sending this request from flutter flow you're going to have an issue right cuz flutter flow expects a Json response so what we need to do is we need to format this as a Json response which we can do right now so we can come back here click here and we can actually do it as a Json response so we can do something like this uh images here and here so something like this and hopefully that's going to work and now all of the text is going to be part of ajon response so we can come back here send that again wait a few moments and hopefully it's going to be formatted as a Json response all right and there you have it okay it says images and all of this text is part of a Json response okay so this is legit and it's responding with a application Json which means that you can come here click on Json you can see that this is all legit it's formatted properly this is valid Json now the next thing that I want to do is I want to pass these images from the request cuz if you recall we are actually setting these images on the workflow we're not passing them what I want to do is I want to set these images under request so that we can send them dynamically and last thing that I want to do is I want to connect this workflow to FL flow so that we can pass the images uh with FL flow flut flow is going to be passing the images and we're going to be getting tags back and displaying it in the app let's go ahead and do that right now so first let's go ahead and make sure that we are getting the images as part of this request and the first thing that I want to do is I want to come here here edit and I want to make sure that my request doesn't have name Hobby and Tool but instead it's going to have a list of images so I'm going to delete this here and I'm going to click on plus and I'm going to say images is the key and this is going to be images and now here I'm going to select array okay so now it expects an array and later on we can reference it in one of the other nodes I'm going to click on Save and for the image URLs what I'm going to do is I'm going to delete all this I'm going to go to variables request body and I'm going to select images all right so this is the array that we're going to be passing and now what I'm going to do is I'm going to come back here and I'm going to create my own Json request with those images so I have these images right here I'm going to copy them paste them here and now I'm going to create a Json request so images here there's my new request consisting of an array of images so we're passing in images and this is the array of images and if you click on Json you can see it has proper ly formatted them so we know that this is a correct Json request and now let's go ahead and deploy our new workflow here okay it has been deployed let's go ahead and send this request and let's see if it works okay it's processing all right and there you have it the images youve provided showcase a dynamic etc etc the final image so there's a list of images right there's one there's two there's three and there's four somewhere okay so it's the same list except this is now formatted as a j which means that we can connect it to our flut Flow app and now I'm going to jump into flutter flow and I want to show you how you can create a flutter Flow app that connects to this backend workflow that does all the heavy lifting for you all right so here I am inside of flutter flow I've just created a brand new app I haven't even done anything so let's go ahead and quickly build out this app that executes this API call with the images and shows the response so we're going to Define this API call right here API call I'm going to say GPT and remember we're going to be connecting to our build workflow we're not going to be connecting to open AI directly and this is our workflow endpoint workflow 2 you can click here copy this link and method is post so we're going to come back here post paste this here and now we need to send the body and the variables and everything and for the variables I'm going to say we need one variable called images and this is going to be a list of string just to keep things simple add call and now we're going to go into body I'm going to create a Json and I'm going to say images and I'm going to drag and drop this right here click on format you don't have any errors click on Save looks good and once we have defined our API we can build the UI that executes this API and displays the result so let's go ahead and back to our Pages here our screens and let's go ahead and Define an App State variable that's going to contain our images so I'm going to say images and I'm just going to say string is a list of strings and here we're going to pass in our images so I'm going to come back here so I'm going to come back here going to copy these images here each individual item here as part of this array Fitness okay there we have it so now we have an AB State variable which contains a list of images so now we can go back here and let's go ahead and create a button that's going to executor so we're trying to do something very very simple okay go ahead and create a button this button is going to be wrapped in a row so that we can Center it we're going to center it let's go ahead and give it a little bit of padding from the top and this button is going to say get descriptions okay and once it gets descriptions we're going to display them below and this text is going to be in a and I'm going to wrap this text in a container okay and I'm going to wrap this container in a column so so that we can scroll it scroll through it all right let's go ahead and make this column scrollable make this container a little bit bigger something like this so all of this is going to be filled by the result okay let's give it a little bit of padding from the top okay so this is going to be the response and we also need a page State variable to show the response let's go ahead and add a response is going to be text and this is going to be the response right here so we're going to set it to response I'm going to set it to loading okay so that at least it's going to show show something get descriptions and now we need to do the meat and bones of this app so we're going to open this up we're going to have the first action as an API our only API call pass in the variable the variable is going to be images we're going to get them from App State list of images here and now we're going to get back the result right and just going to get back this text so we're going to click here and now we want to set that text to that page State variable Okay add an action page State update page State we're going to set it to response set value and the value is going to be this action output and it's going to be just this Json body that's it and we need to make sure we are rebuilding the current page otherwise if we have an error we can just do something like this info animation dialogue box API error and then we're just going to display everything this is always a good idea and we're going to click here and robot text confirmed okay so very very simple and hopefully it's going to do the trick let's go ahead and run this app all right so here's the app let's go ahead and click this button so that it executes the API call and hopefully displays the results see if this works all right and there you have it there you have it these are the images here this is the first image the second the third etc etc now of course we are displaying the whole Json typically you only want to display this part right here and I'm just going to leave that as an exercise for the reader and of course if you are a member of our patreon community you'll be able to view and or clone the app and change it to whatever you want but most importantly remember guys I'm going to be doing a very very extensive comprehensive Deep dive on build chip I'm going to be covering some of the things that I did not cover in this video as well as showing you all my complex workflows and walking with you guys Noe by node step by step workflow by workflow so you can see all my workflows that I pain stly created when I was doing that video and Crea that app that allows you to create your custom gpts I know many of you have expressed interest and wanted to see how I did all that so I'm going to be doing a very very comprehensive master class over on patreon in just a couple of days if you're not a member definitely consider becoming a member consider joining so that you can get access to all this amazing content we're talking about all the apps we're talking about some amazing q&as behind the scenes some insight a lot of cool stuff but most importantly you're going to be supporting this Channel and supporting my work so if you like what I'm doing then I would highly appreciate that you guys join our amazing patreon community and engage with some of the other members we have an amazing community over there and so if you guys are interested in leveling up your no code knowledge leveling up your no code game then joining our amazing Community is the right thing to do do so if all of this sounds like it might interest you and provide you with some level of value then I definitely hope to see you guys inside of our amazing Community as well as for that upcoming build ship Deep dive that you guys definitely do not want to miss

Channel: James NoCode

Views: 17,049

Keywords: buildship, buildship tutorial, buildship flutterflow

Id: 9VJiJTfJSSg

Length: 44min 41sec (2681 seconds)

Published: Sat Dec 02 2023