Flutter meets Supabase (Open-Source Firebase Alternative) - Realtime Todo App - Part 4

um so we could write just go ahead and copy this line here um we can call it updated to do and then i mean we could just replace the object here um but you know we can there's a couple different ways to do it so we'll just uh keep it simple here and we'll find the object in the list that that then matches this updated to do's id so we'll do make sure we compare ids here not the instance if the to-do is updated then we find it from our to-do's list and i guess we could check if it's no use equal to no then that means that for whatever reason it doesn't exist on our list so we can probably just go ahead and plop it in there so again you know we probably should reorder the list or do you know some logic to make sure that's ordered correctly but we'll just go ahead and do this um so otherwise if it does exist in our list it means we just want to update the values from it um so really the only value that could change is whether it's checked um we're not adding the ability to edit the task value like the string value here so um we can just go ahead and do to do that is complete is equal to updated to do that is complete okay and so i think we can go ahead and switch this to a check box okay so that'll update the value there um probably we want to actually change this to a function because we don't want to just update it in memory we want to call some function that um updates it in the database that way you can trigger for everybody else as well that's listening to those changes so we want to go ahead and create another function here they can probably not return anything and call it update to do and we can pass it in the to do id then whether it's complete or not um we could also just pass it in the hole to do if it's easier just so we're not going around with parameters to do we'll rename that to update it to you okay so that way we know this is the one that has changed and that's what we're trying to update in the database so again we'll call you can find i guess the updated area so you always do the from to the table that you're trying to update or insert or select or whatever and then we can do an update and we can do um basically the column name it looks like so it could be id now actually is complete is a column we're trying to update and it's going to be updated to do that is complete and then we want to do where it equals that id so id is equal to updated to do dot id and then maybe this needs to be a key in the stream for dart so that's why just a little bit of difference between the javascript syntax and the dart syntax and then we want to make this um async because we are going to want to await for this here um i don't know if we need to call some sort of uh execute method here yeah there we go okay and i believe that should be good you know yeah technically probably would be best for all these to do some sort of error handling error handling and all that but i think for now we should be okay um we can go ahead and go back to the database and kind of see if it updates as we change things um i believe this view here that that they have they give us here on the website is real time updated as well so if it's updated from another source i think they're using the same real-time client type uh logic here in their website that it listens for changes to update their own uh ui here i think um so we're going to find out here pretty soon so we didn't actually call that update method all right there we go much better so we probably want to make sure we did that and you know honestly best practice would probably be to wait until this is done executing to make sure that the database has um saved correctly before the um action you before you actually update it in the ui and we can go ahead and pass the actual checkbox widget value for his complete and we can use that as the new value and we can go ahead and try that again um hopefully that works so order food is down here let's check through here and check through here if we click it oh i hit the debugger but it looks like it's going to switch to false because it's coming in as false okay so it's false here but it's not false here um let's see if just refreshing the page nope it doesn't look like it's um like it got updated correctly so we have something going on oh yeah so wrong typo basically i'm i'm gonna confuse these a lot so that casing really throws me off remember the super bass uses or i guess the database and superbase uses this um snake ace syntax whereas dart typically prefers camel case syntax a lot of this could be probably resolved by using an actual map or library that'll auto create your models for you and all that and then we could probably just throw like like we just did for example um updated to do that to json will probably work i mean you're sending a lot more data through the network than necessary so you're not just updating what you need to update um but you know again it is what it is um so the the only thing is if you do this you're gonna have to make sure you update it in memory first and then if you wrap this in try cache and for example if it fails then you'd want to revert it to whatever it previously was and then show some error but for our little example here it really doesn't matter it's not a big deal we can go ahead and try to get this precinct again okay so they're both true [Music] and still something going on something not quite right let's see about do my laundry if we switch that to okay checked do my laundry is still false here but it's true here once we have a type over here it doesn't look like we do yeah that looks correct yeah i'm not sure maybe let's let's go ahead and undo that um and while we're at it let's just see if we'll refresh make sure we're completely synced up and annoying thing that you gotta resign in so order food it's true it's complete so let's uncheck it and there we go okay so maybe we just needed to restart the app or something and re-sync them together maybe the variables were flipped or something weird but it looks like we're good now so we toggle that toggle this one both true both false so let's go ahead and add another record let me copy that user id again call a cab and it looks like i did not copy that id quite correctly okay let's try that again there we go and it comes into the top as we expect because it's the newest one and i think everything is looking good we may just need to do the delete now hopefully that doesn't give us as much trouble as that darn update did so we'll do a trailing here and we'll probably just do an icon button okay and we're going to go ahead and pass that to do id that we want to delete um yeah so the delete doesn't take any parameters i'm just going to specify after the delete um what records you want to delete in our case since we're confirmed by ids we know for sure that it's only going to delete that single id um i'm guessing if i had for example this commented out it would either match every record or it would match no records so you you may need to watch out for that that if you mess up your query you may end up deleting a lot more than you want um again we do have the security rules in place at a row level so at worst case the user would delete everything that he owns and only that he would not be able to delete any other users tasks but if you didn't have that real low security in place you got to be careful with that because you you can delete a lot more than than uh you may want to on accident okay so i think after that now we just gotta implement our subscription over here so we'll do the on delete okay so we're just going to reassign it to the list where the i the to do in the list does not equal the one that got deleted so so that means that if they do equal then it's not going to get pulled back on this list we may have to add a new row here which is test nothing's coming in still that's interesting okay so yep all record does happen and just out of curiosity let's see what new record yep so near record is no an old record does have that id is 14. that that makes sense i mean you're deleting you would expect new record to be essentially non-existent and and it's cleared out so i think really the only issue there was just that i needed to restart to make sure that this subscription got re-initialized all right guys so i went ahead and implemented the ui for adding a new task updating and deleting it's all pretty much the same as the stuff i've been showing you guys so i just wanted to speed things along a bit because it's all pretty redundant at this point but i'll still go ahead and cover uh things at a high level so here in the ui we added a we or we mapped the to do's that we fetch up here in the init state we map them to a list of tiles with the check box and an icon button uh the only thing here is that we make sure that only the user that created the task can update it or delete it that is again due to that row level security that we added to our policies earlier when we were at super base uh if we can yep so see individuals can update and delete their own to do's um and then here we actually didn't rename the policy correctly but we actually did that uh roll check to be authenticated so that means anybody's authenticated can view every to do i did go ahead and change the subscription as well i made these i refactor these functions here so i created the handle delete handle update and handle insert just to clean things up a bit and then i call set state every time i change the state of the to do's and then lastly here i added this add task function and this function just takes the text from the controller that's coming in from this field over here and it gets the current user's id and it just defaults to complete being false because when we add a new task we kind of expect that it would not be completed and then the syntax is pretty similar as always we do a from to do so select that table and we insert the new to do and we call that to json method and then we call execute to insert that record now as soon as we do that the other clients should be able to see that new task as well and then we go ahead and clear the controller text here so that a new task can be added now i'm signed in as two separate users as you can as you guys can see i'm going to go ahead and create some tasks task as user one and there we go so we have a new task as user one here and now this other user can see the task but he can't check it or uncheck it and he cannot delete it now we're going to create another one task as user 2 and there we go both users could see them but now this user over here on the left cannot edit or delete that task but he can edit or delete his own and that's about it guys i think we've covered pretty much all the basics of the real-time client uh if i jumped a little bit too quick there uh please go ahead and check out the get repo it's down in the description below for the video and you guys are welcome to comment below as well and i'll make sure to reply to every comment i think for the next piece what we're going to do is refactor that the authentication piece a little bit we are going to add some persistency to it uh i might have mentioned it before but we are probably going to use the shared preferences library and just try to get the previous session so that way we can have easier flow into the flash page and then get that authentication token that we had from the previous sign in and they just automatically essentially sign back into the app to restore that session that we had previously and then that way we don't have to keep getting prompted every time we start the app and it'll make it a lot more reusable for you guys and i think i'll i don't know if i'll do it on the same video but i may break it up in two videos where i'll probably create those basic ui components that probably just take in the superbase client as a parameter and then that way you guys can just plug that into your project and you'll have sort of a readyly working login and signup components for you guys to use with all the logic there i'll post a link to that repo once i create it and then you guys are welcome to submit any pull requests to help out with making the ui prettier uh making the ui nice and clean it's not my strong suit so i'll definitely appreciate any help you guys want to contribute to to that repo that would be awesome all right guys well thanks for watching and i'll see you guys on the next one please make sure to subscribe and like this video if you guys like what i'm what i'm doing so far and as always post any suggestions down below

Channel: Alan Negrete

Views: 4,052

Keywords: flutter, supabase, firebase, open source, flutter meets supabase, flutter & supabase, flutter firebase, realtime db, realtime

Id: 46tlG9m8PMo

Length: 19min 11sec (1151 seconds)

Published: Tue Apr 13 2021