>> Hi, Sayed Hashimi here.
I'm going to show you how you can build
your first application with Visual Studio for Mac.
In this video, we'll be developing an ASP.NET Core,
Razor Pages, web application.
Let me quickly show you this website that will be creating here.
So, here I've got a website that
displays the GitHub emojis that are available.
You can see there's quite a few here,
and this just cause them to the GitHub API
to get the information and image about the emoji.
So, this is what we're going to be developing today.
All right, so let me go ahead and switch over to
Visual Studio for Mac and then we'll get started with this.
The first thing we have to do is click on "New Project",
and this will bring up the new project dialog
and the ASP.NET Core projects under the.NET Core node,
and we want to create a Razor Pages project here.
So, that's ASP.NET Core web app.
We're going to click "Next", then I'm going to give it a name.
So, I'll say, "GitHub emojis."
Then we'll click on "Create" here.
All right, now our project has been successfully created.
I'm going to go ahead and run this,
just to take a look at what we
get by default, and then go from there.
All right, so here's what we get out of the Razor Pages template.
We've got a basic website with a few different pages here.
So, let's go ahead and close out of this,
and go back to Visual Studio for Mac and start
developing our project. We stop this.
All right, the first thing we want to do is go
and customize the layout page.
The layout page contains a lot of shared components here.
So, you might have noticed we had
a header at the very top of the application.
There was also a footer and that stuff.
So, we'll get rid of that and the layout file
also will bring in your CSS and JS files.
This is a pretty basic application,
so I don't need everything that's in here,
I'm just going to keep
the CSS file and get rid of everything else.
Then for the content,
I really just need render body.
So, I'm going to extract out render body,
put it in here and then just get
rid of everything else that's here.
Now that we're done customizing the layout file,
what we need to do is create a class that will be responsible for
calling the GitHub API for the emojis.
Before we do that, let's take a look at
the API that we're going to be calling here.
Here, I have the documentation for the GitHub API emojis endpoint.
So, here we can see that it returns
a JSON dictionary of emojis that are available.
So, we've got the key.
That's the texts that you that you would use for the emoji,
and then an image that represents an emoji.
Here, I've got the full result opened in my browser.
So, this is what we are going to be doing.
Let's go and create the GitHub emoji service class now.
So, when we switch back to Visual Studio for Mac,
the first thing that we wanted to do before we create
our emoji service class,
we want to create a class that will
basically encapsulate the different properties that an emoji has.
So, I'll say new class,
I'll name it emoji,
and then we want to create two properties here inside this class.
I'm going to use the prop snippet, that's P-R-O-P.
So, when you invoke this,
you'll type in P-R-O-P and then tab tab.
Now, I've created two different properties, one is called key,
that's the actual emoji string,
and then we've got the URL.
That's the URL that the image
is associated with that particular emoji.
So, now let me go ahead and- What I want to do now is I've already
created a class that we can use for the GitHub API emoji service.
I'm going to go into finder,
and we're going to copy this class into the project.
So, let me copy this file
and then I'll right-click in Visual Studio for Mac and say,
"Reveal in finder", and we just want to paste this here.
When I paste this, keep an eye out
to what happens inside the solution pad.
All right, so I've pasted that file and we can see it's
immediately available in the solution pad.
So, for.NET Core and ASP.NET Core projects,
all files that are in the folder immediately appear by default.
So, let's take a quick look at
this GitHub emoji service, it's pretty basic.
We will call the GitHub API to retrieve the emojis.
We're going to pass in a custom user agent
that's required for the GitHub APIs,
and then get emojis from- We will convert
the JSON dictionary into a list of emoji objects.
All right, now what I want to do is I want to register
this class as a service with ASP.NET Core.
But before I do that,
I want to create an interface out of
this because I don't want to be passing around
instances of this particular class but instead of an interface.
So, to do that, I'm going to right-click on
the class and select "Quick fix Extract Interface."
Here we can see it's offered defaults for both the name
as well as what items I want to include in that interface.
I'm going to go with the defaults here.
I can right-click and say,
"Go to declaration" if we're interested
in taking a look at what was generated for us.
I'm going to copy this name,
and now we're going to go and register
this class with ASP.NET Core.
All right, so what I want to do is I want to register
a singleton class here for this GitHub emoji service.
Okay, so now we've registered
our GitHub emoji service with Startup.cs,
and this will enable dependency injection.
So, now let's go and start customizing our index page model.
So, I'm going to go into the page Model,
and the first thing I'm going to do is I want to get
a handle of this GitHub emoji service.
So, I'm going to create a private field for this.
Now, I'm going to create a constructor for
this index model class and then pass
in the type that I would like to be injected.
So, here we've passed in IGitHubEmojiService into the constructor,
then when this page model is
created that will automatically be passed in through ASP.NET Core.
All right, so now we've created the index model constructor here
and we're accepting IGitHubEmojiService
as a parameter since we've registered that in startup.cs and
configure services that will automatically
be injected through dependency injection.
Now, we want to go through and customize our onGetMethod here.
All right, so now we want to move on to
populate our onGetMethod here.
When onGet is called,
we want to call the GitHub emoji service that we just
created to get the list of emojis and store that into a property.
So, first I'm going to go and create a property for this.
Now, let's go to customize the onGetMethod.
Let's take another look at this GitHubEmojiService.
So, this is the function that we're going to be calling here,
get emojis and that's async,
and it returns a task of ilist emoji.
So, going back to the page model,
I want to change the return type
here and I want to replace this with async task.
Now, we want to call that method.
All right, so now we've created our onGetMethod here.
All this does is called the emoji service and then assign
the result to the emojis property here.
So, now we're going to go in and start editing
the index.cs HTML file,
and we don't need any of this content here.
So, let's get rid of that,
and we don't need this either. So, let's go back.
So, here now what we want to do is we've made
a property available on the index model class here, so emojis.
So, with Razor Pages,
all the properties in those classes will be
available in the Razor Page as well.
So, now I have access to the emojis property.
So, all we want to do is loop through that.
So, to do that,
so we're going to actually
put that as a div with inside of another div.
So, let's start creating that.
All right, so here I'm just going to use
a razor for each statement to
loop through the emojis and then I'll
create a div for each particular emoji here.
The div for the individual emoji will have
the image as well as the label underneath it.
So, now we've authored the the razor and HTML portions of
this application and this will render
the emoji image as well as the key.
So, let me go ahead and save this file
with command s. I'm going to
open the CSS file here.
Actually, I have the CSS file already created ahead of time.
I'm just going to go ahead and copy this to the right location.
All right, so CSS files are wwroots.css by default.
I will replace that file.
One thing that I forgot about in
the layout file was customizing the title.
So, I'm just going to have the title for
this entire website to be GitHub emojis.
So, save that. So, let's go ahead and run our application,
and I'll do that with the play button.
Okay, now that I'm looking at this,
I realize I forgot to add the title here.
So, let's go back to the IDE,
I'm going to add my h1,
save that and then refresh the browser here.
Okay, another thing that I should do here
is I should also add a height and width.
So, yeah I just added a height and
width because we want this to be 128,
128 for each one of the images and then
it will be laid out well when we load it up.
So, let me refresh this. Let's take a look.
All right, so that's pretty much our first application.
Let's scroll down and see we can find any interesting emojis here.
Let me show you my daughter's favorite emoji
here as the owl emoji.
She really loves these owls.
All right, so that's pretty much it for this video here.
This is Sayed Hakimi with another video
for Visual Studio for Mac tips and tricks,
please keep an eye out for more videos in this series.