Get started building mobile & desktop apps with .NET | .NET Conf 2023 Student Zone

[Music] hi everybody Welcome to the net comp Student Zone we are very excited you're here welcome to the Mobile Track also going to do some desktop whatever you're into very exciting I am matd monilla I am APM on the net Maui team and I'm here with my wonderful colleague hi I'm Becky Buckler and I'm also a PM on theet team really excited to be here with you cool this is gonna be great so is gonna be great yeah I hope all of you were able to take a minute and um look at the GitHub repo beforehand with all the information about this if not give that a quick scroll there are some setup instructions if you want to code along with us but other otherwise feel free to just like hang out and watch and you can come back and do it all on your own time later too so we're going to hop into some slides here we are going to tell you what net Maui is and then we were going to start our little Workshop so here we are get started building mobile and desktop apps withn net Becky why don't you tell us a little bit about Maui and then just tell me when you want me to change the slide I would love to tell you a little bit about Maui um soet Maui uh is um I mean you can read it right here the most productive way to develop native apps that perform great on any device that runs Android iOS Mac OS or Windows from a single code base um so the big idea here is that you know you're building apps you don't want to type the same thing over and over again um so with Maui you can work from a single code base and deploy to all four of those platforms um it's super efficient you know your time is valuable you don't want to waste time and so Maui is going to do the lifting for you um so yep that's the that's I love that picture the single project single code base and you can deploy to those four different uh locations that's very exciting exting yes next yeah you can go to the next one um so lots of people use net Maui uh this is a slide of just some of our customers and like going through and seeing all the little logos there um we have way more than this but you know the slide only has so much real estate and we can't cover it with every icon um but uh a lot of really really exciting ones here um so next up we can go to the next slide I did I oh you did go to the next slide thank you my my little slide monkey it's right right right in line for the app that we're going to be building today um so net Maui is just one part of a huge ecosystem called net um So within net we have so many different tools to help you build a thing that you want to build so obviously we are really excited about crossplatform development and hopefully you are too and that's why you're here today but if you're interested in building for cloud building for web um gaming Internet of Things net has a tool for you and uh so you can definitely go check out those on the net learn website and do some investigation on your own there cool sweet click click you want to talk about vs or you want me to uh you can talk about vs cool all right um there are multiple ways you can do Dam Mai development if you want to be like really fancy and cool you can use just the command line and your text editor of choice but um we definitely suggest using either Visual Studio or Visual Studio code Visual Studio is our full.net IDE integrated development environment so it's got all the tools you could possibly imagine for developing your app um it has a bunch of AI assisted development which is of course all the rage right now there's remote collaboration it's kind of like editing like a word doc or a Google doc at the same time except it's your codebase which is fun um we have all the hot reloads so you can just change everything while your app is running you can go in and inspect the UI of your app and find out where in the code it's to find while the app is running just by clicking on it very cool um and there are a whole bunch of different ways that you can develop and deploy and debug your app including like using the the Android emulators if you want or directly to a phone if you plug it in um simulators and uh the Windows subsystem for Android which we're not going to talk about today but is really cool it's a way to actually run Android apps natively on your Windows machine so big fan of that and then the other thing is vs code we have a new net Maui extension it's still in preview we're working on it but we're really excited to bring Maui development to vs code um mobile development has a lot of like moving pieces because especially crossplatform you have the Android stuff and the iOS stuff and the windows and the Mac stuff all these different things so it is um a challenge to get all of that to play nicely and we're excited to bring that into vs code and hopefully make it a lot easier for you to do work there so again this is in preview the biggest difference in my opinion which besides visual studio and visual studio code is that with vs we like give you everything right off the bat um there's like no question you click a check box and it sets everything up for you and you're Off to the Races vs code is definitely more of a manual setup you got to you know pull everything in um you have to add more extensions if you want more features that aren't there in the Maui extension but I also know that when I was a student VSS code was actually brand new so that's how old I am but um for people who are like newer to coding and especially new to.net you're probably more familiar with vs code anyways so I if you're comfortable with it I say go for it I love using vs code so this this was me last year right out at grad school I was like oh yeah vs code and then they're like oh vs and I'm like yeah vs code so yeah they're different they are different mix up like visual studio and visual studio for code are different things I don't know why we named them almost the same thing but we did it's our pay grade cool so we are gonna hop into um we're gonna let Becky go over like what a Maui app is and what it looks like in code so please follow along um either on your machine or just watching the video there are links here to a bunch of different M resources we'll put it up at the end again the most important one here is the first one this way Uhn or aka.ms netcon 23 student repo and if you go into the Mobile Track there's a read me in that folder the start and the end um of the code we're actually going to show today and some setup instructions and all that amazing stuff also links to these slides and the recording of this talk if you want to watch it back or watch it on fast or slow um and so then yeah Becky I'm I'm gonna let you take over this is part of a whole Workshop that can take six to eight hours or longer if you're really slow like me and that's fine um and it goes through a lot of steps lots of Parts um but you will learn so much about how to use net Maui and all the different things that you can do with net Maui Maddie and I we are going to just give you a little bite-size version of this Workshop we're going to get you started today um little appetizer version of the monkey finder but by end of it you will have a little application that finds monkeys and that app can work on your Windows machine okay which is where I am right now it could work on your iPhone if you have one one I do not that's okay okay it can work on my Android device or if I'm emulating I could emulate those um or your your Mac desktop um it will work on all four of those and again you only need to write from a single code base it's just one project and you shoot it off into all four of those locations we got a little got a little buttons here we got the monkeys um and I am going to pass it back to MT so she can go through the solution Explorer over here very cool all right we will flip back to my screen on the stream please yay thank you um this is the app we are starting with today this is the start folder the start project if you will I'm in Visual Studio Windows right now I also have VSS macup so I will I mean excuse me VSS code Visual Studio code up so I will show you both as we roll um but I wanted to use vs window Windows to show you uh a little bit about how a Maui app is laid out particularly get you familiar with this which is the start um of this Workshop we're doing right now so what we give you is this pretty blank app called monkey finder very cute um and it has a whole bunch of things the coolest thing about Maui in my opinion is that we can share all of our resources for all the different platforms and resources means a lot of things it means things like images and fonts it also means like the app icon the flash screen so what actually shows in like the taskbar on the home screen um what shows up while the app is loading and then any other type of assets you need if you've ever done mobile development before particularly like Android mobile development you know that you have to have like eight different versions of an image in eight different resolutions to cover all the Android devices with Maui you can just put in one SVG or PNG file and call it a day and everything is great so um that's probably my favorite part of Maui there's a whole bunch of different things but the way that you write user interface your UI in Maui is with zaml by default you can use C entirely for this Workshop today we're going to use zaml it feels a lot like HTML if you come from a web background um but it's zaml and that was kind of what folks use traditionally with Windows apps so that's why Maui does that because it's net and if you do want to use net um C or even razor which is another way to write web apps you can do that with Maui we're not going to cover it today but it's an option and I thought I'd call it out um and the way that zaml works basically is you open a tag you tell it what you want to put in anything that with a star next to it by the way is from something called intell code which automatically recommends the thing that everyone uses the most in this situation so most pages are a grid shocker um yeah so you just open your tag we could make a grid I add like my property so for example if I wanted to give my grid a background color right and then I close my grid and that is zaml nothing too fancy and then you just Nest things in here so for example here I would actually want to do this and then reopen and close my grid so that I can actually start putting things in here right just keep inventing until I'm done pretty good so we are going to get started um actually editing this app so I'm going to delete this because it's going to get mad at me and then I'm going to um how am I going to do this first I'm going to show you how to run it here we're not going to run it here we're going to run in VI code as well so for Maui in Visual Studio Windows which is what this still is if you want to choose where to deploy it all you have to do is drop down this little play button up here um and pick where you want to so I have for example my Windows machine by default but I could also go in and select an Android emulator um a local Android device if I have an iPhone plugged in there are ways it's called hot restart if you want to Google it and try and figure it out yourself there are totally ways to deploy to an iPhone directly I could also pair to a Macbook lots of options that's a lot you have a lot of options very flexible and if you don't see your device on there you can solve that problem yes yeah there are we have really good docs yeah so I have the link for those but if you are in vs code which which means that you were either on Windows and vs code or on a Mac Oh I actually already started running this so let me stop um this is the extension you need the net Maui extension and it will pull in um not just this extension but these other two C and C devkit so don't be shocked when those pop up C is literally just like the language highlighting for the C language it gives you the auto complete and the fancy coloring and all that stuff c devkit um is actually how we handle Solutions in vs code that's kind of the most simple way to think about it a net project everything is based on a solution file um in this case it's the monkey finder solution and when you clone this repository it's got two solutions in it it's got the start and it's got the finish so it will pop up with a little notification here I don't think it'll show it to me anymore yeah it'll pop up one here and it'll say which solution do you want to use just select the start solution from the start folder it'll pop it and then it just it pops it up here easy peasy no big deal um at any point you can change it I Believe by using open solution if you just type that in to open this top bar in vs code control shift p it's called your command pallet it is lit so this I have the full Workshop not just the workshop we're doing today so I just opened the part one solution but then it shows up on the left here in your solution Explorer I could also edit everything just like the regular files but that's kind of cluttery I like the solution Explorer so we're going to do it this way um and then once I open a zaml or C file any of them I get these magical little squiggly braces in the bottom right here and if I zoom in here I have a couple options one is to set the project just ignore that because there's only one project the other is to set the debug Target and so on this machine it's a Windows machine so I only have an Android thing or my windows local device um on a Mac if you have xcode installed you could do Mac desktop or you could iOS simulators and those automatically pop up so when I highlight over this and I hit debug Target it gives me all of my options everything's build only right now because I don't have my Mac connected but um if I did if I was on my Mac and I had xcode installed it would give me all this did you say automagically I did say automagically I love that I'm stealing that 100% how have I not heard you say that before I don't know I wow automagically beautiful and then to run the app all you have to do you don't even have to create a launch Json file just hit run into bug and it will automatically select if it doesn't for you you can do it but it should automatically automatically if you will select the net Maui run configuration where is it scroll up it should just say net Malu sometimes it pops up here sometimes it pops up below um in the in the thing here but yeah just select the net Maui run at some point this will change to just be the C run configuration but as of right now it is the netm Run configuration so this is uh where we're starting with this app very basic at first when I this loaded I was like did I break it no you didn't break it but honestly it's still it's it's working okay which is more than what I can say for most of my code when I started off yeah I get that so we are going to jump right in and we are going to start um editing this and adding some UI so I am going to stop it in VSS code you are welcome to continue working in vs code the reason I am switching back to visual studio Windows is because I want to use something called hot reload which will refresh the UI as I write the app and because the VSS code extension is new and is in preview we don't have that yet hopefully if you are watching this sometime in 2024 just to go learn Maui we do have it in VSS code so you'll be having a great time but um right now I just I want to use vs windows and I want to pull up my notes please thank you part one all right so anything that I do that's IDE dependent by the way I will switch between so you can see both so I'm letting this run in Windows because I would like to um use the windows on my desktop and keep my Android emulator for vs code just a little tip there and I'm going to hide this because I don't need to look at this right now it's popping up everything's loading um this is a really cool Windows Visual Studio for Windows feature called live preview which lets you just see the app all in one screen I don't have to like keep dragging over the actual window so that you can see it and then move it off my screen or switch side to side or whatever so we're going to use this for now because it just helps with the the one screen look um and what we're going to do first is just display a list of monkeys that is the intro to this Workshop it is super basic we're going to have a good time um and this again will all be in the the read me of the full Workshop it's linked in the students own read me so you can follow along with this too so we are going to take a existing Json file I'm going to copy the link and I will show it to you in a second once I get it over um it is from the creator of this Workshop James Montagna who's wonderful and he gave us this wonderful Json that literally just has a list of monkeys baboon where it's from Asia Africa a quick detail of them um an image and then roughly how many there are and roughly the location of them and that we would use later for when we want to do uh it is called the monkey finder app called Mony finder app yeah so we're going to go into our models file here and I'm actually I'm GNA stop this so that I can edit the C without doing anything crazy sometimes adding in data while the app is running is not a great idea um and I'm going to go to the monkey. Cs file and this is literally just my C class that tells me what a monkey is right what are the properties that make up the monkeys that I want to show in my app and if you've done any other C development or even something like Java any objectoriented programming language this should feel familiar the syntax is always a little different between um different languages but I just C copy pasted this in public means that any anything in the app can get it string that's the type it is name and then just get and set C is very friendly you don't have to write out like get name equals name set name equals name or whatever it is for the language so um we are also going to deserialize the monkey Json that I pulled up from this file here right so we need to tell C that this is Json it's going to deserialize so we're going to just add in some nice code here copy paste it it's all in the thing um and all I'm adding is something called a serializable for Json if if you want to learn more about it Google it if you don't no big deal um so the first thing we're going to do I'm actually going to make sure this builds because who knows what I screwed up copy pasting let it go nice and I am using uh net 8 preview right now because net 8 ships on the 14th on the official day one of netcon and the student zone is the day before but tomorrow this will be regular done atate so very exciting I know I'm it's G great it looks like this is building okay so I will continue plugging along um we're going to go into our main page so in this view folder here let me zoom in there are two pages that we gave you even though they're both empty main page and Details page um in main page all I have right now is this content page class holding everything the first thing I want to do is I want to give main page the context of that monkey model we just made so xmlns XML namespace model is just what I'm naming it I'm calling it model um and then I'm giving it monkey finder do model which is literally this the name of this folder just with a DOT right so done going to hit save on that and then we are going to copy paste actually I'll type this out with you it'll be fun um we are going to use something called a collection view to show all of this and a collection view is just a smart list so it if it has a ton of data in it it recycles it it doesn't try to load like millions of items at once and crash the app it just Waits until you scroll to load those things um and you can also use it for very simple apps just like we're about to do here so let's open this we're going to give it what's called an item Source items source which is exactly what it sounds like um a source of items for this collection View and then we're going to feed it an array of monkeys so I will just copy paste um the the information from the Json file we were looking at but first i'm giving this array a type and that type is of the monkey model that we just popped in um right here so this is this model colon monkey is this model and then this monkey. C file that we gave it with the the name location details and that's basically telling this collection view that the array we're giving it is a monkey with a name an image a location whatever other things we want from that data source um and it'll be able to read it so I'm going to copy paste in some things here because it's easier than trying to type it all out oh but the indenting is horrible fun fact I just looked it up um the group name for a monkey because you were saying the array of monkeys I was like I wonder what it is it's a troop a troop of oh that's so cute fun fact that's actually really funny learn Maui learn about monkeys two for one special today well here's our troop of monkeys this is only three from the Json it's the baboom um and then the cap Capo oh God oh no I don't know how to say Monkey Names this words are hard yeah but this is literally just data we're hard coding in um nothing fancy with part two of the full Workshop which we're not going to get to today we will show you how to use this fancy Jon thing to pull it in from the internet but for today for part one we're just we're learning we're having a good time and then we are going to put in um what's called the item template so we gave our collection view the items source which tells it where to get the data from and eventually we will switch that out with something that calls it from the internet and then we give it the item template which shows it how to actually display the data the array we just gave it so um same thing we have to tell the items template item template what kind of data it's showing so same thing we just did before where we do um close on that so I can see yeah model monkey I don't need the squigglies model colon monkey and autocomplete already doing it for me thank you autocomplete um close that tag and like you can see it's examl so it's just a bunch of indents um and then we are going to put in a horizontal stack layout which is exactly what it sounds like it is a stack of items laid out horizontally we're going to give it some padding 10 close that and then I'm going to open this and now I'm actually going to the app so hopefully if all goes well we can see this come together as we type the zaml in give it a second to load if you want to open that live preview thing that I'm using um that shows the app inside of Visual Studio you go to debug Windows oh ah come back ZL live preview um and if you want to run this app in vs code this should be automatically updating magically yeah it's got it nice so this is all the code we're typing right now in vs windows it's just reading the file from the file system so it's picking it up totally fine in vs code um you would do the same thing that we did before you go to these curly braces down here select where you want to debug it um and then hit either F5 or the little play button with debug on it with the net Maui configuration got it got it good okay let's go back here so let's make these monkeys show up so we have our horizontal stack layout um and so the way that a collection view item template works is this is saying for each item in the array show it as I'm about to describe it so instead of having to say for each three monkeys this is how I want each individual monkey to look I'm going to do it once and it's going to go through every item in the array and Pop It Up Above each other below each other whatever so we want to show the image of the monkey um and we want to give it some settings so aspect like the aspect ratio we want it to fill the amount of space we give it hello why is that being mad at me there we go it's doing its best yeah it's it's having a hard time just like me one 100 my height and then we're going to give it a source and this is where the magic starts to happen um we're going to do something called a binding and what this is saying is bind to the image property of um what data you were using in this item template right now so go into your items source of this collection view look for anything called image for each item and then bind to that so data binding is something we get into in the next part of this like full Workshop but for right now we'll just we'll just look at this in call it a day I'm going to close that tag see if yay oh my gosh it shows right up that's very good okay and so you see this image of the this monkey pops up um I'm going to go and I'm actually going to click in the app on the other side and resize the window a little bit Yeah because sometimes that tricks it into refreshing the page so that all the monkeys show up because you can see it was just showing the last one in the list for whatever reason but um cool so now we have the image of our monkeys just like that and let's keep on plugging away so we are going to add um a label in this horizontal stack layout so what that will do is next to the name of the next to the monkey we want to say like it's name and its location so check in my notes start typing label you can see that um intell code already starts popping things up for me because it's very nice but I'm not actually going to use that do vertical options equals Center which is how you Center the text and then text color is whatever color you'd like I'm going to do purple because purple's the best color I'm going to close that tag open it up and then what I'm going to do is something called a formatted string or a multi-binding string excuse me um and what that's doing is letting me put multiple different pieces of data into one string without having to format it twice which is very nice so I'm giving the label the text property which it would have automatically if I didn't want to do this fancy multi-binding thing but that's what we're going to do we're going to do multibinding string format um and this is similar to if you've seen formatted strings in any other programming language this would be familiar to you but if not um the quick TLD of this is basically I'm going to give it two pieces of data and those two pieces of data are zero and one and zero is going to show the first piece of data and one is going to show the second piece of data just like that so I'm going to do binding um path equals and then right back to where we were with that monkey model we're going to do the name and the location oh and it's already popping up system.object that's not right H I wonder what I did wrong here location close the tag yeah there we go all I had to do was just uh finished writing it and it fixed itself I didn't realize I was going to do that so I'll bring this app over so we can look a little bit closer but all I was is tells you the name tells you the location just like that um and again this is all while the app is running I'm typing this so you can see sometimes it's funky while it tries to figure out what I'm trying to do um but once I finish writing like valid synx it works so the other thing we could do is we could put these strings on top of each other right now they're next just next to each other so we could just delete all of this our hard work um inside of this horizontal stack layout we could create a vertical stack layout which will show up and down it's going to be next to it um and then we're going to give it some vertical options to center it Center if you notice by the way I'm just typing like the first two letters of everything and then hitting enter and it just doesn't for me which is really nice um autocomplete is amazing so same deal here we're going to bind it to the monkey name um I'm going to give it a font size so it's a good font size let's do 24 let's give it a color of purple and then let's close that tag there we go and then we're going to do under it the next item in this vertical stack we're going to do the same thing except it's binding location F oh font size equals it a little bit smaller let's make it 18 and then let's give it a new text color let's do Becky name a color go red love it oh I have to close the tag that would have been so magical those I don't usually type so zoomed in so it's hard because I it really is but I want to make sure everyone can read my text which I understand so there we go now we have the name um the the location next to the picture all laid out beautifully it's already running we could do the same thing on Android and iOS one thing I will show you real quick that I love is if you're going through an app um a Maui app and you want to figure out like where or how they Define something you can actually click on the item in this live preview here click and it will take you to not only where in the zaml it's defined but also where it is in this thing called the live visual tree so you can see that this has my main page here um with this is the collection view we're in and then there's three horizontal stack layouts one two three for each of the monkeys we created we hardcoded into the zaml file here because collection view automatically does that and in each horizontal stack layout is this image which is where we got the monkey image and then now we also have the vertical stack stack layout with the text that we're showing so that is a quick and dirty intro to net Maui again there is a whole bunch of other parts of this Workshop I'm going to pull this up on my screen right now so you can see it um I will show you the link also in just a second but there's six parts to this all the way from just displaying this data locally which is what we just did to displaying it over the internet and using something called mvvm model view view model um to do that it's a it's an architecture that a lot of people use for Mal apps and then we talk about how to navigate between Pages how to actually get the location of your phone that you're running this on and then say what the closest monkey is um and then some other cool things with theming and making the collection view more performant and doing some more things so a lot yeah it's a lot yeah there's a lot of really cool stuff in here and I would highly recommend taking the time to do it or going through and watching the actual um for hour walkr on YouTube that our friend James mon Magna recorded so feel free to do that tons of resources here and tons of resources back in my PowerPoint which I will play from current slide including again the link to the GitHub that we were using for today which will have not only the basic start and finish projects that we just had but also links to that full four four six eight hour Workshop whatever you want it to be um the learn page for Maui itself so you can go through and click through our docs this is another link to that Workshop the full workshop and then of course a link to our learn training path which is a like a very guided like you watch the video you go along with it it's kind of like a really long version of this um exploring some different Maui Concepts so another thing this is the Student Zone so you can go see all of the other amazing Student Zone talks and repositories that are available to you um with this first link here there is a certification now for C so if you are totally new to C entirely and you kind of liked what you saw today you can actually go through and click through this and get a certification that says that you did the intro to C stuff and and you kind of know your way around which is really cool there's also of course the net beginner video series which I would highly recommend if you're just getting started with net um and definitely tune in for net comp for the rest of the week there are three days of sessions and Tuesday or Wednesday through Thursday it goes through the whole so we have people from all over the world Sharon C yeah it's amazing right 24hour like it's wild it's so cool and I'll hosting I should be hosting one of these days I don't know which day but I will be so you'll see it'll be fun it will be fun um and that's that Becky do you have any parting thoughts for our friends here man I'm just like I'm excited to see like what people create with this and then like yeah we gave you a little monkey f find ER app but if you go through this Workshop it's going to give you so many skills that you can take to build your own apps okay maybe maybe you're not that interested in finding monkeys and like we won't be offended it's okay um but like the tools that you learn in this Workshop are just like really really valuable so um definitely excited to see what people make and if you do make something like post it on social media and like tag us and we'll find it we'll we'll give you some high fives it'll be great yeah we always share these things with our team like when we see people building Maui apps so um tweet them or X them or threads them or Mast it on them toot them I don't know there's too many now Instagram them Instagram them that's D have an Instagram they do yeah and D has a Tik Tok and the the Tik Tok I think is more active you should Tik Tok them actually yeah you can on Tik to yeah but we're also here to answer any questions um you can hit us up at these are our our Twitter SLX handles but we're our names are the same on all social media you can find us also this is my GitHub handle yeah um and feel free to like join in live for any of the dnet conf sessions and ask your questions in the chat there we do live Q&A at the end of every session so um that's a great way to interact with the team and definitely like Becky said let us know what you build and if you liked using Maui how you like using the VSS code extension how you like using visual studio anything we're happy to hear yeah we we love hearing from you guys and like also if we don't have something that you want if you're if you're Jones in for something let us know um so we wna we want to make Maui awesome for you yeah sweet so that's it thank you for joining and enjoy netcon for everybody [Music] bye

Channel: dotnet

Views: 2,989

Keywords: .NET

Id: lFmFJZIgOvw

Length: 36min 56sec (2216 seconds)

Published: Wed Dec 13 2023