Flutter Firebase & DDD Course [20] - Placeholder Note Cards

how about displaying some notes let's create notecards and as usual we are now going to forget about appropriately displaying errors hello welcome to resew code where we are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you build so subscribe and hit the bell to join us in our quest for becoming in demand flutter developers so in this part we are going to build a totally blank screen when for example there are insufficient permissions then we are now going to show even a single card but the whole screen will be saying something to the user regarding the error which occurred which prevented us from getting any kind of a note from firestore so let's get right to it I have already launched the app which we are currently building here and this is what happens we get an error saying that fire store or no type fire store is registered inside get it and this is quite weird to be honest I don't know why this happened because if you remember just in the previous part we were building this UI I didn't do anything additional I left off where I stopped the recording and in the previous part we didn't get any such errors displayed to us but now today apparently farah decided to to protest and indeed which is even more weird when we go to infrastructure core and firebase injectable module which we have which we have not touched in quite a while we can see that we surely do not reduce the fire storage as yet although I am pretty sure that we did register it so I don't know what's going on with source control it probably just messed up I'm not sure or maybe we didn't register it at all at any point of time but then we should have gotten this kind of an error even in the previous part right but anyway regardless of what the truth is we just know that we need to register cloud firestore with injectable and therefore we'd get it as well and we also need to swap the deprecated annotation registry module for just module which is the new annotation doing the same thing and now of course it's working immediately that's very interesting now it's not working so of course we need to we need to run for a pub run we'll run watch delete conflicting outputs as usual our favorite command and now after heart restarting the app it should in fact work finally so let me just hit hard restart key combination and indeed we can see that everything works as it should nice so now we can move on to the important stuff which we want to tackle in this part so currently we have the node overview page over here in the previous part we have made sure to provide a note watcher block note actor block we are listening to the blocks possible is playing displaying flash bars so snag bars when something goes wrong and we are also navigating whenever a user presses this logout button we navigate to the sign-in page but what we are currently not doing is displaying the body of the scaffold we only have an air bar and a floating action button and it's going to be precisely inside the body of the scaffold where the nodes are going to be shown but we are not just going to blindly populate body with widgets directly inside of this nodes overview page file instead we are going to create a separate file which is going to be called notes overview body widget doubt Dart so that we do not just clutter up this single file with too much widget code so let's do just that we're going to open up the sidebar and inside notes overview we are actually going to create a subfolder widgets and inside of there let's first create the notes overview body widget that dart and in there let's just create the widget right so it's going to be a state less widget notes overview body let's import material dot dart and yeah so let's get right to it we are going to put this widget to be the body of the whole page so let's go to the page and say notes overview body just like that and by the way as always you can get the code from the link in the video description to go over it at your own pace and let's build the UI for the body right what's important here is that we need to build the body UI according to the data coming out of the node watcher block because node watcher block is responsible for providing us either all of the notes or only the uncompleted notes so instead of returning a container we are going to return a block builder and this block builder will hold types note what your block is the block type and state is of type node watcher state and now we need to provide the Builder parameter which is the function passing as a context and a state and from here we want to map the state to a certain widget and because we are using freest unions mapping the state is absolutely simple we can just say state map and we are going to be granted with all of the possible states which can occur and which can arrive into our UI from the node watcher block and let's just hit control D or command D to select all of the nulls and we are going to change them to be anonymous function invocations like that right and yeah after the last one we are also going to include a comma now it's not going to compile because this is invalid syntax we need to provide what is actually returned from these anonymous functions but at least we have the the commas or actually the parentheses and the arrows in place so from the first one we want to return just a container if the state is initial we are not going to display anything so just a container then if load is in progress of course we want to display a circular progress indicator but in addition to that we also want to wrap it inside a center widget and make the center widget constant of course like that so yeah this is how we roll then let's focus on load success and then we are going to focus on load failure so load success is what is actually going to display the actual data that is the note cards so this is where we actually do want to access the state because the state which arrives in siloed success holds the notes which we want to display so whereas the initial state and the load in progress states we did not care about the parameter of the function which arrives in there so we left it as an underscore we are going to access the state of load success therefore we call it state so that it's something meaningful which we can access from the function body also this is going to not be an expression valid method instead it's going to be method with parentheses which can have multiple expressions just so that it's more more clear what we are doing in there and since we want to display a list of note cards which are going to hold the note content we're going to return a list view and we're going to use the Builder constructor and we need to provide the item builder which will build individual items now we want to build items for notes because if we take a look at the state state contains notes which is the k-t list of note entities right so for each and every entity inside this note list we want to build an appropriate card in the UI which will display the content of the notes to the user so we first need to grab the note for the appropriate index which the ListView builder is currently trying to build a UI for so we are going to grab note final notes and it's gonna be equal to state notes at index okay now we need to make sure that we differentiate between successful note data and erroneous note data that's because if you remember every single note if we take a look at it it can either be valid or invalid so let's go to the domain layer if I could find it I'm gonna collapse it okay so notes note over here we have the concept of a failure option so if any single one of the value objects which are held inside a note is invalid the whole note will be invalid in that case we want to display an error card in the UI which will signify to the user what went wrong and maybe a possible way to fix the issue or maybe contact support and so on so over here in the UI we want to have a check that if notes that failure option is some and if there is some failure that means that the note is in fact invalid then we want to return an error card which will signify an error to the user for that particular note currently of course we do not have any kind of an error card so we're just going to display a container let's just say container color colors red and width will be just a 100 by 100 it doesn't matter which is gonna have something in here and of course we're going to change that later on in this tutorial in this part and if the data is successful we're going to return a different kind of container for now but later on it's going to be the actual note card which will hold the correct data and display it to the user all right now we have handled the initial state which doesn't display anything loading progress load success but we still have one more state to go and that is load of failure so when can load failure occur from our node watcher block well note failure signifies a failure in getting all of the notes it doesn't signify failure in just one of the nodes but all of the nodes all of the list of nodes could not be gotten this happens for example when there are insufficient permissions for example by some magical occurrence the user tries to access another users notes of course this is going to be prevented by the security rules in fire store and therefore an exception will occur in the client file store library saying that the current user does not have sufficient permissions to access the requested documents of the other user right so in that case we want to display a critical failure display that's how we're going to call it we're going to build it later on for now where it is going to again return a container from here this one will be larger 200 by 200 let's just say and it will be purple or maybe I know let's just say yellow right okay and now the UI has the UI code has finally been formatted because there are no longer any errors and that's nice but we have index out of bounds exception there is that list doesn't contain element at index 0 interesting I mean of course this kind of makes sense because we have just provided the item builder but nowhere are we saying many items there are for the list to build so we also need to provide the item counts variable and we're going to set it to state that notes size now we're talking because we don't have any notes yet inside our store this is going to result in no containers being displayed in the UI and we are not going to build the note form in this part neither in the next part so in order to have some sort of notes to work with so that we can see something in the UI we are going to populate the firestore database manually so let's jump into the firestore console like that and we are going to populate it so I have already opened the prepared app which I have built all the way back in a few months back right before I started recording this tutorial series and we are going to basically simulate the data which is present in this overly finished app so for example this thing we want to have a collection inside the root of the database called users then user ID then another collection notes and then a note ok so how can we do that well we are going to go to the firebase Council for the app we are currently building go to the database tab and say that we do want to create cloud firestore database so let's hit create database we're going to start in test mode we are going to populate the security rules later on let's select the default location inside United States and after a while the database will be created and we are going to populate it manually now as you can see in the already finished app or the database for the app we need to get hot of the user ID because user IDs are unique per user of course so how can we do that how can we create a collection or a document inside the user collection which will have the ID of a particular user well we are already signed into the app if you can remember right we have signed in with Google with my Google account so we already have a user inside the app and so we can go to the authentication tab we have users in here and I should be in there somewhere I'm actually the single user of the app and here is the user ID and we can copy the user ID but for pressing this button and now we can come over to the database and build out the database structure I we're going to start a collection users next we're going to create a single document inside of there we're going to paste there the user ID which we have just copied from the authentication tab and this is now going to hold any fields by itself this user document will only be there to hold a sub collection so we're going to start a collection notes and now this is going to be a note let's just say it's going to have an automatically generated I D of course once we build out notes from within our apps UI the IDS are going to be generated locally inside the app with the UUID package but for now we're going to generate them over on the firestore side and now comes the time to populate the note with fields so let's take a look which fields should be in there well there should be a body color and all that so let me just copy all of it from the note which we are copying so we want to have a body it's going to be of type string and you can provide any value you want I'm just going to paste here become an in-demand fodder developer right then another field which is going to be the color I'm just going to copy the color number so it's going to be number paste it in there color you can provide any number you want it should be some kind of a color in the end then we have server timestamp so let's add the head hopefully we can provide a timestamp in here surely we can right yeah so which is going to say today and let's say 12 p.m. or 12 a.m. I don't even know how to signify that hopefully it's 12 although this is probably going by the 24 hour format right I'm not sure anyway it's not the point of this video after all so we have server timestamp now we want to have to do switch is the last fee but this is actually an array so array to duce and to duce themselves have some field so that is done it's gonna be a boolean wait yeah so the name is done um okay oh yeah actually you know this should be a map sorry about that so a map with the name of Donna is the field boolean true then we're going to say ID ID will be of type string Ryan let's just provide any kind of an ID here it doesn't really matter and lastly the next field is named learn or widgets cool and just like that after a while we have created our first note manually it has body color server timestamp and reduce and the to do has done ID and Name fields okay so we're going to say that and we have created our first note and since we are observing the changes inside the app now we should just be able to open up the app and surely we can see that we have this green thing displayed at the top this signifies successful data which is nice to know right so we have successfully gotten the note and if we have appropriate UI in place already we would be able to see the contents of the note for now we just see the green container which is actually stretched to the sides it doesn't respect the width which I have provided but that's cool so now we probably cannot just copy a document I'm not sure or can we no we cannot copy document in any way but what we can do is make the documents invalid so instead of learn all the widgets we are going to say nothing we're going to provide an empty string so update that this is invalid as you know to do names cannot be empty so what should now happen is that we are going to see a red container and that's precisely what we see so our failure and failure option is working correctly inside the node entity right so let's just revert back to successful data learn all the widgets and now again we're going to see a red or actually a green container at the top as it should be cool and now how can we sort of integration tests but manually if we can display the yellow thingy this one this yellow container when there is a failure because of insufficient permissions when we cannot load even a single node well we can test that by changing the security rules so let's go to the rules tab inside the console and over here we are saying allow read/write if request time bla bla bla we're actually going to comment that out and we rich is going to say allow read/write false so no reads or writes are going to be available or actually possible if false they should work at any given point of time because they're always going to be evaluated to false so this way no matter what kind of a collection or document we are trying to obtain it's always going to fail so yeah with that we should be able to just wait for a WoW and we're probably gonna need to refresh the app because I don't think that security rules triggered the real time aspect of first or I think we just need to hard restart maybe for the new request to kick in it didn't yet kick in so we'll wait for a while until the security rules are in place so I have waited for a while but still when i refresh we get the successful note color displayed and we do not see the failure container displayed through the whole screen but it is actually very very weird because if I open up the console and go to the debug console we can see here that firestore does by itself log that we have missing or insufficient permissions right called permission denied so indeed there is something going on which causes us to be denied permissions and we know precisely what that is well that's because we have set permissions to be false always right but somehow I'm not sure how even though that firebase client does tell us that there are insufficient permissions we still obtain the notes from fire store which is completely crazy because if we take a look at the note what your block then I know repository then watch all control and f12 to go to the definition of or actually to the implementation of the word all method here if we take a look at the map function and at the on your error return with function or the continuation or however you want to call it if we had restart again the breakpoint will be triggered inside map and the documents will be populated with one document snapshot which contains the data we are expecting to not be available right because we have set the read and write permission to be always false so this is extremely weird we can read data to which we should have no access we even get the error printed out by fire store itself to the debug console saying that there are insufficient permissions but even through this we still can read the data and it appears to be successful even though it should not be so if you have any idea what's going wrong here just let me know in the comments I'm gonna gladly correct any mistakes I may have made in the past to fix this code but I'm I'm really not sure what's going on because you can see that there are insufficient permissions but even through that we can read the data so anyway I guess we're just gonna have to live with that for now it's indeed very very weird but regardless of that we can still test if the insufficient permissions will display the correct container the yellow container and we can do that by just yielding simply always by always yielding the left side of either containing insufficient permissions so let's just say yield yield this and now whenever we call watch all we should always see the this right this is what we're gonna see this signifies that there are some errors with the whole fire store call so we can test if it works we know that it does at least the UI works just the integration test failed sort of our manual integration test I'm not sure why again but let's just continue working right so we're actually going to revert this thing here we're going to allow reads and writes again as previously let's publish the changed security rules and cool that's it for this part in the next one we are going to implement the UI for the cards so that we will no longer display these obnoxious containers just with a different color we are actually going to create the note cards and the error cards and also the container which will be responsible for telling the user that something went horribly wrong if that actually will work in the future hopefully the insufficient permissions will trigger something in our code later on so if you do not want to miss that part and also more tutorials from flutter be sure to subscribe to this channel and also join squat by hitting the bell button to make sure you grow your flutter skills because here on reso coder I am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer and if you are serious about becoming a great flower developer who can build real apps for clients or at the job go to flutter that education to get the top curated for news and resources and at improving your app development career over there you can also subscribe to my mailing list to get the best photo resources delivered weekly right into your inbox if this video helps you give it a like and also share with our developers who are surely going to find it beneficial to leave a comment have anything to say and see you in the next [Music]

Channel: Reso Coder

Views: 3,812

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter firebase, flutter firestore, flutter firebase auth, flutter firestore tutorial, flutter firebase tutorial, flutter architecture, flutter architecture patterns, flutter domain driven design, flutter ddd, flutter database, flutter todo app, flutter todo app tutorial, flutter todo app firebase, flutter app tutorial, flutter app example, flutter clean architecture, flutter bloc

Id: v3eH-OaNtfs

Length: 34min 8sec (2048 seconds)

Published: Thu Jul 16 2020