🔴 Recreating Threads App with .NET MAUI - Profile Page in C# UI!

foreign foreign foreign [Music] Google foreign [Music] [Music] [Music] foreign [Music] [Music] okay everyone we are back uh hope everyone's doing well yes I forgot to mute my mic so you can hear my beautiful typing on the keyboard uh it was fun it was good good to go so I hope the audio levels are good hope everything is good with y'all yes we are uh continuing back uh building some applications with Donna Maui and c-sharp uh those xaml here today at least we're gonna see how that goes hey how's it going Tanaka from Zimbabwe very cool awesome good to see ya Andrea Aiden good to see you Chong nice to see you as well hey nice to see you as well in the house uh yeah I decided yeah I should have put the stream a few days ago but then I forgot because I was in Seattle for vs live and won Redmond I guess on campus and that went super good uh in general was super fun we had a workshop or Maui Workshop which you can find here on YouTube uh in more depth but kind of been updated now a little bit and then additionally at a session there's some recordings I met with the uh oops I met with the Wilderness Labs folks which is pretty cool they do a bunch of net iot devices and we did a bunch of recordings and at the very end Brian good friend Brian gave me one of these puppies I tweeted it out this is the Wilderness Labs project lab board which is very cool it has their Meadow iot platform in it accelerometers gyroscopes whole bunch of stuff and you can just plug it in it's got Wi-Fi got Bluetooth and you can kind of plug in modules into it which is super cool hey Nero good to see you good morning yes it is very morning over here that's for sure I don't know if I have a I'm just saying like capturing like a weird part of the screen there we go that's probably better so this thing's gonna boot up it's got this beautiful LCD it's all like encapsulated I guess you could open it up but the whole idea is it's all in one encompassing so you don't need to worry about breadboards or anything it's all like Plug and Play modules basically there we go the LCD is getting up there and then it'll display all of the stuff that it has so it's got all the arrows here it's got temperature pressure humidity uh the brightness levels accelerometer gyroscope on it uh which is very very cool so all sorts of good stuff I'm excited to play around with it get some stuff that I can come with the idea I have some smart thermostat ideas I have some humidity sensor ideas but everything in C sharp and Dot net which I'm very excited to play around with there which is cool Nero says I've been working on a mountain app for the last seven months vertical home stretch should be done another week awesome definitely reach out let me know when it's all done up in the store things like that Nuno good to see ya fo good to see you as well Aiden looks pretty accessible for us with zero iot experience yes I'm gonna do a stream uh with it and specifically I have this other camera that I uh I'm doing a video for but it's called the let me grab it here how do I turn that thing off there we go it's called the what's it called the benqi BenQ idea cam and what's cool about it is that has this big thing that goes on the back of your monitors or really holds it but it kind of just goes in like this but the cool part is that you can rotate this down right so if you're doing iot stuff like that you could really do that and then it also comes with this like zoomy thing and you can like focus and zoom in on it and then additionally it comes with like this magnifier thing that you can just attach on like this and then you put it up to whatever you're doing so if you really want to like zoom in on something you can like magnify it basically which is kind of cool so I've been playing around that for a few weeks now and just seeing how it goes which is cool um it's it's neat yeah and I also like I also like that it has like kind of magnet type of thing so it kind of it's kind of hard to see but it kind of kind of sucks in on it which is nice so and it's USBC I like or no just normal USB there we go but playing around that got a video coming out with that if I finish it today we'll see we'll see how it goes uh we'll go from there uh Chris says good morning good morning you know uh John any plans to make an msix installer video uh I don't know I mean I would just go through the documentation but also Gerald has one so check out Gerald's channel uh I think he already has one so I don't want to just like duplicate stuff that Gerald does unless it's dramatically different so uh programmer talks is asking about Don and Maui versus xamarin forms transition wise I actually did a transition over there I've done transition a few of my apps and talked to a lot of developers in general have had good success um it depends I mean you know really Dynamo is the evolution of of xamarin forms and how they built things from the ground up focusing on mobile and desktop uh there you have your run into issues definitely let the team know exactly what you're doing um there um and go from there but um yeah a lot of people have been having pretty good success I'd love to know like the issues you're running into feel free to reach out on Twitter you can DM me DMS are open if you're running specific things and yeah definitely let the team know in general uh what's going on but yeah the new Upgrade Assistant in Visual Studio we checked that out last week and that went pretty well which is cool so let me check out that video as well [Music] I think there's all sorts of different back ends and different front ends that folks are using so I'd highly doubt that that your statement is true maybe close to where you're at uh in general however you know if you take a look at the dinette comp session from uh build which I'll maybe put a link to later as well David and Manny has some great stats and great companies using it and that was just in Redmond talking to a bunch of companies um but that have had War zamarin moved to down in Maui or brand new and down at Maui so it's good Nunes has been uh the production app so for a few months has submissions with collection view don't we all yes I'm except for DOT and eight I think they're really going to be doing a lot of stuff there that's for sure yeah so we'll see good to see you as well Michelle two minted Maui devs here thank you so much that's awesome Laren good to see you as well thanks for joining in on the stream hey from Winnipeg Michelle as well good to see you very cool well last week we decided to check out the new uh extension for vs code it's kind of in early stages and doing so you know there was um some things that you know as a zamily developer that I you know wanted but weren't there yet so we decided to build our app in C sharp UI and let's take a look at what we got today over here boom boom so this is the threads app that I had built just the home screen here which is and the tabs and things like that so we're going for approximate I would let's say you know what I mean so approximate as much as we could inside of here so we have and I'm looking at what we have and you know we didn't support images or other things like that but we definitely could you know inside of it if we wanted to or with the threaded type of conversation look like but we're just like hey what does uh some things look like and can I tap on some things and do some things in here and this thing was built all in C sharp just this home page here uh using the c-sharp markup extensions hello from Serbia whoa heyo what's up good to see you as well so here we have this uh grid and we're defining some rows and some columns and then we have some children inside here so we're binding this up in the C sharp markup which is cool I think I already put a link to that in the show notes below as well so this is on GitHub which is cool so we have all these things in here which is looking pretty good I would say Gerald's YouTube yes Gerald's YouTube let's let me go over to YouTube Gerald versus there you go Gerald Gerald has all sorts of stuff video I'm going to try and explain to you Gerald that's Gerald Gerald works on the down and Maui team so give his his look there there you go yeah it's cool so I was talking to uh I was talking to Frank about this actually and he was like you know looking at this and we did a podcast on it and he's like well it's actually quite interesting because let's say you took this label like we have this label on here we have these things here and these are these different icons which is kind of cool and he could you know you just make a you know a font awesome label right and then kind of plop that in there so I kind of had done that right I have this uh horizontal stack layout spaced and I kind of did that where I had this little spacing here which I thought was cool and and it really got me started to thinking of of controls right so actually coming in and saying let's add custom controls into here I'm debugging so let me stop debugging and and what would that look like if I just started to reuse you know control so for example like if I just did a add a new class and this was the you know horizontal stack layout spaced just like that there we go and then just like Jam this and here all right that's kind of cool what did I do yes all right okay there we go so we'll go ahead and get rid of that get rid of that cool yeah and then this way you're kind of more of a fluent UI so kind of like Swift UI or flutter or um compose right jetpack compose type of things which are in there too so you do something like that right you say okay let me go ahead and quickly put this here like this and then you're like hey what about this right we have these labels in here and we're specifying these these different properties every time so you could for example say let's create another control add another control in here and then I would say font awesome font awesome labels label just like that and then I would probably do something like maybe a side by side this puppy here there we go and then I would do like I'd have to kind of consider like what do I want to do right maybe I would do a this would be a label all right and this is just custom controls but not really customizing anything it's just sort of cust making it easier but if I said public I think what I would end up doing is I would say I would do like const Fast equals const string fast equals fast all right and then const string far equals far so these are font awesome regular fonts font awesome solid fonts and then what I would do is I'd probably do like a public enum and I would say font awesome Style right and then this would be like a regular I don't think you're gonna go do brand regular and solid just like that and then you can just do something like public font font awesome label and then I would do a font awesome style and I would say Style and then maybe I'd even put these down here side by side let's do that there we go it's probably easier to read and then I would also do like you know string and I would say icon right like something like that do you also have a twitch I do have a twitch it's my name I don't twitch stream on there anymore really um but you know you can check it out if you want to I do do games sometimes and some ad hoc things but but not too much different but so now check this out so now I could say for example uh font uh attribute or font what is it font font font family and then I would say uh style and then you can do like and then I would say Style how do I do that um how do I do that um what's that thing switch pattern matching C sharp like I like how I already forget there we go oh there we go yes switch style switch style equals equals oh yeah oh there you go oh perfect so then I do font awesome [Music] style brand and then I would I would do Fab and then I would do regular and then I would do R and then I would do awesome solid like that saying add default case I guess you could throw a new exception sure there you go cool and then you could do like yeah text equals icon that's cool now if you really wanted to you could also do like some binding or whatever too but I think that's probably good so now this is cool because I could just come in here and then I could say font awesome label and then here I can say font awesome Style solid and then I could say ellipses just like this bam then you can just basically get rid of these so kind of like really trimming it Down Right which is kind of nice in general so if I go ahead and like replace some of these like look it's like just more code right so that one's a solid and that's a circle check bam let's get rid of this again I don't think I'm trying to replace everything that I'm doing but it's like oh can I get rid of some of the stuff you know what I mean this one would be uh this would be a far so this would be a regular just like that this would be heart and then it's like less error prone too at this point which I like this one's regular this is a comment cool again you're just really trimming it down so it's like okay I'm just stacking these things so it just looks really nice this is a solid this is a retweet I like that that's in there and then here it would do the same thing so paper plane bam just like that so that really like trims that up in general and if I really wanted to go farther I guess I could pass in like a size two like if I really wanted to like I could do um font size I could do this is an inch right double I could say font size in general and I could like I can make that default to zero but if I wanted to I don't know I feel like probably I want those to be just that like these are the things that would go into a font awesome thing I thought awesome label because I'm setting these properties and then I'm doing that so I think that would be pretty cool there yeah Blazer stuff too yeah I have a bunch of stuff here yeah switch expression that's what it is yes what did I call it I call it switch switch pattern matching C sharp which is pretty accurate which is cool yeah um yeah my favorite part is the switch the switch uh pattern matching actually like it's really really nice because normally you would do a bunch of code to you know do different cases and things but this doesn't even have to be you know this I could actually put in like you know five for example or four for example I guess that doesn't work I guess if I cast that no no it does work does it oh if it was an object for example I did that and this was like an object I could do that for example right like maybe I don't know what it is there's just an object coming in which is nice now this would be ins but I could also then do like oh is this a is this a string and if it is this string that could say hello right so you kind of do that which is nice too so it doesn't have to just be of a specific type but that is nice because normally it's like oh that has to be some sort of constant that comes in but that is nice but there we go okay anyway I definitely like that that's pretty pretty cool um I also um um think that that was kind of in my mind I was like okay how do I make this just a little bit nicer you know what I mean just a little bit there because like this is cool that I'm binding these properties I'm centering vertically but like yeah this font now I can use this anywhere in a bunch of my my apps right and if I wanted to take it further I could technically like make this whatever the row is you know what I mean yeah didn't catch the first episode it's gonna be a c-sharp app I'm using yes the dinette Maui Community toolkit specifically the the markup extension over here which gives us those nice extension points into here so this font size type of thing so it's it's you're able to set these properties right so uh here you know I'm just setting the properties but I'm doing this in the Constructor comparatively oh and then I actually messed this up too that's funny so I should actually do like Fab Fab far and now this is going to be nice because it's just constant constant string over there static content no I don't think that's what you want it's not like that I know what to make that the most performant thing but maybe that's it you know so brand regular fast and that's nice because then people don't have to know because uh Franco's asked me like oh what is Fab and far and fast you know what I mean so that's what he said Okay so we got our controls that's looking good now one thing that I wanted to do is like you know when I run the application over here hopefully this will look exactly the same let's see what it does um ideally we end up seeing the application like running and doing stuff but one problem that I definitely had was um you know the hot reload support that we tried to figure out if I could do done it run for example and I was running into problems there in my code and I found this article from David from last year yeah October of last year which was all about using C sharp UI and Donna hot reload together to build out dot Mi app so he had some tips and tricks and I wanted to try that out and see now I have been running into issues with um the latest preview I'm wondering if I'm running into that again I was running to this issue where it wouldn't rebuild and redeploy I was running this into our Workshops the other day I was gonna update to preview 4 but I'm on preview three so I don't know that's a me thing because we were using vs code last week so that didn't seem to have the problem so I think it's a preview thing so what I might end up doing is let me see it should be like doing stuff but it's not seems like it gets stuck I ran to this problem but I have the stable vs I think I'm going to move to that let me go ahead and move to that really quick here and again I think probably this is fixed already oh not Edge let's try that I'm gonna try to boot up this normal one there we go oh if uh talking about the say there's some conversation in the chat right now people are probably reading later if you're watching this later some chat about the Upgrade Assistant what I like to do is inside of vs what I showed was that you can do um you can do side by side so what I recommend doing is doing the my the Upgrade Assistant and then doing it side by side and then creating a new dotted Maui app and then sort of pulling things over taking them and looking at them you know when you go through and you are specifically upgrading and application in general you also now I want to update your code but probably you want to use some of the new stuff like the community toolkit stuff too right so you want to probably take a look at that at the same time and some of the other things in your code that may be just for lingering around for a long time you might want to upgrade that's for sure because I've gone through a few migrations and of course it can't necessarily handle everything but there's that so like all the dependent projects or libraries that you might have in your app for example you know you definitely want to take a look at those and see if those are supported out of the box [Music] yeah and things that are five plus years ago are sometimes hard to move because you've come much further aside from dropping frames I open this puppy up I need to I need a new computer one day I'm gonna do it yeah oh there you go yeah and also that's fine too I think the nice thing about the assistant is it'll upgrade all the namespaces and using statements and things like that but every app is different you know what I mean it's kind of hard to figure that out okay so I want to try to figure this out so let's do this I want to put this side by side so I can read what David said which is kind of like a hack for getting this working but we're totally gonna do it which I'm pretty excited about and what I'm thinking of doing here is he writes this up about pretty much you create this method which is about when the page is navigated to you build a UI so instead of for example here in the home page coming in and building the UI up in the Constructor you delay load it until later on right so he has this nice little void that he had created I'm just gonna copy this I think Boop into here that didn't do it oh gosh there you go I think the idea here is you just build this up and go from here and I would probably do something like you have content Neo is null but the idea here is is this and I think what I want to do is create maybe like a base class if I do add new class and I'm going to call this base page base yeah base page and then what I want to do is probably implement it here right I probably want to do like a public class and this will be a content page just like that and then I think I want to do like an abstract uh abstract void build method right does that work public just like that uh is abstract but it it is contained in a non-abstract public virtual um abstract can I do that can I do that yeah Okay cool so we build oh yeah can I do this can I do this then or like this yeah so the base class is here we have a space page this here cool so then instead of putting this code here right we would do base page cool and then we would Implement oop set interface bam and then here this is where we do this bam let me do this I'm going to do add new class I just want to clean up some of this code because we were really hacking on code we'll call this threads generator perfect and then I'm going to call this a public static class and then here I'm going to do high numerable public static I enumerable and then this will be get create create threads [Music] and this will be of type are really we're really really definitely going to now do models let's just really build a real application people models add a new class I'm definitely gonna call this a thread I like that there you go threads generator man I wish that it would just give me the stuff that we want there we go cool and then I'm not going to clean this up we really just jammed everything into this into this main page which I like there you go perfect all right public partial class let's bring that in amazing do you see that I just like copied this in there and like visual studio just like added did you see that I didn't actually I didn't click on anything let's go back one more time so I have this here I copy this in and visual studio is all like hey you need this namespace oh my gosh that's great I think I want to learn more it's a lot of conversation about xaml versus c-sharp I want to um learn more about it because you know in general it should be protected you think it's like a protected class the base oh yeah protected override yeah that's great um I don't know I make everything public I don't even care um the uh that we just need to do now this Boop the Reds generator create threads there we go cool that just is an innumerable perfect and then now I just put the return new there we go is it gonna do it Oh I thought I was gonna do it collections threads model maybe that code wasn't complete there we go all right now we got threads generator now our home class is looking real nice okay cool and then we just need to do this cool and then remove this awesome awesome nice uh neuromax says that's bait page is something I'm going to implement right away uh a zeklify says why are you using a list view instead of a not a collection View that's a great question uh no reason you could use either or it's fine uh it doesn't seem like the threads app has any need for a collection view so like if you're not going to do like rows and columns and stuff like that it's probably fine but I probably should use a collection view but we're just we're just going there it's better but I feel like the there's still some quirks across the platforms with it that I've been running into so that's been my been my thing in general but the cool part is like I could just change this to like collection view right I could be like now this is a collection view right and then remove this and then I would just remove some of these properties like that's actually kind of the cool part like if I wanted to I just do this right and just say well look at that now it's a collection View I'd have to change this from being a view cell to being something else but that's the only difference which is kind of cool in a way I'll try to do it but that's not bad that's looking pretty good I would even move this thread cell into a whole nother class too like I would do add new folder and I'd call this like cells and then I would have a you know thread cell or maybe I'd have like a thread grid or maybe that like here's like a let me delete this right maybe that's in controls uh yeah and I would have like a new class and I'd call this a thread thread view right check that out ready it's going to blow your mind like what let's really it's a really uh do do this uh I I think it's gonna be a class right so then look over in refactor mode we just created this app but we're really refactoring it Non-Stop um yeah all this needs to be here Boop this is a view this would be like review and then I just do grid and I could do like public thread view like that and then I don't think I have to new up a grid because it is a grid there we go like a refactoring like a crazy person yep and then here we just actually look at this now we're talk now we're now we're now we're cooking I've been watching um the bear on Hulu that's pretty good show um which is pretty rad and now I feel like I'm a chef back in the kitchen bam children equals I do it right I need to drop some of these down no I didn't do this right why is this not right I need to read only oh I think here I have to do like [Music] this is the thing where I can't let me double check [Music] line 31 semicolon 131 oh yes no no not there I think the idea should be that this comes here oh yeah this one's like no I can't didn't we just run into this like the other day get hmm oh is that what you have to do no because I think it's only a getter yeah see the children property even though this is a grid oh maybe I have over refactored have I over refactored I feel like I've messed something up somewhere oh wait no new parent control let me look here Donna Maui grid I think you have to add all the children but I don't want to add all the children manually you know what I mean um [Music] you should just be able to set the children like that in general to tell it to use add and to check probably yeah I guess I could it does say to use ad but I don't want to I don't wanna you should be able to set the children property foreign it's weird because I did it here right like you saw that right where it was like here it is maybe I have something to oh you know why because we're not on a Constructor anymore we're inside of a setting up properties like I can no longer do that which is kind of a bummer uh just kind of a because you're not inside of the the setter right so you actually do have to do that which is kind of a bummer which is not great but like I guess that's okay and then you do like yeah grid dot add oh sorry children do like add range no not in love with I'm not in love with that in general but you know I think it's probably okay then you would do this for all of them it's really not that many technically but then there's here it's a lot nicer when it's just like in there but well now well now it's missing the semicolon that's for sure now it is there we go there we go it's mostly good [Music] okay that's technically what that looks like a threads View and then if we really button it up then we could just say [Music] that and delete all of this news red View like that Boop now that's pretty good that's pretty good and in fact you could take it a set further and then you could be like here's my you know thread cell and then you just get rid of this class and you say okay done so so now we have this is just the code and that looks good okay cool all right back to hot reloading people back to the hot reloads [Music] oops a little when I must have moved my mouse down what is that doing here [Music] nice all right let's take a coffee break really quick and let's take a little insert ad break I don't actually know if an ad is playing or not I did insert an ad so we'll see if that's actually playing or not I don't know how that works all right so let's go ahead and go back to that code that we were talking about okay so we have our base page okay thank you now David said I also need this code which is I added a hot reload service into his app let's do that I'm gonna put that in helpers because I feel like that is probably where it belongs huh reload service Loop and he said we need to get rid of this stuff oh he has a whole if debug if debug which is probably good because you don't want it on and if he's saying to copy this copy into here and then he also needs this thing here this assembly export on the namespace r this is going to be threads app.helpers Dot this should be a helper Library I think basically update application event okay cool and then in my base page we just have these events this is easy enough actually hot reload service threads helper so what this is doing is when you have C sharp pot reload okay so what's going on here is imagine so for example I'm just in normal c-sharp hot reload right so for example let's say this is a content page right here for example I could do build let me show you the before and after if this thing's actually working so Luke says everyone's using chat GPT probably uh probably there we go oh there you go perfect oops why is that mad at me [Music] they do something wrong I don't even have no ability on so you don't even need those things but sure okay so here's the problem with hot reload or even zamo hot reload right the reason xamaha reload works because there's like a xaml representation that's like doing stuff right oh no oh I have to do a clean I think let me try that now let me do a rebuild because I was in different previews so hopefully this fixes up so the problem is when you think about it if you are hot reloading xaml well that's okay because like the xaml person or zamaha reload kind of knows and understands like what it's doing basically right um and it knows uh it knows how to go off and update the UI based on those xaml diffs now in C Sharp hot reload right if you were just in the code behind of some project and you had like you know count plus equals you know count plus plus for example that method is going to get replaced so that's fine if you have a button click Handler that is clicking on that button the problem though is that you specifically when you're building your UI in xaml or in C sharp for example if this is just building your stuff up then how does it know to recall build it doesn't know right it would if you update this build method or you update some other method it would know to replace it but it wouldn't necessarily know to like call that method again right and that's the problem that we have so what we're doing is We're looping into the hot reload mechanism and what this service does is that there's this metadata update Handler attribute that gets exposed and what it's doing is it's saying hey let me know when the update application thing gets called and then I'll go do something so on our base page over here it's literally saying hey um I'm going to implement this method called build and when I navigate to the app over here um go ahead and call build and then Loop into this event which is update application event and whenever that gets called it will recall that method and rebuild the UI so that's what it's doing basically if that makes sense yeah so that's that's the problem we have is that in this in this mechanism where this is just calling this and I'll show you right if this launches yeah it does okay cool what does clean do yeah it tries to clean up a bunch of files uh it doesn't always clean up everything but like for example in this case there might have been some diffs in the SDK that it was building for so it'll clean out all those sort of intermediately build files uh in general where a normal bill just kind of does a diff what is that reload I don't know it seems to work on rounded corners for me okay so here's a good example right so if I'm here and now all of a sudden I say hey I really want this to be a new button that uh you know uh in that dot the text is a hello world right and I hit save and hot reload like he's not gonna know what to do right so that's bad so we're gonna see if all the code I put in works now so let's go ahead and check that out so an ideal scenario is I make this a base page get rid of this all right redeploy Ed it does not public there we go now let's see if it works I don't know [Music] so fingers crossed that this actually does work we'll we'll see but the idea is that the C sharp done at hot reloading stuff works now this will reload the UI so for example let's say I want to come in and say yeah this is a new button with that text hello world now ideally if I hit save I don't know if I'm assuming this still works oh hello wow boom it works wow amazing that's so cool and then of course I can make this do it on file save wow so now I have this big button right check that out and now if I put this back and hit save boom mouse back oh it does work that was amazing wow wow yeah basically it's enabling UI hot reload for C sharp right just because of how you architect your app it needs to basically be able to Loop into events to reload this so now if I'm doing this correct I could for example add some let's try to do it we have this row here and I'm very interested in adding some margin here and I think specifically I can add like [Music] you can add new thickness but I can also add horizontal or vertical so zero maybe like uh 10. and my question to see is like will this now like reload everything oh my gosh it does do it yes so cool so I like updated this and then that definitely update it nice so that actually can be like smaller for so that's really cool right so we're actually like now reloading this like 100 inside of it that's nice yes nice do you have a link how to do this yes I'll do a video on it too because I think it's probably worth mentioning how to how to do this just in that example right there you go it's pretty cool pretty cool yes yeah so now for example if I [Music] um yeah if I wanted to I think you know change anything so for example let's say I came back into that threads generator and I was like hey I really want like more and I hit save again this should actually Now give me a bunch more right so it just gives me a bunch more in here which is pretty cool so if I put like the let's put the James one at the bottom just so we know that it really added it in there so anything that the C Sharp hot reload can do now this should add that in there so there's me at the bottom well that's pretty cool that's pretty cool David yeah so that base page is what's really important in general look at how to link my app to SQL database um do it through a rest service call that's what I would do and don't directly connect to your database that's Bad News Bears uh cool so I wanted to build out let's see here the search page so that's right now blank so for example let's I go into my um search page now here's gonna be the kicker obviously is that I'm gonna need to change this to a base page and now see this isn't going to work without reloading because I'm changing the Base Class here in general so I can't just magically like I can't just magically do like content equals a new button maybe I can now see it's like too much I hit save it's going to say oh you need to rebuild and apply your hot reload changes which makes sense because like you can only go so far right now in this case once it reloads it now we should be in hot reload fashion so that little green or that little purple underscore squiggly there is what is gonna do that which is cool Nuno asks in my turn up app don't I directly connect to an Azure storage table nope nope I talked to an API and an Azure function which then connects to the Azure storage table yeah yeah totally so now we have a big button but I should go in and be able to say like I guess I can't put anything in the Constructor but um and then I should be able to say like shell Dot how do I do that uh shell property I'm used to the xaml so shell.net Maui shell title View uh I think let me go into my I do have like one thing of xaml which is my app shot which is like way nice there we go cool and I'm looking here that this should have I may need to change it here let's see that one I might need to reload let's see I'm pretty sure that that item needs to have a title on it and then there oops that didn't work oops oh oops Yeah that's why I didn't reload so I didn't finish it and then I think there's like where's the iOS specifics platform iOS nope uh no platform integration platform specifics I just so varied this view modal swipe View search bar style I don't know what that is a flyout page large page titles that's what I want whoa username thanks for the sub uh okay iOS navigation page prefers large titles on iOS oh interesting so this would actually be in here this would be an iOS I think this is fine for Android over here I need to change these colors the default purple they're not correct they're broken them oh they're oh now also give that a look because there's also like the scrolling how do you make it so it Scrolls I'm not going to run it on iOS it doesn't really matter but I am curious about that so with search bar Style hmm [Music] minimal oh interesting yeah so I guess I would have I would want prominent or I probably could just set the background color to whatever it doesn't matter I don't understand the difference has no background and the search field is translucent I don't know I don't think you'd want that or maybe you'd want that maybe yeah probably okay anyways let's try to build up this UI so let's see if this works so in this case we probably want um the search page is very simple but I think you'd want a new oh actually you know funnily enough can't you do a shell page with a search bar oh let me try that because there should be a built-in shell then how do you do this I've never done the search search oh wow nice oh wow amazing yeah I think you'd want like this probably a search Handler whoa not to do that oh wow huh what huh I don't know if I want to serve Chandler like do I want it to be that advanced I want it to be just search Handler did you do a search was it worth it can you just do a search uh Handler without implementing a bunch of stuff like I don't really need all that stuff like we'll just do a drop down list because I think here when I do oh yeah it does do a fancy thing okay you can just do it without it basically yeah I don't know why it just doesn't have like here's the default like here's the default I guess it is nice you can do this little thing in here that's kind of cool collapsible search is required okay so I think then I should be able to do like some search we'll see maybe I'll just do a new I think I want the search Handler but then I don't know if I actually do or do or not but I'm just gonna do a yeah you can do a search bar like that okay we'll try to implement everyone's interested now great now everyone's interested so now I gotta do it um there you go that should probably reload oh yeah I think I do like here do content equals new list of you it's just gonna be blank oops edit the blank list view that's cool all right so let's see I guess I would need to do this shell dot search Handler let's see if I can do that and then this and then is there just a new search Handler yeah can I just do that oh cool interesting uh fascinating is that what I want I probably need to like stylize it or something [Music] yeah I wonder if is there like a let's see oh yeah interesting okay so there's just a bunch of stuff built in so you don't actually have to do this should just show you how to use the the default one so you can say the default would be search all right and then uh show results [Music] play ER icon clear all right there's like a whole source oh wow there's a whole bunch of stuff in here this is cool this search enabled true false keyboard query query icon here's our color Place cancel button color black colors [Music] I don't actually know that's gonna it should reload foreign it's at least in the bar but I don't know if that's how it works on Android like I don't actually I mean this is pretty much what it looks like over there but I am kind of curious of what it looks like on iOS because yeah I don't have a fly out I should have the little search icon but doesn't for some reason maybe there's some styling I need to do oh there it goes says search okay all right let's I guess that's cool I don't know we'll see maybe that's what I want and I feel like the styles are off for some reason and that's weird so let's look at that but it should be able to have those little icons but maybe something in the styling I'll have to ask somebody about that but okay all right so I could say keyboard keyboard dot plane yeah probably I got text I know text there we go cool all right well that's cool I think this would actually move up into here probably because it's when you set shell stuff it only does like once anyways but that's cool all right all right so let's do that all right so we got our list View and then technically I would do like bar list view equals this must be a new list of you cool and then probably I would take a look here and let's see build this out so I'm gonna need a few things again I'm just going to kind of put stuff in here because it's easier in general um do I need to follow on vvm principles no but I'm going to anyways so so we're gonna do that so uh we're gonna do we're gonna do that so we have let's see [Music] I think I can add a new class which would be a uh a user see here and this would be have a string user name string display name an INT of follower count a string of image and a bowl of is verified and then a a bulla is following [Music] all right like that and then I'm just gonna do public partial class this will be an observable object there we go this would be an observable property and then we'll just kind of do here there we go [Music] all right and then what we're going to need is we're going to need a uh view cell so we want to also do a public class uh user review cell and this is going to be a view cell there we go and then this will be a public user view cell [Music] and this again will be content nope the content review those nope right to view cell like how did how did I do this okay so we have a thread right this is the thread stuff oh interesting what's going on there that's weird [Music] at this [Music] trolls thread View [Music] oh view equals view equals and then here we should be able to do is do like a new grid all right and what we've seen is from our thread view we should be able to do this one has three this is easy three columns here and then this is going to have columns.define this will be [Music] how do I do this I like that I forgot how to do everything that was just Auto perfect Auto Star Auto kill [Music] there we go and then row definitions and this will be also equals rows.define and this is going to be Auto auto cool and then we have children [Music] children Q I'm just going to equal uh I'm gonna put in a new well let's do this first before we do this so we have this let's just do a this is really simple because I can just like kind of copy some stuff from this thread View so let's like copy this new image here Boop into here so I'm just going to say children equals there we go and then I'm just going to shove that in there speed a user all right a user Source property thickness aspect fill quick cool and then we're going to need to do list view dot items source equals new array and then we're going to go ahead and fill this with a new a user and we'll say um user name is James Monty mag now and then we're gonna have a display name which is James Monty Magno and then we're gonna have it is verified I'll say false for now and then I'm going to do a is following and that'll be a true and then I'm going to say image equals I added this image in here so I really like this this uh a thread should probably not have like image and user it should have a user on it pretty much which would be an ideal scenario which makes it way more sense there but we have that and then this image if I go into my threads generator is going to be profile Circle there we go and then uh follower account I think I have like 1.5 1500 something like that can't you do like that 1500 cool oops uh okay yeah I think probably some of those Generation stuff may not be hot reloadable we'll see but there's that this and then ideally I should be like list of you Dot item template equals new data template type of and then this would be user view cell yeah this one I'm gonna have to rebuild because I'm generating stuff behind the scenes so we'll see if that actually does it or not oh [Music] what you mad about it's mad because it needs to generate some stuff okay okay have I tried coding without mvvm yeah I mean I'm definitely I have I mean maybe ask in the chat uh I definitely have uh before it's not quite as fun as uh as I would like but I've definitely done it my first my Cadence application that I have had no mvvm in it at all which was good oh I think I moved this thing and then I think did I I wasn't mad about let's see what it's mad about might be mad because I moved a bunch of stuff around oops oh that's why I didn't I didn't make did I not do that why is this thing so mad one error what did I mess up [Music] [Music] I'm only gonna put this on iOS and I'll try it anyway so let's do this because this is being a little bit funky let's try this now chairman I recommend a physical Mac for iOS development if so do you develop on it or just use it on Windows uh no I recommend um both a Mac and a PC to do both I have my MacBook Air over here that I develop on quite a lot I do a lot of my initial work on like Windows and then Android and then um when I need to like tweak and go really like you know intense on uh iOS I like kind of go over there onto the iOS on the Mac and then go from there so that's usually what I do mostly because it just makes it a lot easier in the cycle however I do use hot restart so I did a video on that like plugging in your iOS device into your machine that also works fairly well too yeah foreign oh yeah Nero says that they put the observable properties on the database models which gives them the idea that something went wrong in the design yeah basically you know and also like when you look at this thing you probably don't actually need these observable properties to be on everything like I probably only need them to be on the likes and replies you know maybe time ago observable if they're changing like if these aren't changing at all these just could just be public properties like they don't really need to be anything fancy in general so that's one thing to think about is like I've marked these as observable properties but I don't really need to be they could just be there like is the image ever going to change I don't know maybe like the URL change you know maybe you know that's the thing is like only a market is observable properly like if you if you're gonna make it you know if it's Gonna Change that's one thing that you know we think about it's like oh is it gonna change or not so that's an important aspect too hmm okay search hey oh okay cool we got we got me on there perfect okay so let's go back over here I don't like that this is that color this is like really upsets like show up essential fixes I'm gonna do that guys I want to get rid of that I've never seen that before like why is it doing that [Music] silent oh okay maybe that now it does let me try it again like what is it doing okay so ideally let's look someone says one up says what's the best way to handle passwords when an app handles user accounts being stored in the database put them in Secure Storage that's built into um built into dot Maui so you can put them in Secure Storage once you download those refresh tokens and things like that from the internet on a pairing gets called quite often so on navigated 2 would be a better place for like when the thing's been navigated to 100 so that's a nice thing to have but they're called in different orders so you kind of make sure that those things are correct for you for the same building come on do it do it do it in the search page app okay so if this okay there we go cool so now in a world okay cool in a world where I'm doing this here's the other cool part too is I have my uh simulator here right but if I go here I still should be able to do xaml live preview or under debug windows xamla preview it's actually still there it has nothing to do with xaml that's a fun fact in case anyone was curious I know it's called that but it's actually has nothing to do with that at all I mean it doesn't it doesn't but there you go so you just like have that in there now the question I have is will this this uh I guess here I would do like and I'm just setting all the properties because like easier but I think you just do like padding like 10. or yeah 10. oh yep there you go cool and then now we should be able to like list has uneven rows equals true save that I wonder if he it does like dot has this property okay cool add that in there yep yeah exactly every time it switches pages so that's that is correct is that so now we have our image in here so that's good now we'd want to do is row span this would be three just to make sure it's there Okay cool so now we want to do is do a new label so this is really simple because there's just a few labels in here and then this would be dot uh set binding and it's going to be text property here our label Dot text property and then this will be name of a user Dot uh this is going to be username cool [Music] what does it matter about did I do that wrong no bind there you go and then I'm just going to do a few of these would be a name hub a user dot display name and then let me just copy that of course the indexing doesn't come so that's good and this will be this will be the follower count but then we're going to have a string format my fonts are ginormous but you know that's that's on me in general so we could then do let's see if we can do uh zero followers just like that see if that shows up on a save amazing cool awesome and this this should be dot bold Dot and this would be dot uh row or group column one there we go and then this one is going to be dot column one dot row one there we go cool and then this one is gonna be also the dots dot column one dot row two and then this one is gonna also have like Dot text color I'll say colors Dot light to Gray [Music] see how that looks cool that looks good and then probably we want like columns spacing to be 10. this is it is and you know it's this is the C sharp markup yeah looks like yep there we go cool that looks good and I think uh I mean that's pretty much all it is which is kind of cool so then here's what becomes kind of interesting is is if if we have our our VAR user equals binding context and this is our date user this is what I'm interested I was talking to Frank is like could I do if user Dot is following then I could do like VAR button equals new button right right like I say button dot text say it's Halloween else Dot follow right and then in this case we would want like maybe the Dot border with to be one and then oop can I do that it doesn't have it doesn't have um yeah I'm using the dotnet Community toolkit sorry Don and Maui Community toolkit and I'm wondering if it has it'd be cool if I had like button you know button stuff I think it has generic stuff but I want button extensions right I want like yeah I need like button Dot I guess we would just do this oh yeah you know what oh that'd be cool okay so if you did an ideally you could do like dot text right and then you could do ideally I was thinking this right it's like is uh user dot is following I could do following [Music] following like the little hearts that fly up on the bottom and else hello right just like that and then ideally like this button is also going to be down over here and I can say a button in there and this button is also going to be in dot row span 2. and uh column one two and then this is going to be like a vertical Center vertical r this should be my border clothes colors dot light gray and then the order width should be like one see how that does I got an exception all right so something happened oops something happened oh my gosh oh bad format something happened got a little bit too crazy for hot reload apparently I wonder if this is throwing an exception I actually do need to debug this and see if this is there I don't know if this works though like I don't know when The Binding is set on it you know what I mean if that makes sense so that could be the issue that we run into is like is the user like did it just throw an exception because The Binding context is null in this instance here you know what I mean oh I think I just made it very mad oh it's doing something it's doing something there we go let's close the app okay let me insert add and then go I don't know if the button will be a problem or not let's see if it goes I mean it says button but load that's right I was I was sorry to do stuff if I was there okay visual Studios is getting mad at me what is going on oh all right I feel like it's creating something is having an issue I don't know what's going on [Music] I think the other thing I could do probably is I don't think it's a problem with the uh think behaviors could solve the model right now I think should be it okay that was very upsetting I think as his break point is here I wonder if I need to do like I think I need to do this right so then I need to do like a button and I'll say follow button like this and then I would do this almost like I'll say if as a user if user is null return right right and then oh it's going to pattern match no wait I want to do that now there we go is not a user that's great I love pattern matching and then I could do follow button like this and this would be this I put this in here I think that's the problem is like when this is created it it doesn't have a binding context yet so it's like throwing up basically on top of this but this should just set the text so I was really curious when I was talking to Frank is like does this make this easier than doing like value converters and having to do those other stuff like how would we change that right so obviously you know we could bind to a following there yeah throwing up is bad yeah that's correct so we're gonna see if this actually works or not if I'm just uh crazy but we'll see oh there we go cool so we have followings that that worked okay cool now here I would also say that's good because I actually kind of do want that background color there but I kind of also want this to be [Music] I don't want the height I don't know maybe I need it to be like dot top [Music] Center vertically I want it to be skinnier for some reason I like I did top and Center vertically want it to be dot height and then maybe it's like 35. I don't know I'm just guessing here there we go it's better maybe 40. yeah so yeah you could do that so the other thing you could do is like you'd be like you know you could do some logic in here which is good okay that's good and then now I'm wondering is what if I did that if the user is following and then I could also say dot oops background color pan I like uh okay I can do that background color and then I would say user dot is following and then I would do anything else I would need to grab the primary color out of here how do I do that resources styles colors this is pro I think it's doing primary uh let's look text color it's doing app Theme bindings yeah say I probably actually wanted to do that but primary is what it's doing wait is it why oh yeah got it yeah I don't want that to do that I want this to be like app.current dot resources let's do primary you can probably do primary primary color yeah primary okay this would be a color like that that should make it work all right I definitely did not work as I wanted it to a cuckoo cool I also probably need to set the oh is is fall it actually did work is following it should be primary else that and then I would need to do like Dot text color and then I would need to do the same thing user dot is following then I would say if I am following then this could be colors dot White and then colors Dot gonna work hey you uh what did I do I may not have liked whatever I did a keynot found primary cuckoo cool awesome awesome awesome uh where does it live we need to get is it app shell that's where I live because it lives in the shell does it live in the shell huh yeah you could probably just do this but that uh I'm curious like it's got to live somewhere right the the color hmm you should be able to get it that way it should just be in the resources but it is an emerge dictionary of resources so it should be there though um oh merge dictionaries uh gross gross oh man I don't want to merge a dictionary yet I guess that makes sense Danny says that's your code I don't like that I see yeah gross okay let me just add that anyways yeah that makes sense of where it's at I guess I think here what you would do is inside of your like app you could do like public the public well let me just do void uh get public static void get color and then I just do string color yeah Boop and then we would do this DOT first return like that and then you would do color key and probably you would say like get color resource this would be an object we don't know what it is and then we just say key cool and then thank you that merge dictionary is grab the first one that's contains off that's that's terrible key there you go cool and then I guess what I can do here is say you can do app.this and then primary that would look a little bit better so in general thank you Danny uh GN says do you suggest doing design first or coding the front end first um I mean I uh I don't know I mean depends on your app I guess okay we got this buttons on buttons um no seems to work okay now we want to add another user so let's do that there you go where's my person at so let's do another user in here and let's do this let's do a is verified true uh I don't know I mean I think that um Scott he's got five bajillion users ah there we go [Music] hey you now you follow cool that looks actually really good that's pretty much the app now I think the other thing is I wonder if there is a a padding property where's that at zero [Music] oh oh yeah I definitely don't want that this would be this would be like 10 and then zero let's try that can I remove that I want to make it skinny oh that didn't work out there cool all right that's interesting oh and then we can also make the this does have a separator between us that's really good cool so follow is purple and following is transparent yeah that's what it looks like in the app and then also the dot bold there we go that also has bold text on it as well that's what it looks like in general oh and the other thing you need to do is like where's that um this label actually needs to be where's the thread at controls thread View and then you could do probably actually do this so this one here we would basically do this huh a user uh username and this one is going to be a font awesome helper a user cool and then here so again like this is kind of interesting because now we have a little verified check mark and I think actually that's like bottom but this should be like a vertical uh Center vertical there we go there you go and then that's better so here's what gets really cool is like technically I could then do this which is I wonder if I made the text smaller but yeah that's my code the color should be reversed now this is what the app looks like so the app looks like that looks like that I can't really show it but the app looks like that where it's like if you're following then it's it's bolded inside of it yep under following oh actually wow it doesn't even have following it actually has wow it just says unfollow interesting that actually makes it a billion times more easier because then you actually don't need any of this which is hilarious so it's actually really simple like that and then funnily enough wow that is bananas that it's like dot background color actually is tasks is actually a colors Dot transparent and then technically the text color and then what you could do is okay let's do colors.black right now but in Threads it's that yeah I am Greek rating threads yeah so there's that it actually just says unfollow which is hilarious and this actually has like a 20 in here in there so it's like quite thick yeah that's what it does now I really wish I could make this a little bit it's so thin I just don't want it to cut oh that looks better I think I removed the padding so that oh that much it looks much better okay cool 33 something like that nice [Music] perfect that's cool so this is really really really interesting because when you go in and look at it it actually just says follow and unfollow so that's what it looks like there which is very very fascinating cool so that's wild what's that icon on there plus oh interesting hmm okay yeah so this is just me building up this button and then I could put that in there like I could actually just put this is yeah anywhere but yeah then we got the grid we got the stuff in here that's kind of it which is kind of cool yeah that's what that's all it looks like and then I do think that there's a little bit of spacing here so I think there's a little tiny bit of row spacing I'm just gonna say five let's see what that looks like oops thanked you for this sub I appreciate that I got a tiny bit now a little bit less that's a little bit less that's pretty much it and then technically there's a search which we would need to like Implement on here but yeah that's pretty much it if you actually like make this bigger you would see the get out here settings you would see the line in between and things like that cool now here's the other thing that gets really fascinating right is like is that um smaller I guess there we go I get out of your settings is that you could do then like if we look at let's change this and we go to our models we're going to add a new class and call this a user and then what we're going to do is we're going to do some refactoring a little bit right so we're going to go in to our pages our search page and we're going to take this a user Boop and I'm going to put this a user over here put this here cool then what we're going to end up doing is yep go there and then a thread has a a user maybe user [Music] all right there you go that's fascinating and then this should be an observable property as well so we have a thread it has a user which is good and then if I go into [Music] oh you know what I could do is I think I do this keep it uh I'm trying to think of how to reuse the user name control whether it's on a thread it's like if I'm here on the threads app one thing that would be nice is there's the username which is the same here right gonna be nice to reuse that across both of them and if we did that we would want we would want to change something I have an idea oh yes we'd want to delete this stuff and also that is verified because we don't want that and they're a user okay then what we would end up doing is going into [Music] our let's go into our generators helpers let's go into our search page and we want to now bringing that as model cool that'll it'll change a bunch of stuff it's a user yeah public partial class username display name okay cool and then we're going to need to do what search page we want to clean up a little bit of code I don't know this is mad at me oh yeah it's mad because I need it I removed it around so it existed in multiple places so that's okay what we're going to now take this and we're going to say uh thread helpers Where'd I put it oh why did I put this in here that doesn't go there that goes into my helpers oops yes perfect [Music] you got this sync those namespaces why did I do partial on a user and a thread um the reason I did partial is because we're using Source generators to generate the properties for me that's part of the.net community toolkit for mvvm and I'll talk about that here in a second so I'm going to do public static innumerable as I create users and this will be a public static a user kind of say create user [Music] and then what I can do is yes do this this is going to return that and then I'm just going to do this for me just like that and then just go I have different ones I'm going to do this and if I was getting like way more fancy I would just like that okay cool so that should all work and then now we've gone and messed this all up so that's good uh which is great and what I now need to do is do user equals create user just like that get rid of this Boop cool and then now this will just like create a user every time and then say if I do bull is verified equals false pull is following equals true also false let's do it is verified is Halloween make a little bit easier [Music] that's true make a true false and maybe uh false false I'm sorry I said true true just get a little bit of everything cool and then we can delete this stuff delete this stuff delete this is verified stuff that in there say like you know true false false true true true and then I just do this just kind of cleaning up some code okay so the biggest thing that we need to do is foreign [Music] ly like copy and paste these in here there's so many of them I should probably like a for Loop that does some stuff yeah it does need more depth gold Bloom that's correct yeah I should put those in there all right cool that should be there okay so the reason if we go over to like a thread why this is partial is because if we look for example that notice that there's replies but there's a capital replies right where did that come from well if I go to definition it's because we're using the source generators and it creates all of this code for us automatically so we can get the built-in automatically property change and change notifications for us which is really cool same thing with commands as well so it does it all for you automatically so you definitely want that and take a look at the you know Workshop that I have on the.net presentations repo that generates all that stuff so that's what this does it has to be partial class because those are being generated in another file so that's why that's important Okay cool so this is cool we're gonna get rid of this maybe we're only getting to the search page today um here but okay this should be it did I do the no uh oh yeah this now could be the threads generator Dot create users cool that's good now what we really want to do I think is like figure out how to take this and move it over right so this little puppy here ideally should be a new control called a user user view user View and call that and then [Music] yeah correct yeah and all those probably don't need to be observable properties but yeah there's there now I'm using a for my models and then just whatever the view is there only because I think thread is a keyword so a user view everything's a user view keeps it makes it easy to do so this will be a here let's see public horizontal space yeah I don't think it could be like five because that would be cool though can I do that wow no I can't do that that'd be cool if so I think I just made this a horizontal stack layout and I can just change the spacing to five and then I think I need to do like content or yeah children and then I'm going to add these in here that's where things get real interesting so let's say I add this huh everything's a component so really these are like components at the end of the day right now the problem is if we create this view user View and then in one instance we are binding to the username and the other one we are binding to um to the to the to one instance we're binding like on the home page for example here to the home page we're binding to this thread cell which is binding to a thread so this is going to return a thread so we would need to do user dot in this case so I think what we want to do is we need to do like string and then prefix and then this would be string dot empty there we go uh I guess I can't do that so I could do no I'll say we fix there you go sure I don't know why I can't do that for sure all right so then I can't just not do that well I can't do that okay cool I don't know I couldn't do that for a second can you not do just like string dot empty that's not allowed iconic pile time constant that's weird so here I think you'd want to do is like uh we're doing do a prefix and then username because you are going to bind to a username there like that yeah and then what you could do ah thank you much better yeah that makes sense duh C sharp interesting so in most cases we want to just bind to the username of it there so this is where it becomes interesting because what we don't want to end up doing on our if we look at our thread View right it's actually a thread view yeah it's a thread View this we would want to do I don't have an image anymore but we'd want to do oh yeah oh yeah this would be and I don't think that will work I think I'd have to do it becomes very fascinating oh my gosh so here now in the children for this image we're going to need to do name of a thread dot user [Music] and then name of that just like that that's gonna work because we're basically I'm gonna put a dot in there I think yeah that makes sense it'll be like user Dot in there yeah and the same thing is verified so these I don't need to get rid of but I do need to now get rid of this I'm going to say new user View and then the prefix I'm gonna do is this [Music] and then [Music] like that so that should work because this is the thread view are we doing that and then if I go into the U search page [Music] here instead of doing all of this I should be able to say new user View like that let's see if this works primary Constructors would allow that yeah I guess I could just flip on that thing huh that'd be nice [Music] oh nice that's cool yeah [Music] I can turn it down a notch just let me always know durag just always let me know see if it works oh is it running no still compiling okay cool let's go ahead and get this out of the way so my hope here is to um reuse this component so we have the the search View we have this follow button that's doing some Dynamic binding here basically yeah it's not I don't know if that's super duper important in general like this one I thought there's going to be a lot more in the UI that was drastically different but um that's pretty cool whoa tarane thank you for the subscription [Music] it's so easy because I hear a different volume than what's output to the to the source basically compiling slowly yeah and then in this case we're on the search page which we're already bound to a user so it should just work technically yeah I don't think I need them I can just ignore them because I'm not using null abilities so I should be able to remove that warning flag copied and pasted from David hmm there's a lot of interesting things in this UI I think it also shows a image of a person you're following if they're oh interesting yeah fascinating so now we're reusing the same exact view right so what gets cool about this is if you go into the user hey so this is like this is the composability right so the James montemagno and the Little Star here or what are getting reused right across these different views so if I was to now go into this new thing that we just created this user View it's really like a username view but let's say I did like that font size and I said um you know 25 and hit save well we'll now see is that um that's big and then also it's big here too right it's the same view so that's kind of cool to 14. thanks I don't know who it was or just subscribe but thank you so much for the subscription blah blah blah right so that that's kind of cool it's like now it's the same exact view between the two of them basically right that's there so now we should have like a better um follower account view here but there's that Dennis followed thank you Dennis for the follow-up I appreciate that keep those subs uh coming so there's that now there is something I'm noticing which is like if you have followers like next to it then it would show a little I show you know the people that are following this in general and there's of course different um there's different uh you know it's not gonna show you know this followers for Scott Hanselman right it's gonna show something legitimate like 1.5 K or one point whatever K that's in there and I think what you'd want to do is at that point probably do like a humanizer on it so let's do add a humanizer and we should really wrap I'm really trying to squeeze in some good time here let's do this so a humanizer add that in there and then I think also just for good value here I think on the user we're going to add a another observable property I'll say bull has similar followers how does it like that there we go and then I think what you'd end up doing is on the a user view thread View down here there's the follow button there's the follower count here I would do a new horizontal spaced layout and then this one would have this in here boop boop and then this would be there cool and then this would also have a a new image I'll grab that new image and for now I'm just going to bind to the same image as myself because I'm lazy new image and this is the resources images profile Circle PNG and I would say dot with it's gonna be small like 12 dot height 12. and then I would say dot Center horizontal and then I would do a DOT bind and I would do a uh image that is visible property and then I would do a name of the a user dot has similar followers like that just like that like that and then what I would do is where's my threads user generator yeah and then for Scott I would do like it's custom so I'm going to say has followers true it's like that okay and then inside of our a user we should have a uh public string uh followers display like this and then this would be follower follower count Dot and then I need to look up humanizer stuff humanizer C sharp read me and add in using humanizer I should probably just give me like Dot two was asked what I think about flutter and why am I using Maui well I'm using Dynamo because one I've been a xamarin and Donna developer for nearly two decades unless I'm a c-sharp developer and I like using visual studio I like using c-sharp and Dot Nets but my back ends my front ends all my things uh that a humanly possibly want uh in this world which is great and even as a string four minus string numbers to word numbers to numbers numbers to ordinary words I think maybe in here uh but additionally I just like that I have access to the underlying uh infrastructure in c-sharp and Dot net uh and I personally like I said I'm C sharp developers my go-to but I love the C sharp donic community and I like a lot of the niceties of Visual Studio I like using xaml or c-sharp to build my uis specifically and I like a lot of the things that done in Maui does for me is cross-platform icons fonts images raw assets you know styling things like that which is good I really want to do like how do I do if I I don't know if it is gonna do the things that I want it to do like what I would love for it to do maybe it doesn't know is like two quantity I don't know if it's gonna do it for me I want it to be like dot uh 1K 2K 3K oh yeah humanizer do all sorts of stuff like for example like time span human eyes and I'll do like one day yeah two metric oh there it is amazing wow cool thank you there you go uh upper and then I would want to do followers like that like that so that would do it I think that should do it if that is what it does from metric wow cool and then but I guess is this is it though like that's is it really metric that is it gonna do what if it's a million though you know what I mean you can do like kilobytes and then to this stuff I don't know if it's actually going to do what I want it to do though there's Tuple tizing I might have to do it manually I mean it's really a thousand if it's like thousands or this or that you know I don't know if the metric is what I want I'm gonna get uh there's like point point one though right I guess it would never be that I don't think that's actually one oh that's cool there's two and from Roman wow the it probably doesn't actually want to do what I want because I want like 1.5 million or 1.67 000 or whatever you know hmm oh I wonder if I do [Music] uh I don't know if it's gonna do what I want but I think it might be like like I think actually I'm kind of curious if it's like if I do like followers and I do dot to quantity right and then I pass in the followers like that follower count like that right because then it would be like foreign actually will or not but like I would think that it would maybe do it see it says two quantity ah I don't know if it's gonna do what I want to go to one like n zero at least formatted nicer I guess so what's it gonna do show quantity as Merrick that is the default [Music] we can just see what happens anyways this is probably what we actually want uh in general in general but I'm there okay I'll try the metric one but is it gonna do like you know 1.5 M I don't know it's about no just like building out just trying out new features building stuff Moosa and there it's on my GitHub it's in the show notes below but I do a bunch of building of apps and things like that oh it does it oh okay cool well fine okay you win Danny you win I don't understand how metrics works I'm you know that's what I do okay so let's go I'll go to my search page so here yeah this would be like follower display instead right poop like that all right you win according to chat gbt great and so if you know fjbz does that sounds great yeah uh but I have a bunch of pet projects that are on my like side projects that are on my GitHub that are in general there so let's see if this works foreign bum bum boom it should work follow button column row you I think we're only going to get to here because then I'm gonna go and get out here but this is getting a lot further so I'm very happy about it I still need to do the iOS like follow or the search button thingy and actually change some images and icons let's see here yeah you can check out humanizer here if you've never used this very nice we used it especially for like date time stuff it's super duper nice but all this stuff that first third just does it automatically so nice [Music] all right cool just compile [Music] yeah do I like building stuff in C sharp as much as I am I don't know Frank and I've gone back and forth so we we're like oh do we I don't know he built almost all of his uis in C sharp or F sharp though so he's 100 in sold [Music] cool all right there's that search hey oh you're all right 1.5k wow amazing and look at that little icon there whoa amazing so cool wow wow looks so good there we go I did it and we refactor tones like I'm pretty impressed if you look at the solution of like we got some controls we got some helpers we got some models we got some pages in our search page should look pretty well we still would need to refactor a little bit of this out basically but beyond that you know it would look a little bit like this and then this is pretty not bad in general so that's cool nice all right search and then at some point we'll want to do the other pages that I just talked about so go from there but yeah we have this all set up that looks so good wow I'm impressed with myself not bad these are easy views like the actual threads application not that like the views aren't that hard at the beginning but they will get more complicated like there's probably tons of stuff that I'm not even doing here like the actual threading of conversations for example so and then images and other stuff like that that's like more of a templated system comes in so we're there they're all built on top of the core architecture of iOS Android Mac and windows like different ones like Evelyn uses different for mac and for Windows but as far as IOS and Android go like those are built on top of IOS and Android for.net which enables dot net and c-sharp to be run and get access to those apis the underlying platform and all the packaging and compiling there so that's what's cool about it then yeah based on your needs of what like you need to build like whatever's there so totally up to you and your use case but for me like I obviously work for Microsoft so there's that but I use view xamarin forms forever and now Donna Maui is my go-to for this so that's kind of like how um you know in the Box type of stuff but the nice part about in general the.net ecosystem is you use what's best for you right whatever your needs are so if it is today you know dot ml or if it's avalonia or Zuna like all that mvvm code all that stuff is going to be the same just the UI will be different stack in general but what architecture am I using let's ask uh this is just using mvvm style coding with data binding so how it binds to the UI pretty much of what's there and then when things update the UI updates automatically so uh which is nice yeah that's what I'm using that helps then we're gonna change on let me see here where's my where's my thread view my search foreign you gotta set it think oh that should work oh that's uh no not as much but maybe 10. 15. I was like kind of seeing like what I need on this thing here we've got a little bit too much there we go two a lot of that's just styling at the end of the day divyesh was asking about UI there I mean out of the box they're just controls right so you know to stylize and make it look better but you should look at you go to Javier Suarez Microsoft yeah look at you want inspiration for Stuff take a look at the where's it at repose awesome.net Maui is that the thing no no it's the showcase where's that wanna how to type it in he's got he's got too many things Javier yeah take a look at this puppy scroll through some some different uis things that people are building get some inspiration in general that's in here some news apps some different apps all sorts of stuff there's a little bit of everything in here oh that's a nice weather app a little bit of everything that's in here that's really nice that's really nice Maui planets yeah all sorts into good stuff give that a good go all right I'm gonna get out of here folks thanks for all the feedback the help coding and thanks jet GPT for being there for us appreciate that um this is all up on my GitHub so I'm gonna go ahead and push these changes up there now uh so refactor and add in the search page and there you go um deviash I don't know you'd have to go you know into take a look at the uh session that David and Maddie did talking about a whole bunch of stuff there so yeah they talked about a whole bunch of dynamic customers so go there all right cool thanks everyone for tuning in of course if you want more videos I put them on here on my YouTube just about every week I've been doing some live streams I'm gonna get back to some videos of some time today I'm gonna do that after a lunch after some meetings kind of taking a half day today mostly so I'm coming down from all the conferences so kind of doing stuff yeah I learned a lot too Danny cheers so we'll keep that stuff going if y'all like this stuff and uh appreciate the the subs and the follows and all that stuff love you a great a great weekend uh wherever you're at in the world and I'll check y'all out later bye bye [Music]

Channel: James Montemagno

Views: 3,967

Keywords: .net, .net 6, .net maui, blazor, c#, james montemagno, maui tutorial, web assembly, web development, wordle, xamarin, xamarin.forms, conference app, dotnet maui, app building, migrating, xamarin forms, dotnet maui migration, migrating xamarin.forms, migrating xamarin forms

Id: mHNO4yVtHPs

Length: 154min 58sec (9298 seconds)

Published: Fri Jul 21 2023