.NET Maui Apps | Generate Barcode and QR Code in Maui Mobile and Desktop Apps

Hello friends and family welcome  back to netcode Hub channel   this video is actually going to be a short one  and also a quick one as well and we are going   to learn about how to create a barcode or a  QR code and Maui applications whether it is   desktop application or it is mobile application  now you know when you create one code base it gets   can I text you the desktop application section  also mobile app section so you have your code once   and all these platforms are going to have their  separate code but the same outputs so example is   what you see on the screen how to generate this  barcode and also how to generate this QR code   actually I've created a model and I've created  a under the nvvm architecture so I have a bind   two-way output now this is a test box another test  over here as soon as I decide to type in the test   it gets this new code so make your or download  any barcode or calc scanner and now I'm going   to pass in this test this code is going to change  so once I type in this test also it's gonna change   so scan this now default one is kind what you see  here that's what you're going to see next code how   the center applies to this barcode but I can  decide to change it here so if I want to have   something like uh please okay so just subscribe  like to see it keeps changing so one one is canvas   you're gonna have please subscribe Also let's see  let's say this is YouTube now if you see it keeps   changing so the current the value here it is what  you see it over here so I've just kind of right   here on my phone and I can see but you can see it  so it is a phone to scan this and you're going to   see this output so how do you create this in  mobile applications or desktop applications   it is a sample by installing a nuget package  and start using it so let's see let's see how   to create it now first of all what you have to do  here is to create a blazer sorry that is a Blazer   I like to say blazer because I used to create  Blazer applications now create a net marry project   and it could be then.net the version will be seven  or eight at the preview it is accepted okay so   let's start um let's create a project and if you  know how to create project click on the file then   go to new project then select dot net marry  app then click on quit to get the app created so I just pause the video right now click  everything that you saw at first So currently   as I speak that is what I have now that's an  empty app so let's all get going and let's do   it step by step okay so at the end of this video  you can be able to generate a barcode and a QR   code reader and any type of code that you want  to generate for your application you can use that   so that is the code over here and I just have to  put inside one side I'm just trying to run here   and that is it okay so this is what we are going  to do first of all we have to install some nuget   packages and that is what you need to use um we  have to install two packages the first one here   it is the community toolkit dot mvvm so that  is it because you want to use the mbvm model   view V model architecture you don't want to use  the event driven so let's install that and aside   from that we are going to install another nuget  package and that is what you're going to use in   this to generate the ql and the barcode so let's  go to solution Explorer over here and just right   click on the dependencies go to manage nuget  packages I have to reset this before the last stop   the bargain dependencies right click and go to  management get packages now when it comes to this   installed you know I have installed them already  so I need to install them again but if you if you   haven't you then have to do so the first package  that we have to install is the camera dot Mario   so this is the first one that is we're going  to use to generate the barcode reader not the   market reader the barcode itself now after that  you have to install Community toolkit.mdvm model   view V model that is the code behind file  and it's going to handle our message for us   okay so pause the video and put them over  here another brow stop click them to install   when we are done that's the first step the  Second Step here is to include a namespace   or base downloaded app over here so first of  all let's use the first one so we use an s   ml then I'm going to use it namespace okay  so with this we can give it name as this is   camera barcode so c b for the barcode then  we're gonna say equal to then the name space then this name space you know use this camera  dot marry and that is what you see over here okay so that is this now once you have  this that is what I want us to do first   we have this added so let's  go and create our stack layout so these are stack layouts now with  this stack layouts I want us to have the test on top so let's see orientation  retica and now in here let's have our entry so this entry let's have a test as so let's  say entry there's the entry okay or enter test so we're going to do the binding but  not now let's have a wait requests   so let's say wait you're gonna have weight  of 200 maybe height request of 50. so when   you save this and now when we run this  let's see the test that we have here and maybe with the stack layout we can put this  in the middle so we can say horizontal options you can set this to middle let's wait because it is loading  that is why you're not getting this   so horizontal options and that is this now we see  we have our test over here so this is our test   okay so we can decide to  increase the test size and maybe so horizontal last stop this okay now you have horizontal options you  said this is Center and you set margin to   um 10. that is both left top bottom and right   we have our entry let's set this test box to  300 the next one that you want to have here let's set margin 10. now the next thing let's have our barcode  so I wanted to give you a space here   so here we're going to use the CB  that we used and here we can use   barcode so we use the CB and now here you can  call this barcode okay so with this barcode there   are some few things that we need to configure  here let's give a space here because you want   to put them right away now the first one is  the mood so let's say you have barcode mode yeah that is a margin so we can put from  five one five is okay to increase it or   make it normal for us then aside from  that we can go for the barcode height and we can say you want this 300 and let's go for barcode wait so they're the same Heights let's go for the width so that is a width here and the same 300 now aside   from that you want to grab this height  request exactly same then with request same as well okay now let's  have a background color   you can set as transparent and you're gonna have  barcode for ground and maybe with this foreground   we can have it as let's use Indiana  red okay then we have to get the format so we have barcode format now see we have a  lot of formats here so these are the format   that we can talk about okay so we can check all  the formats here from data Matrix we have ean13   and we have Max code QR code and as you can see  these are all formats so depending on which one   that you want to use but let's use code one  two eight with this then let's go for barcode itself so this is a test that you want to  use so let's say you want to use net code actually have yes and now for this let's set the  margin to as 10. now let's make a copy of this and let's also paste it because you want to use so  let's change this format   so let's use QR code so you can use any format  that you want like or you can specify the format   in a model what about you pass in the model you  pass in the test and we're going to pass in the   format over here as The Binding then you bind  the test as well and you only generate it for us   so we have a default test that's  a barcode now let's save this and let's see what happens  here so let's let's run this yeah so it is it is it is coming thank you all right so it is over here and as you can see  we have this test let's increase the size here and okay and I can now shrink the size okay so now this is the default one  but you see as soon as I pass in enter   something like that's good if we say nothing  happens here because we haven't bound this yeah so how can we do this let's see so I'm gonna use so there no 10 let's say  the Imagine was a 10 now with the top I'm   going to make top part 0 then 10 and 10. I  want to push it to the to top a little bit   so you have a big space yeah so this is okay  all right so here in order to pass in test to   get this code updated that is why we need to  use the mvvm architecture and now you can see   we have installed the the toolkit and that is  the 2k.mpvm and what you have to do here is to   configure it so how can we do the first thing  to do here is to create our mbvn model that is   the model view model so let's create our view  model and in here let's go to solution Explorer   now right click and now let's go to  add so let's let's close this first so right click over here then go to add and yeah you want to  add new class that's this right click   on this project not the solution and  add a class so this class since you   are creating it for the main page then I  want us to do it as main page view model so this page has to inherit from observable objects and it is part of or it is a class from this mbvm   the nuget packet that we installed so we can  clear all this because you're not gonna use [Music]   okay so what you have to do here is quite simple  let's have our string then we can say string test so then let's put in the observable property  over here to create the event change one to   change event it has to watch because you know  it is an observable so it is observing as soon   as it has an update test it gets notified or  it's notified anything to subscribed to that   all right but before we can create this we  see this under class so it has to be a partial   because it is part of the class so we make here  as public partial class so public then Pasha Plus all right so let's see now once you  have this that is that we need to do   we can grab this page view model then  let's inject this over here inside the   the page so you see we have mainpay.xml right  here example and aside from Darkness you have   main page of example.cs and that's the code behind  file so let's inject into the Constructor here   and you create an object out  of it now in between let's say   binding contest it's records you this main page  view model very simple now let's go to the page   but let's go to uh page and register it first so  we need to use toyota.services dot add Singleton   because you want to create a single for the whole  project and you need to pass in this main page I do the same thing too the v-model so dot add Singleton  and yeah main PhD model so let's update the UI so we open it over here  and now where we have the test the barcode so   instead of using this net code as a default one  let's go in for binding but before we bind we   have to inject this uh the view model that we  have created so let's create an X ml NS that is   xaml namespace and give it a name as view model now this view model you want to use name space   and what you have to do here is the name of  the project is generate dots and now do we have three models here because that is the exact page  so we need not to add anything else because we   are in The Roots so let's specify data type  so data type here it is the view model that   we have created that's the main page review  model but to do that you have to first call   our view model first so that's a view model and  as soon as you do that you can have access to a   main page view model so this is a data type if  you don't specify it yeah unless you specify it   right here so here you can specify it so X then  if you have data type right so you also specify   it if you decide not to specify it yeah but if you  specify it here it means we specify it once and   for all if not this component or this view you  must add the data type and this is the type so   the number of these that we have we must add the  same number of data types about that so in order   to skip all those repeated code then put it right  here once admin in space and you're good to go okay so now this barcode let's get into it   and now let's bind it so this Vine this is  what we're gonna do we're going to bind S2 string test so let's do something to invest so you have to bind strength bind in first so strength test okay now you've bounded  to this let's see now the entry here you   must also have this this binding here  so buying then and that is strength test let's save this now let's find this  application and see the output here yeah so our page is now ready now you see we  have no display we have fully there says box   because we haven't specified the the  barcode yet so let's put this here and let's   let's find it so now let's type in something NC  so net code and I could see as soon as I passing   next course what happened so I have regenerated  and that is net code so that's good now hub   so just use your code that the reader or the  scanner to scan this and you're gonna find   the same thing as I specified over  here so this is very simple to create   all the barcode either barcode um  QR code barcode and other formats   okay so it's very easy to do it and that is it  and that is how to do this now when you run this   in the Android application you're gonna have it  at the same thing and you can do it as well okay   so that is it for this video thank you so much  for watching this if you like what I'm doing   give me a thumbs up and also subscribe to the  channel as well and take care of yourself and   I'm gonna see you up in the next video talk about  the difference in um robot development environment

Channel: Netcode-Hub

Views: 944

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, scalffold, scaffolding, migration, database migration, creating models, fileupload, blob, javascript, ef 7, authentication, client-side, jwt, token, role-based, assign-role, assign role on button click, maui, mobile apps, using Event driven architecture, consume web api in maui app, maui app, mobile app, desktop app, create app, barcode, qrcode

Id: j27lihziS3M

Length: 23min 29sec (1409 seconds)

Published: Mon Jun 19 2023