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 Code di Windows, macOS, atau Linux. 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 Code

Prasyarat

• Visual Studio Code, dengan ekstensi .NET MAUI terinstal. Untuk informasi selengkapnya, lihat instalasi.

Membuat aplikasi

Untuk membuat aplikasi MAUI .NET baru:

1. Luncurkan Visual Studio Code. Di Explorer, klik Buat Proyek .NET di Explorer. Atau, pilih CTRL/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.

Catatan

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

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

Untuk memilih perangkat target Anda, klik simbol kurung kurawal { } di sudut kanan bawah Visual Studio Code. Anda dapat menggunakan simbol ini untuk 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".

Anda dapat menyebarkan ke komputer pengembangan lokal Anda (desktop Windows atau macOS dengan Xcode) tanpa langkah tambahan.

Target Android

Jika Anda ingin menggunakan emulator Android, ikuti langkah-langkah berikut untuk menginstal dan membuat emulator:

1. Navigasikan di terminal Anda ke <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/11.0/bin/.

2. Gunakan sdkmanager untuk menginstal emulator.

   Di Windows, jalankan perintah berikut di terminal:

   sdkmanager --install emulator
   sdkmanager --install "system-images;android-33;google_apis;x86_64"
   

   Di macOS, jalankan perintah berikut di terminal:

   ./sdkmanager --install emulator
   ./sdkmanager --install "system-images;android-33;google_apis;x86_64"
   

   Catatan

   Tanda kutip di sdkmanager sekitar argumen baris perintah penting.

3. Kemudian, Anda dapat membuat emulator baru di baris perintah dengan avdmanager Android.

   Di Windows, jalankan perintah berikut di terminal:

   avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
   

   Di macOS, jalankan perintah berikut di terminal:

   ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
   

   Catatan

   Tanda kutip di avdmanager sekitar argumen baris perintah penting.

Anda juga dapat men-debug di perangkat Android fisik.

Target iOS

Simulator iOS dibangun ke dalam Xcode. Untuk mengunduh simulator, pastikan bahwa opsi dipilih untuk menginstalnya saat Xcode pertama kali diluncurkan, atau navigasi ke Platform Pengaturan > Xcode > dan pilih runtime simulator untuk diinstal.

Untuk men-debug dengan perangkat iOS, ikuti langkah-langkah ini sebelum mencoba men-debug:

1. Tentukan ID Apple Anda di Akun Pengaturan > Xcode>.
2. Daftarkan perangkat dengan tim Anda jika Anda termasuk dalam Program Pengembang Apple.
3. Aktifkan Mode Pengembang di perangkat Anda, seperti yang dijelaskan dalam Mengaktifkan Mode Pengembang pada perangkat. Saat pertama kali menjalankan aplikasi, Anda mungkin menerima pop-up di perangkat - pastikan Anda memilih Izinkan.

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 C#.

Catatan

Dalam versi pratinjau ekstensi, debugger terdaftar sebagai .NET MAUI. Dalam rilis stabil, konfigurasi ini diganti dengan C#.

Debugger akan secara otomatis memilih target debug dan proyek startup yang Anda tetapkan di menu kurung kurawal { } . Jika Anda belum memilih apa pun, Anda akan diminta 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 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.