.net maui mongodb beautiful FULL STACK todo APP in 60 minutes | Cross Platform

here we're going to build this application so you can add an item build app and when you're done you can check it and it goes down to the bottom and you can delete it or you can add another you can for example like this video and but then you think you have to like And subscribe because this video is so great you know I'm gonna build a full stack application I want to show you what's happening behind the scenes as well so we got this database connected to this mobile app and we can add to do here let's click that one and I want to refresh this database as you see it comes I want to show you what's happening behind the scenes as well so we got this database connected to this Moab and we can add to do here let's click that one and I want to refresh this database as you see it comes right away we're offline but let's see how long it takes now what's going on with going online and let's try to refresh it we can just type five let's see what happened here and try it so it yeah it actually did work for us if this is your first time writing a Maui apps you have to set up your development environment the best video I've seen is from Gerald versus he has a crash course on how to set up you can search this on YouTube for free and when you're all done come back here and create a new project and the next thing we can do we can search for Maui and you want to choose the.net Maui app and the next thing you want to do is create a name I'm just gonna call this to do Maui and click next and create so when you're in here you can check that everything is working oh and just debug here and go to Android emulators and choose your emulator and click on the play button it's going to take a while the first time now it's up and running you can check if it works and when you know that it works we can go to to do my way um click the GC sharp logo over here and you can add an item group in the end here for example and it's going to look like this you can install it from tools and you get packet manager but if you want monitor work like in here and to be sure that it's working you shouldn't install the same version it may work with uran or older versions but I suggest you just copy in this for yourself and we're going to have a slightly different structure than what's come out of the box we're gonna create a new folder here let's see add new folder and I'm gonna stop this debugger for now so we're added in the folder and you can rename the folder to views and inside of the views we can add a new item that's good that Maui content content page sample you can call that login page and I want to add another view as well new item content page saml dashboard and we can add a new folder that's called new models this is and a new item inside c-sharp items C sharp class and we can call it login page VM and another item that's class dashboard VM and we can delete the main page.saml you're not going to use that I'm going to create another structure mvvm structure and we can go to Maui program no not yet we're gonna get this view models start it up we have to add another viewmodel as well write them C sharp and call it base view model so inside of Base view model you want to make it a public partial class base view model and inherit from the observable object and have an observable property of is busy and notify the changes of spc2 is not busy you can have a title here as well we're not going to use that in this case so let's just delete that one and we can have the base view model Reddit so we can go to dashboard viewmodel first thing we want to do inside of dashboard viewmodel [Music] is we want to have a couple of private uh [Music] private variables inside this class but most important we have to make this a public partial class and inherit from the base view model structure public dashboard VM so we can add after the Constructor we can add the to-do list and and empty text observable property um so I want to add a new folder now models and inside of the models I'm gonna add nighttime it's called to do so what you want to do here is create the real objects so you wanna inherit from the realm objects using Realms and mongodb Isa and we want to have the primary key here of the object ID and the owner name the name of the to-do if it's completed maybe we'll use this later not for now we have it ready and the partition so let's just save this one and we can go back to the to do should add namespace here probably yeah intellisense when you hover over it's gonna help add this using so then we are ready to add the to-do list as an observable collection and it doesn't have any items yet but we're making this ready and we want to make the empty text just right away and we have some more observable properties that's gonna communicate with sample code and um we have an observable property here sorry we already did this one we wanna also have and it's refreshing observable property gonna understand this later um I think that's it by now you want to continue on this one afterwards we can go back to the login page viewmodel and you want to make this a partial class and inherit from the base remodel and we want to have The Constructor and a couple of variables email text and password text right away and we want to have a method below this let's start dashboard and gonna go to the main we have made this route yet I'm gonna explain that later and we want to have a relay command that's gonna run from the saml code so we haven't made a login yet so let's first make this real map work so we can go to the app saml.cs and inside of here we can write some code this is gonna be a variable to sync this app and inside of the app we wanna create this link but we haven't made the app config and real map ID yet so let's just add an app config I want to add a new folder we can just add a new item here we can call that app config dot CS foreign we want to make it a public static class [Music] we want to have this string I think that's it for now we have a basic styling and a lot of stuff ready so I think next part is going to be to go on the internet and you can go to Atlas Mo code DB and I can click the link over here and what you want to do first is start free it's I haven't paid anything yet for my sign up or that database usage so you can use it for free for a lot of small project I projects I think at least you can try it so just to register here and I'm just going to sign in when you're logged in it's maybe gonna look something like this I want to create a new project over here and project is to do my way just gonna call mine to do Maui course and I'm not gonna add members I'm just gonna have myself as a project owner so there I should have a date very Spiller database I'm just gonna use the free shared and choose nearby database location and create cluster so actually we don't need to create a user I think we want to go directly to the app services and what I want to do over here is add a new real-time sync um and create an app service um just gonna try this I create app service let's try this out so you don't need this from the CLI you can close this one and actually it's really simple to set this up we can start with Authentication and check if your email password is on that's the most important you want to have this one on provider enabled and automatically confirm users and just like this and the reset function so that's already made for us that's great and um actually we've gone quite far already we can click the application zero that's a bad name for the application but you can think about that when you make your application name next time but what I want to do is add device sync and we have development mode on but why isn't this partition based so we want to terminate sync first because we're gonna build application based version so now we can choose the partition based and add the partition ID for example owner ID and we want the users to Read that read and write their own data so I think that's about it sorry about that new Option I think we want to add this as a partition did I write that correct partition partition create and we want to have it as a string that should be right for now and development mode yeah choose development mode and enable synchronization and we can save changes foreign there we go so we can go back to application zero and copy this app ID and what we're going to do next is go back to the application from this app services and inside of the application we made um this ID [Music] and now you're getting the app config realm apt ID so that's about it for the app saml you can say this and we want to make the login code and we want to make a relay command here login try and await the login with the email text and password text and if the user is not null wanna await the shell and go to async so we're gonna have to use the internet to log in if not we're gonna throw the exception you can now let's catch the exception if something else if it's an error logging we want to add this namespace show fixes realm sync so there we go then everything is ready for this page you can save this login page and actually foreign we want to start designing the login page before we do that let's go to login page saml.cs inside of news and we want to add the login page viewmodel so it can connect to the viewmodel and we want to add by any context just add this namespace as well and we can add a binding context of your model so we can run we can do that right away in the dashboard as well add the dashboard VM call it VM and we can add The Binding context to VM so it's ready to run and just close this I'll close this off so we're probably ready to do some designing of the login page which is empty by now first thing we can do is add a background color of zero zero six nine A6 and we want to have a date to type This One X login page viewmodel it's getting an error now so what you can do we can delete we can wait with data type actually we can add the view model first so what you want to do here is ADD xmlns VM and if you type viewmodel you get the view module address from the intellisense and now we can add an X data type of VM login just type login page and it will show up the right word for you there and I don't wanna show show now bar is visible I won't say it's false um so there we go I want to start by adding a scroll View rather than a vertical stack layout as school View and inside of there we're gonna have a vertical stack layout foreign of 25 and padding 30 . and it's going to be centered vertically inside of there we want to have a an image do not edit the image yet but we can do that now right away actually so let's add some margin to this to do image we can go and import that let's go to resources images I'm gonna type this right click add existing item so I have this file in the to do my way and I'll choose all files let's just hope I haven't filed it you can download this file from from a link in the description okay so I added this through a project it's important to not add images while you're running the app or at least you have to run the app when you every time you add an image you have to run the app again because it's compiling the SVG to the PNG to the right size for the device you're compiling to so that's about it for the image we can add then a frame and inside of the frame we can have an entry with the email text and text color of three three and after the entry we can have a couple of buttons we wanna um wait a minute we want to have the password as well so let's just copy this Frame the same padding and we want to have the entry placeholder password and his password true and the text password text so before we can run this code we have to add some dependency injections inside of here in the Maui program.cs before the return Builder let's add this code dashboard thing open at Singleton dashboard dashboard VM I have to add some namespaces here as well this one too and add the login page and login page view model so inside of the app shell the demo we have to change this local to dot news foreign have a login title here and login page and login route why is this showing up type name login page maybe I did something wrong don't do this yourself I'm gonna try to build it to see if everything goes the right way yeah I think I got fail no errors um can't be wrong maybe we have to register routes you can go to app shell Dot saml.cs and after the initial component we can register the login page and in the dashboard page sometimes it tries to get some wrong name Services you have to watch the errors it's adding the IntelliJ I'm just going to delete that so now we're back here I'm going to try to build it you can wait till I've checked if anything this may be not ready yeah so we had to register routing in the app shell so before you do anything I'm just going to try to run this now you can wait till I say go so I built it now and looks like everything is working so let's continue with design foreign page we want to add a button here after a frame login button and as well we want to add a create button create account button to create account command so we want to change some colors here as well so we're gonna open styles inside of resources styles I didn't mean Styles colors of course and the first color we're gonna change is the primary color to our zero zero four six seven you can see it changing now and the third color here we want to change it to zero zero six nine A6 maybe this is the same as the background color yeah so what we can do is go back to the login page and change this background to the static resource of dirtier so it's looked the same it's not it's not like we want we want the third area so looks good and um then we should be ready so we can try to log in see what happens yeah of course we haven't made a account yet so we get uh error message and we can create accounts okay so what we want to do is create a route for the main and you're gonna go into app shell and copy this first shell content and change the login to um Main and dashboard and routing to Main the intelligence should work at all I don't know what why the intellisense isn't working now but anyways let's see if it's we can hot reload this and create account yeah of course we created a count but we couldn't go to main so we can click login now so there we go let's check in the database or user base app users there you go test user as created from devices can't see the device by now [Music] looking good great so now we can start building the dashboard let's see what we have inside the view model what I want to do is create most of the view model ready so it's much smoother the right dashboard xaml code so we can stop the app will always refreshing we can add first code initialize Realm and we can this method we can add a config with the real map current user ID and the current user as a login config and we can get the instance of the real and we wanna get it to do so we haven't made that method yet and you want to have a check then if the to-do list count is zero and if it's zero we can load the projects making empty tanks text loading projects and try to get it to do this again that's about it so let's add and relay command after this method and we can add the get deuce and inside of the get Deuce we want to have is refreshing so I made too much brackets there let's just remove this oh not there Maybe relay command so it's something I'm doing wrong yeah I have to get this input so there we go probably some curly brackets errors here as well there we go uh yeah and the first thing we want to do is add a try block try catch block with the variable t-list and get all to do's also do multiple items to a list and reverse it so last ones comes first and order them by the completed um and we want to add it to the observable collection to-do list [Music] and we want to catch an errors any errors if there are like this and we want to stop refreshing and stop being busy actually I'm gonna add the other codes as well at least we want to add to those now we can take everything right away now we have get reduced let's add the edit to do which is a relay command and inside there we can add sorry we can add a new string to edit string and prompt for the edit they want to make and if the string is small or neural white space we wanna stop this code the turn and then if it's not no we want to add a try catch block to edit the code find it to do by ID and make it uppercase as well I have not made this method yet but uh we can make that you can add a folder here I'm going to call it helpers and we can add a file click add new item and call it General helpers and click add so I've already written this you want to make the first character up case so that's the code we're gonna use write that in for yourself but this is the wrong namespace to do Maui so there we go let me go back to here in the dashboard view model and add this namespace so then this method should be working and we want to add a new command we want to check the to do and try to I'm just gonna write all the code here we want to write find it to do by ID and make the phone to do completed to the upset of what it was and we want to order the to-do list so the checked goes to the bottom and catched potential errors and I actually want to add the sign outs method right away so like this I'm gonna turn on the SPC I see we should turn on the SPC here as well let me space it falls um so what's happening here we're canceling making a cancellation token source and I've found out that I have to quit the app because if I'm don't if don't quit there's some caching that can be saved if I log in with another user there's maybe some of my realm code that has to update with the login or something I will tell you if I can fix this later in another video so we have that code read it so now comes an important one you want to add a to do and first thing we want to do is check if it's straight in the lower space of course we don't want to add any entry text that's another white space we want to set SPC to true and in a try block we want to make a new to-do object with a to-do entry we need a partition it's gonna be the ID and the opener is going to be the email for this two-do object you can write this add this to the real and to the database and reset the to do enter text and get it to those and after that we want to add catch the exception with the error and make this PC to false again is there anything I've done there we go and we want to add a delete task function foreign command is doing a lot of work for us behind the scenes making the code easier to read so we want to add an SPC and try block with writing to the database removing the to do and we want to catch any errors and make this basically false so now we have written most of our needed backend code or not backend code but behind saml code and call it something like that and let me just try to run it just wait a second so you don't run it and wait for the wrong run so I'm gonna try to log in so it looks like it's working so we can start designing the app dashboard so we can start typing xmlns and VM and new models and we want to have the X data type to to do wait a sec um dashboard VM and we want to add a model as well models and we can type in models here hopefully yep there we go we have not models namespace and we may need the views I think we need to use x ums logo and we type in views and we're going to make an xname this one to dash B and add another background color and I don't want the title here I just want it to be empty so but I want to sign out right after a Content page two bar items and bind it to the sign out command and we're gonna change this content vertical stack layout to a Content page content let's see and scroll View I don't know if we need this code but let's just have it there and the first code inside the scroll view is or article stack layout with the word padding 3020 spacing 20 vertical option Center margin 0 10 0 0. and inside of there we want to have this to do logo um inside a vertical stack layout why isn't this showing up though foreign yeah we'll take a look at this later I'm just gonna type okay so it looks like is it working is the text coming in we might have to reboot this uh app to make it look like it's changing you may Wonder to see what's happening so I'm gonna try you can wait I'm gonna try it first yeah so I was right you had to reboot the app so I don't know why it's up and running you can do that if you want to see if you have the same problem and the next thing you want to do is below this image add this grid with column definitions star 100 and we want to add a placeholder to the item and bind it to True interest text and the text color is 333 inside the frame and add this button as well which has the grid column of one you can see here takes up a hundred I don't want to call I don't know what to call it 100 pixels or something um probably not real pixels then but anyways we're gonna buy it it's enabled to it's not PC so it cannot run if anything else on the app is busy in the dashboard view model as you may remember so finish off this grid and after that we want to make a vertical stack layout and inside of there we want to make a refresh view that has the grid why does it have the grid row of one I don't think it needs set but we need to get into juice command and it's refreshing it's gonna be it's refreshing binded [Music] and inside of there we can add the collection view binding to to the list and afterwards we want to make um an empty view like this so when there's no text we want to have the empty text binded to empty texts and the eee text color and now we want to start with the item template collection view item template and we want to add a data templates and X data type to models to do like this and inside of there we can start with the frame of padding 15 and 10. margin zero zero zero seventeen [Music] and the background color maybe you have this already in the definitions I'm just gonna write it like that C6 E4 F5 and then after the frame is ready we're gonna make grid with the definitions to columns star out or Auto and inside of there horizontal stack layout and we're gonna have a checkbox and I want to add some code here to make it check box recognizer when it's clicked there's a couple of options you can do you can add the command to the checkbox as well but I found this to be the best solution for my version of this app so this is connecting to The Binding context and running the check to do command and there you can see the name Dash B we wrote earlier and The Binding to to um like this is sending the whole object into the command and after the checkbox I want to make a label um and after the label I want to make a label dot just to recognizer that has the same check to do command so those two are the same so you can after that I want to add a button after the horizontal stack layout like this that has the grid column of one text edit it's enabled binding to The Binding context is not busy path and the source is referenced via Dash B and the command is like this and add it to the command and sending the object and margin 0 10 10 10 10. and vertical options Center and another button that's delete button it's going to be margin 0 10 and grid column two I'm not gonna tell you all of this you have to watch it for yourself and type it for yourself and then we are pretty much ready I think so it's gonna be an exciting moment to see if this can run I guess with I've done too much here so I can see if it's running so let's just restart it you can wait before we restart it I want to change this color here yeah close the app wait I want to find out this color let's dot this one but I want to have this color here as the background so let's just stop this and what we want to do is go inside the Styles before we run this again stop the app and go inside the styles I think it's inside the shell almost on the bottom line 350 8 or something so there's a lot of things that can go wrong here actually but I think it is the background color on the shell so I'm gonna just gonna move all this code and write this value well um the color here is the same so we can do it a little bit better than we can take uh static resource and what was that after the area so it should work just the same I just hope I use the right place you can wait to run I can check if I don't so now I'm trying the app you can wait trying in case there's something wrong yeah of course there is something wrong I'm gonna figure it out and you don't have to do anything yet [Music] so I think I found the issue here we gotta go to the dashboard saml.cs and uh what you want to do here is move this dashboard variable outside like this and then we need to make a new dashboard viewmodel and set the binding context afterwards and we want to make on a pairing method here protected override async void on appearing when it it appears we want it to await and we want to go inside the view model and run initialize real there we go now we are sure that it's connecting to the right database so it should work now you can wait for a few seconds while I try I started it up and yeah baby it worked so you can just log in and let's test it out test yeah good and maybe I want to finish this app yeah well we can't check it yet we have to test all the features so check futures did I write this right I don't think so anyways we can test to edit edit works so the edit works and delete works you can see the first letter becomes bigger let's delete it yeah looking smooth and Let's test if the check and go to button works yeah I want you to fix a couple of things to make your app things to make your app even better so we can go into dashboard view model and inside the tribe catch blocks of sign out uh you can remove those two last lines and what you want right here is this code uh get the current user ID and remove the user so you can just sign it out remove the items from the cache and you can go to login page create or log in on your user so that is more so we don't have to quit the app when you sign out and that's about it for this thing so I actually found out there was an error with this synchronization when I went into the database so let's see what happened there maybe you got it as well you can see the synchronization between Atlas and the device Sync has been stopped due to error dropping namespace to do that item being synchronized with divising is not supported okay so let's try to fix this we can stop the app first Maybe and sign out or just yeah probably some dead bringing here just stop the apps like this and back to this homepage so first I will try to restart this Atlas synchronization foreign so it looked like there's an error again okay you can start to try to stop the app and terminate so now it's terminated and we can enable synchronization hopefully enable so then it's enabled it should go could go back to the app do for example log in and create account and there we go let's see if something happens now yeah finally so there you can see the document database it's working all the documents is coming in the same page or folder it's a collection actually what's called but if you go back to test test.com and write test test and plug in you can see there were no to do some online database so we lost everything so but now we fixed it it should be working test two test three and if we refresh here now we can see a couple of more documents hopefully yeah two owners with tests and we completed there you go there you had some bugs fixed examples as well so good luck with creating more apps thank you for following so we got this database connected to this my app and we can add to do here let's click that one and I want to refresh this database as you see it comes

Channel: Developer Rog

Views: 16,912

Keywords:

Id: mfvujtMD32E

Length: 63min 18sec (3798 seconds)

Published: Fri Nov 25 2022