This post will walk you through getting OpenAI to summarize a single image. You should end up with and output like this:

Then we will go a step further to extract more specific data form a set of images, aand you should see an output similar to this:

Step 1

Create a simple console app in whichever IDE you prefer.

Step 2

Install the required Nuget packages and add them to the top of your Program.cs file:

// Package Microsoft.Extension.AI (9.1.0-preview.1.25064.3)
// Package Microsoft.Extensions.OpenAI (9.1.0-preview.1.25064.3)
// Package Microsoft.Extensions.Abstractions (9.1.0-preview.1.25064.3)
// Package Microsoft.Extensions.DependencyInjection (9.0.1)
// Package Microsoft.Extensions.Hosting (9.0.1)
// Package Microsoft.Extensions.Logging (9.0.1)

using Microsoft.Extensions.AI;
using OpenAI; 
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Hosting;

Step 3

Set up the required app configurations and your AI chat completion client (IChatClient). I am using OpenAI for this example and I have my API key saved as an environment variable, you can change the model to whichever model you want to use.

var hostBuilder = Host.CreateApplicationBuilder(args);
hostBuilder.Configuration.AddEnvironmentVariables("OPENAI_API_KEY");

IChatClient innerChatClient = new OpenAIClient(Environment.GetEnvironmentVariable("OPENAI_API_KEY"))
    .AsChatClient("gpt-4o-mini");

hostBuilder.Services.AddSingleton<IChatClient>(innerChatClient);

hostBuilder.Services.AddLogging(builder => builder
    .AddConsole()
    .SetMinimumLevel(LogLevel.Trace));

var app = hostBuilder.Build();
var chatClient = app.Services.GetRequiredService<IChatClient>();

Step 4

Set up your user message with a simple query like “What’s in this image?”.

var message = new ChatMessage(ChatRole.User, "What's in this image?");

Then add your image using Contents.Add and add a new ImageContent like so:

message.Contents.Add(new ImageContent(File.ReadAllBytes("<path to your image"),"image/jpg"));

Step 5

Once you’ve set up your user message you will need to call your chat client (OpenAI) and give it the message with the image for context.

var response = await chatClient.CompleteAsync([message]);

Then write out the AI’s response to the console

Console.WriteLine(response.Message.Text);

var responseStream = chatClient.CompleteStreamingAsync([message]);
await foreach (var response in responseStream)
{
    Console.Write(response.Text);
}

Further Steps

The above steps will be used, however step 5 will be used differently, and this will not be stream the message, as it is predefined.

Step 6

Retrieve the folder of your images

var dir = Path.Combine(AppContext.BaseDirectory, "<path to your image folder>");

Step 7

Iterate over the files in the folder and select files with a specific extension, e.g. “.jpg” (this can be chnaged to whatever extension you want). The code inside the foreach loop will follow in Steps 8 - 11.

foreach (var imagePath in Directory.GetFiles(dir, "*.jpg"))
{
    ...
}

Step 8

Get the image name without it’s extension, this will then be added to your user message

    var name = Path.GetFileNameWithoutExtension(imagePath);

    var message = new ChatMessage(ChatRole.User, $$"""
                                                   Extract information from this image from camera {{name}}.
                                                   """);

Adding the image file will be the same as before, but instead of passing in the full folder path you will pass in the foreach loop’s variable imagePath

    message.Contents.Add(new ImageContent(File.ReadAllBytes(imagePath), "image/jpg"));

Step 9

Create an object class to store the relevant data

class TrafficCamResult
{
    public TrafficStatus Status { get; set; }
    public int NumCars { get; set; }
    public int NumTrucks { get; set; }

    public enum TrafficStatus
    {
        Clear,
        Flowing,
        Congested,
        Blocked
    };
}

Another example I did was with animals:

class AnimalsResult
{
    public int NumAnimals { get; set; }
    public int NumDogs { get; set; }
    public int NumCats { get; set; }
    public int NumRacoons { get; set; }
    public int NumMonkeys { get; set; }
    public int NumRedPandas { get; set; }
    public int NumMeerkats { get; set; }
}

Step 10

The above class will be used as the type parameter for the AI’s response (CompleteAsync), again add the user message to the chat completion.

    var response = await chatClient.CompleteAsync<TrafficCamResult>([message]);

Step 11

Lastly get the results of the response and output them to the console.

    if (response.TryGetResult(out var result))
    {
        Console.WriteLine($"{name} status: {result.Status} (cars: {result.NumCars}, trucks: {result.NumTrucks})");
    }

This is a good base point for using AI to extract data from images, and there are so many use cases for this feature.

Repo

• samples-microsoft-extensions-ai

References

• https://www.youtube.com/watch?v=qcp6ufe_XYo

• https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI/9.0.0-preview.9.24556.5

The aim of Microsoft.Extensions.AI is to make the code more reusable, meaning you can easily swap out the LLMs being used with one line of code rather than multiple.

IChatClient innerChatClient = new OpenAIClient(Environment.GetEnvironmentVariable("OPENAI_API_KEY"))
    .AsChatClient("gpt-4o-mini");

I have previously created an AI assistant using OpenAI in a Blazor app sample-ai-chatbot-blazor. I wanted to test out the new ways to add LLMs to my app. Although I only created this current app as a console app, I aim to add this in to my current Blazor app which is more user friendly.

I followed the examples in this YouTube video which was featured on .NET Conf event in November 2024, but specifically this video AI Building Blocks - A new, unified AI layer.

The chat app is simple, add the LLM, hardcode in a message and write out the AI’s response to the console.

Adding the function calling was a bit more complex, in the sense of more code was needed for setup. Function calling needed to be enabled on the IChatClient, I did this through a ChatClientBuilder.

var chatClientBuilder = new ChatClientBuilder(innerChatClient).UseFunctionInvocation();

IChatClient client = chatClientBuilder.Build();

I then added a class for my function, which had a method for “adding socks to a cart” and a method for getting a price. These function are then added to the ChatOptions under Tools, and then the ChatOptions is called with the AI’s response.

ChatOptions chatOptions = new()
{
    Tools = [AIFunctionFactory.Create(cart.GetPrice), AIFunctionFactory.Create(cart.AddSocksToCart)]
};

var response = await client.CompleteAsync(messages, chatOptions);

You also need to add some context to the AI’s prompt for it to understand the function.

For the example I followed in this video, the AI assistant essentially promotes socks and tries to sell socks to the user. The user can ask how much for X pairs or per pair and if the user agrees to buy an amount of socks the AI with simulate adding these socks to a cart and give the user a total price.

Here is an example of the AI assistant calling the function

Repos

• samples-microsoft-extensions-ai

• sample-ai-chatbot-blazor

References

• https://www.youtube.com/watch?v=qcp6ufe_XYo

• https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI/9.0.0-preview.9.24556.5

Words - for a word it might represent a meaning or relationship

Image - for an image it might represent colours, shapes or patterns

I have mainly used embeddings for Search capabilities, searching indexes/text. This is a good use case in the modern world of AI because embeddings measure the relatedness of vectors using their distance. It can be used to match your query to relevant documents. A small distance suggests that the vectors share a high relativity, whereas a large distance would suggest a low relativity.

Words like “cat”, “dog”, “rabbit” will be close together because they’re all animals or like “car”, “truck”, “bus” are all vehicles. Whereas, “truck”, “apple”, “mouse”, would be far apart because they are not related in any way.

Other use cases may be:

1. Clustering - grouping text strings by their similarity

2. Recommendations - items can be suggested based on text strings that are closely related

3. Classification - assigning text strings to their most related label

The embeddings would look similar to this.

 0.009120221     -0.011264438    -0.009196174    0.0696432       0.048002396     
 0.0050245933    -0.044683825    0.00040386632   -0.013437866    0.007174652     
 0.023650644     -0.008611919    0.022260118     0.027015954    0.0236857        
 0.014991985     -0.025613742    -0.033325907    -0.014162343    0.041832663     
 0.0064793886    0.03145629      0.01658116      -0.022937853    0.026712142     
 0.028324686     -0.0040342812   0.026782252     0.045478415    -0.012327782

If querying something from a HR handbook, for example, you should receive the relevant data points to your question. Below is a snippet showing the text using the embeddings and what it would return.

var candidates = new string[] { "Onboarding process for new employees", 
"Understanding Our Company Values", "Navigating the Office Layout", 
"Accessing Car Park E", "Dress Code Guidelines", "Using the Company Intranet", 
"Employee Benefits Overview", "Requesting Time Off", "Reporting Workplace Incidents", 
"Office Etiquette and Conduct" };

Query: company values

(0.6882966): Understanding Our Company Values
(0.38679683): Employee Benefits Overview
(0.31320179): Using the Company Intranet

References

.NET Conf 2024 - Day 1 https://www.youtube.com/watch?v=hM4ifrqF_lQ&t=7268s

The code samples I reference can be found here: https://github.com/rachkeenan/samples-microsoft-extensions-ai

What is a DNS?

The Domain Name System (DNS) is essentially a phonebook for the internet, it is a database in which domain names are stored and translated into corresponding IP (Internet Protocol) addresses. For example, if you were to search google.com (domain name), a server behind the scenes maps that domain name to a designated IP address. Google has many IP addresses linked to its domain, there are various reasons for having multiple IP addresses, such as load balancing, scale of operations and for backup measures.

Most of these IP address are IPv4 addresses, but some larger domains, like Google, may also have IPv6 addresses. The DNS server is the server your computer or browser uses to look up these different domains (IP addresses), they essentially manage the mapping of domain names to their corresponding IP address(es)

How do I check my DNS?

A handy way to check your current DNS server is to use your terminal (PowerShell) and the command nslookup, this will show you the server that your computer is currently using. As default, this would usually be your router but could be your internet service provider if there is no DNS set up on your router.

Can I change my DNS?

If you wanted to change your default DNS, which I previously mentioned is either your router or internet service provider, you can do so in your network settings on your computer.

1. Select the Network & Internet settings

2. Select Advanced Network settings

3. Click on Wi-Fi to open the dropdown

   • Select edit on the More adapter options

   • You will be given a Wi-Fi Properties window (like below), here select IPv4After clicking IPv4 you will be brought to this window

4. Internet Protocol Version 4 (TCP/IPv4) Properties window will open, here you will see default options selected. Here you will need to select the second option and add in your your preferred and alternate DNS servers, I used Google’s DNS servers. Select ok to confirm your changes

   

   

When you use the nslookup command after this change you will instead see the DNS server address for Google rather that your default DNS server address.

I wanted to use code examples so that I can illustrate that "INVEST" can be linked to the development of code and developers can benefit from these criteria.

A good user story will incorporate these 6 criteria:

Independent: a user story can be executed without reliance on any other user story, system or team.

Example: As a user, I want to be able to log in using my email and password.

[Route("api/[controller]")]
[ApiController]
public class AuthController : ControllerBase
{
    private readonly List<User> registeredUsers = new List<User>
    {
        new User { Id = 1, Email = "test1@example.com", Password = "password123" },
        new User { Id = 2, Email = "test2@example.com", Password = "Password321" }
    };

    [HttpPost("login")]
    public IActionResult Login([FromBody] UserLoginRequest loginRequest)
    {
        // Check if the entered email and password match any registered user
        var user = registeredUsers.FirstOrDefault(u => u.Email == loginRequest.Email && u.Password == loginRequest.Password);

        if (user != null)
        {
            // Successful
            return Ok(new { Message = "Login successful!", UserId = user.Id });
        }
        else
        {
            // Not successful
            return Unauthorized(new { Message = "Invalid email or password. Please try again." });
        }
    }
}

This user story can be developed independently, it does not have a depency on anything else.

Negotiable: the user story is open to change, aspects of the story can be removed or adjusted to make the feature quicker to develop. The specific details can be refined at a later stage in development.

Example: As a user, I want to be able to filter search results by price.

As developers we need to be able to predict future changes 🔮, and make our code as easy to adjust as the user story.

List<Product> searchProducts(SearchProductsRequest request){
    // code goes here
}
// called using
var request1 = new SearchProductsRequest() { Category = "clothes", MinPrice = 10M };
var request2 = new SearchProductsRequest() { Category = "clothes", MinPrice = 10M, MaxPrice = 34M };
var request3 = new SearchProductsRequest() { MinPrice = 10M };

searchProducts(request1);
searchProducts(request2);
searchProducts(request3);

// I am using an object because this allows for change within the code,
// and can be changed in one place without affecting any other usages of this object.
class SearchProductsRequest {
    public string Category { get; set; }
    public decimal MinPrice { get; set; }
    public decimal MaxPrice { get; set; }
}

This user story can be altered and discussed by the team and stakeholders. The specific requirements (e.g. price range) can be added at a later stage.

Valuable: it is important that the user story adds value to the end user upon completion.

Example: As an online shopper, I want a 'Wishlist' feature, so that I can save items for a later purchase.

User user = new User { Id = 1, Username = "Mary" };

Product laptop = new Product { Id = 101, Name = "Laptop", Price = 999.99 };
Product headphones = new Product { Id = 102, Name = "Headphones", Price = 79.99 };
Product phone = new Product { Id = 103, Name = "Phone", Price = 499.99 };

// Add products to the wishlist
Wishlist wishlist = new Wishlist(user);
wishlist.AddToWishlist(laptop);
wishlist.AddToWishlist(headphones);
wishlist.AddToWishlist(phone);

public class User
{
    public int Id { get; set; }
    public string Username { get; set; }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Price { get; set; }
}

public class WishlistItem
{
    public Product Product { get; set; }
    public DateTime AddedAt { get; set; }
}

public class Wishlist
{
    // code goes here
}

This elavates the users experience when shopping and provides a means to save items for future purchases, thus adding value to the end user.

Estimable: the team can understand the user story and can determine the effort and resources required to complete the feature.

Example: As a user, I want to receive notifications for all new emails recieved.

This story is clear for the team to understand and an estimation of effort can be determined.

Small: the user story can be completed in a small timeframe, usually 1-3 days.

Example: As a user, I want to see recommendations based on my browsing history.

    <ul id="recommendationsList"></ul>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var browsingHistory = [
                'Product A',
                'Product B',
                'Product C'
            ];

            // Get the recommendations list element
            var recommendationsList = document.getElementById('recommendationsList');

            // Display recommendations based on browsing history
            for (var i = 0; i < browsingHistory.length; i++) {
                var recommendationItem = document.createElement('li');
                recommendationItem.textContent = 'Recommended: ' + browsingHistory[i];
                recommendationsList.appendChild(recommendationItem);
            }
        });
    </script>

This user story is simple and concise and could be completed within a single sprint.

Testable: the user story can be clearly tested when completed to make sure it is in line with the acceptance criteria and works as intened.

Example: As a business, I want the 'Submit' button on the form to be disabled until all required fields are filled.

    <form id="myForm">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" required>

        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" required>

        <button type="submit" id="submitButton" disabled>Submit</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Get form and submit button
            // Add event listeners to form elements
            function checkFields() {
                // Enable the submit button only if both textboxes are filled
                var firstName = document.getElementById('firstName').value;
                var lastName = document.getElementById('lastName').value;

                submitButton.disabled = !(firstName !== '' && lastName !== '');
            }
        });
    </script>

This user story has clear testing ability through the buttons behaviour, and tests can be automated or manually checked.

Following the 'INVEST' guidelines ensures that the user stories are unambigous, provide value and are attainable. It encourages collaboration between the team and offers a shared understanding of expectations.

EDMx

EDMx is a tool in Visual Studio that allows you to create your database visually with a diagramming tool. This can be helpful when starting out, however this is an outdated method for creating databases as it works with Entity Framework 4.x.

EDMx is a database first approach, this means that you create your database schema first and the models/classes that represent your entities are then created from this schema.

Migrations

Migrations can be used in Visual Studio but it can also be used through the CLI and Visual Studio Code. It is a more modern technique to creating databases that are linked to models/classes. It is supported by Entity Framework Core which is the most up-to-date version of Entity Framework.

Migrations work off of a code first approach, this means that you would create your models/classes first and you database is automatically generated or updated based on your code.

EDMx vs. Migrations

As I stated previously I started with using the EDMx method and I came to realise that this technique did not suit my needs. I found that through mistakes I would not be able to update my database if, for example a property type was incorrect, I would have to drop the table and create a new one. I learnt that this would not be viable in the real world because it would mean a loss of data already stored in the database. and also the models first created would not be updated this is another step.

EDMx is suitable for beginners who do not intend to make changes to their database once complete. However if changes are required due to mistakes, whether this is a typo issue or a change to property or even adding/removing a property, be prepared to delete your database and start from scratch.

Migrations, however allows for evolution of your database because it is working from your code. Therefore if you change your code, there is an update for the database but it will not delete the database or its data. There is more version control with Migrations through its migration files. Migrations can also be used in multiple ways, through the CLI, through Visual Studio Code and through the Packet Manager Console in Visual Studio 2022.

My learning from this experience is to look to see if there are better techniques to the same problem, and also to keep up-to-date with evolving technology.

To learn more about Migrations I followed this tutorial: https://learn.microsoft.com/en-us/ef/core/get-started/overview/first-app?tabs=visual-studio

Step 1:

Open your code in visual studio code, go to the source control.

To create a new repository, if you don't already have one created, select "Initialize Repository". However, if you already have a reposiory on GitHub you can choose the second option "Publish to GitHub".

For this blog I will be focusing on the "Initialize Repository" option.

Step 2:

The next window you will see is the "Commit" window. Here it will show you all the file you have not commited yet, and you can choose a select few or commit all. You should also input a message for your commit.

As I have only one to commit I just continued and was issued this message, I selected yes but if you intend to always commit all your changes select always.

Step 3:

You will be asked to provide access to your GitHub profile for VS code, this will bring you to a window for you to authorize this access.

A pop up for GitHub login will then appear and you must log in for VS code verification.

Step 4:

You will next see a window to "Publish Branch", this pushes your code to GitHub and

I got a notification to say this was successfully published.

This is a more straightforward method, if you don't like using the CLI this is the way to go.

Diagrams as code is a simple way of creating and storing diagram images as plain text. I tried both Mermaid and PlantUML after trialling a standard diagramming tool. I will discuss each and what I liked or did not like.

Both tools can be installed through an extension on Visual Studio Code, if you are using this or through an online editor.

If you use the note taking app Notion, Mermaid is an option in the code block, where it also renders the image for you.

Mermaid benefits from its visually appealing documentation, see https://mermaid.js.org/intro/. However for me it did not work for certain diagrams I had to create for my assignment. I was expected to create a use-case diagram, among others but there was no documentation for creating use-case diagrams with Mermaid. I attempted different ways to create a use case diagram with Mermaid syntax, however it just did not suit what I wanted.

Mermaid does create many diagram types so it is beneficial for that and I cannot fault the tool, it just did not fit my needs at the time so I decided to switch to the PlantUML syntax. The documentation was also very clear with plenty of examples.

One thing to note when if installing PlantUML in Visual Studio Code is that because PlantUML is run from an online server you must in the settings either link it to your own server or link the PlantUML server provided in the extension's information, this was not a default in the settings.

Unlike Mermaid, PlantUML does not have visually appealing documentation. However, all of the information you need is there, see https://plantuml.com/. PlantUML had documentation for each diagram I had to create and more. There was a page for each diagram type and this was helpful, it also had lots of examples. I also learnt a few ne things about the diagrams I was creating.

The syntax for both diagramming tools are very similar, but they do have some simple differences. For example, PlantUML is started with "@startUML" and ended with "@endUML", whereas in Visual Studio Code Mermaid is started with "```mermaid". Otherwise, as you can see from both examples the syntax is the same for the class diagrams.

Mermaid

```mermaid

classDiagram

class BookStore{
    # AddToBasket()
}

class Account{
    # Name
    # Address
    # Phone
    # Email
    - Register()
    - Login()
}

class Book{
    # Name
    # Id
    # Description 
    # Price
}

class Basket{
    # BookId
    # BookName
    # Quantity
    # Price
    - Total()
    - Add()
    - Remove()
}

class Checkout{
    # Items
    # Quantity
    # TotalPrice
    - Details()
    - Payment()
    - Verification()
}

BookStore "1" *-- "0..*  " Account
BookStore *-- "0..*" Basket
BookStore *-- "1..*" Book
Basket "1" *-- "1 " Checkout
Book "1" o-- "0..*  " Basket
Account "1 "-->"1" Basket
Account o-- Checkout

PlantUML

@startuml classDiagram

abstract class BookStore{
    # AddToBasket()
}
class Account{
    # Name
    # Address
    # Phone
    # Email
    - Register()
    - Login()
}
class Book{
    # Name
    # Id
    # Description 
    # Price
}
class Basket{
    # BookId
    # BookName
    # Quantity
    # Price
    - Total()
    - Add()
    - Remove()
}
class Checkout{
    # Items
    # Quantity
    # TotalPrice
    - Details()
    - Payment()
    - Verification()
}

BookStore "1" *-- "0..*  " Account
BookStore *-- "0..*" Basket
BookStore *-- "1..*" Book
Basket "1" *-- "1 " Checkout
Book "1" o-- "0..*  " Basket
Account "1 "-->"1" Basket
Account o-- Checkout

@enduml

Diagrams as Code is beneficial because it is stored as plain text it provides more flexibility. It can also be very versatile for developers to read the code and understand the diagrams. It provides a feature of reusability and consistency for teams, and version control because it is stored and changed/updated in one place.

Steps I used to create a repo:

1. Create a new repository

   

   

   a. Name your repository

   

   b. Add a README.md file, here you can give a more in-depth description of your work.

   

   c. Add a .gitignore file, a drop-down list of tools is provided during the initial setup. This will not allow specified files to be uploaded to the repository.

   

2. Using the Git CLI, clone the repository to the computer to a selected folder, for example, C:\Users\<userprofile>

    git clone <https://github.com/><userprofile>/<reponame>.git
   

   • this will clone the repository into the folder you have chosen and create a folder with the repository name

     • this will create a folder with all the repository files you have clones

3. For my example I had a previous project I wanted to add so I copied and pasted the files into the repository folder

4. I then did a status request, this showed me that my branch was up to date and that there were files not tracked within the folder

    cd <reponame>
    git status
   
    # Output
    On branch main
    Your branch is up to date with 'origin/main'.
   
    Untracked files:
      (use "git add <file>..." to include in what will be committed)
            example.sln
            src/
   
    nothing added to commit but untracked files present (use "git add" to track)
   

5. These files now need to be added to the repository in order to be committed.

   1. these files can be added individually by name or by using add .

    git add .

    git add src

1. Now I can commit these changes by using the commit command, with this I need to add a commit comment using -m, see the example below:

    git commit -m "Added code files"
   

2. This has committed the files to the repository, they must now be pushed to the online repository (Github)

    git push
   

3. When using the push command you may be asked to sign into your GitHub profile.

   1. this can be done through the Git login window

   2. or you can log in using the CLI

4. GitHub login

   1. you will be asked for a username first and then a password

   2. I ran into issues using my GitHub password, it did not want to accept this. Instead, it wants you to use a token password (this worked better in the CLI)

      1. You can find access to tokens under your profile settings

         

      2. you will then find a list on the left-hand side of your screen, this will give you a <> Developer settings option

         

      3. I then selected Personal access tokens and it gave me 2 options, I used Tokens (classic) and followed the steps to setting up the token.

         

         💡

         Fine-grained tokens are more secure and can choose to allow access to selected repos. I chose Tokens (classic) because I am new to tokens and it seemed like a more straightforward token option for a beginner as it allows access to all repos. But, I can understand why someone would want to use Fine-grained tokens to secure their work.

Hexadecimal to Decimal

Converting a hexadecimal number to a decimal number is similar to converting binary to decimal, but in this case, we use powers of 16 because hexadecimal is a base-16 system. Here are the steps involved:

1. Identify the Hexadecimal Digits: Begin by identifying each digit in the hexadecimal number. Hexadecimal uses digits from 0 to 9 and letters from A to F, representing values 10 to 15 in decimal.

2. Convert Hexadecimal Letters to Decimal: If you encounter any letters (A, B, C, D, E, or F) in the hexadecimal number, replace them with their decimal equivalents: A is 10, B is 11, C is 12, D is 13, E is 14, and F is 15.

3. Calculate Decimal Value for Each Digit: Starting from the rightmost digit and moving to the left, assign an appropriate power of 16 to each digit. The rightmost digit has a power of 0, the next one has a power of 1, the next one has a power of 2, and so on. Multiply each digit by 16 raised to its respective power and sum up these values.

4. Add Up the Values: Sum up the decimal values obtained for each digit to get the final decimal equivalent.

Examples:

Fractional Hexadecimal to Decimal

To convert this number to a decimal you use 16 to the power of a minus, meaning anything before the decimal point is positive (2^3) and anything after the decimal point is negative (16^-1)

Hexadecimal to Binary

1. Convert the Hexadecimal value into its equivalent decimal value: In this step, you correctly mention that you need to convert each hexadecimal digit into its decimal equivalent. For example, A would be 10, and D would be 13.

2. Convert each individual digit from the hexadecimal number into a 4-digit binary number: This step is where the clarification is needed. Instead of converting each individual digit into a 4-digit binary number, you should convert each hexadecimal digit into its 4-bit binary representation. Hexadecimal digits can represent values from 0 to 15, which require 4 bits to represent. Here's how you can do it:

• 0 in hexadecimal is 0000 in binary.

• 1 in hexadecimal is 0001 in binary.

• 2 in hexadecimal is 0010 in binary.

• ...

• 9 in hexadecimal is 1001 in binary.

• A in hexadecimal is 1010 in binary.

• B in hexadecimal is 1011 in binary.

• ...

• F in hexadecimal is 1111 in binary.

1. Write these binary numbers from start to finish: After converting each hexadecimal digit into its 4-bit binary representation, you should write these binary digits from start to finish. For example, if your hexadecimal number is A9, you would convert 'A' to '1010' and '9' to '1001', and then write them together as '10101001'. So, your first binary digits should match 'A', and the second set should match '9'.

Examples:

Decimal to Binary

Helps to know the powers of 2

Converting a decimal number to binary involves repeatedly dividing the decimal number by powers of 2 while noting the remainder. You start with the largest power of 2 less than or equal to the decimal number and write '1' if it goes into the number or '0' if it doesn't. Then, subtract the result from the decimal number and continue with the remainder, repeating the process until there's no remainder left. The binary representation is the sequence of '1s' and '0s' you've written down.

There are two methods to convert a decimal number to a binary number

1. Subtraction method

2. Successive division

Subtraction method

Using the powers of 2 system, choose the highest number that will go into your decimal number.

Examples:

1. Start with the largest power of 2 that is less than or equal to 75, which is 64. Since 64 goes into 75, we can use it, and we write down a '1' as the first binary digit.

2. Now, subtract 64 from 75, which leaves us with a remainder of 11.

3. Next, find the largest power of 2 less than or equal to the remainder, which is 8. Since 8 goes into 11, we write down another '1' as the second binary digit.

4. Subtract 8 from the remainder (11 - 8 = 3).

5. Continue this process, finding the largest power of 2 for the remaining remainder. The next power of 2 is 2, and since 2 goes into 3, we write down '1' as the third binary digit.

6. Subtract 2 from the remainder (3 - 2 = 1).

7. Finally, for the remaining remainder (1), the largest power of 2 less than or equal to it is 1 itself. Since 1 goes into 1, we write down '1' as the fourth binary digit.

8. There are no more remainders left, so we stop.

So, the binary representation of the decimal number 75 is 100101.

Here are two more examples:

This next example required a larger power of 2 base, the next number to add is 256 (128 x 2)

Successive division

The successive division method for converting a decimal number to binary involves repeatedly dividing the decimal number by 2 until you reach 0.

1. Start by dividing the decimal number by 2.

2. If there is no remainder, write down a '0' as the binary digit.

3. If there is a remainder, write down '1' as the binary digit.

4. Continue this process, using the result of each division as the input for the next division.

5. Repeat steps 2 and 3 until you've divided all the way to 0.

For example, if you have the decimal number 75:

• First division: 75 ÷ 2 = 37 with a remainder of 1, so you write down '1'.

• Second division: 37 ÷ 2 = 18 with a remainder, so you write down '1'.

• Third division: 18 ÷ 2 = 9 with no remainder, so you write down “0”

• Fourth division: 9 ÷ 2 = 4 with a remainder of 1, so you write down '1'.

• Fifth division: 4 ÷ 2 = 2 with no remainder, so you write down '0'.

• Sixth division: 2 ÷ 2 = 1 with no remainder, so you write down '0'.

• Seventh division: 1 ÷ 2 = 0 with a remainder of 1, so you write down '1'.

This method is read from the bottom up, meaning the final division calculated is the first digit of the binary number.

• The binary number for the above example of 75 is 1001011

MSB = Most Significant Bit

LSB = Least Significant Bit

Examples:

Decimal with a decimal point to a Binary

1. Divide the full number by 2, your remainder numbers make up your binary number before the decimal point.

2. Multiply anything after the decimal point by 2 - once the numbers after the decimal point reach 0, the numbers before your decimal point make up the binary number after the decimal point

Examples:

Decimal to Hexadecimal

Decimal = base 10 system

• 0-9

Hexadecimal = base 16 system

• 0-9, A-F

To convert a decimal number to a hexadecimal number, you can follow these steps:

1. Divide the Decimal Number by 16: Begin by dividing the decimal number by 16.

2. Keep Track of Remainders: As you perform the division, keep track of the remainders at each step. The remainder will be a digit in the hexadecimal representation.

3. Continue Division: Continue the division process, using the quotient obtained from the previous step as the new dividend, until the quotient becomes zero.

   1. a quotient is a quantity produced by the division of two numbers.

4. Convert Remainders to Hexadecimal Digits: At each step where you calculate a remainder, you will have a number between 0 and 15. These numbers need to be converted to their hexadecimal equivalents:

   1. 0 to 9 remain the same in hexadecimal.

   2. 10 to 15 is equivalent to 'A-F' in hexadecimal.

5. Arrange Hexadecimal Digits: Write down the hexadecimal digits obtained from the remainders in reverse order, starting from the last remainder you calculated.

Examples: using a calculator

The numbers are read from bottom to top, therefore the hexadecimal for 479 is 1DF.

The hexadecimal for 894 is 37E

Examples: Using long division (no calculator)

It is helpful to know the multiples of 16 for this method

Binary to Decimal

Here is a handy table to help with calculations:

When converting a binary number to a decimal number, you use powers of 2 because binary is a base-2 number system. In a base-2 system, each digit (bit) can have one of two values: 0 or 1. By using powers of 2, you can represent any decimal number by combining these binary digits.

Here's how it works:

1. The rightmost digit in a binary number represents 2^0 (2 raised to the power of 0), which is equal to 1. So, if you have a 1 in the rightmost position, it contributes 1 to the decimal value. If it's 0, it contributes 0 to the decimal value.

2. The next digit to the left represents 2^1 (2 raised to the power of 1), which is equal to 2. So, if you have a 1 in this position, it contributes 2 to the decimal value. If it's 0, it contributes 0.

3. The next digit to the left represents 2^2 (2 raised to the power of 2), which is equal to 4. So, if you have a 1 in this position, it contributes 4 to the decimal value. If it's 0, it contributes 0.

This pattern continues for each position to the left. Each position represents a power of 2 that is one greater than the position to its right. Therefore, you add up the values contributed by each position based on whether it's a 1 or a 0 to get the decimal equivalent of the binary number.

Examples:

Binary Fractions

An example of a binary fraction is 1100.101

To convert this number to a decimal you use 2 to the power of a minus, meaning anything before the decimal point is positive (2^3) and anything after the decimal point is negative (2^-1)

Similar to the table used for the positive powers, here is a table for the negative

Examples:

Binary to Hexadecimal

1. Group into Sets of Four: Begin by separating the binary number into sets of four digits, starting from the right. If the leftmost group has fewer than four digits, add leading zeros to make it a complete group of four (e.g., 1101 becomes 0011 0101). This step ensures that each group corresponds to a single hexadecimal digit.

2. Convert Each Group to Decimal: Now, convert each group of four binary digits into its decimal equivalent. You can do this by multiplying each digit by 2 raised to the power of its position from right to left (starting with 0 for the rightmost digit) and then summing up these values. For example, to convert 1101 to decimal:

   1. 1 * 2^3 + 1 * 2^2 + 0 \ 2^1 + 1 \ 2^0 = 8 + 4 + 0 + 1 = 13

So, the first group, 1101, is equivalent to the decimal value 13.

1. Convert Decimal Values to Hexadecimal: Finally, convert the decimal values obtained in step 2 into their hexadecimal equivalents. In hexadecimal, digits range from 0 to 9 and then from A to F. So, for the decimal value 13, its hexadecimal equivalent is D.

Repeat steps 2 and 3 for each group of four binary digits, and then combine the hexadecimal equivalents to get the final hexadecimal representation of the binary number.

For example, let's convert the binary number 11010101 to hexadecimal:

1. Group into sets of four: 1101 0101

2. Convert each group to decimal:

   1. 1101 (in binary) = 13 (in decimal)

   2. 0101 (in binary) = 5 (in decimal)

3. Convert decimal values to hexadecimal:

   1. 13 (in decimal) = D (in hexadecimal)

   2. 5 (in decimal) = 5 (in hexadecimal)

Combine the results: 11010101 (binary) = D5 (hexadecimal)

So, 11010101 in binary is equivalent to D5 in hexadecimal.

Examples:

Binary Addition

Adding Binary numbers can be quite simple once you have a bit of practice. It is slightly different to simple addition of a decimal number. There are some things to note.

• 0 + 0 = 0

• 1 + 0 = 1

• 1 + 1 = 10

  • Normal addition would mean 1 + 1 = 2, however when adding Binary numbers this means it has a decimal equivalent of 2.

  • You must carry over the 1, leaving the first number as 0

• 1 + 1 + 1 = 11

  • Similar to the example above, this example is calculated in two parts:

    • 1 + 1 = 0 and you carry over a 1, but in this case, still have an original 1 and now a 0, so 1 + 0 is then calculated giving you a 1.

In most cases you will have a longer binary number, add these numbers column by column (see Ex. 1).

If you want to check your answers are correct, this can be done by converting the numbers to decimal and adding these.

Examples:

Binary Subtraction

Similar to adding binary numbers, subtraction is again simple once you understand a few things

• 1 - 0 = 1

• 1 - 1 = 0

• 0 - 1 = ?

  • This equation is usually paired with a longer binary number such as the example below:

• A number ahead is cancelled where possible to add to the 0 value, so when a is cancelled, a 2 is carried over. Then the equation would read 2 - 1 = 1 or in some cases if the 2 is cancelled and carried over again 1 - 1 = 0

Examples:

2's Complement

2's complement is a method used for representing negative numbers in binary and performing binary subtraction. Here are the steps:

1. Start with the positive binary representation of the number you want to subtract from.

2. To find the 2's complement of the number you want to subtract (the negative number), invert all the bits (change 1s to 0s and 0s to 1s).

3. Add 1 to the result of the inversion.

4. Now, add the positive binary number and the 2's complement of the negative number using normal binary addition.

5. If there is a carry-out from the most significant bit (leftmost bit), it indicates overflow, and you can ignore it for most arithmetic operations or handle it as needed.

Examples:

This process allows you to perform binary subtraction by effectively adding the negative number's 2's complement to the positive number. It simplifies the hardware required for subtraction in computer systems and ensures consistent arithmetic operations for both positive and negative numbers.

Binary

Binary is a numbering system read by computers, it is made up of 0s and 1s. This is a base 2 number system.

A logic state of 0 means there is an open transistor switch. This means the off/false/no.

A logic state of 1 means there is a closed transistor switch. This means on/true/yes.

Decimal

Decimal is the most common number system used by humans, but it cannot be read by computers. This is a base 10 number system, it covers digits 0-9.

Hexadecimal

Hexadecimal is a number system made up of both numbers and letters. This is a base 16 number system, it covers digits 0-9 and A-F.

Here is a table that shows each number system and compares its equivalents:

Each of these number systems can be converted to each other, such as Binary to Decimal and vice versa. In future blog posts, I will cover these conversions.

Binary Conversions

Decimal Conversions

Hexadecimal Conversions

1. Planning

The first phase of this lifecycle is the planning phase, here I set out the requirements of my website. What I wanted my website to do, how I thought I wanted my website to look. In simple terms, I made a plan for what I intended to use my website for.

1. Analysis

The second phase looks at defining these requirements, I used user stories for this. This identified what I as the owner of the website wanted and why and also what users of the website may want and why. An example of this would be “As a visitor of Rachael’s Recipes I want a navigation bar so that I can easily navigate the website.”. This then creates an acceptance criteria or a task list of what should be done to adhere to this requirement. Throughout this stage and using the user stories I created a backlog of the documented requirements.

1. Design

The third stage of this life cycle is the designing phase. During this phase, I created a mock-up of my website. This gave me a visual of where to start and my end goal.

1. Implementation

Stage four is the building stage, this is when I began to develop my website. I based my development process off the previous stage, using the requirements backlog as a guide to prioritising tasks that needed to be completed.

1. Testing and Integration

The final stage I used was the testing phase. This looked at all aspects of my website, making sure everything worked the way I wanted it to work and whether the website was visually how I wanted.

The final thing I looked at as part of my testing phase was how accessible my website was. I used the Google Lighthouse report to test my website. This report looks at the performance of the website, the accessibility, the best practices of the website and the search engine optimisation. This was very helpful in understanding how to better my website, as it gives you examples on how to fix specific issues such as font and background contrast for accessibility (see appendix 4 for some report details).

Using the Software Development Lifecycle was an immense aid in creating a building my website, it provided a more structured outline for what needed to be completed.

Cover image reference:

WeeTech Solutions Pvt Ltd, 2023, "Software-Development-Life-Cycle" [Online], Available at: https://www.weetechsolution.com/wp-content/uploads/2022/12/Software-Development-Life-Cycle.png (Accessed: 12/09/2023)

Think of generics as a lunchbox, your lunchbox can hold different foods at different times. Meaning, your lunchbox is the class and the foods are the data types. This can be described as having a flexible container that can hold different data types, like strings, ints or even a custom type.

A generic class is written similar to the example below:

public class Lunchbox<T>
{
    ...
}

You would then build this class up with its properties, constructors and methods:

public class Lunchbox<T>
{
    // Properties
    private T lunchItem;

    // Constructors
    public Lunchbox(T newlunchItem)
    {
        lunchItem = newlunchItem;
    }

    // Methods
    public T GetLunchItem
    {
        return lunchItem
    }
}

Then in your main program, you would create a collection to store these various lunchbox foods:

class Program
{
    static void Main()
    {
        // Create a Lunchbox for sandwiches (string)
        Lunchbox<string> sandwichLunchbox = new Lunchbox<string>("BLT", "Chicken and Stuffing", "Ham and Cheese");

        // Get the items from the lunchbox
        string sandwich = sandwichLunchbox.GetLunchItem();

        // Display the items from the lunchbox
        Console.WriteLine("Sandwich: " + sandwich);
    }
}

Why use generics?

Reusability: It is reusable because you don't need a different class for each data type, the generic class allows for different inputs.

Safety: When you specify the data type you intend to use, you can only use this type of input. If you define a string for example, but input an int, a compile-time error will occur because it expects the defined type of string.

Flexibility: Generics are very flexible because they can adapt to various data types, even custom types.

References

• https://www.tutorialsteacher.com/csharp/csharp-generics

• https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/types/generics

• https://www.geeksforgeeks.org/c-sharp-generics-introduction/

I came to find this attribute during a college project where I needed to restrict access to specific pages within my application to users who were logged in. I first attempted to redirect the page to an error page if the user was not logged in, however, this did not work and threw a runtime error, see Custom error pages for HTTP status codes in ASP.NET MVC for more information on creating custom error pages.

I instead used the [Authorize] attribute on certain actions within my relevant controller, see Simple Authorization for more information on the [Authorize] attribute. For example, I used the [Authorize] to redirect a link to the login page if a user was not logged in. The redirect is simply a side-effect of the user not being signed in when trying to access a route (Controller action) that is decorated with an [Authorize] attribute. In doing this I did not have to redirect to an error page when a User was not logged in and I used the [Authorize] attribute in its most simple form.

[Authorize]
public ActionResult AddToFavourites(int id)
{
     ...
}

The [Authorize] attribute can be used on the controller itself or each individual action. Using the [Authorize] attribute on the controller causes the MVC app to check if a user is logged in before carrying out any actions within the controller.

[Authorize]
public class RecipesController : Controller 
{
     ...
}

I used the [Authorize] attribute very simply, on specific action methods, however upon my further learning into the [Authorize] I found that when using the attribute on the controller, you can use the [AllowAnonymous]. This [AllowAnonymous] attribute can be used to display certain pages to a user even if they are not logged in, such as the home page or the login page. This seems a better and cleaner way to use these attributes if most pages require authentication to view, however, if only one or two pages need authentication, using the [Authorize] attribute over each action method is simpler. For example, in my project I only needed to limit and edit a page and a favourites page, so using the [Authorize] attribute on the whole controller would not have made sense

Note: the [Authorize] attribute can be made more specific, for example, will only authorize named users [Authorize(Users = “Mary, John”)] or users with certain roles [Authorize(Roles = “Admin”)].

I encountered a problem as part of this implementation. The favourites list was displaying the saved recipes of every user, whereas I wanted only the logged-in user’s recipes to be displayed.

For this, I needed to figure out how I could filter by the user ID and only display the relevant results to the user.

To solve this issue I was facing I decided to use LINQ to filter by the user’s ID in the favourites database. You will need the using statement using Microsoft.AspNet.Identity; to retrieve the userId because this is stored in a separate database on the local server. To get this to work I needed to create a variable to store the user id as the GetUserId() method does not work within the query. I then used this variable in the query to compare the user id’s.

See the code below for an example…

using Microsoft.AspNet.Identity;

public ActionResult Index()
        {
            var userId = User.Identity.GetUserId();

            var userFavourites = db.Favourites
                .Where(f => f.UserID == userId)
                .ToList();

            return View(userFavourites);
        }

Using LINQ to filter the data allowed me to only display the results of a specific user. I could also use this method in other areas of my project such as deleting recipes from the database, so if a user added a recipe to the blog only they would be able to delete that recipe when logged in.

This method is beneficial if you want to give access to certain users to view only specified data.

When you want to share code from one project file to another, you create a dependency. This allows the dependent project file to access code from the other project file. These dependencies could be written in the csproj file of the dependent project. See last image for an example of how this can be written.

The easiest way to carry this task out would be to drag the project file you want to reference into the dependencies of the project file that requires the dependency.

The second way to add a dependency would be to right-click on the project's dependencies and select “Add Project Reference…”.

This brings you to a screen that allows you to choose which projects you would like to add.

The project dependency can be seen under dependencies of the project under projects

or in the csproj file

<ItemGroup>
   <ProjectReference Include="..\Globomantics.Domain\Globomantics.Domain.csproj" />
</ItemGroup>

This attribute is used to prevent forgery on a request, the instance in which I used this attribute was with forms, to update a database. The [ValidateAntiForgeryToken] attribute is important with a post request because it uses cookies to validate your request, for example, if you want to insert data into a database using a form you want to make sure that the post request is secure and that it cannot be used maliciously on another web host. If you do not use the attribute you are susceptible to malicious attacks from outsiders, this can be dangerous if these requests include personal data and could be used anywhere in the world because it does not use anything to validate the request.

I did some tests to understand how this works using a localhost server.

Test 1

For my first test, I removed the {ValidateAntiForgeryToken] attribute from my create method. By doing this I was able to create multiple instances of the same record without any validation using a localhost server. This is a small way to test this, but it made it clear that this could be very dangerous on other servers that are more open. Meaning someone could potentially steal personal data if the site being used is not using appropriate anti-forgery options.

The image below shows the request being sent again with the same cookie. This request will work whether the cookies match or not and if there is no cookie in the browser at all.

This image shows the two entries created which are the same because the code is not using the [ValidateAntiForgeryToken] attribute.

Test 2

Test 2 uses the [ValidateAntiForgeryToken] and is split into two parts, the first is deleting the cookie and then sending a request to create a data entry. This throws an error "The required anti-forgery cookie '__RequestVerificationToken' is not present".

This is because as the request is running, the browser is trying to match the cookies to accept the request. Because the cookie has been deleted from the browser, the cookie from the request cannot be matched to the browser's cookie and the request to create is denied.

The second part of the test involved altering the cookie definition from the browser and sending a create request, again because these two cookies cannot be matched the browser denies the request. The error thrown is "The anti-forgery token could not be decrypted..."

From this, I have concluded that not including an [ValidateAntiForgeryToken] attribute leaves a web application open to malicious behaviour, and could potentially distribute personal information of customers because of this. While I can acknowledge that there may be better ways to use this attribute or different ways to prevent this type of security breach, this is my learning to date.

A potentially better way to use the anti-forgery token, if you are using .NET Core, is to use the [AutoValidateAntiForgeryTokenAttribute]. This can be applied to the whole controller and will validate all unsafe methods such as Post, Put, Patch and Delete. However, it will ignore methods such as Get, Head, Options and Trace, so if you want to use validation you will have to use the [ValidateAntiForgeryToken] over these methods.

https://stackoverflow.com/questions/39947460/autovalidateantiforgerytoken-vs-validateantiforgerytoken

I encountered a problem with my custom error pages when completing a college project. I had 2 HTTP errors which I wanted to use a custom error page for, “404 - Not Found” and “401 - Unauthorized”. To create these custom errors, I first created an “Error” controller and then made an ActionResult method for each error, within this controller and created views for the errors from these methods. The 404 error worked, whereby if an ID was not used in the URL or did not exist, a custom 404 error page was displayed to the user. However, the 401 error I intended to use when a user tried to access certain links/pages when they were not logged in was throwing a runtime error instead of my custom error page.

Creating a custom Error page in MVC

Creating a custom error page is relatively simple. Do note that there is already an Error.cshtml view available in the /Shared/Views folder with the default ASP.NET MVC template.

1. Create a Controller for the custom error(s) you want to use, I named my controller ErrorController.

2. Inside this controller you will need a method that returns ActionResult for each error.

    public class ErrorController : Controller
    {
        // GET: Error
        public ActionResult NotFound()
        {
            Response.StatusCode = 404;
            return View();
        }
   
        // GET: Error
        public ActionResult BadRequest()
        {
            Response.StatusCode = 400;
            return View();
        }
    }
   

3. The next step is creating the relevant views for each error. You can do this by right-clicking on the method name, ie. NotFound and selecting the “Add View” option.

4. Update the information in this view to whatever you want your error page to tell the user.

5. Next, open the Web.config file for your MVC application, make sure to choose the correct file as there is a Web.config file in the Views folder (you do not want this file).

6. In the Web.config file find the <system.web> attribute. Within this attribute add a <customErrors> attribute with mode=”On” . See below for an example…

    <customErrors mode="On">
        <error statusCode="400" redirect="/Error/BadRequest"/>
        <error statusCode="404" redirect="/Error/NotFound"/>
    </customErrors>
   

7. Open the Global.asax file for your MVC application and in this add the HandleErrorAttibute. The last line in the example is what you will need to add, your code should look something like this.

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
   
            GlobalFilters.Filters.Add(new HandleErrorAttribute());
    }
   

8. Lastly, update your exceptions in the relevant controllers. Your exception will look similar to this depending on your error code.

    throw new HttpException(404, "Not Found");
   

Solution

Because my 401 error code would not work for my intended purpose I instead used the [Authorize] attribute on certain actions within my relevant controller, see Simple Authorization for more information on the [Authorize] attribute. For example, I used the [Authorize] attribute to redirect a link to the login page if a user was not logged in. The redirect here is simply a side-effect of the user not being signed in when trying to access a route (Controller action) that is decorated with an [Authorize] attribute. In doing this I did not have to redirect to an error page when a User was not logged in and the [Authorize] attribute was used in its simplest form.

[Authorize]
public ActionResult AddToFavourites(int id)
{
}

Conclusion

In conclusion, my error for code 401 not working was a good thing. This helped me search for alternative solutions to a problem, which led me to the [Authorize] attribute, which turned out to be a better fit for what I wanted.