Bagikan melalui

Bab 7: Menambahkan fungsi ke aplikasi

Kiana dan Andhara dengan bangga menunjukkan aplikasi manajemen inventaris kepada Caleb, teknisi lapangan. Caleb menyukainya, tetapi menyarankan untuk menambahkan beberapa fungsi antarmuka pengguna tambahan agar lebih mudah digunakan. Secara khusus, Caleb ingin dapat:

  • Tambahkan foto pekerjaan yang dilakukan pada unit boiler atau pendingin udara, dan tambahkan ke rincian janji temu di layar Edit Janji Temu . Gambar ini mungkin berguna sebagai bukti dokumentasi perbaikan yang dilakukan. Layar Edit Janji Temu saat ini memungkinkan pengguna untuk menambahkan gambar ke janji temu, tetapi gambar tersebut tidak disimpan karena fitur ini belum sepenuhnya diterapkan. Alasan untuk hal ini adalah bahwa Kiana dan Preeti harus menentukan tempat terbaik untuk menyimpan data gambar. Caleb ingin fungsi ini ditambahkan sesegera mungkin.

  • Melihat riwayat janji temu lengkap pelanggan, untuk melacak perbaikan yang diminta dan memantau masalah yang sedang berlangsung yang mungkin mengharuskan teknisi berulang kali dipanggil.

  • Pesan komponen dari layar Rincian Komponen .

Selain itu, kontrol gambar pada layar Rincian Bagian menampilkan gambar yang disimpan di URL tertentu. Saat ini URL dalam data hanya berupa placeholder. Seperti foto-foto untuk layar janji temu, Kiana dan Preeti harus menentukan tempat terbaik untuk menyimpan gambar sehingga tersedia untuk aplikasi.

Menambahkan foto ke janji temu

Foto harus disimpan di suatu tempat yang dapat diakses oleh aplikasi. Untuk alasan performa dan keamanan, Preeti tidak ingin foto foto disimpan di OneDrive atau di Database Azure SQL. Sebaliknya, mereka memutuskan untuk menggunakan Azure Blob Storage. Penyimpanan Blob dioptimalkan untuk menyimpan objek biner besar dan kuat, dengan keamanan built-in. Power Apps memiliki konektor yang memungkinkan akses ke Penyimpanan Blob. Maria menyarankan agar menambahkan layar pengambilan gambar baru, meningkatkan pengalaman pengguna untuk Caleb.

Informasi selengkapnya: Penyimpanan Blob Azure

Preeti membuat akun Penyimpanan Blob dari portal Azure dengan mengikuti langkah-langkah berikut:

  1. Di portal Azure, pada halaman Beranda , pilih + Buat sumber daya. Di kotak Cari di Marketplace , masukkan Akun penyimpanan, lalu pilih Enter.

    Pencarian Azure Marketplace.

  2. Pada halaman Akun penyimpanan , pilih Buat.

  3. Pada halaman Buat akun penyimpanan , masukkan rincian berikut, lalu pilih Tinjau + buat:

    • Langganan: Pilih langganan Anda
    • Grup sumber daya: webapi_rg
    • Nama akun penyimpanan: Berikan nama unik global dan buat catatan untuk nanti
    • Lokasi: Pilih lokasi terdekat Anda
    • Kinerja: Standar
    • Jenis akun: BlobStorage
    • Replikasi: RA-GRS

    Buat Akun Azure Storage.

  4. Pada halaman validasi, pilih Buat dan tunggu akun penyimpanan disediakan.

  5. Buka halaman untuk akun penyimpanan baru.

  6. Pada halaman Ikhtisar , pilih Kontainer.

    Halaman Ikhtisar akun penyimpanan.

  7. Pada halaman Kontainer , pilih + Kontainer. Buat wadah baru bernama foto, lalu pilih Buat. Ubah Tingkat akses publik menjadi Blob.

    Membuat wadah Foto.

  8. Kembali ke halaman Ikhtisar untuk akun penyimpanan, di bawah pengaturan, pilih Kunci akses. Pada halaman Kunci akses , pilih Tampilkan kunci. Catat nilai kunci untuk kunci1.

    Kunci akses akun penyimpanan.

Preeti memberikan nama akun penyimpanan dan kunci untuk Kiana, yang menggunakan informasi ini untuk membuat konektor kustom untuk aplikasi dengan mengikuti langkah-langkah berikut:

  1. Masuk ke Power Apps.

  2. Pada panel kiri, perluas Data, lalu pilih Koneksi. Koneksi yang ada dan digunakan oleh aplikasi seharusnya terdaftar. Pilih + Koneksi baru.

    Halaman koneksi Power Apps.

  3. Pada halaman Koneksi baru , gulir ke bawah, pilih Koneksi, pilih Azure Blob Storage, lalu pilih Buat.

    Pilih konektor Penyimpanan Azure Blob.

  4. Dalam dialog Azure Blob Storage , masukkan nama akun penyimpanan dan kunci akses yang disediakan Preeti, lalu pilih Buat.

    Masukkan kredensial penyimpanan.

  5. Tunggu koneksi baru dibuat. Koneksi seharusnya ditampilkan pada daftar koneksi.

Andhara dapat menggunakan koneksi ini ke Penyimpanan Blob dalam aplikasi untuk menyimpan dan mengambil gambar foto. Tugas pertama Maria adalah menambahkan koneksi ke aplikasi dengan mengikuti langkah-langkah berikut:

  1. Buka aplikasi VanArsdelApp untuk mengedit di Power Apps Studio.

  2. Pada panel Data , pilih Tambahkan data, cari konektor Azure Blob Storage , lalu pilih konektor.

    Mencari konektor Penyimpanan Blob.

  3. Dalam dialog Azure Blob Storage , pilih konektor Azure Blob Storage untuk menambahkannya ke aplikasi Anda.

    Menambahkan koneksi Penyimpanan Blob.

Tugas Andhara berikutnya adalah menambahkan layar yang memungkinkan teknisi atau insinyur menyimpan foto. Andhara memutuskan untuk menambahkan layar baru dengan kontrol Gambar. Bila aplikasi dijalankan pada perangkat bergerak, kontrol ini dapat mengintegrasikan dengan kamera sehingga teknisi dapat mengambil foto. Di perangkat lain, kontrol ini akan meminta pengguna mengunggah file gambar. Maria menambahkan tautan ke layar baru ini dari layar EditAppointment dengan mengikuti langkah-langkah berikut:

  1. Pada menu Sisipkan , pilih Layar baru, lalu pilih templat Yang dapat digulir .

    Layar baru dari template yang dapat di-scroll.

  2. Pada panel Tampilan Pohon , pilih layar baru dan ganti namanya menjadi AmbilFoto.

  3. Ubah properti Teks dari kontrol LblAppNameX di layar ini menjadi Ambil foto.

  4. Hapus kontrol CanvasX dari layar.

  5. Pada menu Sisipkan , dari daftar tarik-turun Media , pilih Tambahkan gambar untuk membuat kontrol gambar baru.

    Tambah kontrol gambar.

    Catatan

    Kontrol gambar sebenarnya adalah komponen kustom gabungan yang memungkinkan pengguna menambahkan gambar ke layar dan menampilkan hasilnya.

  6. Mengubah ukuran dan memposisikan ulang kontrol gambar untuk menduduki badan layar.

  7. Pada panel Tampilan Pohon , pilih kontrol IconBackarrowX di layar AppointmentDetails , lalu pilih Salin.

    Salin kontrol Panah Kembali.

  8. Pada menu Tampilan Pohon , klik kanan layar AmbilFoto , lalu pilih Tempel. Kontrol IconBackArrowX akan ditambahkan ke layar.

    Rekatkan kontrol Panah Kembali di layar TakePhoto.

  9. Pindahkan kontrol IconBackArrowX ke kiri atas bilah header.

  10. Pada panel Tampilan Pohon , pilih kontrol IconBackArrowX di layar AmbilFoto . Pada panel kanan, pada tab Lanjutan , ubah properti tindakan OnSelect menjadi Navigate(EditAppointment, ScreenTransition.None).

  11. Tambahkan kontrol ikon Simpan baru di kanan atas bilah header. Tetapkan properti Visible dari kontrol ini ke If(IsBlank(AddMediaButton1.Media), false, true).

    Pengaturan ini membuat ikon Simpan tidak terlihat jika pengguna belum memilih gambar.

    Tambahkan Kontrol ikon Simpan.

  12. Ubah rumus dalam properti tindakan OnSelect dari kontrol ikon Simpan ke 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);

    Ganti <nama akun penyimpanan> dengan nama akun penyimpanan Azure yang dibuat Preeti.

    Kode ini mengunggah gambar ke wadah foto di Blob Storage. Setiap gambar diberi nama file unik. Fungsi Patch memperbarui properti imageUrl dalam rekaman janji temu dengan URL gambar dalam Blob Storage.

  13. Pada panel Tampilan Pohon , perluas kontrol AddMediaWithImageX . Ubah properti Image dari kontrol UploadedImageX , dan atur ke AppointmentImage.

    AppointmentImage adalah variabel yang akan diisi dengan gambar yang diunggah oleh pengguna, atau sebagai hasil pengambilan foto. Anda akan menginisialisasi variabel ini di layar EditAppointment nanti.

  14. Pada panel Tampilan Pohon , pilih kontrol AddMediaButtonX . Tetapkan properti UseMobileCamera dari kontrol ini ke true. Tetapkan properti tindakan OnChange dari kontrol ke yang berikut.

    Set(AppointmentImage, AddMediaButton1.Media)

    Rumus ini mengubah variabel AppointmentImage untuk mereferensikan gambar baru. Kontrol UploadedImageX akan menampilkan gambar ini.

  15. Pada panel Tampilan Pohon , pilih layar Edit Janji Temu .

  16. Perluas kontrol EditFormX . Di bawah kontrol Image_DataCardX , hapus kontrol AddPictureX .

    Hilangkan kontrol AddPicture.

  17. Pilih kontrol ImageX . Ubah properti berikut:

    • Gambar: Induk.Default
    • X: 30
    • Y: DataCardKeyX.Y + DataCardKeyX.Height + 150 (di mana DataCardKeyX adalah kartu data yang berisi kontrol ImageX )
    • Lebar: Induk.Lebar - 60
    • Tinggi: 400

    Catatan

    Kontrol gambar akan menurun di bawah bagian bawah layar, namun panel gulir akan ditambahkan secara otomatis untuk mengaktifkan tampilan gambar.

  18. Tambahkan ikon Kamera ke kartu data lalu posisikan di antara label Gambar dan kontrol GambarX . Ubah nama kontrol menjadi CameraIcon.

    Catatan

    Pastikan Anda memilih kontrol Ikon Kamera, bukan kontrol Media Kamera.

    Tambah Ikon Kamera.

  19. Tetapkan properti tindakan OnSelect dari kontrol CameraIcon ke yang berikut.

    Set(AppointmentImage, SampleImage);

Navigate(TakePhoto, ScreenTransition.None);

    Saat pengguna memilih ikon ini, mereka akan masuk ke layar TakePhoto , tempat mereka dapat mengambil foto atau mengunggah gambar. Gambar awal yang ditampilkan akan menjadi gambar sampel default.

Untuk menguji aplikasi, lakukan langkah berikut;

  1. Pada panel Tampilan Pohon , pilih layar Beranda .

  2. Pilih F5 untuk melihat pratinjau aplikasi.

  3. Pada layar Beranda , pilih Janji Temu.

  4. Di layar telusur, pilih janji temu.

  5. Pada layar rincian untuk janji temu, pilih ikon edit di header layar.

  6. Pada layar edit, pilih ikon Kamera untuk gambar.

  7. Pastikan layar Ambil foto muncul.

  8. Pilih Ubah Gambar dan unggah gambar pilihan Anda (atau ambil foto, jika Anda menjalankan aplikasi di perangkat seluler).

  9. Pilih Simpan. Pastikan gambar muncul pada halaman rincian, lalu pilih ikon centang untuk menyimpan perubahan kembali ke database.

  10. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

Menampilkan gambar suku cadang

Setelah menetapkan bahwa Penyimpanan Blob adalah lokasi yang ideal untuk menyimpan gambar yang terkait dengan janji temu, Preeti dan Kiana memutuskan bahwa mereka harus menggunakan pendekatan yang sama untuk menyimpan gambar suku cadang. Keuntungan utama dari pendekatan ini adalah tidak memerlukan modifikasi aplikasi. Aplikasi menggunakan kembali akun penyimpanan yang sama dan koneksi yang sama. Sebagai migrasi terpisah, mereka dapat melakukan langkah berikut:

  1. Membuat wadah Penyimpanan Blob baru.

  2. Mengunggah gambar suku cadang ke wadah ini.

  3. Ubah referensi ImageUrl dalam tabel Parts di database InventoryDB ke URL setiap gambar.

Aplikasi akan mengambil URL baru untuk setiap gambar komponen secara otomatis, dan kontrol Image pada layar PartDetails akan menampilkan gambar tersebut.

Melacak riwayat janji temu untuk pelanggan

Andhara berpikir bahwa dapat dengan cepat melihat semua riwayat dari kunjungan teknisi pelanggan sebelumnya dapat ditambahkan ke aplikasi dengan membuat komponen kustom. Bekerja dengan Caleb pada informasi yang ingin mereka lihat, Andhara membuat desain sederhana yang terdiri dari catatan dan tanggal setiap kunjungan.

Data untuk riwayat janji temu pelanggan.

Melihat data, Andhara yakin bahwa kontrol galeri adalah cara terbaik untuk menampilkan data tabel pada layar.

Andhara membuat komponen kustom sebagai berikut:

  1. Dengan menggunakan Power Apps Studio, pada panel Tampilan Pohon , pilih Komponen, lalu pilih + Komponen baru.

    Membuat komponen baru.

    Komponen kosong baru bernama Komponen1 dibuat. Ganti nama komponen menjadi DateHistoryComponent.

    Ubah nama komponen.

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

    Tambah kontrol Galeri.

  3. Pindahkan kontrol galeri dan ubah ukurannya untuk mengisi komponen kustom.

  4. Pilih Tambahkan item dari panel sisipan, lalu pilih Label teks.

    Tambahkan label teks ke komponen.

  5. Pada panel Tampilan Pohon , ganti nama kontrol label menjadi NotesLabel. Tetapkan properti Overflow ke Overflow.Scroll. Pengaturan ini memungkinkan kontrol untuk menampilkan beberapa baris teks dan memungkinkan pengguna menggulirnya. Atur properti berikut agar Anda mengubah posisi dan ukuran kontrol:

    • Tinggi Garis: 2
    • X: 28
    • T: 18
    • Lebar: 574
    • Tinggi: 140

  6. Tambahkan label teks kedua ke kontrol. Ganti nama kontrol ini menjadi DateLabel, dan tetapkan properti berikut:

    • Tinggi Baris: 2
    • X: 28
    • Anda: 174
    • Lebar: 574
    • Tinggi: 70

  7. Untuk melihat bagaimana kontrol akan tampak saat dimasukkan ke dalam aplikasi dan ditampilkan dengan temanya, pada panel Tampilan pohon , pilih DateHistoryComponent. Pada panel kanan, pada tab Lanjutan , pilih bidang Isi dan ubah warnanya menjadi RGBA(0, 0, 0, 1).

    Lihat komponen.

  8. Pada panel Sisipkan , perluas Bentuk, dan tambahkan kontrol Persegi Panjang ke komponen kustom. Atur properti berikut untuk kontrol ini:

    • X: 0
    • Anda: 273
    • Lebar: Induk.Lebar
    • Tinggi: 2

    Kontrol ini berfungsi sebagai pemisah antara rekaman yang ditampilkan di galeri.

    Tambah kontrol persegi panjang.

Andhara terbiasa dengan menambahkan kontrol ke layar dan membangun aplikasi dengan Power Apps. Namun, komponen yang dapat digunakan kembali tidak berfungsi dengan cara yang sama. Kiana menjelaskan kepada Maria bahwa untuk dapat menggunakan data dalam komponen kustom, beberapa properti input kustom tambahan harus ditambahkan. Kiana juga menjelaskan bahwa Maria perlu memberikan contoh data untuk properti ini untuk merujuk ke bidang data dalam kontrol di komponen, sebagai berikut:

  1. Pada panel Tampilan Pohon , pilih KomponenRiwayatTanggal. Pada panel kanan, pada tab Properti , pilih Properti kustom baru.

    Properti kustom baru.

  2. Dalam dialog Properti kustom baru , tentukan nilai berikut, lalu pilih Buat:

    • Nama tampilan: Data
    • Nama: Data
    • Deskripsi: Tabel janji temu untuk pelanggan, menunjukkan catatan dan tanggal
    • Tipe properti: Input
    • Tipe data: Tabel
    • Naikkan OnReset bila nilai berubah: Kosongkan

    Properti kustom baru.

  3. Untuk mengubah data sampel yang ditampilkan oleh kontrol, pilih properti kustom Data yang baru. Di bidang rumus, masukkan Tabel({Catatan: "Contoh teks bidang catatan.", 'Tanggal Janji Temu': Teks(Hari Ini())}).

    Ubah data sampel.

  4. Pada panel Tree view , pilih kontrol GalleryX di DateHistoryComponent, dan ganti namanya menjadi AppointmentHistory.

  5. Pada panel kanan, pada tab Lanjutan , atur properti Items dari kontrol galeri AppointmentHistory ke Parents.Data.

    Perbarui properti Item untuk kontrol galeri.

  6. Pilih kontrol NotesLabel . Pada panel kanan pada tab Lanjutan , ubah properti Teks menjadi ThisItem.Notes, dan ubah properti Ukuran menjadi 20.

    Catatan

    Properti Ukuran menentukan ukuran font untuk teks yang ditampilkan oleh kontrol.

  7. Pilih kontrol DateLabel untuk mengubah properti Text menjadi ThisItem.'Appointment Date' dan ubah properti Size menjadi 20. Bidang dalam komponen kustom harus menampilkan data sampel.

    Komponen kustom dengan data sampel.

Komponen kustom selesai. Andhara membuat layar baru untuk menampilkan riwayat janji temu pelanggan dengan menggunakan komponen ini, sebagai berikut:

  1. Pada panel Tampilan pohon , pilih tab Layar .

  2. Perluas layar BrowseAppointments , perluas kontrol BrowseAppointmentsGallery , dan pilih kontrol Body1_1 . Pada menu Sisipkan , pilih Ikon, lalu pilih ikon Daftar detail .

    Tambahkan ikon Daftar rincian.

  3. Ubah nama kontrol ikon menjadi ViewAppointments.

  4. Pada menu Tampilan pohon , pilih kontrol BrowseAppointmentsGallery . Pada panel kanan, pada tab Lanjutan , ubah properti TemplateSize ke 220. Meningkatkan properti ini memperluas ruang yang tersedia di galeri.

  5. Pindahkan ikon ViewAppointments ke ruang kosong di bawah nama pelanggan.

    Galeri janji temu yang direvisi.

  6. Pilih kontrol ikon ViewAppointments . Tetapkan properti tindakan OnSelect ke rumus berikut.

    ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));

Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)

    Rumus ini mengisi koleksi bernama customerAppointmentsCollection dengan janji temu untuk pelanggan yang dipilih, lalu berpindah ke AppointmentHistoryScreen untuk menampilkannya. Anda dapat membuat layar ini dalam langkah-langkah berikut.

  7. Pada menu Sisipkan , pilih Layar baru, lalu pilih templat Yang dapat digulir .

    Layar baru berdasarkan template yang dapat di-scroll.

  8. Ubah nama layar baru menjadi AppointmentHistoryScreen.

  9. Hapus kontrol CanvasX yang ditambahkan ke layar ini.

    Menghapus kontrol kanvas.

  10. Pilih kontrol LblAppNameX di layar ini. Pada panel kanan, pada tab Lanjutan , ubah properti Teks ke yang berikut.

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

  11. Tetapkan properti berikut untuk kontrol LblAppNameX untuk menyesuaikan posisi dan ukuran:

    • Nomor telepon: 90
    • Anda: 0
    • Lebar: 550
    • Tinggi: 140

  12. Pilih kontrol RectQuickActionBarX , dan atur properti Height ke 140.

  13. Tambahkan kontrol ikon Kiri ke header layar, di sebelah kiri judul. Atur properti tindakan OnSelect untuk kontrol ini ke Navigate(BrowseAppointments, Transition.None).

    Layar Janji Temu Kosong.

  14. Pada menu Sisipkan , pilih Kustom, lalu pilih DateHistoryComponent.

    Tambahkan komponen DateHistory.

  15. Pindahkan dan ubah ukuran komponen sehingga komponen menduduki badan layar, di bawah heading.

    Komponen yang diubah ukurannya.

  16. Atur properti berikut untuk komponen ini:

    • Data: customerAppointmentsCollection
    • Tanggal Janji Temu: startDateTime
    • Catatan: catatan

  17. Simpan aplikasi.

Untuk menguji aplikasi, lakukan langkah berikut;

  1. Pada panel Tampilan Pohon , pilih layar Beranda .

  2. Pilih F5 untuk melihat pratinjau aplikasi.

  3. Pada layar Beranda , pilih Janji Temu.

  4. Di layar penelusuran, pilih ikon Daftar detail untuk janji temu apa pun.

  5. Verifikasi bahwa layar Riwayat Janji Temu untuk pelanggan yang dipilih muncul.

  6. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

Memesan suku cadang

Persyaratan utama sistem adalah memungkinkan teknisi memesan suku cadang yang diperlukan saat mengunjungi pelanggan. Jika suku cadang ada dalam persediaan, mungkin untuk menjadwalkan kunjungan lain untuk menyelesaikan perbaikan pada tanggal yang nyaman berikutnya bagi pelanggan. Jika komponen saat ini kehabisan persediaan dan harus dipesan, teknisi dapat memberi tahu pelanggan. Malik kemudian dapat mengatur janji temu dengan pelanggan ketika Andhara menerima pemberitahuan bahwa suku cadang tersebut telah tiba di gudang.

Bagian reservasi aplikasi menggunakan tabel dalam database InventoryDB yang ditunjukkan pada gambar berikut. Tabel Pesanan menyimpan informasi tentang pesanan yang dilakukan untuk suku cadang. Tabel Reservasi mencantumkan permintaan reservasi yang telah dibuat teknisi dan teknisi untuk suku cadang. Tabel Insinyur memberikan nama dan nomor kontak untuk teknisi yang melakukan reservasi, yang memudahkan Maria, manajer inventaris, untuk menanyakan jika perlu.

Model data Reservasi.

Untuk mendukung fitur ini, Kiana harus memperbarui Web API dengan metode yang mengambil jumlah item yang digunakan untuk bagian tertentu, sebagai berikut:

  1. Buka proyek FieldEngineerApi Web API di Visual Studio Code.

  2. Tambahkan file bernama Order.cs ke folder Models . Tambahkan kode berikut ke file ini. Kelas Pesanan melacak detail pesanan yang dilakukan untuk suku cadang.

    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. Tambahkan file baru lain bernama# Reservation.cs ke folder Model dan tambahkan kode berikut ke file ini. Kelas Reservasi berisi informasi tentang jumlah item untuk bagian tertentu yang saat ini dicadangkan 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. Tambahkan satu file lagi, bernama InventoryEngineer.cs, ke folder Models , dengan kode berikut. Kelas InventoryEngineer mencatat teknisi mana yang telah membuat reservasi 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 file InventoryContext.cs di folder Models , dan tambahkan pernyataan berikut ke 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. Di jendela Terminal dalam Visual Studio Code, jalankan perintah berikut untuk membangun kontroler untuk menangani pesanan dan reservasi.

    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 file BoilerPartController.cs di folder Pengontrol , dan tambahkan metode GetTotalReservations berikut ke 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 file OrdersController.cs , dan ubah metode PostOrder di kelas OrdersController seperti yang ditunjukkan oleh berikut ini.

    [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 file ReservationsController.cs . Ubah metode PostReservation di kelas ReservationsController , sebagai 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. Di jendela Terminal, jalankan perintah berikut untuk membuat dan mempublikasikan API Web yang siap untuk penyebaran.

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

  11. Dalam Visual Studio Kode, klik kanan folder publikasikan , lalu pilih Terapkan ke Aplikasi Web.

Preeti sekarang dapat memperbarui layanan Manajemen API yang digunakan oleh aplikasi VanArsdel untuk menunjukkan API Web yang diperbarui. Ini adalah perubahan yang tidak putus; operasi yang ada akan terus bekerja, perbedaannya adalah kontroler dan operasi baru untuk membuat reservasi dan melakukan pemesanan. Preeti melakukan tugas berikut:

Catatan

Preeti dapat memilih untuk menghapus API Teknisi Lapangan yang ada dan menggantinya dengan versi baru, namun pendekatan tersebut berisiko merusak aplikasi yang ada yang mungkin saat ini menggunakan API. Praktik yang lebih baik adalah membiarkan API yang ada tersedia dan menambahkan modifikasi sebagai revisi.

  1. Di portal Azure, buka layanan Manajemen API.

  2. Pada halaman layanan API Management, di panel kiri di bawah API, pilih API.

  3. Pilih Field Engineer API, pilih menu elipsis, lalu pilih Tambahkan revisi.

    Menambahkan revisi ke API Teknisi Lapangan.

  4. Dalam dialog Buat revisi baru API Insinyur Lapangan, masukkan deskripsi Operasi GET dan operasi POST yang ditambahkan untuk reservasi dan pesanan suku cadang, lalu pilih Buat.

    Buat revisi.

  5. Pada halaman REVISI 2 , pilih Desain.

    Desain revisi.

  6. Pada halaman Desain , pilih Tambahkan operasi. Pada panel FrontEnd , atur properti berikut, lalu pilih Simpan. Operasi ini digunakan untuk mengambil sejumlah item yang digunakan untuk suku cadang boiler tertentu:

    • Nama tampilan: api / BoilerParts /{id} / Dicadangkan
    • Nama: api-boilerparts-id-reserved
    • URL: GETapi/BoilerParts/{id}/Dipesan

    Tambahkan operasi API Cadangan.

  7. Pada tab Uji untuk operasi baru, atur parameter id ke nomor komponen yang valid (contoh dalam gambar menggunakan bagian 1), lalu pilih Kirim.

    Uji API Web.

  8. Pastikan pengujian berhasil. Operasi harus selesai dengan respons HTTP 200, dan badan yang menunjukkan jumlah reservasi untuk produk.

    Respons Pengujian.

  9. Pada halaman Desain , pilih Tambahkan operasi. Pada panel FrontEnd , atur properti berikut (operasi ini menentukan permintaan POST untuk membuat pesanan baru):

    • Nama tampilan: api/Pesanan - POST
    • Nama: api-order-post
    • URL: POSTapi/Pesanan

  10. Pada tab Kueri , pilih + Tambahkan parameter, tambahkan parameter berikut, lalu pilih Simpan:

    • Nama: boilerPartId, Deskripsi**: ID** Bagian Boiler, Jenis: panjang
    • Nama: kuantitas , Deskripsi: Kuantitas**, Jenis:** bilangan bulat

    Menambahkan parameter ke operasi kueri Manajemen API.

  11. Pilih Tambahkan operasi lagi di panel FrontEnd , dan atur properti berikut (operasi ini mendefinisikan permintaan POST untuk membuat reservasi baru):

    • Nama tampilan: api/Reservasi - POST
    • Nama: api-reservations-post
    • URL: POSTapi/Reservasi

  12. Pada tab Kueri , tambahkan parameter berikut, lalu pilih Simpan :

    • Nama: boilerPartId, Deskripsi: ID Bagian Boiler, Jenis: panjang
    • Nama: engineerId, Deskripsi: ID Insinyur, Jenis: string
    • Nama: quantityToReserve, Deskripsi: Kuantitas untuk dicadangkan, Jenis: bilangan bulat

  13. Pada tab Revisi , pilih versi baru. Pada menu elipsis untuk versi ini, pilih Buat saat ini.

    Atur versi saat ini untuk revisi.

  14. Dalam dialog Buat revisi saat ini , pilih Simpan.

  15. Buka halaman lain di browser web Anda dan buka nama API URL https://<.azure-api.net/api/boilerparts/1/reserved>di mana nama <APIM adalah nama layanan API Anda.> Pastikan Anda mendapatkan respons yang serupa dengan berikut.

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

API Web yang diperbarui sekarang tersedia. Secara umum, Kiana dapat membuat konektor kustom baru untuk API Web yang diperbarui dan menambahkannya ke aplikasi. Aplikasi kemudian dapat menerapkan logikanya sendiri untuk menentukan jumlah item dari produk tertentu saat ini dalam stok, berapa banyak yang direservasi, membandingkan hasil dengan jumlah item yang diperlukan, melakukan pemesanan untuk stok lebih banyak jika perlu, atau memesan item dari stok yang ada. Namun, logika jenis ini diimplementasikan dengan lebih baik di Azure logic apps. Power Apps dapat memanggil aplikasi logika melalui konektor kustom saat teknisi ingin memesan atau mereservasi suku cadang.

Untuk membuat aplikasi logika, Kiana menggunakan langkah-langkah berikut:

Catatan

Untuk membuat hal-hal sederhana, aplikasi logika yang dibuat dalam contoh ini adalah non-transaksional. Ini mungkinkah antara memeriksa ketersediaan suku cadang dan membuat reservasi, pengguna yang berbarengan mungkin membuat pemesanan yang bertentangan. Anda dapat menerapkan semantik transaksional dengan mengganti beberapa logika dalam aplikasi logika ini dengan prosedur tersimpan dalam database InventoryDB .

  1. Di portal Azure, pada halaman Beranda , pilih + Buat sumber daya.

  2. Di kotak Cari pasar, masukkan Logic App, lalu pilih Enter.

  3. Pada halaman Aplikasi Logika, pilih Buat.

    Membuat aplikasi logika.

  4. Pada halaman Buat aplikasi logika, masukkan nilai berikut, lalu pilih Tinjau + buat:

    • Langganan: Pilih langganan Azure Anda
    • Grup sumber daya: webapi_rg
    • Nama Aplikasi Logika: FieldEngineerPartsOrdering
    • Kawasan: Pilih lokasi sama yang Anda gunakan untuk Web API
    • Kaitkan dengan lingkungan layanan integrasi: Kosongkan
    • Aktifkan analitik log: Kosongkan

  5. Pada halaman verifikasi, pilih Buat, dan tunggu saat aplikasi logika disebarkan.

  6. Setelah penyebaran selesai, pilih Buka sumber daya.

  7. Pada halaman Logic Apps Designer , gulir ke bawah ke bagian Template , lalu pilih Blank Logic App.

    Pilih template Aplikasi Logika Kosong.

  8. Pada tab Semua , di kotak teks Pencarian konektor dan pemicu , pilih Permintaan.

    Pilih pemicu Permintaan.  

  9. Pada tab Pemicu , pilih Saat permintaan HTTP diterima.

    Picu saat permintaan HTTP diterima.

  10. Di kotak Skema JSON Isi Permintaan, masukkan skema berikut, lalu pilih + Langkah baru.

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

    Skema permintaan aplikasi Logika.

    Skema ini mendefinisikan konten permintaan HTTP yang diperkirakan aplikasi logika. Badan permintaan berisi ID dari suku cadang boiler, jumlah item yang diperlukan, dan ID teknisi yang membuat permintaan. Aplikasi akan mengirim permintaan ini bila teknisi ingin memesan suku cadang.

  11. Di kotak Pilih operasi , pilih Semua, lalu pilih HTTP.

    PilihH pilihan operasi HTTP.

    Aplikasi logika akan memanggil operasi BoilerParts{id} dari Web API untuk mengambil informasi tentang bagian boiler yang disediakan oleh permintaan dari aplikasi.

  12. Pada panel Tindakan , pilih tindakan HTTP .

    Pilih opsi tindakan HTTP.

  13. Dalam kotak tindakan HTTP , pada menu elipsis, pilih Ganti nama, dan ubah nama tindakan menjadi CheckBoilerPart.

    Ganti nama tindakan HTTP.

  14. Atur properti tindakan HTTP sebagai berikut, lalu pilih + Langkah Baru:

    • Metode: DAPATKAN
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/, di mana <nama> APIM adalah nama layanan API Management Anda. Di kotak Konten dinamis untuk URI ini, pada tab Konten dinamis, pilih boilerPartId

    Menentukan konten dinamis untuk tindakan HTTP.

  15. Di kotak Pilih operasi , di kotak Cari konektor dan tindakan , masukkan Urai JSON, lalu pilih tindakan Uraikan JSON .

    Pilih tindakan Uraikan JSON.

  16. Dengan menggunakan menu elipsis untuk tindakan Parse JSON , ganti nama tindakan menjadi ParseBoilerPart.

  17. Di kotak Konten untuk tindakan ParseBoilerPart , di kotak Konten Dinamis, pilih Isi. Di kotak Skema , masukkan skema JSON berikut, lalu pilih + Langkah baru.

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

    Menguraikan objek BoilerPart.

    Tindakan ini mengurai pesan respons yang dikembalikan oleh getBoilerParts/{id} request. Respons berisi rincian suku cadang boiler, termasuk jumlah saat ini dalam stok.

  18. Di kotak Pilih operasi untuk langkah baru, pilih konektor HTTP .

  19. Pada tab Tindakan , pilih tindakan HTTP .

  20. Dengan menggunakan menu elipsis untuk operasi, ganti nama operasi menjadi CheckReservations.

  21. Atur properti berikut untuk operasi ini, lalu pilih + Langkah baru:

    • Metode: DAPATKAN
    • URI: https://<Nama> APIM.azure-api.net/api/boilerparts/. Seperti sebelumnya, di kotak Konten dinamis untuk URI ini, pada tab Konten dinamis, pilih boilerPartId. Di bidang URI , tambahkan teks /dipesan setelah placeholder boilerPartId

    Langkah CheckReservations.

  22. Di kotak Pilih operasi untuk tindakan baru, di kotak Cari konektor dan tindakan , masukkan Uraikan JSON, lalu pilih tindakan Uraikan JSON .

  23. Ganti nama operasi sebagai ParseReservations.

  24. Atur properti Content ke Body.

  25. Masukkan skema berikut, lalu pilih + Langkah baru.

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

    Menguraikan data Reservasi.

  26. Di kotak Pilih operasi untuk tindakan baru, di kotak Cari konektor dan tindakan , masukkan Kondisi, lalu pilih tindakan Kontrol Kondisi.

    Pilih kontrol Kondisi.

  27. Ganti nama operasi menjadi CompareStock.

  28. Pilih kotak Pilih nilai . Di kotak Tambahkan konten dinamis, pada tab Ekspresi , masukkan ekspresi berikut, lalu pilih OK.

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

    Ekspresi ini menghitung jumlah item dari suku cadang boiler tertentu yang saat ini digunakan, dan jumlah yang diminta oleh teknisi.

    Kondisi CompareStock.

  29. Dalam kotak daftar dropdown kondisi, pilih lebih besar dari.

  30. Di kotak Pilih nilai yang tersisa , di kotak Konten dinamis, pada tab Konten dinamis, di bawah ParseBoilerPart , pilihnumberInStock .

    Bandingkan total reservasi dengan jumlah item dalam stok.

  31. Jika jumlah item yang diperlukan ditambah nomor yang direservasi lebih besar dari jumlah dalam stok, aplikasi harus melakukan pemesanan untuk mengisi inventaris. Di cabang True tindakan CompareStock , pilih Tambahkan tindakan.

  32. Pada tab Semua untuk operasi baru, pilih HTTP, lalu pilih tindakan HTTP .

  33. Ganti nama operasi sebagai PostOrder.

  34. Atur properti berikut untuk operasi PostOrder :

    • Metode: POST
    • URI: https://<Nama> APIM.azure-api.net/api/orders
    • Dalam tabel Kueri , di baris pertama, masukkan kunci boilerPartId. Untuk nilai dalam kotak Tambahkan konten dinamis, pada tab Konten dinamis, pilih **boilerPartId **
    • Di baris kedua tabel Kueri , masukkan kuantitas kunci. Di bidang nilai, masukkan 50.

    Posting permintaan untuk memesan suku cadang lainnya.

    Aplikasi logika akan secara otomatis memesan 50 item dari suku cadang yang ditentukan saat stok menipis.

    Catatan

    Aplikasi logika mengasumsikan bahwa teknisi tidak akan benar-benar mencoba mereservasi lebih dari 50 item dari suku cadang tertentu dalam satu permintaan!

  35. Biarkan cabang False dari tindakan CompareStock kosong.

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

  37. Pada tab Semua untuk operasi baru, pilih HTTP, lalu pilih tindakan HTTP .

  38. Ganti nama operasi menjadi PostReservation.

  39. Atur properti berikut untuk operasi PostReservation :

    • Metode: POST
    • URI: https://<Nama> APIM.azure-api.net/api/reservations
    • Dalam tabel Kueri , di baris pertama, masukkan kunci boilerPartId. Untuk nilai dalam kotak Tambahkan konten dinamis, pada tab Konten dinamis, pilih boilerPartId.
    • Di baris kedua, masukkan kunci engineerId. Untuk nilai dalam kotak Tambahkan konten dinamis, pada tab Konten dinamis, pilih engineerId
    • Di baris ketiga, masukkan kunci quantityToReserve. Untuk nilai dalam kotak Tambahkan konten dinamis, pada tab Konten dinamis, pilih numberToReserve

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

  41. Atur properti berikut untuk tindakan Respons :

    • Kode Status: 200
    • Header: Key - content-type, Value - application/json
    • Isi: Di kotak Konten dinamis, pilih elemen Isi dari permintaan PostReservation . Ini adalah akan badan yang dikembalikan saat reservasi dilakukan.

    Pesan respons yang dikirim oleh aplikasi logika.

  42. Di kiri atas halaman Logic Apps Designer , pilih Simpan. Pastikan aplikasi logika dapat disimpan tanpa kesalahan apa pun.

Untuk membuat konektor kustom yang dapat digunakan Power Apps untuk memicu aplikasi logika, Kiana melakukan langkah-langkah berikut saat tetap berada di portal Azure:

  1. Pada halaman Gambaran Umum untuk aplikasi logika, pilih Ekspor.

    Ekspor aplikasi logika.

  2. Di panel Ekspor ke, Power Apps beri nama konektor PartsOrderingConnector, pilih lingkungan Anda Power Apps , lalu pilih OK.

    Ekspor aplikasi logika ke Power Apps.

  3. Masuk ke Power Apps.

  4. Di lingkungan Anda, di bawah Data, pilih Konektor Kustom dan verifikasi bahwa PartsOrderingConnector tercantum.

    Konektor kustom Power Apps.

Andhara sekarang dapat memodifikasi aplikasi VanArsdel untuk memungkinkan teknisi memesan suku cadang saat datang ke situs pelanggan. Maria menambahkan tombol Order ke layar PartDetails , sebagai berikut:

  1. Masuk ke Power Apps (jika belum masuk).

  2. Di bawah Aplikasi, pilihaplikasi VanArsdelApp . Pada menu elipsis untuk aplikasi, pilih Edit.

  3. Pada panel Data , pilih Tambahkan data, cari konektor PartsOrderingConnector , dan tambahkan koneksi baru menggunakan konektor tersebut.

    Menambahkan konektor PartsOrdering ke aplikasi.

  4. Pada panel Tampilan hierarkis, perluas layar PartDetails , lalu perluas formulir DetailForm1 .

  5. Pada panel Properti di sebelah kanan, pilih Edit bidang. Pada panel Bidang , pada menu elipsis, pilih Tambahkan kartu kustom.

    Menambahkan kontrol kartu data kustom ke aplikasi.

  6. Pada panel Tampilan hierarkis, ganti nama kartu baru dari DataCard1 menjadi ReserveCard. Di jendela tampilan Desain , ubah ukuran kartu sehingga menempati bagian bawah layar, di bawah kontrol Image_DataCard1 .

    Mengubah nama dan mengubah ukuran kontrol kartu data.

  7. Pada menu Sisipkan , dari sub menu Input , tambahkan kontrol Input Teks , kontrol Tombol , dan kontrol Label ke kontrol ReserveCard .

  8. Ubah ukuran dan posisikan kontrol sehingga bersebelahan, dengan kontrol Tombol di sebelah kanan kontrol Input Teks , dan Label di bawah kontrol Tombol .

  9. Pada panel Properti untuk kontrol Input Teks , kosongkan properti Default .

  10. Pada panel Properti untuk kontrol Tombol , atur properti Teks ke Cadangan.

    Tata letak layar ParttDetails.

  11. Ganti nama kontrol Input Teks menjadi NumberToReserve, ganti nama kontrol Tombol menjadi Cadangan, dan ganti nama kontrol Label menjadi Pesan.

  12. Pada panel Properti untuk kontrol Pesan , atur properti Teks ke Bagian Dicadangkan, dan atur properti Terlihat ke MessageIsVisible.

    Catatan

    MessageIsVisible adalah variabel yang akan Anda inisialisasi menjadi false saat layar ditampilkan, tetapi akan diubah menjadi true jika pengguna memilih tombol Cadangan .

  13. Atur properti OnSelect untuk kontrol tombol Cadangkan ke rumus berikut.

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

Set(MessageIsVisible, true);

    Catatan

    Rumus ini menggunakan ID teknisi kode keras untuk menunjukkan teknisi yang saat ini menjalankan aplikasi. Bab 8 menjelaskan cara mengambil ID untuk pengguna yang masuk.

    Selain itu, aplikasi tidak melakukan pemeriksaan kesalahan; ia mengasumsikan bahwa permintaan untuk mereservasi komponen selalu berhasil. Untuk informasi selengkapnya tentang penanganan kesalahan, buka Fungsi kesalahan di. Power Apps

  14. Atur properti OnVisible untuk layar PartDetails ke Set(MessageIsVisible, false).

Untuk menguji aplikasi, lakukan langkah berikut;

  1. Pada panel Tampilan Pohon , pilih layar Beranda .

  2. Pilih F5 untuk melihat pratinjau aplikasi.

  3. Pada layar Beranda , pilih Bagian.

  4. Di layar telusur, pilih suku cadang apa pun.

  5. Pada layar Detail Bagian , gulir ke bawah ke bagian reservasi, masukkan nilai bilangan bulat positif, lalu pilih Cadangan. Verifikasi bahwa pesan Suku cadang yang dipesan muncul.

    Layar PartDetails dengan fungsi Reservasi diaktifkan.

  6. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

  7. Di portal Microsoft Azure, buka halaman untuk Database SQL InventoryDB .

  8. Pilih editor Kueri, dan masuk sebagai sqladmin dengan kata sandi Anda.

  9. Di panel Kueri 1 , masukkan kueri berikut, lalu pilih Jalankan. Pastikan pemesanan yang Anda lakukan di aplikasi VanArsdel ditampilkan.

    SELECT * FROM [dbo].[Reservations]

    Kirimkan kueri di database SQL.

sebelumnyaBerikutnya