Peatükk 7: rakendusele funktsioonide lisamine

Kiana ja Maria on põnevil, kui näitavad väljatehnikule Calebile varude haldamise rakendust. Talle meeldib, kuid soovitab selle hõlbustamiseks lisada veel mõne kasutajaliidese funktsionaalsuse. Täpsemalt sooviks Caleb teha järgmist.

  • Lisage foto boileri või kliimaseadmega tehtud töödest ja lisage see kuva Redigeeri kohtumist kohtumise üksikasjadele. See pilt võib osutuda kasulikuks, kuna teostatud paranduste puhul on abiks tehtud paranduste tõend. Kuva Redigeeri kohtumist lubab kasutajal lisada kohtumisele praegu pildi, kuid pilti ei salvestata, kuna seda funktsiooni pole veel täielikult rakendatud. Selle väljajätmise põhjuseks on see, et Kiana ja Preeti peavad määrama pildiandmete salvestamiseks parima koha. Caleb soovib, et see funktsioon lisataks võimalikult kiiresti.

  • Vaadake kliendi täielikku kohtumiste ajalugu, et jälgida soovitud remonti ja jälgida kõiki käimasolevaid probleeme, mis võivad vajada tehnikute korduvat väljakutsumist.

  • Tellige detailid kuval Detaili üksikasjad.

Lisaks kuvatakse pildi juhtelemendis Detaili üksikasjade kuval määratud URL-is talletatavad pildid. Praegu on andmete URL-id lihtsalt kohatäiteks. Nagu kohtumisekraani fotod, peavad ka Kiana ja Preeti määrama parima koha piltide salvestamiseks, et need oleksid rakendusele kättesaadavad.

Foto lisamine kohtumisele

Fotod tuleb säilitada kusagil, kuhu rakendus juurde pääseb. Jõudluse ja turvalisuse huvides ei soovi Preeti fotosid salvestada Azure'i SQL-andmebaasi ega OneDrive rakendusse. Selle asemel otsustavad tema ja Kiana kasutada Azure Blob Storage'i. Blob Storage on optimeeritud suurte binaarobjektide hoidmiseks ja on vastupidav ning sisseehitatud turbega. Power Apps rakendusel on konnektor, mis võimaldab juurdepääsu bloobimälule. Maria soovitab lisada uue pildistamise ekraani, parandades Calebi kasutuskogemust.

Lisateave: Azure Blob Storage bloobimälu.

Preeti loob Blob Storage'i konto Azure'i portaalist järgides järgmisi samme.

  1. Azure'i portaalis Avalehel valige suvand + Ressursi loomine. Sisestage tekstiväljale Turuplatsi otsing Mälu ja seejärel valige sisestusklahv Enter.

    Azure Marketplace otsing

  2. Klõpsake lehel Salvestuskonto käsku Loo.

  3. Sisestage lehel Loo salvestuskonto järgmised üksikasjad ja seejärel valige Ülevaatus + loomine.

    • Tellimus: valige oma tellimus
    • Ressursigrupp: webapi_rg
    • Salvestuskonto nimi: sisestage globaalselt ainulaadne nimi ja märkige see hilisemaks tähelepanekuks üles
    • Piirkond: valige lähim piirkond
    • Jõudlus: standard
    • Konto tüüp: BlobStorage
    • Tiražeerimine: RA-GRS

    Azure salvestuskonto loomine

  4. Valige valideerimislehel Loo ja oodake, kuni salvestuskonto on ettevalmistatud.

  5. Minge uue salvestuskonto lehele.

  6. Valige lehel Ülevaade suvand Ümbrised.

    Salvestuskonto ülevaate leht

  7. Valige lehel Ümbrised suvand + Ümbrised. Looge uus konteiner nimega pildid ja seejärel valige Loo. Avaliku juurdepääsu tase muutke bloobiks.

    Pildiümbrise loomine

  8. Salvestuskonto lehel Ülevaade valige sätete jaotises suvand Juurdepääsuvõtmed. Valige lehel Juurdepääsuvõtmed suvand Kuva võtmed. Märkige üles võtme key1 väärtus.

    Salvestusruumi konto juurdepääsuvõtmed

Preeti annab salvestusruumi konto nime ja võtme Kianale, kes kasutab seda teavet rakenduse jaoks kohandatud konnektori loomiseks, järgides järgmisi samme.

  1. Logige sisse saidil Power Apps.

  2. Laiendage vasakul paanil jaotist Andmed ja valige suvand Ühendused. Loendis on loetletud olemasolevad rakenduse kasutatavad ühendused. Valige + Uus ühendus.

    Power Apps ühenduste leht

  3. Liikuge lehel Uus ühendus allapoole, valige Ühendused, valige Azure'i bloobi salvestusruum ja seejärel valige Loo.

    Valige Azure'i Bloobimälu konnektor

  4. Sisestage Azure'i bloobimälu dialoogis Preeti'i antud salvestusruumi konto nimi ja juurdepääsuvõti ning seejärel valige Loo.

    Sisestage salvestusruumi identimisteave

  5. Oodake, kuni uus ühendus luuakse. See peaks olema toodud ühenduste loendis.

Maria saab seda ühendust rakenduses Blob Storage salvestada ja fotopilte hankida. Tema esimeseks ülesandeks on lisada rakendusse ühendus, järgides järgmisi samme.

  1. Muutmiseks avage rakendus VanArsdelApp rakenduses Power Apps Studio.

  2. Valige andme paanil Lisa andmed, otsige Azure'i bloobimälu konnektorit ja valige see.

    Bloobimälu konnektori otsimine

  3. Valige Azure'i bloobimälu dialoogis Azure'i bloobimälu konnektor, et lisada see oma rakendusse.

    Lisage bloobimälu ühendus

Maria järgmine ülesanne on lisada kuva, mis võimaldab tehnikul või inseneril foto salvestada. Nimi otsustab lisada uue kuva pildi juhtelemendiga. Kui rakendust käitatakse mobiilseadmes, saab selle juhtelemendi kaameraga integreerida, et võimaldada tehnikul fotot teha. See juhtelement palub teistel seadmetel selle asemel kasutajal pildifaili üles laadida. Ta lisab sellele uuele kuvale lingi EditAppointment kuval, järgides järgmisi samme.

  1. Valige menüü Lisa käsk Uus kuva ja seejärel valige keritav mall.

    Keritava malli uus kuva

  2. Valige puuvaate paanil uus kuva ja nimega see ümber väärtuseks TakePhoto.

  3. Muutke LblAppNameX juhtelemendi atribuuti Tekst praegusel ekraanil Foto tegemiseks.

  4. Kustutage kuvalt juhtelement LõuendX.

  5. Uue pildi juhtelemendi loomiseks valige menüü Lisa ripploendist Meedia suvand Lisa pilt.

    Lisa pildi juhtelement

    Märkus

    Pildi juhtelement on tegelikult komposiitkomponent, mis võimaldab kasutajal ekraanile pilti lisada ja tulemusi kuvada.

  6. Kuva keha hõivamiseks muutke pildikontrolli suurust ja asetage see mujale.

  7. Valige puuvaate paanil juhtelement IconBackarrowX kuval AppointmentDetails ja valige seejärel Kopeeri.

    Tagasinoole juhtelemendi kopeerimine

  8. Paremklõpsake puuvaate menüüs kuva TakePhoto ja valige Kleebi. Juhtelement IconBackArrowX lisatakse ekraanile.

    Tagasinoole juhtelemendi kleepimine TakePhoto kuvale

  9. Juhtelemendi IconBackArrowX teisaldamine päiseriba vasakusse ülanurka.

  10. Valige puuvaate paanil juhtelement IconBackArrowX ja valige kuva TakePhoto. Muutke parempoolsel paanil vahekaardil Täpsem toimingut OnSelect väärtuseks Navigate(EditAppointment, ScreenTransition.None).

  11. Lisage päiseribast paremale ülemisse paremale uus juhtelement Salvesta ikooniga. Seadke selle juhtelemendi nähtav atribuut väärtuseks If(IsBlank(AddMediaButton1.Media), false, true).

    See säte muudab ikooni Salvesta nähtamatuks, kui kasutaja pole pilti valinud.

    Salvesta ikooni juhtelemendi lisamine

  12. Muutke juhtelemendi Salvesta ikooni tegevust atribuudis OnSelect olevat valemit järgmiselt.

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

    Asendage <storage account name> Preeti loodud Azure'i salvestusruumi konto nimega.

    See kood laadib pildi bloobimälus asuvasse fotokonteinerisse. Igal pildil on kordumatu failinimi. Funktsioon Patch värskendab kohtumiste kirje atribuuti imageUrl, kus on bloobimälus pildi URL.

  13. Laiendage puuvaate paanil juhtelementi AddMediaWithImageX. Muutke juhtelemendi UploadedImageX atribuuti Pilt ja määrake selle väärtuseks AppointmentImage.

    AppointmentImage on muutuja, mis täidetakse kasutaja üleslaaditud pildiga või pildi tegemise tulemusena. Te lähtestate selle muutuja hiljem EditAppointment kuval.

  14. Valige puuvaate paanil juhtelementi AddMediaButtonX. Seadke selle juhtelemendi atribuut UseMobileCamera väärtuseks tõene. Seadke juhtelemendi atribuut OnChange järgmiselt.

    Set(AppointmentImage, AddMediaButton1.Media)
    

    See valem muudab AppointmentImage muutujat, et viidata uuele pildile. Juhtelement UploadedImageX kuvab selle pildi.

  15. Valige paanil Puuvaade kuva EditAppointment.

  16. Laiendage juhtelementi EditFormX. Eemaldage juhtelemendi Image_DataCardX alt lisandmoodul AddPictureX.

    AddPicture'i juhtelemendi eemaldamine

  17. Valige juhtelement ImageX. Muutke järgmisei atribuute.

    • Pilt: Parent.Default
    • X: 30
    • Y: DataCardKey X.Y + DataCardKey X.Height + 150 (kus DataCardKeyX on andmekaart, mis sisaldab juhtelementi ImageX)
    • Laius: Parent.Width - 60
    • Kõrgus: 400

    Märkus

    Pildi juhtelement langeb ekraani alaossa, kuid pildi vaatamise võimaldamiseks lisatakse automaatselt kerimisriba.

  18. Lisage andmekaardile ikoon Kaamera, seejärel paigutage see pildi sildi ja ImageX juhtelemendi vahele. Seadke juhtelemendi nimeks CameraIcon.

    Märkus

    Veenduge, et valiksite kaamera ikooni juhtelemendi, mitte kaamerameedia juhtelemendi.

    Kaamera ikooni lisamine

  19. Seadke juhtelemendi CameraIcon atribuut OnSelect järgmiselt.

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

    Kui kasutaja valib selle ikooni, läheb ta kuvale TakePhoto, kus nad saavad foto teha või pildi üles laadida. Esialgne kuvatav pilt on vaikimisi näidis.

Rakenduse testimiseks tehke järgmist.

  1. Valige paanil Puuvaade kuva Avaleht.

  2. Rakenduse eelvaateks vajutage F5.

  3. Valige Avakuval suvand Kohtumised.

  4. Valige sirvimiskuval soovitud kohtumine.

  5. Valige kohtumise üksikasjade kuval ekraani päises redigeerimise ikoon.

  6. Valige redigeerimiskuval pildi ikoon Kaamera.

  7. Veenduge, et kuvataks kuva Tee foto.

  8. Valige Muuda pilti ja laadige soovitud pilt üles (või tehke emaseks, kui käitate rakendust mobiilses seadmes).

  9. Valige Salvesta. Veenduge, et pilt kuvatakse üksikasjade lehel, ja seejärel valige märkeikoon, et muudatused andmebaasi tagasi salvestada.

  10. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

Varuosade piltide kuvamine

Olles kindlaks teinud, et Blob Storage on ideaalne koht kohtumistega seotud piltide salvestamiseks, otsustavad Preeti ja Kiana, et nad peaksid osade piltide salvestamiseks kasutama sama lähenemist. Selle lähenemise peamine eelis on, et see ei nõua rakenduse muutmist. Rakendus kasutab uuesti sama mäluruumikontot ja sama ühendust. Eraldi migreerimispaketina saab ta teha järgmist.

  1. Loou uue bloobimälu konteineri.

  2. Laadida varuosade pildid sinna konteinerisse.

  3. Muutke ImageUrli viited InventoryDB andmebaasi tabelis Varuosad iga pildi URL-iks.

Rakendus valib iga varuosa pildi jaoks uue URL-i automaatselt ja PartDetails ekraanil kuvatav Pildi juhtelement kuvab pildi.

Kliendi kohtumiste ajaloo jälitamine

Maria arvab, et kliendi eelmiste tehnikakülastuste kogu ajaloo kiire vaatamise võiks rakendusse lisada kohandatud komponendi loomisega. Koostöös Calebiga soovitud teabe kuvamiseks visandab Maria lihtsa kujunduse, mis sisaldab märkmeid ja iga külastuse kuupäeva.

Kliendi kohtumiste ajaloo andmed

Andmetest vaadates liidleb, et Galerii juhtelement on parim viis tabeliandmete kuvamiseks ekraanil.

Maria loob kohandatud komponendi järgmiselt.

  1. Power Apps Studio rakenduse puuvaate paanil valige Komponendid ja seejärel valige + Uus komponent.

    Uue komponendi loomine

    Luuakse uus tühi komponent nimega Component1. Nimetage komponent ümber vastavalt DateHistoryComponent.

    Komponendi ümbernimetamine

  2. Valige menüü Lisa suvand Galerii ja seejärel galerii mall Tühi paindlik kõrgus.

    Lisa galerii juhtelement

  3. Kohandatud komponendi täitmiseks teisaldage galerii juhtelement ja muutke selle suurust.

  4. Valige Lisapaanil üksuse lisamine ja seejärel Teksti silt.

    Lisage komponendile tekstisilt

  5. Nimetage puuvaate paanil sildi juhtelement väärtuseks NotesLabel. Määrake atribuudi Ületäitumine väärtuseks Overflow.Scroll. See säte võimaldab juhtnupul kuvada mitut tekstirida ja lubada kasutajal seda sirvida. Seadke juhtelemendi paigutamiseks ja suuruse muutmiseks järgmised atribuudid.

    • LineHeight: 2
    • X: 28
    • Y: 18
    • Laius: 574
    • Kõrgus: 140
  6. Lisage juhtelemendile teine ​​tekstisilt. Nimetage see juhtelement ümber DateLabel-ks ja määrake järgmised atribuudid.

    • LineHeight: 2
    • X: 28
    • Y: 174
    • Laius: 574
    • Kõrgus: 70
  7. Et näha, kuidas juhtelement välja näeb, kui see rakendusse sisestatakse ja selle kujundusega kuvatakse, valige puuvaate paanil DateHistoryComponent. Valige parempoolsel paanil vahekaardil Täpsem väli Täida ja muutke värviks RGBA(0, 0, 0, 1).

    Komponendi kuvamine

  8. Laiendage paanil Lisa suvandit Kujundid ja lisage kohandatud komponendile juhtelement Ristkülik. Määrake selle juhtelemendi jaoks järgmised atribuudid.

    • X: 0
    • Y: 273
    • Laius: Parent.Width
    • Kõrgus: 2

    See juhtelement toimib galeriis kuvatavate kirjete eraldajana.

    Lisa ristküliku juhtelement

Maria on tuttav juhtnuppude lisamisega ekraanidele ja rakenduste loomisega rakendusega Power Apps. Kuid taaskasutatavad komponendid ei tööta päris samamoodi. Kiana kirjeldas Mariale, et kohandatud komponendis andmete kasutamiseks peab ta lisama mõned täiendavad kohandatud sisendi atribuudid. Kiana selgitas ka, et Maria peab esitama nende omaduste näidisandmed, et tal oleks võimalik viidata oma komponendi juhtelementide andmeväljadele järgmiselt.

  1. Valige paanil Puuvaade suvand DateHistoryComponent. Paremal paanil vahekaardil Atribuudid valige suvandi Uus kohandatud atribuut.

    Uus kohandatud atribuut

  2. Määrake dialoogiboksis Uus kohandatud atribuut järgmised väärtused ja seejärel valige Loo.

    • Kuva nimi: andmed
    • Nimi: andmed
    • Kirjeldus: kliendi kohtumiste tabel koos märkmete ja kuupäevadega
    • Atribuudi tüüp: sisend
    • Andmetüüp: tabel
    • Tõstke väärtus OnReset, kui väärtus muutub, siis jätke tühjaks

    Uus kohandatud atribuut atribuudid

  3. Juhtelemendis kuvatavate näidisandmete muutmiseks valige Andmete uus kohandatud atribuut. Sisestage valemiväljale Table({Notes: "Example notes field text.", 'Appointment Date': Text(Today())}).

    Näidisandmete muutmine

  4. Valige puuvaate paanil juhtelement GaleriiX jaotises DateHistoryComponent ja pange selle nimeks AppointmentHistory.

  5. Määrake parempoolsel paanil vahekaardil Täpsem galerii AppointmentHistory atribuudi Üksused väärtuseks Parents.Data.

    Galerii juhtelemendi atribuudi Üksused värskendamine

  6. Valige juhtelement NotesLabel. Seadke parempoolsel paanil vahekaardi Täpsem atribuudi Tekst väärtuseks ThisItem.Notes ja muutke atribuudi Suurus väärtuseks 20.

    Märkus

    Atribuut Suurus määrab juhtelemendis kuvatava teksti fondisuuruse.

  7. Valige juhtelement DateLabel, et muuta atribuut Tekst väärtuseks ThisItem.'Appointment Date' ja atribuudi Suurus väärtuseks 20. Kohandatud komponendi väljad peaksid näitama näidisandmeid.

    Näidisandmetega kohandatud komponent

Kohandatud komponent on valmis. Maria loob selle komponendi abil uue ekraani kliendi kohtumiste ajaloo kuvamiseks järgmiselt.

  1. Valige paanil Puuvaade vahekaart Kuvad.

  2. Laiendage BrowseAppointments kuval juhtelementi BrowseAppointmentsGallery ja valige juhtelement Body1_. Valige menüü Lisa käsk Ikoonis ja seejärel valige Detaili loend ikoon.

    Üksikasjade loendi ikooni lisamine

  3. Seadke ikooni juhtelemendi nimeks ViewAppointments.

  4. Valige puuvaate menüüs juhtelement BrowseAppointmentsGallery. Paremal paanil vahekaardil Täpsem muutke atribuudi TemplateSize väärtuseks 220. Selle atribuudi suurendamine laiendab galeriis saadaolevat ruumi.

  5. Viige ikoon ViewAppointments kliendi nime all olevasse tühja ruumi.

    Muudetud kohtumiste galerii

  6. Valige ViewAppointmentsi ikooni juhtelement. Määrake atribuut OnSelect toimingu jaoks järgmine valem.

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

    See valem täidab valitud kliendi kohtumistega kogumi nimega customerAppointmentsCollection ja seejärel teisaldab need kohtumised kuvamiseks loendisse AppointmentHistoryScreen. Loote selle kuva järgmiselt.

  7. Valige menüü Lisa käsk Uus kuva ja seejärel valige keritav mall.

    Keritava malli põhjal uue kuva loomine

  8. Muutke uue kuva nimeks AppointmentHistoryScreen.

  9. Kustutage ekraanile lisatud juhtelement CanvasX.

    Lõuendi juhtelemendi kustutamine

  10. Valige sellel ekraanil juhtelement LblAppNameX. Paremal paanil vahekaardil Täpsem seadke atribuudi Tekst väärtus järgmiselt.

    "Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
    
  11. Positsiooni ja suuruse kohandamiseks määrake LblAppNameX juhtelemendile järgmised atribuudid.

    • X: 90
    • Y: 0
    • Laius: 550
    • Kõrgus: 140
  12. Valige juhtelement RectQuickActionBarX ja määrake atribuudi Kõrgus väärtuseks 140.

  13. Lisage ekraani päisesse juhtelement Vasak ikoon, mis asub pealkirjast vasakul. Seadke selle juhtelemendi toimingu atribuut OnSelect väärtuseks Navigate(BrowseAppointments, Transition.None).

    Tühi AppointmentsHistory kuva

  14. Valige menüü Lisa käsk Kohandatud ja seejärel valige DateHistoryComponent.

    Lisage DateHistory komponent

  15. Liigutage komponenti ja muutke selle suurust nii, et see hõivaks ekraani keha pealkirja all.

    Muudetud suurusega komponent

  16. Määrake selle komponendi jaoks järgmised atribuudid.

    • Andmed: customerAppointmentsCollection
    • Kohtumise kuupäev: startDateTime
    • Märkmed: märkmed
  17. Salvestage rakendus.

Rakenduse testimiseks tehke järgmist.

  1. Valige paanil Puuvaade kuva Avaleht.

  2. Rakenduse eelvaateks vajutage F5.

  3. Valige Avakuval suvand Kohtumised.

  4. Valige sirvimiskuval iga kohtumise üksikasjade loendi ikoon.

  5. Veenduge, et valitud kliendi kuva Kohtumiste ajalugu kuvatakse.

  6. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

Varuosade tellimine

Süsteemi põhinõue on lubada tehnikul tellida kliendi külastades vajalikke varuosasid. Kui varuosad on laos olemas, peaks olema võimalik kavandada teine külastus, et remont lõpule viia järgmisel, kliendile sobival kuupäeval. Kui varuosad on praegu laos ja need tuleb tellida, saab tehnik kliendile helistada. Malik saab seejärel korraldada kliendiga kohtumise, kui Ta saab teada, et osad on kohale jõudnud.

Rakenduse reserveeringute osa kasutab InventoryDB andmebaasi tabeleid, mis kuvatakse järgmisel joonisel. Tabelis Tellimused on teave varuosade tellimuste kohta. Tabelis Reserveeringud on ära toodud tehnikute ja varuosade kohta tehtud tehnikute ja tööga seotud tehnikute taotlused. Tabelis Insenerid on toodud otsuse teinud inseneri nimi ja kontakti number ja seetõttu on Marial (varuhaldur) lihtne päringuid vajadusel teha.

Reserveeringute andmemudel

Selle funktsiooni toetamiseks peab Kiana värskendama veebi API-d meetodiga, mis tagastab määratud osa jaoks reserveeritud üksuste arvu järgmiselt.

  1. Avage FieldEineerApi veebi API projekt rakendusega Visual Studio Code.

  2. Lisage kausta Mudelid Order.cs fail. Lisage sellesse faili järgmine kood. Tellimuste klass jälgib varuosade kohta tellimuste üksikasju.

    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. Lisage kausta Mudelid veel fail nimega Reservation.cs ja lisage sellele faili järgmine kood. Reserveeringu klassis on teave teatud varuosa üksuste arvu kohta, mis on praegu reserveeritud teistele klientidele.

    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. Lisage kausta Mudelid fail nimega InventoryEngineer.cs järgmise koodiga. InventoryEngineer klass salvestab, millised insenerid on teinud reserveeringuid.

    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. Avage InventoryContext.cs fail kaustas Mudelid ja lisage InventoryContext klassi järgmised avaldused.

    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. Käivitage rakenduses Visual Studio Code terminaliaknas järgmised käsud, et luua tellimuste käsitlemiseks ja individuaalseks käsitlemiseks järgmisi käske.

    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. Avage kaustas Kontrollerid fail BoilerPartController.cs ja lisage klassi BoilerPartsController meetod GetTotalReservations.

    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. Redigeerige faili OrderController.cs ja redigeerige klassi OrdersController meetodit PostOrder nagu on järgmiselt toodud.

    [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. Redigeerige ReservationsController.cs faili. Muutke klassi ReservatsionsController meetodit PostReservation järgmiselt.

    [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. Käivitage terminaliaknas järgmised käsklused veebirakenduse loomiseks ja avaldamiseks juurutamiseks valmis.

    dotnet build
    dotnet publish -c Release -o ./publish
    
  11. Paremklõpsake rakenduses Visual Studio Code kaust avalda ja seejärel valige Juuruta veebirakendusse.

Preeti saab nüüd värskendada rakenduse VanArsdel kasutatavat API haldusteenust, et see kajastaks uuendatud veebi API-t. See on muutus, mis funktsionaalsust katki ei tee. Olemasolevad toimingud jätkavad tööd, erinevus seisneb selles, et uued kontrollerid ja operatsioonid broneeringute tegemiseks ja tellimuste esitamiseks. Preeti tegi järgmisi toiminguid.

Märkus

Preeti oleks võinud valida olemasoleva Field Engineeri API kustutamise ja selle asendamise uue versiooniga, kuid see lähenemine võib rikkuda olemasolevaid rakendusi, mis võivad praegu API-d kasutada. Parem on jätta olemasolev API kohale ja lisada muudatused redaktsioonina.

  1. Minge Azure'i portaalis API Management teenusesse.

  2. Valige API Management teenuse lehel vasakus paanis API-de all oleval vasakpoolsel paanil APId.

  3. Valige soovitud Field Engineer API, valige kolmikpunkti menüü ja seejärel käsk Lisa redaktsioon.

    Field Engineer API-le redaktsiooni lisamine

  4. Sisestage dialoogiboksis Field Engineer API uue redaktsiooni loomine kirjeldus Lisatud GET- ja POST-toimingud varuosa reserveerimiseks ja tellimiseks ning seejärel valige Loo.

    Redaktsiooni loomine

  5. Tehke lehel REDAKTSIOON 2 valik Kujunda.

    Redaktsiooni kujundamine

  6. Tehke lehel Kujundus valik Lisa toiming. Täitke paanil FrontEnd järgmised atribuudid ja seejärel valige Salvesta. Järgmist toimingut kasutatakse antud boileri osale reserveeritud üksuste arvu hankimiseks.

    • Kuvatav nimi: api/BoilerParts/{id}/Reserved
    • Nimi: api-boilerparts-id-reserved
    • URL: GET api/BoilerParts/{id}/Reserved

    Reserved API toimingu lisamine

  7. Määrake vahekaardil Test uue toimingu jaoks ID-parameeter kehtivaks varuosa numbriks (pildi näide kasutab 1. osa) ja seejärel valige Saada.

    Veebi-API testimine

  8. Veenduge, et test õnnestuks. Toiming peaks koosnema HTTP 200 vastusega ja kehaga, mis näitab toote reservatsioonide arvu.

    Testi vastus

  9. Tehke lehel Kujundus valik Lisa toiming. Seadke paanil FrontEnd järgmised atribuudid (see toiming määratleb POST-päringud uute tellimuste loomiseks).

    • Kuvatav nimi: api/Orders - POST
    • Nimi: api-orders-post
    • URL: POST api/Orders
  10. Valige vahekaardil Päring väärtus + Lisa parameeter, lisage järgmised parameetrid ja valige siis Salvesta.

    • Nimi: boilerPartId, kirjeldus : boileri varuosa ID, tüüp: long
    • Nimi: kogus, kirjeldus : kogus, tüüp: täisarv

    Parameetrite lisamine API Management päringu toimingule

  11. Valige Lisa toiming uuesti paanil FrontEnd ja määrake järgmised atribuudid (see toiming määratleb POST-päringud uute reserveeringute loomiseks).

    • Kuvatav nimi: api/Reservations - POST
    • Nimi: api-reservations-post
    • URL: POST api/Reservations
  12. Vahekaardil Päring lisage järgmised parameetrid ja valige siis Salvesta.

    • Nimi: boilerPartId, kirjeldus: boileri varuosa ID, tüüp: long
    • Nimi: engineerId, kirjeldus: inseneri ID, tüüp: string
    • Nimi: quantityToReserve, kirjeldus: reserveeritav kogus, tüüp: täisarv
  13. Valige vahekaardil Redaktsioonid uus versioon. Valige selle versiooni kolmikpunkti menüüs käsk Tee praeguseks.

    Määrake redaktsiooni praegune versioon

  14. Valige dialoogis Loo praegune redaktsioon suvand Salvesta.

  15. Avage oma veebibrauseris mõni muu leht ja minge URL-le https://<APIM name>.azure-api.net/api/boilerparts/1/reserved, kus on teie API-teenuse nimi <APIM name>. Veenduge, et saaksite järgmisega sarnase vastuse.

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

Värskendatud veebi API on nüüd saadaval. Teoreetiliselt võiks Kiana luua uuendatud veebiliidese jaoks uue kohandatud konnektori ja lisada selle rakendusse. Rakendus saaks seejärel rakendada oma loogikat, et teha kindlaks, mitu konkreetset toodet on hetkel laos, mitu on reserveeritud, võrrelda tulemusi vajalike üksuste arvuga, vajadusel tellida rohkem varusid või reserveerida üksusi olemasolevast inventuurist. Sellist loogikat saab Azure'i loogikarakenduses siiski paremini rakendada. Power Apps võib kutsuda loogikarakendust kohandatud konnektori kaudu, kui tehnikud soovivad varuosa reserveerida või tellida.

Loogikarakenduse loomiseks kasutab Kiana järgmisi samme.

Märkus

Asjade lihtsuse huvides pole selles näites loodud loogikarakendus tehinguteta. Võimalik, et detaili saadavuse kontrollimise ja broneerimise vahel võib samaaegne kasutaja teha vastuolulise reservatsiooni. Tehingusemantikat saab rakendada, asendades selle loogikarakenduse osa loogikast InventoryDB andmebaasis salvestatud protseduuriga.

  1. Azure'i portaalis Avalehel valige suvand + Ressursi loomine.

  2. Sisestage tekstiväljale Turuplatsi otsing Loogikarakendus ja seejärel valige sisestusklahv Enter.

  3. Valige Loogikarakendus lehel käsk Loo.

    Näidisrakenduse loomine

  4. Sisestage lehel Loo loogikarakendus järgmised väärtused ja seejärel valige Ülevaatus + loomine.

    • Kordustellimus: valige oma Azure kordustellimus
    • Ressursigrupp: webapi_rg
    • Loogikarakenduse nimi: FieldEngineerPartsOrdering
    • Piirkond: valige sama koht, mida kasutasite veebi API-s
    • Seosta integratsiooniteenus keskkonnaga: jätke tühjaks
    • Luba logianalüütika: jätke tühjaks
  5. Valige verifitseerimislehel Loo ja oodake, kuni loogikarakendus on juurutatud.

  6. Kui juurutamine on lõpetatud, valige suvand Mine ressursile.

  7. Liikuge lehel Loogikarakenduste kujundaja allapoole jaotiseni Mallid ja valige Tühi loogikarakendus.

    Valige tühja loogikarakenduse mall

  8. Valige vahekaardi Kõik tekstiväljal Otsingu konnektorid ja käivitajad valik Päring.

    Valige päringu käivitaja

  9. Valige vahekaardil Käivitajad Kui HTTP-päringu on saadaval.

    Käivita HTTP-taotlus kättesaamisel

  10. Sisestage tekstiväljale Päringu keha JSON-i skeem järgmine skeem ja seejärel valige + Uus etapp.

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

    Loogikarakenduse päringu skeem

    See skeem määratleb loogikarakenduses loodava HTTP-päringu sisu. Päringu keha koosneb boileri varuosa ID-st, päringut esitada vajatavate üksuste arvust ja inseneri ID-st, kes päringu tegi. Rakendus saadab selle taotluse siis, kui tehnik soovib varuosa reserveerida.

  11. Valige väljal Toimingu valimine väärtus Kõik ja seejärel HTTP.

    HTTP-toimingu suvandi valimine

    Loogikarakendus kutsub Web API BoilerParts{id} toimingut, et tuua teavet rakenduse taotluses esitatud boileri varuosa kohta.

  12. Valige paanil Toimingud HTTP-toiming.

    Valige HTTP-toimingu valik

  13. Valige HTTP-toimingu kastis kolmikpunkti menüü käsk Nimeta ümber ja muutke toimingu nimeks CheckBoilerPart.

    HTTP-toimingu ümbernimetamine

  14. Seadke HTTP-toimingu atribuudid järgmiselt ja valige siis + Uus samm.

    • Meetod: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/, kus <APIM name>_ on teie API Management teenuse nimi. Valige selle URI tekstiväljal _ Dünaamiline sisu vahekaardil Dünaamiline sisu suvand boilerPartId

    HTTP-toimingu jaoks dünaamilise sisu määramine

  15. Sisestage tekstiväljadele Toimingu valimine ja Otsingu konnektorid ja toimingud JSON-i parsimine ja seejärel valige toiming Parsi JSON.

    Valige Parsi JSON toiming

  16. Kasutage toimingu Parsi JSON kolmikpunkti menüüd, nimetage toiming ümber nimeks ParseBoilerPart.

  17. Toimingu ParseBoilerPart tekstiväljas Sisu tekstiväljal Dünaamiline sisu valige Keha. Sisestage tekstiväljale Skeem järgmine JSON-skeem ja seejärel valige + Uus etapp.

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

    BoilerPart objekti parsimine

    See toiming parsib vastuse sõnumit, mis tagastatakse päringust getBoilerParts/{id}. Vastus sisaldab boileri varuosa üksikasju ja praegu laos olevat arvu.

  18. Valige uue sammu Toimingu valimise tekstiväljas HTTP konnektor.

  19. Valige vahekaardil Toimingud HTTP-toiming.

  20. Kasutage toimingu kolmikpunkti menüüd, nimetage toiming ümber nimeks CheckReservations.

  21. Seadke toimingu järgmised atribuudid ja valige siis + Uus samm.

    • Meetod: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/. Nagu varem, valige selle URI dünaamilise sisu väljal vahekaardil Dünaamiline sisu väärtus boilerPartId. Lisage väljale URI tekst /reserved pärast boilerPartId kohatäidet

    CheckReservations samm

  22. Sisestage uus toimingu tekstiväljadele Toimingu valimine ja Otsingu konnektorid ja toimingud JSON-i parsimine ja seejärel valige toiming Parsi JSON.

  23. Nimetage toiming ümber väärtuseks ParseReservations.

  24. Seadke atribuudi Sisu väärtuseks Keha.

  25. Sisestage järgmine skeem ja valige siis + Uus samm.

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

    Reserveeringute andmete parsimine

  26. Sisestage uus toimingu tekstiväljadele Toimingu valimine ja Otsingu konnektorid ja toimingud Tingimus ja seejärel valige toiming Tingimuse juhtelement.

    Valige juhtelement Tingimus

  27. Nimetage toiming ümber väärtuseks CompareStock.

  28. Märkige tekstiväli Vali väärtus. Sisestage väljale Dünaamilise sisu lisamine vahekaardil Avaldis järgmine avaldis ja seejärel valige OK.

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

    See avaldis arvutab kindlaksmääratud boileri varuosa praegu reserveeritud üksuste arvu ja tehniku soovitud arvu summa.

    Tingimus CompareStock

  29. Valige tingimuse ripploendiboksis väärtus on suurem, kui.

  30. Valige ülejäänud tekstiväljadel Vali väärtus ja Dünaamiline sisu vahekaardi Dünaamiline sisu jaotises ParseBoilerPart väärtus numberInStock.

    Võrrelge kogu broneeringut laos olevate üksuste arvuga

  31. Kui nõutav üksuste arv ja reserveeritud number on suuremad kui laos, peab rakendus esitama tellimuse varude täiendamiseks. Valige toimingu CompareStock haru Tõene suvand Lisa toiming.

  32. Uue toimingu vahekaardil Kõik valige HTTP ja seejärel valige toiming HTTP.

  33. Nimetage toiming ümber väärtuseks PostOrder.

  34. Seadke toimingu PostOrder jaoks järgmised atribuudid.

    • Meetod: POST
    • URI: https://<APIM name>.azure-api.net/api/orders
    • Sisestage tabeli Päringud esimesse ritta võti boilerPartId. Valige tekstivälja Lisa dünaamiline sisu väärtuseks vahekaardil Dünaamiline sisu boilerPartId
    • Sisestage tabeli Päringud teise ritta võti kogus. Sisestage väärtusväljale 50.

    Lisage päring täiendavate varuosade tellimiseks

    Loogikarakendus tellib määratud varuosast automaatselt 50 üksust, kui aktsiaid käitatakse.

    Märkus

    Loogikarakendus eeldab, et tehnik ei ürita tegelikult ühe taotlusega reserveerida rohkem kui 50 määratud varuosa eset!

  35. Jätke toimingu CompareStock haru Väär tühjaks.

  36. Toimingu CompareStock all valige + Uus samm.

  37. Uue toimingu vahekaardil Kõik valige HTTP ja seejärel valige toiming HTTP.

  38. Nimetage toiming ümber väärtuseks PostReservation.

  39. Seadke toimingu PostReservation jaoks järgmised atribuudid.

    • Meetod: POST
    • URI: https://<APIM name>.azure-api.net/api/reservations.
    • Sisestage tabeli Päringud esimesse ritta võti boilerPartId. Valige tekstivälja Lisa dünaamiline sisu väärtuseks vahekaardil Dünaamiline sisu boilerPartId.
    • Sisestage teisele reale võti engineerId. Valige tekstivälja Lisa dünaamiline sisu väärtuseks vahekaardil Dünaamiline sisu engineerId.
    • Sisestage kolmandale reale võti quantityToReserve. Valige tekstivälja Lisa dünaamiline sisu väärtuseks vahekaardil Dünaamiline sisu numberToReserve.
  40. Valige suvand + Uus etapp. Otsige ja valige väljal Toimingu valimine toiming Vastus.

  41. Määrake toimingule Vastus järgmised atribuudid.

    • Olekukood: 200
    • Päised: võti – sisutüüp, väärtus – application/json
    • Keha: valige dünaamilise sisu väljal element Keha päringust PostReservation. See on keha, mis tagastati broneeringu tegemisel.

    Loogikarakenduse saadetud vastuse sõnum

  42. Klõpsake lehe Loogikarakenduste kujundaja vasakus ülanurgas käsku Salvesta. Veenduge, et loogikarakenduse saab tõrgeteta salvestada.

Kohandatud konnektori loomiseks, mida Power Apps saab kasutada loogikarakenduse käivitamiseks, teeb Kiana Azure'i portaalis järgmised toimingud.

  1. Valige loogikarakenduse lehel Ülevaade väärtus Ekspordi.

    Loogikarakenduse eksportimine

  2. Paanil Ekspordi rakendusse Power Apps pange konnektori nimeks PartsOrderingConnector, valige Power Apps keskkond ja seejärel valige OK.

    Loogikarakenduse eksportimine rakendusse Power Apps

  3. Logige sisse rakendusse Power Apps.

  4. Valige oma keskkonnas jaotises Andmed väärtus Kohandatud konnektorid ja kontrollige, kas loendis PartsOrderingConnector on kirjas.

    Power Apps kohandatud konnektorid

Maria saab nüüd VanArsdeli rakendust muuta, et võimaldada tehnikul klientide piirkondades käies varuosi tellida. Ta lisab kuvale PartDetails nupu Tellimus järgmiselt.

  1. Logige sisse Power Apps (kui te pole veel sisse loginud).

  2. Valige jaotises Rakendused rakendus VanArsdelApp. Valige rakenduse kolmikmenüüs käsk Redigeeri.

  3. Valige andme paanil Lisa andmed, otsige konnektor PartsOrderingConnector ja lisage selle konnektori abil uus ühendus.

    Rakendusse PartsOrdering konnektori lisamine

  4. Laiendage puuvaate paanil kuva PartDetails ja laiendage vormi DetailForm1.

  5. Parempoolsel paanil Atribuudid valige Väljade redigeerimine. Valige paanil Väljad kolmikpunkti menüü käsk Lisa kohandatud kaart.

    Rakendusse kohandatud andmekaardi juhtelemendi lisamine

  6. Nimetage puuvaate paanil uus kaart vana nimega DataCard1 ümber ReserveCard. Muutke kujundusvaate aknas kaardi suurust nii, et see hõivaks ekraani alumise osa, juhtelemendi Image_DataCard1 all.

    Andmekaardi juhtelemendi ümbernimetamine ja selle suuruse muutmine

  7. Lisage menüü Lisa alammenüüst Sisend juhtelement Tekstisisend, juhtelement Nupp ja juhtelement Silt juhtelemendile ReserveCard.

  8. Muutke juhtelementide suurust ja paigutage need nii, et need muudaks ja saadetaks nii, et nupu juhtelement asub tekstisisendi juhtelemendist paremal ja nupu juhtelemendi all olev silt.

  9. Tekstisisendi juhtelementi paanil Atribuudid tühjendage atribuut Vaikimisi.

  10. Nupu juhtelementi paanil Atribuudid määrake atribuudi Tekst väärtuseks Reserveeri.

    Kuva PartDetails paigutus

  11. Pange tekstisisendi juhtelemendile uueks nimeks NumberToReserve, pange nupu juhtelemendile nimeks Reserveeri ja nimega juhtelement Silt ümber väärtuseks Sõnum.

  12. Seadke paanil Atribuudid juhtelemendi Sõnum atribuudi Tekst väärtuseks Reserveeritud varuosad ja määrake atribuudi Nähtav väärtuseks MessageIsVisible.

    Märkus

    MessageIsVisible on muutuja, mille lähtestatakse ekraani kuvamisel väärtusele väär, kuid see muutub tõeseks, kui kasutaja valib nupu Reserveeri.

  13. Määrake Reserveeri nupu atribuudi OnSelect valemiks järgnev.

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

    Märkus

    Selles valemis kasutatakse rakendust parajasti töötava tehniku ​​esindamiseks käsitsi sisestatud tehniku ID-d. 8. peatükis kirjeldatakse sisselogitud kasutaja ID hankimist.

    Lisaks ei tee rakendus vigade kontrollimist. Eeldatakse, et varuosade reserveerimise päring õnnestub alati. Lisateavet tõrkekäsitluse kohta leiate jaotisest Power Apps tõrkefunktsioonid.

  14. Seadke atribuudi OnVisible kuva PartDetails väärtuseks Set(MessageIsVisible, false).

Rakenduse testimiseks tehke järgmist.

  1. Valige paanil Puuvaade kuva Avaleht.

  2. Rakenduse eelvaateks vajutage F5.

  3. Valige Avakuval suvand Varuosad.

  4. Valige sirvimiskuval soovitud varuosa.

  5. Liikuge kuval Varuosa üksikasjad allapoole reserveeringute jaotiseni, sisestage täisarvuline väärtus ja seejärel valige suvand Reserveeri. Veenduge, et kuvatakse teade Reserveeritud varuosad.

    Kuva PartDetails, kus on lubatud funktsioon Reserveeri

  6. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

  7. Minge Azure'i portaali InventoryDB SQL-andmebaasi lehele.

  8. Valige Päringuredaktor ja logige oma parooliga sisse kasutajanimega sqladmin.

  9. Sisestage paanil Päring 1 järgmine päring ja seejärel valige Käivita. Veenduge, et kuvatakse VanArsdel rakenduse reserveering.

    SELECT * FROM [dbo].[Reservations]
    

    Päringu tulemuseks on SQL-i andmebaas