Connect a .NET MAUI App to SQLite Database Step by Step Project Part 2 by Abhay Prince

hey guys so I'm back with another video and this is going to be a continuation part two of our previous video uh this Maui sequel so in this video we are going to continue our app so I would recommend you to first check out the previous part I'm going to add it to I button and description and pin comment so in first video we have seen how can we um use sqlite database in dotted Maui so we have configured it we have set up we have created this database context a generic wrapper over sqlite database we have all these methods get table get all for basically for all crude operations and then we had created this one model product model and we had this products view model and we have completed this products view model as well with all the properties combines float for loading product and Performing crude operations on the product and in this video we are going to continue our Pui part so let's continue in this if you remember in our first part we have cleared everything from here and now we will continue so first thing let's add this let me minimize this first thing is in mail page dot xaml let's add The View model so we had this products view model fine length let's add the set this binding context to this underscore view model so I don't think we need this um okay let's remove this so fine now first thing is let's come here and let's set the namespaces the first thing let's add name space for our view model and that is going to be view models and one more for our model so let's call it models so this is coming from models fine and then we have added binding context for this page so let's add this database type and this is going to be our products view model so I guess we are good and first thing let's change the title of this so this is going to be sqlite DB operations fine and now let's design this but before that let me run the app okay and we need yeah we need that because we need to populate the products when this screen comes up so let me add it in on appearing and let's change it to async version and after this we'll simply say our weight view model Dot load products command should we use this command our view model where is it we have this one only so this load products we don't need this as a command so let's change it to public load products async fine on this field model we will directly call this method and now it's good okay let's run the app so app is here now we'll have it here only and we'll try to design it fine so first thing is we don't need all this let's clean this up and start with a grid so in this grid we are going to have two rows first one is R2 and second one is start so first one is for the heading and then second one is going to be the main data I mean that collection View and the form so in this one let's have a label and we'll say grid dot row 0 for this we'll have a text as products point and what is the issue here specified cost is not valid but is the issue okay maybe this is my vs is freaking out everything looks fine I can see this products here so this thing is working but somehow Visual Studio is not able to get it fine now next thing is let's Design This a bit the first thing is after text let's say font attributes gold and font size 18 fine then let's add some padding as well of 10 yeah looks great okay now for the second row so we'll have a grid for that and this is going to be grid dot Row one and in this grid we are going to have two rows so the first one is going to have our products list products collection View and the second one is going to have our form that create product added product form so first one is star and second one is auto so the form whatever height it takes will give that and the remaining part we'll give to the collection View so that is all for this now in this grid let's use the collection View and this collection view this is going to be our row 0 for this and for this we'll have uh item source as binding and we have products collection fine so we have this and after this let's add item layout linear items layout and for this I'm adding this to have that the spacing between the items so item spacing 10 and with this linear items layout this orientation property this is required so in our case this is going to be the default vertical and now we'll have our item template this is going to be data template so maybe let me read and I have to remove these warning lines it is taking so much time so let's try to add a break point and maybe here in load products say sink and here let's re-run breakpoint got hit let's continue okay table database but and we are here at finally something is not right about okay looks like it is related to some configuration with this one for now let's add a breakpoint here and we'll skip this line this time so I'm just trying to verify if it is related to sqlite or something else this breakpoint got hit and this time we are going to skip this something's not right we can move this debugger point so that we can skip the execution of this line but it is somehow not working so let's comment this line out and let's read them correct point is here let's continue and app is here that means it's related to sqlite only so on Android emulator I remember in the past I had the same issue at that time I tried to read I tried to research on the internet and finally I found out there was one property group that was something like Ambience assemblies it is not here I'm red assembly to assemblies into APK embed assemblies into a teacher I hope the spelling is correct true stop tab and run that so app is working with this change now let's uncomment this and try it out so it's not working with this and there is one more change so I think it's good that we are getting these issues so that when you try you will be able to fix this so for sqlite we added this sqlite net PCL but let's the official Microsoft documentation it says that we should install this one as well but it got automatically installed with the first one but maybe it does not work so let's install this explicitly install okay it got installed let's pre-run the app so app is here let's see if it works this time it's taking so much time again let me debug it so we are getting this exception now let me Zoom it for you systemed up type initialization exception type initializer for sqlite DOT sqliteconnection through an exception and the exception is to copy this with exception click here for the exception is oh my God while not found could not load file or assembly sqlite PCL Road or provider okay so for this sometimes it does not automatically uh copies the related the sqlite related files but with that change we did in CS Pros file it should have worked we added embed assemblies into APK which proves it should have worked okay let me try to debug it what else we can try okay so it worked I is just stopped it close the visual studio rebuild the project and then rerun it so it ran maybe it was not able to uh get the value for that cs plus change so now it's working and we should be good now let's continue so we were on main page dot XML we were trying to design our collection view so collection views item template so let's have it as data template and the type for this is going to be uh product model and in this also we will have a grid with two room and two columns so and let's have our row definition for auto and R2 and our column definition as star and order so the second column it is going to have those two buttons the edit and delete button so we'll give them the whatever width they need and the remaining part will give to the First Column that is going to hold the product name and price fine so grade and for this will have a row spacing of let's say five and a padding of forget five and in this grid let's have the first row and First Column so three dot row 0 and grid dot column zero this is going to have our product name for binding name and we'll make both this so font attribute bold and then let's copy this paste it one more time and this time we'll have it the price grid is going row is going to be first and column 0. and let's make it a little bit smaller so we'll have font size of 12 and we'll add a string format for this we should price what it is going to show it is going to show us price this hard-coded string and then the actual price value so this is fine now we need to have those edit and delete button so let's have first button and this is going to be in the first row that is row 0 and the second column that is column 1. and the text will show edit and let's have padding zero and a height of 25 and font size slightly smaller font size the font size 12 then um after this let's copy this button and let's add the second one so it is going to be Row 1 and column 1 and let's say Del is for delete fine so I think we are good with this data template our collection View now the second one or maybe before this let's add the empty view for this so we'll say collection view dot empty View and we'll have a Content view inside this and in this content view we'll have a vertical stack layout in Center's horizontal apps options at Center and vertical options again at Center and in this we are going to have two labels first label would say no products found and we will have a bigger font size for this font size 18 with poor Point attributes and we'll have a second label which will say let's try creating a product and we'll have default for this The Styling default and we can see this so no products found let's move it to Center so what it is the text alignment center fine so this is okay now the form create form in this grid we are going to have another item and that is going to have a vertical stack layout with grid dot Row one because the grid dot row 0 was for this collection view right let's prolapse this as well yeah fine vertical stack layout for grade one and in this we are going to have first we'll add one line so let's have a box view for that box viewed with the color whatever primary color we have and height is going to be 1. here we have this okay now the second one is going to be that form and that form will have a grid for that again and for this grid we'll have two rows with whatever height they need and with two columns the First Column is going to store the product name entry form and label and the second column is going to hold the price so price is going to be smaller and name is going to be bigger so we'll have star and Auto for this and for this also let's have a padding of 10 and row spacing of 10. and let's have column spacing also I stand columns facing fine now in this we'll have one vertical stack layout for the first one so this is going to be grid dot row 0 and create dot column 0 and this is going to have one label with the text let's say product name we will have this name and then second thing is going to have entry and the text we'll use binding for this and we will use operating product Dot name for this binding let's add placeholder so let's say product name and then [Music] let's have margin 0 and padding 0 for this but we don't have padding for entry okay so this should be fine okay we have name and product name and next thing is similarly we'll have one vertical stack layout for the second column so row will be 0 only and the column will be 1. this name and product name and this is going to be product price and binding is going to be Pro operating product dot price and for this we'll have a keyboard type numeric so this is for the second price thing product price product name now we need a button so after this will have a button and for this this is going to be row number Row 1 that is second row and column we need only one item in column so really use call spend column spend two if it takes the entire width and then we'll have attached test create product for this and let's see how it looks so we have this great product here now let's design it a bit so horizontal options we need it to be on Center only vertical options it is already at end but let's add it explicitly then we'll reduce this corner radius let's have it you know let's have a small yeah this is fine now let's have a padding of something like 50 and 0 and this is fine so we are good with this no products found try create a product from here we have this now if you remember what I showed you this thing was having a background color so for this we need to have a background color in the container this grid so this grid let's have that background color it was a light purplish color so let me check what was that no because it was CCB FFA fine and after that these entry boxes these were again having a light color so on this entry let's have a background color uh this was d a d 1 F nine fine and the same thing is going to be on this this entry fine so when we are good with these changes now we have this create product as well so the form is ready now we need to connect this form to our view model so for that when we are creating this product we'll bind this create product this button to a command in that command if you remember that was save product command and now if we add something product one and if we save it we got an exception and that exception says object reference products view model what is it let's add up break point in save product continue create okay fine busy text we are here originating operating product to one zero product one ID is one that means it got saved okay now it is updating because this got saved find the thing here is this product says null and why the products is null because oh we never said it right because for the first time we loaded this and there were no products in the database so this thing was never said to the default value so let's have it here we'll say this let's rerun it is here let me remove these breakpoints now we don't need this load products async and product one price zero edit Dell we have these buttons now first thing let's add a little background over this item so let's go to our xaml main page Dot zml for this we need to go to our collection view item template and here on the grid will set a background color option lighting grays so it should be easy we will see in session yeah this is fine when we had padding five and spacing row spacing five for this so this should be okay okay now this edit and dial buttons from these buttons Also let's remove the corner radius let's have a very small Corner radius so Corner radius two Corner Radius 2 fine and now when we click on this edit this should okay but before this we need to add validations for this right it got saved with price zero so in order to add the validation we'll go to product and we'll add our validation method here only so let's remove the Boolean from here and let will say validate this object and we'll need to okay we'll need return a tuple from here which says is valid and error message if any and it should be in the label so we need to validate this object so first thing we will check if the product name if this is null empty or white space we'll simply return it's not valid and the error message is going to be name of name of name is required fine and then we'll add another condition if the price if this is greater than sorry less than or equals to zero in that case will again return false with a message of that price should be greater than zero and and if both of these conditions are poles then we'll return true with null that means the product is valid and ready to be saved and error message is null so we have this thing now we need to check this in our view model before saving so we are saving it here so before this we'll check if our product is valid so for that we'll say let's wear is valid and error message equals operating product dot validate so if is valid if not is valid If the product is not valid in that case in that case we are going to show an error message the alert message basically so cell dot current dot display alert and this is going to be the title is validation error and the body will show error message and the button is going to be okay there is a solution Explorer fine and okay and after this we'll simply return from here because if the product is not valid we are not going to save it so find if this is valid and now let's rerun the app okay so the app is here we have this let's try one more item without adding anything let's create product let's remove these breakpoints continue and we have validation error name is required so we'll save Product 2 and again we'll save it now we have validation error for price price should be greater than zero okay now let's add some valid price and now create products so it got created and added to this collection view so creation is working and after creating this also automatically gets cleared that is also working now let's implement the edit functionality so when we click on this edit button the details of this product should be added to this form so let's do this for this we'll need to go to our button so we have this button we'll add a command for this and this command is going to be we are going to get it from the parent view model okay so for this we'll use binding source for the latest source and we'll get the source wherever ancestors is of type are View mode of r product view model and then we get the path so that is going to be what was the command name this was set operating product command third operating product command fine product command so same thing we are going to copy for add delete button but this time the delete okay it requires a product site operating product it requires a product so we'll add the command parameters for this first one so this is going to be let's hide this for now command parameter is going to be the Complete product which is the same product so we will save binding dot this means this complete item and then put delete let's check the name of the command that is delete product async that means delete product command delete product command and for this we have the parameter as ID this is product ID so we'll use command parameter and we'll give this from the current binding we have this ID this is our product ID so now edit should be working and delete should be working let's try if we say edit parameter object cannabis type system string what did I miss command parameter days command parameters let's rerun app is running we have this let's try to click on edit and we can see product 1 and 0 and let's try the second one now we can see Product 2 and 10 so these values have been populated so this thing is working and now we need to delete let's delete the first one product one with price zero and when we click on this delete the item got deleted and it got removed from this collection view so whenever we are performing these operations let's add uh that activity indicator loading indicator so put that we need that loading indicator in the center of the screen so for that and do you remember we added that busy text this busy text we will use that so in this thing in this the main root grid we will add uh let's say a vertical stack layout so and we'll use both of these two rows grid dot row span 2 and let's move it to Center vertical option Center and horizontal options as Center and we will display it only if it is visible if is busy is true and in this we'll have two items one is going to be our activity indicator which is running true always because we are handling displaying of this showing and hiding of this activity indicator from its parent so this vertical stack layout if this is visible then this is going to visible if this is not visible then activity indicator is not going to be on the screen so we are handling this from this parent only this is and let's move these to Center also activity indicator and then we'll have that label with the text and binding the busy text okay and same thing vertical Center and horizontal options have sign first fine now let's see if this thing is working if I create this product okay then this is again a problem we are not actually creating we are updating this so you see that activity indicator for a fraction of second then the price got updated that means this thing is working and let's add one more product Now product three with some price of 52.25 and create products so that was there so edit delete and creation is working but you see one issue here when we click on this added these values got populated but this create product this button uh text it should be changed to update product to display the correct state of this button so for this we we have two options either we can have uh property for this one observable properties we can have it in this view model let's say the button text or we can handle it using the triggers the data trigger on this button so let's use the data trigger on this button so we have this button let's use this so we'll use triggers for this button triggers we are using data trigger because we need a dynamic binding binded property for this so this is going to be a data trigger and Target type is going to be a button and The Binding we need binding this we need again binding of populating product dot ID if this ID is value is zero then we'll set the property text to the value create product okay in this case let's have a default value as update product the default is update product and we had added this trigger so whenever the IDS value the operating product.ids value is going to be 0 it is going to show us the text create product so let's test it out so now it is update product and if we update it now we have this great product and if we update it we have update product so now we need a button to create a product to reset this thing so for that if you remember the final output I showed you we had one button here that toolbar item basically so let's go to the top and add a toolbar item here so we'll have the content paste dot toolbar items and in this we are going to have a toolbar item toolbar item and the text is going to be now text is going to be add product and for this we'll use command and the command is we are seeking is set operating product command and we are not passing any uh product for this any parameter for this so if we do not pass any parameter in that case it comes null and when this is null so this is going to be set a empty Constructor the default value for this product so this is will show us the create product option fine now one thing is if you remember on iOS this the title it's defaultly it is visible in middle of the screen then these two overlaps for that we'll use uh Dynamic value for this text platform specific value so for that let's have it something like on platform on platform so the default value is going to be this one what we have but for iOS we'll simply show a plus button that's all we need to show and I think this is working fine now and let's try this we are in update product mode if we click on ADD product and Discord change create product update product with these values populated and if we delete there are no products no products found okay and we need to handle this case as well we deleted those products but we have this update product and if we'll try to update this are we going to have some errors yes we are going to have this errors and now we can see this activity indicator and this thing was also working updating product updating product where it is updating product this is here let's add these and then we need to handle this case if that item does not exist in the database so that means if we are updating it so before updating we'll need to check what will would say let's continue this time let's rerun the app is here let's create a product ABC with some random price create product have it in edit mode now delete this product and now we try to update this product where here where is and we continued from here and this must have returned false for this time okay so for that now it will throw exceptions we'll check it here if this return true then only we'll do all this if that's not the case we'll simply show an alert message here and return from it so we'll say that let's have error only and for the message we'll say product application error fine let's rerun the app and let's see how this case looks not okay the app is here let's again add a product create it and now delete and now update parallel product updation error so we should be good now so in this case we'll click on this add product now we have we are in that add product mode and now let's have a product one let's fill some products okay we missed the price so we'll be having 10.90 I did a product next product product two random price create two items product three hundred create so everything is working right and all these operations are being handled on inside the data is originating from the sqlite database so we have these three items product one two three hundred five twenty hundred so we can verify it let's stop the app let's open this app from here so we have this mouse equal it should show those three products so we have these three products right so everything is working fine we can delete this we can delete the items and so that's all for this video so we Implement in previous video in the first part we implemented the backend code behind basically the setup and configuration of sqlite creating this model and this database wrapper and this product view model and in this we mostly worked on UI and some runtime exceptions and we had to add this product explicitly and this tag in Property Group explicitly to run it so finally we have everything is in running mode so that's all for this video like this video share this video And subscribe my channel if you like my content and I'll be back with some other video very soon bye

Channel: Abhay Prince

Views: 5,746

Keywords:

Id: Jd05P1jy_C4

Length: 53min 5sec (3185 seconds)

Published: Wed Apr 19 2023