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.12 atau yang 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 :

   Pilih template.

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 Debug Target drop-down untuk memilih Android Emulators dan kemudian pilih entri Android Emulator:

   

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

   

   Visual Studio akan memulai proses penginstalan Android SDK dan Android Emulator default.

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

   

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

   

   Tunggu hingga Visual Studio mengunduh Android SDK dan Android Emulator default.

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

    

11. Dalam dialog Platform Android SDK hilang, tekan tombol Instal:

    

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

    

    Tunggu hingga Visual Studio menginstal komponen Android SDK.

13. Di jendela Perangkat Baru, tekan tombol Buat :

    Jendela Perangkat Android baru.

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

14. Tutup jendela Android Device Manager :

    Jendela Android Device Manager.

15. Di toolbar Visual Studio, tekan tombol Pixel 7 - API 35 (Android 15.0 - API 35):

    

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

    

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

    

    Tunggu hingga Visual Studio diinstal untuk mengunduh Android SDK.

18. Di toolbar Visual Studio, tekan tombol Pixel 7 - API 35 (Android 15.0 - API 35) 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).

19. 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 Panduan Pemecahan Masalah emulator Android.

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

   

7. 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 Debug Target drop-down untuk memilih iOS Simulator kemudian iOS simulator 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 Code.

Visual Studio Code

Prasyarat

• Visual Studio Code, dengan ekstensi .NET MAUI terinstal dan dikonfigurasi:
  • Akun Microsoft Anda tersambung ke C# Dev Kit.
  • .NET SDK terinstal.
  • .NET MAUI SDK terinstal.
  • Xcode diinstal di Mac Anda, termasuk runtime simulator dan alat baris perintah Xcode, jika menargetkan platform Apple.
  • Microsoft OpenJDK, Android SDK, dan emulator Android terinstal di komputer Anda, jika menargetkan Android.

Untuk informasi selengkapnya, lihat instalasi.

Membuat aplikasi

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

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

Dalam tutorial ini, Anda akan membuat aplikasi .NET MAUI pertama Anda di Visual Studio Code di Mac, dan menjalankannya di macOS:

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

1. Luncurkan Visual Studio Code. DiExplorer, tekan Buat Proyek .NET:

   

   Atau, tekan Ctrl+Shift+P di Windows, atau Cmd+Shift+P di macOS, lalu perintah .NET: Proyek Baru... .

2. Di palet perintah, pilih templat Aplikasi .NET MAUI:

   

3. Dalam dialog Lokasi Proyek , pilih lokasi tempat Anda ingin membuat proyek baru.

   Penting

   Proyek harus dibuat dalam folder kosong.

4. Di palet perintah, masukkan nama untuk proyek baru Anda dan tekan ENTER:

   

5. Di palet perintah, tekan Buat proyek:

   

   Tunggu hingga proyek dibuat, menerima folder sebagai lokasi tepercaya jika diperlukan.

6. DiExplorer , perluas simpul akar proyek Anda lalu buka file C# seperti MainPage.xaml.cs:

   

7. Di Visual Studio Code, verifikasi bahwa lingkungan Android Anda dikonfigurasi dengan benar dengan menekan Ctrl+Shift+P di Windows, atau Cmd+Shift+P di macOS, lalu pilih .NET MAUI: Konfigurasikan Android, diikuti dengan Refresh lingkungan Android. Setiap kesalahan yang terdeteksi harus diatasi.

8. Di bilah status di bagian bawah Visual Studio Code, tekan simbol kurung kurawal { } dan pastikan bahwa Target Debug diatur ke emulator Android tertentu:

   

   Anda juga dapat mengatur target debug dengan menekan Ctrl+Shift+P di Windows, atau Cmd+Shift+P di macOS, dan memilih .NET MAUI: Pilih Perangkat Android dari palet perintah.

9. Buat dan jalankan aplikasi di Android dengan menekan F5 atau dengan menekan tombol Jalankan di sudut kanan atas Visual Studio Code:

   

   Jika Anda diminta untuk memilih debugger di palet perintah, pilih C# lalu konfigurasi peluncuran untuk proyek Anda.

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

    

Men-debug aplikasi di perangkat Android

Untuk men-debug aplikasi di perangkat Android:

1. Pastikan perangkat Anda disiapkan untuk penyebaran. Untuk informasi selengkapnya, lihat Menyiapkan perangkat untuk penyebaran.
2. Colokkan perangkat Anda ke komputer Anda dan pilih sebagai target debug di Visual Studio Code.
3. Jalankan aplikasi.

7. Di Visual Studio Code, verifikasi bahwa lingkungan Apple Anda dikonfigurasi dengan benar dengan menekan Cmd+Shift+P lalu memilih .NET MAUI: Mengonfigurasi Apple, diikuti dengan Refresh lingkungan Apple. Setiap kesalahan yang terdeteksi harus diatasi.

8. Di bilah status di bagian bawah Visual Studio Code, tekan simbol kurung kurawal { } dan pastikan bahwa Target Debug diatur ke simulator iOS tertentu:

   

   Anda juga dapat mengatur target debug dengan menekan Cmd+Shift+P dan memilih .NET MAUI: Pilih Perangkat iOS dari palet perintah.

9. Buat dan jalankan aplikasi di iOS dengan menekan F5 atau dengan menekan tombol Jalankan di sudut kanan atas Visual Studio Code:

   

   Jika Anda diminta untuk memilih debugger di palet perintah, pilih C# lalu konfigurasi peluncuran untuk proyek Anda.

10. Di aplikasi yang sedang berjalan di simulator iOS yang Anda pilih, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

    

Men-debug aplikasi di perangkat iOS

Untuk men-debug aplikasi di perangkat iOS:

1. Pastikan Anda telah menambahkan ID Apple ke Xcode di Pengaturan > Xcode > Akun.
2. Pastikan perangkat Anda telah terdaftar di tim Anda, jika Anda termasuk dalam Program Pengembang Apple.
3. Aktifkan Mode Pengembang di perangkat Anda. Saat pertama kali menjalankan aplikasi, Anda mungkin menerima pop-up di perangkat - pastikan Anda memilih Izinkan. Untuk informasi selengkapnya tentang Mode Pengembang, lihat Mengaktifkan Mode Pengembang pada perangkat di developer.apple.com.
4. Colokkan perangkat Anda ke komputer Anda dan pilih sebagai target debug di Visual Studio Code.
5. Jalankan aplikasi.

7. Di Visual Studio Code, verifikasi bahwa lingkungan Apple Anda dikonfigurasi dengan benar dengan menekan Cmd+Shift+P lalu memilih .NET MAUI: Mengonfigurasi Apple, diikuti dengan Refresh lingkungan Apple. Setiap kesalahan yang terdeteksi harus diatasi.

8. Di bilah status di bagian bawah Visual Studio Code, tekan simbol kurung kurawal { } dan pastikan Target Debug diatur ke Mac Anda:

   

   Anda juga dapat mengatur target debug dengan menekan Cmd+Shift+P dan memilih .NET MAUI: Pilih Perangkat macOS dari palet perintah.

9. Buat dan jalankan aplikasi di macOS dengan menekan F5 atau dengan menekan tombol Jalankan di sudut kanan atas Visual Studio Code:

   

   Jika Anda diminta untuk memilih debugger di palet perintah, pilih C# lalu konfigurasi peluncuran untuk proyek Anda.

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

    

7. Di bilah status di bagian bawah Visual Studio Code, tekan simbol kurung kurawal { } dan pastikan Target Debug diatur ke Windows:

   

   Anda juga dapat mengatur target debug dengan menekan Ctrl+Shift+P dan memilih .NET MAUI: Pilih Perangkat Windows dari palet perintah.

8. Buat dan jalankan aplikasi di Windows dengan menekan F5 atau dengan menekan tombol Jalankan di sudut kanan atas Visual Studio Code:

   

   Jika Anda diminta untuk memilih debugger di palet perintah, pilih C# lalu konfigurasi peluncuran untuk proyek Anda.

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 untuk dikompilasi dan di-deploy, tinjau Pemecahan masalah yang sudah diketahui, yang mungkin memiliki solusi untuk masalah Anda.

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.