Pengikatan data, injeksi dependensi, dan pengujian unit di WinUI

Seri tutorial ini menunjukkan cara menerapkan pengikatan data, injeksi dependensi, dan pengujian unit dengan pola desain Model-View-ViewModel (MVVM) dan Toolkit MVVM dalam aplikasi WinUI 3. Ini dibangun pada tutorial Buat aplikasi WinUI dan menunjukkan kepada Anda cara memperbarui model tampilan Anda untuk memanfaatkan Toolkit MVVM dan perbedaan antara MVVM Toolkit dan pendekatan MVVM tradisional.

Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub.

Dalam tutorial ini, Anda akan belajar cara:

• Pahami perbedaan antara Toolkit MVVM dan pendekatan MVVM tradisional.
• Buat proyek pustaka kelas terpisah untuk menyimpan ViewModels dan layanan untuk meningkatkan kemampuan pengujian.
• Terapkan pengikatan data di aplikasi WinUI Anda menggunakan Toolkit MVVM.
• Tambahkan AllNotesViewModel dan NoteViewModel model tampilan untuk memanfaatkan Toolkit MVVM.
• Integrasikan injeksi dependensi untuk mengelola ViewModels dan layanan.
• Buat proyek pengujian unit untuk menguji ViewModels dan layanan Anda.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan prasyarat berikut:

• Visual Studio 2022 (versi 17.14 atau yang lebih baru) atau Visual Studio 2026 dengan beban kerja pengembangan aplikasi WinUI terinstal.
• Proyek pemula yang dibuat dengan mengikuti langkah-langkah dalam tutorial Membuat aplikasi WinUI . Jika Anda sudah terbiasa dengan tutorial, Anda dapat mengunduh kode untuk memulai di sini dari repositori GitHub.

Apa itu MVVM Toolkit?

MVVM Toolkit adalah pustaka modern, ringan, dan cepat yang membantu Anda menerapkan pola desain MVVM di aplikasi .NET Anda. Ini adalah bagian dari Toolkit Komunitas .NET dan menyediakan serangkaian alat dan utilitas untuk menyederhanakan pengembangan aplikasi berbasis MVVM. Toolkit MVVM mencakup fitur-fitur seperti:

• ObservableObject: Kelas dasar yang mengimplementasikan INotifyPropertyChanged antarmuka, sehingga Anda dapat membuat model tampilan yang memberi tahu tampilan perubahan properti.
• RelayCommand: Implementasi perintah yang memungkinkan Anda mengikat tindakan UI ke metode dalam model tampilan Anda.
• Messenger: Sistem olahpesan yang memungkinkan komunikasi antara berbagai bagian aplikasi Anda tanpa coupling yang ketat.
• Atribut: Sekumpulan atribut yang dapat Anda gunakan untuk menghasilkan kode boilerplate, seperti pemberitahuan perubahan properti dan implementasi perintah.
• Generator Kode Sumber: Generasi kode pada waktu kompilasi yang mengurangi kode template dan meningkatkan performa.
• Dukungan Injeksi Dependensi: Dukungan bawaan untuk injeksi dependensi untuk mengelola siklus hidup model dan layanan tampilan.

Toolkit MVVM dirancang agar mudah digunakan dan diintegrasikan ke dalam proyek yang ada. Ini kompatibel dengan berbagai platform .NET, termasuk WinUI, WPF, dan .NET MAUI. Anda dapat memeriksa beberapa aplikasi sampel pada repositori GitHub atau aplikasi sampel di Microsoft Store untuk melihat bagaimana Toolkit MVVM dapat digunakan dalam skenario yang berbeda.

Bagaimana MVVM Toolkit dibandingkan dengan pendekatan MVVM tradisional?

Toolkit MVVM mengurangi jumlah kode ViewModel boilerplate dan menyederhanakan banyak aspek penerapan pola desain MVVM dibandingkan dengan pendekatan tradisional. Berikut adalah beberapa perbedaan utama:

Fitur	Pendekatan MVVM tradisional	Pendekatan Toolkit MVVM
Pemberitahuan Perubahan Properti	Terapkan INotifyPropertyChanged secara manual di kelas dasar dan ajukan PropertyChanged peristiwa untuk setiap properti.	Warisi dari ObservableObject dan gunakan metode SetProperty untuk secara otomatis menaikkan event PropertyChanged.
Implementasi Perintah	Terapkan ICommand secara manual untuk setiap perintah.	Gunakan RelayCommand untuk membuat perintah dengan mudah dengan boilerplate minimal.
Messaging	Terapkan sistem olahpesan kustom atau gunakan pustaka pihak ketiga.	Gunakan kelas bawaan Messenger untuk komunikasi yang dipisahkan antar komponen.
Kode Boilerplate	Tulis kode berulang untuk pemberitahuan perubahan properti dan implementasi perintah.	Gunakan atribut dan generator sumber untuk mengurangi kode boilerplate.
Performance	Mungkin memiliki overhead performa karena penggunaan refleksi dan pembuatan kode saat runtime.	Pembangkit kode sumber menyediakan pembuatan kode pada saat kompilasi, meningkatkan kinerja.
Dukungan Injeksi Dependensi	Memerlukan penyiapan manual dan manajemen siklus hidup model tampilan.	Dukungan bawaan untuk injeksi dependensi untuk mengelola siklus hidup model tampilan.
Kurva Pembelajaran	Mungkin memerlukan pemahaman yang lebih mendalam tentang konsep dan pola MVVM.	Lebih mudah dipelajari dan digunakan dengan fokus pada kesederhanaan dan produktivitas.

Untuk latar belakang selengkapnya tentang pola desain MVVM, lihat Pengikatan data Windows dan MVVM, Model-View-ViewModel (MVVM), dan dokumentasi referensi untuk Antarmuka INotifyPropertyChanged.

Aplikasi Catatan WinUI

Aplikasi akhir yang Anda buat dalam tutorial ini adalah versi refaktor dari aplikasi Catatan WinUI dari tutorial Membuat aplikasi WinUI . Aplikasi ini memungkinkan pengguna membuat, menyimpan, dan memuat beberapa catatan. Antarmuka pengguna aplikasi asli tetap sama, tetapi arsitektur yang diperbarui menggunakan Toolkit MVVM untuk pengikatan data dan melihat manajemen model.

AllNotesPage

Halaman Catatan

Petunjuk / Saran

Saat membuat aplikasi Windows, Anda sering merujuk ke dokumen referensi API dan dokumen konseptual. Dalam tutorial ini, Anda melihat tautan sebaris dalam teks, dan dalam grup berlabel, "Pelajari lebih lanjut di dokumen:". Tautan ini bersifat opsional; Anda tidak perlu mengikutinya untuk menyelesaikan tutorial. Mereka disediakan jika Anda ingin mencatat di mana menemukan informasi yang akan Anda butuhkan saat Anda mulai membuat aplikasi Anda sendiri.

Lanjutkan ke langkah 1 - Buat proyek pustaka kelas terpisah