STEP 2 .NET MAUI APP USING SQLITE...HOW TO CREATE .NET MAUI APP CRUD OPERATION USING SQLITE DATABASE

you can welcome to macro code if you're new to this channel consider subscribing and watching our previous videos so today we are going to do something very interesting so we are going to create a.net Maui Escalade app and employees mobile app on.net Marie so we are going to create our uh sample app so I'm using visual studio 2022 preview which has a DOT net marry so I'll just proceed and create then I'll I'll choose.net Maui app so this is a project for creating the my application for iOS Android Mac Catalyst uh Windows UI and teaser so I'll just select it then then we we can call it employee app so that is my folder then I proceed then let's use Windows uh I mean dot net 7.0 which is the current version so it will launch our application .net Maui so if you are new to.net Maui just to explain what is.net Maui uh some of you guys may be might have developed app for using submarine so the net Maui uh is uses the latest technology for building native apps on Windows Mac OS IOS and Android so the name Maui kind of now comes and replaced uh zamarine so it's actually the new the name is the is the.net multi-platform app UI uh currently uh on preview but uh you can actually develop apps on.net my currently so so we'll be doing our we'll be building our first app that is employees uh mobile app using.net Maui so if you are new to this channel consider subscribing and watching our previous videos so.net Maui is open source and is the evolution of the Marine forms extended from Mobile to desktop scenarios with UI con controls revealed from the ground up for for performance and extensibility so if you have a previously used a marine forms to build cross-platform user interface you'll notice many similarities with netmail however there are some differences using.net Murray you can create multi-platform apps using a single project so as you can see on our our repo that we have just created we have a single project repo but it is extended at different platforms the Android iOS my Catalyst design and windows so so the name is has been released now for developers who want to build a cross-platform a mobile apps so we have uh we have created one of our apps so you can just actually launch our app using Android and emulator so that we see how it looks so this is a fast app Just Launch [Music] so if you are new to this channel consider subscribing and watching our videos as we start this New Journey of dotnet amount so we'll be creating mobile apps on.net Mario as well so and also we will for those who may want to know how more about the Marine forms you can comment Down Below in case you want us to also provide some content on the Marine forms but this is now the latest uh technology for building uh mobile apps on visual studio uh 2022 so it's actually using.net which is a.net multi-platform apply and it's actually cross-platform framework for creating native mobile apps and desktop apps with c-sharp and xamar so it's taking time to Launch is just wait yeah so our app is launching so this is our first app on.net my and you can see this is our application now on dotted Maui hello world welcome to note my multi-platform app UI so if you click here you'll see that it has a counter so this is our first app on.net Amali so we are going to create an employee's management app on.net amount so we have actually created our first application so for us to begin with we are going to install some nuggets so if you don't know how to deal with nuggets consider also watching our previous videos so right click on the on your app then manage nuggets so we are going to install some nuggets that will help us to connect to sqlite database so one of the Nugget is escalate escalate uh dot net escalate net we say escalate net then PCL so search for that then this is it with the 10 million downloads then install it here it's installed yeah it's installed then the next one is Escalade escalate let's say the lights PCL Raw then dot bundle [Music] underscore green so this is it install that one as well skl escalate PCL raw dot bundle green foreign then so you can actually check on that uh on the installation of the nuggets on each of the dependents or on each of the app so you can see we have it installed here and our first one is installed here so the next the next one is a Escalade PCL escalate PCL then we say Rocco this is it also install that one I'm sure it is ticked we have a green icon on it then you can see it is there so that is that means it's installed then you have escalate raw provider then let's play three install that one as well actually you can see a green icon just beside it yeah that is it then you have escalate provider dot dynamic dynamic CDL cdcl so that is one of the Nuggets that we'll actually need you know so once that is installed you can actually find our nuggets on the dependencies packages under any of the of the platforms you can see it supports Android iOS my Catalyst and windows so if you check on each of them it will have our our nuggets already installed so that is it on how you actually install nuggets so now so what we need to do now after we have installed the the nuggets the next thing that you need to do is to create a class of employees so so let's create a folder called models so on our models let's create a folder called let's create a class called employee employee there we are so these are public so this is our class our entity so it is here so this one let's now provide some attributes the let's provide some fields so we have these as a product key then the net that you can say first name then you can say last name then we can see you can actually provide the connected provide the middle name that is it you can also provide email address [Music] you can also do uh they talk about so this is dates and it's all about so that is how you do that is how you create it then we need to annotate this ID to be our primary key so we do that and we say primary key and we say the ID will build instrumental so you can annotate that is that way then that's fine so the next thing that you need to do is to create a view so so come to our project we need to create a list on where we'll be able to see our employees so let's right click then add the new item then go to dot net Maui here then select the contents.net my content for example so that is we are creating a xaml page then we say employees list then press enter so it will create a xaml as a model page you can see here so this is our page so on this page we need to now so we can alter this to be our label can say text and we can say this is employee at least so then our title of the page you can say this is the employees so this is where we'll be having our list of employees so we have created that so then we we need to create another folder for our view models so we are using mvvm uh approach so this is a view model then we'll create another class for employees uh new model so we'll do this employees view model these are view model so that is it so this view model will be using it on our for now employees list so yeah we can actually we can actually indicate that these will be using so let's draw these you can say X so Etc so we need to register a view model so to register a view Model come to maui.program.cs we need to register our view model here so so we will say just below here so views we need to register our views and also our view models view models so come on the views we say the Builder dots Services dot add single term so also consider watching our videos or about uh dependency injection methods to get my understanding of what we are doing so this one will do this then you can copy this View then paste it here so can I need to add that is how you do it this is it let me do this then we need to register a view models as well so that one will come down here to separate it for easy visibility we will also copy this so that is it so this is where you register your views and the view models so so yeah we now have our our employee list so what we need to do is also now to Define our on our employee list we need to to pass the view model that will be used so this is it it's a view model inside here let me see the person place ID is dot binding contact is equals to it will be using this so our data will be coming from this view model so that is it so yeah Okay so when you come to employee list so here we need to indicate that we'll be using that view model and you can say look I need to borrow the view model so let's see this foreign [Music] so you can actually leave it the way it is so the next thing that you need to do is a is to include our page on our optional so here you can call it you can refine to our employees list we just do this okay we'll be launching employees list page then the roots so you will just try to launch our app if you want to add you should actually see our employees list design so we have indicated it here so this is the app share where you actually specify the pages to your app and we have a view model we have registered a view model and I've used and debut then we have the actual let's see where it's launching foreign foreign app is launching you can see we have now our employees list so you can decorate our employees list so you can see there you can specify the magic the font just use the fonts font keyword font size let's say that we see our then you can also put in some margin okay [Music] let's see uh app is launching there you are so you can see we have now our employees list so these were our list should be shown so we need to create now some services to connect to our application so remember we are doing we are doing connection to our SQ sqlite database so let's create a folder called services uh you'll be having our interfaces so here let's add one of the interfaces for adding students so let's create an interface interface then you call it I employees I employ employee service so then you can create you can create another public consider another service that will Implement our implementation service so you can call it employee service [Music] you can add it is public so let's now Define some of our in our our interfaces that we need to so here we need to get some list of employees tasks then list list of list of employee so we provide our class there [Music] located on the list of employee then you can say get employees employees list this is one of the method then this method we need to our service is actually an implementation of High employee so we are actually doing dependency injection I Employee Service so it will be having an error so if you just right click here and you say Implement interface it will borrow our get employees list so so that is it so you can add another one so this is the retrieval the services then we can add another one too to add task so we expect to return Boolean and these will be adding students not adding you can say add employee so this is a function [Music] you can add another one for deleting Chloe then I'll delete the password model the employee that needs to be deleted then we can have another one to update updates employee that is it so if you come to our incrementation you can see we have an error so just click on it then say Implement interface so it will add the rest so you can see it has added ad employee delete employee get employee list and update them so that is it so so this is how you specify so we have our functions to add delete and get the employee list so you can actually provide a Constructor here let's say public [Music] that is the Constructor smells so that is it so we want to connect to our database so on this class you will do public so you're using a skeleton the lights just light connection let's write connection yes it's got connection then you can use escalate and let's go DB connection so that is then so inside our Constructor you can say Eva our DB connection DB connection because to now then you need to establish our connection so string the B path request to pop dots combine release the location of our our database dot get folder then inside there is environment and special folder local application database then you need to provide the name of the database so you can call it so it's actually a string you can call it employee then dot extension for slidb3 so that is it then we close so so we have established our connections then we say here underscore DB connection is a question new but indeed then it will create so we are actually creating our connection dot creates [Music] tables so these These are creating my employee table so create table so you can actually use sync create table so let's let's create another function here called private [Music] let me say setup database [Music] we want to set up our database so we can copy this here and provide it down here so or DB connection then we can say create table I think maybe it's just I can have that asynchronous let me do this create to everybody so yes yes I like connection you can use a sync connection so let me users creates Turbo [Music] DB then here we have the issue let's use a sink here later scene connection so here we have user sync the table I think that is fine then here if a connection is now you can actually you can actually call the you can actually call our method here to set up connect this you can do this yeah and then you can call that here we are calling our function Now set up database on our Constructor then if our DB connection is now then it click the database so another good thing you can use a weight so I can use a sync then here we use a weight probably so that is how we create connection to escalate database so we need to to now alter our list here get them get employees list give us the list of employees so your favor employees list equal strength or a DB connection Dot so we pass in our model employee yeah so the the model that we need because yeah this and you want at least I think one time list then we need to return foreign we need to do DB connection dot inserts I think then this ad will be coming with our model foreign [Music] [Music] type is Boolean so you can actually change this to ins then come to our implementation events then I'll return this that's fine so you will come to delete also you need something like that so in the data sync data sync you can also change this to it change it on our interface to enter as well then we also do the same for update so this will change these students then this will be update I think and on our interface remember to change it to int then that will be fine so all our so something is wrong somewhere so this is fine get employees or does this say and employees okay I've seen so it expects our expects uh model ing your chainsaw or no it's very easy for now add as well you expect that our employee yes right now yes we now have a correct interface so whatever wrote this is visible yeah so this is our so delete student let's see we have implemented it I need Student delete employee I mean that is it that's fine that's fine so we have created our our crude operations on our mobile app and already connecting it to escalate database our database name is employee so the next thing that you need to do now is to perform good operation so what we need to do is to create a xaml interface for adding our employees so right click on the app then add new item then select a.net marry then.net my content page so this one select add employee so that is it so we have our so the next thing that you need to have now is to create another view model for adding so we'll call it add ensure that the view models and the view page has the same model as the same name in convention add employee view model so the page is ADD employee then the view model should be add employee view model for easy understanding so that you can be able to support your app going forward so this is our view model and this is our page so remember we need to register it on our app Maui program.cs the way we did for employee list so we'll copy this then we add here add employee so this is the page and you also need to register a view model here and employee view model that is it then we also need to register our service services so so this one you will be using are transients remember ensure that you understand these uh methods so we'll register our service is AI employee service then we provide the employee for implementation service yes so that is it sorry I'm sure you have done these two so the next thing that you need to do now after you have registered our view model add employee a page and our service so we need to go back to our ad employee page I remember we need to supply our ad employee new model view model that's how you supply we'll be using this then these enter binding context request to view model good so for now add employee page remember we have not provided any formed so these will be add employee so we'll be using this to do even the update so you can call it add or update employee then this one you can have this as a start layout with a margin of a 10 so that is how you specify the top margin so we need to specify our fields it's our label will be our first name first name font size font size font size is equals to 16. so that is it instead of this you can actually use this to close it then uh these are Level the entry input so we use this entry then we say place holder means and also close that I'm going to close with this one so this is our these are input then you can do middle name I can call first name then this is the middle name our next one you need to specify last name it will be last name then the next one will be our email address email address email so so these are formless ensure that our our model we have captured everything on our models we have the first name middle name last name then the date of birth so you can add a little but yeah I need it oh bad they go back and here we can have it on back that over but so this is our our adding form so on our list form we need to specify a command to open our form so down here you can provide a button button then we call this button add then we can have it horizontal position to be at the end and expand then we close it so you can also have this as that layout good so on our employee list on our employee list remember this view model employee list employees view model so we need to add another nuggets that will help us okay let's add mvvm community so come to nuggets then add mvvm community this one install it as one of our nuggets accept [Music] amazing so it's installed so the next thing that you need to do on our employee my employees view model then we need to have observable property there we go it's available objects call observable objects is it um so this one will have to include you will now be using these the microsoft.toolicit.mvbm then you now want to provide that command so uh command public I think avoid so we want to add a command to open our new page of adding the employees add update employee remember the employee form so this command will be open Opening Our employee form so to ensure that this command is ready this is actually a button we use I delay command okay and I relate is called relay command command so we need to import something here you can install I'm not gonna get called Community toolkit I think I'm installed the wrong one vvm do this it is actually the community VM that needs to be installed so if you come to our employee view model we should be able to use this yes you see using Community VM import so that is it so inside these so if you do away with this one then here I'm sure you have a partial fine so up shell the current dot go to I think then you specify the name of our page it was called add [Music] employee so these are big so that is fine so you also have to register this page on our route our employees up shell that is able to oops [Music] let me say name of they will provide the name of the page and employee then please say table then the name add employee as well add employee so that is it so we have registered our route so that this is a command will be able to get our our page so on our on our employees now come back to employees list we need to specify the command now when you hit this button what will happen it should actually go so type in command then binding then you specify the add update employee and ensure you have something called command so on our you will see on our view model it is actually add update employee but when you're specifying the command on our update list you should add and our keyword command so that you're able to read that command so then on here we need to add specify the view model so here you can see yes the name space then we can specify employee app employee app let me say that new models so the data type that you're using here that data type equals to view view models um it's not easy to copy this let me say Dot the column is a employee so that is how we specify so let's launch our app and see what happens so if we hit these buttons so we'll be we'll be seeing that command and also the the form that we have created this form so let's wait for our app to launch our app is launching so there you are so you can see we have our employees list and we have the add button so if we click this button it's supposed to take us to our ad form so let's click it there you are so you can see we have our first name middle name last name email address and date of birth so this is our phone that you have created so that is our first step on ensuring that you have the form and the list so the next thing that you need to do is to add a button here for adding so just come to the add form then let's say add button and the text of the button is uh you say save knowing details so if we just close this we just close this and we can set the property of the phones so at the top of our screen you can add and add the content page I can't speak the resources so I'm going to set the fonts of our resource a dictionary close this then here we say style so this is if we providing style for our page style let me close this as well so here we are targeting so you can actually Target either the label in our in your styling then we provide now the set as ETA then we can have the property as font size so font size of our page then the value will be 10. so this is our font size so that is it so you will launch our application again we'll be able to find our uh also do this specify the value of the text so our app is launching so yeah you can see if we click we have our button you can see we have now our button so we need to specify the styling of our of our text view of our text a details or the color text color you can have a value should be light gray and I would have liked grades to close this so that is our color for our um okay let's call it select green so you can also have these so you decorate our values on each of these you can have them under vertical layouts so you will press enter you can copy these two basic inside here a vertical layout as well then our vertical layouts as well foreign foreign application we see the question is launching there we are if we click our page you can see we have our our thing so so we have just dialed our so the date so remember you have added the date so this is not entry so we'll change this to the Picker remove this so these if we launch this again so we are able to see the dates application is launching so if we add yes you can see now we have the date picker on our app so we can select the date so now let's proceed to our add view model so add view model add employee view model so we'll also do this we will also have observable object therefore objects which you can borrow these from yeah using uh-huh then this will be partial good so the next thing that you need to do here you need to specify the command so this command will now be saving the data so remember that command that you have provided so this command will be delay command and it will be public add employee so these these will be saving our employee so so we want our field here oh observable property let me have so oh no so there's there's actually have our Constructor first so we need to specify our model we say employee employee then we say employee intakes so since you are using that this should be small so here we need to on our view on our Constructor we need to instantiate this employee is equals to new employee so that is it I mean very details they need to instantiate that is the employee that is it so we are going to use these two pass our values so if we take this and come to add employee on Entry so we need to provide the text that we capture the input from the user so binding so we use that binding dot then we say first name fast fast name then this one also it say binding now text say binding employee dot middle name and our last name also we say text is equals to binding into this sorry binding employee details dots last name then email address itself the text binding Android email address then data but we say that so the date will be selected here okay update go back be able to see that so after we have done that we'll be capturing now data from our then remember we have our Command now so let's specify our command also command command will be binding then you take the name of our Command from our view model so the name of our Command is the add employee but remember what we said if you the command should be add employee then put in the next keyword command so that you're able to get the details so the next thing now that you need to do is to inject our our eye our service that we created so dependence injection remember what we created previously the I employees service so this is the service that we need then we will inject this to our Constructor foreign so here I will be having underscore employee is equals to employee so that is it so when we click add employee we need to save the data so variable dot response is equals to I employ employee Dot add employee then we need to pass so to get the data remember the remember these employee details so it will be coming with the data so we will pass our employee details there foreign [Music] that we need to save so the next thing that we need to see if I can have a sink and then we have these as a weight then we say if response new response is greater than zero then what we what do we do you say I wait the shell the currents display a lot so we want to display an alert we say uh record added so this is the title then the main text you provided here we say employee details success fully submitted then we need to provide the we need to provide the command keyword okay to be clicked and if this is not true yes what do we need what do you say we copy this and we say not not added where you can just enter not added let me see here something went wrong with the memories details so if you'd like to close this and you should close this address so we can actually Now launch our app we see what will happen then we can put in some breakpoint here we see if it will come with the details so if you just add something something is wrong somewhere so let me see the initializer three okay let's see our service so this is it so we have done that so let's try again our app is launching there we are so we can add employee you can say Jose then email then you can choose the dates save yeah you see the record added employee details successfully submitted okay so we now want to get a list of uh employees that we have added so what we need to do we need to come to our let's stop this come to our employees view so here Constructor so here we need an observable collection where we will be storing our employees observable yeah then here we'll be having our employees employees and employees get set then let's let's import our view model so this one will be empty collection observable collection [Music] that is it so you can import this is sorry I'm just using employee model that is fine so we need a fun method here to get our list of employees privates [Music] get employees list that is it so we need to inject our we need to inject our our I employee public only I employee service [Music] what is it then this one you need to have it here you can see underscope employee sorry this one's gonna be like this this one should be here is equals to employees and then we shall come to our get employees list employees equals to underscore employee Dot get remember this is a list then close that you say if employee dot counts counts is greater than zero this will be now level accounts let's get released these are lists I'll do this see that's your employees actually a list so this one if you love us a sink I have this that way then we say you want to look for each for each paper employee in employees this one then we want to add to our collection so we say employees dot add employee so that is it we will be having our list of employees retrieved from our database so so these get employee list now give us a list of employees so what we need to do we need to go to our employees list exam on the page then we need to pre-populate this so what we need we say protected override then void on appearing so on appearing we need to define something here so from this one I want to Define our view model click where it is underscore view modeled I don't know let me see underscore view model is equals to view model completes then what we need to do here we need to bind our list to ensure that it it is actually automatically pre-populated when our page is loaded so remember this get list that we have here is actually a command so you can have this a command and you can have these as public so that you can access it then on our list we will save underscore view model dot get so we populate our list of data so get lists get list command let me execute let me pass now that is it so this one will now pre-populate all our students data and actually assign it to our collection so on our employee list we need now to see the data so inside our stack or overflow I mean a stack layout we have collection View then one now to view our data collection View dot items templates [Music] foreign we need to indicate the source of our data this binding then on our view model we are getting data from employees so we will provide that as our source of data then inside our written view we have the data template so this data template we say we need to indicate a data type the data type will be models [Music] and even employee then here and specify stack layout when you need to specify our values in horizontal layout then the labels can have them as labels yeah it's going to be learning you can close it easily over here you can have the text binding also do this you copy these you have a middle name you can have email address last name they can have email address and then you can have so all our values will be shown here it is so we launch our app to expect to get those data so let's we have an error where you can actually remove these so app is launching yeah you can see we have some values here so we need to we need to actually make it look good so on our list when we are adding data before we add you can see we can actually clear anything that is that is before we add anything so we need to you need to style our page so we come here to list then we say on our stack layer you can have the margin and horizontals we can have the spacing to be 15. then on each of these one another font size and then or let's say team here so you can have the first name I mean this one you can foreign [Music] uh can have this in a frame you can have this enough [Music] [Music] [Music] now you can actually bold it hold it [Music] we can launch but I can have this imagine your frame and come out [Music] so you can add an employee is Jack Rob okay James color dentists gmail.com foreign [Music] okay [Music] Let's see we are getting any data yeah I'm putting up break points then I can't launch foreign [Music] [Music] you can see we have a our data I can add another one here James of you human then we can have the date then you save so we go back you can see we have our records so this is how you create a crude operation in Sp that is a crude operation in dot net marry so assuming we want to edit our data so what we need to do we need to provide something here so we have our our ad so we need to provide a function to to edits or get so I want us also to redirect when adding so let's provide an action when it's display option so there is a command and that's to do something here we do this [Music] rub shell current display for that provide select option let me see some text okay all right then edit I'm going to say delete so these we want to prompt an action select option okay edit or display so this one will be display action sheet then it will be our response so this one is when you want to so we want now the redirect whether to edit or delete a record so if response is equals to edit we need to do something else if again response equals to delete [Music] it's only to do something so when when delete is selected we want to delete that record Employee Service dot delete so on our delete option we need to pass the employees employee so that is the employee that will supply here so this one [Music] delete and response and request to this so if if delete response [Music] is greater than zero so if it has deleted what do we do we need to fetch our records get employees we need to if the record is deleted we get our employees list but we'll see to employees do we have it here so this one should actually do this on our not the add button sorry if you do this on our employee view section not an ad so I'll just copy that Chloe and play view section so we need now to get that employee list yes we need to fetch this so once it's deleted it gets our list so this function is here actually gets a list of entries so once this is uh what if this is uh edit so if it's edit we need to we need to we need to open the form with data go to a sync then memos we pass our ad employee at the employee page then we need to pass some values because you are editing so we need to pass data so we need to supply it with our employee record so let's see [Music] around we need the parameter now the navigation Now button is equal to new dictionary [Music] but um so we need to add our page here and we need to supply this video model let's say employee then this param you need to pass it somewhere here conditions will be objects sorry to do that then we can close this here so that is how you do the editing on on our ad view model we need to get the data on our control it will supply us with our parameter so on top of our we need to get that value that model so if you use Query property and then inside here you need to have observable property then we pass I think we we had already defined our model so this is the model so you'll assign the value so here we will say name space [Music] then we need to provide add employee you can we need to get there for this one here so foreign [Music] [Music] [Music] foreign [Music] we open the display action so here we say command so I'll guess the command command bind binding of course foreign X type and then employee view model where you will do that then you specify the path button here you can see these one you can come in satisfy that and you say command then parameter we need to specify the parameter parameter equals to binding for that is it [Music] and press enter here it's fine so we can try launching our app yeah you can see we have our data so if we try to tap one of the record it will give us edit or delete so we say edit it should take us to this page to take us to now the add or update employee page but if we say delete so let's get back so if we say delete it should actually delete a record you see we don't have any records so if we do that it deletes our record so that is it so now when we tap our record doesn't give us our our value so we need to have the values pre-filled here so let's see what is not happening so on our add view model we will come here uh we have this one foreign [Music] employee on our view no option we need to specify these then our model and you will add you need to pass the parameters so now View you need to get a new model so that should be fine so if we do this see we have a list so we can add our employee Jared Zuma karanja ctions email [Music] .com and you say if you go back we'll find your list so if you edit you can't remove so that is it about today's video so if you are new to this channel consider watching and commenting also subscribe to our channel to keep us motivated in posting new videos so that is it see you in our next video

Channel: Macro Code

Views: 5,901

Keywords: C#, AmigosCode, .NET, .NETFramework, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, .NET 6, Visual Studio, Frameworks, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Comrades Flavour, Nicholas Kioko, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, ASP.NETCORE, SQL, SERVER, BoostMyTool, MAUI, .NETMAUI, CRUD MAUI, SQLITE

Id: f1QOyJclp54

Length: 105min 13sec (6313 seconds)

Published: Sun Jan 08 2023