Getting Started with MAUI in Visual Studio Code

on today's Visual Studio toolbox Maddie is going to show us how to use Visual Studio code on a Mac to build Maui apps hi welcome to visual studio toolbox I'm your host Robert Green and joining me today is Maddie monila hey Maddie how are you hey I'm good how are you I'm fantastic we're gonna talk Maui today we are it's G be fun specifically uh we know that with Mau you can build applications that run on multiple platforms you can also build those applications on multiple platforms like Windows and Mac but rumor has it that visual studio for Mac is being uh retired and so the question on everybody's Minds is what's a poor Mac developer as if there is such a thing the machines are expensive what is a Mac developer supposed to do oh question you're gonna answer but before we do that not that you need any introduction but why don't you introduce yourself and yeah tell folks who you are um oh yeah who am I I'm Maddie uh I am a product manager on the net Maui team I was on the zamarin team which is actually the same team so very cool I'm coming up on year six which is kind of insane nice um and yeah lately for the past year or so actually I've been working on what we're going to show to today as part of part of my job I do a whole bunch of things um but generally I work in developer productivity and obviously developing on a Mac is a really big part of the Maui story so yeah cool so what have you been working on what is the answer to the question so exciting so we finally have a visual studio code experience foret andet ma developers so we've had the C extension forever which is amazing um it used be called omnisharp now it's just C and it's open source and it's this all new like language server protocol LSP rosin based beautiful intellisense and autocomplete and all that stuff for c um we built on top of it the wonderful Visual Studio team and net tooling team built something called C death kit which basically gives vs code the ability to understand a solution file I know it does more than that but when I explain it to people I just think oh I can open a DOT sln or a CSR in Visual Studio like knows how to look at this Visual Studio code knows how to look at this right um and then we on top of that built the Maui extension which we're affectionately calling Maui devkit even though it's just called do net Maui okay and that gives you the ability to take that solution or project or whatever it is and pop it onto any of the valid Maui targets so Android iOS um Mac OS and windows simulators emulators physical devic your local machine whatever makes sense for your workflow um and it's been fun so I will show you a little bit about how to get set up give you some of my tips for vs code I know this is Visual Studio toolbox so it feels a little weird to be doing vs code here you know what it actually doesn't because you know just my uh just what I do is I've done zamon I've done Maui and I have a Mac and I have built Maui apps on Windows and I say well I want to open that on my Mac and work on it on the Mac so yeah source code goes into get goes down to the mac and I open it up previously in visual studio for mac and I can work in both environments and now what I think you're telling me is I can now just use Visual Studio code with the c devkit and the Maui extension and then I can build it up in Windows and visual studio open it in the mac and visual studio code or build it on the Mac and visual studio codee open it on Windows and visual studio code or Visual Studio yep and fantastic Linux with vs code oh you can do Android specifically because it's not a Windows machine so you can't do windows development and it's not a Mac machine so you can't do Mac iOS but you can do Android on Linux I have seen it done cool yeah so all you need to do if you don't have any of these extensions yet you don't have to do much just search for doet Maui and install this one and it will actually pull in all the dependencies you need um you will notice that this is still in preview it is still a preview extension uh there is one more feature we are hoping to land which I will talk about before we flip it out of preview but C devkit itself is not in preview that is stable and out there with all couple millions of downloads very cool um and we have both pre-release and release versions of everything so pre-release is weekly release is monthly is um okay so just a heads up still in preview and there's a bunch of instructions here there's links to the docs but we don't need to read through this because I'm going to show them to you we are going to start by just creating a project so if you open a regular old window with nothing else open in vs code um it is going to give you this option now in your Explorer to create AET project but if you don't have that option or if you're in a different window or whatever it is I'm on my Mac so it's command shift p if you're on your windows it's control shift P that is how you open the command pallet you can search net um or you can search new project and net new project will pop up so click and then it's going to give you all the options here net Maui right up top definitely because it's the best and not because it starts with a period um I'm going to pick where I want it so I'm going to put it in my source folder with all my other sample apps my Maui app one and my Maui app two and just to be clear you are on a Mac right now but the experience in Windows is virtually the same UI right yep it is pretty much the same except whenever I say command you should hit control right okay um so what I name this vs toolbox demo press enter and so what this is doing is it's just creating the same thing as if I did net new Maui on the command line but vs code doing it for me um and then I have my regular VSS code Explorer with the uh all of the files and the solution file and all this stuff but this is where C devate starts to get useful so what this is just doing is giving me like my File Explorer version of this I'm going to minimize it and once it realizes that there's a solution or a project in it vs um T devkit will pop up the solution Explorer window and then if I'm a net developer right which I am especially with Maui this is a lot more familiar to me right it has the dependencies node um it has rightclick actions for like build and rebuild and clean my zaml C files are nested under my zaml files just kind of the things you expect um which is really nice and yeah it just a little bit cleaner for me you know and none of the other files that are in there get ignore if you have that kind of stuff like we don't we don't show any that the solution what is vs code pets by the way oh my goodness VSS code pets is the best extension you can create little Sprites if you click on mod it's the netbot by the way and then they kind of dance around and then you can throw a ball and they catch it truly the best extension I was just at a conference um in sweat ug in Sweden amazing conference and I met the guy Mark who has designed a bunch of these Sprites also the clippy one uhuh and I literally like I think I scared him I was like you're the guy who does the vs code Sprites and he I am and I'm like so anyways this is VSS code pets it is truly best so look he's gonna catch it good job clippy oh mod got him all right anyways but we digress we digress um okay so setting this whole thing up so we have a nice pretty little walkthrough so command shift p again command pallet um if I do walkth through vs code let's any extension and there's also built-in walkthroughs I'm going to scroll for the one that says get started with net Maui and it will show me all the steps yeah to get started with it um and so you can just click through these you have to sign in with your Visual Studio subscription for c devkit um including community so if you don't pay for it that's fine you just have to have an account um make sure that you have net installed so I already had net installed on this machine um from just downloading it from the website and you can click on this link uh we also install it for you automatically if you want us to do that and then um in the built-in vs code terminal we have this little beautiful little open Terminal button which I love also uh control shift back tick is apparently the hotkey which I never remember um I ran net workload install Maui right which is just how you install workloads from the command line what's nice is if you're on Windows and you already have visual Studio you can just check the Maui workload and everything plays nicely right um and then with Maui that that would be on the Windows side all I had to do to develop a Windows app but with Mai we also have the mac and IOS and Android dependencies so to do that Mac and iOS is going to be your easiest path on a Mac all you have to do is go to the App Store and install xcode which is the iOS and Mac development tool right um it takes forever to install so if you are following along with me right now it takes forever to update as well oh my goodness it do yes every time there's an update I'm like there goes my afternoon but uh if you're following along like pause the video install xcode go watch like two episodes of your favorite show and then come back and then once X cod's on um all you have to do is just open it up um make sure that the xcode uh command line tools are installed which is just a quick command it's all in our Docs and then you can see the online docs right here and then that's good um Android is a whole other Beast there are about eight million ways to install Android um you can download Android Studio which is Android's native IDE and it gives you a bunch of nice little helper things there's actually some extensions I've been using um there's like an Android SDK manager um and Android virtual device managers that I've tried out a bunch of these and a lot of them work really well for kind of managing my Android dependencies without an ID e but I'm a command line person so I actually go I install the Android command line tools you can see my errors hold on control c um oh turn off my emulator let's do this we'll just start a new tab shell new tab new tab um and Android by default on a Mac installs to library let me Zoom this in too no this one Zoo bigger um by default it goes to where am I Library Android and then SDK and in the SDK folder there is a bunch of stuff called the command line tools you need 7.0 um and in the bin is if you're a command line person right you can use the avd manager and you can use the SDK manager to handle your Android stuff so we have the steps for that if you're not a command line person you're probably looking at this like oh my God I never want to look at this again and I hate you have no fear um Android Studio or using visual Studio for Windows built in Android managers are great um we also have kind of like a quick and dirty command that will install all the Android dependencies for the version ofn net you have um it is in the docs again so see those we'll in the show notes but bunch of different ways and then the Maui extension very politely helps you command shift p Maui um check that everything is set up so configure Android just if you have to like refresh it's going to analyze it and then it should tell you the status down in here so it's hopefully gonna find everything fine I don't know um but that's a good way to check that everything is sane so without further Ado let's do the fun stuff I don't want to look at that anymore um I'm going to open a zaml file file you can open a C file you can open a CS brouch file and the magic of the Maui extension all happens with these two teeny little curly braces down here wow yes this is the magic the Maui magic um and this is where you can set your startup project so if you have multiple projects which one you want to run and also where you're pluging to and So Pro tip with that little guy down there is you can pin them and since I'm always switching between different Target things I pin usually my debug Target so you click on it and it opens up here in the command pallet uh all the different things it finds on your device that you can validly deploy to so I have everything there I have a pixel emulator um a Mac my my Mac locally and then all of the iPad simulators and iPhone simulators that xcode brings in so make sure you install those when you open xcode yeah now xcode you install it and then you have to open it and then check off and then install a bunch more other stuff so so in Visual Studio for Windows is the concept of pair to Mac is there the same concept here so not currently because there's no way for us to actually remote that back into your Windows machine but there is remoting buil in in vs code so I could hypothetically pair this vs code to my windows vs code and do all of the coding and building stuff it's just once you get outside of the vs code window right like to a simulator or something we can't par that over so can I on on Windows vs code with the Maui extension on Windows can I build the Mac App taking advantage of the Mac that I have sitting on the same desk you can yep you can build it um there's a little bit of magic you have to do on your side to hook it all up but it does work I've seen a couple people do it we also give you the ability if you just want to build and make sure there's no errors you can always use the build only command I see okay so that's just like to sanity check that the code will build and run for all the platforms but um you'd have to literally like remote your vs code over or in code spaces too you can do the same thing so um there's nothing on a codespace for you to technically deploy to because the codespace is just vs code but you can still build and run or connect it locally and all that anyways let's start with my Mac um you will see here like I said you get some beautiful syntax highlighting and uh all the auto intellisense whatever you could possibly want I don't know what else it's going to give me here there you go got my intella code my little stars I have all the rosin magic what the one feature I mentioned that we're waiting for is uh we are fully rebuilding the zaml intellisense engine I'm very excited about it it is a long time coming it is going to be part of Roslin and the LSP like architecture and all that but what that means is right now in vs code you get like the dumbest intellisense known to man when you start typing it will literally just search in your file for words that are already in your file and suggest those so I have found it a little bit difficult to write zaml there are a couple other extensions net meteor is great that has like a very basic zaml auto complete so if you want to do that like now today but hang tight zaml intell is coming very soon okay got all the best people working on it um but just a heads up okay so now what I can do is I can actually run and debug this app click on this um and then when I hit run and debug or just hit F5 that's the shortcut in all of the visual Studios and codes to just start debugging your app um it is going to either pick a debugger or automatically pick the correct debugger it depends on your configuration if you've used the Maui extension before um currently there are two so if I show automatic debug configurations um there are two we have we have net Maui and then we have net it will just pop up as C but in here it's called launch C project you want to select Maui I know that's weird because Maui is c um soon they will be combined to just C so you won't have to see Maui anymore but just in case if you see it separately um but that already built and launched right here on my Mac this is just our like you know file new app y click it there you go very fun cool sample easy and then all I have to do to switch over to do this on iOS is just click this again pick a simulator I'll do the 15 Pro because why not net Maui let this build and run this is going to actually go and find the simulator on my machine and launch it you can see it's doing the um apple provisioning and signing for me so this is a question I get a lot too so I have logged into xcode with my developer account once and so it knows that I am an apple developer I have an account for simulators actually you don't need to do that but um if I was to ever put it on my physical device you have to have some kind of apple developer blah blah blah okay even if don't go through the store is that right yeah so they they won't let you sideo apps on devices unless they come from like a sane place and that same place usually involves having a developer account okay you don't have to pay for it though which is good just to test things to ship it you have to pay for it that's the whole other thing so it's taking a second because it's literally like building and packaging and moving it over to the simulator um and then it's loading up the simulator you see that pops up oh yeah Magic it's a slow one today it's okay it's it's later in the day in Boston so my computer wants to go to bed um now it has to start the whole thing up but you'll see the same exact app and if I launch this on Android and Android emulator again it would be the same exact app um we'll just give it a few seconds to pop up what else should I show you in here am I missing anything exciting from the extension um what about uh hot reload does it work the same way uh not yet okay again soon but um I have seen a lot of people using net watch it just kind of magically works so that's cool um I've also uh seen people like run it in VSS if you're on Windows and then edit it in vs code because they like using vs code better but as long as vs picks up the file changes it's still magically how it reloads it seen some cool things oh my gosh I should have prestarted this the simulator sorry so oh so you're saying that you run it in visual studio and then while it's running from there you open the code file in Visual Studio code and visual studio is smart enough to oh to know that it just reads the file even though something else changed it yeah nice to save and all that but it still works all right one thing you will see if you go to settings so extension settings um is it user settings let's find out we have the experimental uh C dev kit you go to extensions you go to C devit hot reload um is starting to work okay dev kit Maui's coming soon we have the extra layer of getting it onto the device or simulator right to communicate that but um you there's progress being made and I will show from the rooftops as soon as it is out but there are um settings for all of these separate extensions right so like you can go and set your Android stuff you're a debug server if you need it your verbosity if you're ever having issues with the Maui extension and you don't know why go to output and then go to the extension here this I did not know about for the longest time um this is actually telling me like I can update my Android SDK if I'd like oh cool so that's cool this is like the number one thing when things don't work I go to this this area same thing with dev kit um all that so I'm sure my emulator oh yeah this is well awake by now there we go same app I'm in light mode on this device and I'm on dark mode on my Mac which is why this has a white background the template for Maui automatically light and dark modes for you which is very nice yeah so that was that's a lot if you have any ideas suggestions issues anything vs codes report an issue is buil in oh report for an extension for net Maui and then you type this stuff in here and what it'll do is you'll hit create on GitHub it'll pop open a tab pre-filled with all the right tags and everything for it to be a bug filed on Maui so what's nice about that too is that if you have a bug you can go and search on microsoft.net tools DVS code something like that um if I hit create um and and there are bugs already filed so you can go and you can see other people's like reos whatever it is and pile on to those so cool cool yeah I think that's it I think awesome so uh C devkits in release and the Maui is in previous view yep and it's it will be a so there is a release version and then a preview version so what does that mean so pre preview is a tag separate from release and pre-release which I know is weird yeah but um we have preview everything no matter what is preview but you can switch to release which ships mon l or pre-release which is are weekly build so every week we ship out updates with bug fixes or whatever it is some weeks it's literally just like we're working on testing we're working on whatever it is um but you can always switch back to release which is monthly either way if you switch back to release does it still say preview it will yeah so I should be able to do that and then it's going to reinstall it I'll have to reload the window okay um but it will still say preview at the end so okay yeah the version changes a ga version is soon I would imagine soon soon okay yeah um like I said zaml intellisense is kind of the last thing and then hot reload will come shortly after but I don't I don't want to hold GA on that I feel like that's unnecessary to wait yeah so I just I personally cannot write zaml without intellisense this has been the most humbling experience of my life because I forced myself to use BS code only and I'm like oh my God I don't know Zam Works without Visual Studio telling me how to rate Zam yeah we're getting there all right very cool so this is this is really awesome yeah it's we have a long way to go I'm fully aware you know I know the setup is kind of a lot of steps like fumbling around in the command line is not what Visual Studio IDE developers really expect which is fair um and like you like you said like you know hun reload is a thing that we all love pair to Mac these kinds of things but the good news is like the foundation is really solid and we're really building this fundamentally to be like a vs code extension not like we're taking parts of visual studio and shoving it into vs code for fun so it's been a really good you know chance for us to refactor things and lighten up and make our code better um and the extension super fast and snappy and you know once all your dependencies are set up it's been a really good experience in a lot of ways it's clean I mean digital studio for Mac was awesome but one of the downsides this is my personal opinion here the following opinions do not necessarily reflect the opinions of Microsoft but it wasn't the same right it wasn't the same visual studio and I think visual studio code on Windows and Mac is the same visual studio code now it's not the same as Visual Studio but if you if I got forced to get really good at Visual Studio code I think that'd be a very good thing and then it's the same thing on Windows and Mac so actually I do this as a positive person yeah and you know if you're hiring people who are like JavaScript developers they're probably really comfortable with the vs code isms and you put them in vs and they're like oh my God I don't know how to fly the plane so it's like that those people we've seen a lot more comfortable and then it makes it easier for them to get into net because they don't have to learn a new tool chain they just have to learn C right which Prett very cool all right thanks so much for coming on and showing this to us thank you for having me hopefully I'll be back in like six months or something with a bunch of new features to show off again so we'll see absolutely absolutely all right we'll put a bunch of links in the show notes and hope you guys enjoyed this and download it play with it and we'll see you next time on Visual Studio [Music] toolbox

Channel: Microsoft Visual Studio

Views: 9,940

Keywords:

Id: _SEStDLKHMc

Length: 26min 54sec (1614 seconds)

Published: Tue Mar 12 2024