Hey, guys, welcome back.
In this lesson, we're going to be setting up our environment so we can get into recording with Maui.
No, Maui at the time of this recording is in preview, which means that we need Visual Studio 2022
preview version.
So you may already have Visual Studio 2022 installed.
You're going to need the preview.
If not, then no problem.
We're going to go through the basic steps or the most needed steps together.
So let's start off by going to Visual Studio Dot Microsoft.com and then when you're on that page, you
need to go to the latest preview and then download the preview.
So this will download that installer to your computer.
And when that launches, you're going to want to make sure that you're getting the preview.
So if you go over to the available section, you're going to see 2017, 2020 to 2019.
So you want to make sure that you're getting the one that is marked as preview, right?
So we can go ahead and get the community preview additions.
I don't have it listed here.
That's because I already have it installed.
So you can go ahead and launch the installer.
And what will happen is that it will bring up this window where it asks you which workloads do you want?
So you can look at the workloads I have.
But the ones that are essential for this course are is speed on it and web development because you will
be building an API.
So we do need the web workload and you definitely need the Maui workload now.
And we're just going to be playing.
Given that this is a preview, I'm sure that these are things that will be workload as the development
team gets better and better at releasing these workloads and these development parts.
But as it stands, I had to select the multi-platform up UI development, which is Maui, right?
I had to get the desktop development and I also had to get the new WP right.
Though after selecting all of those, I still went over to individual components and I searched for
Android and I made sure that I had all of these things ticked.
All right.
So some of them would have been ticked by virtue of you choosing the workloads, and some might not
have been.
So I made sure that I had the Google Android emulator tweaked and the C++ Android Development Tools
to do all of that.
All right.
So hopefully by the time you're doing this course, you might not need to go through all of that.
Or maybe the workload will select everything that it should select.
But I'm just showing you these things so that you can have the path of least resistance when going through
this exercise.
Now, once you have all of those things selected, the workload, the installation sets will probably
be closer to about 40 gigabytes.
So you can go ahead and install.
Hopefully you have enough space.
I'm confident that you do, but once you go ahead and install and are finished, then you can continue
this video.
Now once that is installed, you can go ahead and launch Visual Studio 2022.
Now what we're going to do is create a new project, and when that comes up, we're going to want a
dot net Maui app.
Now, if you don't have it to the left like I do, that's because I recently created one.
You can always search and it will filter that list for you.
So go ahead and select Dot Net Maui app and then you're going to give it a name.
So I'm going to call this one my first Maui app, right?
So you can go ahead and name it that.
And this is not going to be the project that we're going to be developing with.
This is just a project so we can set up our environment and get used to what Maui looks like.
All right.
So when Visual Studio launches, then we have the main page XAML file loaded for us.
Now, there are a few things that I want us to take note of here.
Once again, this is still in preview.
So there are going to be some kinks that I'm going to walk you through and hopefully you'll have the
same experience I'm having and you won't have any attrition completing these tasks.
So the first thing that I want us to be present of is the fact that this is XAML file, which is really
a dialect of examples.
So you can see here at the top is that the you know, that it is indeed an example file and this is
the main page.
So this is the sample page that we get with this sample with this spreadsheet template pretty much.
And if you just read it, you can see that it looks a little like each.
And of course once again both are based on XML and you'll see that each tab kind of makes sense.
It's created a standard English.
So here we see that we have a tag that says Image and we have some attributes for that image tag.
We have a label tag that has some attributes and another label and one.
Right?
No.
For every XAML page, which would really be like a literal page in your app that you would be creating,
you're going to have a code behind.
So we have main page XAML and then we have main page Zomlot CSS.
So in that case, file one, it is being initialized.
So if you've ever worked with WP, if are Windows forms, then that kind of code would kind of look
familiar to you.
All right, so we have our partial class main page and it's inheriting from another class called Content
Page and it has a global variable or global to the class at least we have our constructor, which is
initializing all the components and this is just a method that runs in the back, initializing all the
controls that will be used throughout the application after all this particular control.
Right.
And then we have a method here that is seeing uncomment or clicked.
Now, this is what we call an event.
So on contact clicked is an event or a method that will be called.
Each time the button gets clicked.
So we have the button control here.
Let me zoom in a bit to make sure that we can see.
So we have our button control, we give it a name.
So that's one of the attributes, right?
So this name attribute allows us to reference it from the code behind.
So if we wanted to change something about the button or the label or anything that we defined here,
we make sure we give it a name.
Then we have the text that the button has, and then we have semantic properties that hint.
And then it tells us that, okay, it counts a number of times you click and then clicked.
That would be our click event.
And then it says When it is clicked, call this method.
So when clicked, call on counter or clicked, what is on contact clicked.
Well, that is the method that we have here.
So this method takes information about who calls the event and what kind of event triggered it.
So here we would be able to know that the button call the event and it was triggered by a click event
and then it does an operation where it increments the codes that was previously defined and then it
sets the text based on whether the count is equivalent to one or greater than one.
And then it sends a message to the semantic screen reader and says, Announce the counter button.
Text.
Right.
So in other words, we change.
So here's Contra Beaton.
I said one.
What's contribution?
What's his contribution?
That's the name that we give to the button.
So here we're saying when clicked, get the button changed its text to be whatever I want it to be,
and then announced to our screen that the text of the button has changed.
Right.
So that semantic screen reader is going to be a word.
It's a bridge between our code behind and what we see visibly on the app.
Right.
So that's what that is for.
No other files include program that see us.
So this is the bootstrap, right?
So with most, if not all C sharp programs, they'll have a program that sees whether it's wind farms,
WPA off or speed up.
And it's going to have some form of program that says with a mean method that is going to run initially.
So this would represent that kind of file in and I'm always up and then it's going to be it's going
to create the Maui app.
It starts up a builder and then it says, Use up and we'll see what up is that?
Zumba is right here.
So it's saying use that, configure funds and then build.
All right.
So what is up what does up to says jump over to up up that zoom is one of those base files.
So you don't want to delete these files.
These files are very essential.
Essentially, we're just declaring some namespaces.
It knows what its class is, so it's not up.
So that's why we're able to call it once again in the code up, right?
And then it defines some application resources, some styles and colors, etc. and that is what our
up XAML file is for.
We also have the app shell.
The app shell once again defined some namespaces and then this is the content the homepage is supposed
to be main page, so we're sending it to main page as soon as upload.
So if you wanted to create a different homepage, you'd have to make sure that you tell it that it's
no longer main page.
It's now the page that I have created or the XAML control that I created.
Right.
Other folders, we have resources.
So what happens?
Well, let me go to platforms first.
So what happens with Xamarin?
Because MIUI is basically a replacement for Xamarin.
And Xamarin was a pioneer in cross app platform development, where it gave you the ability to have
one project with one code base, one code base being just C-sharp to service multiple mobile interfaces
on mobile systems.
Now what happens is that Malawi, instead of requiring you to create a different project per class with
Xamarin, I would have to have a project for the Android out of the project for iOS, etc., etc. Instead
of doing project, project, project, it gives us one project and for whatever unique resources we
need for that particular mobile OS, we have a folder.
So instead of multiple projects, we have one project with multiple folders that are capable of storing
the specific instructions and resources on whatever are required for that particular.
So we see here that we have the Android folder with iOS folder.
We have Tizen, which I think is Samsung.
We have Mac Catalyst and we have Windows.
Right.
So one code based to rule them all pretty much.
So that's what we see in the platforms folder and then in resources.
Now we can have all the resources we need because what would happen is that with Xamarin, you might
end up putting an icon in the Android folder or a project and forgetting to put it inside of the iOS
one.
Here we have one folder where we can put everything that we need so that all of our apps can look uniform
from this one code base.
Now you'll see here that I have this little warning icon for dependencies, and you'll see that I have
some dependencies missing and some stuff.
If I do a build right now, I'm going to get a bunch of errors.
Now, I scoured the Internet.
So once again, this is preview.
So I'm sure once it is released fully, I would have to rerecord this lesson and not have to put in
what I'm about to share.
But for now, while you're doing it in preview, what you want to do is go to the solution file.
Open it in terminal.
And then you want to type this in.
Dot net, put the space in there.
So that's more space, a dot net new global JSON and then dash dash SDK, dash version.
And then you're going to put in 6.0.300 dash preview.
So like I said, and make sure you put in those exact numbers, right?
So like I said, this is still in preview.
So this is just a work URL and to make sure that all the SDK is know which version they should be on.
Because once you're using with the preview of Visual Studio at this point as at the time of this recording,
it's defaulting to Norton.
It's seven, which is not yet outfitted and qualified for MIUI apps.
Right.
So just make sure you put this in as you see me with it here and then you can press enter.
And what that will do is create a global JSON file at the root or at the solution level, right?
So once we do that, we can do a control shift and B and allow it to rebuild itself.
And once that is finished building, then you'll notice that that warning sign is no longer there.
And all of our dependencies are now well, they're no longer warning you.
So that's a good sign, right?
So let us jump over to actually seeing what this app looks like when it is running.
So of top here at our playbook, I'm going to hit the current and then I'm going to choose that I want
to use the.
All right.
I paused just now because I didn't see what I was expecting to see.
So once again, I'm walking through every single step that I need you to be aware of.
If you only see Windows Machine when you dropped on this current and you're not seeing as many options
as I'm seeing, restart your Visual Studio so close Visual Studio relaunched a project and when you
do, chances are you're going to see what I'm seeing.
All right.
We also have access to Android emulators.
So what happens is that I had a few instances of the emulator device running already.
So many loads of tools.
You go to Android and then you can go to the device manager.
And then once that launch is, we will show you all of the emulators that you probably have running.
So I had three running.
All right?
I stopped this one and I removed the other two, which were launched from my previous experiments with
MIUI.
So between all of those actions, you should be able to get to this point where you're seeing all of
these options, right?
So I'm going to go down to the Android emulator and I'm going to select the Android emulator and then
I'm going to hit the play button because I want to see what this looks like on Android.
All right.
So here is our mobile app.
And if you look at it, use and look at it with the code, you'll be able to mark each element.
Right.
So here is our image, the PNG.
There we go.
We have the label Hello World.
We have the one that says welcome.
And then we have our button that says Click Me.
So when I click me, I set that breakpoint on the click event and you see it's hitting that click event.
So count is equal to zero.
On the first click we're going to see Click is.
One time and then it's going to be clear or announced rather.
So the semantic screen reader two updates.
I'm just going to hit five.
So it continues.
And you see here it says clicked one time, but then if I click it again, it's going to say, okay,
it clicked two times f five.
And there we go.
Clicked two times.
So that's pretty much how a maui app works out of the box.
That's how it works.
Yes, the setup might be a pain, but hopefully you'll get through this exercise.
If not, feel free to use that Q&A section and let me know.