Kalkulator BMI w Blazor – od Zera do Działającej Aplikacji w 15 Minut

BMI (Body Mass Index) to prosta, ale wciąż popularna miara relacji masy ciała do wzrostu. W tym materiale:

    1. Zbudujesz od podstaw jednostronicową aplikację w Blazor Server.
    2. Nauczysz się oddzielać logikę od widoku przy pomocy prostych serwisów DI.
    3. Dodasz interpretację wyników (niedowaga, norma, nadwaga …).
    4. Dostaniesz gotowy layout (Bootstrap) nadający się do portfolio.

Jeśli chcesz więcej takich oraz bardziej rozbudowanych projektów – w szkoleniu Zostań Programistą .NET robimy 10 jeszcze bardziej zaawansowanych aplikacji w C#/.NET (m.in. dziennik ucznia, aplikacja do fakturowania, CRM, aplikacja do zarządzania zadaniami, usługa do raportowania błędów).

Minimalne wymagania

Projekt – szybki start

Model i logika obliczeń

public enum BmiCategory
{
    Underweight,
    Normal,
    Overweight,
    Obese
}

public record BmiResult(double Value, BmiCategory Category);

2. Serwis BmiService.cs

public interface IBmiService
{
    BmiResult Calculate(double weightKg, double heightCm);
}

public class BmiService : IBmiService
{
    public BmiResult Calculate(double weightKg, double heightCm)
    {
        var heightM = heightCm / 100.0;
        var bmi = weightKg / (heightM * heightM);

        BmiCategory cat = bmi switch
        {
            < 18.5 => BmiCategory.Underweight,
            < 25.0 => BmiCategory.Normal,
            < 30.0 => BmiCategory.Overweight,
            _ => BmiCategory.Obese
        };

        return new(bmi, cat);
    }
}

3. Rejestracja w DI (Program.cs)

builder.Services.AddSingleton<IBmiService, BmiService>();

Komponent Razor – Pages/BmiCalculator.razor

Dla uproszczenia ten kod umieściłem w 1 pliku, ale możesz sobie rozdzielić kod Razor oraz C# na dwa różne pliki.

@page "/bmi"
@inject IBmiService Bmi

<h1 class="h3 fw-bold mb-4">Kalkulator BMI</h1>

<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label">Waga (kg)</label>
        <input class="form-control" type="number" @bind="weight" min="1" step="0.1" />
    </div>

    <div class="col-md-6">
        <label class="form-label">Wzrost (cm)</label>
        <input class="form-control" type="number" @bind="height" min="1" step="0.1" />
    </div>
</div>

<button class="btn btn-primary mt-3" @onclick="Compute">Oblicz</button>

@if (result is not null)
{
    <p class="mt-4 fs-5">
        Twoje BMI: <strong>@result.Value.ToString("0.0")</strong> –
        @CategoryToText(result.Category)
    </p>
}

@code {
    private double weight;
    private double height;
    private BmiResult? result;

    private void Compute()
        => result = Bmi.Calculate(weight, height);

    private static string CategoryToText(BmiCategory cat) => cat switch
    {
        BmiCategory.Underweight => "niedowaga",
        BmiCategory.Normal => "wartość prawidłowa ✔",
        BmiCategory.Overweight => "nadwaga",
        _ => "otyłość"
    };
}

Nawigacja

Otwórz Components/Layout/NavMenu.razor i dodaj:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="bmi">
        <span class="bi bi-house-door-fill-nav-menu" /> BMI
    </NavLink>
</div>

Interpretacja wyników po uruchomieniu

Potencjalne rozszerzenia

    • Przełączanie jednostek (funty / cale).
    • Animowany wykres zmian BMI w czasie przy pomocy chart.js przez Blazor.
    • Zapisywanie historii do SQLite poprzez EF Core + Web API.

Podsumowanie

W kilkunastu linijkach kodu stworzyliśmy kompletną aplikację Blazor, która liczy BMI i interpretuje wynik.

Jeśli chcesz wejść głębiej w świat .NET, DI i Blazora – sprawdź mój kompletne szkolenie: Zostań Programistą .NET (od zera do programisty). To kolejny projekt, który możesz jeszcze rozwinąć i  dodać do portfolio.

To wszystkie na dzisiaj. Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności – darmowe zapisy, gdzie będziesz również miał dostęp do dodatkowych materiałów i przede wszystkim bonusów. Do zobaczenia w kolejnym artykule.