Tutorial: Membuat aplikasi database pelanggan

Artikel
07/13/2023

Tutorial ini membuat aplikasi sederhana untuk mengelola daftar pelanggan. Dalam melakukannya, ini memperkenalkan pilihan konsep dasar untuk aplikasi perusahaan di UWP. Anda akan mempelajari cara:

Terapkan operasi Buat, Baca, Perbarui, dan Hapus terhadap database SQL lokal.
Tambahkan kisi data, untuk menampilkan dan mengedit data pelanggan di UI Anda.
Susun elemen UI bersama-sama dalam tata letak formulir dasar.

Titik awal untuk tutorial ini adalah aplikasi satu halaman dengan UI dan fungsionalitas minimal, berdasarkan versi aplikasi sampel Customer Orders Database yang disederhanakan. Ini ditulis dalam C# dan XAML, dan kami berharap bahwa Anda memiliki keakraban dasar dengan kedua bahasa tersebut.

Halaman utama aplikasi yang berfungsi

Prasyarat

Setelah mengkloning /mengunduh repositori, Anda dapat mengedit proyek dengan membuka CustomerDatabaseTutorial.sln dengan Visual Studio.

Catatan

Tutorial ini didasarkan pada sampel Database Pesanan Pelanggan yang baru-baru ini diperbarui untuk menggunakan WinUI dan SDK Aplikasi Windows. Hingga tutorial dan kode ini diperbarui, akan ada perbedaan antara dua sampel.

Bagian 1: Kode Kepentingan

Jika Anda menjalankan aplikasi segera setelah membukanya, Anda akan melihat beberapa tombol di bagian atas layar kosong. Meskipun tidak terlihat oleh Anda, aplikasi sudah menyertakan database SQLite lokal yang disediakan dengan beberapa pelanggan pengujian. Dari sini, Anda akan mulai dengan menerapkan kontrol UI untuk menampilkan pelanggan tersebut, lalu melanjutkan untuk menambahkan operasi terhadap database. Sebelum memulai, di sinilah Anda akan bekerja.

Tampilan

CustomerListPage.xaml adalah Tampilan aplikasi, yang menentukan UI untuk satu halaman dalam tutorial ini. Setiap kali Anda perlu menambahkan atau mengubah elemen visual di UI, Anda akan melakukannya dalam file ini. Tutorial ini akan memandu Anda menambahkan elemen-elemen ini:

RadDataGrid untuk menampilkan dan mengedit pelanggan Anda.
StackPanel untuk mengatur nilai awal untuk pelanggan baru.

ViewModels

ViewModels\CustomerListPageViewModel.cs adalah tempat logika dasar aplikasi berada. Setiap tindakan pengguna yang diambil dalam tampilan akan diteruskan ke file ini untuk diproses. Dalam tutorial ini, Anda akan menambahkan beberapa kode baru, dan menerapkan metode berikut:

CreateNewCustomerAsync, yang menginisialisasi objek CustomerViewModel baru.
DeleteNewCustomerAsync, yang menghapus pelanggan baru sebelum ditampilkan di UI.
DeleteAndUpdateAsync, yang menangani logika tombol hapus.
GetCustomerListAsync, yang mengambil daftar pelanggan dari database.
SaveInitialChangesAsync, yang menambahkan informasi pelanggan baru ke database.
UpdateCustomersAsync, yang me-refresh UI untuk mencerminkan setiap pelanggan yang ditambahkan atau dihapus.

CustomerViewModel adalah pembungkus untuk informasi pelanggan, yang melacak apakah itu baru saja dimodifikasi atau tidak. Anda tidak perlu menambahkan apa pun ke kelas ini, tetapi beberapa kode yang akan Anda tambahkan di tempat lain akan mereferensikannya.

Untuk informasi selengkapnya tentang bagaimana sampel dibangun, lihat gambaran umum struktur aplikasi.

Bagian 2: Tambahkan DataGrid

Sebelum mulai beroperasi pada data pelanggan, Anda harus menambahkan kontrol UI untuk menampilkan pelanggan tersebut. Untuk melakukan ini, kita akan menggunakan kontrol RadDataGrid pihak ketiga yang telah dibuat sebelumnya. Paket Telerik.UI.for.UniversalWindowsPlatform NuGet telah disertakan dalam proyek ini. Mari kita tambahkan kisi-kisi ke proyek kita.

Buka Views\CustomerListPage.xaml dari Penjelajah Solusi. Tambahkan baris kode berikut dalam tag Halaman untuk mendeklarasikan pemetaan ke namespace telerik yang berisi kisi data.
```
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
```

Di bawah CommandBar dalam RelativePanel utama Tampilan, tambahkan kontrol RadDataGrid, dengan beberapa opsi konfigurasi dasar:

<Grid
    x:Name="CustomerListRoot"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RelativePanel>
        <CommandBar
            x:Name="mainCommandBar"
            HorizontalAlignment="Stretch"
            Background="AliceBlue">
            <!--CommandBar content-->
        </CommandBar>
        <telerikGrid:RadDataGrid
            x:Name="DataGrid"
            BorderThickness="0"
            ColumnDataOperationsMode="Flyout"
            GridLinesVisibility="None"
            GroupPanelPosition="Left"
            RelativePanel.AlignLeftWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.Below="mainCommandBar" />
    </RelativePanel>
</Grid>

Anda telah menambahkan kisi data, tetapi perlu data untuk ditampilkan. Tambahkan baris kode berikut ke dalamnya:
```
ItemsSource="{x:Bind ViewModel.Customers}"
UserEditMode="Inline"
```
Sekarang setelah Anda menentukan sumber data yang akan ditampilkan, RadDataGrid akan menangani sebagian besar logika UI untuk Anda. Namun, jika Anda menjalankan proyek, Anda masih tidak akan melihat data apa pun yang ditampilkan. Itu karena ViewModel belum memuatnya.

Bagian 3: Membaca pelanggan

Saat diinisialisasi, ViewModels\CustomerListPageViewModel.cs memanggil metode GetCustomerListAsync . Metode tersebut perlu mengambil data Pelanggan pengujian dari database SQLite yang disertakan dalam tutorial.

Di ViewModels\CustomerListPageViewModel.cs, perbarui metode GetCustomerListAsync Anda dengan kode ini:
```
public async Task GetCustomerListAsync()
{
    var customers = await App.Repository.Customers.GetAsync(); 
    if (customers == null)
    {
        return;
    }
    await DispatcherHelper.ExecuteOnUIThreadAsync(() =>
    {
        Customers.Clear();
        foreach (var c in customers)
        {
            Customers.Add(new CustomerViewModel(c));
        }
    });
}
```
Metode GetCustomerListAsync dipanggil ketika ViewModel dimuat, tetapi sebelum langkah ini, metode ini tidak melakukan apa pun. Di sini, kami telah menambahkan panggilan ke metode GetAsync di Repositori/SqlCustomerRepository. Ini memungkinkannya untuk menghubungi repositori untuk mengambil koleksi objek Pelanggan yang dapat dijumlahkan. Kemudian mengurainya menjadi objek individual, sebelum menambahkannya ke ObservableCollection internalnya sehingga dapat ditampilkan dan diedit.
Jalankan aplikasi - Sekarang Anda akan melihat kisi data yang menampilkan daftar pelanggan.

Daftar awal pelanggan

Bagian 4: Edit pelanggan

Anda dapat mengedit entri di kisi data dengan mengklik dua kali, tetapi Anda perlu memastikan bahwa setiap perubahan yang Anda buat di UI juga dibuat untuk koleksi pelanggan Anda di kode-belakang. Ini berarti Anda harus menerapkan pengikatan data dua arah. Jika Anda ingin informasi selengkapnya tentang ini, lihat pengantar pengikatan data kami.

Pertama, nyatakan bahwa ViewModels\CustomerListPageViewModel.cs mengimplementasikan antarmuka INotifyPropertyChanged :
```
public class CustomerListPageViewModel : INotifyPropertyChanged
```

Kemudian, dalam isi utama kelas, tambahkan peristiwa dan metode berikut:

public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

Metode OnPropertyChanged memudahkan setter Anda untuk menaikkan peristiwa PropertyChanged , yang diperlukan untuk pengikatan data dua arah.

Perbarui setter untuk SelectedCustomer dengan panggilan fungsi ini:

public CustomerViewModel SelectedCustomer
{
    get => _selectedCustomer;
    set
    {
        if (_selectedCustomer != value)
        {
            _selectedCustomer = value;
            OnPropertyChanged();
        }
    }
}

Di Views\CustomerListPage.xaml, tambahkan properti SelectedCustomer ke kisi data Anda.
```
SelectedItem="{x:Bind ViewModel.SelectedCustomer, Mode=TwoWay}"
```
Ini mengaitkan pilihan pengguna di kisi data dengan objek Pelanggan yang sesuai di code-behind. Mode pengikatan TwoWay memungkinkan perubahan yang dibuat di UI tercermin pada objek tersebut.
Jalankan aplikasi Anda. Anda sekarang dapat melihat pelanggan yang ditampilkan di kisi, dan membuat perubahan pada data yang mendasar melalui UI Anda.

Mengedit pelanggan di kisi data

Bagian 5: Memperbarui pelanggan

Sekarang setelah Anda dapat melihat dan mengedit pelanggan, Anda harus dapat mendorong perubahan Anda ke database, dan untuk menarik pembaruan apa pun yang telah dibuat oleh orang lain.

Kembali ke ViewModels\CustomerListPageViewModel.cs, dan navigasikan ke metode UpdateCustomersAsync . Perbarui dengan kode ini, untuk mendorong perubahan ke database dan untuk mengambil informasi baru apa pun:
```
public async Task UpdateCustomersAsync()
{
    foreach (var modifiedCustomer in Customers
        .Where(x => x.IsModified).Select(x => x.Model))
    {
        await App.Repository.Customers.UpsertAsync(modifiedCustomer);
    }
    await GetCustomerListAsync();
}
```
Kode ini menggunakan properti IsModified viewModels \CustomerViewModel.cs, yang secara otomatis diperbarui setiap kali pelanggan diubah. Ini memungkinkan Anda untuk menghindari panggilan yang tidak perlu, dan hanya mendorong perubahan dari pelanggan yang diperbarui ke database.

Bagian 6: Buat pelanggan baru

Menambahkan pelanggan baru memberikan tantangan, karena pelanggan akan muncul sebagai baris kosong jika Anda menambahkannya ke UI sebelum memberikan nilai untuk propertinya. Itu bukan masalah, tetapi di sini kita akan mempermudah untuk mengatur nilai awal pelanggan. Dalam tutorial ini, kita akan menambahkan panel sederhana yang dapat diciutkan, tetapi jika Anda memiliki lebih banyak informasi untuk ditambahkan, Anda dapat membuat halaman terpisah untuk tujuan ini.

Memperbarui code-behind

Tambahkan bidang privat baru dan properti publik ke ViewModels\CustomerListPageViewModel.cs. Ini akan digunakan untuk mengontrol apakah panel terlihat atau tidak.

private bool _addingNewCustomer = false;

public bool AddingNewCustomer
{
    get => _addingNewCustomer;
    set
    {
        if (_addingNewCustomer != value)
        {
            _addingNewCustomer = value;
            OnPropertyChanged();
        }
    }
}

Tambahkan properti publik baru ke ViewModel, inversi dari nilai AddingNewCustomer. Ini akan digunakan untuk menonaktifkan tombol bilah perintah reguler saat panel terlihat.
```
public bool EnableCommandBar => !AddingNewCustomer;
```
Anda sekarang memerlukan cara untuk menampilkan panel yang dapat diciutkan, dan untuk membuat pelanggan untuk mengedit di dalamnya.

Tambahkan fiend privat dan properti publik baru ke ViewModel, untuk menahan pelanggan yang baru dibuat.

private CustomerViewModel _newCustomer;

public CustomerViewModel NewCustomer
{
    get => _newCustomer;
    set
    {
        if (_newCustomer != value)
        {
            _newCustomer = value;
            OnPropertyChanged();
        }
    }
}

Perbarui metode CreateNewCustomerAsync Anda untuk membuat pelanggan baru, menambahkannya ke repositori, dan mengaturnya sebagai pelanggan yang dipilih:

public async Task CreateNewCustomerAsync()
{
    CustomerViewModel newCustomer = new CustomerViewModel(new Models.Customer());
    NewCustomer = newCustomer;
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    AddingNewCustomer = true;
}

Perbarui metode SaveInitialChangesAsync untuk menambahkan pelanggan yang baru dibuat ke repositori, memperbarui UI, dan menutup panel.

public async Task SaveInitialChangesAsync()
{
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    await UpdateCustomersAsync();
    AddingNewCustomer = false;
}

Tambahkan baris kode berikut sebagai baris akhir di setter untuk AddingNewCustomer:
```
OnPropertyChanged(nameof(EnableCommandBar));
```
Ini akan memastikan bahwa EnableCommandBar diperbarui secara otomatis setiap kali AddingNewCustomer diubah.

Memperbarui UI

Navigasikan kembali ke Views\CustomerListPage.xaml, dan tambahkan StackPanel dengan properti berikut antara CommandBar dan kisi data Anda:
```
<StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
</StackPanel>
```
Atribut x:Load memastikan bahwa panel ini hanya muncul saat Anda menambahkan pelanggan baru.
Lakukan perubahan berikut pada posisi kisi data Anda, untuk memastikan bahwa kisi tersebut bergerak ke bawah saat panel baru muncul:
```
RelativePanel.Below="newCustomerPanel"
```

Perbarui panel tumpukan Anda dengan empat kontrol TextBox . Mereka akan mengikat properti individual pelanggan baru, dan memungkinkan Anda mengedit nilainya sebelum Anda menambahkannya ke kisi data.

<StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
    <TextBox
        Header="First name"
        PlaceholderText="First"
        Margin="8,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Last name"
        PlaceholderText="Last"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Address"
        PlaceholderText="1234 Address St, Redmond WA 00000"
        Margin="0,8,16,8"
        MinWidth="280"
        Text="{x:Bind ViewModel.NewCustomer.Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Company"
        PlaceholderText="Company"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.Company, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

Tambahkan tombol sederhana ke panel tumpukan baru Anda untuk menyimpan pelanggan yang baru dibuat:

<StackPanel>
    <!--Text boxes from step 3-->
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

Perbarui CommandBar, sehingga tombol buat, hapus, dan perbarui reguler dinonaktifkan saat panel tumpukan terlihat:

<CommandBar
    x:Name="mainCommandBar"
    HorizontalAlignment="Stretch"
    IsEnabled="{x:Bind ViewModel.EnableCommandBar, Mode=OneWay}"
    Background="AliceBlue">
    <!--App bar buttons-->
</CommandBar>

Jalankan aplikasi Anda. Anda sekarang dapat membuat pelanggan dan memasukkan datanya di panel tumpukan.

Membuat pelanggan baru

Bagian 7: Menghapus pelanggan

Menghapus pelanggan adalah operasi dasar akhir yang perlu Anda terapkan. Saat Anda menghapus pelanggan yang telah Anda pilih dalam kisi data, Anda mungkin ingin segera memanggil UpdateCustomersAsync untuk memperbarui UI. Namun, Anda tidak perlu memanggil metode tersebut jika Anda menghapus pelanggan yang baru saja Anda buat.

Navigasi ke ViewModels\CustomerListPageViewModel.cs, dan perbarui metode DeleteAndUpdateAsync :

public async void DeleteAndUpdateAsync()
{
    if (SelectedCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_selectedCustomer.Model.Id);
    }
    await UpdateCustomersAsync();
}

Di Views\CustomerListPage.xaml, perbarui panel tumpukan untuk menambahkan pelanggan baru sehingga berisi tombol kedua:

<StackPanel>
    <!--Text boxes for adding a new customer-->
    <AppBarButton
        x:Name="DeleteNewCustomer"
        Click="{x:Bind ViewModel.DeleteNewCustomerAsync}"
        Icon="Cancel"/>
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

Di ViewModels\CustomerListPageViewModel.cs, perbarui metode DeleteNewCustomerAsync untuk menghapus pelanggan baru:

public async Task DeleteNewCustomerAsync()
{
    if (NewCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_newCustomer.Model.Id);
        AddingNewCustomer = false;
    }
}

Jalankan aplikasi Anda. Anda sekarang dapat menghapus pelanggan, baik di dalam kisi data atau di panel tumpukan.

Menghapus pelanggan baru

Kesimpulan

Selamat! Dengan semua ini selesai, aplikasi Anda sekarang memiliki berbagai operasi database lokal. Anda dapat membuat, membaca, memperbarui, dan menghapus pelanggan dalam UI Anda, dan perubahan ini disimpan ke database Anda dan akan bertahan di berbagai peluncuran aplikasi Anda.

Sekarang setelah Anda selesai, pertimbangkan hal berikut:

Jika Anda belum melakukannya, lihat gambaran umum struktur aplikasi untuk informasi selengkapnya tentang mengapa aplikasi dibangun seperti apa adanya.
Jelajahi sampel Database Pesanan Pelanggan lengkap untuk melihat aplikasi yang didasarkan pada tutorial ini.

Atau jika Anda siap untuk tantangan, Anda dapat melanjutkan dan seterusnya...

Melaju lebih jauh: Menyambungkan ke database jarak jauh

Kami telah memberikan panduan langkah demi langkah tentang cara menerapkan panggilan ini terhadap database SQLite lokal. Tetapi bagaimana jika Anda ingin menggunakan database jarak jauh, sebagai gantinya?

Jika Anda ingin mencobanya, Anda memerlukan akun Azure Active Directory (AAD) Anda sendiri dan kemampuan untuk menghosting sumber data Anda sendiri.

Anda harus menambahkan autentikasi, fungsi untuk menangani panggilan REST, lalu membuat database jarak jauh untuk berinteraksi. Ada kode dalam sampel Database Pesanan Pelanggan lengkap yang dapat Anda referensikan untuk setiap operasi yang diperlukan.

Pengaturan dan konfigurasi

Langkah-langkah yang diperlukan untuk menyambungkan ke database jarak jauh Anda sendiri dieja dalam readme sampel. Anda harus melakukan hal berikut:

Berikan ID klien akun Azure Anda untuk Constants.cs.
Berikan url database jarak jauh ke Constants.cs.
Berikan string koneksi agar database Constants.cs.
Kaitkan aplikasi Anda dengan Microsoft Store.
Salin proyek Layanan ke aplikasi Anda, dan sebarkan ke Azure.

Autentikasi

Anda harus membuat tombol untuk memulai urutan autentikasi, dan popup atau halaman terpisah untuk mengumpulkan informasi pengguna. Setelah membuatnya, Anda harus memberikan kode yang meminta informasi pengguna dan menggunakannya untuk memperoleh token akses. Sampel Customer Orders Database membungkus panggilan Microsoft Graph dengan pustaka WebAccountManager untuk memperoleh token dan menangani autentikasi ke akun AAD.

Logika autentikasi diimplementasikan dalam AuthenticationViewModel.cs.
Proses autentikasi ditampilkan dalam kontrol AuthenticationControl.xaml kustom.

Panggilan REST

Anda tidak perlu memodifikasi kode apa pun yang kami tambahkan dalam tutorial ini untuk menerapkan panggilan REST. Sebagai gantinya, Anda harus melakukan hal berikut:

Buat implementasi baru antarmuka ICustomerRepository dan ITutorialRepository , menerapkan serangkaian fungsi yang sama melalui REST alih-alih SQLite. Anda harus menserialisasikan dan mendeserialisasi JSON, dan dapat membungkus panggilan REST Anda di kelas HttpHelper terpisah jika perlu. Lihat sampel lengkap untuk spesifik.
Di App.xaml.cs, buat fungsi baru untuk menginisialisasi repositori REST, dan panggil alih-alih SqliteDatabase saat aplikasi diinisialisasi. Sekali lagi, lihat sampel lengkap.

Setelah ketiga langkah ini selesai, Anda harus dapat mengautentikasi ke akun AAD melalui aplikasi Anda. Panggilan REST ke database jarak jauh akan menggantikan panggilan SQLite lokal, tetapi pengalaman pengguna harus sama. Jika Anda merasa lebih ambisius, Anda dapat menambahkan halaman pengaturan untuk memungkinkan pengguna beralih secara dinamis di antara keduanya.

Bagikan melalui