Kapitola 7: Přidání funkcí do aplikace

Článek
03/09/2022
12 min ke čtení

Kiana a Maria jsou nadšené, že mohou aplikaci pro správu inventáře ukázat terénnímu technikovi Calebovi. Líbí se mu to, ale navrhuje přidat některé další funkce uživatelského rozhraní, aby se usnadnilo používání. Caleb by konkrétně rád:

Přidával fotografie práce vykonané na kotli nebo klimatizační jednotce a přidat je k podrobnostem schůzky na obrazovce Upravit schůzku. Tento obrázek by se mohl ukázat jako užitečný doklad o provedených opravách. Obrazovka Upravit schůzku aktuálně umožňuje uživateli přidat obrázek ke schůzce, ale obrázek se neuloží, protože tato funkce ještě nebyla plně implementována. Důvodem tohoto opomenutí je, že Kiana a Preeti musí určit nejlepší místo pro ukládání obrazových dat. Caleb by si přál, aby tato funkce byla přidána co nejdříve.
Zobrazte úplnou historii schůzek pro zákazníka, sledujte opravy, které byly požadovány, a sledujte všechny probíhající problémy, které mohou vyžadovat opakované vyvolání techniků.
Objednejte si díly z obrazovky Podrobnosti dílů.

Navíc ovládací prvek obrázků na obrazovce Podrobnosti dílů zobrazuje obrázky uložené na zadané adrese URL. V současné době jsou adresy URL v datech jednoduše zástupnými symboly. Stejně jako fotografie pro obrazovku schůzky musí Kiana a Preeti určit nejlepší místo pro ukládání obrázků, aby byly k dispozici aplikaci.

Přidání fotografie ke schůzce

Fotografie musí být uloženy někde přístupné aplikaci. Z důvodu výkonu a bezpečnosti Preeti nechce ukládat fotografie na OneDrive nebo Azure SQL Database. Místo toho se s Kianou rozhodnou použít Azure Blob Storage. Blob Storage je optimalizováno pro uchovávání velkých binárních objektů a je robustní se zabudovaným zabezpečením. Power Apps má konektor, který umožňuje přístup k Blob Storage. Maria navrhuje přidat novou obrazovku pro pořizování snímků, která zlepší uživatelský komfort Caleba.

Další informace: Azure Blob Storage

Preeti vytvoří účet Blob Storage z webu Azure Portal podle následujících kroků:

Na Azure Portal na Domovské stránce vyberte + Vytvořte zdroj. Do pole Prohledejte Marketplace zadejte Účet úložiště a potom vyberte Enter.
Na stránce Účet úložiště vyberte Vytvořit.
Na stránce Vytvořit účet úložiště zadejte následující podrobnosti a poté vyberte Zkontrolovat + vytvořit:
- Předplatné: Vyberte předplatné.
- Skupina zdrojů: webapi_rg
- Název účtu úložiště: Zadejte globálně jedinečný název a poznamenejte si ho na později
- Umístění: Vyberte nejbližší umístění
- Výkon: Standardní
- Druh účtu: BlobStorage
- Replikace: RA-GRS
Na stránce ověření vyberte Vytvořit a počkejte, až se účet úložiště zřídí.
Přejděte na stránku nového účtu úložiště.
Na stránce Přehled vyberte Kontejnery.
Na stránce Kontejnery vyberte + Kontejner. Vytvořte nový kontejner s názvem fotky a potom vyberte Vytvořit. Změňte Úroveň veřejného přístupu na Blob.
Zpět na stránce Přehled pro účet úložiště, v části nastavení vyberte Přístupové klíče. Na stránce Přístupové klíče vyberte Zobrazit klíče. Poznamenejte si hodnotu klíče pro key1.

Preeti dává název a klíč účtu úložiště Kianě, která pomocí těchto informací vytvoří vlastní konektor pro aplikaci podle následujících kroků:

Přihlaste se do Power Apps
V levém podokně rozbalte Data a pak vyberte Připojení. Měla by být uvedena existující připojení používaná aplikací. Vyberte + Nové připojení.
Na stránce Nové připojení přejděte dolů a vyberte Připojení, vyberte Azure Blob Storage a potom vyberte Vytvořit.
V dialogovém okně Azure Blob Storage zadejte název účtu úložiště a přístupový klíč, který poskytla Preeti, a poté vyberte Vytvořit.
Počkejte, až se vytvoří nové připojení. Měl by se objevit v seznamu připojení.

Maria může použít toto připojení k Blob Storage v aplikaci k ukládání a načítání fotografických obrázků. Jejím prvním úkolem je přidat připojení k aplikaci pomocí následujících kroků:

Otevřete aplikaci VanArsdelApp pro úpravy v Power Apps Studio.
V podokně Data vyberte Přidat data, vyhledejte konektor Azure Blob Storage a poté vyberte konektor.
V dialogovém okně Azure Blob Storage vyberte konektor Azure Blob Storage pro přidání do vaší aplikace.

Dalším úkolem Marie je přidat obrazovku, která technikovi nebo inženýrovi umožní uložit fotografii. Maria se rozhodne přidat novou obrazovku s ovládacím prvkem Picture. Když je aplikace spuštěna na mobilním zařízení, může se tento ovládací prvek integrovat s fotoaparátem, aby technik mohl pořídit fotografii. Na jiných zařízeních tento ovládací prvek vyzve uživatele, aby místo toho nahrál obrazový soubor. Přidá odkaz na tuto novou obrazovku z obrazovky EditAppointment obrazovku podle těchto kroků:

V nabídce Vložit vyberte Nová obrazovka a potom vyberte šablonu Posouvatelné.
V podokně Stromové zobrazení vyberte novou obrazovku a přejmenujte ji na TakePhoto.
Změňte vlastnost Text majetek ovládacího prvku LblAppNameX na této obrazovce na Vyfotit snímek.
Odstraňte ovládací prvek CanvasX z obrazovky.
V nabídce Vložit z rozevíracího seznamu Média vyberte Add picture k vytvoření nového ovládacího prvku obrázku.

Poznámka

Ovládací prvek obrázku je ve skutečnosti složená vlastní součást, která umožňuje uživateli přidat obrázek na obrazovku a zobrazit výsledky.
Změňte velikost a přemístěte ovládací prvek obrazu tak, aby zabíral tělo obrazovky.
V podokně Stromové zobrazení vyberte ovládací prvek IconBackarrowX na obrazovce AppointmentDetails a poté vyberte Kopírovat.
V nabídce Stromové zobrazení klikněte pravým tlačítkem na obrazovku TakePhoto a vyberte Vložit. Ovládací prvek IconBackArrowX bude přidán na obrazovku.
Přesuňte ovládací prvek IconBackArrowX vlevo nahoře od panelu záhlaví.
V podokně Stromové zobrazení vyberte ovládací prvek IconBackArrowX na obrazovce TakePhoto. V pravém podokně na kartě Pokročilý upravte vlastnost akce OnSelect na Navigate(EditAppointment, ScreenTransition.None).
Přidejte novou ikonu Uložit vpravo nahoru od panelu záhlaví. Nastavte vlastnost Viditelné tohoto ovládacího prvku na If(IsBlank(AddMediaButton1.Media), false, true).

Díky tomuto nastavení je ikona Uložit neviditelná, pokud uživatel nevybral obrázek.
Změňte vzorec ve vlastnosti akce OnSelect ovládacího prvku ikony Uložit na následující.
```
Set(ImageID, GUID() & ".jpg");

AzureBlobStorage.CreateFile("photos", ImageID, AddMediaButton1.Media);

Patch(appointmentsCollection, LookUp(appointmentsCollection,id=BrowseAppointmentsGallery.Selected.id), {imageUrl:"https://myappphotos.blob.core.windows.net/photos/" & ImageID});

Navigate(EditAppointment,ScreenTransition.Cover);
```
Nahraďte <storage account name> názvem účtu úložiště Azure, který vytvořila Preeti.

Tento kód nahraje obrázek do kontejneru fotky v úložišti Blob Storage. Každý obrázek má jedinečný název souboru. Funkce Oprava aktualizuje vlastnost imageUrl v záznamu schůzek s URL obrázku v Blob Storage.
V podokně Stromové zobrazení rozbalte ovládací prvek AddMediaWithImageX. Upravte vlastnost Image ovládacího prvku UploadedImageX a nastavte ji na AppointmentImage.

AppointmentImage je proměnná, která se naplní obrázkem buď nahraným uživatelem, nebo jako výsledek pořízení fotografie. Tuto proměnnou inicializujete na obrazovce EditAppointment později.
Vyberte ovládací prvek AddMediaButtonX v podokně Stromové zobrazení. Nastavte vlastnost UseMobileCamera tohoto ovládacího prvku na true. Nastavte vlastnost akce OnChange ovládacího prvku na následující.
```
Set(AppointmentImage, AddMediaButton1.Media)
```
Tento vzorec mění proměnnou AppointmentImage, aby odkazovala na nový obrázek. Ovládací prvek UploadedImageX zobrazí tento obrázek.
V podokně Stromové zobrazení vyberte obrazovku EditAppointment.
Rozbalte ovládací prvek EditFormX. Pod ovládacím prvkem Image_DataCardX odstraňte ovládací prvek AddPictureX.
Vyberte ovládací prvek ImageX. Změňte následující vlastnosti:
- Obrázek: Parent.Default
- X: 30
- Y: DataCardKey X.Y + DataCardKey X.Height + 150 (where DataCardKeyX je datová karta obsahující ovládací prvek ImageX)
- Šířka: Parent.Width - 60
- Výška: 400
Poznámka

Ovládací prvek obrázku se rozevře pod spodní částí obrazovky, ale automaticky se přidá posuvník, který umožní zobrazení obrázku.
Přidejte ikonu Fotoaparát na datovou kartu a poté ji umístěte mezi popisek obrázek a ovládací prvek ImageX. Změňte název ovládacího prvku na CameraIcon

Poznámka

Ujistěte se, že jste vybrali ovládací prvek Camera Icon, ne ovládací prvek Camera Media.
Nastavte vlastnost akce OnSelect ovládacího prvku CameraIcon na následující.
```
Set(AppointmentImage, SampleImage);

Navigate(TakePhoto, ScreenTransition.None);
```
Když uživatel vybere tuto ikonu, přejde na obrazovku TakePhoto, kde může pořídit fotografii nebo nahrát obrázek. Zobrazený počáteční obrázek bude výchozím ukázkovým obrázkem.

Chcete-li otestovat aplikaci, proveďte následující:

V podokně Stromové zobrazení vyberte obrazovku Domů.
Vyberte F5 pro náhled aplikace.
Na Domovské obrazovce vyberte Schůzky.
Na obrazovce procházení vyberte libovolnou schůzku.
Na obrazovce podrobností schůzky vyberte ikonu úprav v záhlaví obrazovky.
Na obrazovce úprav vyberte ikonu Fotoaparát obrázku.
Ověřte, že se objevila obrazovka Pořídit snímek.
Vyberte Změnit obrázek a nahrajte obrázek podle svého výběru (nebo pořiďte fotografii, pokud používáte aplikaci na mobilním zařízení).
Zvolte Uložit. Ověřte, zda se obrázek zobrazí na stránce podrobností, a poté výběrem ikony zaškrtnutí uložíte změny zpět do databáze.
Zavřete okno náhledu a vraťte se na Power Apps Studio.

Zobrazení obrázků dílů

Poté, co zjistily, že Blob Storage je ideálním místem pro ukládání obrázků spojených se schůzkami, Preeti a Kiana se rozhodly, že by pro ukládání obrázků dílů měly použít stejný přístup. Klíčovou výhodou tohoto přístupu je, že nevyžaduje žádné úpravy aplikace. Aplikace znovu používá stejný účet úložiště a stejné připojení. Jako samostatné migrační cvičení mohou provádět následující:

Vytvořte nový kontejner úložiště blob.
Nahrajte obrázky dílů do tohoto kontejneru.
Změňte odkazy ImageUrl v tabulce Díly v databázi InventoryDB adresu URL každého obrázku.

Aplikace automaticky vyzvedne novou adresu URL pro každý obrázek součásti a ovládací prvek Image na obrazovce PartDetails zobrazí obrázek.

Sledování historie schůzek u zákazníka

Maria si myslí, že možnost rychle zobrazit celou historii z předchozích návštěv zákazníka u zákazníka by mohla být přidána do aplikace vytvořením vlastní komponenty. Ve spolupráci s Calebem na tom, jaké informace chtějí vidět, Maria načrtla jednoduchý design obsahující poznámky a datum každé návštěvy.

Data historie schůzek u zákazníka.

Při pohledu na data Maria věří, že ovládací prvek galerie je nejlepší způsob, jak zobrazit data tabulky na obrazovce.

Maria vytvoří vlastní komponentu takto:

Použitím Power Apps Studio v podokně Stromové zobrazení vyberte Součásti a potom vyberte + Nová součást.

Nová prázdná součást s názvem Component1 je vytvořena. Přejmenujte komponentu na DateHistoryComponent.
V nabídce Vložit vyberte Galerie a poté vyberte šablonu galerie Prázdná flexibilní výška.
Přesuňte ovládací prvek galerie a změňte jeho velikost tak, aby vyplňoval vlastní komponentu.
Vyberte Přidejte položku z podokna vložení, poté vyberte Textový štítek.
V podokně Stromové zobrazení přejmenujte ovládací prvek štítku na NotesLabel. Nastavte vlastnost Přetéčení na Overflow.Scroll. Toto nastavení umožňuje ovládacímu prvku zobrazit několik řádků textu a umožnit uživateli v něm procházet. Nastavte následující vlastnosti, abyste mohli umístění a velikost ovládacího prvku:
- LineHeight: 2
- X: 28
- Y: 18
- Šířka: 574
- Výška: 140
Přidá do ovládacího prvku druhý textový popisek Přejmenujte tento ovládací prvek na DateLabel a nastavte následující vlastnosti:
- LineHeight: 2
- X: 28
- Y: 174
- Šířka: 574
- Výška: 70
Chcete-li zjistit, jak bude ovládací prvek vypadat, když je vložen do aplikace a je zobrazen s jeho motivem, v podokně Stromové zobrazení vyberte DateHistoryComponent. V pravém podokně na kartě Pokročilý vyberte pole Výplň a změňte barvu na RGBA(0, 0, 0, 1).
V podokně Vložit rozbalte Tvary a přidejte ovládací prvek Obdélník k vlastní komponentě. Nastavte následující vlastnosti tohoto ovládacího prvku:
- X: 0
- Y: 273
- Šířka: Parent.Width
- Výška: 2
Tento ovládací prvek funguje jako oddělovač mezi záznamy zobrazenými v galerii.

Maria zná přidávání ovládacích prvků na obrazovky a vytváření aplikací pomocí Power Apps. Opakovaně použitelné komponenty však nefungují úplně stejným způsobem. Kiana Marii popsala, že aby mohla používat data ve vlastní komponentě, musí přidat nějaké další vlastní vstupní vlastnosti. Kiana také vysvětlila, že Maria potřebuje poskytnout vzorová data pro tyto vlastnosti, aby jí umožnila odkazovat na datová pole v ovládacích prvcích v její komponentě, a to následovně:

V podokně Stromové zobrazení vyberte DateHistoryComponent. V pravém podokně na kartě Vlastnosti vyberte Nová vlastní vlastnost.
V dialogovém okně Nová vlastní vlastnost zadejte následující hodnoty a poté vyberte Vytvořit:
- Zobrazovaný název: Data
- Název: Data
- Popis: Tabulka schůzek pro zákazníka s poznámkami a daty
- Typ vlastnosti: Vstup
- Datový typ: Tabulka
- Zvýšit OnReset při změně hodnoty: Ponechte prázdné
Chcete-li změnit ukázková data zobrazená ovládacím prvkem, vyberte novou vlastní vlastnost Data. Do pole vzorce zadejte Table({Poznámky: "Příklad textu pole poznámky.", 'Datum schůzky' :Text(Today())}).
V podokně Stromové zobrazení vyberte ovládací prvek GaleryX v DateHistoryComponent a přejmenujte jej na AppointmentHistory.
V pravém podokně na kartě Pokročilý nastavte vlastnost Položky ovládacího prvku AppointmentHistory na Parents.Data.
Vyberte ovládací prvek NotesLabel. V pravém podokně na kartě Pokročilý změňte vlastnost Text na ThisItem.Notes a změňte vlastnost Velikost na 20.

Poznámka

Vlastnost Velikost určuje velikost písma pro text zobrazený ovládacím prvkem.
Vyberte ovládací prvek DateLabel pro změnu vlastnosti Text na ThisItem.'Datum schůzky' a změňte vlastnost Velikost na 20. V polích vlastní komponenty by se měla zobrazit ukázková data.

Vlastní komponenta je kompletní. Maria pomocí této komponenty vytvoří novou obrazovku pro zobrazení historie schůzek pro zákazníka:

V podokně Stromové zobrazení vyberte kartu Obrazovky.
Rozbralte obrazovku BrowseAppointments, rozbalte ovládací prvek BrowseAppointmentsGallery a vyberte ovládací prvek Body1_1. V nabídce Vložení vyberte možnost Ikony a potom vyberte ikonu Seznam podrobností.
Změňte název ovládacího prvku ikony na ViewAppointments
Vyberte ovládací prvek BrowseAppointmentsGallery v nabídce Stromové zobrazení. V pravém podokně na kartě Rozšířený změňte vlastnost TemplateSize na 220. Zvětšením této vlastnosti se rozšíří prostor dostupný v galerii.
Přesuňte ikonu ViewAppointments na prázdné místo pod jménem zákazníka.
Vyberte ovládací prvek ikony ViewAppointments. Vlastnost akce OnSelect nastavte na tento vzorec.
```
ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));

Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)
```
Tento vzorec naplní kolekci s názvem customerAppointmentsCollection se schůzkami pro vybraného zákazníka a poté přejde na AppointmentHistoryScreen k jejich zobrazení. Tuto obrazovku vytvoříte v následujících krocích.
V nabídce Vložit vyberte Nová obrazovka a potom vyberte šablonu Posouvatelné.
Změňte název nové obrazovky na AppointmentHistoryScreen.
Odstraňte ovládací prvek CanvasX, který byl přidán na tuto obrazovku.
Vyberte ovládací prvek LblAppNameX na této obrazovce. V pravém podokně na kartě Rozšířené změňte vlastnost Text na následující.
```
"Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
```
Nastavte následující vlastnosti pro ovládací prvek LblAppNameX pro nastavení polohy a velikosti:
- X: 90
- Y: 0
- Šířka: 550
- Výška: 140
Vyberte RectQuickActionBarX a nastavte vlastnost Výška na 140.
Přidejte ovládací prvek Levá ikona do záhlaví obrazovky nalevo od názvu. Nastavte vlastnost akce OnSelect pro tento ovládací prvek na Navigate(BrowseAppointments, Transition.None).
V nabídce Vložení vyberte Vlastní a potom vyberte DateHistoryComponent.
Přesuňte a změňte velikost součásti tak, aby zabírala tělo obrazovky pod nadpisem.
Nastavte následující vlastnosti této součásti:
- Data: customerAppointmentsCollection
- Datum schůzky: startDateTime
- Poznámky: poznámky
Uložte aplikaci.

Chcete-li otestovat aplikaci, proveďte následující:

V podokně Stromové zobrazení vyberte obrazovku Domů.
Vyberte F5 pro náhled aplikace.
Na Domovské obrazovce vyberte Schůzky.
Na obrazovce procházení vyberte ikonu Podrobný seznam pro jakoukoli schůzku.
Ověřte, že se objevgila obrazovka Historie schůzek pro vybraného zákazníka.
Zavřete okno náhledu a vraťte se na Power Apps Studio.

Objednávání dílů

Klíčovým požadavkem systému je umožnit technikovi objednat jakékoli součásti požadované při návštěvě zákazníka. Pokud jsou díly na skladě, mělo by být možné naplánovat další návštěvu k dokončení opravy v nejbližší vhodný termín pro zákazníka. Pokud jsou díly momentálně na skladě a je třeba je objednat, může technik informovat zákazníka. Poté, co Maria obdrží oznámení, že díly dorazily do skladu, může Malik domluvit schůzku se zákazníkem.

Část rezervace aplikace používá tabulky v databázi InventoryDB zobrazené na následujícím obrázku. Tabulka Objednávky obsahuje informace o objednávkách zadaných pro díly. V tabulce Rezervace je uveden seznam požadavků na rezervaci, které technici a inženýři podali u dílů. Tabulka Technici uvádí jméno a kontaktní číslo technika, který provedl rezervaci, což usnadňuje správkyni zásob Marii dotazovat se, pokud je to nutné.

Datový model Rezervace.

Kiana musí pro podporu této funkce aktualizovat webové rozhraní API pomocí metody, která načte počet vyhrazených položek pro zadanou část, a to následujícím způsobem:

Otevřete projekt webového rozhraní API FieldEngineerApi ve Visual Studio Code.

Přidejte soubor s názvem Order.cs do složky Modely. Přidejte do tohoto souboru následující kód. Třída Objednávky sleduje podrobnosti objednávek zadaných pro díly.

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace FieldEngineerApi.Models
{
    public class Order 
    {
        [Key]
        public long Id { get; set; }

        public long BoilerPartId { get; set; }

        public BoilerPart BoilerPart { get; set; }

        public long Quantity { get; set; }

        [Column(TypeName = "money")]
        public decimal TotalPrice { get; set; }

        [Display(Name = "OrderedDate")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime OrderedDateTime { get; set; }

        public bool Delivered { get; set; }

        [Display(Name = "DeliveredDate")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime? DeliveredDateTime { get; set; }
    }
}

Přidejte další nový pojmenovaný soubor Reservation.cs do složky Modely a do tohoto souboru přidejte následující kód. Třída Rezervace obsahuje informace o počtu položek pro danou část, které jsou aktuálně rezervovány pro ostatní zákazníky.

using System;
using System.ComponentModel.DataAnnotations;

namespace FieldEngineerApi.Models
{
    public class Reservation
    {
        [Key]
        public long Id { get; set; }

        public long BoilerPartId { get; set; }

        public BoilerPart BoilerPart { get; set; }

        public int NumberToReserve { get; set; }

        public string EngineerId { get; set; }

        public InventoryEngineer Engineer { get; set; }
    }
}

Přidejte ještě jeden soubor s názvem InventoryEngineer.cs do složky Modely s následujícím kódem. Třída InventoryEngineer záznamenává, kteří technici provedli které rezervace.

using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace FieldEngineerApi.Models
{
    public class InventoryEngineer
    {
        [Key]
        public string Id { get; set; }

        [Required]
        public string Name { get; set; }

        public string ContactNumber { get; set; }

        public List<Reservation> Reservations { get; set; }
    }
}

Otevřete soubor InventoryContext.cs soubor ve složce Modely a do třídy InventoryContext přidejte náseldující výrazy.

public class InventoryContext : DbContext
{
    public InventoryContext(DbContextOptions\<InventoryContext\> options)
        : base(options)
    {

    }

    public DbSet<BoilerPart> BoilerParts { get; set; }
    public DbSet<InventoryEngineer> Engineers { get; set; }
    public DbSet<Order> Orders { get; set; }
    public DbSet<Reservation> Reservations { get; set; }
}

V okně Terminál ve Visual Studio Code spusťte následující příkazy a vytvořte kontrolery pro zpracování objednávek a rezervací.

dotnet aspnet-codegenerator controller ^
    -name OrdersController -async -api ^
    -m Order ^
    -dc InventoryContext -outDir Controllers

dotnet aspnet-codegenerator controller ^
    -name ReservationsController -async -api ^
    -m Reservation ^
    -dc InventoryContext -outDir Controllers

Otevřete soubor BoilerPartController.cs ve složce Kontrolery a přidejte následující metodu GetTotalReservations do třídy BoilerPartsController.

public class BoilerPartsController : ControllerBase
{
    private readonly InventoryContext _context;

    public BoilerPartsController(InventoryContext context)
    {
        _context = context;
    }

    ...

    // GET: api/BoilerParts/5/Reserved 
    [HttpGet("{id}/Reserved")]
    public async Task<ActionResult<object>> GetTotalReservations(long id)
    { 
        var reservations = await _context
            .Reservations
            .Where(r => r.BoilerPartId == id) 
            .ToListAsync();

        int totalReservations = 0; 

        foreach(Reservation reservation in reservations) 
        { 
            totalReservations += reservation.NumberToReserve; 
        } 

        return new {id, totalReservations}; 
    }
    ...
}

Upravte soubor OrdersController.cs a upravte metodu PostOrder do třídy OrdersController následovně.

[HttpPost]
public async Task<ActionResult<Order>> PostOrder(long boilerPartId, int quantity)
{
    var part = await _context.BoilerParts.FindAsync(boilerPartId);

    Order order = new Order 
    {
        BoilerPartId = boilerPartId,
        Quantity = quantity,
        OrderedDateTime = DateTime.Now,
        TotalPrice = quantity * part.Price
    };

    _context.Orders.Add(order);
    await _context.SaveChangesAsync();

    return CreatedAtAction("GetOrder", new { id = order.Id }, order);
}

Upravte soubor ReservationsController.cs. Upravte metodu PostReservation ve třídě ReservationsController následovně.

[HttpPost]
public async Task<ActionResult<Reservation>> PostReservation(long boilerPartId, string engineerId, int quantityToReserve)
{
    Reservation reservation = new Reservation 
    {
        BoilerPartId = boilerPartId,
        EngineerId = engineerId,
        NumberToReserve = quantityToReserve
    };

    _context.Reservations.Add(reservation);
    await _context.SaveChangesAsync();

    return CreatedAtAction("GetReservation", new { id = reservation.Id }, reservation);
}

V okně Terminál spusťte následující příkazy a vytvořte a publikujte webové rozhraní API připravené k nasazení.
```
dotnet build
dotnet publish -c Release -o ./publish
```
Ve Visual Studio Code klepněte pravým tlačítkem na složku publikovat a poté vyberte Nasazení do webové aplikace.

Preeti nyní může aktualizovat službu API Management používanou aplikací VanArsdel tak, aby odrážela aktualizované webové API. Toto je změna nezpůsobující chybu; stávající operace budou i nadále fungovat, přičemž rozdílem budou nové ovladače a operace pro provádění rezervací a zadávání objednávek. Preeti plní následující úkoly:

Poznámka

Preeti se mohla rozhodnout odstranit existující API Field Engineer a nahradit ji novou verzí, ale tento přístup riskuje problémy u všech existujících aplikací, které by mohly API aktuálně používat. Je lepší ponechat stávající API na místě a přidat úpravy jako revizi.

Na webu Azure Portal přejděte do služby API Management.
Na stránce Služba API Management v levém podokně pod API vyberte API.
Vyberte API terénního technika, vyberte nabídku se třemi tečkami a poté vyberte Přidat revizi.
V dialogovém okně Vytvořte novou revizi API terénního technika zadejte popis Přidána operace GET a operace POST pro rezervace dílů a objednávky a potom vyberte Vytvořit.
Na stránce REVIZE 2 vyberte Design.
Na stránce Design vyberte Přidat operaci. V podokně FrontEnd nastavte následující vlastnosti a poté vyberte Uložit. Tato operace se používá k načtení počtu položek vyhrazených pro danou část kotle:
- Zobrazované jméno: api/BoilerParts/{id}/Reserved
- Název: api-boilerparts-id-reserved
- URL: GET api/BoilerParts/{id}/Reserved
Na kartě Test pro novou operaci nastavte parametr id na platné číslo dílu (příklad na obrázku používá část 1) a poté vyberte Poslat.
Ověřte, zda je test úspěšný. Operace by měla být dokončena s odpovědí HTTP 200 a txtem, který zobrazuje počet rezervací pro produkt.
Na stránce Design vyberte Přidat operaci. V podokně FrontEnd nastavte následující vlastnosti (tato operace definuje POST požadavky na vytváření nových objednávek):
- Zobrazovaný název: api/Orders - POST
- Název: api-orders-post
- URL: POST api/Orders
Na kartě Dotaz vyberte + Přidat parametr, přidejte následující parametry a poté vyberte Uložit:
- Název: boilerPartId, Popis: ID dílu kotle, Typ: dlouhý
- Název: množství, Popis: Množství, Typ: celé číslo
V podokně FrontEnd opět vyberte Přidat operaci a nastavte následující vlastnosti (tato operace definuje POST požadavky na vytváření nových rezervací):
- Zobrazovaný název: api/Reservations - POST
- Název: api-reservations-post
- URL: POST api/Reservations
Na kartě Dotaz vyberte následující parametry a poté vyberte Uložit:
- Název: boilerPartId, Popis: ID dílu kotle, Typ: dlouhý
- Název: engineerId, Popis: ID technika, Typ: řetězec
- Název: quantityToReserve, Popis: Množství k rezervaci, Typ: celé číslo
Na kartě Revize vyberte novou verzi. V nabídce se třemi tečkami pro tuto verzi vyberte Proveďte aktuální.
V dialogovém okně Nastavit verzi jako aktuální vyberte Uložit.
Otevřete jinou stránku ve webovém prohlížeči a přejděte na adresu URL https://<APIM name>.azure-api.net/api/boilerparts/1/reserved, kde <APIM name> je název vaší služby API. Ověřte, že dostanete odpověď podobnou následující.
```
{"id":1,"totalReservations":5}
```

Aktualizované webové rozhraní API je nyní k dispozici. Teoreticky by Kiana mohla vytvořit nový vlastní konektor pro aktualizované webové rozhraní API a přidat jej do aplikace. Aplikace by pak mohla implementovat vlastní logiku k určení, kolik položek zadaného produktu je aktuálně na skladě, kolik je rezervováno, porovnat výsledky s požadovaným počtem položek, v případě potřeby zadat objednávku na další zásoby nebo rezervovat položky z stávající zásoby. Tento druh logiky je však lépe implementován v aplikaci logiky Azure. Power Apps může volat logickou aplikaci prostřednictvím vlastního konektoru, když si technik přeje rezervovat nebo objednat díl.

Kiana vytvoří aplikaci logiky pomocí následujících kroků:

Poznámka

Aby to bylo jednoduché, je logická aplikace vytvořená v tomto příkladu netransakční. Je možné, že mezi kontrolou dostupnosti dílu a provedením rezervace může souběžný uživatel provést konfliktní rezervaci. Transakční sémantiku můžete implementovat nahrazením některé logiky v této logické aplikaci uloženou procedurou v databázi InventoryDB.

Na Azure Portal na Domovské stránce vyberte + Vytvořte zdroj.
Do pole Prohledejte Marketplace zadejte Aplikace logiky a potom vyberte Enter.
Na stránce Aplikace logiky vyberte Vytvořit.
Na stránce Vytvořit aplikaci logiky zadejte následující hodnoty a poté vyberte Zkontrolovat + vytvořit:
- Předplatné: Vyberte svoje předplatné Azure
- Skupina zdrojů: webapi_rg
- Název aplikace logiky: FieldEngineerPartsOrdering
- Region: Vyberte stejné umístění, které jste použili pro webové rozhraní API
- Přidružení k prostředí integračních služeb: Nechte prázdné
- Povolit analytiku protokolu: Nechte prázdné
Na stránce ověření vyberte Vytvořit a počkejte, až se aplikace logiky nasadí.
Až se nasazení dokončí, vyberte Přejít k prostředku.
Na stránce Návrhář logických aplikací přejděte dolů do sekce Šablony a poté vyberte Prázdná aplikace logiky.
Na kartě Všechny v textovém poli Hledejte konektory a spouštěče vyberte Žádost.
Na kartě Spouštěče vyberte Když je přijat požadavek HTTP.
Do pole Vyžádejte si tělo JSON schématu zadejte následující schéma a poté vyberte + Nový krok.
```
{
    "type": "object",
    "properties": {
        "boilerPartId": {
            "type": "integer"
        },
        "numberToReserve": {
            "type": "integer"
        },
        "engineerId": {
            "type": "string"
        }
    }
}
```
Toto schéma definuje obsah požadavku HTTP, který logická aplikace očekává. Tělo požadavku obsahuje ID části kotle, počet položek k rezervaci a ID inženýra, který požadavek podal. Aplikace pošle tento požadavek, když chce inženýr rezervovat součást.
V poli Vyberte operaci vyberte Všechny a potom vyberte HTTP.

Logická aplikace zavolá operaci BoilerParts{id} webového API k načtení informací o části kotle poskytnutých požadavkem z aplikace.
V podokně Akce vyberte akci HTTP.
V poli akcí HTTP v nabídce se třemi tečkami vyberte Přejmenovat a změňte název akce na CheckBoilerPart.
Nastavte vlastnosti akce HTTP následujícím způsobem a poté vyberte + Nový krok:
- Metoda: GET
- URI: https://<APIM name>.azure-api.net/api/boilerparts/, kde <APIM name>_ je název vaší služby API Management. V poli _ Dynamický obsah pro tento URI, na kartě Dynamický obsah vyberte boilerPartId
V poli Vyberte operaci, v poli Vyhledejte konektory a akce zadejte Analyzovat JSON a potom vyberte akci Analyzovat JSON.
Pomocí nabídky se třemi tečkami pro akci Analyzovat JSON přejmenujte akci na ParseBoilerPart.

V poli Obsah pro akci ParseBoilerPart v poli Dynamický obsah vyberte Text. Do pole Schéma zadejte následující schéma JSON a poté vyberte + Nový krok.

{
    "type": "object",
    "properties": {
        "id": {
            "type": "integer"
        },
        "name": {
            "type": "string"
        },
        "categoryId": {
            "type": "string"
        },
        "price": {
            "type": "number"
        },
        "overview": {
            "type": "string"
        },
        "numberInStock": {
            "type": "integer"
        },
        "imageUrl": {
            "type": "string"
        },
    }
}

Analýza objektu BoilerPart.

Tato akce analyzuje zprávu odpovědi vrácenou požadavkem getBoilerParts/{id}. Odpověď obsahuje podrobnosti o části kotle, včetně čísla aktuálně na skladě.

V poli Vyberte operaci pro nový krok vyberte konektor HTTP.
Na kartě Akce vyberte akci HTTP.
Pomocí nabídky se třemi tečkami pro operaci přejmenujte operaci na CheckReservations.
Nastavte následující vlastnosti pro tuto operaci a poté vyberte + Nový krok:
- Metoda: GET
- URI: https://<APIM name>.azure-api.net/api/boilerparts/. Stejně jako dříve, v poli Dynamický obsah tento URI, na kartě Dynamický obsah vyberte boilerPartId. V poli URI připojte text /Rezervováno po zástupném symbolu boilerPartId
V poli Vyberte operaci pro novou akci, v poli Vyhledejte konektory a akce zadejte Analyzovat JSON a potom vyberte akci Analyzovat JSON.
Přejmenujte operaci na ParseReservations.
Nastavte vlastnost Obsah na Text.

Zadejte následující schéma a poté vyberte + Nový krok.

{
    "type": "object",
    "properties": {
        "id": {
                "type": "integer"
        },
        "totalReservations": {
                "type": "integer"
        }
    }
}

Analýza dat Rezervace.

V poli Vyberte operaci pro novou akci, v poli Vyhledejte konektory a akce zadejte Podmínka a potom vyberte akci Ovládání podmínek.
Přejmenujte operaci na CompareStock.
Vyberte pole Vybrat hodnotu. V poli Přidejte dynamický obsah na kartě Výraz zadejte následující výraz a poté vyberte OK.
```
add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])
```
Tento výraz vypočítá součet počtu položek zadané části kotle, které jsou aktuálně rezervovány, a počtu požadovaného technikem.
V rozevíracím seznamu podmínek vyberte je větší než.
Ve zbývajících poli Vyberte hodnotu pole v poli Dynamický obsah na kartě Dynamický obsah pod ParseBoilerPart vyberte numberInStock.
Pokud je počet požadovaných položek plus rezervovaný počet větší než počet na skladě, aplikace musí zadat objednávku k doplnění inventáře. Ve větv True akce CompareStock vyberte Přidat akci.
Na kartě Všechny pro novou operaci vyberte HTTP a potom vyberte akci HTTP.
Přejmenujte operaci na PostOrder.
Nastavte následující vlastnosti pro operaci PostOrder:
- Metoda: POST
- URI: https://<APIM name>.azure-api.net/api/orders
- V tabulce Dotazy v prvním řádku zadejte klíč boilerPartId. Jako hodnotu v poli Přidat dynamický obsah na kartě Dynamický obsah vyberte boilerPartId.
- Do druhého řádku tabulky Dotazy zadejte klíč quantity. Do pole Hodnota zadejte 50.
Když dochází zásoby, aplikace logiky automaticky objedná 50 položek zadaného dílu.

Poznámka

Logická aplikace předpokládá, že se inženýr ve skutečnosti nepokusí rezervovat více než 50 položek určité součásti v jednom požadavku!
Ponechte větev False akce CompareStock prázdnou.
Pod akcí CompareStock vyberte + Nový krok.
Na kartě Všechny pro novou operaci vyberte HTTP a potom vyberte akci HTTP.
Přejmenujte operaci na PostReservation.
Nastavte následující vlastnosti pro operaci PostReservation:
- Metoda: POST
- URI: https://<APIM name>.azure-api.net/api/reservations
- V tabulce Dotazy v prvním řádku zadejte klíč boilerPartId. Jako hodnotu v poli Přidat dynamický obsah na kartě Dynamický obsah vyberte boilerPartId.
- Ve druhém řádku zadejte klíč engineerId. Jako hodnotu v poli Přidat dynamický obsah na kartě Dynamický obsah vyberte engineerId
- Ve třetím řádku zadejte klíč engineerId. Jako hodnotu v poli Přidat dynamický obsah na kartě Dynamický obsah vyberte numberToReserve
Vyberte + Nový krok. V poli Vyberte operaci vyhledejte a vyberte akci Odpověď.
Nastavte následující vlastnosti akce Odpověď:
- Stavový kód: 200
- Záhlaví: Klíč - content-type, Hodnota - application/json
- Text: V poli Dynamický obsah vyberte prvek Text z požadavku PostReservation. Toto je text vrácený při provedení rezervace.
V levém horním rohu stránky Návrhář logických aplikací vyberte Uložit. Ověřte, zda lze logickou aplikaci uložit bez jakýchkoli chyb.

Chcete-li vytvořit vlastní konektor, který Power Apps může použít ke spuštění aplikace logiky, Kiana provede následující kroky, zatímco je stále na webu Azure Portal:

Na stránce Přehled logické aplikace vyberte Export.
V podokně Exportovat do Power Apps pojmenujte konektor PartsOrderingConnector, vyberte svoje prostředí Power Apps a poté vyberte OK.
Přihlaste se do Power Apps
Ve vašem prostředí v položce Data vyberte Vlastní konektory a ověřte, že je uveden PartsOrderingConnector.

Maria nyní může upravit aplikaci VanArsdel a umožnit technikovi objednávat díly při návštěvě stránky zákazníka. Přidá tlačítko Objednat na obrazovku PartDetails, a to následovně:

Přihlaste se do Power Apps (pokud již nejste přihlášeni).
V Aplikacích vyberte aplikaci VanArsdelApp. V nabídce elipsy pro aplikaci vyberte Upravit.
V podokně Data vyberte Přidat data, vyhledejte konektor PartsOrderingConnector a pomocí tohoto konektoru přidejte nové připojení.
V podokně Stromové zobrazení rozbalte obrazovku PartDetails a pak rozbalte formulář DetailForm1.
V podokně Vlastnosti napravo vyberte Upravit pole. V podokně Pole v nabídce se třemi tečkami vyberte Přidejte vlastní kartu.
V podokně Stromové zobrazení přejmenujte novou kartu z DataCard1 na ReserveCard. V okně Návrhář zobrazení změňte velikost karty tak, aby zabírala spodní část obrazovky pod ovládacím prvkem Image_DataCard1.
V nabídce Vložit z dílčí nabídky Vstup přidejte ovládací prvek Text input a Button a Popisek do ovládacího prvku ReserveCard.
Změňte velikost a umístěte ovládací prvky tak, aby sousedily s ovládacím prvkem Button napravo od ovládacího prvku Text input a Popisek pod ovládacím prvkem Button.
V podokně Vlastnosti pro ovládací prvek Text input vymažte vlastnost Výchozí.
V podokně Vlastnosti pro ovládací prvek Button nastavte vlastnost Text na Rezervovat.
Přejmenujte ovládací prvek Text input na NumberToReserve, přejmenujte ovládací prvek Button na Rezervovat a přejmenujte ovládací prvek Popisek na Zpráva.
V podokně Vlastnosti pro ovládací prvek Zpráva nastavte vlastnost Text na Rezervované díly a nastavte vlastnost Viditelné na MessageIsVisible.

Poznámka

MessageIsVisible je proměnná, do které se inicializujete false, když se zobrazí obrazovka, ale bude změněna na true, pokud uživatel vybere tlačítko Rezervovat.
Nastavte vlastnost OnSelect pro tlačítko Rezervovat na následující vzorec.
```
FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text});

Set(MessageIsVisible, true);
```
Poznámka

Tento vzorec používá nepevno kódované ID technika, které zastupuje technika aktuálně spuštěného aplikace. Kapitola 8 popisuje, jak načíst ID pro přihlášeného uživatele.

Aplikace navíc neprovádí žádnou kontrolu chyb; předpokládá, že požadavek na rezervaci dílů je vždy úspěšný. Další informace o zpracování chyb najdete na Funkce Chyby v Power Apps.
Nastavte vlastnost OnVisible pro obrazovku PartDetails na Set(MessageIsVisible, false).

Chcete-li otestovat aplikaci, proveďte následující:

V podokně Stromové zobrazení vyberte obrazovku Domů.
Vyberte F5 pro náhled aplikace.
Na Domovské obrazovce vyberte Díly.
Na obrazovce procházení vyberte libovolný díl.
Na obrazovce Podrobnosti dílů přejděte dolů do sekce s rezervacemi, zadejte kladné celé číslo a poté vyberte Rezervovat. Ověřte, že se zobrazí zpráva Díly rezervovány.
Zavřete okno náhledu a vraťte se na Power Apps Studio.
V Azure Portal přejděte na stránku databáze SQL InventoryDB.
Vyberte Editor dotazů a přihlaste se jako sqladmin s vaším heslem.
V podokně Dotaz 1 zadejte následující dotaz a poté vyberte Spustit. Ověřte, že se zobrazí rezervace, kterou jste provedli v aplikaci VanArsdel.
```
SELECT * FROM [dbo].[Reservations]
```

Předchozí Další

Kapitola 7: Přidání funkcí do aplikace

Přidání fotografie ke schůzce

Zobrazení obrázků dílů

Sledování historie schůzek u zákazníka

Objednávání dílů

Váš názor