Jak implementovat a použít emoji a ikony ve webových aplikacích s Blazor

Ve světě moderního webového vývoje se interaktivita a vizuální atraktivita stávají klíčovými faktory pro úspěch aplikací. Emojis a ikony hrají významnou roli v designu, protože dokážou rychle vyjádřit emoce, stav nebo informace, aniž by bylo potřeba složité textové vysvětlení. Tento proces je o to jednodušší díky open-source knihovnám a nástrojům, které umožňují snadné použití ikonek a emoji ve webových aplikacích. Microsoft, například, zveřejnil svou sbírku Fluent Emoji, která nabízí moderní, přátelské a rozpoznatelné emoji pro každého uživatele.

Nejdříve je nutné stáhnout sbírku Fluent Emoji. Tu si můžete stáhnout přímo z GitHubu (https://github.com/microsoft/fluentui-emoji). Jakmile máte tuto sbírku, můžete ji integrovat do svého projektu v Blazor. Emoji a ikony v této sbírce jsou navrženy tak, aby byly snadno použitelné a přístupné v jakémkoli prostředí. Ve své aplikaci Blazor je můžeme přidávat pomocí klasického přístupu do složky wwwroot, kde vytvoříme novou složku pro uložení těchto obrázků. Poté již můžeme začít používat konkrétní ikony v rámci aplikace.

csharp
Copy code
private string ConvertToIcon(string categoryName)
{
    return categoryName switch
    {
        "Beverages" => "coffee", // Google Material Icons
        "Condiments" => "liquor",
        "Confections" => "cake",
        "Dairy Products" => "water_drop",
        "Grains/Cereals" => "breakfast_dining",
        "Meat/Poultry" => "kebab_dining",
        "Produce" => "restaurant",
        "Seafood" => "set_meal",
        _ => "device_unknown"
    };
}

csharp
Copy code
private string ConvertToEmoji(string categoryName)
{
    return categoryName switch
    {
        "Beverages" => "assets/Hot beverage/3D/hot_beverage_3d.png",
        "Condiments" => "assets/Honey pot/3D/honey_pot_3d.png",
        "Confections" => "assets/Lollipop/3D/lollipop_3d.png",
        "Dairy Products" => "assets/Cheese wedge/3D/cheese_wedge_3d.png",
        "Grains/Cereals" => "assets/Bread/3D/bread_3d.png",
        "Meat/Poultry" => "assets/Cut of meat/3D/cut_of_meat_3d.png",
        "Produce" => "assets/Leafy green/3D/leafy_green_3d.png",
        "Seafood" => "assets/Lobster/3D/lobster_3d.png",
        _ => "assets/Pot of food/3D/pot_of_food_3d.png"
    };
}

Pokud chcete mít v aplikaci více vizuálních prvků, které jsou dynamické a založené na těchto datech, doporučujeme implementovat Blazor komponenty, které umožní úpravu obsahu bez nutnosti obnovení celé stránky. Při implementaci navigace a zobrazení produktů si můžete pohrát s designem a přizpůsobit vzhled podle toho, jaké informace chcete uživatelům ukázat.

Vzhledem k dynamickému charakteru moderních webových aplikací může být efektivní využívat rozhraní pro správu těchto dat, která umožní snadnou změnu obrázků a ikon, aniž by bylo nutné upravovat samotný kód aplikace. To poskytuje flexibilitu a udržitelnost aplikace i v dlouhodobém horizontu.

Kromě samotného designu aplikace je důležité mít na paměti, že ikony a emoji by měly být používány s ohledem na přístupnost. Ujistěte se, že všechny obrázky mají odpovídající alternativní texty, aby byly přístupné pro všechny uživatele, včetně těch s postižením zraku.

Jak správně nastavit a používat .NET MAUI pro tvorbu mobilních a desktopových aplikací

Instalace .NET MAUI workloadů pro Visual Studio 2022

nginx
Copy code
dotnet workload list

V seznamu se objeví informace o nainstalovaných workloadech, například:

markdown
Copy code
Installed Workload Ids      Manifest Version      Installation Source

----------------------------------------------------------------------
maui-maccatalyst            6.0.486/6.0.400       SDK 7.0.100

Pokud chcete zjistit, které workloady jsou k dispozici pro instalaci, použijte příkaz:

sql
Copy code
dotnet workload search

Tento příkaz zobrazí seznam dostupných workloadů, například pro vývoj aplikací pro Android, iOS nebo macOS. Pokud chcete nainstalovat .NET MAUI workload pro všechny platformy, použijte následující příkaz:

nginx
Copy code
dotnet workload install maui

Pro aktualizaci již nainstalovaných workloadů je nutné spustit:

sql
Copy code
dotnet workload update

Pokud se při vývoji projektu zjistí chybějící workloady, použijte příkaz:

nginx
Copy code
dotnet workload restore

Tvorba iOS a macOS aplikací na Windows

Pokud používáte Visual Studio 2022 na Windows a chcete vytvářet mobilní aplikace pro iOS nebo desktopové aplikace pro macOS Catalyst, můžete se připojit k Mac build hostu přes síť. Podrobný návod pro tuto konfiguraci naleznete na stránkách Microsoftu.

Komponenty uživatelského rozhraní v .NET MAUI

.NET MAUI poskytuje širokou škálu komponent pro tvorbu uživatelského rozhraní. Tyto komponenty lze rozdělit do čtyř hlavních kategorií:

1. Pages: Reprezentují obrazovky aplikace, například Shell, ContentPage, NavigationPage, FlyoutPage, TabbedPage.

2. Layouts: Určují strukturu kombinace jiných komponent, jako jsou Grid, StackLayout, FlexLayout.

3. Views: Jednotlivé komponenty uživatelského rozhraní, například CarouselView, CollectionView, Label, Entry, Editor, Button.

4. Cells: Reprezentují jednotlivé položky v seznamu nebo tabulkovém zobrazení, například TextCell, ImageCell, SwitchCell, EntryCell.

Použití ovládacího prvku Shell

Ovládací prvek Shell je navržen tak, aby usnadnil vývoj aplikací tím, že poskytuje standardizované navigační a vyhledávací možnosti. V rámci vašeho projektu vytvoříte třídu, která dědí od třídy Shell. Vaše odvozená třída definuje komponenty, jako je TabBar, který obsahuje položky Tab, FlyoutItem a ShellContent, které obsahují instanci ContentPage pro každou stránku. TabBar by měl být použit, pokud máte maximálně čtyři až pět stránek pro navigaci, zatímco FlyoutItem navigace by měla být použita pro větší počet položek, které mohou být zobrazeny jako vertikálně rolovatelný seznam.

Flyout navigace je charakteristická tím, že seznam položek vyjede (nebo sklouzne) z levé strany obrazovky mobilního zařízení nebo hlavního okna desktopové aplikace. Uživatel ji aktivuje klepnutím na ikonu "hamburger" (tři horizontální čáry). Při výběru položky se stránka instancuje podle potřeby, jak uživatel naviguje v uživatelském rozhraní. Horní lišta automaticky zobrazí tlačítko Back, pokud je to potřeba, aby uživatel mohl navigovat zpět na předchozí stránku.

Kontrolka ListView

Kontrolka ListView se používá pro dlouhé seznamy hodnot, které jsou vázány na data stejného typu. Může mít hlavičky a patičky a položky seznamu mohou být seskupeny. Každá položka je obsažena v buňce, přičemž dvě základní buňky jsou textová a obrazová. Vývojáři mohou definovat vlastní typy buněk. U buněk lze definovat kontextové akce, které se objeví po posunutí buňky na iPhonu, dlouhém stisknutí na Androidu nebo kliknutí pravým tlačítkem na desktopových OS.

Ovládací prvky Entry a Editor

Kontrolky Entry a Editor slouží pro úpravu textových hodnot a často jsou vázány na vlastnosti modelu entity. Doporučuje se používat Entry pro jednu řádku textu a Editor pro více řádků textu.

Doporučení: Používejte Entry pro jednorázový text a Editor pro vícerozměrné textové hodnoty.

Handlery v .NET MAUI

V .NET MAUI jsou XAML komponenty definovány v prostoru jmen Microsoft.Maui.Controls. Komponenty, nazývané handlery, mapují tyto běžné kontrolky na nativní kontrolky na každé platformě. Například na iOS bude Button mapován na nativní iOS tlačítko UIButton definované v UIKit. Handlery mají vlastnost NativeView, která zpřístupňuje podkladovou nativní kontrolu. To umožňuje práci s platformovými specifickými funkcemi, jako jsou vlastnosti, metody a události.

Psaní kódu specifického pro platformu

csharp
Copy code
#if __ANDROID__
   Handlers.EntryHandler.EntryMapper[nameof(IEntry.BackgroundColor)] = (h, v) =>
   {
     (h.NativeView as global::Android.Views.Entry).UnderlineVisible = false;
   };
#endif

V předem definovaných kompilátorových konstantách jsou například:

• ANDROID

• IOS

• WINDOWS

Tento způsob psaní platformově specifického kódu umožňuje snadnou správu rozdílů mezi různými platformami v rámci jediné aplikace.

Jak efektivně testovat integraci modelů a kontextu databáze pomocí xUnit a EF Core

V moderním vývoji aplikací je klíčové zajistit, že naše datové modely a kontexty databáze jsou správně integrovány a fungují podle očekávání. Tento proces často zahrnuje psaní unit testů pro ověření funkčnosti na úrovni databázového kontextu a entit, které s ním pracují. V tomto textu se podíváme na postup, jak vytvořit testy, které ověří integraci s databází, a jak spustit tyto testy jak ve Visual Studio, tak ve Visual Studio Code.

Pro tento účel je vhodné využít framework xUnit, který je jedním z nejpopulárnějších nástrojů pro psaní unit testů v prostředí .NET. Základem testů je ověření, že naše aplikace dokáže správně připojit k databázi, že je použita správná databázová platforma a že entitní modely fungují dle očekávání.

Příprava testovacího projektu

Pro začátek si vytvoříme nový testovací projekt, který bude obsahovat všechny potřebné testy pro ověření správné integrace modelů. V projektu Northwind.Common.EntityModels.Tests budeme psát testy, které se zaměří na základní operace, jako je připojení k databázi, kontrola poskytovatele a ověření konkrétních dat v tabulce.

Po vytvoření projektu můžeme začít psát samotné unit testy.

Psaní unit testů

Každý unit test se skládá ze tří hlavních částí: Arrange, Act, a Assert. V první fázi (Arrange) nastavíme všechny potřebné proměnné a konfigurace pro test. V druhé fázi (Act) vykonáme operaci, kterou testujeme, například připojení k databázi nebo získání dat z tabulky. A v poslední fázi (Assert) provedeme ověření, že výsledek operace je podle očekávání.

Příklad testu pro ověření připojení k databázi:

csharp
Copy code
[Fact]

public void CanConnectIsTrue()
{
    using (NorthwindContext db = new()) // arrange
    {
        bool canConnect = db.Database.CanConnect(); // act
        Assert.True(canConnect); // assert
    }
}

Další testy mohou ověřovat poskytovatele databáze nebo konkrétní hodnoty v tabulce, například ověření, že první produkt v tabulce je "Chai":

csharp
Copy code
[Fact]
public void ProductId1IsChai()
{
    using(NorthwindContext db = new())
    {
        Product product1 = db.Products.Single(p => p.ProductId == 1);
        Assert.Equal("Chai", product1.ProductName);
    }
}

Důležité je, že testy by měly pokrýt různé aspekty aplikace, a to nejen základní operace, ale i edge cases, tedy neobvyklé situace, které mohou nastat při práci s databází.

Spuštění testů

Pokud používáme Visual Studio Code, můžeme testy spustit pomocí příkazu v terminálu:

bash
Copy code
dotnet test

Výsledek testů bude zobrazen v terminálu a ukáže nám, zda všechny testy proběhly úspěšně.

Údržba a čištění prostředí

Po dokončení testování je důležité se zaměřit na údržbu a čištění prostředí, ve kterém byly testy prováděny. Pokud jste používali Docker nebo Azure SQL Database, je nutné odstranit všechny použité prostředky, aby se předešlo zbytečným nákladům.

Pokud jste použili Azure SQL Database, můžete smazat zdroje přímo z Azure portálu. V případě Dockeru je třeba zastavit kontejnery a odstranit je, aby se uvolnilo místo na disku.

Další doporučené kroky