Latihan: Membuat aplikasi .NET MAUI pertama Anda

  • 5 menit

Dalam latihan ini, Anda mulai membangun aplikasi .NET MAUI (Antarmuka Pengguna Aplikasi Multi-platform) untuk rantai toko kelontong. Anda menggunakan templat untuk menghasilkan aplikasi default dan menjalankannya di Windows dan di emulator Android. Dalam latihan selanjutnya, Anda memodifikasi aplikasi ini untuk menyesuaikan antarmuka pengguna dan menambahkan fungsionalitas yang diperlukan oleh aplikasi rantai toko kelontong.

Membuat proyek baru

  1. Buka Visual Studio dan buat solusi baru. Tindakan ini akan membuka wizard Proyek Baru di Visual Studio.

    Tip

    Pastikan Anda memiliki beban kerja .NET MAUI yang diinstal dengan Visual Studio 2022 v17.3 atau yang lebih baru (v17.8 lebih disukai dengan .NET 8). Info selengkapnya di sini.

  2. Pilih jenis proyek MAUI, pilih templat Aplikasi .NET MAUI, dan pilih Berikutnya.

    Cuplikan layar kotak dialog Buat proyek baru. Templat Aplikasi .NET MAUI dipilih.

  3. Pada halaman Konfigurasi proyek baru Anda, beri nama proyek Phoneword, kemudian simpan di lokasi pilihan Anda. Pilih Selanjutnya.

    Cuplikan layar kotak dialog Konfigurasikan proyek baru Anda. Pengguna menamai proyek Phoneword dan memilih lokasi di hard drive mereka untuk menyimpannya.

  4. Pilih .NET 8.0 (Dukungan Jangka Panjang) di menu drop-down Kerangka Kerja , lalu pilih Buat untuk membuat aplikasi.

Memeriksa struktur solusi

  1. Di jendela Penjelajah Solusi, perluas proyek Phoneword. Perluas folder Sumber Daya dan subfoldernya, lalu perluas simpul App.xaml, simpul AppShell.xaml, dan simpul MainPage.xaml.

    Cuplikan layar proyek Phoneword di jendela penjelajah solusi Visual Studio.

  2. Dalam proyek, perhatikan item berikut ini:

    • Folder Sumber Daya berisi font, gambar, serta aset bersama yang digunakan oleh semua platform.

    • File MauiProgram.cs berisi kode yang mengonfigurasi aplikasi dan menentukan bahwa kelas Aplikasi harus digunakan untuk menjalankan aplikasi.

    • File App.xaml.cs , konstruktor untuk kelas Aplikasi , membuat instans baru kelas AppShell , yang kemudian ditampilkan di jendela aplikasi.

    • File AppShell.xaml berisi tata letak utama aplikasi dan halaman awal MainPage.

    • File MainPage.xaml berisi tata letak halaman. Tata letak ini mencakup kode XAML (Extensible Application Markup Language) untuk tombol dengan keterangan Klik saya dan gambar yang menampilkan file dotnet_bot.png . Selain itu, ada juga dua label lain.

    • File MainPage.xaml.cs berisi logika aplikasi halaman tersebut. Secara khusus, kelas MainPage menyertakan metode bernama OnCounterClicked yang berjalan saat pengguna mengetuk tombol Klik saya .

Membangun dan menjalankan aplikasi di Windows

  1. Di toolbar Visual Studio, pilih profil Mesin Windows. Pilih .net8.0-windows dari daftar dalam kotak daftar drop-down kerangka kerja.

    Cuplikan layar dropdown runtime target di Visual Studio. Pengguna mengatur profil Windows Machine sebagai profil startup untuk solusi.

  2. Pada menu Debug, pilih Mulai Debugging. Tindakan ini membangun, menyebarkan, dan menjalankan aplikasi di Windows:

    Cuplikan layar menu debug Visual Studio. Pengguna sedang menelusuri kesalahan aplikasi menggunakan profil Windows Machine.

  3. Pastikan bahwa versi Windows aplikasi dimulai. Pilih tombol Klik saya beberapa kali. Teks tombol harus diperbarui dengan hitungan atau nomor yang bertambah setiap ada ketukan.

    Cuplikan layar aplikasi Windows UI yang berjalan. Pengguna mengetuk tombol 'Klik saya' empat kali.

  4. Di menu Tampilan, pilih Penjelajah Solusi. Di jendela Penjelajah Solusi, perluas simpul MainPage.xaml dan buka file MainPage.xaml.cs code-behind.

  5. Dalam metode OnCounterClicked, sebagai gantinya, ubah pernyataan yang menambah variabel count agar menambahkan 5 ke variabel ini:

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. Di toolbar Visual Studio, pilih tombol Hot Reload:

    Cuplikan layar toolbar Visual Studio. Tombol Muat Ulang Panas disorot.

  7. Beralihlah kembali ke aplikasi dan pilih tombol Klik saya. Verifikasi bahwa jumlahnya sekarang bertambah 5.

    Catatan

    Fitur Hot Reload Visual Studio memungkinkan Anda memodifikasi kode saat aplikasi berjalan dalam mode Debug. Anda tidak perlu menghentikan aplikasi untuk melihat perubahan. Selain mengubah kode, Anda juga dapat membuat perubahan pada markup XAML halaman, dan perubahan ini akan terlihat di aplikasi yang sedang berjalan.

  8. Tutup aplikasi dan kembali ke Visual Studio.

Membuat dan menjalankan aplikasi di Android

  1. Di toolbar Visual Studio, pilih proyek Phoneword.

  2. Pada menu Alat, pilih Android, lalu pilih Manajer Perangkat Android. Jika Anda diminta untuk mengizinkan Android Device Manager membuat perubahan pada komputer Anda, pilih Ya.

    Cuplikan layar menu alat Visual Studio. Pengguna memilih opsi Android Device Manager.

  3. Di jendela Manajer Perangkat Android, pilih + Baru. Di jendela Perangkat Baru, pilih perangkat dasar Pixel 3a (+ Store), pilih API 30 OS, dan pilih Buat. Tunggu sebelum beragam pustaka sedang diunduh dan perangkat dikonfigurasi.

    Catatan

    Contoh dalam latihan ini menggunakan perangkat dasar Pixel 3a (+ Store), tetapi Anda dapat menggunakan perangkat yang lebih baru. Misalnya Pixel 5 - API 31 atau Pixel 5 - API 34.

    Cuplikan layar jendela Perangkat Baru dari Android SDK. Pengguna membuat perangkat Pixel 3 baru dengan API 30 dipilih.

  4. Saat perangkat dibuat, kembali ke Visual Studio.

  5. Di toolbar Visual Studio, di kotak daftar drop-down Konfigurasi debug , pilih profil Android Emulators . Pilih perangkat api_30 pixel_3a yang Anda buat.

    Cuplikan layar toolbar Visual Studio. Pengguna menentukan Pixel 3 dengan profil API 30 untuk emulator Android untuk mulai men-debug.

  6. Mulai penelusuran kesalahan gunakan profil api_30 pixel_3a. Tindakan ini membangun, menyebarkan, dan menjalankan aplikasi di perangkat Android.

    Cuplikan layar toolbar Visual Studio. Ini menunjukkan profil piksel 3 a p i 30 dipilih dan siap untuk memulai penelusuran kesalahan segera setelah pengguna menekan tombol putar.

  7. Ketika aplikasi mulai berjalan di emulator (tindakan ini dapat memakan waktu beberapa menit), pilih tombol Klik saya dan periksa apakah aplikasi berjalan dengan cara yang sama persis seperti yang dilakukannya di Windows.

    Cuplikan layar versi Android dari aplikasi Phoneword yang berjalan di emulator yang dipilih.

  8. Kembali ke Visual Studio dan hentikan proses penelusuran kesalahan.