Membangun aplikasi pertama Anda

Dalam tutorial ini, Anda akan mempelajari cara membuat dan menjalankan aplikasi .NET Multi-platform App UI (.NET MAUI) pertama Anda di Visual Studio 2022 di Windows atau Visual Studio 2022 untuk Mac. Ini akan membantu memastikan bahwa lingkungan pengembangan Anda disiapkan dengan benar.

Visual Studio

Prasyarat

• Visual Studio 2022 17.8 atau lebih tinggi, dengan beban kerja UI Aplikasi Multi-platform .NET terinstal. Untuk informasi selengkapnya, lihat instalasi.

Membuat aplikasi

Dalam tutorial ini, Anda akan membuat aplikasi MAUI .NET pertama Anda di Visual Studio 2022 dan menjalankannya di emulator Android:

Mengembangkan aplikasi .NET MAUI untuk iOS di Windows memerlukan host build Mac. Jika Anda tidak secara khusus perlu menargetkan iOS dan tidak memiliki Mac, pertimbangkan untuk mulai menggunakan Android atau Windows sebagai gantinya.

Dalam tutorial ini, Anda akan membuat aplikasi MAUI .NET pertama Anda di Visual Studio dan menjalankannya di simulator iOS:

Dalam tutorial ini, Anda akan membuat aplikasi MAUI .NET pertama Anda di Visual Studio 2022 dan menjalankannya di Windows:

1. Luncurkan Visual Studio 2022. Di jendela mulai, klik Buat proyek baru untuk membuat proyek baru:

   

2. Di jendela Buat proyek baru, pilih MAUI di menu drop-down Semua jenis proyek, pilih templat Aplikasi .NET MAUI, dan klik tombol Berikutnya :

   

3. Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda, pilih lokasi yang sesuai untuk proyek tersebut, dan klik tombol Berikutnya :

   

4. Di jendela Informasi tambahan, pilih versi .NET yang ingin Anda targetkan dan klik tombol Buat :

   

5. Tunggu hingga proyek dibuat dan dependensinya dipulihkan:

   

6. Di toolbar Visual Studio, gunakan menu drop-down Target Debug untuk memilih Emulator Android lalu entri Android Emulator :

   

7. Di toolbar Visual Studio, tekan tombol Android Emulator :

   

   Visual Studio akan mulai menginstal Android SDK dan Android Emulator default.

8. Di jendela Android SDK - Perjanjian Lisensi, tekan tombol Terima :

   

9. Di jendela Android SDK - Perjanjian Lisensi, tekan tombol Terima :

   

10. Dalam dialog Kontrol Akun Pengguna, tekan tombol Ya:

    

11. Di jendela Penerimaan Lisensi, tekan tombol Terima :

    

    Tunggu Hingga Visual Studio mengunduh Android SDK dan Android Emulator.

12. Di toolbar Visual Studio, tekan tombol Android Emulator :

    

    Visual Studio akan mulai membuat emulator Android default.

13. Dalam dialog Kontrol Akun Pengguna, tekan tombol Ya:

    

14. Di jendela Perangkat Baru, tekan tombol Buat :

    

    Tunggu hingga Visual Studio mengunduh, membuka zip, dan membuat emulator Android.

15. Tutup jendela Android Device Manager :

    

16. Di toolbar Visual Studio, tekan tombol Pixel 5 - API 34 (Android 14.0 - API 33) untuk membuat dan menjalankan aplikasi:

    

    Visual Studio akan memulai emulator Android, membangun aplikasi, dan menyebarkan aplikasi ke emulator.

    Peringatan

    Akselerasi perangkat keras harus diaktifkan untuk memaksimalkan performa emulator Android. Kegagalan untuk melakukan ini akan mengakibatkan emulator berjalan sangat lambat. Untuk informasi selengkapnya, lihat Cara mengaktifkan akselerasi perangkat keras dengan emulator Android (Hyper-V & AEHD).

17. Di aplikasi yang sedang berjalan di emulator Android, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah.

    

Pemecahan Masalah

Jika aplikasi Anda gagal dikompilasi, tinjau Pemecahan masalah yang diketahui, yang mungkin memiliki solusi untuk masalah Anda. Jika masalah terkait dengan emulator Android, lihat Pemecahan masalah emulator Android.

6. Di toolbar Visual Studio, gunakan drop-down Target Debug untuk memilih Kerangka Kerja lalu entri net8.0-windows :

   

7. Di toolbar Visual Studio, tekan tombol Windows Machine untuk membuat dan menjalankan aplikasi:

   

   Jika Anda belum mengaktifkan Mode Pengembang, Visual Studio akan meminta Anda untuk mengaktifkannya. Dalam dialog Aktifkan Mode Pengembang untuk Windows, klik pengaturan bagi pengembang untuk membuka aplikasi Pengaturan:

   

   Di aplikasi Pengaturan, aktifkan Mode Pengembang dan terima penafian:

   

   Tutup aplikasi Pengaturan lalu tutup dialog Aktifkan Mode Pengembang untuk Windows.

8. Di aplikasi yang sedang berjalan, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

   

Pemecahan Masalah

Jika aplikasi Anda gagal dikompilasi, tinjau Pemecahan masalah yang diketahui, yang mungkin memiliki solusi untuk masalah Anda.

6. Di Visual Studio, pasangkan IDE ke host Build Mac. Untuk informasi selengkapnya, lihat Memasangkan ke Mac untuk pengembangan iOS.

7. Di toolbar Visual Studio, gunakan drop-down Target Debug untuk memilih Simulator iOS lalu simulator iOS tertentu:

   

8. Di toolbar Visual Studio, tekan tombol Mulai untuk simulator iOS yang Anda pilih untuk membuat dan menjalankan aplikasi Anda:

   

   Visual Studio akan membangun aplikasi, memulai Simulator iOS jarak jauh untuk Windows, dan menyebarkan aplikasi ke simulator jarak jauh. Untuk informasi selengkapnya tentang Simulator iOS jarak jauh untuk Windows, lihat Simulator iOS Jarak Jauh untuk Windows.

9. Di aplikasi yang sedang berjalan, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah.

   

Pemecahan Masalah

Jika aplikasi Anda gagal dikompilasi, tinjau Pemecahan masalah yang diketahui, yang mungkin memiliki solusi untuk masalah Anda.

Aplikasi .NET MAUI yang menargetkan Mac Catalyst hanya dapat diluncurkan dan di-debug menggunakan Visual Studio 2022 untuk Mac.

Visual Studio untuk Mac

Catatan

Visual Studio untuk Mac dijadwalkan untuk dihentikan pada 31 Agustus 2024 sesuai dengan Kebijakan Siklus Hidup Modern Microsoft. Visual Studio untuk Mac 17.6 akan terus didukung hingga 31 Agustus 2024, dengan pembaruan layanan untuk masalah keamanan dan platform yang diperbarui dari Apple. Untuk informasi selengkapnya, termasuk opsi alternatif untuk mengembangkan di Mac, lihat Apa yang terjadi pada Visual Studio untuk Mac?.

Prasyarat

• Visual Studio 2022 untuk Mac 17.6 dengan beban kerja .NET, .NET MAUI, Android, dan iOS terinstal. Untuk informasi selengkapnya, lihat instalasi.

Penting

Untuk menggunakan Visual Studio untuk Mac dengan .NET 8, aktifkan kotak centang Preferensi > Visual Studio > Fitur > Pratinjau Lainnya > Gunakan .NET 8 SDK jika diinstal (memerlukan hidupkan ulang).

Membuat aplikasi

Dalam tutorial ini, Anda akan membuat aplikasi MAUI .NET pertama Anda di Visual Studio 2022 untuk Mac dan menjalankannya di platform yang Anda pilih:

1. Luncurkan Visual Studio 2022 untuk Mac. Di jendela mulai, klik Baru untuk membuat proyek baru:

   

2. Di jendela Pilih templat untuk proyek baru Anda, pilih Aplikasi Multiplatform>, pilih templat Aplikasi .NET MAUI, dan klik tombol Lanjutkan:

   

3. Di jendela Konfigurasikan Aplikasi .NET MAUI baru Anda, pilih versi .NET yang ingin Anda targetkan dan klik tombol Lanjutkan :

   

4. Di jendela Konfigurasikan Aplikasi .NET MAUI baru Anda, masukkan MyMauiApp sebagai nama proyek, pilih lokasi yang sesuai untuk proyek, dan klik tombol Buat :

   

5. Tunggu hingga proyek dibuat dan dependensinya dipulihkan:

   

6. Visual Studio 2022 untuk Mac akan menampilkan infobar jika Mac Anda tidak memiliki komponen Android SDK. Klik tombol Instal untuk menginstal Android SDK:

   

7. Di jendela Android SDK , pilih kotak centang Unduh dan instal dependensi Android secara otomatis dan klik tombol Unduh dan Instal :

   

8. Di jendela Penerimaan Lisensi, klik tombol Terima :

   

   Tunggu Visual Studio 2022 untuk Mac mengunduh Android SDK:

9. Di toolbar Visual Studio 2022 untuk Mac, ubah target debug ke Android Emulator:

   

10. Di toolbar Visual Studio 2022 untuk Mac, tekan tombol Putar untuk membangun aplikasi dan mencoba meluncurkannya:

    

    Visual Studio 2022 untuk Mac akan membangun aplikasi, lalu akan membuat emulator Android default.

11. Di jendela Perangkat Baru, klik tombol Buat :

    

12. Di jendela Penerimaan Lisensi, klik tombol Terima :

    

    Tunggu Hingga Visual Studio 2022 untuk Mac mengunduh dan menginstal emulator Android.

13. Tutup jendela Android Device Manager :

    

14. Di toolbar Visual Studio 2022 untuk Mac, ubah target debug menjadi Pixel 5 - API 34 (API 34):

    

15. Di toolbar Visual Studio 2022 untuk Mac, tekan tombol Putar untuk meluncurkan aplikasi di emulator Android:

    

    Visual Studio 2022 untuk Mac akan memulai emulator Android, membangun aplikasi, dan menyebarkan aplikasi ke emulator.

16. Di aplikasi yang sedang berjalan di emulator Android, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

    

6. Di toolbar Visual Studio 2022 untuk Mac, pastikan target debug diatur ke simulator iOS:

   

7. Di toolbar Visual Studio 2022 untuk Mac, tekan tombol Putar untuk meluncurkan aplikasi di simulator iOS yang Anda pilih:

   

   Visual Studio 2022 untuk Mac akan memulai simulator iOS, membangun aplikasi, dan menyebarkan aplikasi ke simulator.

8. Di aplikasi yang sedang berjalan, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

   

6. Di toolbar Visual Studio 2022 untuk Mac, pastikan target debug diatur ke Mac Saya (MacCatalyst):

   

7. Di Visual Studio 2022 untuk Mac, klik kanan pada proyek MyMauiApp dan pilih Edit File Proyek. Kemudian, di editor file proyek sisipkan XML berikut sebelum yang pertama <ItemGroup>:

   <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
       <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
   </PropertyGroup>
   

8. Di toolbar Visual Studio 2022 untuk Mac, tekan tombol Putar untuk meluncurkan app di Mac Anda:

   

   Visual Studio 2022 untuk Mac akan membangun dan menyebarkan aplikasi.

9. Di aplikasi yang sedang berjalan, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

   

Aplikasi .NET MAUI yang menargetkan Windows hanya dapat diluncurkan dan di-debug menggunakan Visual Studio 2022.

Visual Studio Code (Pratinjau)

Catatan

Dukungan .NET MAUI di Visual Studio Code masih dalam pratinjau. Cobalah dan bagikan umpan balik Anda!

Menginstal ekstensi

Ikuti petunjuk untuk menyiapkan ekstensi .NET MAUI untuk Visual Studio Code.

Membuat aplikasi Anda

Untuk membuat aplikasi MAUI .NET baru:

1. Klik Buat Proyek .NET di Explorer, ATAUCTRL/CMD+SHIFT+P> .NET: Proyek Baru....
2. Pilih Aplikasi MAUI .NET atau Aplikasi Blazor MAUI .NET.
3. Pilih folder kosong. Jika penjelajah file terbuka lagi, folder Anda tidak kosong.
4. Beri Nama proyek.
5. Pastikan proyek berhasil dimuat di Penjelajah Solusi, lalu buka file C# atau XAML.

Anda juga dapat membuka proyek .NET MAUI yang ada di Visual Studio Code melalui File > Open....

Sekarang Anda akan melihat aplikasi Anda di Penjelajah Solusi C# Dev Kit di Visual Studio Code. Karena ekstensi .NET MAUI tergantung pada C# Dev Kit, Anda dapat menggunakan semua fiturnya bersama ekstensi .NET MAUI.

Pilih perangkat target Anda

Klik simbol { } tanda kurung kurawal di sudut kanan bawah Visual Studio Code. Di sini, Anda dapat mengubah Proyek Startup Anda, mengubah Target Debug Anda menjadi apa pun yang valid di komputer pengembangan Anda, dan menyematkan pengaturan ke bilah status Visual Studio Code:

Anda juga dapat mengatur Proyek Startup dan Target Debug di palet perintah, menggunakan CTRL/CMD+SHIFT+P dan mencari ".NET MAUI".

Secara default, Anda dapat menyebarkan ke mesin pengembangan macOS atau Windows lokal Anda. Di macOS, Anda juga dapat menyebarkan ke simulator iOS.

Jika Anda ingin menggunakan emulator Android, ikuti langkah-langkah berikut:

1. Navigasikan di terminal Anda ke <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/.
2. Jalankan sdkmanager --install emulator dan sdkmanager --install system-images;android-33;google_apis;x86_64 di Windows, atau ./sdkmanager --install emulator dan ./sdkmanager --install system-images;android-33;google_apis;x86_64 di macOS.
3. Kemudian, Anda dapat membuat emulator baru di baris perintah dengan avdmanager Android. Misalnya, Anda dapat berjalan avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" di Windows, atau ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" di macOS.

Anda juga dapat men-debug di perangkat Android fisik.

Men-debug aplikasi Anda

Untuk men-debug aplikasi Anda, navigasikan ke menu Jalankan dan Debug Visual Studio Code dan pilih tombol "Jalankan dan Debug". Atau, Anda dapat menggunakan F5 untuk memulai sesi debug. Jika Visual Studio Code meminta Anda untuk memilih debugger, pastikan Anda memilih ".NET MAUI".

Debugger akan secara otomatis memilih Target Debug dan Proyek Startup yang Anda tetapkan di menu kurung kurawal { } . Jika Anda belum memilih apa pun, ini akan meminta Anda untuk memilih Target Debug.

Setelah aplikasi memulai penelusuran kesalahan, Anda dapat menggunakan alat penelusuran kesalahan Visual Studio Code bawaan untuk mengatur titik henti, melangkah ke seluruh kode Anda, dan banyak lagi.

Pelajari lebih lanjut

Jika Anda menghadapi masalah dengan ekstensi, Anda dapat mengikuti langkah-langkah pemecahan masalah, melihat masalah kami yang diketahui, atau memberikan umpan balik.

Langkah berikutnya

Dalam tutorial ini, Anda telah mempelajari cara membuat dan menjalankan aplikasi .NET Multi-platform App UI (.NET MAUI) pertama Anda.

Untuk mempelajari dasar-dasar membangun aplikasi dengan .NET MAUI, lihat Membuat aplikasi .NET MAUI. Atau, untuk kursus pelatihan .NET MAUI lengkap, lihat Membangun aplikasi seluler dan desktop dengan .NET MAUI.