 Hi, Sayada 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 we'll 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 calls into 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 are under the .NET Core node. And we want to create a razor pages project here. So that's ASP.NET Core web app. I'm going to click Next. And then I'm going to give it a name. 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. And 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 kind of 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. Let me 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 sort of 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. And 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 text that you would use for the emoji. And then an image that represents that emoji. Here I've got the full result open to my browser. So this is what we're going to be doing. Let's go and create the GitHub emoji service class now. I'm going to switch back to Visual Studio for Mac. And the first thing that we want 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 in 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 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 iGitHubEmoji service into the constructor and 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 iGitHubEmoji service 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 onGit method here. All right, so now we want to move on to populate our onGit method here. When onGit 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 onGit method. Let's take another look at this GitHub Emoji service. So this is the function that we're going to be calling here. GetEmojis and it's async and it returns a task of iListEmoji. So going back to the page model I want to change the return type here and I want to replace this with async task. And now we want to call that method. All right, so now we've created our onGit method here. All this does is call 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.cshtml 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 kind of 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 razor and HTML portions of this application and this will render the emoji image as well as the key. So I'm going to go ahead and save this file with command S. I'm going to open the CSS file here. I 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 and www.css by default. I'll replace that file. And 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 we'll 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 if we can find any kind of interesting emojis here. You know, let me go and show you my, let me show you my daughter's favorite emoji here is the owl emoji. She really loves these owls. All right, so that's pretty much it for this video here. This is Sayed Hashimi with another video for Visual Studio for Mac tips and tricks. Please keep an eye out for more videos in this series.