FlutterFlow Cloud Functions: MUCH More Powerful Than You Think

flf flow recently released a very very popular feature called Cloud function and this is a feature that's a lot more powerful then people give it credit for and so in today's video we're going to have a complete overview and tutorial on flutter flows Cloud functions now before we get started as always all the apps and all the resources that I'm going to be building and demonstrating in today's video you will be able to view Andor clone from my patreon page and to learn more about our patreon community and its benefits check out the link in the description below so in today's video we're going to be talking about flut of flows Cloud functions which I call power simplified so we're going to be discussing what is a cloud function we're going to be talking about why they're powerful and what can they offer you we're also going to discuss the difference between Cloud functions and regular functions app flows we're going to talk about the three s of cloud functions creating and building Cloud functions and some final thoughts along with some tips and tricks so that you make the right decisions when it comes to building your own apps first of all let's talk about what a cloud function is and I find it very very helpful to use a visual diagram to explain this so here we have a user and this is a user that's going to be interacting with the app that you're building so let's say we have a flutter Flow app and it doesn't matter what kind of app that you're building because with flut flow you can build web desktop mobile you can build all kinds of apps and they all behave very very similarly so your app is going to have things like logic it's going to have you know functions inside of logic that calculate various things maybe you're building a currency converter app and it needs to get the currencies calculate the currencies regardless what kind of app You're Building you need to have some logic and also your app is going to have some kind of a database or back maybe this is going to be App State or page State maybe this is also going to be persistant App State or maybe you're going to be using some third-party database like superbase it doesn't really matter you need a database backend now in this situation here all the logic and all the function is being executed right inside the app so as the user is using the app the logic is happening right in the app so if this is a web app then the browser is executing the function if this is an app that's running on the user's mobile device like a tablet or a phone then those functions all that logic is being executed right on the device well there is another way of doing it and that is by leveraging Cloud infrastructure and so when you think about Google Cloud you think about AWS you think about Azure well what those companies provide is so-called Cloud infrastructure and this is essentially all the the same thing that you see here except it's being run on some computer somewhere out there all of these things are not being run right on the person's device they're not being run in the browser or right in the phone essentially you are leveraging somebody else's form of computers to do specific tasks so Cloud infrastructures are very very expensive and they can do a ton of things so they can do things like functions they also have their own databases an example would be like fir store but there are many many other databases that you can use out there in the cloud and they also have a ton of other services as well so there's many many things that you can do by leveraging a cloud infrastructure and in many situations that can be the right choice depending on the kind of app that you're building and so Cloud functions are essentially functions it's one piece of this puzzle that runs on a specific Cloud infrastructure whether it's from Google Microsoft or Amazon or somebody else but the cloud functions that we're talking about today run specifically on Google's infrastructure all right so now that you hopefully have a better understanding of what role Cloud functions play and how they fit in into your kind of app infrastructure let's roll up our sleeves and let's go into flutter flow and let me show you how you can create build and deploy these Cloud functions all right so here I am inside of flut oflow and I have created a sample app to demonstrate how these Cloud functions behave so I have a couple of pages here now you also need to make sure that you configure your flut oflow app to a specific Firebase project so you can simply click here click on Firebase enter your Firebase project add it and then you want to click on generate config files because after all Cloud functions are a feature of Google Cloud as you're going to see a little bit later in the video and that is why you need to connect it to your Firebase project which in turn connects it to Google Cloud if you come over here and you click on cloud functions right here you're going to be on a page that allows you to create these Cloud functions and essentially creating a cloud function is very very simple so you can simply click here you give function a name let's say I just call it function zero next you you click here view boilerplate code and this is going to generate the boiler plate for your Cloud function essentially this is the code that must always be there before you even start writing your customized Logic for this function so regardless of what kind of cloud function you're going to be deploying you need this boiler plate so next you want to click on copy to editor and now you have this boilerplate code in your editor right now and so the only thing that's left to do is to write your Cloud function logic between these two lines right here so I can simply come in and I can say something like return hello world and once I've defined the return condition the next thing I need to do is I need to specify right here that this function is going to be returning a value so I turn this on and because this function is returning a string and this function can potentially return just about anything I can specify a string right here okay and at this point my very very simple function is ready to be deployed so next thing you want to do is click save here and once you saved it you can now deploy it so all we need to do is Click deploy and you will deploy it right here now I actually created a similar function right here so here I have a very very similar function except it comes back with hello from function one and this function is actually called function one as you can see it says Function One function one and function one here and I have a bunch of functions that I Define that do all kinds of different things and so here I can click here deploy and I can click here and that's going to deploy this function on Google's infrastructure so I'm going to click on deploy and it's essentially taking all this code packaging it and deploying it onto the cloud so all the code that I've defined here in this browser in flutter flow will run exclusively on Google's high tech High availability high performance infrastructure and now as you can see this function has now been deployed and so what this means is that this function is now fully available to be executed on this Google's platform okay so now I can get out and I can build a UI that takes advantage of this function function and doing it is very very easy because flut oflow has been able to integrate this powerful functionality in a very very seamless way with everything else so it's very very easy to integrate so here I have a page called demo one and here you have a button that when you click it it's going to trigger that function on Google's infrastructure wait for that function to execute get back a response and display it right here so if we click here I can just click here I can open it and all we have here is two actions here right we have this action and we have these actions here right we have like two rows of actions so this thing here is a cloud function action and you can essentially come back over here and you can search for cloud and then you can access all these Cloud functions here and in this case I'm just accessing this function one that we've just defined and so here we can just check if it's uh succeeder or not and you do the exact same thing when you're working with API calls so if you if you've been doing any kind of development with flutter flow you've been designing and working with API calls then this call uh UI should be very very familiar to it's pretty much the exact same thing except we're no longer executing an API call inside the app we're executing a cloud function somewhere in the cloud now if the cloud function has succeeded then this thing is going to execute and in this case we're simply going to update the page state with the response okay so here what I'm doing is I have a page State called response and I'm taking the response that I'm getting from the cloud function and I'm setting it to this uh value here to this page State and once we have the page State set this thing is going to display the value okay so it's a very very simple pattern that is kind of what you always want to do if you want things to be dynamic and in this case you want things to be reactive because we do not know what the response is going to be or when the response is going to be uh in order for us to display it to display it here right we need to execute it wait for it get the response and then rebuild the page and that is exactly what happens here cuz when you come here we have this rebuild current page if you set it to no rebuild you won't be able to see the response reactively okay so make sure you have that set now if you go ahead and run our app you will see how this whole thing comes together all right so here's our app now when I click this button where we're going to execute the cloud function grab the result and display the result right here let's see if that works okay so now we are running it and there it is Hello from function one and if we go back here you will see that that is exactly what the response is Hello from function one and so that is an example of a very very simple Cloud function and how to make it work with the UI let me show you a more complex example so here I prepared another Cloud function function this is function 2 and in this case what this function is doing is it's fetching a particular URL and this URL gives us back some random user data so this is the kind of URL resource that you're going to be using if you need some fake user data so if I copy this URL right here and I open it here in my browser this is the response I'm getting so I'm essentially getting a Json object with a bunch of data ID uid password first name last name and username etc etc and if I reload this it's going to regenerate new values okay and so essentially what we're doing here is we are grabbing this URL here we are parsing it from Json and we are extracting just the first name and then we are returning this first name and if I go back to the UI here I have this demo 2 page and essentially it's this the exact same thing but in this case we are executing that second function right so here we are here we see the flow function two if it's succeeded we're updating page state with the value that we've gotten from that function and in this case is that first name that we are looking for and so I can go to the second page right here this is cloud function demo 2 I'm going to run this and now we are running the second Cloud function and in this case we got o this which is that randomly generated our first name if I run it again we're going to get another one if I run it again we're going to get another one so essentially we are executing this API call to this uh random user info service we're getting back everything and in this case I'm displaying first name now I can also come back here and let's say I want to display something else I can go back to my cloud function in this case I have first name and as you saw there's lots of other things that I can display so how about the username well I can just come back here and I can just do username I'm going to click deploy it's out of date because I modified it but I did not deploy it yet so there's a mismatch with the cloud function that I'm looking at right now on my laptop that flut oflow knows about and the function that has been deployed right they're not in sync so I'm going to click deploy it's going to package it up and it's going to literally upload it to Google services where it's going to be replicated among the many many servers that Google has and after that it will be ready to accept requests from its users all right and now as you can see that function has been deployed successfully and so what this means is that we can go back to our app here and let's go to the second page this is cloud function demo 2 and we don't need to reload this app okay because the only thing that has really changed is the cloud function okay so this app stays the same the cloud CL function is different so all we need to do is click on run Cloud function and we get back a username this time so I can run it again and we get back a username so as you can see we've successfully changed this Cloud function from displaying the first name field of that username user Json object to displaying the username field in this case so obviously you can keep changing it you can keep playing around with it you can do a lot of things with it very very flexible but what makes it even more powerful is that there are three types of cloud functions that you can Implement and this is simply the first type okay the second type of cloud function that you can Implement is an asynchronous Cloud function so this first example was a synchronous Cloud function because we are executing it we're letting it run and then we're getting back a response a result and then we're doing something with the result so in this case we're dis playing the result but you can also create and deploy an asynchronous Cloud function that can be triggered via an API URL then it can run some code and do something with the response that we get back from this Cloud function and in this case I want to show you a function that I created this is function three right here and what this function is doing is it's making available an API URL that you can make available to your users you can even create a custom API service that does pretty much anything that you want and this wasn't even possible before flut oflow created this functionality okay you couldn't have done it before in your flutter flow apps and so now you can and so this simple Cloud function essentially what it's doing is it's creating an API endpoint and it's making an API endpoint available and so if you send a hello to this API point and you provide a name as part of the query stream and I'm going to show you exactly what I mean this function is going to connect to my own Firebase fire store and it's going to modify a particular document that I have now after you deploy This Cloud function the next thing that you want to do is you want to head over to console. cloud.google.com this is going to be your dashboard your console for a specific product project and you want to select the project that you're using in your fir store okay so with fir store I'm using pj2 and here you want to make sure that you select the same project that you're using in your Firebase fire store that you initially connect it to your flutter Flow app and so if I come over here and I select this project this is the exact same project that I'm using in my Firebase fire store okay and this is the exact same project project that I have connected to my flutter Flow app in the beginning and so if you come over here and now that you have this project selected what you want to do is you want to search for cloud function you want to type that in and you're going to have this menu option here you want to click here and on this page you are going to see all the cloud functions that you have deployed so I have a bunch of cloud functions that I have deployed here you can ignore these two they were done for a different project long time ago but what you want to be paying attention to is to these five Cloud functions because these are the five Cloud functions that I created as part of this app demonstration and the cloud function that we're talking about right now is this function three right because if I go back here we have function three function three and we have function three here and so if you come back over here you can click on this function three right here and you're going to have access to a lot of interesting information there's a lot of things to look at but what you want to take a look at is this Tri Tri here if you click this trigger right here you're going to be presented with a trigger URL and this is a URL here that when you access this URL you're going to trigger your Cloud function that we have in flutter flow right now now if I click this URL that's not going to work it's going to say not not found and the reason it says not found is because we did not give this a hello okay so this is where why it says not found here and so what we want to do is we want to give it a hello and after that we want to give it a parameter so here I'm looking for a parameter called name and so what we want to do is we want to say name and then we want to enter a name so let's say name uh Michael and this name equals Michael is something that's called a query string and that's a way to pass different parameters to your url to your API and so inside of our Cloud function we are essentially parsing this name we're getting this Michael and then what I'm doing here is I'm also updating one document in my firestore collection so I'm going into the people collection I'm finding this one document and I'm updating the name field there okay I'm saying name is going to be the new value okay and if I go into my firestore DB I have this people collection and I have this document with this ID you see where it says fkf and it ends with ad3 and I go back to my cloud function you see it's fkf a D3 and right now it says name is m but if I run this Cloud function by accessing that URL with the proper query string you know name equals Michael it's going to update this value automatically so let me show you how that works so we have everything set up I'm going to run this and then I'm going to come back here and this should be updated to Michael okay so now as you can see it says Michael here and that was just updated and if you go back to the cloud function it says here document update successfully which is what we have here document updated successfully after we locate this document and updated with the corresponding name and the value that we sent via the query string there so this is a solid example of an asynchronous Cloud function because we are not running it from inside the app This Cloud function can essentially be run by just about anyone outside and we have no idea when that's going to happen and we really cannot build the logic inside of flutter flow to handle it it needs to be built here and fortunately it's very very simple and easy to build these kinds of custom Cloud functions with Chad GPT so as you can see I have here a conversation that I will make available to our patreon members that's going to show you exactly what you need to do to have these Cloud functions built with ch GPT and it's very very easy and it's very seamless it's essentially one prompt and generates the whole thing you can copy it and you can paste it in here but overall this is very very simple it's not very very complex and as a result you have your own API endpoint that you can essentially do anything that you want with you can pass it data you can do some logic with it you can do anything that you want that is the power of cloud function you can create synchronous or a synchronous this as well the next function that I want to show you is function 4 and this is the same idea we are also creating an asynchronous function but at this time we are passing a request which is essentially a question and then we are passing this question to chat GPT so I'm using the chat GPT API here and I am passing the question that we are getting from the URL from the query string and then we're sending back a response response via the browser and so once you've defined it here you can click on deploy as you can see I've already deployed it next you want to head to your Google Cloud console you want to type Cloud function find that function this case this is function 4 click on this you want to select trigger here and now you have a trigger right here now in this case what we are doing is we're passing a query right query is that question so we can ask chat GPT pretty much anything via the API and it's going to come back with a response so I'm going to copy this URL right here copy this link address paste it right here and I'm going to say query and I can say what is the capital of Mexico okay and I also want to make sure I format it correctly so there's no spaces and special characters and this is standard formatting and so now we have a full request we have function 4 we have a query and hopefully Chad GPT is going to come back with with a response we're going to execute this and this is the response that we are getting the capital of Mexico is Mexico City we can also ask it something else what is the capital of Argentina execute this and we are getting a response the capital of Argentina is Buenos Iris now in this case this custom function returns a response directly to the user so we're not updating a fir store document or adding a new field or anything like that we are sending a response directly to the user but you can do both if you want or you can do one or the other because if you go to this Cloud function here we have also code that allows you to find a particular document set a new field or create a new collection or whatever you want to do and really the choice is up to you I just decided to use this format because now you have a fully functioning API endpoint and that means you can create your own backend you can can create your own service you can build an app that you know does pretty much anything that you want maybe you know it takes the users's input does something with it sends it to chat GPT gets a response does something to it again and then gives it back to the user in this case this is the right approach because if you are creating an API backend you want the response to be direct you don't want to set anything in your fire story DB or anything like that you just want to respond with data that the user is looking for and so this is kind of the way to go now there's also a third type of cloud function that you can leverage and so if you head over to This Cloud function five and here I have a very very simple Cloud function that behaves completely differently compared to the previous examples that I demonstrated so in this case we are not creating a synchronous Cloud function we are not creating an asynchronous Cloud function we are creating a cloud function that's going to be triggered by an event in our fir store collection so remember how I mentioned that cloud functions are simply one Lego piece In This Cloud infrastructure okay we have a lot of other things in our Cloud infrastructure and if you head over to your Google console you have access to lots and lots of services right so if I type fir store here well guess what we have fir store we have data store we have you know you can type SQL and you have SQL SQL workspace SQL you know alloy DB you have so many services as part of your you know Google infrastructure that are essentially under this Google project umbrella that you've created in Firebase and linked to your uh flutter Flow app and essentially these functions here they can interact with any of the other services that are available as part of your overarch in Google project that you've set up and linked to flutter flow and so if you head back here what's happening here is that I'm creating a function called function five function five function five here and it's set to directly work with fir store and it's listening for a new document that's being created so as you can see it says here uncreate and then when a new document is created this whole thing is triggered so as was the case before this is also an asynchronous function because it does not know when it will be triggered it's waiting for you know for it to be triggered and just like in the previous example where you know a function was triggered via an API URL this function is triggered via an event in fir store okay so it's also an synchronous function and so once a new document is created in this collection it gets all the information and what it's doing is it's up updating that document and it's setting the city as New York and so as you can see I've already deployed this function this function is already deployed and so what this means is that we can head over to fir store and here we have a collection called people and so this function is listening for create events on this specific collection so it's not going to be triggered on any of the other collections that I have only on this people collection and so if we add a new document here and you can just add and let's say name is Rob and I click on Save as soon as I click save that function will be triggered that is why it asynchronous because it gets triggered as a response of some external event and after creating this document it's going to add a new field called City and it's going to set it to New York so let's go ahead and try this I've just created there's the new document and right now and there you have it City New York and that is because that function that we've deployed is active in it's always listening it's very very flexible so you can attach to any event in your fir store database that you want and you can do pretty much anything that you want so if I create a new document it can create another document somewhere or it can send an email or it can I don't know like call you right or if you update a document it can do all kinds of events it can execute an API you name it it's really a question of your specific use cases when you you're building your app so as you can see this Cloud functions functionality here is very very powerful because not only can you create these simple functions here and tie them to here with flutter flow and send data to it you know parse this data do something with this data you know execute an API call get this data back and then make it available throughout your app but you can also create asynchronous functions that give you an a API endpoint that you can pass around create your own backend if you want do anything that you want and you can also create an asynchronous function that will listen to various events that are going to be emitted by other things in your Google project so in this case this is fire store it could be just about anything and your Cloud function can respond to these events and do the appropriate thing and so definitely a very very powerful functionality and I think a lot of people underestimate just how powerful Cloud functions are when it comes to doing complex or even simple tasks that you need to be done inside of your app and so next time you're building an app and you're looking to do something a little bit more complex something that might take time something that you're not sure uh will be synchronous something that may be asynchronous or maybe you're building some kind of a backend service and you need to provide an API to maybe another app maybe another fluter Flow app or to your customers or to somebody else Cloud functions are the perfect way to solve this problem now if you guys are thinking to yourself these Cloud functions there are something else there's so many things that you can do with them and I honestly didn't even realize that you can do so many interesting things Plus combined with chat GPT that will now write you a complete Cloud function in just one prompt you got to realize that this is something special and indeed Cloud functions are very very special and can be very very powerful if done right and so if you're someone that's beginning to realize the potential of cloud functions and how it can help you build better faster and just overall more robust apps then you definitely need to join our amazing patreon Community because when you join our incredible and rapidly growing patreon Community you will get access to everything that I talked about in this video which means you're going to get access to this app this flutter Flow app which means that you can easily View and or clone and so you can take it apart you can put it back together you can take just the pieces that you're interested in and use them in one of the apps that you're building right now or maybe an app that you're going to be building in the future plus you also get access to my chat GPT conversation where I tell it exactly how to build these Cloud functions and I also make various Corrections if I decide that that code that was generated is not doing the exact thing that I want plus I'm also using Chad GPT to debug Cloud functions because when it comes to Cloud functions in flut flow it's a little tricky to debug them thankfully Chad GPT also saves the day when it comes to debugging as well and not just that you also get access to all the apps and all the resources having to do with pretty much every single video that I published on this channel they're all there they're all available for you to learn to get value from and just to become a much better no code developer they're all there on my patreon page waiting for you to leverage and that's not all when you join our amazing patreon Community you're also going to get access to some extra content such as q&as live streams behind the scenes content as well as my patreon supported masterclass Series where I'm going to be doing deep Dives on specific topics that the community votes on and the community has problems with and while all of that is incredible value beyond that when you join our amazing patreon Community you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated and so if any of that sounds like it might provide you with some value then I definitely urge you to check out our amazing patreon community and consider becoming a subscriber and you can do just that via the link in the description below the video

Channel: James NoCode

Views: 6,866

Keywords: flutterflow cloud functions, flutterflow tutorial

Id: G4MeS2jnixI

Length: 33min 10sec (1990 seconds)

Published: Sat Oct 21 2023