Bab 7: Menambahkan kefungsian pada aplikasi

Kiana dan Maria teruja untuk menunjukkan aplikasi pengurusan inventori kepada Caleb, juruteknik lapangan. Caleb menyukainya, tetapi mencadangkan menambah beberapa fungsi antara muka pengguna tambahan untuk menjadikannya lebih mudah digunakan. Secara khusus, Caleb mahukan aplikasi yang dapat:

• Tambahkan gambar kerja yang dilakukan pada dandang atau unit penghawa dingin, dan tambahkannya pada butiran janji temu pada skrin Edit Janji Temu. Imej ini berguna sebagai bukti dokumentari tentang pembaikan yang dilaksanakan. Skrin Edit Janji Temu pada masa ini membolehkan pengguna menambah imej pada janji temu, tetapi imej tidak disimpan kerana ciri ini belum dilaksanakan sepenuhnya. Sebab peninggalan ini adalah kerana Kiana dan Preeti perlu menentukan tempat terbaik untuk menyimpan data imej. Caleb mahu kefungsian ini ditambah secepat mungkin.

• Lihat sejarah janji temu lengkap untuk pelanggan bagi menjejaki pembaikan yang diminta dan memantau sebarang isu sedang berlaku yang mungkin memerlukan juruteknik dipanggil berulang kali.

• Pesan bahagian daripada skrin Butiran Bahagian .

Selain itu, kawalan imej pada skrin Butiran Bahagian memaparkan imej yang disimpan pada URL yang ditentukan. Pada masa ini, URL dalam data hanyalah ruang letak. Seperti gambar untuk skrin janji temu, Kiana dan Preeti perlu menentukan tempat terbaik untuk menyimpan imej supaya ia tersedia untuk aplikasi.

Menambahkan gambar pada janji temu

Gambar perlu disimpan di tempat yang boleh diakses oleh aplikasi. Atas sebab prestasi dan keselamatan, Preeti tidak mahu gambar disimpan dalam OneDrive atau dalam Pangkalan Data SQL Azure. Sebaliknya, mereka memutuskan untuk menggunakan Azure Blob Storage. Storan Blob dioptimumkan untuk memegang objek perduaan yang besar dan teguh, dengan keselamatan terbina dalam. Power Apps mempunyai penyambung yang membenarkan akses kepada Storan Blob. Maria mencadangkan untuk menambah skrin pengambilan gambar baharu, bagi meningkatkan pengalaman pengguna Caleb.

Maklumat lanjut: Azure Blob Storage

Preeti mencipta akaun Storan Blob daripada portal Azure dengan mengikut langkah ini:

1. Dalam portal Microsoft Azure, padahalaman Utama , pilih + Cipta sumber . Dalam kotak Cari Pasaran , masukkan akaun Storan, dan kemudian pilih Enter.

   

2. Pada halaman akaun storan , pilih Cipta.

3. Pada halaman Cipta akaun storan, masukkan butiran berikut, dan kemudian pilih Semak + cipta:

   • Langganan: Pilih langganan anda
   • Kumpulan sumber: webapi_rg
   • Nama akaun storan: Berikan nama unik sejagat dan buat nota untuk kemudian
   • Lokasi: Pilih lokasi terdekat anda
   • Prestasi: Standard
   • Jenis akaun: BlobStorage
   • Replikasi: RA-GRS

   

4. Pada halaman pengesahan, pilih Cipta dan tunggu akaun storan diperuntukkan.

5. Pergi ke halaman untuk akaun storan baharu.

6. Pada halaman Gambaran Keseluruhan , pilih Bekas.

   

7. Pada halaman Bekas , pilih + Bekas. Cipta bekas baharu bernama foto, dan kemudian pilih Cipta. Tukar tahap akses awam kepada Blob.

   

8. Kembali pada halaman Gambaran Keseluruhan untuk akaun storan, di bawah tetapan, pilih Kunci akses. Pada halaman Kekunci Akses, pilih Tunjukkan kekunci. Catat nilai kunci untuk kunci1.

   

Preeti memberikan nama dan kunci akaun storan kepada Kiana, yang menggunakan maklumat ini untuk mencipta penyambung tersuai bagi aplikasi dengan mengikut langkah ini:

1. Log masuk ke. Power Apps

2. Pada anak tetingkap kiri, kembangkan Data dan pilih Sambungan. Sambungan sedia ada yang digunakan oleh aplikasi hendaklah disenaraikan. Pilih + Sambungan baharu.

   

3. Pada halaman Sambungan baharu, tatal ke bawah, pilih Sambungan, pilih Azure Blob Storage, dan kemudian pilih Cipta.

   

4. Dalam dialog Azure Blob Storage , masukkan nama akaun storan dan kunci capaian yang disediakan oleh Preeti dan kemudian pilih Cipta.

   

5. Tunggu sementara sambungan baharu dicipta. Ia sepatutnya kelihatan pada senarai sambungan.

Maria boleh menggunakan sambungan ini pada Storan Blob dalam aplikasi untuk menyimpan dan mendapatkan kembali imej fotografi. Tugas pertama Maria ialah menambah sambungan ke apl dengan mengikuti langkah berikut:

1. Buka apl VanArsdelApp untuk mengedit. Power Apps Studio

2. Pada anak tetingkap Data , pilih Tambah data, cari penyambung Azure Blob Storage dan kemudian pilih penyambung.

   

3. Dalam dialog Azure Blob Storage , pilih penyambung Azure Blob Storage untuk menambahkannya pada aplikasi anda.

   

Tugas Maria yang seterusnya ialah menambah skrin yang membolehkan juruteknik atau jurutera untuk menyimpan gambar. Maria memutuskan untuk menambah skrin baharu dengan Kawalan gambar. Apabila aplikasi berjalan pada peranti mudah alih, kawalan ini boleh mengintegrasikan kamera untuk membolehkan juruteknik mengambil gambar. Pada peranti lain, kawalan ini menggesa pengguna untuk memuat naik fail imej. Maria menambah pautan pada skrin baharu ini daripada skrin EditAppointment dengan mengikuti langkah berikut:

1. Pada menu Selitkan, pilih Skrin baharu dan kemudian pilihtemplat Boleh tatal.

   

2. Pada anak tetingkap Paparan pokok, pilih skrin baharu dan namakan semula sebagai TakePhoto.

3. Tukar sifat Teks kawalan LblAppNameX pada skrin ini untuk Mengambil gambar.

4. Padamkan kawalan KanvasX daripada skrin.

5. Dalam menu Sisipkan , daripada senarai juntai bawah Media , pilih Tambah gambar untuk mencipta kawalan gambar baharu.

   

   Nota

   Kawalan gambar sebenarnya merupakan komponen tersuai komposit yang membolehkan pengguna menambahkan gambar pada skrin dan memaparkan hasil.

6. Saiz semula dan posisikan semula kawalan gambar untuk memenuhi paparan skrin.

7. Pada anak tetingkap pandangan Pokok, pilih kawalan IconBackarrowX pada skrin AppointmentDetails , dan kemudian pilih Salin.

   

8. Pada menu Paparan pokok, klik kanan skrin TakePhoto , dan kemudian pilih Tampal. Kawalan IconBackArrowX akan ditambahkan pada skrin.

   

9. Gerakkan kawalan IconBackArrowX ke bahagian atas sebelah kiri bar pengepala.

10. Pada anak tetingkap pandangan Pokok, pilih kawalan IconBackArrowX pada skrin TakePhoto . Pada anak tetingkap kanan, pada tab Lanjutan , ubah suai sifat tindakan OnSelect kepada Navigate(EditAppointment, ScreenTransition.None).

11. Tambah kawalan Simpan ikon baharu ke bahagian atas sebelah kanan bar pengepala. Tetapkan sifat Visible kawalan ini kepada If(IsBlank(AddMediaButton1.Media), false, true).

    Tetapan ini menjadikan ikon Simpan tidak kelihatan jika pengguna belum memilih imej.

    

12. Tukar formula dalam sifat tindakan OnSelect kawalan Simpan ikon kepada yang berikut.

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

    Gantikan <nama> akaun storan dengan nama akaun storan Azure yang dicipta Preeti.

    Kod ini memuat naik imej ke bekas foto dalam Blob Storage. Setiap imej diberikan nama fail yang unik. Fungsi Patch mengemas kini sifat imageUrl dalam rekod janji temu dengan URL imej dalam Blob Storage.

13. Pada anak tetingkap pandangan pokok, kembangkan kawalan AddMediaWithImageX . Ubah suai sifat Imej kawalan UploadedImageX dan tetapkannya kepada AppointmentImage.

    AppointmentImage ialah pemboleh ubah yang akan diisi dengan imej sama ada yang dimuat naik oleh pengguna atau sebagai hasil daripada mengambil gambar. Anda akan memulakan pembolehubah ini dalam skrin Edit Appointment kemudian.

14. Pada anak tetingkap Tree view , pilih AddMediaButtonX kawalan. Tetapkan UseMobileCamera sifat kawalan ini kepada benar. Tetapkan OnChange sifat tindakan kawalan kepada yang berikut.

    Set(AppointmentImage, AddMediaButton1.Media)
    

    Formula ini menukar pembolehubah AppointmentImage untuk merujuk imej baharu. Kawalan UploadedImageX akan memaparkan imej ini.

15. Pada anak tetingkap Tree view , pilih skrin Edit Appointment .

16. Kembangkan EditFormX kawalan. Di bawah kawalan Image_DataCardX , alih keluar kawalan AddPictureX .

    

17. Pilih ImejX kawalan. Tukar sifat yang berikut:

    • Imej: Induk. Lalai
    • X: 30
    • Y: DataCardKeyX.Y + DataCardKey X .Ketinggian + 150 (di mana DataCardKeyX.Tinggi + 150 (di mana DataCardKey> kad data yang mengandungiImej X kawalan)
    • Lebar: Ibu Bapa. Lebar - 60
    • Tinggi: 400

    Nota

    Kawalan imej akan turun di bawah bahagian bawah skrin, tetapi bar tatal akan ditambah secara automatik untuk membolehkan imej dapat dilihat.

18. Tambahkan ikon Kamera pada kad data kemudian letakkannya di antara label Imej dan ImageX kawalan. Tukar nama kawalan kepada CameraIcon.

    Nota

    Pastikan anda memilih kawalan Ikon Kamera, bukan kawalan Media Kamera.

    

19. Tetapkan OnSelect sifat tindakan kawalan CameraIcon kepada yang berikut.

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

    Apabila pengguna memilih ikon ini, mereka akan pergi ke skrin TakePhoto , tempat mereka boleh mengambil foto atau memuat naik imej. Imej awal yang dipaparkan akan menjadi imej sampel lalai.

Untuk menguji aplikasi, lakukan perkara berikut:

1. Pada anak tetingkap Tree view , pilih skrin Home .

2. Pilih F5 untuk pratonton apl.

3. Pada skrin Laman Utama , pilih Temu janji.

4. Dalam skrin semak imbas, pilih sebarang janji temu.

5. Pada skrin butiran untuk janji temu, pilih ikon edit dalam pengepala skrin.

6. Pada skrin edit, pilih ikon Kamera untuk imej.

7. Sahkan bahawa skrin Ambil foto terpapar.

8. Pilih Tukar Gambar dan muat naik gambar pilihan anda (atau ambil gambar, jika anda menjalankan apl pada peranti mudah alih).

9. Pilih Simpan. Sahkan bahawa imej kelihatan pada halaman butiran dan kemudian pilih ikon tanda untuk menyimpan kembali perubahan pada pangkalan data.

10. Tutup tetingkap pratonton dan kembali ke Power Apps Studio.

Memaparkan imej alat ganti

Setelah menentukan bahawa Storan Blob ialah lokasi yang sesuai untuk menyimpan gambar yang berkaitan dengan janji temu, Preeti dan Kiana memutuskan bahawa mereka harus menggunakan pendekatan yang sama untuk menyimpan imej alat ganti. Manfaat utama pendekatan ini ialah ia tidak memerlukan sebarang pengubahsuaian pada aplikasi. Aplikasi menggunakan semula akaun storan yang sama dan sambungan yang sama. Sebagai langkah pemindahan yang berasingan, mereka boleh melakukan perkara berikut:

1. Cipta bekas Storan Blob baharu.

2. Muat naik imej bahagian pada bekas ini.

3. Tukar ImageUrl rujukan dalam jadual Parts dalam InventoryDB pangkalan data kepada URL setiap imej.

Apl akan mengambil URL baharu untuk setiap imej bahagian secara automatik dan Imej kawalan pada skrin PartDetails akan memaparkan imej.

Menjejaki sejarah janji temu untuk pelanggan

Maria berpendapat bahawa dapat melihat semua sejarah dengan cepat daripada lawatan juruteknik pelanggan yang sebelumnya boleh ditambahkan pada aplikasi dengan mencipta komponen tersuai. Bekerjasama dengan Caleb tentang maklumat yang mereka mahu lihat, Maria melakar reka bentuk ringkas yang merangkumi nota dan tarikh setiap lawatan.

Melihat pada data, Maria percaya bahawa kawalan galeri merupakan cara terbaik untuk memaparkan data jadual pada skrin.

Maria mencipta komponen tersuai seperti berikut:

1. Menggunakan Power Apps Studio, pada anak tetingkap Tree view , pilih Komponen dan kemudian pilih + Komponen baharu.

   

   Komponen kosong baharu bernama Component1 dicipta. Namakan semula komponen sebagai DateHistoryComponent.

   

2. Pada menu Sisipkan , pilih Galeri dan kemudian pilih templat galeri Ketinggian fleksibel kosong .

   

3. Alihkan kawalan galeri dan saiz semula untuk mengisi komponen tersuai.

4. Pilih Tambah item daripada anak tetingkap sisip, kemudian pilih Label teks.

   

5. Pada anak tetingkap Tree view , namakan semula kawalan label sebagai NotesLabel. Tetapkan sifat Limpahan kepada Limpahan.Tatal. Tetapan ini mendayakan kawalan untuk memaparkan beberapa baris teks dan membenarkan pengguna menatal melaluinya. Tetapkan sifat berikut supaya anda boleh menentukan kedudukan dan saiz kawalan:

   • Ketinggian Barisan: 2
   • X: 28
   • Y: 18
   • Lebar: 574
   • Tinggi: 140

6. Tambahkan label teks kedua pada kawalan. Namakan semula kawalan ini sebagai DateLabel dan tetapkan sifat berikut:

   • Ketinggian Barisan: 2
   • X: 28
   • Y: 174
   • Lebar: 574
   • Tinggi: 70

7. Untuk melihat bagaimana kawalan akan kelihatan apabila dimasukkan ke dalam apl dan dipaparkan dengan temanya, pada pandangan pokok tetingkap tetingkap, pilih DateHistoryComponent. Pada anak tetingkap kanan, pada tab Lanjutan , pilih medan Isi dan tukar warna kepada RGBA(0, 0, 0, 1).

   

8. Pada anak tetingkap Sisipkan , kembangkan Bentuk dan tambahkan kawalan Segi empat tepat pada komponen tersuai. Tetapkan sifat berikut untuk kawalan ini:

   • X: 0
   • Y: 273
   • Lebar: Ibu Bapa. Lebar
   • Ketinggian: 2

   Kawalan ini akan bertindak sebagai pemisah antara rekod yang dipaparkan dalam galeri.

   

Maria sudah biasa dengan menambahkan kawalan pada skrin dan membina aplikasi dengan Power Apps. Walau bagaimanapun, komponen boleh guna semula tidak berfungsi dengan cara yang sama. Kiana menerangkan kepada Maria bahawa untuk dapat menggunakan data dalam komponen tersuai, beberapa sifat input tersuai tambahan mesti ditambah. Kiana juga menjelaskan bahawa Maria perlu menyediakan data contoh untuk sifat ini untuk merujuk medan data dalam kawalan dalam komponen, seperti berikut:

1. Pada anak tetingkap Tree view , pilih DateHistoryComponent. Pada anak tetingkap kanan, pada tab Properties , pilih Properti tersuai baharu.

   

2. Dalam dialog Harta tersuai baharu , nyatakan nilai berikut dan kemudian pilih Buat:

   • Nama paparan: Data
   • Nama: Data
   • Penerangan: Jadual janji temu untuk pelanggan, menunjukkan nota dan tarikh
   • Jenis harta: Input
   • Jenis data: Jadual
   • Naikkan OnReset apabila nilai berubah: Biarkan kosong

   

3. Untuk menukar data sampel yang dipaparkan oleh kawalan, pilih sifat tersuai Data yang baharu. Dalam medan formula, masukkan Jadual({Nota: "Teks medan nota contoh.", 'Tarikh Temujanji': Teks(Hari ini())}).

   

4. Pada anak tetingkap Tree view , pilih GaleriX kawalan dalam DateHistoryComponent dan namakan semula sebagai Sejarah Pelantikan.

5. Pada anak tetingkap kanan, pada tab Lanjutan , tetapkan Item sifat AppointmentHistory kawalan galeri kepada 16.

   

6. Pilih NotesLabel kawalan. Pada anak tetingkap kanan pada tab Lanjutan , tukarkan Teks sifat kepada ThisItem.Notes, dan tukar Saizproperti kepada 20.

   Nota

   Sifat Saiz menentukan saiz fon untuk teks yang dipaparkan oleh kawalan.

7. Pilih DateLabel kawalan untuk menukar Teks sifat kepada ThisItem.'Tarikh Janji Temu' dan menukar Saiz kepada 20 . Medan dalam komponen tersuai seharusnya memaparkan data sampel.

   

Komponen tersuai selesai. Maria mencipta skrin baharu untuk memaparkan sejarah janji temu bagi pelanggan dengan menggunakan komponen ini, seperti berikut:

1. Pada anak tetingkap Paparan pokok , pilih tab Skrin .

2. Kembangkan skrin BrowseAppointments , kembangkan kawalan BrowseAppointmentsGallery dan pilih kawalan Body1_1 . Pada menu Sisipkan , pilih Ikon dan kemudian pilih ikon Senarai butiran .

   

3. Tukar nama kawalan ikon kepada ViewAppointments.

4. Pada menu Tree view , pilih kawalan BrowseAppointmentsGallery . Pada anak tetingkap kanan, pada tab Lanjutan , tukarkan TemplateSize sifat kepada 220. Peningkatan sifat ini mengembangkan ruang yang tersedia dalam galeri.

5. Alihkan ikon ViewAppointments ke dalam ruang kosong di bawah nama pelanggan.

   

6. Pilih ViewAppointments kawalan ikon. Setkan sifat tindakan OnSelect kepada formula berikut.

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

   Formula ini mengisi koleksi bernama customerAppointmentsCollection dengan janji temu untuk pelanggan yang dipilih, dan kemudian beralih ke AppointmentHistoryScreen untuk memaparkannya. Anda akan mencipta skrin ini dalam langkah berikut.

7. Pada menu Selitkan, pilih Skrin baharu dan kemudian pilihtemplat Boleh tatal.

   

8. Tukar nama skrin baharu kepada AppointmentHistoryScreen.

9. Padamkan KanvasX kawalan yang telah ditambahkan pada skrin ini.

   

10. Pilih LblAppNameX kawalan pada skrin ini. Pada anak tetingkap kanan, pada tab Lanjutan , tukarkan Teks sifat kepada yang berikut.

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

11. Tetapkan sifat berikut untuk kawalan LblAppNameX untuk melaraskan kedudukan dan saiz:

    • X: 90
    • Y: 0
    • Lebar: 550
    • Tinggi: 140

12. Pilih kawalan RectQuickActionBarX dan tetapkan sifat Height kepada 140.

13. Tambah kawalan ikon Kiri pada pengepala skrin, di sebelah kiri tajuk. Tetapkan sifat tindakan OnSelect untuk kawalan ini kepada Navigate(BrowseAppointments, Transition.None).

    

14. Pada menu Selitkan , pilih Tersuai, dan kemudian pilih DateHistoryComponent.

    

15. Alih dan saiz semula komponen supaya ia memenuhi paparan skrin, di bawah pengepala.

    

16. Tetapkan sifat berikut untuk komponen ini:

    • Data: customerAppointmentsCollection
    • Tarikh Pelantikan: startDateTime
    • Nota: nota

17. Simpan aplikasi.

Untuk menguji aplikasi, lakukan perkara berikut:

1. Pada anak tetingkap Tree view , pilih skrin Home .

2. Pilih F5 untuk pratonton apl.

3. Pada skrin Laman Utama , pilih Temu janji.

4. Dalam skrin penyemak imbas, pilih ikon senarai Butiran untuk sebarang janji temu.

5. Sahkan bahawa skrin Sejarah Janji Temu untuk pelanggan yang dipilih muncul.

6. Tutup tetingkap pratonton dan kembali ke Power Apps Studio.

Memesan alat ganti

Keperluan utama sistem adalah untuk membolehkan juruteknik memesan sebarang alat ganti yang diperlukan semasa melawat pelanggan. Jika alat ganti ada dalam stok, sepatutnya penjadualan lawatan lain boleh dilakukan untuk melengkapkan pembaikan pada tarikh yang sesuai bagi pelanggan. Jika alat ganti tiada stok pada masa ini dan perlu dipesan, juruteknik boleh memberitahu pelanggan. Malik boleh mengaturkan janji temu dengan pelanggan apabila Maria menerima notis yang alat ganti telah tiba di gudang.

Bahagian tempahan apl menggunakan jadual dalam pangkalan data InventoryDB yang ditunjukkan dalam imej berikut. Jadual Pesanan menyimpan maklumat tentang pesanan yang dibuat untuk bahagian. Jadual Tempahan menyenaraikan permintaan tempahan yang telah dibuat oleh juruteknik dan jurutera untuk bahagian. Jadual Jurutera menyediakan nama dan nombor hubungan untuk jurutera yang membuat tempahan, yang memudahkan Maria pengurus inventori untuk bertanya jika perlu.

Untuk menyokong ciri ini, Kiana perlu mengemas kini API Web dengan kaedah yang mengambil bilangan item simpanan untuk alat ganti yang ditentukan, seperti berikut:

1. Buka projek API Web FieldEngineerApi dalam Visual Studio Kod.

2. Tambah fail bernama Order.cs pada folder Model . Tambahkan kod berikut pada fail ini. Kelas Pesanan menjejaki butiran pesanan yang dibuat untuk bahagian.

   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. Tambah satu lagi fail baharu bernama Reservation.cs pada folder Model dan tambah kod berikut pada fail ini. Kelas Tempahan mengandungi maklumat tentang bilangan item untuk bahagian tertentu yang kini dikhaskan untuk pelanggan lain.

   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. Tambah satu lagi fail, bernama InventoryEngineer.cs, pada folder Model , dengan kod berikut. Kelas InventoryEngineer merekodkan jurutera mana yang telah membuat tempahan yang mana.

   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. Buka fail InventoryContext.cs dalam folder Model dan tambah pernyataan berikut pada kelas 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. Dalam tetingkap Terminal dalam Visual Studio Code, jalankan perintah berikut untuk membina pengawal bagi mengendalikan pesanan dan tempahan.

   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. Buka fail BoilerPartController.cs dalam folder Pengawal dan tambahkan kaedah GetTotalReservations berikut pada kelas 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. Edit fail OrdersController.cs dan ubah suai kaedah PostOrder dalam kelas OrdersController seperti yang ditunjukkan oleh yang berikut.

   [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. Edit fail ReservationsController.cs . Ubah suai kaedah PostReservation dalam kelas ReservationsController , seperti berikut.

   [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. Dalam tetingkap Terminal, jalankan perintah berikut bagi membina dan menerbitkan API Web sedia untuk pelaksanaan.

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

11. Dalam Visual Studio Kod, klik kanan pada terbitkan folder, kemudian pilih Deploy to Web App.

Preeti kini boleh mengemas kini perkhidmatan Pengurusan API yang digunakan oleh aplikasi VanArsdel untuk menggambarkan API Web yang dikemas kini. Ini ialah perubahan bukan pemisah; operasi sedia ada akan terus berfungsi, perbezaannya ialah pengawal dan operasi baharu untuk membuat tempahan dan membuat pesanan. Preeti melaksanakan tugas berikut:

Nota

Preeti boleh memilih untuk memadamkan API Jurutera Lapangan sedia ada dan menggantikannya dengan versi baharu, tetapi pendekatan tersebut berisiko memisahkan sebarang aplikasi sedia ada yang mungkin menggunakan API pada masa ini. Amalan yang lebih baik ialah dengan membiarkan API sedia ada dan menambah pengubahsuaian sebagai semakan.

1. Dalam portal Azure, pergi ke perkhidmatan Pengurusan API.

2. Pada halaman perkhidmatan Pengurusan API, pada anak tetingkap kiri di bawah API, pilih API.

3. Pilih API Jurutera Lapangan, pilih menu elipsis, dan kemudian pilih Tambah semakan.

   

4. Dalam dialog Cipta semakan baharu API Jurutera Lapangan, masukkan perihalan Menambah operasi GET dan operasi POST untuk tempahan dan pesanan bahagian, dan kemudian pilih Cipta.

   

5. Pada halaman SEMAKAN 2 , pilih Reka Bentuk.

   

6. Pada halaman Reka bentuk , pilih Tambah operasi. Pada anak tetingkap FrontEnd , setkan sifat berikut, dan kemudian pilih Simpan. Operasi ini digunakan untuk mendapatkan semula bilangan item yang disimpan untuk alat ganti dandang tertentu:

   • Nama paparan: api / BoilerParts /{id} / Dikhaskan
   • Nama: api-boilerparts-id-reserved
   • URL: GETapi/BoilerParts/{id}/Terpelihara

   

7. Pada tab Ujian untuk operasi baharu, tetapkan parameter id kepada nombor bahagian yang sah (contoh dalam imej menggunakan bahagian 1), dan kemudian pilih Hantar.

   

8. Sahkan bahawa ujian berjaya. Operasi perlu dilengkapkan dengan respons HTTP 200 dan isi yang menunjukkan bilangan tempahan untuk produk itu.

   

9. Pada halaman Reka bentuk , pilih Tambah operasi. Pada anak tetingkap FrontEnd , setkan sifat berikut (operasi ini mentakrifkan permintaan POST untuk mencipta pesanan baharu):

   • Nama paparan: api/Pesanan - POST
   • Nama: api-orders-post
   • URL: POSTapi/Pesanan

10. Pada tab Pertanyaan , pilih + Tambah parameter, tambah parameter berikut, dan kemudian pilih Simpan:

    • Nama: boilerPartId , Penerangan: ID** Bahagian Dandang, Jenis:** panjang
    • Nama: kuantiti, Penerangan**: Kuantiti**, Jenis: integer

    

11. Pilih Tambah operasi sekali lagi pada anak tetingkap FrontEnd dan setkan sifat berikut (operasi ini mentakrifkan permintaan POST untuk mencipta tempahan baharu):

    • Nama paparan: api/Tempahan - POST
    • Nama: api-reservations-post
    • URL: POSTapi/Tempahan

12. Pada tab Pertanyaan , tambah parameter berikut, dan kemudian pilih Simpan :

    • Nama: boilerPartId, Penerangan: ID Bahagian Dandang, Jenis: panjang
    • Nama: engineerId, Penerangan: ID Jurutera, Jenis: rentetan
    • Nama: quantityToReserve, Penerangan: Kuantiti untuk ditempah, Jenis: integer

13. Pada tab Semakan , pilih versi baharu. Pada menu elipsis untuk versi ini, pilih Jadikan semasa.

    

14. Dalam dialog Jadikan semakan semasa, pilih Simpan.

15. Buka halaman lain dalam penyemak imbas web anda dan pergi ke nama API URL https://<.azure-api.net/api/boilerparts/1/reserved>di mana nama <APIM ialah nama perkhidmatan API anda.> Sahkan bahawa anda menerima respons yang sama dengan yang berikut.

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

API Web yang dikemas kini boleh didapati sekarang. Secara teori, Kiana boleh mencipta penyambung tersuai baharu untuk API Web yang dikemas kini dan menambahkan pada aplikasi. Aplikasi kemudian boleh melaksanakan logiknya sendiri untuk menentukan bilangan item produk yang ditentukan kini dalam stok, bilangan simpanan, membandingkan keputusan kepada bilangan item yang diperlukan, membuat pesanan untuk lebih stok jika perlu atau menyimpan item daripada stok sedia ada. Walau bagaimanapun, jenis logik ini lebih baik dilaksanakan dalam aplikasi logik Azure. Power Apps boleh memanggil aplikasi logik melalui penyambung tersuai apabila juruteknik ingin menempah atau memesan alat ganti.

Untuk mencipta aplikasi logik, Kiana gunakan langkah berikut:

Nota

Untuk memudahkan proses, aplikasi logik yang dicipta dalam contoh ini adalah bukan transaksi. Ada kemungkinan bahawa antara memeriksa ketersediaan alat ganti dan membuat tempahan, pengguna serentak mungkin membuat tempahan yang bercanggah. Anda boleh melaksanakan semantik transaksi dengan menggantikan beberapa logik dalam apl logik ini dengan prosedur tersimpan dalam pangkalan data InventoryDB .

1. Dalam portal Microsoft Azure, padahalaman Utama , pilih + Cipta sumber .

2. Dalam kotak Cari pasaran , masukkan Apl Logik dan kemudian pilih Enter.

3. Pada halaman Apl Logik, pilih Cipta.

   

4. Pada halaman Cipta aplikasi logik, masukkan nilai berikut dan kemudian pilih Semak + cipta:

   • Langganan: Pilih langganan Azure anda
   • Kumpulan sumber: webapi_rg
   • Nama Apl Logik: FieldEngineerPartsOrdering
   • Rantau: Pilih lokasi sama yang anda gunakan untuk API Web
   • Kaitkan dengan persekitaran perkhidmatan integrasi: Biarkan kosong
   • Dayakan analitis log: Biarkan kosong

5. Pada halaman pengesahan, pilih Cipta dan tunggu sementara aplikasi logik digunakan.

6. Apabila penggunaan selesai, pilih Pergi ke sumber.

7. Pada halaman Pereka Aplikasi Logik, tatal ke bawah ke bahagian Templat dan kemudian pilih Apl Logik Kosong.

   

8. Pada tab Semua , dalam kotak teks Cari penyambung dan pencetus , pilih Permintaan.

    

9. Pada tab Pencetus , pilih Apabila permintaan HTTP diterima.

   

10. Dalam kotak Skema JSON Isi Permintaan, masukkan skema berikut, dan kemudian pilih + Langkah baharu.

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

    

    Skema ini mentakrifkan kandungan permintaan HTTP yang aplikasi logik itu menjangkakan. Isi permintaan merangkumi ID alat ganti dandang, bilangan item untuk disimpan dan ID jurutera yang membuat permintaan. Aplikasi akan menghantar permintaan ini apabila jurutera mahu menempah alat ganti.

11. Dalam kotak Pilih operasi , pilih Semua, dan kemudian pilih HTTP.

    

    Apl logik akan memanggil operasi BoilerParts{id} API Web untuk mendapatkan maklumat tentang bahagian dandang yang disediakan oleh permintaan daripada apl.

12. Pada anak tetingkap Tindakan , pilih tindakan HTTP .

    

13. Dalam kotak tindakan HTTP , pada menu elipsis, pilih Namakan semula dan tukar nama tindakan kepada CheckBoilerPart.

    

14. Tetapkan sifat tindakan HTTP seperti berikut, dan kemudian pilih + Langkah Baru:

    • Kaedah: DAPATKAN
    • URI: https://<Nama> APIM.azure-api.net/api/boilerparts/, di mana <nama> APIM ialah nama perkhidmatan Pengurusan API anda. Dalam kotak Kandungan dinamik untuk URI ini, pada tab Kandungan dinamik, pilih boilerPartId

    

15. Dalam kotak Pilih operasi , dalam kotak Cari penyambung dan tindakan , masukkan Huraikan JSON, dan kemudian pilih tindakan Menghuraikan JSON .

    

16. Menggunakan menu elipsis untuk tindakan Parse JSON , namakan semula tindakan sebagai ParseBoilerPart.

17. Dalam kotak Kandungan untuk tindakan ParseBoilerPart , dalam kotak Kandungan Dinamik, pilih Isi. Dalam kotak Skema , masukkan skema JSON berikut, dan kemudian pilih + Langkah baharu.

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

    

    Tindakan ini menghuraikan mesej respons yang dikembalikan oleh getBoilerParts/{id} request. Respons mengandungi butiran alat ganti dandang, termasuk bilangan dalam stok pada masa ini.

18. Dalam kotak Pilih operasi untuk langkah baharu, pilih penyambung HTTP .

19. Pada tab Tindakan , pilih tindakan HTTP .

20. Menggunakan menu elipsis untuk operasi, namakan semula operasi sebagai CheckReservations.

21. Tetapkan sifat berikut untuk operasi ini, dan kemudian pilih + Langkah baharu:

    • Kaedah: DAPATKAN
    • URI: https://<Nama> APIM.azure-api.net/api/boilerparts/. Seperti sebelum ini, dalam kotak Kandungan dinamik untuk URI ini, pada tab Kandungan dinamik, pilih boilerPartId. Dalam medan URI , tambahkan teks /dikhaskan selepas ruang letak boilerPartId

    

22. Dalam kotak Pilih operasi untuk tindakan baharu, dalam kotak Cari penyambung dan tindakan , masukkan Huraikan JSON, dan kemudian pilih tindakan Penghuraian JSON .

23. Namakan semula operasi sebagai ParseReservations.

24. Tetapkan sifat Kandungan kepada Isi.

25. Masukkan skema berikut, dan kemudian pilih + Langkah baharu.

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

    

26. Dalam kotak Pilih operasi untuk tindakan baharu, dalam kotak Cari penyambung dan tindakan , masukkan Syarat, dan kemudian pilih tindakan Kawalan Keadaan.

    

27. Namakan semula operasi sebagai CompareStock.

28. Pilih kotak Pilih nilai . Dalam kotak Tambah kandungan dinamik, pada tab Ungkapan , masukkan ungkapan berikut dan kemudian pilih OK.

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

    Ungkapan ini mengira jumlah bilangan item alat ganti dandang yang ditentukan yang disimpan pada masa ini dan bilangan yang diminta oleh jurutera.

    

29. Dalam kotak senarai juntai bawah keadaan, pilih adalah lebih besar daripada.

30. Dalam kotak Pilih nilai yang tinggal , dalam kotak Kandungan dinamik, pada tab Kandungan dinamik, di bawah ParseBoilerPart , pilihnumberInStock .

    

31. Jika bilangan item yang diperlukan ditambah dengan bilangan yang disimpan lebih besar daripada bilangan dalam stok, aplikasi perlu membuat pesanan untuk menambah inventori. Dalam cawangan Benar tindakan CompareStock , pilih Tambah tindakan.

32. Pada tab Semua untuk operasi baharu, pilih HTTP dan kemudian pilih tindakan HTTP .

33. Namakan semula operasi sebagai PostOrder.

34. Tetapkan sifat berikut untuk operasi Pasca Pesanan :

    • Kaedah: POST
    • URI: https://<Nama> APIM.azure-api.net/api/orders
    • Dalam jadual Pertanyaan , dalam baris pertama, masukkan kunci boilerPartId. Untuk nilai dalam kotak Tambah kandungan dinamik, pada tab Kandungan dinamik, pilih **boilerPartId **
    • Dalam baris kedua jadual Pertanyaan , masukkan kuantiti kunci. Dalam medan nilai, masukkan 50.

    

    Aplikasi logik akan memesan secara automatik 50 item alat ganti tertentu apabila stok semakin berkurangan.

    Nota

    Aplikasi logik menganggap bahawa jurutera tidak akan benar-benar cuba untuk menyimpan lebih daripada 50 item alat ganti tertentu dalam permintaan tunggal!

35. Biarkan cawangan Palsu tindakan CompareStock kosong.

36. Di bawah tindakan Bandingkan Saham , pilih + Langkah baharu.

37. Pada tab Semua untuk operasi baharu, pilih HTTP dan kemudian pilih tindakan HTTP .

38. Namakan semula operasi sebagai PostReservation.

39. Tetapkan sifat berikut untuk operasi PostReservation :

    • Kaedah: POST
    • URI: https://<Nama> APIM.azure-api.net/api/reservations
    • Dalam jadual Pertanyaan , dalam baris pertama, masukkan kunci boilerPartId. Untuk nilai dalam kotak Tambah kandungan dinamik, pada tab Kandungan dinamik, pilih boilerPartId.
    • Di baris kedua, masukkan jurutera kunciId . Untuk nilai dalam kotak Tambah kandungan dinamik, pada tab Kandungan dinamik, pilih engineerId
    • Di baris ketiga, masukkan kuantiti utamaToReserve . Untuk nilai dalam kotak Tambah kandungan dinamik, pada tab Kandungan dinamik, pilih numberToReserve

40. Pilih + Langkah Baru. Dalam kotak Pilih operasi , cari dan pilih tindakan Respons .

41. Tetapkan sifat berikut untuk tindakan Respons :

    • Kod Status: 200
    • Pengepala: Kunci - jenis-kandungan, Nilai - aplikasi/json
    • Badan: Dalam kotak Kandungan dinamik, pilih elemen Isi daripada permintaan PostReservation . Ini merupakan isi yang dikembalikan apabila tempahan dibuat.

    

42. Di bahagian atas sebelah kiri halaman Pereka Aplikasi Logik, pilih Simpan. Sahkan bahawa aplikasi logik boleh disimpan tanpa sebarang ralat.

Untuk mencipta penyambung tersuai yang Power Apps boleh digunakan untuk mencetuskan aplikasi logik, Kiana melaksanakan langkah berikut semasa masih dalam portal Azure:

1. Pada halaman Gambaran Keseluruhan untuk aplikasi logik, pilih Eksport.

   

2. Dalam anak tetingkap Eksport ke, Power Apps namakan penyambung PartsOrderingConnector, pilih persekitaran anda Power Apps , dan kemudian pilih OK.

   

3. Log masuk ke. Power Apps

4. Dalam persekitaran anda, di bawah Data, pilih Penyambung Tersuai dan sahkan bahawa PartsOrderingConnector disenaraikan.

   

Maria kini boleh mengubah suai aplikasi VanArsdel untuk membolehkan juruteknik memesan alat ganti semasa melawati tapak pelanggan. Maria menambah butang Pesanan pada skrin PartDetails , seperti berikut:

1. Log masuk Power Apps (jika belum log masuk).

2. Di bawah Apl, pilih apl VanArsdelApp . Pada menu elipsis untuk apl, pilih Edit.

3. Pada anak tetingkap Data , pilih Tambah data, cari penyambung PartsOrderingConnector dan tambah sambungan baharu menggunakan penyambung tersebut.

   

4. Pada anak tetingkap pandangan pokok, kembangkan skrin PartDetails , dan kemudian kembangkan borang DetailForm1 .

5. Pada anak tetingkap Sifat di sebelah kanan, pilih Edit medan. Pada anak tetingkap Medan , pada menu elipsis, pilih Tambah kad tersuai.

   

6. Pada anak tetingkap pandangan pokok, namakan semula kad baharu daripada DataCard1 kepada ReserveCard. Dalam tetingkap pandangan Reka bentuk, ubah saiz kad supaya ia menduduki bahagian bawah skrin, di bawah kawalan Image_DataCard1 .

   

7. Pada menu Sisipkan , daripada sub menu Input , tambah kawalan Input Teks , kawalan Butang dan kawalan Label pada kawalan ReserveCard .

8. Ubah saiz dan letakkan kawalan supaya ia bersebelahan, dengan kawalan Butang di sebelah kanan kawalan Input Teks dan Label di bawah kawalan Butang .

9. Pada anak tetingkap Sifat untuk kawalan Input Teks , kosongkan sifat Lalai .

10. Pada anak tetingkap Sifat untuk kawalan Butang , setkan sifat Teks kepada Simpanan .

    

11. Namakan semula kawalan Input Teks sebagai NumberToReserve, namakan semula kawalan Butang sebagai Rizab dan namakan semula kawalan Label sebagai Mesej.

12. Pada anak tetingkap Properties untuk kawalan Mesej , setkan sifat Text kepada Parts Reserved, dan setkan sifat Visible kepada MessageIsVisible.

    Nota

    MessageIsVisible ialah pembolehubah yang anda akan mulakan kepada false apabila skrin dipaparkan, tetapi ia akan ditukar kepada true jika pengguna memilih butang Rizab .

13. Tetapkan sifat OnSelect untuk kawalan butang Rizab kepada formula berikut.

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

    Nota

    Formula ini menggunakan ID jurutera yang berkod keras untuk mewakili juruteknik yang sedang menjalankan aplikasi. Bab 8 menerangkan cara mendapatkan kembali ID untuk pengguna yang mendaftar masuk.

    Selain itu, aplikasi tidak melaksanakan sebarang semakan ralat; ia menganggap bahawa permintaan untuk menyimpan alat ganti sentiasa berjaya. Untuk maklumat lanjut tentang pengendalian ralat, pergi ke Fungsi ralat dalam Power Apps.

14. Tetapkan sifat OnVisible untuk skrin PartDetails kepada Set(MessageIsVisible, false).

Untuk menguji aplikasi, lakukan perkara berikut:

1. Pada anak tetingkap Tree view , pilih skrin Home .

2. Pilih F5 untuk pratonton apl.

3. Pada skrin Laman Utama , pilih Bahagian.

4. Dalam skrin semak imbas, pilih sebarang alat ganti.

5. Pada skrin Butiran Bahagian , tatal ke bawah ke bahagian tempahan, masukkan nilai integer positif dan kemudian pilih Rizab. Sahkan bahawa mesej Bahagian yang dikhaskan muncul.

   

6. Tutup tetingkap pratonton dan kembali ke Power Apps Studio.

7. Dalam portal Microsoft Azure, pergi ke halaman untuk Pangkalan Data SQL InventoryDB .

8. Pilih editor Pertanyaan dan log masuk sebagai sqladmin dengan kata laluan anda.

9. Dalam anak tetingkap Pertanyaan 1 , masukkan pertanyaan berikut dan kemudian pilih Jalankan. Sahkan bahawa tempahan yang anda buat dalam aplikasi VanArsdel kelihatan.

   SELECT * FROM [dbo].[Reservations]
   

   

SebelumnyaSeterusnya