Jak správně vytvořit seznam zákazníků a detailní zobrazení v aplikaci pomocí .NET MAUI

Pro vývoj mobilních a desktopových aplikací pomocí .NET MAUI je jedním z klíčových konceptů efektivní práce se seznamy dat a detailními zobrazeními. V tomto případě se zaměříme na implementaci seznamu zákazníků, jejich zobrazení a interakci s uživatelem prostřednictvím různých akcí, jako jsou přidání, smazání nebo telefonování zákazníkovi.

Pro účely testování, než bude k dispozici webová služba pro načítání skutečných dat, je možné použít metodu AddSampleData, která napoprvé přidá do seznamu tři vzorové zákazníky. Tyto vzorové položky obsahují základní údaje, jako je ID zákazníka, název firmy, kontaktní osoba, město, země a telefonní číslo.

V dalším kroku se přistupuje k definování uživatelského rozhraní pro zobrazení seznamu zákazníků. V souboru CustomersPage.xaml je definován seznam, kde každý zákazník je zobrazen s názvem společnosti a městem. Důležité je nastavit vlastnost IsPullToRefreshEnabled na hodnotu true, což umožňuje uživatelům aktualizovat seznam taháním prstu (nebo myši) dolů. Pro pohodlí uživatelů je také přidáno tlačítko pro přidání nového zákazníka, což umožňuje snadnou navigaci na stránku pro detailní zobrazení a editaci informací o zákazníkovi.

Mezi událostmi, které aplikace podporuje, jsou například:

• Customer_Tapped: Aktivuje se, když uživatel klepne na zákazníka v seznamu, což způsobí přechod na detailní zobrazení daného zákazníka.

• Customers_Refreshing: Aktivuje se při tažení seznamu dolů pro jeho obnovení. Tento proces je simulován zpožděním, které může trvat přibližně 1,5 sekundy.

• Customer_Deleted: Umožňuje uživateli smazat zákazníka po dlouhém stisknutí (nebo kliknutí pravým tlačítkem) a následném výběru možnosti smazání.

• Customer_Phoned: Aktivuje se při klepnutí na telefonní ikonu, což uživateli umožní zavolat na telefonní číslo daného zákazníka, pokud je telefonní funkce podporována na zařízení.

• Add_Clicked: Aktivuje se po kliknutí na tlačítko přidání nového zákazníka.

Pokud jde o implementaci v kódu, je zde klíčovým krokem nastavení BindingContext, které se používá pro propojení datového modelu (CustomersListViewModel) se zobrazením. Tento model obsahuje všechny informace o zákaznících a jeho instanci lze propojit s obsahem stránky. Když uživatel klikne na nějakého zákazníka, přechází do detailní stránky tohoto zákazníka. Při přetahování seznamu dolů se spustí simulovaná obnova, která po určitém čase opět obnoví seznam.

Veškeré tyto akce jsou podporovány příslušnými event handlery v kódu, které zajišťují správnou reakci na různé uživatelské interakce. Každá akce, ať už jde o telefonování, smazání nebo přidání nového zákazníka, je pečlivě propojena s odpovídajícím uživatelským rozhraním a databázovými operacemi, čímž se celková aplikace stává interaktivní a přehledná.

Jak správně navrhnout a implementovat OData webové služby v ASP.NET Core

OData je protokol pro vytváření a spotřebu RESTful API, který Microsoft vytvořil v roce 2007. OData umožňuje flexibilní práci s daty, která jsou zpřístupněna prostřednictvím webového API. Od svého vzniku prošel OData několika verzemi, přičemž verze 4.0 byla standardizována na OASIS a vydána v roce 2014. Tento protokol je postaven na protokolu HTTP a poskytuje různé koncové body pro podporu více verzí a sad entit. V této kapitole se zaměříme na praktickou implementaci OData ve frameworku ASP.NET Core.

Tradiční webové API většinou definuje metody a specifikuje, jaké údaje budou vráceny. Naopak OData používá dotazy v URL, které umožňují klientovi určit, jaká data mají být vrácena, čímž minimalizuje potřebu opakovaných požadavků. Služba OData kontroluje rozsah těchto dotazů, ale klient má plnou kontrolu nad tím, jaké informace požaduje. Příklad dotazu může vypadat takto:

bash
Copy code
GET https://example.com/v1/products?$filter=contains(ProductName, 'burger') and UnitPrice lt 4.95&$orderby=Shipper/Country,UnitPrice&$select=ProductName,UnitPrice&$expand=Supplier

Tento dotaz vrátí seznam produktů, jejichž název obsahuje slovo "burger" a cena je nižší než 4.95, seřazený podle země a ceny, a rozšířený o informace o dodavatelích. Takové dotazy poskytují flexibilitu, protože klient má možnost detailně specifikovat, která data chce získat, a jakým způsobem má být výsledný seznam seřazen.

Implementace OData v ASP.NET Core

Při vytváření projektu je třeba specifikovat následující:

1. Šablona projektu: Použijeme šablonu ASP.NET Core Web API.

2. Konfigurace projektu: Vytvoříme projekt s názvem Northwind.OData.Service a nakonfigurujeme jej pro použití s HTTPS a OpenAPI.

3. Přidání balíčků: Využijeme balíčky pro ASP.NET Core OData (Microsoft.OData.Core a Microsoft.OData.Edm), které jsou nezbytné pro práci s OData modely a entitami.

4. Definování OData modelů: OData umožňuje definovat modely, které budou zpřístupněny prostřednictvím API. V našem případě se zaměříme na modely pro produkty, kategorie a dodavatele.

Po vytvoření základní struktury projektu a přidání potřebných balíčků můžeme přistoupit k definici OData modelů, které budou pracovat s entitami z naší databáze (například se systémem Northwind). Tento model umožňuje specifikovat, které tabulky (entity) budou zpřístupněny a jaké operace s nimi budou možné (např. filtrování, řazení, selekce polí).

Příklad definice OData modelu

Pokud chceme zpřístupnit katalog produktů, můžeme použít následující kód pro definici OData modelu:

csharp
Copy code
using Microsoft.OData.Edm;

using Microsoft.OData.ModelBuilder;
using Packt.Shared;
partial class Program
{
    static IEdmModel GetEdmModelForCatalog()
    {
        ODataConventionModelBuilder builder = new();
        builder.EntitySet("Categories");
        builder.EntitySet("Products");
        builder.EntitySet("Suppliers");
        return builder.GetEdmModel();
    }
}

Tento model definuje, že API bude zpřístupňovat tři entity: Categories, Products a Suppliers. Pokud bychom chtěli zpřístupnit i zákazníky, objednávky a jejich vztahy, můžeme definovat jiný model, který bude vypadat takto:

csharp
Copy code
static IEdmModel GetEdmModelForOrderSystem()
{
    ODataConventionModelBuilder builder = new();
    builder.EntitySet("Customers");
    builder.EntitySet("Orders");
    builder.EntitySet("Employees");
    builder.EntitySet("Products");
    builder.EntitySet("Shippers");
    return builder.GetEdmModel();
}

Konfigurace služby a registrace kontextu databáze

Abychom zajistili správnou konfiguraci OData v aplikaci, je třeba provést registraci databázového kontextu a OData modelů v Program.cs:

csharp
Copy code
builder.Services.AddNorthwindContext();
builder.Services.AddControllers()
    .AddOData(options => options
        .Select()
        .Expand()
        .Filter()
        .OrderBy());

Tímto způsobem nastavíme podporu pro výběr, filtrování, rozšíření a řazení dat, což jsou klíčové funkce OData. Tyto funkce umožní klientovi definovat, jaká data chce získat a jakým způsobem mají být výsledky seřazeny nebo filtrovány.

Další úvahy

Je důležité si uvědomit, že OData není pouze nástrojem pro poskytování dat, ale i pro jejich flexibilní spotřebu. Proto je při návrhu OData služby kladeno důraz na to, jaké operace budou podporovány, a jaký rozsah dat bude možné zpřístupnit. OData modely mohou být definovány nejen pro konkrétní sady entit, ale i pro specifické požadavky na projekci (výběr jen některých polí), filtrování (např. produkty s cenou nižší než určitá hodnota) a řazení dat podle více kritérií.

Tento přístup je výhodný především v situacích, kdy aplikace potřebuje flexibilitu a efektivitu při komunikaci s daty. Klienti mohou získávat pouze ta data, která opravdu potřebují, což vede k úspoře šířky pásma a rychlejšímu načítání.