Forem: Myles Broomes

Personal Project: Backlog Tracker

Myles Broomes — Mon, 01 Jul 2024 14:45:16 +0000

As someone who doesn't build nearly enough of my own projects, I thought I would try my hand at building something fun, using as many of the skills that I know as I could. I wanted to build something that I would actually use, and as someone who plays a lot of video games, I thought it'd be cool to create a web application that is able to allow users to track which games they're currently playing, which games they plan to play and which games they've completed. A "Backlog Tracker", if you will.

Project Management

The first step was to decide upon on the MVP (or Minimum Viable Project). The three most important features I decided that were needed were:

User's should be able to register an account
User's should be able to search against a large database of games
User's should be able to add and remove games to and from their backlog

The next step was then to decide what I would use to manage project tasks. I went with Trello as it would allow me to create cards for each individual task. I can also add labels and descriptions to each card to make it easier to organize them:

Building The Project

I made the decision to build the project using .NET as that's what I'm most comfortable using, as I use it in my day job.

It was then finally time to get my hands dirty with some coding. The frontend of the application is built using .NET Razor Pages. Razor Pages are split into a razor page containing the razor markup, and a C# class (known as the page model) where any necessary logic is included. For example, in this project the homepage is a simple page that, initially, just contains a search bar. Here is how the razor markup for that page looks:

@page
@using Microsoft.AspNetCore.Html
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    var user = Model.User.Identity;
}

<div class="text-center">
    <h1 class="display-4">Backlog Tracker</h1>
</div>

<div id="errorMessage"></div>

<form method="post" style="margin-bottom:1rem">
    <div class="input-group">
        <input class="form-control" asp-for="SearchTerm" name="query">
        <div class="input-group-append">
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
    </div>
</form>

@if (Model.GamesResponse?.Games is { Count: > 0 })
{
    <div class="row row-cols-4">
        @foreach (var game in Model.GamesResponse.Games)
        {
            <div class="col">
                <div class="card game-card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="@game.SiteDetailUrl" target="_blank">@game.Name</a>
                        </h5>
                        @if (!string.IsNullOrEmpty(game.Description))
                        {
                            <div class="card-text-container">
                                <p class="card-text">@(new HtmlString(game.Description))</p>
                            </div>
                        }
                        @if (user !=null && user.IsAuthenticated)
                        {
                            <a class="btn btn-primary" id="btn_@game.Id" data-game-id="@game.Id" data-game-name="@game.Name" onclick="addToBacklog(this,'@user?.Name?.Trim()')">+</a>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
}
else if (Model.GamesResponse?.Games is { Count: 0 })
{
    <p>@ViewData["NoResults"]</p>
}

The Model object is the page model which is processed in a separate file. Entering text into the search bar and hitting enter, makes a post request (handled by the OnPost() method in the C# page model), which makes an API call to the Giant Bomb API (more on that later) and then displays relevant data on the page:

public IndexModel(IGameService gameService, ILogger<IndexModel> logger)
{
    _gameService = gameService;
    _logger = logger;
}

public async void OnPost()
{            
    string? query = Request.Form["query"];

    if (!string.IsNullOrEmpty(query))
    { 
        try
        {
            _logger.LogInformation("Fetching games from GiantBomb API...");
            GamesResponse = await _gameService.GetGamesAsync(Request.Form["query"]);
            ViewData["NoResults"] = GamesResponse == null ? "" : "No Games Matching The Query!";
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, $"Error occurred while fetching games - {ex.Message}");
        }
    }
}

All logic that involves interacting directly with the Giant Bomb API is contained in the GiantBombService. As you can see, I inject the service into the constructor (using dependency injection) of the page model and then use it to call GetGamesAsync. The data from this API call is stored in the GamesReponse property (which is an object of type Response) on the page model class, which can then be used on the frontend.

I needed an API which would allow me to pull from a database containing information about video games so, after a bit of research, I came across the Giant Bomb API which does exactly what I would need. The user would search for a game within my application, which would request data about said game from the API then the application can handle the returned data as needed.

public async Task<Response> GetGamesAsync(string? query)
{
    var games = new Response();

    var client = _httpClientFactory.CreateClient("GiantBomb");

    var response = client.GetAsync($"/api/search/?api_key={_giantBombConfiguration.Value.GiantBombAPIKey}&query={query}&resources=game&field_list=name,site_detail_url,description,id").Result;

    XmlSerializer xs = new XmlSerializer(typeof(Response));

    using (StreamReader reader = new StreamReader(await response.Content.ReadAsStreamAsync()))
    {
        try
        {
            games = (Response?)xs.Deserialize(reader);
            _logger.LogInformation("Deserialization complete!");
        }
        catch (Exception ex)
        {
            _logger.LogError($"Error occurred during deserialization: {ex.Message}");
        }
    }

    _logger.LogInformation("Request complete!");

    return games ?? new Response();
}

As you can see, the data we receive from the API is in XML format so we need to deserialize that before being able to use it.

I needed a way of persisting user data so I decided to use Entity Framework and .NET Identity. This took out a lot of the complexity around doing things like setting up my own SQL database and building my own user authentication functionality.

The user would need to be able to add game data to their backlog - once signed in, they'd have the ability to click a button next to each game which would add it to their backlog. I decided to create my own .NET Web API to handle this. There is a JavaScript event listener on each button which would call my API and handle updating that user's backlog in the database. Here is an example of how that process works for the "AddToBacklog()" method:

@if (Model.GamesResponse?.Games is { Count: > 0 })
{
    <div class="row row-cols-4">
        @foreach (var game in Model.GamesResponse.Games)
        {
            <div class="col">
                <div class="card game-card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="@game.SiteDetailUrl" target="_blank">@game.Name</a>
                        </h5>
                        @if (!string.IsNullOrEmpty(game.Description))
                        {
                            <div class="card-text-container">
                                <p class="card-text">@(new HtmlString(game.Description))</p>
                            </div>
                        }
                        @if (user !=null && user.IsAuthenticated)
                        {
                            <a class="btn btn-primary" id="btn_@game.Id" data-game-id="@game.Id" data-game-name="@game.Name" onclick="addToBacklog(this,'@user?.Name?.Trim()')">+</a>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
}
else if (Model.GamesResponse?.Games is { Count: 0 })
{
    <p>@ViewData["NoResults"]</p>
}

This for loop adds onclick="addToBacklog(this,'@user?.Name?.Trim()') to each button, which calls the following function:

function addToBacklog(element, email) {
    const apiUrl = '/api/backlog/add-game-to-backlog';

    const requestData = {
        Email: email,
        GameID: element.getAttribute("data-game-id")
    };

    fetch(apiUrl, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
    })
        .then(response => {
            if (response.ok)
                return response.json();
            else if (response.status == 409)
                throw new Error("Game already exists in backlog!");
            else
                throw new Error('Network response was not ok.')
        })
        .then(data => {
            alert(element.getAttribute("data-game-name") + " successfully added to backlog!");
        })
        .catch(error => {
            var errorMsg = document.getElementById("errorMessage");
            console.error('There was a problem sending data to the API:', error);
            errorMsg.innerHTML = error;
            errorMsg.style.visibility = 'visible';
        });

}

/api/backlog/add-game-to-backlog is the location of my Web API which calls the AddToBacklog() method. It gets passed a UserDto object which is an object containing the email address of the current user and the ID of the game being added to the backlog:

[HttpPatch("add-game-to-backlog")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status500InternalServerError)]
public IActionResult AddToBacklog([FromBody] UserDto userDto)
{
    try
    {
        _backlogService.AddToBacklog(userDto);
        return Ok(new { Message = "Data saved successfully." });
    }
    catch (ArgumentException ex)
    {
        return Conflict(ex.Message);
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"An error occurred while processing the request - {ex.Message}.");
    }            
}

The BacklogService in this example is injected into this classes constructor (just like with the GiantBombService) and then can be used to handle interacting directly with the database. The AddToBacklog() method above is able to consume data from the request body of the API call and then send it off to the backlog service to be added to the database. A similar process is used when user's move games from their backlog to their completed games list. They click a button that has a JavaScript event listener, which makes a request to my API, which then moves the game from the backlog column in the database to the completed games column.

Unit Testing with xUnit

I wanted a way of incorporating unit testing into the project, so I decided to use xUnit and I have created a separate project which contains the test suite. Within these tests, I've mocked the backlog service which allowed me to just focus on the functionality being tested (the API controller in this case). For this, I used the Moq package and created the following object:

_backlogServiceMock = new Mock<IBacklogService>();

This then allowed me to mock each method from the service and how that method should behave when called in my test. For example, one of the things I wanted to test was, when the GetUsersBacklog() method is called in the API, it should return a valid list of game ID's when passed a specific email address:

_backlogServiceMock.Setup(s => s.GetBacklog("mylesbroomestest@hotmail.co.uk")).Returns(new List<string>() { "1234", "4567", "7890" });

This basically translates to when the string "mylesbroomestest@hotmail.co.uk" is passed to the GetBacklog() method, return a list of strings containing "1234", "4567" and "7890". Here's how it looks in action:

[Fact]
public void GetUsersBacklog_WhenCalled_ReturnsListOfGameIds()
{
    // Act
    var result = _controller.GetUsersBacklog("mylesbroomestest@hotmail.co.uk") as OkObjectResult;

    // Assert
    var gameIds = Assert.IsType<List<string>>(result?.Value);
    Assert.Equal(3, gameIds.Count);
}

Overall, this was an extremely fun project to build. It required me to learn several things I didn't know already and I feel like I've really expanded my knowledge of .NET, working with API's, dependency injection and unit testing from working on it.

Here is the repository of the completed project if you want to see the code for yourself: https://github.com/MylesB93/backlog-tracker/tree/master.

Thanks for reading and happy coding! 👨🏾‍💻

Entity Framework Core in .NET 7 7️⃣

Myles Broomes — Mon, 26 Jun 2023 18:32:32 +0000

I wanted to show a simple example of how Entity Framework Core works in .NET (specifically .NET 7 in this example). Entity Framework is what's known as an "Object-relational mapper" (or ORM for short) which allows developers to create classes that can be mapped to a database.

I've built a directory containing information about soccer players, teams, leagues and stadiums. The project (which can be found here) is a .NET core project and uses Razor Pages for the front-end views.

Below you can see a list of all of the players that have been added to the directory, and if I select "details" for one of the players, I can view further information (namely, which team they play for):

You can see how the players' Team Name matches against the name of the team in the application:

In my database, I want separate tables for Teams, Players, Leagues and Stadiums so the first step is to create classes for each of those:

    public class Team
    {
        public int TeamID { get; set; }
        public string Name { get; set; }
        public int LeagueID { get; set; }
        public League League { get; set; }
        public int StadiumID { get; set; }
        public ICollection<Player> Players { get; set;}
    }

    public class Player
    {
        public int PlayerID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int TeamID { get; set; }
        public PlayerPosition Position { get; set; }
    }

    public class League
    {
        public int LeagueID { get; set; }
        public ICollection<Team> Teams { get; set; }
        public int NumberOfTeams { get; set; }
        public string Name { get; set; }
    }

    public class Stadium
    {
        public int StadiumID { get; set; }
        public int TeamID { get; set; }
        public int Capacity { get; set; }
        public string Name { get; set; }
    }

The relationships of those tables is as followed:

One Team can have many Players
One Team has one Stadium
One League has many Stadiums

Each class has an ID property (which will represent the primary key in the database). Some classes also have an ID of another type (e.g. the Stadium class has an ID for TeamID). This represents a foreign key in the database. Also, you'll notice how the Team class contains an ICollection of type Player, and the League class contains an ICollection of type Team. When we create a class with an ICollection, the table will be represented as a one-to-many relationship in the database.

I've also created a separate class containing seed data, so we will have initial data in the database after running the application for the first time:

    public static class DbInitializer
    {
        public static void Initialize(TeamContext context)
        {
            if (context.Teams.Any())
            {
                return;
            }

            var leagues = new League[]
            {
                new League{Name="Ligue 1",NumberOfTeams=20},
                new League{Name="English Premier League",NumberOfTeams=20},
                new League{Name="La Liga",NumberOfTeams=20},
                new League{Name="Serie A",NumberOfTeams=20},
                new League{Name="Bundesliga",NumberOfTeams=18}
            };

            context.Leagues.AddRange(leagues);
            context.SaveChanges();

            var teams = new Team[]
            {
                new Team{Name="Paris Saint Germain",LeagueID=1,StadiumID=1},
                new Team{Name="Tottenham Hotspur",LeagueID=2,StadiumID=2},
                new Team{Name="Real Madrid",LeagueID=3,StadiumID=3},
                new Team{Name="AC Milan",LeagueID=4,StadiumID=4},
                new Team{Name="Bayern Munich",LeagueID=5,StadiumID=5},
                new Team{Name="Chelsea",LeagueID=2,StadiumID=6},
                new Team{Name="Internazionale",LeagueID=4,StadiumID=4}
            };

            context.Teams.AddRange(teams);
            context.SaveChanges();

            var players = new Player[]
            {
                new Player{FirstName="Lionel",LastName="Messi",TeamID=1,Position=PlayerPosition.Midfielder},
                new Player{FirstName="Harry",LastName="Kane",TeamID=2,Position=PlayerPosition.Forward},
                new Player{FirstName="Vinicius",LastName="Jr",TeamID=3,Position=PlayerPosition.Forward},
                new Player{FirstName="Rafael",LastName="Leao",TeamID=4,Position=PlayerPosition.Forward},
                new Player{FirstName="Joshua",LastName="Kimmich",TeamID=5,Position=PlayerPosition.Defender},
                new Player{FirstName="Enzo",LastName="Fernandez",TeamID=6,Position=PlayerPosition.Midfielder},
                new Player{FirstName="Lautaro",LastName="Martinez",TeamID=7,Position=PlayerPosition.Forward}
            };

            context.Players.AddRange(players);
            context.SaveChanges();                      

            var stadiums = new Stadium[]
            {
                new Stadium{Name="Parc de Princes",TeamID=1,Capacity=50000},
                new Stadium{Name="Tottenham Hotspur Stadium",TeamID=2,Capacity=60000},
                new Stadium{Name="Santiago Bernabeu Stadium",TeamID=3,Capacity=80000},
                new Stadium{Name="San Siro",TeamID=4,Capacity=75000},
                new Stadium{Name="Aliianz Arena",TeamID=5,Capacity=75000},
                new Stadium{Name="Stamford Bridge",TeamID=6,Capacity=40000}
            };

            context.Stadiums.AddRange(stadiums);
            context.SaveChanges();
        }
    }

Once the Initialize() method is run, you can see it first checks context.Teams is populated, and if it's not (i.e. if this is the first time we're running the application) it creates several objects and saves them to the database. The TeamContext class is a class that inherits from Entity Framework's DbContext class and is used to define how we want our database to be setup. You can set which tables (DbSet) should be created from which classes and anytime we want to update our database we can access this object (e.g. in our DbInitializer above we're adding to a list then calling context.SaveChanges() to save those changes to the database.)

    public class TeamContext : DbContext
    {
        public TeamContext (DbContextOptions<TeamContext> options)
            : base(options)
        {
        }

        public DbSet<Team> Teams { get; set; }
        public DbSet<Player> Players { get; set; }
        public DbSet<League> Leagues { get; set; }
        public DbSet<Stadium> Stadiums { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Team>().ToTable("Team");
            modelBuilder.Entity<Player>().ToTable("Player");
            modelBuilder.Entity<League>().ToTable("League");
            modelBuilder.Entity<Stadium>().ToTable("Stadium");
        }
    }

As mentioned before, we're using Razor Pages for the views. .NET makes creating the views for Create, Read, Update and Delete of entities really easy. I initially created razor views for the player entities in Visual Studio like so:

Right-click on the folder where you want your views to be
Hover over "Add" and select "Razor Page"
Select "Razor Pages using Entity Framework (CRUD)" and hit "Add"
In the dialogue that appears, set "Model Class" to whichever class you want to create razor pages for (Player in my case)
Select your context class as the "DbContext class" and hit "Add"

Visual Studio will then create some razor pages for you:

When you run your application, you'll be able to see all of the rows from your database:

Database:

Application:

I only wanted to give a simple preview of what can be done with Entity Framework, but if this is something that interests you and you want to go further in-depth with all the possibilities, I recommend checking out the official docs where you can also find a great tutorial which will guide you through building your very own .NET Core web application.

Security headers - what they are and how to use them 🔒

Myles Broomes — Tue, 06 Jun 2023 14:26:25 +0000

I was recently tasked with improving the security rating on one of our websites. This involved a couple of things but the thing I want to focus on in this post is security headers. We scanned the site here and were initially given a rating of 'E'. Not good. So one of the recommendations was to add security headers which are headers contained in the HTTP response and can provide various different security benefits, such as only allowing iFrame's from specified sites to be embedded on your site or ensuring your browser is only accessed via HTTPS. By adding some of these headers, we were able to raise the security rating to an 'A'.

There are various ways you can add these headers depending on your server setup but the most straightforward is adding them in a ".htaccess" file:

# Security Headers
<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
</IfModule>

In this example, we're adding the "Strict-Transport-Security" header which, as mentioned previously, ensures your site can only be accessed via HTTPS.

Here are some specific examples:

X-Content-Type-Options
Prevents the browser from doing what's known as MIME-type sniffing, which is when the browser tries to figure out the content type by looking at the content of a resource, rather than looking at the Content-Type header. nosniff is the only possible value that this header can be set to.

X-Frame-Options
Specifies whether or not your site can be embedded inside an iFrame on other sites. Examples of possible values:

DENY -> Ensures the site can't be displayed in an iFrame
SAMEORIGIN -> The site can be displayed in an iFrame if all ancestor frames are from the same origin of the site

Referrer-Policy
Specifies how much information should be contained in the Referrer header (e.g. do we want the entire path of the referrer to be shown?). Examples of possible values:

origin -> Only the origin is shown in the Referrer header (e.g. if the referrer is https://example.com/test-page then only https://example.com is shown in the Referrer header)
same-origin -> Only show the referrer for same-origin requests (when we're being referred from the same site).

Strict-Transport-Security
Ensures your website can only be served over HTTPS. Examples of possible values:

max-age=<expire-time> -> How long in seconds that the browser remembers to serve the site over HTTPS
includeSubDomains -> Whether this header should also apply to subdomains (e.g. https://subdomain.example.com)

Content-Security-Policy

A list of rules (known as a policy) that apply to specified domains to protect against certain types of attacks (e.g. Cross-Site Scripting). For example, you can set script-src https://www.example.com which will ensure that only scripts from https://www.example.com can be run on your site. There's a lot you can do here which you can find out about here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

If you've done everything correctly then you should be able to see your header by viewing the network tab in your browser of choice:

Hopefully you found that useful and if so, feel free to drop a comment below and find me on Twitter - https://twitter.com/MylesB93