7. poglavlje: Dodavanje funkcionalnosti aplikaciji
Kiana i Maria uzbuđene su što će pokazati Calebu, terenskom tehničaru, aplikaciju za upravljanje zalihama. Sviđa mu se, ali predlaže dodavanje neke dodatne funkcionalnosti korisničkog sučelja radi jednostavnije upotrebe. Konkretno, Caleb bi želio biti u mogućnosti:
Dodati fotografiju obavljenog posla na bojleru ili klima-uređaju i dodati je detaljima obveze na zaslonu Uređivanje obveze. Ova bi se slika mogla pokazati korisnom kao dokaz dokumentiranja izvršenih popravaka. Zaslon Uređivanje obveze trenutačno omogućuje korisniku dodavanje slike obvezi, ali slika nije spremljena jer ova značajka još nije u potpunosti implementirana. Razlog ovog propusta je taj što Kiana i Preeti trebaju odrediti najbolje mjesto za pohranu podataka o slici. Caleb bi želio da se ova funkcija doda što je prije moguće.
Pregledajte cjelovitu povijest obveza za klijenta kako biste pratili tražene popravke i nadzirali sve tekuće probleme zbog kojih bi tehničari trebali biti više puta pozvani.
Dijelove naručite na zaslonu Detalji o dijelu.
Osim toga, kontrola slike na zaslonu Detalji o dijelu prikazuje slike pohranjene na određenom URL-u. Trenutačno su URL-ovi u podacima jednostavno rezervirana mjesta. Kao i fotografije za zaslon za obveze, Kiana i Preeti trebaju odrediti najbolje mjesto za pohranu slika kako bi bile dostupne aplikaciji.
Dodavanje fotografije obvezi
Fotografije je potrebno pohraniti negdje gdje im aplikacija može pristupiti. Zbog izvedbe i sigurnosti Preeti ne želi da se fotografije spremaju u OneDrive ili u bazu podataka Azure SQL. Umjesto toga, ona i Kiana odlučuju upotrijebiti Azure Blob Storage. Blob Storage optimiziran je za držanje velikih binarnih objekata i robustan je s ugrađenom sigurnošću. Power Apps ima poveznik koji omogućuje pristup značajki Blob Storage. Maria predlaže dodavanje novog zaslona za fotografiranje, poboljšavajući korisničko iskustvo za Caleba.
Dodatne informacije: Azure Blob Storage.
Preeti izrađuje račun Blob Storage na portalu Azure slijedeći ove korake:
Na portalu Azure i na stranici Početno odaberite + Izrada resursa. U tekstnom okviru Pretraživanje na usluzi MarketPlace unesite Račun za pohranu, a zatim odaberite Unos.

Na stranici Račun za pohranu odaberite Izradi.
Na stranici Izrada računa za pohranu unesite sljedeće detalje, a zatim odaberite Pregledaj + izradi:
- Pretplata: Odaberite pretplatu
- Grupa resursa: webapi_rg
- Naziv računa za pohranu: Navedite globalni jedinstven naziv i zabilježite ga za kasnije
- Lokacije: Odaberite svoju najbližu lokaciju
- Izvođenje: Standardno
- Vrsta računa: BlobStorage
- Replikacija: RA-GRS

Na stranici provjere valjanosti odaberite Izradi i pričekajte dok se ne dodijeli račun za pohranu.
Otvorite stranicu za novi račun za pohranu.
Na stranici Pregled odaberite stavku Spremnici.

Na stranici Spremnici odaberite stavku + Spremnik. Izradite novi spremnik pod nazivom fotografije, a zatim odaberite Izradi. Promijenite stavku Razina javnog pristupa na Blob.

Natrag na stranici Pregled za račun za pohranu, u odjeljku s postavkama odaberite Pristupni ključevi. Na stranici Pristupni ključevi odaberite Prikaži ključeve. Zabilježite vrijednost ključa za ključ1.

Preeti daje naziv i ključ računa za pohranu Kiani, koja koristi ove podatke za izradu prilagođenog konektora za aplikaciju slijedeći ove korake:
Prijavite se u sustav Power Apps.
U lijevom oknu proširite odjeljak Podaci, a zatim odaberite Veze. Trebale bi biti navedene postojeće veze koje aplikacija upotrebljava. Odaberite + Nova veza.

Na stranici Nova veza pomaknite se prema dolje, odaberite Veze, odaberite Azure Blob Storage, a zatim odaberite Izradi.

U dijalogu Azure Blob Storage unesite naziv računa za pohranu i pristupni ključ koji je osigurala Preeti, a zatim odaberite Izradi.

Pričekajte dok se ne izradi nova veza. Trebala bi se prikazati na popisu veza.
Maria ovu vezu sa značajkom Blob Storage u aplikaciji može upotrijebiti za spremanje i preuzimanje fotografskih slika. Njezin je prvi zadatak dodati vezu s aplikacijom slijedeći ove korake:
Otvorite aplikaciju VanArsdelApp za uređivanje na usluzi Power Apps Studio.
U oknu Podaci odaberite Dodavanje podataka, potražite poveznik za Azure Blob Storage, a zatim odaberite poveznik.

U dijalogu Azure Blob Storage odaberite poveznik za Azure Blob Storage kako biste ga dodali u svoju aplikaciju.

Marijin sljedeći zadatak je dodati zaslon koji tehničaru ili inženjeru omogućuje spremanje fotografije. Maria odlučuje dodati novi zaslon s kontrolom Slika. Kada se aplikacija pokreće na mobilnom uređaju, ova se kontrola može integrirati s kamerom kako bi tehničaru omogućila fotografiranje. Na drugim uređajima, ova kontrola traži od korisnika prijenos slikovne datoteke. Ona dodaje vezu na ovaj novi zaslon sa zaslona Uređivanje obveza slijedeći ove korake:
U izborniku Umetanje odaberite Novi zaslon, a zatim odaberite predložak Pomično.

U oknu Prikaz stabla odaberite nov zaslon i preimenujte ga u Fotografiranje.
Promijenite svojstvo Tekst kontrole LblAppNameX na ovom zaslonu kako biste Fotografirali.
Izbrišite kontrolu Radno područjeX na zaslonu.
U izborniku Umetanje s padajućeg popisa Mediji odaberite Dodaj sliku za izradu nove kontrole slike.

Napomena
Kontrola slike zapravo je kompozitna prilagođena komponenta koja korisniku omogućuje dodavanje slike na zaslon i prikaz rezultata.
Promijenite veličinu i premjestite kontrolu slike tako da zauzme tijelo zaslona.
U oknu Prikaz stabla odaberite kontrolu IconBackarrowX na zaslonu Detalji o obvezi, a zatim odaberite Kopiraj.

U izborniku Prikaz stabla kliknite desnom tipkom miša zaslon Fotografiranje, a zatim odaberite Zalijepi. Kontrola IconBackArrowX dodat će se na zaslon.

Pomaknite kontrolu IconBackArrowX u gornjem lijevom dijelu trake zaglavlja.
U oknu Prikaz stabla odaberite kontrolu IconBackArrowX na zaslonu Fotografiranje. U desnom oknu, na kartici Napredno, izmijenite svojstvo radnje OnSelect u Navigate(EditAppointment, ScreenTransition.None).
Dodajte novu kontrolu ikone Spremi u gornjem desnom dijelu trake zaglavlja. Postavite svojstvo Vidljivo ove kontrole na If(IsBlank(AddMediaButton1.Media), false, true).
Ova postavka čini ikonu Spremi nevidljivom ako korisnik nije odabrao sliku.

Promijenite formulu u svojstvu radnje OnSelect kontrole ikone Spremi u sljedeć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);Zamijenite <storage account name> nazivom Azure računa za pohranu koji je Preeti izradila.
Ovaj kod prenosi sliku u spremnik fotografije u značajci Blob Storage. Svaka slika dobiva jedinstveni naziv datoteke. Funkcija Naljepak ažurira svojstvo Url slike u zapisu obveza URL-om slike u značajci Blob Storage.
U oknu Prikaz stabla proširite kontrolu AddMediaWithImageX. Izmijenite svojstvo Slika kontrole UploadedImageX i postavite ga na AppointmentImage.
AppointingImage je varijabla koja će se popuniti slikom koju je korisnik prenio ili kao rezultat fotografiranja. Ovu ćete varijablu kasnije pokrenuti na zaslonu Uređivanje obveza.
U oknu Prikaz stabla odaberite kontrolu AddMediaButtonX. Postavite svojstvo Upotreba mobilne kamere ove kontrole na istinito. Postavite svojstvo radnje OnChange kontrole na sljedeće.
Set(AppointmentImage, AddMediaButton1.Media)Ova formula mijenja varijablu AppointmentImage koja upućuje na novu sliku. Kontrola UploadedImageX prikazat će ovu sliku.
U oknu Prikaz stabla odaberite zaslon Uređivanje obveze.
Proširite kontrolu EditFormX. Ispod kontrole Image_DataCardX uklonite kontrolu AddPictureX.

Odaberite kontrolu ImageX. Promijenite sljedeća svojstva:
- Slika: Parent.Default
- X: 30
- Y: DataCardKey X.Y + DataCardKey X.Height + 150 (gdje DataCardKeyX podatkovna kartica sadrži kontrolu ImageX)
- Širina: Parent.Width - 60
- Visina: 400
Napomena
Kontrola slike spustit će se ispod dna zaslona, ali automatski će se dodati traka za pomicanje kako bi se slika mogla prikazati.
Dodajte ikonu Kamera podatkovnoj kartici, a zatim je postavite između oznake Slika i kontrole ImageX. Promijenite naziv kontrole u Ikona kamere
Napomena
Obavezno odaberite kontrolu Ikona kamere, ne kontrolu Mediji kamere.

Postavite svojstvo radnje OnSelect kontrole CameraIcon na sljedeće.
Set(AppointmentImage, SampleImage); Navigate(TakePhoto, ScreenTransition.None);Kad korisnik odabere ovu ikonu, otvorit će zaslon Fotografiranje, na kojem mogu snimiti fotografiju ili prenijeti sliku. Početna prikazana slika bit će zadana ogledna slika.
Za testiranje aplikacije učinite sljedeće:
U oknu Prikaz stabla odaberite zaslon Početno.
Odaberite F5 za pretpregled aplikacije.
Na zaslonu Početno odaberite Obveze.
Na zaslonu za pretraživanje odaberite bilo koju obvezu.
Na zaslonu s detaljima o obvezi odaberite ikonu za uređivanje u zaglavlju zaslona.
Na zaslonu za uređivanje odaberite ikonu slike Kamera.
Provjerite prikazuje li se zaslon Napravi fotografiju.
Odaberite stavku Promijeni sliku i prenesite sliku po vašem izboru (ili fotografirajte ako aplikaciju koristite na mobilnom uređaju).
Odaberite Spremi. Provjerite prikazuje li se slika na stranici s detaljima, a zatim odaberite ikonu kvačice da biste promjene spremili natrag u bazu podataka.
Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.
Prikazivanje slika dijelova
Utvrdivši da je Blob Storage idealno mjesto za spremanje slika povezanih s obvezama, Preeti i Kiana odlučuju da bi trebale upotrijebiti isti pristup za pohranu slika dijelova. Ključna prednost ovog pristupa je što ne zahtijeva nikakve izmjene aplikacije. Aplikacija ponovno upotrebljava isti račun za pohranu i istu vezu. Kao zasebna vježba premještanja mogu učiniti sljedeće:
Izradite novi spremnik Blob Storage.
Prenesite slike dijelova u ovaj spremnik.
Promijenite reference URL slike u tablici Dijelovi u bazi podataka InventoryDB na URL svake slike.
Aplikacija će automatski preuzeti novi URL za svaku sliku dijela, a kontrola Slika na zaslonu Detalji o dijelovima prikazat će sliku.
Praćenje povijesti obveza za klijenta
Maria misli da bi se mogućnost brzog prikaza povijesti svih prethodnih posjeta tehničara mogla dodati u aplikaciju izradom prilagođene komponente. Surađujući s Calebom na tome koje informacije žele vidjeti, Maria skicira jednostavan dizajn koji sadrži bilješke i datum svakog posjeta.

Gledajući podatke, Maria vjeruje da je kontrola galerije najbolji način za prikaz podataka u tablicama na zaslonu.
Maria izrađuje prilagođenu komponentu na sljedeći način:
Koristeći Power Apps Studio u oknu Prikaz stabla, odaberite Komponente, a zatim odaberite + Nova komponenta.

Izrađena je nova prazna komponenta pod nazivom Komponenta1. Preimenujte komponentu u Komponenta povijesti datuma.

U izborniku Umetanje odaberite stavku Galerija, a zatim odaberite predložak galerije Prazna fleksibilna visina.

Premjestite kontrolu galerije i promijenite joj veličinu kako biste popunili prilagođenu komponentu.
Odaberite Dodavanje stavku iz okna za umetanje, zatim odaberite Oznaka teksta.

U okno Prikaz stabla preimenujte kontrolu oznake u Oznaka bilješki. Postavite svojstvo Prelijevanje na Overflow.Scroll. Ova postavka omogućuje kontroli prikaz nekoliko redaka teksta i omogućuje korisniku da se kreće kroz njega. Postavite sljedeća svojstva tako da možete postaviti i prilagoditi veličinu kontrole:
- Visina retka: 2
- X: 28
- Y: 18
- Širina: 574
- Visina: 140
Dodajte drugu tekstnu oznaku kontroli. Preimenujte ovu kontrolu u Oznaka datuma i postavite sljedeća svojstva:
- Visina retka: 2
- X: 28
- Y: 174
- Širina: 574
- Visina: 70
Da biste vidjeli kako će izgledati kontrola kada se umetne u aplikaciju i prikaže s njenom temom, u oknu Prikaz stabla odaberite Komponenta povijesti datuma. U desnom oknu, na kartici Napredno odaberite polje Ispuna i promijenite boju u RGBA (0, 0, 0, 1).

U oknu Umetanje proširite stavku Oblici i dodajte kontrolu Pravokutnik prilagođenoj komponenti. Postavite sljedeća svojstva za ovu kontrolu:
- X: 0
- Y: 273
- Širina: Parent.Width
- Visina: 2
Ova kontrola djeluje kao razdjelnik između zapisa prikazanih u galeriji.

Maria je upoznata s dodavanjem kontrola na zaslone i izradom aplikacija uz Power Apps. Međutim, komponente za višekratnu uporabu ne rade na potpuno isti način. Kiana je Mariji opisala da, kako bi se mogla koristiti podacima u prilagođenoj komponenti, mora dodati neka dodatna prilagođena svojstva unosa. Kiana je također objasnila da Maria treba navesti primjere podataka za ta svojstva, kako bi joj omogućila referencu na polja podataka u kontrolama u svojoj komponenti, na sljedeći način:
U oknu Prikaz stabla odaberite Komponenta povijesti datuma. U desnom oknu, na kartici Svojstva odaberite Novo prilagođeno svojstvo.

U dijalogu Novo prilagođeno svojstvo navedite sljedeće vrijednosti, a zatim odaberite Izradi:
- Naziv za prikaz: Podaci
- Naziv: Podaci
- Opis: Tablica obveza za klijenta koja prikazuje bilješke i datume
- Vrsta svojstva: Unos
- Vrsta podataka: Tablica
- Podignite OnReset kad se vrijednost promijeni: Ostavite prazno

Kako biste promijenili ogledne podatke koje prikazuje kontrola, odaberite novo prilagođeno svojstvo Podaci. U polje za formulu unesite Tablica({Napomene: "Primjer teksta polja bilješki.", 'Datum obveze': Tekst (danas())}).

U oknu Prikaz stabla odaberite kontrolu GalerijaX u komponenta povijesti datumat i preimenujte ga u Povijest obveza.
U desnom oknu, na kartici Napredno postavite svojstvo Stavke kontrole galerije Povijest obveza na Nadređeni.Podaci.

Odaberite kontrolu NotesLabel. U desnom oknu na kartici Napredno promijenite svojstvo Tekst na ThisItem.Notes i promijenite svojstvo Veličina na 20.
Napomena
Svojstvo Veličina određuje veličinu fonta za tekst koji prikazuje kontrola.
Odaberite kontrolu Oznaka datuma za promjenu svojstva Tekst na ThisItem.'Datum obveze' i promijenite svojstvo Veličina na 20. Polja u prilagođenoj komponenti trebaju prikazivati ogledne podatke.

Prilagođena komponenta je dovršena. Maria izrađuje novi zaslon za prikaz povijesti obveza za klijenta pomoću ove komponente na slijedeći način:
U oknu Prikaz stabla odaberite karticu Zasloni.
Proširite zaslon Pretraživanje obveza, proširite kontrolu BrowseAppointmentsGallery i odaberite kontrolu Body1_1. U izborniku Umetanje odaberite Ikone, a zatim odaberite ikonu Popis detalja.

Promijenite naziv kontrole ikone u Prikaz obveza
U oknu Prikaz stabla odaberite kontrolu BrowseAppointmentsGallery. U desnom oknu, na kartici Napredno promijenite svojstvo Veličina predloška u 220. Povećavanjem ovog svojstva proširuje se prostor dostupan u galeriji.
Pomaknite ikonu Prikaz obveza u prazan prostor ispod imena klijenta.

Odaberite kontrolu ikone Prikaz obveza. Postavite svojstvo radnje OnSelect na sljedeću formulu.
ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId)); Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)Ova formula popunjava zbirku nazvanu Zbirka obveza klijenta s obvezama za odabranog klijenta, a zatim se premješta na Zaslon povijesti obveza kako bi se prikazale. Ovaj ćete zaslon izraditi u sljedećim koracima.
U izborniku Umetanje odaberite Novi zaslon, a zatim odaberite predložak Pomično.

Promijenite naziv novog zaslona u Zaslon povijesti obveza.
Izbrišite kontrolu Radno područjeX koja je dodana na ovaj zaslon.

Odaberite kontrolu LblAppNameX na ovom zaslonu. U desnom oknu, na kartici Napredno promijenite svojstvo Tekst na sljedeće.
"Appointments History for " & BrowseAppointmentsGallery.Selected.customer.namePostavite sljedeća svojstva za kontrolu LblAppNameX za prilagodbu položaja i veličine:
- X: 90
- Y: 0
- Širina: 550
- Visina: 140
Odaberite kontrolu RectQuickActionBarX i postavite svojstvo Visina na 140.
Dodajte kontrolu Lijeva ikona zaglavlju zaslona, lijevo od naslova. Postavite svojstvo radnje OnSelect za ovu kontrolu na Navigate(BrowseAppointments, Transition.None).

U izborniku Umetanje odaberite Prilagođeno, a zatim odaberite ikonu Komponenta povijesti datuma.

Pomaknite i promijenite veličinu komponente tako da zauzima tijelo zaslona, ispod naslova.

Postavite sljedeća svojstva za ovu komponentu:
- Podaci: customerAppointmentsCollection
- Datum obveza: startDateTime
- Bilješke: bilješke
Spremite aplikaciju.
Za testiranje aplikacije učinite sljedeće:
U oknu Prikaz stabla odaberite zaslon Početno.
Odaberite F5 za pretpregled aplikacije.
Na zaslonu Početno odaberite Obveze.
Na zaslonu za pretraživanje odaberite ikonu Popis detalja za bilo koju obvezu.
Provjerite prikazuje li se zaslon Povijest obveza za odabranog klijenta.
Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.
Naručivanje dijelova
Ključni zahtjev sustava je omogućiti tehničaru da naruči sve potrebne dijelove tijekom posjeta klijentu. Ako su dijelovi na zalihi, trebalo bi biti moguće zakazati još jedan posjet kako bi se popravak dovršio na sljedeći prikladan datum za klijenta. Ako dijelovi trenutačno nisu na zalihi i moraju se naručiti, tehničar to može reći klijentu. Malik tada može dogovoriti sastanak s klijentom kad Marija dobije obavijest da su dijelovi stigli u skladište.
Rezervacijski dio aplikacije upotrebljava tablice u bazi podataka InventoryDB prikazana na sljedećoj slici. Tablica Narudžbe sadrži informacije o narudžbama za dijelove. U tablici Rezervacije navedeni su zahtjevi za rezervaciju koje su tehničari i inženjeri podnijeli za dijelove. Tablica Inženjeri sadrži ime i broj za kontakt inženjera koji je izvršio rezervaciju što Mariji voditeljici inventara olakšava postavljanje upita ako je potrebno.

Da bi podržala ovu značajku, Kiana mora ažurirati API za web metodom koja dohvaća broj rezerviranih stavki za navedeni dio, na sljedeći način:
Otvorite projekt Web API-ja FieldEngineerApi u značajci Visual Studio Code.
Dodajte datoteku pod nazivom Narudžbe.cs mapi Modeli. Dodajte sljedeći kod ovoj datoteci. Klasa Narudžbe prati detalje narudžbi za dijelove.
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š jednu novu datoteku pod nazivom Rezervacije.cs mapi Modeli i dodajte sljedeći kod u ovu datoteku. Klasa Rezervacija sadrži podatke o broju stavki za određeni dio koji su trenutačno rezervirani za druge klijente.
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š jednu datoteku pod nazivom InventoryEngineer.cs mapi Modeli sa sljedećim kodom. Klasa InventoryEngineer bilježi koji su inženjeri napravili koju rezervaciju.
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 datoteku InventoryContext.cs u mapi Modeli i dodajte sljedeće izjave klasi 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 značajci Visual Studio Code pokrenite sljedeće naredbe za izradu kontrolera za rukovanje narudžbama 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 ControllersOtvorite datoteku BoilerPartController.cs u mapi Kontroleri i dodajte sljedeću metodu GetTotalReservations klasi 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}; } ... }Uredite datoteku OrdersController.cs i izmijenite metodu PostOrder u klasi OrdersController kako je prikazano u nastavku.
[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); }Uredite datoteku ReservationsController.cs. Izmijenite metodu PostReservation u klasi ReservationsController na sljedeć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 sljedeće naredbe za izradu i objavljivanje API-ja za web spremnog za uvođenje.
dotnet build dotnet publish -c Release -o ./publishU značajci Visual Studio Code desnom tipkom miša kliknite mapu objave, a zatim odaberite Uvođenje u web-aplikaciju.
Preeti sada može ažurirati uslugu upravljanja API-jevima koju upotrebljava aplikacija VanArsdel kako bi odražavala ažurirani API za web. Ovo je neprekinuta promjena; postojeće operacije će i dalje raditi, a razlika su u novim kontrolerima i operacijama za rezerviranje i naručivanje. Preeti izvršava sljedeće zadatke:
Napomena
Preeti je mogao odlučiti izbrisati postojeći API za terenskog inženjera i zamijeniti ga novom verzijom, ali taj pristup riskira razbijanje bilo koje postojeće aplikacije koja trenutačno upotrebljava API. Bolja je praksa ostaviti postojeći API na mjestu i dodati modifikacije kao reviziju.
Na Azure portalu otvorite uslugu Upravljanje API-jem.
Na stranici Usluga upravljanja API-jevima, u lijevom oknu ispod odjeljka API-jevi odaberite API-jevi.
Odaberite API za terenskog inženjera odaberite izbornik s tri točke, a zatim odaberite Dodaj reviziju.

U dijalogu Izrada nove revizije API-ja za terenskog inženjera unesite opis Dodane operacije GET i POST za rezervacije dijelova i narudžbe, a zatim odaberite Izradi.

Na stranici REVIZIJA 2 odaberite Dizajn.

Na stranici Dizajn odaberite Dodaj operaciju. U oknu Pristupno postavite sljedeća svojstva, a zatim odaberite Spremi. Ova se operacija upotrebljava za dohvaćanje broja stavki rezerviranih za određeni dio bojlera:
- Naziv za prikaz: api/BoilerParts/{id}/Reserved
- Naziv: api-boilerparts-id-reserved
- URL: GET api/BoilerParts/{id}/Reserved

Na kartici Test za novu operaciju postavite parametar ID na valjani broj dijela (primjer na slici koristi dio 1), a zatim odaberite Pošalji.

Provjerite je li test uspješan. Operacija bi se trebala dovršiti s HTTP 200 odgovorom i tijelom koje prikazuje broj rezervacija za proizvod.

Na stranici Dizajn odaberite Dodaj operaciju. U oknu Pristupni postavite sljedeća svojstva (ova operacija definira zahtjeve POST za izradu novih narudžbi):
- Naziv za prikaz: api/Orders - POST
- Naziv: api-orders-post
- URL: POST api/Orders
Na kartici Upit odaberite + Dodaj parametar, dodajte sljedeće parametre, a zatim odaberite Spremi:
- Naziv: boilerPartId, opis : Boiler Part ID, vrsta: long
- Naziv: količina, opis : količina, vrsta: cijeli broj

Ponovno odaberite Dodavanje operacije u oknu Pristupni i postavite sljedeća svojstva (ova operacija definira zahtjeve POST za izradu novih rezervacija):
- Naziv za prikaz: api/Reservations - POST
- Naziv: api-reservations-post
- URL: POST api/Reservations
Na kartici Upit dodajte sljedeće parametre, a zatim odaberite Spremi:
- Naziv: boilerPartId, opis: Boiler Part ID, vrsta: long
- Naziv: engineerId, opis: Engineer ID, vrsta: string
- Naziv: quantityToReserve, opis: Quantity to reserve, vrsta: integer
Na kartici Revizije odaberite novu verziju. Na izborniku s tri točke za ovu verziju daberite Učini aktualnim.

U dijalogu Učinite reviziju aktualnom odaberite Spremi.
Otvorite drugu stranicu u svom web-pregledniku i otvorite URL https://<APIM name>.azure-api.net/api/boilerparts/1/reserved gdje je <APIM name> naziv vaše API usluge. Provjerite dobivate li odgovor sličan sljedećem.
{"id":1,"totalReservations":5}
Ažurirani API za web sada je dostupan. U teoriji, Kiana bi mogla izraditi novi prilagođeni poveznik za ažurirani API za web i dodati ga u aplikaciju. Tada bi aplikacija mogla implementirati vlastitu logiku kako bi utvrdila koliko je predmeta navedenog proizvoda trenutačno na zalihi, koliko je rezerviranih, usporediti rezultate s potrebnim brojem predmeta, po potrebi naručiti još zaliha ili rezervirati artikle iz postojeće zalihe. Međutim, ovu vrstu logike bolje je implementirati u logičku aplikaciju Azure. Power Apps može pozvati logičku aplikaciju putem prilagođenog poveznika kada tehničar želi rezervirati ili naručiti dio.
Kako bi izradila logičku aplikaciju, Kiana slijedi sljedeće korake:
Napomena
Da bi stvari bile jednostavne, logička aplikacija izrađena u ovom primjeru nije transakcijska. Moguće je da između provjere dostupnosti dijela i izrade rezervacije istodobni korisnik može napraviti proturječnu rezervaciju. Transakcijsku semantiku možete implementirati zamjenom neke logike u ovoj logičkoj aplikaciji pohranjenom procedurom u bazi podataka InventoryDB.
Na portalu Azure i na stranici Početno odaberite + Izrada resursa.
U tekstnom okviru Pretraživanje na usluzi MarketPlace unesite Logička aplikacija, a zatim odaberite Unos.
Na stranici Logička aplikacija odaberite Izradi.

Na stranici Izrada logičke aplikacije unesite sljedeće vrijednosti, a zatim odaberite Pregledaj + izradi:
- Pretplata: Odaberite Azure pretplatu
- Grupa resursa: webapi_rg
- Naziv logičke aplikacije: FieldEngineerPartsOrdering
- Regija: Odaberite isto mjesto koje ste koristili za API za web
- Pridružite se okruženju usluge integracije: ostavite prazno
- Omogućivanje analitike zapisa: ostavite prazno
Na stranici provjere valjanosti odaberite Izradi i pričekajte dok se ne uvede logička aplikacija.
Kada je uvođenje završeno, odaberite Otvorite resurs.
Na stranici Logic Apps Designer pomaknite se dolje do odjeljka Predlošci, a zatim odaberite Prazna logička aplikacija.

Na kartici Svi, u tekstnom okviru Pretraživanje poveznika i okidača, odaberite Zahtjev.

Na kartici Okidači odaberite Kada se primi HTTP zahtjev.

U okvir Shema JSON tijela zahtjeva unesite sljedeću shemu, a zatim odaberite + Novi korak.
{ "type": "object", "properties": { "boilerPartId": { "type": "integer" }, "numberToReserve": { "type": "integer" }, "engineerId": { "type": "string" } } }
Ova shema definira sadržaj HTTP zahtjeva koji logička aplikacija očekuje. Tijelo zahtjeva sadrži ID dijela bojlera, broj stavki koje treba rezervirati i ID inženjera koji podnosi zahtjev. Aplikacija će poslati ovaj zahtjev kada inženjer želi rezervirati dio.
U okviru Odabir operacije odaberite stavku Svi, a zatim odaberite HTTP.

Logička aplikacija pozvat će operaciju Dijelovi bojlera{id} API-ja za web za dohvaćanje informacija o dijelu bojlera koje pruža zahtjev iz aplikacije.
U oknu + Radnje odaberite radnju HTTP.

U okviru radnje HTTP, u izborniku s tri točke odaberite Preimenovanje i promijenite naziv radnje u CheckBoilerPart.

Postavite svojstva HTTP radnje na sljedeći način, a zatim odaberite + Novi korak:
- Metoda: STAVLJANJE
- URI: https://<APIM name>.azure-api.net/api/boilerparts/ gdje je <APIM name>_ naziv vaše usluge za upravljanje API-jevima. U okviru _ Dinamični sadržaj za ovaj URI, na kartici Dinamični sadržaj odaberite ID djela bojlera

U okviru Odabir operacije, u okviru Poveznici za pretraživanje i radnje, unesite Raščlanjivanje JSON, a zatim odaberite radnju Raščlanjivanje JSON.

Korištenje izbornika s tri točke za radnju Raščlanjivanje JSON, preimenujte radnju u Raščlanjivanje dijelova bojlera.
U okviru Sadržaj za radnju Raščlanjivanje dijela bojlera, u okviru Dinamični sadržaj odaberite Tijelo. U okvir Shema unesite sljedeću JSON shemu, a zatim odaberite + 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" }, } }
Ova radnja analizira odgovornu poruku koju je vratio zahtjev getBoilerParts/{id}. Odgovor sadrži detalje o dijelu bojlera, uključujući broj koji je trenutačno na zalihi.
U okviru Odabir operacije za novi korak odaberite poveznik HTTP.
Na kartici Radnje odaberite radnju HTTP.
Koristeći izbornik s tri točke za operaciju preimenujte operaciju u Provjera rezervacija.
Postavite sljedeća svojstva za ovu operaciju, a zatim odaberite + Novi korak:
- Metoda: STAVLJANJE
- URI: https://<APIM name>.azure-api.net/api/boilerparts/. Kao i prije, u okviru Dinamični sadržaj za ovaj URI na kartici Dinamični sadržaj odaberite ID dijela bojlera. U polju URI dodajte tekst /rezervirano nakon rezerviranog mjesta ID dijela bojlera

U okviru Odabir operaciju za novu radnju, u okviru Poveznici za pretraživanje i radnje unesite Raščlanjivanje JSON, a zatim odaberite radnju Raščlanjivanje JSON.
Preimenujte operaciju u Raščlanjivanje rezervacija.
Postavite svojstvo Sadržaj na ThisItem.Body.
Unesite sljedeću shemu, a zatim odaberite + Novi korak.
{ "type": "object", "properties": { "id": { "type": "integer" }, "totalReservations": { "type": "integer" } } }
U okviru Odabir operacije za novu radnju, u okviru Poveznici za pretraživanje i radnje unesite Stanje, a zatim odaberite radnju Kontrola Uvjet.

Preimenujte operaciju u Usporedba zaliha.
Odaberite okvir Odabir vrijednosti. U okvir Dodavanje dinamičnog sadržaja, na kartici Izraz unesite sljedeći izraz, a zatim odaberite U redu.
add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])Ovaj izraz izračunava zbroj broja stavki određenog dijela bojlera koji su trenutačno rezervirani i broja koji je zatražio inženjer.

Na padajućem popisu uvjeta odaberite veći je od.
U preostalom okviru Odabir vrijednostu, u okviru Dinamični sadržaj, na kartici Dinamični sadržaj, u odjeljku Raščlanjivanje dijelova bojlera odaberite Broj na zalihi.

Ako je broj potrebnih predmeta plus rezervirani broj veći od broja na zalihi, aplikacija mora poslati narudžbu za obnovu zaliha. U dijelu Istinito radnje Usporedba zaliha odaberite Dodajte radnju.
Na kartici Svi za novu operaciju odaberite HTTP, a zatim odaberite radnju HTTP.
Preimenujte operaciju u Slanje narudžbi.
Postavite sljedeća svojstva za operaciju Slanje narudžbi:
- Metoda: SLANJE
- URI: https://<APIM name>.azure-api.net/api/orders
- U tablicu Upiti, u prvi red unesite ključ ID dijela bojlera. Za vrijednost u okviru Dodavanje dinamičkog sadržaja, na kartici Dinamičkog sadržaja odaberite ID dijela bojlera
- U drugi redak tablice Upiti, unesite ključ količina. U polje za vrijednost unesite 50.

Logička aplikacija automatski će naručiti 50 predmeta navedenog dijela kad zaliha ponestane.
Napomena
Logička aplikacija pretpostavlja da inženjer zapravo neće pokušati rezervirati više od 50 predmeta određenog dijela u jednom zahtjevu!
Ostavite odjeljak Neistinito radnje Usporedba zaliha praznom.
Ispod radnje Usporedba zaliha odaberite + Novi korak.
Na kartici Svi za novu operaciju odaberite HTTP, a zatim odaberite radnju HTTP.
Preimenujte operaciju u Slanje rezervacija.
Postavite sljedeća svojstva za operaciju Slanje rezervacija:
- Metoda: SLANJE
- URI: https://<APIM name>.azure-api.net/api/reservations
- U tablicu Upiti, u prvi red unesite ključ ID dijela bojlera. Za vrijednost u okviru Dodavanje dinamičkog sadržaja, na kartici Dinamički sadržaj odaberite ID dijela bojlera.
- U drugi redak unesite ključ ID inženjera. Za vrijednost u okviru Dodavanje dinamičkog sadržaja, na kartici Dinamički sadržaj odaberite ID inženjera.
- U treći redak unesite ključ količina za rezervaciju. Za vrijednost u okviru Dodavanje dinamičkog sadržaja, na kartici Dinamički sadržaj odaberite broj za rezervaciju.
Odaberite + Novi korak. U okviru Odabir operacijue okvir potražite i odaberite radnju Odgovor.
Postavite sljedeća svojstva za radnju Odgovor:
- Šifra statusa: 200
- Zaglavlja: Ključ – tip sadržaja, vrijednost – aplikacija/json
- Tijelo: u okviru Dinamični sadržaj odaberite element Tijelo iz zahtjeva Slanje rezervacije. Ovo se tijelo vraća kada se izvrši rezervacija.

U gornjem lijevom dijelu stranice Logic Apps Designer odaberite Spremi. Provjerite može li se logička aplikacija spremiti bez pogrešaka.
Da biste izradili prilagođeni poveznik koji Power Apps može upotrebljavati za pokretanje logičke aplikacije, Kiana izvodi sljedeće korake dok je još uvijek na Azure portalu:
Na stranici Pregled za logičku aplikaciju odaberite Izvoz.

U oknu Izvoz u Power Apps povezniku dodijelite naziv PartsOrderingConnector, odaberite svoje okruženje usluge Power Apps, a zatim odaberite U redu.

Prijavite se u sustav Power Apps.
U vašem okruženju, u odjeljku Podaci odaberite Prilagođeni poveznici i provjerite je li naveden PartsOrderingConnector.

Maria sada može izmijeniti aplikaciju VanArsdel kako bi tehničaru omogućila naručivanje dijelova tijekom posjećivanja klijenta. Ona dodaje gumb Narudžba na zaslonu Detalji o dijelu na sljedeći način:
Prijavite se u Power Apps (ako već nije prijavljen).
U odjeljku Aplikacije odaberite aplikaciju VanArsdelApp. U izborniku s tri točke za aplikaciju odaberite Uredi.
U oknu Podaci odaberite Dodavanje podataka, potražite poveznik PartsOrderingConnector i dodajte novu vezu pomoću tog poveznika.

U oknu Prikaz stabla proširite zaslon Detalj o dijelovima, a zatim proširite obrazac Obrazac s detaljima1.
U oknu Svojstva na desnoj strani, odaberite Uredi polja. U oknu Polja, u izborniku s tri točke odaberite Dodaj prilagođenu karticu.

U oknu Prikaz stabla preimenujte novu karticu iz Podatkovna kartica1 u Rezervna kartica. U prozoru Prikaz dizajna promijenite veličinu kartice tako da zauzima donji dio zaslona, ispod kontrole Image_DataCard1.

U izborniku Umetanje, iz podizbornika Ulaz, dodajte kontrolu Unos teksta, kontrolu Gumb i kontrolu Oznaka kontroli Rezervna kartica.
Promijenite veličinu i postavite kontrole tako da su jedna do druge, pomoću kontrole Gumb kontrola s desne strane kontrole Unos teksta i Oznake ispod kontrole Gumb.
U oknu Svojstva za kontrolu Unos teksta uklonite svojstvo Zadano.
U oknu Svojstva za kontrolu Gumb postavite svojstvo Tekst na Rezerva.

Preimenujte kontrolu Unos teksta u Broj za rezervaciju, preimenujte kontrolu Gumb u Rezerva i preimenujte kontrolu Oznaka u Poruku.
U oknu Svojstva za kontrolu Poruka, postavite svojstvo Tekst na Rezervirani dijelovi i postavite svojstvo Vidljivo na MessageIsVisible.
Napomena
MessageIsVisible je varijabla u koju ćete pokrenuti na neistinito kada se prikaže zaslon, ali će se promijeniti u istinito ako korisnik odabere gumb Rezerviraj.
Postavite svojstvo OnSelect za kontrolu gumba Rezerviraj na sljedeću formulu.
FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text}); Set(MessageIsVisible, true);Napomena
Ova formula upotrebljava ID inženjera s tvrdim kodom za predstavljanje tehničara koji trenutačno pokreće aplikaciju. 8. poglavlje opisuje kako dohvatiti ID prijavljenog korisnika.
Osim toga, aplikacija ne provjerava pogreške; pretpostavlja da zahtjev za rezervom dijelova uvijek uspije. Više informacija o rješavanju pogrešaka potražite u odjeljku Funkcije pogrešaka na usluzi Power Apps.
Postavite svojstvo OnVisible za zaslon Detalji o dijelovima na Set(MessageIsVisible, false).
Za testiranje aplikacije učinite sljedeće:
U oknu Prikaz stabla odaberite zaslon Početno.
Odaberite F5 za pretpregled aplikacije.
Na zaslonu Početno odaberite Dijelovi.
Na zaslonu za pretraživanje odaberite bilo koji dio.
Na zaslonu Detalji o dijelovima pomaknite se do odjeljka za rezervacije, unesite pozitivnu cijelu vrijednost, a zatim odaberite Rezerviraj. Provjerite prikazuje li se poruka Dijelovi su rezervirani.

Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.
Na Azure portalu otvorite stranicu za bazu podataka SQL InventoryDB.
Odaberite Uređivač upita i prijavite se kao sqladmin vašom lozinkom.
U okno Upit 1 unesite sljedeći upit, a zatim odaberite Pokreni. Provjerite prikazuje li se rezervacija koju ste izvršili u aplikaciji VanArsdel.
SELECT * FROM [dbo].[Reservations]