7. poglavje: Dodajanje funkcionalnosti aplikaciji

Svetlana in Mateja navdušeno pokažeta aplikacijo za upravljanje terenske zaloge terenskemu tehniku Klemnu. Všeč mu je, vendar predlaga, da dodata nekaj dodatnih funkcionalnosti uporabniškega vmesnika, da bo uporaba enostavnejša. Natančneje, Klemen si želi, da bi bilo možno:

• Dodajanje fotografije opravljenega dela na grelniku ali klimatski napravi ter pripenjanje fotografije k podrobnostim termina na zaslonu Uredi termin. Ta slika bi lahko bila koristna kot dokumentarni dokaz o izvedenih popravilih. Zaslon Uredi termin trenutno omogoča uporabniku, da doda sliko terminu, toda slika se ne shrani, ker ta funkcija še ni bila popolnoma uveljavljena. Razlog za to opustitev je, da morata Svetlana in Patricija ugotoviti, kje bi bilo najbolje hraniti slikovne podatke. Klemen želi, da bi bila ta funkcionalnost dodana čim prej.

• Ogled celotne zgodovine terminov za stranko, sledenje popravilom, ki so bila zahtevana, in spremljanje morebitnim težav v teku, zaradi katerih bi tehniki morali večkrat posredovati.

• Naročanje delov z zaslona Podrobnosti dela.

Poleg tega kontrolnik slike na zaslonu Podrobnosti dela prikazuje slike, shranjene na navedenem URL-ju. Trenutno so URL-ji v podatkih zgolj označbe mest. Kot pri fotografijah za zaslon terminov morata Svetlana in Patricija ugotoviti, katero bi bilo najboljše mesto za shranjevanje slik, tako da so na voljo aplikaciji.

Dodajanje fotografije terminu

Fotografije morajo biti shranjene nekje, kamor lahko aplikacija dostopa. Iz razlogov učinkovitosti delovanja in varnosti Patricija ne želi, da bi bile fotografije shranjene v storitvi OneDrive ali zbirki podatkov SQL Azure. Namesto tega se s Svetlano odločila za uporabo shrambe zbirke dvojiških podatkov Azure. Shramba zbirke dvojiških podatkov je optimizirana za hrambo večjih dvojiških predmetov in je robustna, z vgrajeno varnostjo. Power Apps ima povezovalnik, ki omogoča dostop do shrambe zbirke dvojiških podatkov. Mateja predlaga, da bi dodali nov zaslon za fotografiranje, kar bi izboljšalo Klemnovo uporabniško izkušnjo.

Več informacij: Shramba zbirke dvojiških podatkov Azure

Patricija ustvari račun za shrambo zbirke dvojiških podatkov v portalu Azure, tako da sledi tem korakom:

1. V portalu Azure na strani Osnovno izberite + Ustvari vir. V polje Iskanje po mestu Marketplace vnesite Račun za shrambo, nato pa izberite Enter.

   

2. Na strani Račun za shrambo izberite Ustvari.

3. Na strani Ustvari račun za shrambo vnesite naslednje podrobnosti, nato pa izberite Preglej in ustvari:

   • Naročnina: izberite svojo naročnino
   • Skupina virov: webapi_rg
   • Ime računa za shrambo: zagotovite globalno enolično ime in si ga zabeležite za pozneje
   • Lokacija: izberite svojo najbližjo lokacijo
   • Učinkovitost delovanja: Standardno
   • Vrsta računa: BlobStorage
   • Podvajanje: RA-GRS

   

4. Na strani za potrjevanje izberite Ustvari in počakajte, da je račun za shranjevanje omogočen za uporabo.

5. Pojdite na stran za nov račun za shranjevanje.

6. Na strani Pregled izberite Vsebniki.

   

7. Na strani Vsebniki izberite + Vsebnik. Ustvarite nov vsebnik z imenom Fotografije, nato pa izberite Ustvari. Spremenite Raven javnega dostopa na Zbirka dvojiških podatkov.

   

8. Nazaj na strani Pregled za račun za shranjevanje pod nastavitvami izberite Ključi za dostop. Na strani Ključi za dostop izberite Prikaži ključe. Zabeležite si vrednost ključa za key1.

   

Patricija posreduje ime in ključ računa za shranjevanje Svetlani, ki s temi informacijami ustvari povezovalnik po meri za aplikacijo s sledenjem teh korakov:

1. Vpis v storitev Power Apps.

2. V levem podoknu razširite možnost Podatki in izberite Povezave. Navedene bi morale biti obstoječe povezave, ki jih uporablja aplikacija. Izberite +Nova povezava.

   

3. Na strani Nova povezava se pomaknite navzdol, izberite Povezave, izberite Shramba zbirke dvojiških podatkov Azure, nato pa izberite Ustvari.

   

4. V pogovorno okno Shramba zbirke dvojiških podatkov Azure vnesite ime računa za shranjevanje in ključ za dostop, ki ju je zagotovil skrbnik, v tem primeru Patricija, nato pa izberite Ustvari.

   

5. Počakajte, da se ustvari nova povezava. Prikazati se mora na seznamu povezav.

Mateja uporabi to povezavo do shrambe zbirke dvojiških podatkov Azure v aplikaciji za shranjevanje in pridobivanje fotografij. Njena prva naloga je dodajanje povezave v aplikacijo po teh navodilih:

1. Odprite aplikacijo VanArsdelApp za urejanje v storitvi Power Apps Studio.

2. V podoknu Podatki izberite Dodaj podatke, poiščite povezovalnik Shramba zbirke dvojiških podatkov Azure in nato izberite povezovalnik.

   

3. V pogovornem oknu Shramba zbirke dvojiških podatkov Azure izberite povezovalnik Shramba zbirke dvojiških podatkov Azure za dodajanje v aplikacijo.

   

Matejino naslednje opravilo je dodajanje zaslona, ki omogoča tehniku ali serviserju, da shrani fotografijo. Mateja se odloči, da bo dodala nov zaslon s kontrolnikom slike. Ko se aplikacija izvaja v mobilni napravi, se lahko ta kontrolnik integrira s kamero, da tehniku omogoči fotografiranje. V drugih napravah ta kontrolnik pozove uporabnika, naj namesto tega naloži slikovno datoteko. Na ta nov zaslon doda povezavo z zaslona EditAppointment po naslednjih navodilih:

1. V meniju Vstavi izberite Nov zaslon, nato pa izberite predlogo Pomično.

   

2. V podoknu Drevesni pogled izberite nov zaslon in ga preimenujte v TakePhoto.

3. Spremenite lastnost Besedilo kontrolnika LblAppNameX na tem zaslonu na Fotografiraj.

4. Izbrišite kontrolnik CanvasX iz zaslona.

5. V meniju Vstavi s spustnega seznama Predstavnost izberite Dodaj sliko, da ustvarite nov kontrolnik slike.

   

   Opomba

   Kontrolnik slike je dejansko sestavljen kontrolnik po meri, ki omogoča uporabniku, da doda sliko na zaslon in prikaže rezultate.

6. Spremenite velikost kontrolnika slike in ga prestavite, da zasede telo zaslona.

7. V podoknu Drevesni pogled izberite kontrolnik IconBackarrowX na zaslonu AppointmentDetails in nato izberite Kopiraj.

   

8. V meniju Drevesni pogled z desno tipko miške kliknite zaslon TakePhoto in nato izberite Prilepi. Kontrolnik IconBackArrowX bo dodan na zaslon.

   

9. Premaknite kontrolnik IconBackArrowX v vrstico glave zgoraj levo.

10. V podoknu Drevesni pogled izberite kontrolnik IconBackArrowX na zaslonu TakePhoto. V desnem podoknu na zavihku Napredno prilagodite lastnost dejanja OnSelect na Navigate(EditAppointment, ScreenTransition.None).

11. Dodajte nov kontrolnik ikone Shrani v vrstico glave zgoraj desno. Nastavite lastnost Vidno tega kontrolnika n If(IsBlank(AddMediaButton1.Media), false, true).

    Ta nastavitev naredi ikono Shrani nevidno, če uporabnik ni izbral slike.

    

12. Spremenite formulo v lastnosti dejanja OnSelect kontrolnika ikone Shrani na naslednje.

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

    Zamenjajte <storage account name> z imenom računa za shranjevanje Azure, ki ga je ustvarila Patricija.

    Ta koda naloži sliko v vsebnik Fotografije v shrambi zbirke dvojiških podatkov. Vsaka slika dobi enolično ime datoteke. Funkcija Popravek posodobi lastnost imageUrl v zapisu termina z URL-jem slike v shrambi zbirke dvojiških podatkov.

13. V podoknu Drevesni pogled razširite kontrolnik AddMediaWithImageX. Prilagodite lastnost Slika kontrolnika UploadedImageX in jo nastavite na AppointmentImage.

    AppointmentImage je spremenljivka, ki bo zapolnjena s sliko, ki jo bodisi naloži uporabnik ali nastane po fotografiranju. To spremenljivko boste pozneje zagnali na zaslonu EditAppointment.

14. V podoknu Drevesni pogled izberite kontrolnik AddMediaButtonX. Nastavite lastnost UseMobileCamera tega kontrolnika na true. Nastavite lastnost dejanja OnChange kontrolnika na naslednje.

    Set(AppointmentImage, AddMediaButton1.Media)
    

    Ta formula spremeni spremenljivko AppointmentImage na sklic na novo sliko. Kontrolnik UploadedImageX bo prikazal to sliko.

15. V podoknu Drevesni pogled izberite zaslon EditAppointment.

16. Razširite kontrolnik EditFormX. Pod kontrolnikom Image_DataCardX odstranite kontrolnik AddPictureX.

    

17. Izberite kontrolnik ImageX. Spremenite naslednje lastnosti:

    • Slika: Parent.Default
    • X: 30
    • Y: DataCardKey X.Y + DataCardKey X.Height + 150 (kjer je DataCardKeyX podatkovna kartica, ki vsebuje kontrolnik ImageX)
    • Širina: Parent.Width - 60
    • Višina: 400

    Opomba

    Kontrolnik slike se bo spustil navzdol na dno zaslona, toda samodejno bo dodan drsni trak, da se omogoči ogled slike.

18. Dodajte ikono Kamera v podatkovno kartico, nato pa jo umestite med oznako Slika in kontrolnik ImageX. Spremenite ime kontrolnika CameraIcon.

    Opomba

    Zagotovite, da izberete kontrolnik ikone kamere, ne kontrolnika predstavnosti kamere.

    

19. Nastavite lastnost dejanja OnSelect kontrolnika CameraIcon na naslednje.

    Set(AppointmentImage, SampleImage);
    
    Navigate(TakePhoto, ScreenTransition.None);
    

    Ko uporabnik izbere to ikono, se pomakne na zaslon TakePhoto, kjer lahko fotografira ali naloži sliko. Prvotna prikazana slika bo privzeta vzorčna slika.

Za preskus aplikacije naredite naslednje:

1. V podoknu Drevesni pogled izberite zaslon Osnovno.

2. Izberite F5 za predogled aplikacije.

3. Na zaslonu Osnovno izberite Termini.

4. Na zaslonu za brskanje izberite kateri koli termin.

5. Na zaslonu s podrobnostmi za termin izberite ikono za urejanje v glavi zaslona.

6. Na zaslonu za urejanje izberite ikono Kamera za sliko.

7. Preverite, ali se prikaže zaslon Fotografiraj.

8. Izberite Spremeni sliko in naložite sliko po izbiri (ali fotografirajte, če aplikacijo uporabljate prek mobilne naprave).

9. Izberite Shrani. Prepričajte se, da se slika prikaže na strani s podrobnostmi, nato pa izberite ikono kljukice, da shranite spremembe nazaj v zbirko podatkov.

10. Zaprite okno za predogled in se vrnite v Power Apps Studio.

Prikaz slik delov

Patricija in Svetlana sta ugotovili, da je shramba zbirke dvojiških podatkov idealna lokacija za shranjevanje fotografij, povezanih s termini, zato se odločita, da bi bilo pametno uporabiti isti pristop za shranjevanje slik delov. Ključna prednost tega pristopa je, da prilagoditve aplikacije niso potrebne. Aplikacija znova uporabi isti račun za shranjevanje in isto povezavo. Kot vajo iz ločene selitve lahko storita naslednje:

1. Ustvarjanje novega vsebnika shrambe zbirke dvojiških podatkov.

2. Nalaganje slik delov v ta vsebnik.

3. Sprememba sklicev ImageUrl v tabeli Deli v zbirki podatkov InventoryDB na URL vsake slike.

Aplikacija bo samodejno prevzela URL za vsako sliko dela in kontrolnik Slika na zaslonu PartDetails bo prikazoval sliko.

Sledenje zgodovine terminov za stranko

Mateja meni, da bi bilo mogoče v aplikacijo dodati zmožnost hitrega ogleda vse zgodovine iz preteklih obiskov tehnikov pri stranki, tako da bi ustvarili komponento po meri. V sodelovanju s Klemnom Mateja oriše enostavno zasnovo, ki zajema opombe in datum vsakega obiska.

Ob pogledu na podatke Mateja ugotovi, da bi bil kontrolnik galerije najboljši način za prikaz podatkov tabele na zaslonu.

Mateja ustvari komponento po meri po naslednjih navodilih:

1. Z uporabo možnosti Power Apps Studio v podoknu Drevesni pogled izberite Komponente, nato pa izberite + Nova komponenta.

   

   Ustvarjena je nova prazna komponenta z imenom Component1. Preimenujte komponento na DateHistoryComponent.

   

2. V meniju Vstavi izberite Galerija, nato pa izberite predlogo galerije Prazna prilagodljiva višina.

   

3. Premaknite kontrolnik galerije in mu spremenite velikost, da zapolnite komponento po meri.

4. Izberite Dodaj element iz podokna za vstavljanje, nato pa izberite Oznaka besedila.

   

5. V podoknu Drevesni pogled preimenujte kontrolnik oznake na NotesLabel. Nastavite lastnost Preplavitev na Overflow.Scroll. Ta nastavitev omogoča, da kontrolnik prikaže več vrstic besedila in dovoli uporabniku, da se pomika skozenj. Nastavite naslednje lastnosti, tako da lahko umestite in prilagodite velikost kontrolnika:

   • LineHeight: 2
   • X: 28
   • Y: 18
   • Širina: 574
   • Višina: 140

6. Dodajte drugo oznako besedila v kontrolnik. Preimenujte ta kontrolnik na DateLabel in nastavite naslednje lastnosti:

   • LineHeight: 2
   • X: 28
   • Y: 174
   • Širina: 574
   • Višina: 70

7. Če želite prikazati, kako bo kontrolnik videti, ko bo vstavljen v aplikacijo in prikazan s svojo temo, v podoknu Drevesni pogled izberite DateHistoryComponent. V desnem podoknu na zavihku Napredno izberite polje Zapolni in spremenite barvo na RGBA(0, 0, 0, 1).

   

8. V podoknu Vstavi razširite Oblike in dodajte kontrolnik Pravokotnik v komponento po meri. Nastavite naslednje lastnosti za ta kontrolnik:

   • X: 0
   • Y: 273
   • Širina: Parent.Width
   • Višina: 2

   Ta kontrolnik deluje kot ločilo med zapisi, prikazanimi v galeriji.

   

Mateja je seznanjenja z dodajanjem kontrolnikov na zaslone in izdelavo aplikacij s storitvijo Power Apps. Toda komponente za ponovno uporabo ne delujejo čisto enako. Svetlana je Mateji opisala, da mora dodati nekaj dodatnih lastnosti za vnos po meri, da bo mogoče uporabljati podatke v komponenti po meri. Svetlana je tudi pojasnila, da mora Mateja zagotoviti vzorčne podatke za te lastnosti, da bo lahko v kontrolnike v komponenti vključila sklice na podatkovna polja po naslednjih navodilih:

1. V podoknu Drevesni pogled izberite zaslon DateHistoryComponent. V desnem podoknu na zavihku Lastnosti izberite Nova lastnost po meri.

   

2. V pogovornem oknu Nova lastnost po meri določite naslednje vrednosti in nato izberite Ustvari:

   • Prikazno ime: Podatki
   • Ime: Podatki
   • Opis: Tabela terminov za stranko, s prikazom opomb in datumov
   • Vrsta lastnosti: Vnos
   • Podatkovni tip: Tabela
   • Sproži OnReset, ko se spremeni vrednost: pustite prazno

   

3. Da spremenite vzorčne podatke, ki jih prikazuje kontrolnik, izberite novo lastnost po meri Podatki. V polje formule vnesite Table({Notes: "Example notes field text.", 'Appointment Date': Text(Today())}).

   

4. V podoknu Drevesni pogled izberite kontrolnik GalleryX v možnosti DateHistoryComponent, nato pa ga preimenujte na AppointmentHistory.

5. V desnem podoknu zavihka Napredno nastavite lastnost Elementi galerije AppointmentHistory na Parents.Data.

   

6. Izberite kontrolnik NotesLabel. V desnem podoknu zavihka Napredno spremenite lastnost Besedilo na ThisItem.Notes in spremenite lastnost Velikost na 20.

   Opomba

   Lastnost Velikost določa velikost pisave za besedilo, ki ga prikazuje kontrolnik.

7. Izberite kontrolnik DateLabel, da spremenite lastnost Besedilo na ThisItem.'Appointment Date' in spremenite lastnost Velikost na 20. Polja v komponenti po meri bi morala prikazovati vzorčne podatke.

   

Komponenta po meri je končana. Mateja z uporabo te komponente ustvari nov zaslon za prikaz zgodovine terminov za stranko po naslednjih navodilih:

1. V podoknu Drevesni pogled izberite zavihek Zasloni.

2. Razširite zaslon BrowseAppointments, razširite kontrolnik BrowseAppointmentsGallery in izberite kontrolnik Body1_1. V meniju Vstavi izberite Ikone, nato pa izberite ikono Seznam podrobnosti.

   

3. Spremenite ime kontrolnika ikone na ViewAppointments.

4. V meniju Drevesni pogled izberite kontrolnik BrowseAppointmentsGallery. V desnem podoknu na zavihku Napredno spremenite lastnost TemplateSize na 220. S povečanjem te lastnosti razširite prostor, ki je na voljo v galeriji.

5. Premaknite ikono ViewAppointments v prazen prostor pod imenom stranke.

   

6. Izberite kontrolnik ikone ViewAppointments. Nastavite lastnost dejanja OnSelect na naslednjo formulo.

   ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));
   
   Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)
   

   Ta formula zapolni zbirko z imenom customerAppointmentsCollection s termini za izbrano stranko in se nato premakne na zaslon AppointmentHistoryScreen, da jih prikaže. Ta zaslon boste ustvarili v naslednjih korakih.

7. V meniju Vstavi izberite Nov zaslon, nato pa izberite predlogo Pomično.

   

8. Spremenite ime novega zaslona na AppointmentHistoryScreen.

9. Izbrišite kontrolnik CanvasX, ki je bil dodan na ta zaslon.

   

10. Izberite kontrolnik LblAppNameX na tem zaslonu. V desnem podoknu na zavihku Napredno spremenite lastnost Besedilo na naslednje.

    "Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
    

11. Nastavite naslednje lastnosti za kontrolnik LblAppNameX za prilagajanje položaja in velikosti:

    • X: 90
    • Y: 0
    • Širina: 550
    • Višina: 140

12. Izberite kontrolnik RectQuickActionBarX in nastavite lastnost Višina na 140.

13. Dodajte kontrolnik Leva ikona v glavo zaslona, levo od naslova. Nastavite lastnost dejanja OnSelect za ta kontrolnik na Navigate(BrowseAppointments, Transition.None).

    

14. V meniju Vstavi izberite Po meri, nato pa izberite DateHistoryComponent.

    

15. Premaknite komponento in zanjo spremenite velikost, tako da zaseda telo zaslona pod naslovom.

    

16. Nastavite naslednje lastnosti za to komponento:

    • Podatki: customerAppointmentsCollection
    • Datum termina: startDateTime
    • Opombe: notes

17. Shranite aplikacijo.

Za preskus aplikacije naredite naslednje:

1. V podoknu Drevesni pogled izberite zaslon Osnovno.

2. Izberite F5 za predogled aplikacije.

3. Na zaslonu Osnovno izberite Termini.

4. Na zaslonu za brskanje izberite ikono Seznam podrobnosti za termin.

5. Potrdite, da se prikaže zaslon Zgodovina terminov za izbrano stranko.

6. Zaprite okno za predogled in se vrnite v Power Apps Studio.

Naročanje delov

Ključna zahteva sistema je, da tehniku omogoči naročanje vseh delov, ki so potrebni, med obiskom stranke. Če so deli na zalogi, bi moralo biti možno razporediti še en obisk za dokončanje popravila na naslednji primeren datum za stranko. Če delov trenutno ni na zalogi in jih je treba naročiti, lahko tehnik to pove stranki. Maj lahko nato uredi termin s stranko, ko Mateja prejme obvestilo, da so deli prispeli v skladišče.

Del aplikacije v zvezi z rezervacijami uporablja tabele v zbirki podatkov InventoryDB, prikazane na naslednji sliki. Tabela Naročila hrani informacije o naročilih, oddanih za dele. Tabela Rezervacije navaja zahteve za rezervacije, ki so jih tehniki in serviserji opravili za dele. Tabela Serviserji podaja ime in številko stika za serviserja, ki je opravil rezervacijo, kar upraviteljici inventarja Mateji olajša poizvedovanje, če je potrebno.

Za podporo tej funkciji mora Svetlana posodobiti spletni API z metodo, ki pridobi število rezerviranih elementov za določen del, po naslednjih navodilih:

1. Odprite projekt spletnega API-ja FieldEngineerApi v programu Visual Studio Code.

2. Dodajte datoteko z imenom Order.cs v mapo Modeli. Dodajte naslednjo kodo v to datoteko. Razred Naročila spremlja podrobnosti naročil, oddanih za del.

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

3. Dodajte novo datoteko z imenom Reservation.cs v mapo Modeli in nato dodajte naslednjo kodo v to datoteko. Razred Rezervacija vsebuje informacije o številu elementov za dani del, ki so trenutno rezervirani za druge stranke.

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

4. Dodajte še eno datoteko z imenom InventoryEngineer.cs v mapo Modeli z naslednjo kodo. Razred InventoryEngineer beleži, kateri serviserji so opravili katere rezervacije.

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

5. Odprite datoteko InventoryContext.cs v mapi Modeli in dodajte naslednje izjave v razred 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; }
   }
   

6. V terminalskem oknu v programu Visual Studio Code zaženite naslednje ukaze za izdelavo kontrolnikov za obravnavo naročil in rezervacij.

   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
   

7. Odprite datoteko BoilerPartController.cs v mapi Kontrolniki in dodajte naslednjo metodo GetTotalReservations v razred 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}; 
       }
       ...
   }
   

8. Uredite datoteko OrdersController.cs in prilagodite metodo PostOrder v razredu OrdersController, kot je prikazano v nadaljevanju.

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

9. Uredite datoteko ReservationsController.cs. Prilagodite metodo PostReservation v razredu ReservationsController po spodnjih navodilih.

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

10. V terminalskem oknu zaženite naslednje ukaze za izdelavo in objavo spletnega API-ja, pripravljenega za uvedbo.

    dotnet build
    dotnet publish -c Release -o ./publish
    

11. V programu Visual Studio Code z desno tipko miške kliknite mapo Objavi in nato izberite Uvedi v spletno aplikacijo.

Patricija lahko zdaj posodobi storitev upravljanja vmesnikov API, ki jo uporablja aplikacija VanArsdel, da odraža posodobljeni spletni API. To je sprememba brez okvar; obstoječe operacije bodo še najprej delovale, razlika je, da novi kontrolniki in operacije opravljajo rezervacije in oddajajo naročila. Patricija izvede opravila po naslednjih navodilih:

Opomba

Patricija bi se lahko odločila za izbris obstoječega API-ja terenskega serviserja in zamenjavo z novo različico, toda pri takem pristopu tvega, da bo prišlo do okvar katere od obstoječih aplikacij, ki lahko trenutno uporabljajo API. Boljša praksa je, da obstoječi API pustite, kot je, in spremembe dodate kot revizijo.

1. V portalu Azure pojdite na storitev upravljanja vmesnikov API.

2. Na strani Storitev upravljanja vmesnikov API v levem podoknu pod možnostjo API-ji izberite API-ji.

3. Izberite API terenskega serviserja, izberite meni s tremi pikami in nato izberite Dodaj revizijo.

   

4. V pogovornem oknu Ustvari novo revizijo API-ja terenskega tehnika vnesite opis Dodane operacija GET in operacije POST za rezervacijo in naročila delov, nato pa izberite Ustvari.

   

5. Na strani REVIZIJA 2 izberite Oblikovanje.

   

6. Na strani Oblikovanje izberite Dodaj operacijo. V podoknu FrontEnd nastavite naslednje lastnosti in izberite Shrani. Ta operacija se uporablja za pridobivanje števila elementov, rezerviranih za dani del grelnika:

   • Prikazno ime: api/BoilerParts/{id}/Reserved
   • Ime: api-boilerparts-id-reserved
   • URL: GET api/BoilerParts/{id}/Reserved

   

7. Na zavihku Preskus za novo operacijo nastavite parameter ID na veljavno številko dela (primer na sliki uporablja del 1), nato pa izberite Pošlji.

   

8. Potrdite, da je preskus uspešen. Operacija se mora dokončati z odzivom HTTP 200 in telesom, ki prikazuje število rezervacij za izdelek.

   

9. Na strani Oblikovanje izberite Dodaj operacijo. V podoknu FrontEnd nastavite naslednje lastnosti (ta operacija določa zahteve POST za ustvarjanje novih naročil):

   • Prikazno ime: api/Orders - POST
   • Ime: api-orders-post
   • URL: POST api/Orders

10. Na zavihku Poizvedba izberite + Dodaj parameter, dodajte naslednje parametre in nato izberite Shrani:

    • Ime: boilerPartId, opis: Boiler Part ID, vrsta: long
    • Ime: quantity, opis: Quantity, vrsta: integer

    

11. Znova izberite Dodaj operacijo v podoknu FrontEnd in nastavite naslednje lastnosti (ta operacija določa zahteve POST za ustvarjanje novih rezervacij):

    • Prikazno ime: api/Reservations - POST
    • Ime: api-reservations-post
    • URL: POST api/Reservations

12. Na zavihku Poizvedba dodajte naslednje parametre in nato izberite Shrani:

    • Ime: boilerPartId, opis: Boiler Part ID, vrsta: long
    • Ime: engineerId, opis: Engineer ID, vrsta: string
    • Ime: quantityToReserve, opis: Quantity to reserve, vrsta: integer

13. Na zavihku Revizije izberite novo različico. V meniju s tremi pikami za to različico izberite Naredi trenutno.

    

14. V pogovornem oknu Naredi revizijo trenutno izberite Shrani.

15. Odprite drugo stran v spletnem brskalniku in pojdite na URL https://<APIM name>.azure-api.net/api/boilerparts/1/reserved, kjer je <APIM name> ime storitve API. Prepričajte se, da ste dobili odziv, podoben naslednjemu.

    {"id":1,"totalReservations":5}
    

Posodobljeni spletni API je zdaj na voljo. Teoretično bi lahko Svetlana ustvarila nov povezovalnik po meri za posodobljeni spletni API in ga dodala v aplikacijo. Aplikacija bi lahko nato uveljavila lastno logiko, da bi ugotovila, koliko elementov določenega izdelka je trenutno na zalogi, koliko jih je rezerviranih, primerjala rezultate s številom potrebnih elementov, po potrebi oddala naročilo za več zaloge ali rezervirala elemente iz obstoječe zaloge. Vendar se ta vrsta logike bolje uveljavlja v logični aplikaciji Azure. Power Apps lahko prikliče logično aplikacijo prek povezovalnika po meri, ko tehnik želi rezervirati ali naročiti del.

Za ustvarjanje logične aplikacije Svetlana uporabi naslednje korake:

Opomba

Da so stvari enostavnejše, je logična aplikacija, ustvarjena v tem primeru netransakcijska. Možno je, da med preverjanjem razpoložljivosti dela in opravljanjem rezervacije sočasni uporabnik opravi rezervacijo, ki je v sporu. Transakcijsko semantiko lahko uveljavite z zamenjavo nekaj logike v tej logični aplikaciji s shranjeno proceduro v zbirki podatkov InventoryDB.

1. V portalu Azure na strani Osnovno izberite + Ustvari vir.

2. V polje Iskanje po mestu Marketplace vnesite Logična aplikacija, nato pa izberite Enter.

3. Na strani Logična aplikacija izberite Ustvari.

   

4. Na strani Ustvari logično aplikacijo vnesite naslednje vrednosti, nato pa izberite Preglej in ustvari:

   • Naročnina: izberite svojo naročnino Azure
   • Skupina virov: webapi_rg
   • Ime logične aplikacije: FieldEngineerPartsOrdering
   • Regija: izberite isto lokacijo, kot ste jo uporabili za spletni API
   • Povezava z okoljem storitve integracije: pustite prazno
   • Omogočanje analitike beleženja: pustite prazno

5. Na strani za preverjanje izberite Ustvari in počakajte, da je logična aplikacija uvedena.

6. Ko je uvedba dokončana, izberite Pojdi na vir.

7. Na strani Logic Apps Designer se pomaknite navzdol do razdelka Predloge in nato izberite Prazna logična aplikacija.

   

8. Na zavihku Vse v besedilnem polju Iskanje povezovalnikov in sprožilnikov izberite Zahteva.

   

9. Na zavihku Sprožilniki izberite Ko je zahteva HTTP prejeta.

   

10. V polje Shema JSON telesa zahteve vnesite naslednjo shemo in nato izberite + Nov korak.

    {
        "type": "object",
        "properties": {
            "boilerPartId": {
                "type": "integer"
            },
            "numberToReserve": {
                "type": "integer"
            },
            "engineerId": {
                "type": "string"
            }
        }
    }
    

    

    Ta shema definira vsebino zahteve HTTP, ki jo pričakuje logična aplikacija. Telo zahteve vsebuje ID dela grelnika, število elementov, ki jih je treba rezervirati, in ID serviserja, ki poda zahtevo. Aplikacija bo poslala to zahtevo, ko želi serviser rezervirati del.

11. V polju Izbira postopka izberite Vse, nato pa izberite HTTP.

    

    Logična aplikacija bo priklicala operacijo BoilerParts{id} spletnega API-ja, da bi pridobila informacije o delu grelnika, zagotovljene z zahtevo iz aplikacije.

12. V podoknu Dejanja izberite dejanje HTTP.

    

13. V polju dejanja HTTP v meniju s tremi pikami izberite Preimenuj, nato pa spremenite ime dejanja na CheckBoilerPart.

    

14. Nastavite lastnosti dejanja HTTP, kot sledi, in nato izberite + Nov korak:

    • Metoda: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/, kjer je <APIM name>_ ime storitve upravljanja vmesnikov API. V polju _ Dinamična vsebina za ta URI, na zavihku Dinamična vsebina izberite boilerPartId

    

15. Za polje Izbira postopka v polje Iskanje povezovalnikov in dejanj vnesite Razčleni JSON, nato pa izberite dejanje Razčleni JSON.

    

16. Z uporabo menija s tremi pikami za dejanje Razčleni JSON preimenujte dejanje na ParseBoilerPart.

17. Za polje Vsebina za dejanje ParseBoilerPart v polju Dinamična vsebina izberite Telo. V polje Shema JSON vnesite naslednjo shemo JSON in nato izberite + Nov 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"
            },
        }
    }
    

    

    To dejanje razčleni odzivno sporočilo, ki ga vrne zahteva getBoilerParts/{id}. Odziv vsebuje podrobnosti dela grelnika, vključno s številom, ki je trenutno na zalogi.

18. V polju Izbira postopka za nov korak izberite povezovalnik HTTP.

19. Za zavihku Dejanja izberite dejanje HTTP.

20. Z uporabo menija treh pik za operacijo, preimenujte operacijo na CheckReservations.

21. Nastavite naslednje lastnosti za to operacijo in nato izberite + Nov korak:

    • Metoda: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/. Kot prej, v polju Dinamična vsebina za ta URI na zavihku Dinamična vsebina izberite boilerPartId. V polju URI pripnite besedilo /reserved po označbi mesta boilerPartId

    

22. Za polje Izbira postopka za novo dejanje v polje Iskanje povezovalnikov in dejanj vnesite Razčleni JSON, nato pa izberite dejanje Razčleni JSON.

23. Preimenujte operacijo na ParseReservations.

24. Nastavite lastnost Vsebina na Telo.

25. Vnesite naslednjo shemo in nato izberite + Nov korak.

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

    

26. Za polje Izbira postopka za novo dejanje v polje Iskanje povezovalnikov in dejanj vnesite Pogoj, nato pa izberite dejanje Kontrolnik pogojev.

    

27. Preimenujte operacijo na CompareStock.

28. Izberite polje Izbira vrednosti. V polje Dodajanje dinamične vsebine na zavihku Izraz vnesite naslednji izraz in nato izberite V redu.

    add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])
    

    Ta izraz izračuna vsoto števila elementov navedenega dela grelnika, ki so trenutno rezervirani, in števila, ki ga zahteva serviser.

    

29. V spustnem seznamu pogojev izberite je večje od.

30. Za preostalo polje Izbira vrednosti v polju Dinamična vsebina na zavihku Dinamična vsebina pod možnostjo ParseBoilerPart izberite numberInStock.

    

31. Če je število potrebnih elementov in število rezerviranih elementov večje od števila na zalogi, mora aplikacija oddati naročilo za dopolnitev inventarja. V veji True dejanja CompareStock izberite Dodaj dejanje.

32. Na zavihku Vse za nov postopek izberite HTTP, nato pa izberite dejanje HTTP.

33. Preimenujte operacijo na PostOrder.

34. Nastavite naslednje lastnosti za operacijo PostOrder:

    • Metoda: POST
    • URI: https://<APIM name>.azure-api.net/api/orders
    • V tabeli Poizvedbe v prvo vrstico vnesite ključ boilerPartId. Za vrednost v polju Dodajanje dinamične vsebine na zavihku Dinamična vsebina izberite boilerPartId
    • V drugo vrstico tabele Poizvedbe vnesite ključ količina. V polje vrednosti vnesite 50.

    

    Logična aplikacija bo samodejno naročila 50 kosov določenega dela, ko se bo zaloga približevala koncu.

    Opomba

    Logična aplikacija domneva, da serviser ne bo dejansko poskušal rezervirati več kot 50 kosov določenega dela v eni zahtevi!

35. Pustite vejo False dejanja CompareStock prazno.

36. Pod dejanjem CompareStock izberite + Nov korak.

37. Na zavihku Vse za nov postopek izberite HTTP, nato pa izberite dejanje HTTP.

38. Preimenujte operacijo na PostReservation.

39. Nastavite naslednje lastnosti za operacijo PostReservation:

    • Metoda: POST
    • URI: https://<APIM name>.azure-api.net/api/reservations
    • V tabeli Poizvedbe v prvo vrstico vnesite ključ boilerPartId. Za vrednost v polju Dodajanje dinamične vsebine na zavihku Dinamična vsebina izberite boilerPartId.
    • V drugo vrstico vnesite ključ engineerId. Za vrednost v polju Dodajanje dinamične vsebine na zavihku Dinamična vsebina izberite engineerId
    • V tretjo vrstico vnesite ključ quantityToReserve. Za vrednost v polju Dodajanje dinamične vsebine na zavihku Dinamična vsebina izberite numberToReserve

40. Izberite + Nov korak. V polju Izbira postopka poiščite in izberite dejanje Odziv.

41. Določite naslednje lastnosti za dejanje Odziv:

    • Koda stanja: 200
    • Glave: ključ – content-type, vrednost – application/json
    • Telo: v polju Dinamična vsebina izberite element Telo iz zahteve PostReservation. To je telo, vrnjeno, ko je opravljena rezervacija.

    

42. V zgornjem levem kotu strani Logic Apps Designer izberite Shrani. Potrdite, da je mogoče logično aplikacijo shraniti brez kakršnih koli napak.

Za ustvarjanje povezovalnika po meri, ki ga lahko Power Apps uporabi za sproženje logične aplikacije Svetlana v portalu Azure izvede korake po naslednjih navodilih:

1. Na strani Pregled za logično aplikacijo izberite Izvozi.

   

2. V podoknu Izvozi v Power Apps poimenujte povezovalnik PartsOrderingConnector, izberite okolje Power Apps in nato izberite V redu.

   

3. Vpišite se v storitev Power Apps.

4. V svojem okolju pod možnostjo Podatki izberite Povezovalniki po meri in se prepričajte, da je navedeno PartsOrderingConnector

   

Mateja lahko zdaj spremeni aplikacijo podjetja VanArsdel, da omogoči tehniku, da naroči dele medtem ko je na lokaciji pri stranki. Doda gumb Naročilo na zaslon PartDetails, kot sledi:

1. Vpišite se v Power Apps (če še niste vpisani).

2. Pod možnostjo Aplikacije izberite aplikacijo VanArsdelApp. V meniju s tremi pikami za aplikacijo izberite Uredi.

3. V podoknu Podatki izberite Dodaj podatke, poiščite povezovalnik PartsOrderingConnector in dodajte novo povezavo z uporabo tega povezovalnika.

   

4. V podoknu Drevesni pogled razširite zaslon PartDetails in nato razširite obrazec DetailForm1.

5. V podoknu Lastnosti na desni izberite Uredi polja. V podoknu Polja v meniju s tremi pikami izberite Dodaj kartico po meri.

   

6. V podoknu Drevesni pogled preimenujte novo kartico s DataCard1 na ReserveCard. V oknu Pogled načrta spremenite velikost kartice, tako da zavzema spodnji del zaslona pod kontrolnikom Image_DataCard1.

   

7. V meniju Vstavi v podmeniju Vnos dodajte kontrolnik Vnos besedila, kontrolnik Gumb in kontrolnik Oznaka v kontrolnik ReserveCard.

8. Za kontrolnike spremenite velikost in jih namestite tako, da so drug poleg drugega, tako da je kontrolnik Gumb desno od kontrolnika Vnos besedila in kontrolnik Oznaka pod kontrolnikom Gumb.

9. V podoknu Lastnosti za kontrolnik Vnos besedila počistite lastnost Privzeto.

10. V podoknu Lastnosti za kontrolnik Gumb nastavite lastnost Besedilo na Rezerviraj.

    

11. Preimenujte kontrolnik Vnos besedila na NumberToReserve, preimenujte kontrolnik Gumb na Rezerviraj in preimenujte kontrolnik Oznaka na Sporočilo.

12. V podoknu Lastnosti za kontrolnik Sporočilo nastavite lastnost Besedilo na Deli rezervirani in nastavite lastnost Vidno na MessageIsVisible.

    Opomba

    MessageIsVisible je spremenljivka, ki jo zaženete na false, ko je zaslon prikazan, se pa spremeni na true, če uporabnik izbere gumb Rezerviraj.

13. Nastavite lastnost OnSelect za kontrolnik gumba Rezerviraj na naslednjo formulo.

    FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text});
    
    Set(MessageIsVisible, true);
    

    Opomba

    Ta formula uporablja zakodiran ID serviserja, da predstavlja tehnika, ki trenutno uporablja aplikacijo. V 8. poglavju je opisano, kako pridobiti ID za podpisanega uporabnika.

    Dodatno, aplikacije ne izvaja preverjanja glede napak; domneva, da zahteva za rezervacijo delov vedno uspe. Za več informacij o obravnavi napak pojdite na Funkcija napak v storitvi Power Apps.

14. Nastavite lastnost OnVisible za zaslon PartDetails na Set(MessageIsVisible, false).

Za preskus aplikacije naredite naslednje:

1. V podoknu Drevesni pogled izberite zaslon Osnovno.

2. Izberite F5 za predogled aplikacije.

3. Na zaslonu Osnovno izberite Deli.

4. Na zaslonu za brskanje izberite kateri koli del.

5. Na zaslonu Podrobnosti dela se pomaknite navzdol do razdelka z rezervacijami, vnesite pozitivno celo število in nato izberite Rezerviraj. Potrdite, da se prikaže sporočilo Deli rezervirani.

   

6. Zaprite okno za predogled in se vrnite v Power Apps Studio.

7. V portalu Azure pojdite na stran za zbirko podatkov SQL InventoryDB.

8. Izberite Urejevalnik poizvedb in se vpišite kot sqladmin s svojim geslom.

9. V podoknu Poizvedba 1 vnesite naslednjo poizvedbo, nato pa izberite Zagon. Potrdite, da se prikaže rezervacija, ki ste jo opravili v aplikaciji VanArsdel.

   SELECT * FROM [dbo].[Reservations]
   

   

Nazaj Naprej