Add Realtime #Supabase Data Updates to your #FlutterFlow Project

so welcome to another video with inside the digital Pros no code academy and in this particular one we're going to make it super super simple to add real- time capabilities to your flut oflow application if you are using superbase this reusable technique you can apply straight away with inside your own project so without further Ado let's get into the video and let's get [Music] cracking okay so before we get into the main walkthrough part of this video showing you how to enable this inside your own projects let's have a look and see what we're trying to achieve in this particular video so we've got two very very similar applications here the one on the left is a traditional sort of flooder application that has a connection to superbase it's pulling some records from one database table the one on the right hand side again is super similar the only difference is that it has some real-time capabilities set up with inside the project itself now what I'm going to do is I'm going to go to the traditional application here and I'm going to hit the simulate new booking button and what you'll see on the right hand side you'll see that particular record get created but of course I'm going to have to for force a Refresh on this one here so I'm going to hit the simulate new booking button you'll see here that that new row has just instantly appeared and of course there's little time stamp here that's just also updated as well it's got two areas of this application that's monitoring for these real- time changes but of course on the old sort of fashioned way of doing things we then have to hit the refresh button to then see that record get created and of course this time stamp updated so of course you can do deletions you can do updates and you'll see all of those re realtime capabil ities play out with inside your flood flow application so let's now walk through let's take a bog standard kind of application here which is going to be very similar to something you've probably got in your own projects and I'll show you how to kind of make some small changes to enable these real-time capabilities let's get over and do that now okay so in this particular video then I'm going to make some assumptions that you've got your own superbase project set up in floff flow it's a pretty standard setup and this is kind of what I've got here it's really just kind of doing some regular kind of Qui queries you can see here I've got they got this container here that's making its own query and pulling out a single row and displaying the results of that with inside the container and then just down here I've also got kind of like a list view that again it's just got a kind of a backend query that's set up again nothing special here it's just pulling into a table called appointments and it's pulling out the database at records and it's passing the record itself into a particular component and that component is really just kind of linked to some kind of fields with inside our database so pretty well much it's very very standard okay so what do we need to do then to enable our application to work in real time well firstly we're going to have to create some custom actions now these custom actions are fully reusable so you can use these throughout your all application so if you want to kind of enable real time capabilities to kind of different tables with inside your application You' be able to use these custom actions to do that so let's now head over and start creating those now so we're going to need two custom actions move over to the custom code section here on the left hand side where it says custom actions this is where they're going to kind of be place a hit ad now the first custom action that we're going to create is one called subscribe so what this custom action will do is it will perform a subscription to a particular kind of table with inside your application and it will monitor for those real-time changes when those real-time changes occur then we're going to be creating a callback back to the main action flow editor with inside our application to then do something that we want it to do and we'll come back to that very shortly let's first create the subscription here so on the right hand side we're not going to return any particular value but we need to Define some arguments here so on the add arguments here just choose that and this one's going to be called table like that and it's just going to be a string we're going to pass in a string there just hit add arguments take the nullable off as well now this one's just going to call this one call back action like that now with the type we just need to move down here to action we'll take off the nullable option there and that is good so if I now move over up here to then this particular option the boiler plate clode I can now copy this to the editor now what I need you to do is if you check the link in the description you're going to gain access then to the code that we need to put actually into here so you be to copy and paste that directly in here so what I'm going to do is I'm going to take that code now and I'm just going to overwrite everything that I've got there because the kind of the the signature there of the function is exactly as we created so this is really what it's doing here we are going to basically pass in our table name and then we've got this callback action and then of course what we're doing here is we're going to use some libraries which are already uh sort of passed in and used with inside flood oflow itself to kind of create that subscription to the table that we're going to kind of pass in here by its name now what it's going to do is it's going to monitor for those particular changes and and at this particular Point here it's going to then kind of invoke the Callback this is kind of the Callback that we're we're going to pass in of course that's just going to be a series of actions that we can create with inside the action flow editor now incidentally of course there is some little enhancements you can make to this just to call that out here at the moment I'm looking for changes all events here so you can see here that I'm looking for inserts updates deletes Etc there of course if you would just like to monitor for uh anybody who's actually just inserting data sort of data then of course you can just change that then to inserts and it will only listen for those particular changes so once that is done we can just go up to the top here just hit the save action we just need to compile at it as well and of course that's going to take a few moments to compile just while it's doing that you just need to make sure that you also include this particular kind of import here that's quite important even though the flood oflow is giving me a little bit of a kind of a squiggly line there warning me but actually it is needed so you need to make sure you include that in there as well okay so the functions all compiled there I got the green tick let's now create the next one so let's just go up to the ad let's create our action and this time it's going to be called unsubscribe like that now of course we need to set some arguments up here the only one that we need to create here again is the table we're going need to pass in our table name we just want to take the little nullable off there move over to this particular boiler plate clo here copy that to the editor and of course again the link in in the description for this particular function I'm just going to kind of paste that over the top here if I just paste that in there and this is effectively all they're just doing is we're passing in the table name here and really all it's doing is it's unsubscribing from any particular updates that's being applied to that particular table and we're going to need to use this because we're going to want to make sure that um before we kind of set up any kind of subscription and listen for changes to the table and to make sure we unsubscribe them if they are already created there so we'll we'll invoke this custom function very very shortly once that's done hit the save function let's compile once more up here let's leave that to do its thing it always takes a kind of a minute or two to do the compilation and then we'll be right back okay so we're all done with our custom actions all compiled let's now move into the next bit where we're going to start setting up these custom actions to kind of then do that subscription to our database table let's go head over and do that now excuse the interruption in your learning but I just wanted to reach out to you to let you know about the digital Pros no code academy this particular private Community is fantastic it's got all of my training content there lots of ridden articles question and answers of code Library lots of topics around the no code space and a fantastic Community please do check the link in the description it'd be great to have you part of the community okay so here we are then back on the homepage of my application we now need to move into the very top Lev level here the homepage let's open up the action flow editor here just hit open I've got my single action that I've got in this particular project of course you might not have any actions in yours let's now start invoking these custom actions the first one I'm going to hit is the plus here I'm going to go to add action and I'm going to move down to custom actions on the right here and I'm firstly going to hit the unsubscribe so you're probably thinking to yourself hang on why do you need to unsubscribe before you subscribed well for quite simple reason is that we want to make sure that we don't have any subscriptions to any real time up dates to any of our database tables so by doing that we're kind of enforcing it right off the bat and we're clearing any subscriptions that we've currently got so the table that I've got with inside my super base database is called appointments so I'm just going to Simply type in appointments here and of course the custom action will pick that up so that's all in place we hit the little plus again hit add action this time we just want to kind of put a bit of a a weight here because what'll happen is it will take a moment to kind of perform the the kind of the unsubscription we just want to make sure that definitely happens so let's put a a weight in here I'm just going to put a th000 in here you can probably maybe just slightly reduce that but I'm just going to keep a th000 in here for safe measure and of course I'm going to hit the plus hit add action and this is where we're going to need to do the subscription so move down to custom actions here choose subscribe and of course we now need to fill these particular details in of course my table is called appointments like that and then here is the call bag this is what's going to kind of happen when we see those kind of real-time events uh kind of occur with inside our database hit the open and this is where we can now Define a number of series of actions when those callbacks occur now if you recall on my particular example here I've got a list View and I got a container they've both got database queries associated with them so of course what I'm going to need to do is I'm going to need to refresh them so choose add action just do a search here for refresh here I'm going to say refresh a database request I'm going to choose the widget so here is my realtime list view I'm just going to select that I'm not going to put anything more in here hit the plus hit add action let's just do another refresh here refresh database request select the uh the option there and choose the latest booking container which is what it's called in my particular project itself so that's all there so just hit the close and that is all that we need to do now in terms of getting the kind of the real time updates kind of happening so before we fire this up in test mode there's one final thing that we need to make sure that we do and that is enable real time on our database table that we are connecting to here so let's just head over to super base now you can see here this is the table that I've got in this particular example and all I've just made sure that I've done is I've clicked on the real time option up here and of course you can toggle this on or off so just make sure you do that with the table that you are using with inside your project now with that all set let's fire up in test mode and let's see if this all works okay so here we are then running in test mode let's hit the simulate new booking button which of course is just going to create that record in our database let's hit that and then magically there it is our real time update must have occurred because we've got no refresh action or anything like that under there and you're seeing everything play out just as you would expect so there you go that's pretty straightforward you should be able to implement that in your own projects without any trouble whatsoever and so hopefully you've enjoyed this particular video there is so much more on my channel when it comes to using flut oflow superbase and the L of build chip and of course there's so much more with inside the digital Pros no code academy as well so please do head over there if you're looking to build your knowledge with inside flood oflow and there a fantastic Community there as well so please do like the video please do subscribe to the channel if you're watching this on YouTube and until the next video I'll see you [Music] soon

Channel: The Digital Pro's NoCode Academy

Views: 4,861

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, supabase tutorial, supabase flutterflow, supabase, supabase functions, supabase realtime, flutterflow realtime

Id: HfA2f-8m2ms

Length: 11min 16sec (676 seconds)

Published: Thu Mar 28 2024