Jak vytvořit webové rozhraní s pomocí ASP.NET Core a Razor Views

ASP.NET Core poskytuje výkonné nástroje pro vytváření moderních webových aplikací, a jedním z nejdůležitějších aspektů tohoto rámce je možnost snadno vytvářet a spravovat uživatelská rozhraní pomocí Razor views. Razor je výkonný engine pro generování HTML, který umožňuje jednoduchou integraci serverového kódu přímo do HTML pomocí symbolu @. Tento článek se zaměřuje na to, jak správně navrhnout a implementovat webové rozhraní pomocí ASP.NET Core MVC a Razor views.

V první řadě je třeba pochopit, jak fungují Razor views. V architektuře Model-View-Controller (MVC) je View odpovědné za transformaci dat modelu na HTML (nebo jiný formát). Razor je jedním z nejběžněji používaných view enginů v ASP.NET Core, a jeho syntaxe umožňuje snadnou integraci C# kódu přímo do HTML pomocí symbolu @. Tento přístup umožňuje vytvářet dynamické webové stránky, které mohou reagovat na akce uživatele, jako je odesílání formulářů nebo klikání na odkazy.

Začněme analýzou základního příkladu z domácí stránky webové aplikace. V souboru Views/Home/Index.cshtml nalezneme blok C# kódu, který je obvykle obklopený složenými závorkami @{ }. Tento kód se vykoná jako první a může sloužit k nastavení hodnot, které budou následně předány do sdíleného layoutu stránky. Například, pokud bychom chtěli změnit název stránky na základě kontextu, mohli bychom použít následující kód:

csharp
Copy code
@{

   ViewData["Title"] = "Domácí stránka";
}

Dále se zde nachází statický HTML obsah, který může být stylován pomocí CSS frameworku, jako je Bootstrap. Pro správné zobrazení a responsivní design se často používají třídy jako text-center nebo display-4, které definují vzhled textu na stránce.

Další součástí ASP.NET Core MVC aplikace je soubor _ViewImports.cshtml. Tento soubor slouží k importování potřebných jmenných prostorů a k přidání ASP.NET Core Tag Helpers. Tag Helpers jsou speciální atributy, které umožňují definovat logiku pro vykreslování HTML elementů přímo v Razor view. Příklad:

csharp
Copy code
@using Northwind.Mvc

@using Northwind.Mvc.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Další klíčovou částí je soubor _ViewStart.cshtml. Tento soubor se vykonává vždy, když je volána metoda View ve controlleru a slouží k nastavení výchozích hodnot pro všechny views v aplikaci. Například, pokud chceme, aby všechny views používaly sdílený layout, můžeme nastavit Layout vlastnost:

csharp
Copy code
@{

   Layout = "_Layout";
}

Samotný layout se nachází ve sdíleném adresáři Shared, kde najdeme soubor _Layout.cshtml. Tento soubor slouží k definování struktury celé stránky. V něm je možné načítat dynamické hodnoty, jako je název stránky, a generovat základní HTML strukturu, včetně hlavičky, navigačního panelu a těla stránky. Pro navigaci mezi jednotlivými stránkami se používají Tag Helpery s atributy asp-controller a asp-action, které definují controller a akci, jež mají být vykonány po kliknutí na příslušný odkaz.

Jedním z klíčových prvků moderního webového designu je použití responsivního designu, který zajišťuje správné zobrazení webové stránky na různých zařízeních. Jedním z nejpopulárnějších frameworků pro responsivní design je Bootstrap. Tento framework kombinuje CSS a JavaScript a poskytuje předdefinované styly a komponenty, které usnadňují tvorbu webových rozhraní. Bootstrap používá systém "mřížky", který je založený na tzv. kontejnerech a breakpointech.

Bootstrap rozděluje šířku prohlížeče na několik kategorií, které určují, jak se má stránka zobrazovat na různých zařízeních. Například:

• X-Small (bez přípony): <576 px

• Small (sm): >=576 px

• Medium (md): >=768 px

• Large (lg): >=992 px

• Extra large (xl): >=1,200 px

• Extra extra large (xxl): >=1,400 px

Kontejnery jsou základem systému mřížky v Bootstrapu. Pro každý breakpoint se šířka kontejneru dynamicky mění, čímž se zajistí, že obsah zůstane responsivní a bude dobře vypadat na jakémkoli zařízení.

Pokud tedy máme kontejner s třídou .container, jeho šířka se bude automaticky přizpůsobovat velikosti obrazovky:

• Pro šířku prohlížeče menší než 576 px se kontejner roztáhne na 100 %.

• Pro šířku mezi 576 px a 768 px se šířka kontejneru fixuje na 540 px.

• Při větších šířkách se šířka kontejneru postupně zvětšuje na 720 px, 960 px atd.

Tento přístup zajišťuje, že stránky budou vždy správně zobrazeny bez ohledu na velikost zařízení.

Pokud jde o design, je Bootstrap skvělou volbou pro prototypování, ale pro finální verzi webu je vhodné přizpůsobit vzhled podle specifických potřeb a značky. Mnoho vývojářů se rozhodne buď přizpůsobit výchozí šablonu Bootstrapu, nebo ji nahradit vlastním CSS, aby jejich webová aplikace měla unikátní vzhled a dojem.

Jak nakonfigurovat webovou službu pro .NET MAUI a připojit se k ní z mobilních aplikací

Nejprve je potřeba vytvořit nový projekt webové služby. Za tímto účelem se používá šablona ASP.NET Core Web API/webapi s minimalizovanými API. Tento projekt by měl být součástí řešení, které vytvoříte v rámci Chapter18. Při vytváření projektu je nutné vybrat typ autentifikace „Žádná“, povolit HTTPS, ale neaktivovat Docker nebo použít kontroléry. Kromě toho je potřeba zajistit podporu OpenAPI pro generování dokumentace API, což usnadní interakci s vašimi endpointy.

Po vytvoření projektu je nezbytné přidat referenci na projekt databázového kontextu pro SQL Server, který byl vytvořen v předchozích kapitolách (konkrétně v Chapter 2). Tento krok je zásadní pro umožnění správné komunikace mezi webovou službou a databází, například pro operace CRUD nad entitami, jako jsou zákazníci v databázi Northwind.

Další krok zahrnuje kompilaci projektu pomocí příkazu dotnet build. To zajistí, že všechny knihovny a související projekty, které jsou součástí vašeho řešení, budou správně zkompilovány a připraveny k použití. V tomto okamžiku můžete upravit soubor launchSettings.json tak, aby používal specifické porty pro HTTPS a HTTP. Porty 5181 pro HTTPS a 5182 pro HTTP jsou doporučené pro lokální testování a vývoj.

Po konfiguraci endpointů a spuštění webové služby můžete přistoupit k testování API prostřednictvím Swagger dokumentace. To vám umožní snadno testovat vaše endpointy bez nutnosti psaní kódu pro klientskou aplikaci. Například, po rozbalení sekce pro GET /api/customers v Swagger UI, můžete kliknout na tlačítko Try it out, což provede požadavek na server a vrátí seznam zákazníků.

Pokud testujete vaši aplikaci na emulovaných zařízeních, jako je Android nebo iOS, je třeba vzít v úvahu několik specifických faktorů. Na zařízení Android běžící na emulátoru je nutné použít speciální IP adresu 10.0.2.2 pro připojení k webovým službám běžícím na localhostu. To je způsobeno tím, že Android emulátor je oddělen od místní sítě pomocí virtuálního routeru. Na zařízeních iOS pak můžete povolit připojení k nezabezpečeným službám úpravou souboru Info.plist, kde je třeba nastavit NSAllowsArbitraryLoads na hodnotu true. Tento krok umožní aplikaci iOS připojit se k nezabezpečeným HTTP endpointům.

Jak úspěšně implementovat multiplatformní aplikace s .NET MAUI: Využití moderních knihoven a nástrojů pro vývoj

V posledních letech se platforma .NET stala synonymem pro robustní a efektivní vývoj aplikací, které mohou běžet na různých operačních systémech. Mezi nejnovějšími technologiemi, které umožňují multiplatformní vývoj, je .NET MAUI, což je framework pro vývoj nativních aplikací, které běží na iOS, Androidu, Windows, macOS a v budoucnu možná i na Linuxu. Tento nástroj se rychle etabloval jako jeden z klíčových pilířů moderního vývoje aplikací. Nicméně, jak to bývá u nových technologií, jeho implementace přináší i řadu výzev, které je potřeba řešit.

Jednou z největších výzev je práce s komponentními knihovnami. I když existují různé knihovny pro .NET MAUI, které umožňují vývoj komplexních a moderních aplikací, většina z nich je zpoplatněná. Jedinou významnou knihovnou, která je k dispozici zdarma, je knihovna od společnosti DevExpress. Ta podporuje pouze iOS a Android a není open-source, což znamená, že není možné ji upravit dle vlastních potřeb. K dispozici jsou ale i další knihovny, například od Progress Telerik nebo Syncfusion, které vyžadují zakoupení licence (od 999 USD pro jednu licenci u Progress Telerik po 2495 USD za první rok s následnou obnovou u Syncfusion). Tyto knihovny obvykle nabízejí bezplatné zkušební verze, což je užitečné pro vyzkoušení jejich funkcionality před zakoupením.

Při implementaci .NET MAUI aplikací je důležité mít na paměti několik klíčových aspektů. Prvním je výběr správného nástroje pro vývoj multiplatformních uživatelských rozhraní (GUI). Ačkoli .NET MAUI není jedinou možností pro vývoj takových aplikací, je to jeden z nejpopulárnějších a nejosvědčenějších frameworků, který nabízí přístup k nativním prvkům na různých platformách. Kromě toho je vhodné se zaměřit na implementaci modelu MVVM (Model-View-ViewModel) pro efektivní správu dat a interakci mezi uživatelem a aplikací.

Pokud se rozhodnete pro .NET MAUI, budete potřebovat také nástroje pro práci s nativními funkcemi jako je clipboard, výběr souborů nebo získávání informací o zařízení. Tyto funkce jsou neocenitelné při vývoji moderních aplikací, které mají interagovat s uživatelem na hlubší úrovni. Například práce s clipboardem umožňuje aplikaci ukládat a načítat textové informace mezi různými aplikacemi, což je základní funkcionalita pro mnoho běžných aplikací. Dále je důležité implementovat možnost výběru souborů, což je základní součástí každé aplikace, která se zaměřuje na správu dokumentů či multimédií.

Kromě toho, že je třeba věnovat pozornost samotné funkčnosti, je také nutné se zaměřit na správnou optimalizaci a implementaci výkonových funkcí. Mezi takové funkcionality patří například nastavení filtru pro výběr souborů, což umožňuje uživatelům vybírat pouze určité typy souborů podle jejich formátu. Další nezbytnou součástí vývoje je správné zajištění připojení aplikace k místním webovým službám během testování v emulátorech, což vyžaduje správnou konfiguraci síťového připojení pro iOS a Android.

Pokud jde o samotný vývoj, je kladeno důraz na výběr správného datového formátu pro přenos dat mezi jednotlivými vrstvami aplikace. Například JSON nebo XML jsou skvělé pro lidské čtení a ladění, zatímco binární formáty jsou efektivnější pro přenos větších objemů dat. Důležitá je také volba správného transportního protokolu, který ovlivňuje rychlost a efektivitu komunikace mezi jednotlivými vrstvami aplikace. Novější protokoly jako HTTP/2 jsou rychlejší, ale jejich podpora není ještě tak rozšířená jako u starších protokolů jako HTTP/1.1.

Všechny tyto faktory by měly být zváženy při výběru technologie pro konkrétní projekt, který si klade za cíl využívat multiplatformní frameworky jako .NET MAUI. Při vývoji aplikace je třeba nejen zaměřit se na implementaci jednotlivých funkcí, ale také věnovat pozornost celkové architektuře aplikace, která by měla být flexibilní a škálovatelná.

Jak správně implementovat lokalizaci a internacionalizaci v aplikacích?

Lokalizace a internacionalizace jsou klíčovými aspekty vývoje aplikací, které mají globální dosah. Správná implementace těchto procesů může výrazně zjednodušit přizpůsobení aplikace pro různé jazykové a kulturní kontexty, což je v dnešním globalizovaném světě neocenitelné. Představme si konkrétní příklad aplikace, která potřebuje podporovat různé jazyky a formáty, jako jsou datum, čas nebo měny, a ukážeme si, jak k tomu přistoupit.

Začněme jednoduchým příkladem, kde aplikace požaduje uživatele, aby zadali své jméno, datum narození a plat. Tento typ interakce je základní, ale lokalizovaný způsob komunikace s uživatelem se může dramaticky změnit v závislosti na jeho geografické poloze. Pokud spustíte kód v různých kulturních kontextech, například v Dánsku (da-DK), Francii (fr-FR), Kanadě (fr-CA) nebo Íránu (fa-IR), aplikace automaticky přizpůsobí vstupní texty a formáty podle specifických pravidel dané kultury.

Příklad zadaný pro Dánsko by mohl vypadat takto:

„Indtast dit navn: Bob
Indtast din fødselsdato: 3/4/1987
Indtast din løn: 45449
Bob blev født på en fredag. Bob er 18.413.280 minutter gammel. Bob tjener 45.449,00 kr.“

Zde aplikace správně používá dánské formáty pro datum a měnu. Při testování aplikace pro jinou kulturní oblast, například pro Francii (fr-FR), se formát měny automaticky změní na euro a také se použije formát data specifický pro tuto zemi. Výsledek pro Francii bude následující:

„Entrez votre nom: Monique
Entrez votre date de naissance: 2/12/1990
Entrez votre salaire: 45000
Monique est née un dimanche. Monique a 16 485 120 minutes. Monique gagne 45 000,00 €.“

Stejně tak pro Kanadu (fr-CA) se používají dvojjazyčné formáty, což může být důležité pro země s vícejazyčnými oblastmi, kde je potřeba podpořit jak francouzštinu, tak angličtinu:

„Entrez votre nom / Enter your name: Sophie
Entrez votre date de naissance / Enter your date of birth: 4/5/2001
Entrez votre salaire / Enter your salary: 65000
Sophie est née un jeudi. Sophie a 11 046 240 minutes. Sophie gagne 65 000,00 $ CA.“

Jedním z klíčových nástrojů pro tuto funkci v .NET je používání souborů s lokalizovanými prostředky (resx). Tyto soubory obsahují klíče a hodnoty, které jsou přeloženy do různých jazyků. Soubor pro angličtinu může vypadat například takto:

„Enter your name: Enter your date of birth: Enter your salary: {0} was born on {1:dddd}. {0} is {2:N0} minutes old. {0} earns {3:C}.“

Pokud pak přidáte soubor s lokalizovanými prostředky pro danou kulturu, například pro Polsko nebo Farsí, texty budou automaticky přizpůsobeny těmto jazykům a jejich pravidlům:

Polský soubor by vypadal následovně:

„Wpisz swoją datę urodzenia: Wpisz swoje imię i nazwisko: Wpisz swoje wynagrodzenie: {0} urodził się na {1:dddd}. {0} ma {2:N0} minut. {0} zarabia {3:C}.“

A íránský soubor by mohl být ve Farsí:

„دینک دراو ار دوخ دلوت خیرات / Enter your date of birth:
نک دراو ار تمسا / Enter your name:
دینک دراو ار دوخ قوقح / Enter your salary:
{0} رد {1:dddd}
{0} .دمآ ایند هب {2:N0}
{0} .تسا هقیقد {3:C}“

Pro efektivní lokalizaci je důležité mít na paměti, že různé regiony mohou mít specifické požadavky na zobrazení dat a časů, například v Íránu, kde se používá perský kalendář, nebo v některých afrických zemích, kde se používají jiné formáty měn. To může být ještě složitější, pokud se jedná o jazyky, které se čtou zprava doleva, jako je Farsí nebo arabština.

Důležité je mít na paměti, že lokalizace a internacionalizace nejsou jednorázovou záležitostí. Je potřeba nejen připravit aplikaci na podporu různých jazyků a regionů, ale i neustále aktualizovat soubory s lokalizovanými prostředky při přidávání nových funkcí nebo při změnách ve formátech. Je třeba si také ujasnit, zda aplikace potřebuje opravdu podporu více jazyků, nebo zda stačí pouze jeden jazyk pro určitou oblast.