7. poglavlje: Dodavanje funkcionalnosti aplikaciji

2025-05-21

Kata i Slavna su uzbuđene što će pokazati aplikaciju za upravljanje zalihama Kosti, terenskom tehničaru. Caleb to voli, ali predlaže dodavanje neke dodatne funkcionalnosti korisničkog interfejsa kako bi se olakšalo korišćenje. Konkretno, Kosta bi želeo da može da uradi sledeće:

Dodajte fotografiju posla obavljenog na kotlu ili klimatizacijskoj jedinici i dodajte je u detalje o imenovanju na ekranu Edit Appointment . Ova slika bi se mogla pokazati korisnom kao dokumentovani dokaz o izvršenim popravkama. Ekran Edit Appointment trenutno omogućava korisniku da doda sliku na sastanak, ali slika se ne čuva jer ova funkcija još nije u potpunosti implementirana. Razlog ovog propusta je taj što Kata i Preti treba da odrede najbolje mesto za čuvanje podataka o slici. Kosta bi želeo da se ova funkcija doda što pre.
Pregledajte kompletnu istoriju zakazivanja za klijenta, kako biste pratili popravke koje su zahtevane i nadgledali sve tekuće probleme zbog kojih bi tehničari mogli biti više puta pozvani.
Naručite delove sa ekrana Part Details .

Pored toga, kontrola slike na ekranu Part Details prikazuje slike sačuvane na određenom URL-u. Trenutno su URL adrese u podacima samo čuvari mesta. Kao i fotografije za ekran zakazane obaveze, Kata i Preti moraju da odrede najbolje mesto za čuvanje slika kako bi bile dostupne aplikaciji.

Dodavanje fotografije zakazanoj obavezi

Fotografije je potrebno čuvati negde gde im aplikacija može pristupiti. Iz razloga performansi i bezbednosti, Preti ne želi da se fotografije čuvaju u OneDrive skladištu ili u Azure SQL bazi podataka. Umesto toga, oni odlučuju da koriste Azure Blob Storage. Skladište blob objekata je optimizovano za držanje velikih binarnih objekata i robustno je, sa ugrađenom bezbednošću. Power Apps ima konektor koji omogućava pristup skladištu blob objekta. Slavna predlaže dodavanje novog ekrana za fotografisanje, poboljšavajući korisničko iskustvo za Kostu.

Više informacija: Azure Blob Storage

Preti kreira nalog za skladištenje blob objekta sa Azure portala prateći ove korake:

Na Azure portalu, na početnoj stranici, izaberite + Kreiraj resurs. U polju Pretraži tržište unesite nalog za skladištenje, a zatim izaberite Enter .
Na stranici Nalog za skladištenje izaberite Kreiraj.
Na stranici Kreiraj nalog za skladištenje, unesite sledeće detalje, a zatim izaberite Pregled + kreiranje:
- Pretplata: Izbor pretplate
- Grupa resursa: webapi_rg
- Naziv naloga za skladište: Navedite globalno jedinstveno ime i zabeležite ga za kasnije
- Lokacija: Izaberite najbližu lokaciju
- Performanse: Standard
- Vrsta naloga: BlobStorage
- Replikacija: RA-GRS
Na stranici za validaciju izaberite Kreiraj i sačekajte da se nalog za skladištenje obezbeđuje.
Idite na stranicu za novi nalog za skladištenje.
Na stranici Pregled izaberite Kontejneri.
Na stranici Kontejneri izaberite + Kontejner. Kreirajte novi kontejner pod nazivom fotografije, a zatim izaberite Kreiraj. Promenite nivo javnog pristupa u Blob.
Nazad na stranici Pregled za račun za skladištenje, pod podešavanjima, izaberite Pristupni tasteri. Na stranici Pristupni tasteri , izaberite Prikaži ključeve. Zabeležite vrednost ključa za keiKSNUMKS.

Preti daje naziv i ključ naloga za skladištenje Kati, koja koristi ove informacije za kreiranje prilagođenog konektora za aplikaciju prateći ove korake:

Prijavite se na Power Apps.
U levom oknu proširite Podaci i izaberite Veze. Trebalo bi navesti postojeće veze koje aplikacija koristi. Izaberite + Nova veza.
Na stranici Nova veza pomerite se nadole, izaberite Veze, izaberite Azure Blob Storage, a zatim izaberite Kreiraj.
U dijalogu Azure Blob Storage unesite ime naloga za skladištenje i pristupni ključ koji je Preeti pružio, a zatim izaberite Kreiraj.
Sačekajte dok se kreira nova veza. Trebalo bi da se prikaže na listi veza.

Slavna ovu vezu sa skladištem blob objekta u aplikaciji može da koristi za čuvanje i preuzimanje fotografskih slika. Marijin prvi zadatak je da dodate vezu sa aplikacijom prateći ove korake:

Otvorite aplikaciju VanArsdelApp za uređivanje Power Apps Studio.
U oknu podataka izaberite Dodaj podatke, potražite konektor Azure Blob Storage , a zatim izaberite konektor.
U dijalogu Azure Blob Storage izaberite konektor Azure Blob Storage da biste ga dodali u svoju aplikaciju.

Slavnin sledeći zadatak je da doda ekran koji tehničaru ili inženjeru omogućava da sačuvaju fotografiju. Slavna odlučuje da doda novi ekran sa kontrolom slike. Kada se aplikacija pokreće na mobilnom uređaju, ova kontrola se može integrisati sa kamerom kako bi tehničaru omogućila da fotografiše. Na drugim uređajima, ova kontrola traži od korisnika da umesto toga otpremi datoteku slike. Marija dodaje vezu na ovaj novi ekran sa ekrana EditAppointment prateći ove korake:

U meniju Ubaci, izaberite Novi ekran, a zatim izaberite šablon za pomeranje .
U oknu Prikaz stabla izaberite novi ekran i preimenujte ga u TakePhoto.
Promenite Tekst osobinu LblAppName X kontrole na ovom ekranu da bistesnimili fotografiju .
Izbrišite CanvasKs kontrolu sa ekrana.
U meniju Ubaci, iz Mediji padajuće liste, izaberite Dodaj sliku da biste kreirali novu kontrolu slike.

Belešku

Kontrola slike je zapravo kompozitna prilagođena komponenta koja omogućava korisniku da doda sliku na ekran i prikaže rezultate.
Promenite veličinu i premestite kontrolu slike tako da zauzme telo ekrana.
U oknu Prikaz stabla, izaberite IconBackarrowKs kontrolu na AppointmentDetails ekranu, a zatim izaberite Kopiraj.
Na meniju Prikaz stabla kliknite desnim tasterom miša na ekran TakePhoto , a zatim izaberite Paste. Kontrola IconBackArrovKs će biti dodata na ekran.
Pomerite IconBackArrovKs kontrolu u gornjem levom uglu trake zaglavlja.
U oknu Prikaz stabla, izaberite IconBackArrovKs kontrolu na TakePhoto ekranu . U desnom oknu, na kartici Napredno , izmenite osobinu akcije OnSelect u Navigate(EditAppointment, ScreenTransition.None).
Dodajte novu kontrolu ikone Save u gornjem desnom uglu trake zaglavlja. Podesite Vidljivo svojstvo ove kontrole na If(IsBlank(AddMediaButton1.Media), false, true).

Ova postavka čini ikonu Save nevidljivom ako korisnik nije izabrao sliku.
Promenite formulu u osobini akcije OnSelect kontrole ikone Save na sledeće.
```
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);
```
Zamenite <ime> računa za skladištenje sa imenom Azure Storage naloga koji je Preeti kreirao.

Ovaj kod postavlja sliku u kontejner fotografija u Blob Storage-u. Svaka slici se daje jedinstveno ime datoteke. Funkcija Patch ažurira imageUrl osobinu u zapisu imenovanja sa URL-om slike u Blob Storage-u.
U oknu Prikaz stabla, proširite AddMediaVithImageX kontrolu. Izmenite osobinu Image kontrole UploadedImageX i podesite je na AppointmentImage.

AppointmentImage je promenljiva koja će se popuniti slikom koju je korisnik otpremio ili kao rezultat fotografisanja. Kasnije ćete inicijalizovati ovu promenljivu na ekranu EditAppointment .
U oknu Prikaz stabla, izaberite AddMediaButtonX kontrolu. Podesite svojstvo UseMobileCamera ove kontrole na true. Podesite osobinu OnChange akcije kontrole na sledeće.
```
Set(AppointmentImage, AddMediaButton1.Media)
```
Ova formula menja promenljivu AppointmentImage da bi upućivala na novu sliku. Kontrola UploadedImageX će prikazati ovu sliku.
U oknu Prikaz stabla, izaberite ekran EditAppointment .
Proširite EditForm Xkontrolu . Pod kontrolom Image_DataCardX uklonite kontrolu AddPictureX .
Izaberite ImageX kontrolu. Promenite sledeća svojstva:
- Slika: Roditelj.Podrazumevano
- X: 30
- Y: DataCardKeiKs. I + DataCardKeiKs. Visina + 150 (gde DataCardKeiKs je kartica podataka koja sadrži Image Ks kontrolu)
- Širina: Roditelj.Širina - 60
- visina: 400
Belešku

Kontrola slike će se spustiti ispod dna ekrana, ali će se automatski dodati traka za pomeranje da bi se omogućio prikaz slike.
Dodajte ikonu kamere na karticu sa podacima, a zatim je postavite između oznake slike i kontrole ImageX . Promenite ime kontrole u CameraIcon.

Belešku

Uverite se da ste izabrali kontrolu Camera Icon, a ne kontrolu Camera Media.
Podesite svojstvo akcije OnSelect kontrole CameraIcon na sledeće.
```
Set(AppointmentImage, SampleImage);

Navigate(TakePhoto, ScreenTransition.None);
```
Kada korisnik odabere ovu ikonu, otići će na ekran TakePhoto , gde može da snima fotografiju ili otpremi sliku. Početna prikazana slika biće podrazumevani primer slike.

Da biste testirali aplikaciju, uradite sledeće:

U oknu Prikaz stabla, izaberite početni ekran.
Izaberite FKSNUMKS da biste pregledali aplikaciju.
Na početnom ekranu izaberite Imenovanja.
Na ekranu za pregled, izaberite bilo koju zakazanu obavezu.
Na ekranu detalja o zakazanoj obavezi, izaberite ikonu za uređivanje u zaglavlju ekrana.
Na ekranu za uređivanje izaberite ikonu Kamera za sliku.
Proverite da li se pojavljuje ekran Take a Photo .
Izaberite Promeni sliku i otpremite sliku po vašem izboru (ili snimite fotografiju, ako koristite aplikaciju na mobilnom uređaju).
Izaberite stavku Sačuvaj. Proverite da li se slika prikazuje na stranici sa detaljima, a zatim izaberite ikonu oznake da biste sačuvali promene u bazi podataka.
Zatvorite prozor za pregled i vratite se u Power Apps Studio.

Prikazivanje slika delova

Kada su utvrdile da je skladište blob objekata idealno mesto za čuvanje slika povezanih sa zakazanim obavezama, Preti i Kata odlučuju da bi trebalo da koriste isti pristup za skladištenje slika delova. Ključna prednost ovog pristupa je što ne zahteva nikakve izmene aplikacije. Aplikacija ponovo koristi isti nalog za skladištenje i istu vezu. Kao zasebna vežba za migraciju, oni mogu da urade sledeće:

Kreirajte novi kontejner skladišta blob objekta.
Otpremite slike delova u ovaj kontejner.
Promenite ImageUrl reference u tabeli Delovi u InventoryDB bazi podataka na URL svake slike.

Aplikacija će automatski pokupiti novu URL adresu za svaki deo slike, a kontrola slike na ekranu PartDetails će prikazati sliku.

Praćenje istorije zakazivanja za klijenta

Slavna smatra da bi mogućnost brzog pregleda celokupne istorije prethodnih poseta tehničara klijenta mogla da se doda u aplikaciju kreiranjem prilagođene komponente. Radeći sa Kostom na tome koje informacije žele da vide, Slavna skicira jednostavan dizajn koji sadrži napomene i datum svake posete.

Datum za istoriju zakazivanja za klijenta.

Gledajući podatke, Slavna veruje da je kontrola galerije najbolji način za prikaz podataka tabele na ekranu.

Slavna kreira prilagođenu komponentu na sledeći način:

Koristeći, u Power Apps Studiooknu Prikaz stabla, izaberite Komponente , a zatim izaberite + Nova komponenta .

Kreira se nova prazna komponenta pod nazivom Komponenta1 . Preimenujte komponentu kao DateHistoryComponent.
Na Ubaciti meni, izaberite Galerija, a zatim izaberite Blank fleksibilna visina galerija šablon.
Premestite kontrolu galerije i promenite joj veličinu da biste popunili prilagođenu komponentu.
Izaberite Dodajte stavku iz okna za umetanje, a zatim izaberite Tekst oznaka.
U oknu Prikaz stabla, preimenujte kontrolu oznake kao NotesLabel. Podesite osobinu Overflov na Overflow.Scroll. Ovo podešavanje omogućava kontroli da prikaže nekoliko redova teksta i omogući korisniku da se kreće kroz njega. Podesite sledeća svojstva tako da možete da postavite i prilagodite veličinu kontrole:
- LineHeight: 2
- X: 28
- Y: 18
- Širina: 574
- Visina: 140
Dodajte drugu oznaku teksta kontroli. Preimenujte ovu kontrolu kao DateLabel i podesite sledeće osobine:
- LineHeight: 2
- X: 28
- Y: 174
- Širina: 574
- Visina: 70
Da biste videli kako će kontrola izgledati kada se ubaci u aplikaciju i prikaže sa svojom temom, u oknu Prikaz stabla, izaberite DateHistoryComponent. U desnom oknu, na kartici Napredno , izaberite polje za popunjavanje i promenite boju u RGBA (KSNUMKS, KSNUMKS, KSNUMKS), KSNUMKS).
Na Ubaci okno, proširite Oblici, i dodajte pravougaonik kontrolu u prilagođenu komponentu. Podesite sledeća svojstva za ovu kontrolu:
- X: 0
- Y: 273
- Širina: Roditelj.Širina
- Visina: 2
Ova kontrola deluje kao separator između zapisa koji se prikazuju u galeriji.

Slavna je upoznata sa dodavanjem kontrola na ekrane i pravljenjem aplikacija pomoću usluge Power Apps. Međutim, komponente za višekratnu upotrebu ne rade na potpuno isti način. Kiana je opisala Mariji da bi mogli da koriste podatke u prilagođenoj komponenti, moraju se dodati neke dodatne prilagođene ulazne osobine. Kiana je takođe objasnila da Marija treba da obezbedi primere podataka za ove osobine kako bi upućivala na polja podataka u kontrolama u komponenti, kako sledi:

U oknu Prikaz stabla, izaberite DateHistoryComponent. U desnom oknu, na kartici Osobine , izaberite Nova prilagođena osobina .
U dijalogu Nova prilagođena osobina , navedite sledeće vrednosti, a zatim izaberite Kreiraj:
- Prikazno ime: Podaci
- Ime: Podaci
- Opis: Tabela sastanaka za kupca, koji prikazuje beleške i datume
- Tip nekretnine: Ulaz
- Tip podataka: Tabela
- Pokreni OnReset kada se vrednost promeni: Ostavite prazno
Da biste promenili uzorak podataka prikazanih od strane kontrole, izaberite novu prilagođenu osobinu podataka . U polje formule unesite Tabela ({Beleške: "Primer teksta polja beleške.", "Datum imenovanja": Tekst (Danas ())}).
U oknu Prikaz stabla, izaberite Galerija Ks kontrolu u DateHistoryComponent i preimenujte je kaoAppointmentHistory .
U desnom oknu, na kartici Napredno , podesite svojstvo Stavke kontrole galerije AppointmentHistory na Parents.Data.
Izaberite kontrolu NotesLabel . U desnom oknu na kartici Napredno , promenite Tekst osobinu na ThisItem.Notes i promenite Size svojstvo na KSNUMKS.

Belešku

Veličina osobina specificira veličinu fonta za tekst prikazan kontrolom.
Izaberite kontrolu DateLabel da biste promenili osobinu Tekst u ThisItem.'Datum imenovanja'i promenite osobinu Size na 20. Polja u prilagođenoj komponenti treba da prikazuju probne podatke.

Prilagođena komponenta je završena. Slavna kreira novi ekran za prikaz istorije zakazanih obaveza za klijenta pomoću ove komponente, na sledeći način:

U oknu Prikaz stabla, izaberite karticu Ekrani .
Proširite ekran BrowseAppointments , proširite kontrolu BrovseAppointmentsGallery i izaberite kontrolu Body1_1 . Na meniju Ubaciti izaberite Ikone, a zatim izaberite ikonu Lista detalja.
Promenite ime kontrole ikone na VievAppointments.
Na meniju Prikaz stabla izaberite kontrolu BrovseAppointmentsGallery . U desnom oknu, na kartici Napredno , promenite osobinu TemplateSize na KSNUMKS. Povećavanjem ovog svojstva proširuje se prostor dostupan u galeriji.
Premestite ikonu VievAppointments u prazan prostor ispod imena klijenta.
Izaberite kontrolu ikone VievAppointments . Podesite osobinu akcije OnSelect na sledeću formulu.
```
ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));

Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)
```
Ova formula popunjava kolekciju pod nazivom customerAppointmentsCollection sa sastancima za izabranog kupca, a zatim prelazi na AppointmentHistoriScreen da ih prikaže. Ovaj ekran ćete kreirati u sledećim koracima.
U meniju Ubaci, izaberite Novi ekran, a zatim izaberite šablon za pomeranje .
Promenite ime novog ekrana na AppointmentHistoriScreen.
Izbrišite CanvasX kontrolu koja je dodata na ovaj ekran.
Izaberite LblAppNameX kontrolu na ovom ekranu. U desnom oknu, na kartici Napredno , promenite Tekst osobinu na sledeće.
```
"Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
```
Podesite sledeće osobine za LblAppNameKs kontrolu da podesite položaj i veličinu:
- X: 90
- Y: 0
- Širina: 550
- Visina: 140
Izaberite RectKuickActionBarX kontrolu, i podesite Visina osobina na 140.
Dodajte levu ikonu u zaglavlje ekrana, levo od naslova. Podesite svojstvo akcije OnSelect za ovu kontrolu na Navigate(BrovseAppointments, Transition.None).
U meniju Ubaci izaberite Custom, a zatim izaberite DateHistoriComponent.
Premestite i promenite veličinu komponente tako da zauzima telo ekrana, ispod naslova.
Podesite sledeća svojstva za ovu komponentu:
- Podpodataka: customerAppointmentsCollection
- Datum imenovanja: početakDatumVreme
- Napomene: beleške
Sačuvajte aplikaciju.

Da biste testirali aplikaciju, uradite sledeće:

U oknu Prikaz stabla, izaberite početni ekran.
Izaberite FKSNUMKS da biste pregledali aplikaciju.
Na početnom ekranu izaberite Imenovanja.
Na ekranu za pretraživanje izaberite ikonu Lista detalja za bilo koji sastanak.
Proverite da li se pojavljuje ekran Istorija imenovanja za izabranog kupca.
Zatvorite prozor za pregled i vratite se u Power Apps Studio.

Naručivanje delova

Ključni zahtev sistema je da omogući tehničaru da naruči bilo koji deo potreban tokom posete klijentu. Ako ima delova na zalihama, trebalo bi da bude moguće zakazati drugu posetu kako bi se popravka završila u sledeći pogodan datum za klijenta. Ako delova trenutno nema na zalihama i moraju se naručiti, tehničar to može reći klijentu. Marko tada može da ugovori sastanak sa klijentom kada Slavna dobije obaveštenje da su delovi stigli u skladište.

Rezervisani deo aplikacije koristi tabele u bazi podataka InventoryDB prikazane na sledećoj slici. Tabela Porudžbine sadrži informacije o narudžbama za delove. Tabela Rezervacije navodi zahteve za rezervaciju koje su tehničari i inženjeri napravili za delove. Tabela Inženjeri daje ime i kontakt broj inženjera koji je rezervisao, što olakšava Mariji menadžeru inventara da upita ako je potrebno.

Model podataka Rezervacije.

Da bi podržala ovu funkciju, Kata mora da ažurira Web API metodom koja preuzima broj rezervisanih stavki za određeni deo, kao što sledi:

Otvorite FieldEngineerApi Veb API projekat u kodu Visual Studio .

Dodajte fajl pod imenom Order.cs u fasciklu Models . Dodajte sledeći kôd u ovu datoteku. Klasa Orders prati detalje naloga za delove.

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; }
    }
}

Dodajte još jedan novi fajl pod imenom Reservation.cs u folder Models i dodajte sledeći kod u ovaj fajl. Klasa Rezervacija sadrži informacije o broju stavki za određeni deo koji su trenutno rezervisani za druge kupce.

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; }
    }
}

Dodajte još jedan fajl, nazvan InventoryEngineer.cs, u folder Models , sa sledećim kodom. Klasa InventoriEngineer beleži koji inženjeri su napravili koje rezerve.

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; }
    }
}

Otvorite InventoryContext.cs fajl u folderu Models , i dodajte sledeće izjave u klasu InventoryContext .

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; }
}

U prozoru Terminal u aplikaciji Visual Studio Code, pokrenite sledeće komande za izgradnju kontrolera za rukovanje nalozima i rezervacijama.

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

Otvorite BoilerPartController.cs datoteku u folderu Controllers i dodajte sledeći metod GetTotalReservations u klasu 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}; 
    }
    ...
}

Izmenite OrdersController.cs fajl, i modifikujte metod PostOrder u klasi OrdersController kao što je prikazano u sledećem.

[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);
}

Izmenite ReservationsController.cs fajl. Izmenite metod PostReservation u klasi ReservationsController , na sledeći način.

[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);
}

U prozoru Terminal, pokrenite sledeće komande za izgradnju i objavljivanje Web API-ja spremnog za primenu.
```
dotnet build
dotnet publish -c Release -o ./publish
```
U Kodu Visual Studio kliknite desnim tasterom miša na fasciklu za objavljivanje , a zatim izaberite Primeni u Veb aplikaciju.

Preti sada može da ažurira uslugu upravljanja API-jem koju koristi aplikacija VanArsdel kako bi odražavala ažurirani Web API. Ovo je neprelomna promena; postojeće operacije će nastaviti da rade, razlika je u novim kontrolerima i operacijama za pravljenje rezervacija i naručivanje. Preti izvršava sledeće zadatke:

Belešku

Preti je mogla da odluči da izbriše postojeći Field Engineer API i zameni ga novom verzijom, ali taj pristup rizikuje da naruši bilo koju postojeću aplikaciju koja trenutno koristi API. Bolja praksa je da ostaviti postojeći API na mestu i doda izmene kao reviziju.

U Azure portalu, idite na uslugu Upravljanje API-jem.
Na stranici usluge API Management, u levom oknu pod API-jima, izaberite API-je.
Izaberite API Field Engineer, izaberite meni elipse, a zatim izaberite Dodaj reviziju.
U Kreirajte novu reviziju API-ja Field Engineer dijalog, unesite opis Dodana GET operacija i POST operacije za rezerve delova i naloge, a zatim izaberite Kreiraj.
Na stranici REVIZIJA 2 , izaberite Dizajn.
Na stranici Dizajn izaberite Dodaj operaciju. U oknu FrontEnd podesite sledeća svojstva, a zatim izaberite Sačuvaj. Ova operacija se koristi za pronalaženje broja stavki rezervisanih za dati deo kotla:
- Prikaz imena: api / BoilerParts /{id} / Rezervisan
- Ime: API-boilerparts-id-rezervisan
- URL: GETAPI/BoilerParts/{id}/Rezervisano
Na kartici Test za novu operaciju, podesite id parametar na važeći broj dela (primer na slici koristi deo 1), a zatim izaberite Pošalji.
Proverite da li je test uspešan. Operacija treba da se završi sa odgovorom HTTP 200 i telom koje prikazuje broj rezervacija za proizvod.
Na stranici Dizajn izaberite Dodaj operaciju. Na FrontEnd okno, podesite sledeće osobine (ova operacija definiše POST zahteve za kreiranje novih naloga):
- Prikazno ime: api / Orders - POST
- Ime: api-orders-post
- URL: POSTAPI/Orders
Na kartici Upit, izaberite + Dodaj parametar , dodajte sledeće parametre, a zatim izaberiteSačuvaj :
- Ime: boilerPartId, Opis**: Kotao Deo ID,** Tip: long
- Ime: količina, Opis**: Količina**, Tip: ceo broj
Izaberite Dodaj operaciju ponovo na FrontEnd oknu i podesite sledeće osobine (ova operacija definiše POST zahteve za kreiranje novih rezervacija):
- Prikazno ime: api/Rezervacije - POST
- Ime: api-reservations-post
- URL: POSTapi/Rezervacije
Na kartici Upit , dodajte sledeće parametre, a zatim izaberite Sačuvaj:
- Name: boilerPartId, Description: Boiler Part ID, Type: long
- Ime: engineerId, Opis: Engineer ID, Tip: string
- Ime: quantityToReserve, Opis: Količina za rezervisanje, Tip: ceo broj
Na kartici Revizije , izaberite novu verziju. Na meniju elipse za ovu verziju, izaberite Make current.
U Napravi reviziju tekuće dijalog, izaberite Sačuvaj.
Otvorite drugu stranicu u vašem veb pretraživaču i idite na URL https://<ime> APIM-a.azure-api.net/api/boilerparts/1/reserved gde <je ime> APIM-a ime vašeg API servisa. Proverite da li ste dobili odgovor sličan sledećem.
```
{"id":1,"totalReservations":5}
```

Ažurirani Web API je sada dostupan. U teoriji, Kata bi mogla da kreira novi prilagođeni konektor za ažurirani Web API i doda ga u aplikaciju. Aplikacija bi tada mogla da primeni sopstvenu logiku da utvrdi koliko je stavki navedenog proizvoda ima trenutno na zalihama, koliko je rezervisanih, upoređuje rezultate sa potrebnim brojem stavki, po potrebi naručuje još zaliha ili rezerviše artikle iz postojeće zalihe. Međutim, ovu vrstu logike je bolje primeniti u Azure logičkoj aplikaciji. Power Apps može da pozove logičku aplikaciju preko prilagođenog konektora kada tehničar želi da rezerviše ili naruči deo.

Da bi kreirala logičku aplikaciju, Kata koristi sledeće korake:

Belešku

Da bi stvari bile jednostavne, logička aplikacija kreirana u ovom primeru nije transakciona. Moguće je da između provere dostupnosti dela i pravljenja rezervacije, konkurentni korisnik može izvršiti neusaglašenu rezervaciju. Možete implementirati transakcijsku semantiku zamenom neke logike u ovoj logičkoj aplikaciji sa pohranjenom procedurom u bazi podataka InventoryDB .

Na Azure portalu, na početnoj stranici, izaberite + Kreiraj resurs.
U polju Pretraži tržište unesite Logic App, a zatim izaberite Enter.
Na stranici Logic App izaberite Kreiraj.
Na stranici Kreiraj aplikaciju logike, unesite sledeće vrednosti, a zatim izaberite Pregled + kreiranje:
- Pretplata: Izaberite Azure pretplatu
- Grupa resursa: webapi_rg
- Naziv aplikacije logike: FieldEngineerPartsOrdering
- Region: Izaberite istu lokaciju koju ste koristili za Web API
- Povežite sa okruženjem usluge integracije: Ostavite prazno
- Omogući analitiku evidencije: Ostavite prazno
Na stranici za verifikaciju, izaberite Kreiraj, i sačekajte dok je logika aplikacija je raspoređena.
Kada je raspoređivanje završeno, izaberite Idi na resurs.
Na stranici Logic Apps Designer , pomerite se nadole do odeljka Templates , a zatim izaberite Blank Logic App.
Na kartici Sve , u tekstualnom polju Pretraga konektora i okidača , izaberite zahtev.
Na kartici Okidači izaberite Kada se primi HTTP zahtev.
U polju JSON šeme tela zahteva unesite sledeću šemu, a zatim izaberite + Novi korak.
```
{
    "type": "object",
    "properties": {
        "boilerPartId": {
            "type": "integer"
        },
        "numberToReserve": {
            "type": "integer"
        },
        "engineerId": {
            "type": "string"
        }
    }
}
```
Ova šema definiše sadržaj HTTP zahteva koji logička aplikacija očekuje. Telo zahteva sadrži ID dela kotla, broj stavki koje treba rezervisati i ID inženjera koji podnosi zahtev. Aplikacija će poslati ovaj zahtev kada inženjer poželi da rezerviše deo.
U Izaberite operaciju bok, izaberite sve, a zatim izaberite HTTP.

Logička aplikacija će pozvati BoilerParts{id} operaciju Veb API-ja da preuzme informacije o delu kotla koji pruža zahtev iz aplikacije.
U oknu Akcije izaberite HTTP akciju .
U polju HTTP akcije, na meniju elipse, izaberite Preimenuj i promenite ime akcije uCheckBoilerPart .
Podesite svojstva HTTP akcije na sledeći način, a zatim izaberite + Novi korak:
- Metod: GET
- URI: https://<APIM ime>.azure-api.net/api/boilerparts/, gde <je APIM ime> ime vašeg API Management servisa. U polju Dinamički sadržaj za ovaj URI, na kartici Dinamički sadržaj , izaberite boilerPartId
U Izaberite operaciju bok, u Traži konektore i akcije bok, unesite Parse JSON, a zatim izaberite Parse JSON akciju.
Koristeći meni elipse za Parse JSON akciju, preimenujte akciju u ParseBoilerPart.

U polju Sadržaj za akciju ParseBoilerPart , u polju Dinamički sadržaj , izaberite Telo. U Šema bok, unesite sledeću JSON šemu, a zatim izaberite + Novi korak.

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

Raščlanjivanje objekta BoilerPart.

Ova akcija analizira poruku odgovora koju je vratio getBoilerParts/{id} rekuest. Odgovor sadrži detalje o delu kotla, uključujući i broj koji je trenutno na zalihama.

U polju Izaberite operaciju za novi korak, izaberite HTTP konektor.
Na kartici Akcije izaberite HTTP akciju .
Koristeći meni elipse za operaciju, preimenujte operaciju kao CheckReservations.
Podesite sledeće osobine za ovu operaciju, a zatim izaberite + Novi korak:
- Metod: GET
- URI: https://<APIM ime>.azure-api.net/api/boilerparts/. Kao i ranije, u polju Dinamički sadržaj za ovaj URI, na kartici Dinamički sadržaj , izaberite boilerPartId. U polju URI , dodajte tekst / rezervisano nakon boilerPartId rezervisanog mesta
U Izaberite operaciju bok za novu akciju, u Traži konektore i akcije bok, unesite Parse JSON, a zatim izaberite Parse JSON akciju.
Preimenujte operaciju kao ParseReservations.
Podesite svojstvo Sadržaj na Telo.

Unesite sledeću šemu, a zatim izaberite + Novi korak.

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

Raščlanjavanje podataka rezervacija.

U polju Izaberite operaciju za novu akciju, u polju Pretraži konektore i akcije , unesite Stanje, a zatim izaberite akciju Kontrola stanja.
Preimenujte operaciju kao CompareStock.
Izaberite Izaberite vrednost bok. U polje Dodaj dinamički sadržaj , na kartici Izraz , unesite sledeći izraz, a zatim izaberite OK.
```
add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])
```
Ovaj izraz izračunava zbir broja stavki navedenog dela kotla koji su trenutno rezervisani i broja koji zahteva inženjer.
U padajućem polju sa padajućom listom uslova, izaberite je veći od.
U preostalom polju Izaberite vrednost , u polju Dinamički sadržaj , na kartici Dinamički sadržaj , pod ParseBoilerPart , izaberite numberInStock.
Ako je potreban broj stavki plus rezervisani broj veći od broja na zalihama, aplikacija mora da izvrši porudžbinu za popunjavanje zaliha. U grani True akcije CompareStock , izaberite Dodaj akciju.
Na kartici Sve za novu operaciju, izaberite HTTP, a zatim izaberite HTTP akciju .
Preimenujte operaciju u PostOrder .
Podesite sledeće osobine za operaciju PostOrder :
- Metod: POST
- URI: https://<APIM ime>.azure-api.net/api/orders
- U tabeli Kuiteries , u prvom redu, unesite ključ boilerPartId. Za vrednost u polju Dodaj dinamički sadržaj , na kartici Dinamički sadržaj , izaberite **boilerPartId **
- U drugom redu tabele Kueries unesite ključnu količinu . U polje vrednosti unesite 50.
Logička aplikacija će automatski naručiti 50 stavki navedenog dela kada ponestane zaliha.

Belešku

Logička aplikacija pretpostavlja da inženjer zapravo neće pokušati da rezerviše više od 50 stavki određenog dela u jednom zahtevu!
Ostavite False granu akcije CompareStock praznu.
Ispod akcije CompareStock , izaberite + Novi korak.
Na kartici Sve za novu operaciju, izaberite HTTP, a zatim izaberite HTTP akciju .
Preimenujte operaciju kao PostReservation.
Podesite sledeće osobine za operaciju PostReservation :
- Metod: POST
- URI: https://<APIM ime>.azure-api.net/api/reservations
- U tabeli Kuiteries , u prvom redu, unesite ključ boilerPartId. Za vrednost u polju Dodaj dinamički sadržaj , na kartici Dinamički sadržaj , izaberite boilerPartId.
- U drugom redu, unesite ključ engineerId. Za vrednost u polju Dodaj dinamički sadržaj , na kartici Dinamički sadržaj , izaberite engineerId
- U trećem redu, unesite ključ quantityToReserve. Za vrednost u polju Dodaj dinamički sadržaj , na kartici Dinamički sadržaj , izaberite numberToReserve
Izaberi + Novi korak. U Izaberite operaciju bok, potražite i izaberite akciju Odgovor .
Podesite sledeće osobine za akciju Odgovor :
- Status kod: 200
- Zaglavlja: Ključ - content-tipe, Vrednost - application/json
- Telo: U polju Dinamički sadržaj izaberite element Telo iz zahteva PostReservation . To je telo koje se vraća kada se izvrši rezervacija.
U gornjem levom uglu stranice Logic Apps Designer izaberite Sačuvaj. Uverite se da se logička aplikacija može sačuvati bez grešaka.

Da bi kreirala prilagođeni konektor koji Power Apps može da koristi za pokretanje logičke aplikacije, Kata izvodi sledeće korake dok je još uvek na Azure portalu:

Na stranici Pregled za aplikaciju logike, izaberite Izvoz.
U oknu Izvozi u Power Apps , nazovite konektor PartsOrderingConnector, izaberite svoje Power Apps okruženje, a zatim izaberite OK.
Prijavite se u Power Apps.
U vašem okruženju, pod podaci, izaberite Custom Connectors i proverite da li je PartsOrderingConnector naveden.

Slavna sada može da izmeni aplikaciju VanArsdel kako bi omogućila tehničaru da naručuje delove dok se nalazi na lokaciji klijenta. Marija dodaje dugme Order na ekran PartDetails , na sledeći način:

Prijavite se na Power Apps (ako već niste prijavljeni).
Pod Apps izaberite aplikaciju VanArsdelApp . Na meniju elipse za aplikaciju izaberite Uredi.
U oknu podataka izaberite Dodaj podatke , potražite konektor PartsOrderingConnectori dodajte novu vezu koristeći taj konektor.
U oknu Prikaz stabla, proširite ekran PartDetails , a zatim proširite obrazac DetailFormKSNUMKS .
U oknu Osobine na desnoj strani, izaberite Uredi polja. U oknu Polja , na meniju elipse, izaberite Dodaj prilagođenu karticu.
U oknu Prikaz stabla preimenujte novu karticu iz DataCard1 u ReserveCard. U prozoru Dizajn prikaza , promenite veličinu kartice tako da zauzima donji deo ekrana, ispod kontrole Image_DataCard1 .
Na meniju Ubaci, iz podmenija Ulaz, dodajte kontrolu Unos teksta, kontrolu Dugme i kontrolu Oznaka u kontrolu ReserveCard .
Promenite veličinu i pozicionirajte kontrole tako da budu susedne, sa kontrolom Dugme desno od kontrole Unos teksta, i Oznaka ispod kontrole Dugme .
U oknu Osobine za kontrolu Unos teksta, obrišite Default osobinu.
U oknu Osobine za kontrolu Dugme , podesite osobinu Tekst na Rezervi.
Preimenujte kontrolu Unos teksta kao NumberToReserve, preimenujte kontrolu Dugme kao Reserve, i preimenujte kontrolu Label kao Message.
Na oknu Osobine za kontrolu Poruka , podesite osobinu Tekst na Delovi Rezervisani, i podesite Vidljivo osobinu na MessageIsVisible.

Belešku

MessageIsVisible je promenljiva koju ćete inicijalizovati na false kada se ekran prikaže, ali će biti promenjena u true ako korisnik izabere dugme Reserve .
Podesite osobinu OnSelect za kontrolu dugmeta Reserve na sledeću formulu.
```
FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text});

Set(MessageIsVisible, true);
```
Belešku

Ova formula koristi direktno kodiran ID inženjera za predstavljanje tehničara koji trenutno pokreće aplikaciju. U 8. poglavlju je opisano kako da dođete do ID-a za prijavljenog korisnika.

Pored toga, aplikacija ne obavlja proveru grešaka; pretpostavlja se da zahtev za rezervisanjem delova uvek uspe. Za više informacija o rukovanju greškama, idite na Funkcije grešaka u Power Apps.
Podesite osobinu OnVisible za ekran PartDetails na Set(MessageIsVisible, false) .

Da biste testirali aplikaciju, uradite sledeće:

U oknu Prikaz stabla, izaberite početni ekran.
Izaberite FKSNUMKS da biste pregledali aplikaciju.
Na početnom ekranu izaberite Delovi.
Na ekranu za pregled, izaberite bilo koji deo.
Na ekranu Detalji o delu, pomerite se nadole do odeljka rezervacije, unesite pozitivnu celobrojnu vrednost, a zatim izaberite Rezervi. Proverite da li se pojavljuje poruka Rezervisani delovi.
Zatvorite prozor za pregled i vratite se u Power Apps Studio.
Na Azure portalu idite na stranicu za InventoryDB SKL bazu podataka.
Izaberite urednik upita i prijavite se kao skladmin sa svojom lozinkom.
U oknu Upit KSNUMKS unesite sledeći upit, a zatim izaberite Pokreni. Uverite se da se prikazuje rezervacija koju ste izvršili u aplikaciji VanArsdel.
```
SELECT * FROM [dbo].[Reservations]
```

Prethodna Sledeća

Deli putem

7. poglavlje: Dodavanje funkcionalnosti aplikaciji

Dodavanje fotografije zakazanoj obavezi

Prikazivanje slika delova

Praćenje istorije zakazivanja za klijenta

Naručivanje delova

Povratne informacije

Dodatni resursi