Miten rakentaa ja testata Blazor WebAssembly -komponentteja

Blazor WebAssembly on tehokas työkalu, joka mahdollistaa modernien web-sovellusten rakentamisen C#-kielellä. Yksi sen keskeisistä eduista on komponenttipohjainen lähestymistapa, joka mahdollistaa koodin uudelleenkäytön ja selkeämmän rakenteen luomisen. Tässä osassa tarkastelemme yksityiskohtaisesti, kuinka luodaan ja testataan Blazor WebAssembly -komponentteja, kuten edistymispalkki, joka käyttää Bootstrap-tyylejä ja on konfiguroitavissa eri tavoin.

Aloitamme yksinkertaisella Blazor WebAssembly -sovelluksen luomisella ja konfiguroinnilla. Tärkein askel on muokata launchSettings.json -tiedostoa, jossa määritellään palvelimen ja sovelluksen URL-osoitteet ja portit. Tämä tiedosto sisältää myös muita asetuksia, kuten ympäristömuuttujat, jotka voivat vaikuttaa sovelluksen käyttäytymiseen eri ympäristöissä, kuten kehityksessä ja tuotannossa. Esimerkiksi, määrittämällä ASPNETCORE_ENVIRONMENT-muuttujan arvoksi Development, voidaan hallita sitä, miten sovellus käyttäytyy kehitysympäristössä.

Sovelluksen käynnistämisen jälkeen voi olla tarpeen tarkastella, kuinka Blazor WebAssembly -komponentit, kuten edistymispalkit, toimivat. Edistymispalkin luomiseksi luomme ensin komponentin ProgressBar.razor -tiedostoon, joka käyttää Bootstrapin valmiita luokkia ja mahdollistaa edistymisen näyttämisen sekä sen animoinnin. Palkkiin voidaan liittää erilaisia parametreja, kuten arvoja prosentteina, animaatio-ominaisuuksia ja mahdollisuus näyttää arvo visuaalisesti käyttäjälle. Komponentti voi olla dynaaminen ja muokattavissa tarpeen mukaan.

Esimerkiksi edistymispalkin luominen alkaa määrittelemällä parametrit, kuten Value, Minimum, Maximum, IsAnimated, ShowValue ja LabelText, jotka kaikki ovat muokattavissa joko koodissa tai käyttöliittymässä. Näiden parametrien avulla käyttäjä voi kontrolloida, kuinka edistymispalkki näkyy ja miten se reagoi arvojen muutoksiin. Tämän jälkeen koodi määrittelee itse komponentin ulkoasun ja sen dynaamisen käyttäytymisen, joka ilmenee suoraan HTML:ssä, kun käyttäjä suorittaa sovellusta.

Edistymispalkin luomisessa on tärkeää käyttää oikeita Bootstrap-luokkia, jotta ulkoasu on yhtenäinen ja responsiivinen. Lisäksi tulee varmistaa, että komponentti toimii oikein eri laitteilla ja näyttökokoilla. Blazor WebAssembly mahdollistaa sen, että kaikki koodi suoritetaan asiakkaan selaimessa, jolloin sovellus voi toimia nopeasti ja responsiivisesti ilman tarvetta jatkuvalle palvelinviestinnälle.

Kun sovellus on valmis, sitä voi testata käynnistämällä se joko Visual Studio 2022:ssa tai Visual Studio Codessa. Käyttäjän kannattaa tarkistaa, että kaikki portit ovat oikein määritelty ja että sovellus toimii odotetulla tavalla, niin että komponentit, kuten edistymispalkki, näkyvät oikein ja päivittyvät dynaamisesti. Testaaminen on tärkeä osa kehitystyötä, sillä se auttaa varmistamaan, että kaikki komponentit toimivat yhteen ja sovellus on käyttäjäystävällinen ja vakaa.

On myös hyvä muistaa, että Blazor WebAssembly -sovelluksissa saattaa esiintyä virheitä, erityisesti kun käsitellään suuria määriä dataa tai tehdään monimutkaisempia käyttöliittymämuutoksia. Näissä tapauksissa on tärkeää hyödyntää virheenkorjausmahdollisuuksia, kuten selaimen kehittäjätyökaluja, ja muistaa, että Blazor WebAssembly -komponentit voivat toimia hieman eri tavalla verrattuna perinteisiin JavaScript-pohjaisiin komponentteihin.

Miten käyttää satelliittikokoelmia ja käännöspalveluja .NET-sovelluksissa

Kun työskentelemme monikielisten ja monikulttuuristen sovellusten kanssa, yksi keskeinen haaste on paikallisten resurssien hallinta ja käännösten lataaminen oikein kulttuurispesifisten asetusten mukaisesti. Tämä prosessi voidaan toteuttaa tehokkaasti .NET-kehityksessä käyttämällä IStringLocalizer ja IStringLocalizerFactory -rajapintoja. Nämä ovat vakio-tyyppejä, jotka mahdollistavat tekstien lokalisoinnin ja käännösten hallinnan erillisissä kokoelmissa, joita voidaan ladata eri kulttuuri- ja kieliasetuksilla. Tässä osassa käymme läpi, kuinka voimme luoda ja käyttää satelliittikokoelmia .NET-sovelluksessa ja tehdä sen mahdollisimman selkeäksi ja toimivaksi.

Ensimmäiseksi meidän tulee varmistaa, että projekti on valmis lokalisointia varten. Tämä tehdään lisäämällä tarvittavat paketit ja määrittämällä resurssitiedostojen sijainti oikein. Näin varmistamme, että käännökset voidaan ladata oikein.

Työskentelemme esimerkiksi WorkingWithCultures -projektissa, jossa ensimmäinen askel on lisätä viittaukset Microsoftin laajennuspaketteihin, jotka tukevat sekä yleistä isännöintiä että lokalisointia. Tämä tehdään lisäämällä seuraavat viittaukset projektiin:

xml
Copy code
<PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.0" />

<PackageReference Include="Microsoft.Extensions.Hosting" Version="6.0.0" />

xml
Copy code
<data name="EnterYourName" xml:space="preserve">
  <value>Enter your name:</value>
</data>

<data name="EnterYourDob" xml:space="preserve">

  <value>Enter your date of birth:</value>
</data>
<data name="EnterYourSalary" xml:space="preserve">
  <value>Enter your salary:</value>
</data>

csharp
Copy code
using Microsoft.Extensions.Localization;
public class PacktResources
{
    private readonly IStringLocalizer _localizer;
    public PacktResources(IStringLocalizer localizer)
    {
        _localizer = localizer;
    }
    public string? GetEnterYourNamePrompt()
    {
        string resourceStringName = "EnterYourName";
        LocalizedString localizedString = _localizer[resourceStringName];
        if (localizedString.ResourceNotFound)
        {
            ConsoleColor previousColor = Console.ForegroundColor;
            Console.ForegroundColor = ConsoleColor.Red;
            Console.WriteLine($"Error: resource string \"{resourceStringName}\" not found.");
            Console.ForegroundColor = previousColor;
            return $"{localizedString}: ";
        }
        return localizedString;
    }
    // Muita metodeja voidaan lisätä vastaavalla tavalla.
}

Kun PacktResources-luokka on määritelty, seuraavaksi luomme isännän (hostin), joka konfiguroi lokalisointipalvelut ja mahdollistaa riippuvuuksien injektoinnin. Tämä tehdään Program.cs-tiedostossa:

csharp
Copy code
using Microsoft.Extensions.Hosting;

using Microsoft.Extensions.DependencyInjection;
IHost host = Host.CreateDefaultBuilder(args)
    .ConfigureServices((hostContext, services) =>
    {
        services.AddLocalization(options => options.ResourcesPath = "Resources");
        services.AddTransient<PacktResources>();
    })
    .Build();

Kun lokalisointi ja riippuvuudet on määritetty, voidaan alkaa käyttää käännöksiä. Tämä tarkoittaa, että ohjelmassa voidaan muuttaa kulttuuria ja käyttää PacktResources-palvelua tekstikenttien käännösten hakemiseen. Esimerkiksi, kun kulttuuri muuttuu, käyttäjä voi syöttää tietoja kuten nimensä, syntymäpäivänsä ja palkkansa, ja kaikki kyselyt ja tulosteet ovat käännettyjä valitun kulttuurin mukaan.

csharp
Copy code
PacktResources resources = host.Services.GetRequiredService<PacktResources>();

Console.WriteLine(resources.GetEnterYourNamePrompt());
string name = Console.ReadLine() ?? "Default Name";
Console.WriteLine(resources.GetEnterYourDobPrompt());
string dob = Console.ReadLine() ?? "01/01/2000";
Console.WriteLine(resources.GetEnterYourSalaryPrompt());
string salary = Console.ReadLine() ?? "50000";
Console.WriteLine(resources.GetPersonDetails(name, DateTime.Parse(dob), 1000, decimal.Parse(salary)));

Kun ohjelma suoritetaan, käyttäjä saa käyttöliittymän kysymykset, jotka on käännetty valitun kulttuurin mukaan. Jos kulttuuriin ei ole saatavilla erityisiä resursseja, käytetään oletusresursseja.

Erityisesti, jos käytämme kulttuuriin sidottuja resursseja, kuten dynaamisia päivämääriä ja valuuttoja, on tärkeää ottaa huomioon, että joidenkin kulttuurien muodot saattavat poiketa merkittävästi toisistaan. Esimerkiksi päivämäärän muoto vaihtelee, ja jos käyttäjä ei syötä omaa syntymäpäiväänsä, voidaan käyttää kulttuurille tyypillistä oletusmuotoa.

Tämä lähestymistapa auttaa hallitsemaan monikielisyyttä ja monikulttuurisuutta .NET-sovelluksissa. On tärkeää ymmärtää, että lokalisointi ei ole pelkästään käännösten lisäämistä, vaan myös kulttuuristen eroavaisuuksien huomioimista, kuten päivämäärien, valuuttojen ja muiden alueellisten erikoispiirteiden huomioimista.