.NET Maui Apps | Build Bill Tracker Mobile app using MAUI, SQLite and Syncfusion components.

Hello friends and everyone yeah welcome back  to netcode half Channel actually I'm so glad   to meet you again here for this mini project the  title of this project is developing or building   um build tracker application  for mobile and also a desktop   we have done this project before but that project  we use a Blazer server app so we're going to talk   about web application we use a Blazer server  to do that and this is a mobile application so   with this you can install it on our phones and  operate it for the web server you need to for   the web application you need to have a browser and  also access that if you haven't watched that video   on creating the same application using the web  then check the description here I'll leave the   link over there you can click on it to watch it  the hosting model that we use was Blazer server   now let's focus on today's lesson it's all about  creating a build Track application for mobile   so this build tracker is a mini project that  we have been doing not only this we have a lot   of mini projects that we have um started doing it  we built both the web app and also the mobile app   so check the playlist or check the description  here I'll leave the playlist over there so you   can just have a look um to that now I want to  talk about build tracker to what we are doing   here it is just an application which is going  to keep track of our bills that we set let's say   um electricity bill I'm rent um water bill  any kind of build that you want to add   you can add it over here now you choose the build  period if it is a monthly or year now as soon as   it's it's it catches up the duration is over it  pops up and it tells you the amount I need to   pay if you couldn't pay the next bill is going to  increase it's going to add the same bill the next   time okay the screen tells you what we're gonna  do here so you see from this application that we   have there is a home page now the home page we  have this build Track application now the bills   that you have here that is the total amount that  we need to pay so that is the amount over here   now these are the deal bills that we need to pay  we have our water bill we have current and Bill   so we see we have the type here as monthly  the current command that we need to pay for   is September the amount is the amount and that is  a deal date so it ended on this 18th October 2023   that is a deal we did don't worry this will be  in September I just uh have adjusted the date so   this bill can can be due yeah so though we are  in September but on this application we are in   October don't worry okay so these bills are unpaid  so as I can see we have this um status now if I go   down here you can see this at the recent bill  payment and now this recent bill payment we've   paid one for electricity bill for September and I  will see the status here I mean it was paid that   is a due date that is the amount so actually we  are not making a payment through this application   you know for this uh because we pay them outside  but this is just a Tracker so you have to input   we have to alert this application to exclude the  one that you've paid and keep um the address as   well okay so this tracker gets you the amount  that you have to pay it gets you when the time   is up it tells you what that you pay as we in case  you couldn't pay it's going to keep the record and   now pop up all the time and for you to know the  kind of build that you need to pay in the at the   amount I know so I have to pay you know all right  so how was I able to do this now I want to check   this Blazer server app we did the same thing here  from the home section and now there's a way to add   Bill and also add this be a period and that is a  monthly or weekly or yearly in case you want to do   that so let's try to go through that and see but  first of all maybe let's go up here and for this   you see we have this home we have built a manage  period and manage build now when I go to this   period you see we have only one over here and that  is a monthly so I can I can add a period over here   in case I want yearly I want to weekly I want some  days I can do that also so maybe we can decide to   add one for us to see let's say weekly so you  can click on Save and as soon as you do that   you can see it that's been added here now let me  go back to this bill you're going to create bill   so we have these three bills here in uh um data  grid now these are the builds that we have now as   you can see from here we have the amount we have  the name the amount over here the period that is   the monthly for each we have the starting date  okay and we have the Bills status so this is our   active yeah true okay now let's add a new building  C so let's see I'm gonna add something like click   on this add bill and we have this add the page  popped up okay so let's see this is housekeeping all right so this housekeeping build another type   I'm going to choose here is manly so  let me put in the amount over here okay so Point 88 let's put it that way  and now that is a bill status is it active   so yes it's active because I want to pay at the  end of the month and now here you see we have the   calendar so you have to choose in the date that  you want to start from so the starting date so   I'm going to choose in this month as well we are  in October so I'll go to September and I'll choose   all right so September here   and I'm going to choose all right so September  um it is disabled you can see these are the past   dates so we can't have access to the the past date  okay so maybe this is what we can do let's see this we are in October right so for this we  can make a change to this lesson today's date   so I'm gonna make a change to this and I'm  going to select from instead of this October   I'm going to select September change the date  okay now let's because now let's go up for   the September and see if you can  have access to that let's close this okay and let's try again so all right so we have because we've seen  the date let's review this application   and try to earn a bill foreign so it is back again now  let's let's do that so um build so you're gonna add a new build housekeeping Bill   and that's going to be for it's a  monthly bill that we're gonna pay so monthly and the amount and I'm gonna make it as active now we are in October here so let's see um so October we have October here okay so  let me pick the October 18th let's go back   so September let's pick the October 18th and  that is this so click on this to select that and okay so we have this selected you can  just go up here and now click on Save   all right so you can see we have this housekeeping  um Bill bin was added as you can see from here   there's a view nameless the build time that is  the date over here and yeah let's add one more so now we have we're going to add  another bill so um let's have that bill   and maybe you can now go for the same  months and passing the amount over here now the build type here and  we're gonna choose the same day then click on save all right so we have  the bills here added now when we go to   the home since these bills they are not yet up  you see they are not because we said monthly   so the current date that we choose Plus additional one month that's going to  give us the amount you for that so   in order to achieve that I believe  we can do this let's try to check let's go to the same bills another the ones that  we just added and that bill you click on this and   we want to edit and now here within the October  you want to go for September and that is 18th so September 18th yeah so we are into there September 18th okay so this has been selected then  we're gonna save that so now it is set to   September 18th now let's listen to the  second one that we just added we want   to see if the time is up is going to get  the data it's going to populate it for us okay so let's set this to  September and this is 18th so that is I guess September 18th okay all right so now receive it now let's try to  access the home page and now see so you can see   now we have the bills over here and we have the  housekeeping bill so it is that is the month of   September and also this is the month of September  so as you can see we have the same amount as well   okay so I decided to add this month and try to  update it let's see what happens so let's take   some time to go through this now I'm going to  add another one or let's try to change this   now we see this is in September and the  due dates in October now I want to check   the date here we're in September so let's try  to update the date here and change the date   and here I'm going to add move to October okay  so if I move to October let's receive all this so   that this means that when we check the bill when  we check our bills here we are saying that the   starting date for this is going to be October so  October plus one month okay too many November this   bill is also going to be ready as well for payment  now we've changed the date here let's try to let's see click on manage and unless   go to so you have the same September over  here let's try to close application and   I'll load it again and see that if it's going  to generate a new bill for us as of um October all right okay so we see that the amount here has  been doubled as you can see from here because all   these bills are not paid so you can see we  have September September built and this was   September built as soon as you go on you see we  have October bill so this bill do not pay date   deal was November 18th and now this bill was  October 18th so we see that the the interval   here it is one month every one month it has to  increase and now it checks if it is there if it   is paid they're going to move on to this but  if it is not paid it's going to be added and   now the amount here is going to be added so you  see we have all these bills that we need you we   need to pay as well now in case we decide to  change the date here let's also change the   date let's say we are in the month of December so  let's see it's going to also increase at the time   or they're going to increase the amount over here  so if we change this to December and change this   now once we have this over here you can see  we have up to date October now when I reload   this you're going to have November as well  November bill has unpaid so let's check it out   and see so we have to reload this application  again so it can sync with the day that we have   set and get us in November uh Bill okay so we  see we even have it so it is in November beer   okay so because we have the November build over  here and the amount has been increased to this   yeah now let's try to assess it so let's see  if it is paid and I want to pay October uh   that's in November for water bill so as soon as  I click on and paid one it's going to move this   bill and you can see this right here for this  recent so you can see the status here at the   speed and Advance our table is paid you can  also page the car rental and as soon as you   click on that it moves from disk a dual build  table and it comes to this history table so   this is our histories these are the recent ones  and as soon as I pick you see it also subtracts   from the amount here so let's see here we see it  subtracts from this and now it comes to this and   I have the current amount of build that I have  to pay so let's try to pay all and now let's see   okay so you could see it is you see that it  is just I'm subtracting the amount from this   okay now let's see we have a lot okay so  basically we have only two bills left and   that is the amount over here six four seven  point nine one as of 79 the last five six   seven and I want to check this recently we  have all these bills right here as I recent   um payment all right so this is just a simple  application that we are trying to do okay that's   a build tracker so it keeps track of our bill that  reset and every month it has to update in case you   couldn't pay it's going to generate a new bill  and add it to the amount that we have already all   right so um this is what we're going to do we're  going to create a new project for this.net Murray   because you want to start from scratch and we do  everything um step by step so we can actually have   this mini projects here if there is a first time  of watching the video from a netscode app Channel   then you're welcome again check out playlist  we have a lot of mini projects and lessons for   you over there both Blazer and also.net marry  if you haven't subscribed to you you can also   do that as soon as you upload a new video you  have a notification to also watch it as well   and if you think this video you are okay with it  please give me thumbs up because when you do that   it helps this video to get to a lot of people as  well so thank you so much for doing that as well   all right so you're gonna close this  and we're going to create a new project so the name of the project I'm  going to create going to be um demo   or married demo or demo Marine build tracker  when I'm done with this project I'm going to   put it at a GitHub and I'll leave that  link under the description so I want to   check that you can just go to the GitHub  and clone this project and also review so I choose.net Marie app and the name here I'm going to  make it as demo Mary build tracker then the firmware that you're going to use is 7.0 all right so now the app is ready and created  the first thing that we are going to do here is   we are going to install uh nuget packages for the  sqlite database so in order to do that I'm going   to copy some package reference here and these  are the package that you're going to install so   you're going to pause the video and try  to install these packages so I just go to   solution Explorer then I'll just click on  this project and I'll go to unload project   so for the database these are the  packages that we're going to install   so install these packages okay we have the  sqlite.net extensions extension.async raw.core   provider and also the sqli3 so these are the  packages you're going to install for database   also aside from that we need various country  2k.mpvm and also we need the current UK dot Maui   we're going to install these packages as well and  when we are done then we can go ahead and install   um some packages from Centurion because we're  going to use their components so you're going   to install buttons call input data grid calendar  mpvm helper this is not from Microsoft no this is   not from SIM Fusion sorry this from James magnano  who created this package and I'm going to install   this pop-up so pause the video and please try to  install these packages right click on dependencies   and then go to management packages and I'll  try to install that but for me as I have added   these package references the next thing that I'm  going to do here is I'm going to just reload this   project and if I upload this project  I'm going to choose on reload with   dependencies and if I click on your virtuous  independencies it's going to add all these to   the application as well because I have these  packages installed already so I have them so   it's like making a reference to this  so I'll just save this and I'll go to this and I reload with dependencies and all  of these are going to be um installed to this   project now if I right click on dependencies here  and I'm going to management get packages I have   to wait for some time and all of these packages  are going to be installed so let's wait for that yeah so we see that I have this Murray mpvm  and all these packages have been installed as   you can see so try to also install the same  um package then we move on all right so what   we're going to do here is let's first build this  project and see if everything is is in order then   we can start creating our service and also and  so forth so right click on this solution and I   click on build solution and now let's wait for the  build to succeed then we can now move on with it yeah I can see the build is filling here  because we need to add some um service to   the myuprogram.cs file so let's do that we have  to navigate to the my program.ts file and now in   there we have to add some service over as you can  see we have this air that we need to do so quickly   services now let's go my program and now  in here let's register these ones there   that is a Mario Community kit and  also the configure the Sim Fusion core   okay so all these have to be added the name  space here from so let's control period   maybe we can add it ourselves Community okay that  Mary and now with these two you need to add this   yeah so that is that one so these are the two  namespace I need to add they call it hosting also   going to kill.mary all right so save this and  now let's reboot it again and see what we have   so right click deletion and I build solution okay so let's wait all right so you can see that the app is  successfully built and everything is working   as expected now the first second thing that we're  gonna do here uh I wanted to see the very first   thing huh forgotten that we've done the first one  all right so the second one that you're gonna do   here is also very simple and that is creating our  models you know models these are the properties   that you're going to be using for database and  also for communication from a database and so   between the user so database and user   the models are the one that they're going to  be using to communicate between now left has   created now we're going to create four models here  the first one is going to be the build model and   that is going to be the default model so this  B model is well gonna allow the user to set or   state a new model if I want to create a new model  or if I want to create a new build it is a build   model that's going to handle that so let me check  this application you can see that if I click on   um build okay and now if I click on manage build  so this is the build model that we are talking   about okay so let's first create this video  model and we're going to create a folder here   and name it as models so let's add a folder to  the project and let's name this folders models so let's create a class of this  and this last is going to be bill and now this build class we are going to be using this properties so let's let's set this to public we  can clear these things from Top here now with this   bill let's also specify the name so the table  name has built and let's add this name species so we're going to use the sqlite and ask your  net extension that attribute now this is going   to allow us to have access to this means  one relationship or the relationship here   now we need to create our build model you could  see that from this model it has a relationship   here because you want to make in such a way that  a bill period that is a the period either monthly   or weekly has in connection with this bill so as  soon as you want to create a bill you might select   the type or the period now I'm going to copy this  and let's create another one and for this period only the period yeah so that  is the types so a build period and now with this build period   you want to have something like the table  is going to be the build period table okay and let me close this one all right now  this ignore we can ignore this for now or do   you want to maintain this maybe we can do that  yeah that is uh to prevent a cyclical movements   of data that is why we need to uh this is ignore  so we have this and that's a list of builds so   it is one too many so one of these people  you know have many of bills so one bill one   day period you're gonna have many of build um  period not a bit period but build object okay   now let's go to the next one and here we want to  have the mess build us or the mess um model as it's going to handle only bills which are ready   which are available for that month  okay so let's create that you   add a class and the name is dual Bill actually  can name it the way that you want okay so   I'm using deal you can also change it to how you  want it to be so I'm going to paste this here and let me clear this one from Top here okay  now that is what we have so you can see we   have the ID and up to this build type we have  Bill ID name amount the due date name and also   the paid and also the build type so these  are the properties that you want to have   Now when using sqlite you have to specify the  primary key and also the seeding that is the   auto increment it is not like the EF core whereby  you have to it it knows that anytime that it sees   ID definitely let's go to auto increment but for  the sqlite you have to specify that and you have   to also specify all the relationship the types  okay you have to do that so now we're done the   last one is the history so as you can see from  here from days up when you go back home you can   see we have the history down here deal is going to  handle the current bills we have two current base   yeah and that's the deal Bill okay now when you  come here recent bill is going to handle by the   history and that is what we are going to work  on so let's see from the last one and you know   that's going to be that Bell history model so  let's create a class known as the history model and now within this class you want to also have the table as Bill history I want to have  these properties as well and clear this   okay so when you check Apple history and on the  deal bill they are the same okay but we're going   to use each for a particular paper so that  is why we creating a separate tables for that   all right so now once you're done let's save  this now the very next thing that you're going   to do that's going to be the third thing that  you're going to do here is to create our save   it so let's clear all this close all tabs now  let's see if the services are what you're going   to be using to make a call from database now so  to get it into the database so let's see for that   um and solution let's create a folder  also and our last name it add services you know service has to come in with  interface and implementation so let's do that   and here I'm going to name this as IBO  service you know there's an interface   let's create the implementation  class and now this is beyond service so with this interface what are the method that  we're going to be using here the very first   method that we need to use it is less than this  to public before we forget let me just clear this so the first one is going to be on the build  interface we have ADD Bill update get Bill   and now delete okay now I'm going  to period let's include the models now you see we have a problem here because  it is saying that these are the abstracts   ETC let's set it up VR fabric  class oh this is a class so   this must be moved from the class  normal class to the interface so public so this is an abstract  classes so you have to be here all right now let's include the models reference  so you have this set now the first one is a bill   the second one that we want to add here is going  to be the build period so build period is going   to allow us to add periods monthly weekly Etc  because you see that here we're able to add this   bill period and that's what we are creating  this method for the last one manage bill the   manage bill is going to handle the aspect of this  generating bill getting this period IAL getting   recently uh bill payment and Etc okay so that is  then the last one manage bill all right so we see   that each has a list or it has a single object  or model that is has to return as a return type now you have the interface set let's go to the  implementation and now here we are going to   implement it here so for this service the first  thing that we're going to do here is we're going   to create our own Constructor and now with our  Constructor we're going to create a method in   to get database connection for us in case it  is not created then it's going to create that   so let me just change this now we enjoy  this sqlite is in connection from the   package that we installed we have to create  this method and now we can create this method   by using a private async void method  because it's not going to return anything   so we're gonna use that let me just remove this   so you see we are creating four tables here  build table a period And as a bill history   okay the name is a bill so I'm going to name  it as demo deal all right now once you're   done with this let's first have the service of  the bill the first service here is to add bill so Bill service we add the bill object  come in here if it's not now then we insert   and you can see the return type of an insertion of  Isaiah this sqlite is going to be integer so you   can see we're going to set the resource here as an  integer we check if it's greater than zero meaning   successfully is settled then display this else  error all right that's going to be for the inset   we have the next one for delete if I want  to delete it I can use this method to delete   very simple I'm going to return this now what  of if I want to update it's also very simple we   we return this code string and also a message  here so this is going to be that string and so   it is going to be the the number or the integer  that we are returning and here we can say update   this bill here is coming with an A bill that  contains the data then we're going to update it aside from that we want to get Bill  async so we want to get all built and we can do that with just  three lines of code like this   get releasing here because  you are getting built by ID and that is what we are doing here  because we added when we check this bill   that is this bill you see we  have um a relationship here   so to get the data corresponding to that  record we're using get with children async   and then this year works with this sqlnet  extension async.extension okay so you need   to add this name space all right so we have  this now let's have a look with the last method and the last one that is a get built so get a  list of Bill and you also get your children and   now passing the recursive password through  return the result okay that is for the bill   now the next one is get Bill history  so how do you get Bill history it's also quite simple we  can do that using this method   so get all lists from this table build history  table and I return another one which seems a   little bit complex here it is the next method that  we're going to work on that is get do you build   so with this get deal bills what is it  going to do let's see from this next line   less of this method here now when we go  through this it is returning a list of Dubia   so at the end of the day we must return a list of  this double table okay now let's see so we first   have to prepare audio bills into this debut table  remember that we've created a model for this table   when you check this DB model you can see we  stated that the table supposed to be due built   so we are saying that prepare audio  build are all built into this table   which are waiting for payment so example like this  all these videos they are waiting for payment so   they are in a due build table they are waiting  it's not to pay it comes to this build history   so prepare all them now once we did I reset we get  only the active ones you could set a bill but the   build you could pay for two months and decide  to stop it in such case you have to update and   set this to false if it's not active you're  not going to be counted as nothing is active   as part of it so we check if any get and prepare  monthly bill so here we are taking only monthly   bill although we have weekly we can add yearly  you can add daily Etc you can do you can increase   this you can customize this the way that you want  okay this is just for a lesson so you're going to   do everything I know it's a mini projector as  well we're taking only one period that that's   going to be the monthly we get all data which  have the period name as monthly you know here   we are linking a connection and that's going to be  the relationship we can get this because we added   this get all with children async we can have  ourselves to any of this which are for monthly   so when you check this when you check the build  manage build you can see we have the bill period   this period is from different table but because of  this get all with children async we can now access   them like this so we get all in case there's any  we are going to look through when the count is   more than one or even one you want to look through  the list and I are going to check if the date meet   okay so if there is date it's equal to the  starting date of that bill plus one month   dot to short this string so we checking let's  say today's date the bill is set up to monthly   so it's going to expire that's going to end or  due next month the same day so when you add one   man to the starting date and if it is equal today  meaning the bill is due today so you have to pay   it from today onwards so that's what you are  doing so we are saying that in case it is true   this means that bill is due to be paid so we're  going to prepare the bill and answer it to the   bill table buy first check and see if the bill  has been already prepared from the deepest table   so we check if it is not there already  we're going to do that then we can check   that by using this bill ID equal to this bill  ID so in case this bill idea is found in there   meaning it is already you want to skip bank is  it is not there then that's what you're gonna do   we are going to create a new deal object then  we prepare or populate the build object here   so we get the due date equal to the current  date that is asset plus one month so anytime   that the bill exceeds or the duration is due  it updates or it generates a new bill and I'll   add one month to the date of that bill so  that the next mantle is not it catches up   is going to add another amount to it so it keeps  adding add-in so you're making it as a recursive   we prepared over here now when setting up to  the deal bill you can see from here that the   payment is off not the payment is off the  payment is it is not done so it is unpaid   so we set the page to false because  that is we're going to wait for payment   as soon as you go out there and pay  when you come back click on this page   and it's going to move to various recent one as  paid okay so when I insert this is the need bill   so insert it over here and there's  a new build to this debut table   and now when you're done with that update the  default deals starting date to the next month   so that is what we're doing here from this bill  you want to get the ID of this current one and   I'll create a new bill update the the amount  right here to the next month and I'll save   and I'll delete this default bill so you  know we are preparing a new one so the old   one here we have to remove it to enable us  to keep one record at a time no duplication   okay so that's what you're doing anyway they're  going to return this list of DBL so this is   going to get us this is the there is the core of  the application okay that's what we're going to   use to get everything that we need okay so now we  have this let's have a look with the next one and   that's going to be the get built period so get bit  period is very simple and this is going to handle   the period so get our period and our 10. now the  next method article bar here is going to be the   paybill so in case I click on this this button  what should happen you want to call this method   and I'll coin this method you want to get  this from database where the ID corresponds   while coming in in case you have any you want  to prepare and now set this build page through   after that we want to delete the old one and  I'll insert a new one that's very simple so   I could see that we are inserting the new one to  the history and I'm deleting the old one from the   Dual bill that's what we are doing if you're  going to take this results bill it is coming   from the due bill so as soon as we click on  delete it is deleting from this debut table   if you see this object here that's an insert  is coming from the Bell history that's not even   said it is inserting from this bill history or  inserting to that table so once you're done with   that then the next one is let's have these two  that's the add period in case I want to add period I can do that by using these two  method so connection dot add inset   insert period and also these are the method and  now get period the same so get our period as well   okay so now we have this let me just open  it in case you couldn't get that after with   this you're not going to be using this for  now so maybe we can decide to clear this   off and let's maintain it maybe you can use it  also all right so I'm gonna adjust close this so now our interface or our services ready the next thing that we have to do here  is we have to register the service so you have to do that in the my program.cs file  all right so let's go to this my program.cs file   and now let's grab this let's now  reprogram so go to solution Explorer Mario product CS file and I'm in here let's restart the service as the interface  and the implementation class control period   let's include the reference all right so it seems  that uh Services being created and also injected   or registered what is the next thing to do  so we are on the move of these view models   and our views so we're going to create  our view models and our view for that   the first one I'm going to create  here is going to be the the folders   so solution let's add two folders in here  the first food that's going to be views second one view Motors now let's create the views so here the first  view that we're going to create here it is ADD   um period period page okay so let's create  the first view for this if I click on views   so you want to create a form whereby we  can add periods so the name is going to be add build period page.xml and once  you create that we have to create the view model as well so we go to this view model  right click on The View model and I add a class   and the name is going to be add  build period page view model so when you come back to the  add period page we want to just use so let me just grab this and in here I'll just paste this and  what I need here is the namespace so I'll just have that and  I'll just replace it with it   okay now just copy varies and I'll change the  references that's all and just clear this off   and there we have that but what we are  doing here is you know we are using and   syncreasing components so we have to add  this for input layout for pop-up data grade   and this is for the view model that we just  created so we are adding it to the project   there is a title that we are here to create now  in here we have a Content page it is so dialog   so you want to pop up a dialog  so we can add the period name   and then you can see the test here it means add  period all right next one is we are using a grid   and with that grid we want to display only the  period name so mapping name is for the period name so that's data grade that  result from the syncreasing   and you can see we have to bind item source so  this has been period and all these are the auto   generate column mode to none sorting mode and Etc  so all these are features that we can add to your this year great okay what we are focusing  is the grid column test The Binding of the   mapping name here it is period name and now  the test I want to be displayed a bit period   so when you check this build  a sync that's a bit model   you see how the period name here that are  going to be the period name so be a period   check to see we have period name  that's what we are buying into the view okay yeah now once you're done we're going to display  this because when you take this you see   that from this build period we have only one  column and that's what we are specifying here   when we check this SF pop-up we want to  have a frame of horizontal one and now we   are creating the build period object we want  to assert only name and a button so check this   add period display only one text box  and a button that's what we are doing   now aside from this what we're going to  do here is let's buy this view model into the application or the contest so right  click on this and I'll go to view code and any other space this let's copy this you can change this okay now you can see  this is the Constructor that we are creating   and now we are injecting this period okay that  is a view model that we are injecting here   and when the page loads we want to as soon as the  page appears you want to call a method now this   method is going to get us a whole list of data  or the paper that we have created in the database   so we are here to create this method as well  all right so let's navigate to this view model and now in here let me clear this off first now inside this um add bill period remodel we  have to first create a Constructor for this so that is and we inject the service and now we can set up a name like  that as well and build period maybe with these two we can change this  level and now here it is inheritance from   build base view model let's copy  this let's go to the same view model and now let's add a class as buildbase vmodo  the reason why we are creating this view model   is all the the property that you're going  to be using them often we put them here so this base build-based view model is going  to handle just an observable objects and   that's the class that it is inheriting  from and also we have the title set   all right so let's go back to the view model here  control period let's include the service here   and aside from that what we are doing  is we want to create some properties   to display for the header title The Shape Up  and also the build period object to control   period let's include according toolkit and after  all this you have to include the object itself   so that include this model and you want  to create a list to handle the collection   as soon as you get it from the database  you want to this to handle that we will see we created a method in the view and  that is so dialogue if you actually can remember   from this this button it's not as I click  on this toolbar so I want to check here   because I have these two bar here if I  click on this I want this that was to pop up   and that is what we are doing so  this is going to make it pop up   let me create a naming stance of this object  build period object now if I click on save   so when I'm done and I click on this save  you want to handle this with this method okay so call that service  and I'll save it in there   and now pop-up show to force when I download  this period load the data here so this data it   is what's going to be loaded so we can have access  to the letters not the letters the the letters   data that we have added the records and also  all the old ones as well so there is a method   that we call as soon as we launched this you're  serious load period command we execute this okay now let's save this and unless they can be  put and see if you have any thing to correct all right everything is set here okay all right so I believe everything  is set but you see we have some   errors in here that we need to  rectify bunny contest go to this and the party partial class okay let's take up these two so now we are done with this what we can  do next is we have to restart this and it   um in the Mi 300 CS file so let's  do that we go back to the same IU   program and you know we're going to do  a whole lot of registration in here so   let's first handle this okay so we have added  page view model and I saw the the page as well oh so let's see we have to include we have to include the namespace instead  of generating so this let's check it out okay now my program.cs file and okay so let's add it and let's see so we have class here all right so okay so control  period let's include the view   model and also here we have to also include so add build period let's see yeah so include this all right so once  we are done with this you can just go ahead and   you can go to listen Explorer and when  we check this uh uh appshop.xml file   instead of this let's set default page to  that so we can test it and see so dot views and now let's change this to add beer  period page let's try this and see okay so you can see it is ready now it is in a  dark mode so let me change it to light so you   can see everything Philly Philly all right so  let me change for the default mode to light and   that's going to change that yeah so obviously we  have the period and nothing over here and you can   see we have this button as ADD period as soon as  I click on that let's add the period as monthly   now click on Save and wow so you have the big  Point let me just unload them quick and then   click on continue okay so we have it now it is  ready now let's move on to the next one so let's   close this and the next thing we're going  to talk about here is to add this bill so   add Bill Let's close all this and what I need to  do here is first you're going to create the page   so let's create a component  and that is going to known as let's say add bill so.net marry content page and now that is an ad  build page so click on OK and click to add that   now one year then we know we have to create the  view model as well so let's do that quickly we   do that in the view models add a class and that's  going to be view Motors let's add that let's let's   work on the the ads the the example of page first  and then in here I just have to grab this and you know times UI sucks when writing or  creating UI it takes a little bit of time   so in order to speed things up you know I  have this already and I'm going to leave   it till I get top so you can guess how much  is this but first go through quickly and so   we can move on with that let me first grab the  class here and I'm going to replace it with this   and change the name the best NASA all  right so let me clear all this from here all right so that's what you are doing because  if you're using the same same facing component   we are adding the input layout and that's  going to be for that uh the test box we   add an editor for combo box and that's going  to be the Picker and we're gonna also have   the calendar and the buttons we have our  view model also added to the contest so   if I click on this the toolbar that is home  you want to navigate back to the home page   aside from that we see we have this form it's a  frame and we have the input so you're going to see   we have the name input name we have the object set  input name and that's the period so here is um a   drop down the rebound this to a list of what bill  period and this build periods here comprise of   the models that we have created now you see from  here that if I click on manage build and Beyond   this what we're going to see here so this is the  ad because you have the name the time so there's   a combo so you're going to have the monthly one  as created we have the Bell amount and that's the   Bell amount is it active you want to have this as  an active and that's the calendar he has to choose   calendar and that's for the calendar so you see we  have the label here two starting date and that's a   label okay they have the Kanda itself and there's  a calendar itself over here now with this kind of   like you see we have this test format indicated  and you can see we have all this as a features   um I'll actually leave the description on the  description the documentation for this calendar   the GitHub another description so please can just  second now you know understand all this over here   this all feature that you can add show to this  button enable paste past dates and Etc so you see   let's set this to true because I want to enable  past dates so you see that it is not here it is   false I want to enable all this and you can see  you can now Swap and select and that is what I'm   using right here enable swap selection can toggle  delay selection Etc all these are features of this   all right now what we're doing here is we see that  we have selected dates as soon as this event of   these changes and the date is selected we pass in  this with uh we assign the selected date to this   okay then here the mode is a two-way so in and out  you want to handle that you have the button now   save and that is a button that you see here if I  pull down here save okay so this is the UI now now   you're done with this UI let's go to this view  model now before we do that let's bind this UI   to the contest first that is a view model to the  contest all right so we can do that from this add   build page we go to the print diarrhea now that's  an adult page.xml.cs file and in that we want to   handle it with this code so we are injecting it so  we can just remove this from here and now control   period let's include no we haven't do we even have  this view model have we created that view model   let's check it up and see so our build PhD model  there we have this uh View mode over here okay now   let's see control period they can we have access  to that no now let's see so we have all these and   we have the name space added and that  is what we need to do so let's add using so demo Dot View Motors   okay and that is what we must have here  but I learned we have we we've cleared this so let's let's do it again there's a there's  a problem with what we copy and pasted so instead of this it has to be like this okay  we we clear this all right so now you have this   RPG model and we have the name added here so  add page view model and that is the name yeah   so there's an add build page so add build page  and that is the name right so we have this and   one which like this when you go  back to this add page view model   let's see at page view model another view model  section with the others add page view model okay well so there's a mistake here instead  of navigating to this page view code   instead of working it over here  well we made that to that side so   let's let's set it to right here straightforward Okay so that is yeah let's let's place it here all  right so add page remodel control period then   we can just go in there and add that so when it  comes to add page view model you can clear this okay let's go back and let's clear all these okay so here as opposed to public that is  a partial class but for now we have it and   then so when you come to the code behind file  control period then we can now use this view   model here inject it and then we're going to call  a method yes load period commands and you're here   to create that method as well okay let me close  all these gaps now we have this when we go back   to this page view model what are you going to  do here with this add page view model so first   of all I can see that it's it has to inherit  from the base view model that we created and so   that's the base View mode that has a bill based  video model aside from that we need to create   um construct of this and now inject our  service so we can do that from this area   and we inject our build service control  period we cannot use the reference as well okay now you have this build object so let's  create this build object so using this observable   property on top and that's going to be the bill  so let's include the models too and also here   that is where we have to work on the calendar  so when the calendar changes you want to handle   it with this code so when the calendar changes  handle it here control period let's include this   Let's see we have these sets and everything all  right okay so when a calendar date selection   change you want to handle it and you see here we  are using unselected date change so we're gonna   come in with a date and I'm going to set the date  here to the current value that I'm creating and I   can see from here we are tap casting it or we cast  it to date so as soon as I select the current day   today it's going to get me over here in fact in  the days it's still going to handle that as well   all right so let's um select it let's get  selected bill period from the the query as   we treat the ID Okay so we can also use this to  get that done so you can see from here that here   we are going for selected period from the  combo box you know from this if I click on is going to handle that okay we sell it to this  period ID and the next thing is we know we have to   create a list of objects for observable collection  so we can get the list of this bill period and now   there's a method that we need to create and  that is what on on appearing page closet so that is load period so when it's like this page  you see it call this method loads period and   that's going to load the period when the page  loads you're going to populate the the period   here as you can see from this so we get on the  period from the service and I reassign it to   the object here that's a list that's all now  if I click on go to home page what do I want   to do I want to just use the go to async and I  return to the home page peacefully so I can do   that with this method you can see I'm just  going back to the home page and now this is   a build pixel control period let's include the  reference and I still have a build page you're   not having build page yet so we're going to  create it soon and so for now we can just comment this and let's see so if I click on this  if I click on Save what do I want to do I want   to save the object I have just created so you  can see that you check if the date is not now   and the period is not equal to zero you want to  do that and when I'm done if everything works   well navigate to the home page so can you now  have any home page so we're going to maintain   that I also want to alert and display message in  case you have any error or any issue as well okay so let's see now we have this set so let me just  recommend this well then before you forget it okay   so we have this set like that and  now in here we can even use the   deconstructor mode so we can deconstruct  it and I'll get the code and the message   so instead of this we can just have the  message as you can see from this yeah   now you have this set so it's ready what we can  do here is we have to also register a view to the   my program.ts file so add build page and Edge  corresponding view model we have to do that as   well so let's do that from this solution Explorer  my parent.cs file and I'm in here let's add them   okay so this also set The Next Step that we're  gonna do here is once you have this let's create   the home page first or we are already done  here let's see what we need to do we are   going to create a next view we have created  the add build page we have created the ad bit   period now we need the build page and also this  update build page in case I want to update it   what should happen Okay so let's see but before  that let's create the build page first so let's   do that here control period so listen Explorer  and we go to the views let's add this new item   and net marry content page make sure you select  the XML the name is the buildpage.xml and now with   the build page what I'm going to do you want to  display the list of the bills that have been added   you know this what you are doing if I come back  here that is a list so that's what you want to   display okay so in here I'll just paste this and  I'll just change the class see this and now we are then let me clear this so you see from here that we are using an SF um  data grade as you can see and this is interesting   data grid and I just have to change the name the  project name to this and you have to also create   this view model but for now you see we have this  um two bar and that is a ad go to add bill so I   want to check here if you say add Bill if I click  on this add Bill a pop-up must happen or must open   okay and relax The Navigators to a page where  we can add a bill so that's what we're doing   good so if I click on manage builds and if I  click on ADD bill I have to have a page so I   can add about this page okay so that's what this  method is going to happen this button is going to   do now when I go back again this is the data grid  and that is what you're going to see over here   so these are the mapping names name amount bill  period dot period name so since we added the the   with children we can now access to the reference  or the link data the foreign key data here   and you have the starting date we change the  format and we can see we have this if it's active   set right here as active so that's the status if I  go yes we have the bill status here okay now let's   create a view model so before you create the view  model let's right click and go to the code and   let's try to do the abundance first so Bill page  view model or we go to the bill page.xml.cs file   and now yeah let's grab this now let's paste it  here so we're on AI to create this view model   and you can see we are going to cover this method  that's not the page load as well so let's quickly   do the view model creating solution Explorer and  view model right click on this add a new class and   that is BL PG model now control period let's add  it to this Ctrl period now we can include it here so there's a method that we are going to  create okay now let's go back to the build   page view model so in here you can clear  all this now with this build page viewmodo   what I'm going to do here first is  let's set the name and the inheritance   so reset name inheritance here aside from that  we're going to create a Constructor and inject   our service so let's do that from this you put a  Constructor here enjoy this iot service control   period we can now use the service here and the  title is manage builds because when you check here   manage builds aside from that we are going to  create this so get a bill or get selected bill so get their selected and manage it so in  case I click on if I can see from here that   if I click on this watch here let me just  if I click on this it asks me what you want   to do that's what you're doing here okay so  let's control period let's use this model and   let's do here is we are going  to perform the partial method and this is a partial method let me as you  put them close so you know that they are in   a relationship so you control period we need to  add this component model as well and you have to   create this method you know it is accepting that  build object and now we're going to pass the build   up here to this method to manage it and now that's  the the manage method is Benet so let's put it   beneath here like this so this is a manage method  it comes in with the value and this value is an   object out of this bill so we're going to  perform choose option as you can see from   here choose option like this delete and edit  if I click on cancel nothing happens you see   since I click on edit it has to navigate as to  this page and now you you're going to use this   navigation parameter as a dictionary and I'm  passing or send the object here to that form   so there's no need for us to make a query  from the database also again the object   has been sent so we send the object to the  form straight and now edit it now we edit it   after editing we can now call a service  to update it and navigate to this page   so if it is delayed then confirm but here if I  click on this delete I actually want to do this   and that's what we're doing here if I click on  yes media science yes then I want to call This   Server delete sync and I when I'm done just return  load the bill so load build method has to come so you know after the late 10 we have to get  a new one because it has to remove from   the database and get a current one so as soon  as you click on load deal it's going to call   that method and now get a current data that we  have okay so yeah let's create a build object   and now it is build object we come down  here and we create this load method   so with this load load build you can see that it  is getting the whole bill again from database and   remove the one that that has been deleted and  I add this the the range here like if there is   an observable range collection because of this  mbvm helper by James montemagino so this so you   can actually add it instead of looping to it using  four each no you can just add a range to it ahead   and the next thing to do here is if I click  on go to BL ow what should happen so that's   the next method here so if I want to go to BL so  that's the add bill so if I click on add bill what   I want to do I want to add a new build that is it  I'll build add a new bill analysis go to this page   all right so we seems to be done with this now  let's have a look with the update you know if I   click one I want to update this it has to navigate  us to a page normally um we can also um use the   same ad components the RV that we created you  also accept to modify and also to add LT can   also create a new component for that okay so let's  create a new one today we're not going to use the   same one let's create a new one and it's not the  same as the ad PL view all right so let's see that so you have to create a new view here that's a Content View and now  it is content view we'll go to the viewer   right click on this and I'm going to add  a new item this new item new um.net Marie   content page make sure you don't forget that and  now in here we want to set up this update page now you know once you're done with this  you have to also create 8 view model   so we can do that from the viewers folder so  view models for that right click add a class   and on the class that you're going to add here  is going to be view model update view model now   as you have this you can go ahead and inject it  into this code behind far right let's go to code   and now in here we are going to inject it here  so let me just grab this and I'll paste this   so we have this view model um added already and  as a matter that you're going to also call I hope   you understand this because you've been I'm  going through this a couple of times for now   all right now we have done this what can  we do again let's see if you can register   this and so before you forget because you  have to register this update with the view   model and the page as well so we go to my  program and now we have to update this here   all right so we did not even add  the build page so let's add that all right so we have this set now let's go  to this um update bill then go to The View   and now from this view this is what  we want to do we are going to just   it's the same as the first one as an ad component  so the update where can it be founded in update   right click let's go to the view okay so that  is the view right here and I'm gonna paste this   and I just have to change the class  over here to the current class and I can now remove this peacefully okay we have the view model here set and what I'm  going to do here let me go in there and grab this   replace the the project name okay you can see  Verizon and editor input from SIM switching   calendar button view model and editor type the  same thing applies to when we're adding the bill   you see we use the same thing over there all  right so the control period now we have created   this page so let's include them so we can have  this soft all right so with the update the the   thing that we are doing here is you know when  we check this The View we also setting the same   thing object period name now he is saying  this object period name it's going to have   um a value the hands you want to put it to the  hand side so we can know what value or what   um object the days are select when creating the  bill but user can also select a new bill as well   we have the save object so let's  check it up here if I click on this   okay edit but yeah it navigates your page  now you see if you see that man selected here   and that is a hint that is holding this one  since I click on this you see I can have a new   one selected I can have a new one as a selected  answer because you can see there is the old one   and the occurrence one after days and everything  set and that is the same thing that we are doing   okay so here now let's go to the view model  and I'll work on that so this is a view model   so from this view model you know we have to accept  the square parameter because you know that here   when I click on delete or edit  it is coming in with a dictionary   which contains the object that has been  clicked so we can put that on top here and let's set the the header here to make  it in here from this the base view model   we have to create a Constructor and now inject  our service I hope you know this already   so we do that here and control period  let's include a service name space   now let's create an object which  will handle this object coming in and that's one that we created so build control  period let's include the model reference   and with this control pre-read we're going  to include this component model as well   now let's get selected date so in case I select  a new date let's get it here so again selected   it from the incoming bill as a query parameter  this bill coming in has a date selected already   you want to get the date Here and  Now put on to this selected date   so we have to create this object let's put it  down here so if this object is changed what are   we doing you want to notify the view so we set  this object that's as a date to the current one   that is when this changes update this  and I set the current value to it   the next thing that we're doing here is you  want to get selected period as well because   you know the exam may decide to change the period  from weekly or from monthly to weekly Etc I click   here I can change this so initially it's monthly I  can change it weekly so you want to get the ID and   that's what we are using to do all right now to  prepare the period we have to have the same list   as we did so let's place that  here from this example collection   and I will create a method that will be called to  populate Valencia fast card is period service and   now I'll publish this added to this this list okay  that's what we are doing here is if I click on   go to go home what do you want to do let's  see maybe I'll lie to you I won't content with   editing again and click on cancel so cancel it  has to go to the home page okay so cancel it has   to navigate to control period let's include the  views namespace and if I click on update or save   we have to call the save method or the  update method to handle that so save   object and we check if the date this these are  the two strings we can set this to dot now so   delete is now okay we can do that and or  we can even add can we even add that value it's now they're also going to work  but I think you can say like this   okay like this it is not now they want to record  this update BLS saying passing the bill another   outcome here does where is navigating or display  the results or display the answer or error in case   there's an error if there's no any error go to  the home page all right so the update is now done   you can save this now the last view left here  that we need to work on it is uh the home page   okay so the home page it is what's going to  get us this this View okay the deal because   the current no that's the recent payment one  and also we have the amount displayed on top   so we're gonna use to get this foot like this  we have to use the community.mary package that   we installed we've done that already so we  can now move on with it now we have to create   um that is a view and I'll name it as home  page so we do that here solution go to views   right click let's add a new item .net Murray and  this we say this to homepage.xml click on that   now in here there are three things that you're  going to do first of all let's have the content   page set so I'm going to clear this let  me paste this here let me just grab this   that is a class and within that  class I'm going to place it here   that is a class can just get rid of this one okay we need to create a home we need to create  a view model for this but don't worry you know we   are setting this you want to sell that nav bar is  visible or set it through so this bar is visible   this is a bar we set the color to that reset the  background color of the whole page to this color   I'd like to know the name but that is a color  code right so you can just get a copy of this   now if you know the color code as well if  you know the name you can also put it in   the description in the comment area but you  know the name doesn't matter what matters is   the code so when you get the code you can now  move on with it and that's what you have done   alright so we have the title uh bound to this  now within the pH we let's close it first so   we didn't get any error once doing it we  can close this content page peacefully   we need to create this view model okay to stop  this and this is Marie app General so let's grab   this let's change the reference here and that  to continue with this we have to create a view   model so we can have this error free content  page view model and now let's add a class   and let's paste this home page view model and  now this I believe you can just bound this   so let's go to the view page and we can actually  call a method in there so home page right click   let's go to the code and in here last paste  this yeah so sub now let's go back again   and this should be off yeah okay so the very first  thing that we are doing here is we want to work   on this you know this is the UI so you are thumbs  it takes time to do it and um I'm just gonna just   do copy and paste and I just go over it and I'll  explain to you the first one to have this first so   with that we are using this is a Content Behavior  you know we have this so I'm going to paste   this and there's a content.behaviors we set the  status bar color to this and because we install   this community.mary that reason why we're able  to do that so if we check here there's a color   okay the top here where we have this indicator  there's a card diarrhea section using this code   aside from that we want to use a scroll  View so let me put my scroll view in here and now in that you want to have  the grid so let's use a great system   and put that in the scroll  View let's close the grid So within that grid the first one that we're doing  here is you want to create the horizontal section   of this and we want to display this this one okay  so this build tracker so we can do that with this so this gonna get us that the second  one that we are going to do here it   is a frame for this so when we check here  this Frame and we can use we can grab this second part yeah okay now we are buying this  total we are setting the extreme format into   this gonna see this so you can change its  dollars to a pound sterling continue to   any any currency that you want to do okay  you can do this as well but you're in Ghana   so you're going to use again I see this  and that is what you see here all right   so we are done with this you know we are  using a vertical layout so first one on top   second one minute we change the font size 20.  bigger than the first one that's all very simple   okay now the next thing is we are going to work  on the first grid and that is this one this um   dubules so here we have our deal so these are  just information that we just pass on the TBR   the next one you have a collection View and  that is what's going to look through and now   get as the current like this in this form  where we can just swap like this so here   we use this for that now you  see from here that we have collection view here okay here's the item  Source the item layout and now the layout   here it is horizontal that's the reason why  we can do this and we can also go back front yeah because of this now we have the data  templates this is the item template first we have   the data template and I really specify the model  that I want to use and that's a deal build model is it is a frame and we set it using the  horizontal stack layer for each and we pass in the   test they balance you the day the amount the date  due date name the build type and also the name   okay now aside from that you see we have a button  over here now this button here means I'm paid so   if I click on page you want to make this reference  so yeah the reference type is ancestor type   reference and you know we are referring to this  home page view model and a button command that   we're going to create as paybill command remember  we've created this command in the service already   so we have that service command there all right  so aside from this let me just collapse this   the next one that we need to create it is also  frame so this Frame what is it going to do   when we check this it asks you recent payment and  that is this one so the last one is Loop into the   same class in view but let's run instead of the  Dual list you're gonna have the bill history list   it is this is less the same thing as the earlier  the first one this one so it is same as this just   that here we change the Bell history and the  model will change to this Bell HD model instead   of this new model all right so this these are  the design that you want to have here now let's   work on the view model so when it comes to the  view model I'm going to close clear all this okay now from this home page  view model we want to First   create a Constructor and also inject the service so control period we can include the service   this has to inherit inherit from the  build-based remodel so let's do that also we must have a list  of collections that we need   once you also have a object math 200 the  total it's a decimal and for the two-time bill   and these are the objects collection so  control period let's include the models   and these are the models so you want to  populate them over here so you can see we   are getting all the three tables here and let's  include the museum let's include this as well now the last one left here  is we have to load this data   so we have to create a method so we can  load this populate all the data here so in here we have this method and on the first one  you can see the load data we get the deal bills   here we create a new object out of this and as  you can see we are looping through and now we   want to get a month name so using this method  to get the month name and here I want to get   a month number plus minus one so we can have  the the bill referred the other month they'll   be referring to you can see the amount must be  the previous month so we subtract one from the   previous month or the current month here if  it's October meaning reference to September   on we do that and we add it to the bill and now  here the total bill is we're going to sum it so   we sum all the amount and our display already  come to this get bill is thank you so you are   getting all the builds as well from this and I  return when it comes to build history we get the   whole thing from the bill history and now we  see we also do the same thing okay I'm gonna   add it to the the list here and now that is all  the last method that we need to do so let me just close let me hide this the last method has  a pay bill so in case I click on pay bill   I went and paid the bill so here to set or  to notify the app I need to call a service as   publishing pass in the ID and now when it is true  when it is done it's going to be true and load   this data together the current date yeah so all  set and done what we're going to do here is let's   register this so we have this home page let's go  to this my program.ts file and let's register it solution Mario program we have the update  one so in here let's put on this as well   now let's go back to the app shell drama.cs and now let's register the  routing so we can click on to navigate   I'm sure dot xml.cs down here add  this now let's include the namespace   and we are good to go but I  know you want to have this   this bar that's a flat out you can see my plant  isn't beautiful at all I didn't design it okay   so maybe that'll be fine I'll forget but here  we want to focus on our pizza so let's see from   that end we go back to this app shell and our  other option I want to create a simple fly out   and that's what I want to do very simple one I  believe you can even do it yourself right so in   here we I'm gonna just replace it with this look  at home page set out to home page and we set this   to add period and also build period right set is  done control [Music] KD are fixed now let's close   all tabs save all and now let's build this project  again and see if everything is working as expected   now if it's a seat then we're going to run  this application and it's going to work all right so you can see from here that  it is succeeded and what we're going to   do here is you're not going to use the window  machine anymore let's choose Android emulator   and let's run on the Android and let's see so  that is the old one and we must have something   similar to this okay and that that would be  all so let's wait for this to get started   now while it is it is loading if you haven't  subscribed to this Channel please do that you   can also give thumbs up to this video in case  you you like what I'm doing just do that okay all right so you see from here that our  app is now ready as you can see from this   this is a new one that we have just created and  built so obviously from here I do bills and recent   bill payments everything nothing over here and  okay so yeah we did not add a fly fly out so   let's do that from this page and that is the app  show that is example of page showing some of this   you want to set this to you enabled Okay so  there's going to be fly out I saved that and   now you must have this that's why so let's first  see let's check it up and see do we have a period so we have to add the period to  this so let's say this is monthly all right so add now let's manage builds and like  we see we have all this so let's add the bill okay so this is electricity and I know the type here it is monthly the amount  123.99 it is active now for this it is we are in   let's go in for you can see the current month  here it is December here so we want to choose   Maybe um in case we choose November November 18th  it's gonna be like one month plus November it's   gonna be December so it means that the bill is  due for payment so click on Save now you see it   is saved so build period is 18 November right here  so one plus this is going to be December 18th so   when you click on home you must have that bill um  displayed here as paid bill as soon as we click on   the amount is for November and this is the date of  due date there is an amount since I click on pay   it has to move and then pop up over here because  that's very interesting one as well so that is it   for this video If you haven't subscribed please do  that if you like what I'm doing give me a thumbs   up as well you know I'll leave this Hospital under  the at the description to the GitHub account so   you can just go in there and clone the source code  and also review if you haven't subscribed please   do that give your Times today's video in case  you're okay with it okay and yeah you can also   buy me a cafe in case you okay you you you you  like what I'm doing and want to show some gesture   to me I have all this link in business so you can  do that as well all right so that is it for this   video thank you so much for watching and I believe  I'm going to catch up again in the next video

Channel: Netcode-Hub

Views: 471

Keywords: scaffolding, assign-role, mobile apps, maui app, mobile app, android, map key, google map api key, carousel in app, list view component, using list view, material designicons, google icons, google fonts, filepicker, fileuploader, camera, base64string, play video, play audio, using MediaElement, media element, dontnet ecommerce, mobile ecommerce, desktop ecommerce, web api, ecommerce, maui ecommerce, food recipe app, bill tracker for mobile, maui bill tracker

Id: 8xr6nx_7r9M

Length: 103min 26sec (6206 seconds)

Published: Tue Sep 19 2023