Build Your Own BACKEND with UNLIMITED Custom APIs For FREE With This Tool

if you're building any kind of a serious uh chances are you will need to interact with third-party services whether it is getting the weather report or the price of Bitcoin or even processing a video file you simply will not be able to do it without taking advantage of third-party API and while there are services that provide this functionality they do come with their own disadvantages the first is the price if you're going to be using a service that provides some kind of a third-party functionality you will have to pay for it and depending on how many times you use it you will have to pay either a little or a lot but most importantly there are a ton of things these Services cannot do for you making your app design and development that much more complicated but in today's video I'm going to be showing you an amazing method where you can easily build your own backend that gives you online limited apis apis that can be used for absolutely anything simple or complex and the best part of it all is that it's absolutely free now before we get started as always all the resources that I mentioned today's video are going to be available to view and or cloned from my patreon page and you can learn more about our amazing patreon Community using the link in the description below the video and so here I am logged into flutter flow which is my no code builder of choice it's an amazing no code Builder very very powerful allowing you to build just about any kind of app that you want and so here I have a UI for a very very simple app and in this case a user is going to be uploading a video file and it's going to do something to that video file so maybe it's gonna you know give you back the duration of that video file maybe it's going to make it black and white or maybe it's gonna do some more calm complex custom processing to that video file and get you back the result a new video file with all the processing done already and so typically what you're going to be doing is you're going to have your upload here and then when the person clicks this button in this case get the duration you're gonna execute an API call you're going to execute an API call and typically you're gonna create this back-end API processing using a tool such as make.com or as it used to be known as integromat another really popular tool that I talked a lot about on this channel is called n8n it's also an amazing tool but let's say you're using make.com and you want to do some kind of video processing well you're gonna click here and you're gonna search through all of these modules to see if there is a module that allows you to do video processing so I'm going to type video and I have a lot of different modules so there's Vimeo that's for uploading you know the there's there's all kinds of different modules but let's say I want to do video processing okay I can't find anything I want to do maybe you know make it black and white um I can't really find anything and so I'm not really sure if there's you know the right module to do what I wanted to do there may be but chances are as you get more complex as you need to do more complex things you're not gonna find the right module and the same situation is with n8n so here I can click on ADD first step and I want to search for video and n8n has even less modules that make.com so if I type video I don't see anything if I type convert all I see is an email marketing app and I can't really find the right module to do my own video processing and so now I'm stuck let's say I want to build a tool that does video processing okay this tool is going to do some amazing things through videos you're gonna upload videos and maybe it's gonna chop it up maybe it's going to remove the bad takes maybe it's gonna you know change the resolution that's gonna make it black and white whatever whatever this tool is gonna do I can't figure out how to do it and so now I'm beginning to think can I really do it with flutter flow well the solution to this problem is you gotta create your own back end that's gonna expose apis allowing you to do exactly what you want to do and much more and so in today's video I'm going to be showing you how you can create your own back-end infrastructure and expose apis as many as you want unlimited apis if you want and they will be able to do exactly what you tell them to do anything from simple to very very complex and pretty much anything in between and most importantly you can build it for free and you can host it and use it for absolutely free now the first thing that you want to do is you want to go to railway.app you want to load up this web website and this is an amazing tool that will allow you to build your very own backend to do pretty much anything that you want now you can create an account for absolutely free and you can even use them they give you a generous free plan so chances are unless your app goes viral it becomes like a viral sensation and you make a ton of money chances are you're not going to pay anything for hosting and using your app so after you've created your free account your page is gonna look something like this now as you can see I've been using Railway for some time now as you can see I have several projects here and I'm adding more projects all the time testing various apps I really really love this tool now the next thing that you want to do is you want to click the link in the description and you want to use that custom template that I built for you guys that will allow you to build your very own custom backhand now as soon as you click the link to that template you're gonna be looking at a screen that looks something like this next thing you want to do is you want to click on deploy now now over here you need to specify the repository where your backend is going to be deployed to so if you're using Railway chances are you've probably logged in using your GitHub account if you do not have a GitHub account go over to github.com and create your free account GitHub is also free and we're going to be using GitHub as a place to store the code to our backend and so here I'm gonna specify backend over here and I'm going to click on deploy as soon as I do that it starts to deploy my custom backends you're gonna see a screen that looks something like this where it's going to show you what's happening right so right now it's building in our new custom backends you'll have to wait a few moments for this to finish and now as you can see the deployment has finished and we've been given a URL now you can customize this by clicking on settings scrolling down and you have this URL here and you can click here and you can actually edit it right so you can change this text to pretty much anything that you want provided that it's not taken by someone else another thing that you can do is you can use a custom domain so if you are looking to use this in production maybe you want to build a business around it something like a paas you know platform as a service uh you can go ahead by the main enter it here and you're gonna have a custom domain making your whole product your own backend look very very professional but I'm just gonna leave it at this default domain here now the next thing you want to do is you want to click on this URL and when you do that you are essentially sending the first request or your own custom backend and as you can see it says here home page and that is because when you go to the main page it simply returns home page now one other thing that you can do is you can append forward slash hello if you do that you should see Hello so right now your custom backend has two API endpoints one that says home page the other one that says hello of course this is not enough for us to build a serious app if you're building any kind of a series app it needs to have a usable API that does something valuable and so next I want to show you how to create a very very simple API that takes the URL of the video that we're gonna provide loads that video calculates the duration of that video and gives you back the length of the video in seconds for instance and so the question is how exactly are we gonna do it well we are gonna type it in plain English language and it's going to create this API endpoint for us automatically and we're going to be using it using GPT so here I am inside of my GPT account and I actually have a very long conversation that I've had where I was kind of tuning my prompts and trying to figure out the best way of doing it and as a result I have some very very good prompts that I'm going to be sharing with you but if you guys want my entire conversation just to see how I started how I was tuning the prompts and things like that I will share this entire conversation to my amazing patreon supporters and you'll be able to get to our amazing patreon Community using the link in the description below so if I enter this prompt here add a request Handler that will take a video file URL and return the length of the video if I click submit chat GTP is gonna generate our custom API endpoint that we can start using right away so here's our custom API endpoint that has been generated by chat GTP now the next thing we need to do is we need to click on copy code and we need to insert it into our app now remember when we were initially setting up our Railway template we specified a GitHub repository so you want to go back into your GitHub account you want to find your repository so here here my repositories here and here's the backend repository that I specified when I was deploying that initial template I'm going to click on this backend repository and I'm going to find a file called app.py I'm going to click on that file and I'm going to click on this edit this file okay now to make things simple what you want to do is you want gonna go all the way to the end of the file and you want to paste it there next you're going to click on Commit changes commit changes now there's one more thing that you want to do when share GTP generated the snippet it told us that it was using this Library so we're going to copy this word here we're gonna go back into our GitHub and this time we're going to click on this Docker file here we're gonna click edit and we are going to paste the name at the end of this run command so there's this run command here we're just going to paste this Library commit changes commit changes and as soon as you click that button that says commit changes your backend is going to be redeployed automatically with these changes and so if you go back into Railway and choose your project you're going to see that it's deploying automatically so anytime you make changes on GitHub by inserting new API endpoints it's going to deploy automatic automatically in this case it finished deploying and it gave us that URL again and so now we can click on this URL and you're going to be back on the home page now if you go back to chat GPT just above your API endpoint this code snippet it gave us back a URL now this is the actual API endpoint where you can send the URL of the video and you're gonna get back the video length Okay so in order to test it out in order to make sure that it works I'm gonna use an API tool that I use all the time called rapid API so I'm going to load this tool and what I'm going to do is I'm going to paste the entire URL of my endpoint along with the endpoint that I was provided right here it's always going to be in the same place next I'm going to formulate my simple request here so I have a very very simple Json request with just one element URL and here I have a very small movie file this is actually an mp4 file which is a movie format and this is just a random movie that I found on the internet so this is kind of what it looks like so if you load this movie this is kind of what it looks like it looks like it's a low resolution cartoon of some sort and as you can see it's 30 seconds okay we're gonna take this URL and so we're gonna format it so that you have URL colon and then the actual URL of the file and then we're gonna execute this and we're gonna wait for the result and we got back the result video length is 30.8 seconds so as you can see we've just created a custom API to do exactly what we want in this case we just told it create a custom API that gives us back the length of a video that we are sending in okay so now that we know this API works we can use it with our flutter Flow app so here I am back inside of flutter flow and what I have here in front of me is a very very simple flutter Flow app all we have here is we have a placeholder that when you click on it it uploads the file to Firebase and when it uploads it to Firebase with flutter flow you get back the URL you get back the link of the file and we have here a button that says get duration and when we click on this button we are going to be executing this API call now this API call accepts a body of the request that says URL and the URL here so we can come here we can actually test it inside of Florida flow and we get back video length 30.8 seconds now while you're testing it you want to go into recommend it and you want to capture this video length Json path so you're going to click on select it go back to selected and here you can just give it a name duration right and the reason we need to do that is that we get back a Json response and we need to capture it correctly we need to format it so in this case we'll give it back duration next you're going to go into call definition and you want to create a variable and the variable is going to be for the URL so we're going to call it URL we're going to say string is list is false we're going to click save next we're going to go into body here and instead of sending the same URL we want to make it a variable so that whatever the URL that the user uploads it whatever the URL we get back from Firebase storage is the URL that's going to be here so we're going to delete that drag and drop this URL placeholder here click save make sure everything is set up correctly and now if you go into response and test you can actually test it out with the URL as a variable so I'm going to paste the URL here click on test API and we get back video then 30.8 so now it is working with the argument that's Dynamics so meaning that it's going to be supplied by the user while the app is running so we're going to go back to the app click on this button open the action here click here on this backend API call and what we want to do is we want to set the variables we only have one variable called URL we're going to set it as the widget State uploaded file URL here so once the file is uploaded we get back the URL of its location in Firebase store so once we've uploaded the file we have the URL we're going to execute the request and we're gonna get the result and then once we get back the result from the API call the duration we are going to update this widget state with the duration so we're going to come click on duration and that way we are updating a state variable that will automatically show the answer here so let's go ahead and try this app real quick click on this app here create a test environment and see if it works alright so here's our app we have here the placeholder that you click on in order to upload a video so I'm going to click on this placeholder here I'm going to select this video file here and as you can see this has changed and that is because the file has uploaded I have some logic in the app that changes this widget based on whether the file has uploaded and we've received the back the URL in the Firebase storage okay and now all we need to do is click on duration we're going to execute that API call and we get back 30.8 seconds which is exactly the right length of the video now if you click again you will see that this is very very fast it's extremely fast and it's a lot faster than I've experienced compared to both make.com as well as n8n now before I show you a couple of more complex examples let me explain to you exactly what is happening here okay so here we have a diagram of what exactly is going on here so we have a user the user is interacting with our app right in this case this is a flutter Flow app and the flutter Flow app is executing API calls right so we have this apis here third party services and typically these apis are going to be done either you know using make.com or n8n or some of the other tools but in our case we are using custom apis that are hosted by us that are created by us and all of this is thanks to a very very powerful tool called Docker now you may have heard about Docker before if not essentially what a Docker container is it's like a mini computer it's like a little computer that you hold somewhere that's isolated from anything else and the beautiful thing about it is that it's very very powerful it's a lot more powerful than any of the apis that either make.com or n8n can't provide you because when you have your own container when you have your own mini computer you can do some very very powerful things as you're gonna see a little bit later in the video more specifically we can provide a video it's going to download the video It's Gonna process it it's gonna do something to it and we can specify exactly what we wanted to do with that video or an audio or pretty much anything else by creating our own backend in this Docker container we can create very very powerful apis that would be just a headache and I'll write almost impossible to do using any of these other tools okay so now that you kind of understand what's happening here let's go ahead and create a couple of more API endpoints that are going to be progressively more complex and more interesting now let's say I want to do some processing to a video let's say in this case I want to take a video and make it black and white and then give us back the URL of the newly created black and white video how would I do that well it's the exact same process as was the case in the first example where I asked it to create an API endpoint that gives us back the duration of the video and so all I need to do is formulate the right prompts so in this case add a request Handler that will take a video file URL and return the URL of the black and white version of the video and it's generating our new API endpoint that's gonna do just that so as you can see it called it black and white let's wait for this to finish okay so now it's finish we're going to click on copy code we're going to go back to GitHub click on this right here click on this edit go all the way down and paste it okay so now we see we have a new API endpoint called forward slash black underscore and underscore Y and we're going to be using this to send our request we're going to commit our changes commit changes and as soon as we do that it's going to start the redeploy process so we're going to go back to railway go to our dashboard here click here and as you can see it's building a brand new version with that new endpoint baked in so we're gonna wait for this to finish all right now it's deploying all right so it just finished deployment of our new version of our backend with that latest API endpoint so let's go ahead and test it out so this home page works so it's running we're gonna go back to our rapid API tool and in this case we're gonna use that new endpoint that it generated so this is what it's called right here we're gonna replace this here the request is still the same it's URL with that URL there we're going to execute this and see what happens all right so looks like it worked and it gave us back a Json response with a key here key value pair BW video URL so we're gonna copy this URL this is this newly edited video file that's supposed to be black and white let's go ahead and test it out I haven't seen it yet myself alright and there's the video and as you can see it's black and white full screen same exact video except it's black and white and so essentially we gave a URL of the video of the color video that we wanted to be converted into black and white it downloaded onto its own Docker container it processed it and it gave us back the URL of the newly processed and hosted video right here and as you can see it's exactly the same videos except it's just black and white this is the original video and this is the process video it's the exact same video except it's black and white and so now that we see that this API endpoint is working we can go back into flutter flow and we can integrate this newly implemented functionality with our app so here I am back inside of Florida flow and in this case what we want to do is we want to show this new black and white video instead of an answer here and so I'm going to click here I'm going to add a new video widget here called video player and this is going to be displaying that newly created black and white video next we want to go into our API calls and we want to change this API call to our new API call so I'm going to copy this right here the body remains the same response and test we're gonna specify the same URL here paste it test it out it's going to take a little bit longer now because it needs to actually download and process the video well it was very very fast here's the result BW video URL I want to go into recommended select it come back out here this is black black white save we can delete this old one because we're not using it now we want to configure the UI here get duration open it up over here it's no longer duration it's going to be black white we get the URL we set it to widget State and then this thing loads it from widget State we come in here we go into our page State and State answer substate answer is going to be a video URL now so we're gonna change our page State come back over here come by here we're gonna we're gonna say video this is going to be a video path confirm come back over here change whatever we need to do add a field video set value and we're gonna set it to action outputs this Json body Json path and we're going to save black and white confirm let's go ahead and reload our app all right so here is our app we have here the placeholder and then we have the placeholder for the resulting video that's going to be generated okay so let's go ahead and upload the initial video here this is the file okay so the video has been uploaded and we got the URL and now we're going to click on this button to execute our API in this case it's going to grab the video convert it into its black and white form and hopefully displayed here and as you can see we have the black and white video so you can play it and there's the video now in this next example we're going to be doing something a little bit more complicated so here you're looking at a clip from one of my videos and this clip is 20 seconds long and as you can see in the first half or so of this clip it's silent so I'm thinking about something maybe I forgot something I'm trying to look something up there's some silence and that happens until about you know the Eight Second Mark and after that you know I'm talking a little bit here and there and then there's another silence and so what I want to do is I want to trim this clip and remove the first eight seconds of uh the content here because I don't really need it and so what I'm gonna do is I'm gonna create an API endpoint that's going to remove X seconds from the front of this clip and then we can specify how many seconds we want to remove okay and so here's our prompt add a request Handler that will take a video file URL and return the URL of the original video with the first X seconds are removed and so let's see what kind of API endpoint it's gonna generate for us so let's go ahead and submit this and so it's generating an endpoint it's calling it trim underscore video and it's expecting two parameters the video URL and the trim second so the URL and the seconds okay so we're gonna wait for this to finish okay it is done we're gonna copy this code we're gonna go back to our repository okay we're gonna go to this file we're gonna edit it right here and then we're gonna paste it as the last API endpoint here okay we're gonna click on Commit changes and as soon as we do that just as the case before it's going to start re-deploying this back end of ours okay so it's building it first after it finishes building it it's gonna deploy it for us so we're gonna wait a few more moments here okay so it finished building it and finished deploying it as you can see here and we have this link again so what you want to do now is you want to click on this link and you should see this familiar home page and this tells you that our backend is functioning just fine okay so the next thing that we want to do is we want to test whether that new API endpoint is doing exactly what we wanted to do basically trim x number of seconds from the beginning of the video clip okay and so what I'm gonna do here right now is I'm going to export this 20 second clip and I'm going to upload it online so that it's available via a URL okay so here's our 20 second clip it's online now okay and as you can see there's there's like a silence for the first eight and a half seconds or so okay so we're gonna try to trim the first eight seconds here by specifying the URL of this video as well as the number eight which means the first eight seconds that we want to be trimmed out from the video okay so I'm gonna copy this link right here all right so now I'm gonna go to Rapid API and we're gonna construct our request so here's the URL of the video so the first thing we want to do is get this generated name of this API service here and we want to append it at the end the next thing we want to do is construct the request it's going to be the URL but there's also a seconds request okay so we're gonna come here put seconds and we're gonna put eight okay we're gonna click on Json to make sure it's all formatted properly and looks like it is and now we're gonna execute this request and hopefully it's gonna get back to us with the URL of a new video without those first eight seconds okay so we're gonna execute this request and we get a response it says here 200 okay so everything is fine line there are no errors nothing crashed and we get a trimmed video URL so we're gonna copy this URL here and hopefully it's without those first eight seconds so it should be around 12 seconds or so okay we're gonna view this video and as you can see this video is 12 seconds and as soon as you start playing it there's no silence like I'm talking right away and that is because the first eight seconds of the video were trimmed out so now we know that this API service works we can integrate it with our flutter flow no core app so here I am back inside of flutter flow and we are gonna try to integrate this new API service into this app so first we're gonna come here we're gonna remove this old request we're gonna copy this new request we're gonna add a new variable called seconds this is going to be an integer click save we're gonna go to body and we're gonna put seconds we're gonna drag and drop seconds here format it format this nicely double check okay it looks good we're gonna click save we're gonna test set our response and test paste this new video URL this is my video of 20 seconds with the first eight seconds of Silence we're gonna paste this here and we're gonna say eight seconds okay now we're gonna test our API call and as you can see it says here 200 success we get back a trim video URL let's go ahead and test it out see if it is correct and there's the video 12 seconds with no silences in the beginning so now that we know this API service works and flutter flow is interacting perfectly with it we can use it in our app and so you want to click on recommended click select here go back and you can delete this old one and then label this one I I'm just gonna say and answer click save and now we can go back to our app and we can make sure that it works properly right and here we can rename the button trim video click on the button you want to go to the action you want to reconfigure it right because it's no longer this it's going to be answer and we get back the URL and you also want to set up the input for the number of seconds okay so we're gonna go by here and here we have a row we're going to put an input text text field and here we can put number of seconds okay or just seconds something like this input seconds and now when we execute this call this API call we want to take into account not just the URL but also the seconds okay so we're gonna pick seconds we're gonna come here this is going to be widget State input seconds and now we have two arguments we have the URL and we have the seconds here as well and so when this executes it's going to get the result right here this answer and it's going to update the page State variable called video okay and this page State variable is defined here so let's go ahead and run our app all right so here's the app and let's go ahead and upload the video okay the video has been uploaded we're going to specify eight seconds to trim we're gonna say trim video and here's the video and as you can see it's 12 seconds and you can play it and it immediately starts with sound so as you can see the first eight seconds of this video was trimmed now obviously you can take this as far as you want but there's something important you guys need to understand here is that we are not simply executing some third-party apis we're actually creating a little app inside of a container that does some interesting things so while you you know you have some apis that you can get this data you can get that data we're actually creating a little app and based on that ad we're doing some kind of logic so in this case we are processing a video you know you can also do things like remove silences or you can do all kinds of interesting things it's really up to your imagination so with this method you're building a true back end first of all you have unlimited API apis that you can execute right there's absolutely no limit you want to have 10 API Services you can have 10 you want to have 20 you can have 20. you want to have 200 2 000. sky is the limit there's really no limit it depends on your application the second thing is that you can make them do some incredible things you can make them do complex things you can make them do simple things you can make them process video process audio process text you have a little container that can be used to pretty much do anything so it's very very powerful and last but not least you can have the this for absolutely free so you can get started with Railways generous free plan and unless your app becomes super super viral and in that case you're gonna be making a ton of money anyway your backend is going to cost you almost nothing that's the advantage of building your own backend and like I mentioned the beginning of the video all the resources that we talked about in today's video are going to be available to view and or clone on our amazing patreon community and you can learn more about our incredible patreon Community we really really have an amazing Community there's some great people on there using the link in the description below the video and if you're serious about your no code development you're serious about making money with no code you are serious about you know building apps or maybe it's just the hobby for you regardless you definitely should check out our amazing patreon community and consider becoming a member now if you enjoyed this video I have tons of other videos on very very similar topics that you should definitely watch and I'm gonna link one of them right there for you to watch next

Channel: James NoCode

Views: 11,782

Keywords: FlutterFlow NoCode, Docker API with FlutterFlow, NoCode API creation, FlutterFlow Docker integration, NoCode Docker Backend, FlutterFlow Custom API, Docker in NoCode, API Development FlutterFlow, NoCode with Docker, API with FlutterFlow and Docker, FlutterFlow API creation, Docker backend in FlutterFlow, NoCode API with Docker, FlutterFlow API Docker Integration, Docker for NoCode Projects.

Id: NOvbaMxI9xA

Length: 36min 19sec (2179 seconds)

Published: Fri Jun 23 2023