Tutorial MAUI .NET - Bangun aplikasi multi-platform pertama Anda di C #
Perkenalan
Tujuan
Siapkan lingkungan pengembangan dan buat aplikasi .NET Multi-platform App UI (.NET MAUI) pertama Anda.
Prasyarat
Periksa persyaratan sistem untuk Visual Studio 2022.
Persyaratan minimum untuk Xcode versi terbaru.
Waktu untuk Menyelesaikan
10 menit + waktu pengunduhan/penginstalan
Skenario
Aplikasi seluler dan desktop yang berjalan di Windows dan Android yang menampilkan pesan Hello, World!.
Aplikasi seluler dan desktop yang berjalan di Mac dan iOS yang menampilkan pesan Hello, World!.
Unduh dan instal
Unduh dan instal Visual Studio 2022.
Selama penginstalan, beban kerja pengembangan .NET Multi-platform App UI harus dipilih. Menggunakan tautan di atas harus lebih awal memilih semua prasyarat dengan benar, seperti yang ditunjukkan pada gambar berikut:
Sudah memiliki Visual Studio 2022?
Jika Anda sudah memiliki Visual Studio 2022, pastikan sudah diperbarui dan memiliki beban kerja yang diperlukan terinstal:
- Pilih tombol Windows, ketik Penginstal Visual Studio, dan tekan Enter.
- Jika diminta, izinkan penginstal untuk memperbarui sendiri.
- Jika pembaruan untuk Visual Studio 2022 tersedia, tombol Perbarui akan ditampilkan. Pilih tombol tersebut untuk memperbarui sebelum mengubah penginstalan. Tutorial ini hanya berfungsi pada Visual Studio 2022 17.12 dan versi yang lebih baru.
- Temukan penginstalan Visual Studio 2022 Anda dan pilih Ubah.
- Pilih Pengembangan .NET Multi-platform App UI.
- Pilih tombol Ubah.
-
Unduh dan instal .NET SDK. Setelah pengunduhan selesai, luncurkan unduhan untuk memulai penginstalan.
Unduh .NET 9 SDK x64 (Intel)
Unduh .NET 9 SDK Arm64 (Apple Silicon)Jika menggunakan Mac dengan chip Apple M1 atau M2, Anda perlu menginstal SDK versi Arm64.
-
Unduh dan instal Visual Studio Code:
-
Buka Visual Studio Code dan pilih Tombol ekstensi di Bilah Aktivitas Visual Studio Code di sebelah kiri. Ketik MAUI di bilah pencarian, pilih .NET MAUI, lalu pilih tombol Instal di halaman ekstensi .NET MAUI.
![Ekstensi MAUI Visual Studio Code']()
Ekstensi ini dilengkapi dengan C# Dev Kit dan ekstensi C#, yang diperlukan agar ekstensi .NET MAUI dapat berjalan.
![Dependensi Ekstensi MAUI Visual Studio Code]()
-
Buka terminal baru dan instal beban kerja .NET MAUI dengan menjalankan perintah berikut:
Terminalsudo dotnet workload install mauiJika penginstalan berhasil, Anda akan melihat output yang mirip dengan berikut ini:
TerminalSuccessfully installed workload maui
Periksa semuanya terinstal dengan benar
Setelah menyiapkan lingkungan, buka terminal Visual Studio Code baru. Di toolbar, pilih Terminal, lalu Terminal Baru.
Di terminal Anda, jalankan perintah berikut untuk memeriksa penginstalan Anda.
dotnet workload list
Jika penginstalan berhasil, Anda akan melihat output yang mirip dengan berikut ini:
Installed Workload Id Manifest Version Installation Source
--------------------------------------------------------------------
maui 8.0.82/8.0.100 SDK 8.0.400
Use `dotnet workload search` to find additional workloads to install.Ada kesalahan?
Jika Anda menerima kesalahan 'dotnet' tidak dikenali sebagai perintah internal atau eksternal, pastikan Anda membuka terminal Visual Studio Code baru. Jika memulai ulang Visual Studio Code atau memulai ulang mesin Anda tidak menyelesaikan masalah, gunakan tombol Saya mengalami masalah di bagian bawah laman untuk mendapatkan bantuan memperbaiki masalah tersebut.
Instal Xcode
Untuk membuat aplikasi .NET MAUI, Anda juga memerlukan:
-
Untuk menemukan Xcode versi terbaru yang kompatibel dengan .NET MAUI, periksa referensi versi rilis ini. Buka kolom Alat Apple untuk menemukan versi Xcode terbaru yang kompatibel.
-
ID Apple
Jika belum memiliki ID Apple, Anda dapat membuat yang baru di https://appleid.apple.com. ID Apple diperlukan untuk menginstal dan masuk ke Xcode.
Setelah menginstal Xcode, Anda harus membuka Xcode dan menyetujui perjanjian lisensi dan menginstal komponen opsional, jika diminta.
-
Saat ditanya platform apa yang ingin Anda kembangkan, pilih platform macOS dan iOS lalu pilih Unduh & Instal.
![Perintah Xcode untuk menginstal platform macOS dan iOS]()
-
Buka terminal baru dan instal alat pengembang baris perintah Xcode dengan menjalankan perintah berikut:
Terminalxcode-select --installSaat diminta untuk menginstal alat pengembang baris perintah Xcode, pilih Instal. Terakhir, menyetujui perjanjian lisensi.
![Perintah Xcode untuk menginstal alat pengembang baris perintah]()
Jika semuanya terlihat baik, pilih tombol Lanjutkan di bawah untuk melanjutkan ke langkah berikutnya.
Buat aplikasi Anda
Buat aplikasi .NET MAUI baru:
- Buka Visual Studio 2022.
- Pilih tombol Buat proyek baru.
-
Di jendela Buat proyek baru, ketik Aplikasi MAUI di bilah pencarian. Pilih templat Aplikasi .NET MAUI, lalu klik tombol Berikutnya.
![Dialog proyek baru Visual Studio dengan Aplikasi MAUI .NET dipilih]()
-
Di jendela Konfigurasikan proyek baru Anda, masukkan MyFirstMauiApp sebagai nama proyek dan klik tombol Berikutnya.
![Visual Studio mengonfigurasi dialog proyek baru Anda dengan MyFirstMauiApp sebagai nama proyek]()
-
Di jendela Informasi tambahan, pilih.NET 9.0 di menu menurun Kerangka Kerja jika belum dipilih dan klik tombol Buat.
![Dialog informasi tambahan Visual Studio menampilkan .NET 8.0 dalam menu drop-down Kerangka Kerja.]()
Visual Studio membuat proyek baru. Jika Anda mendapatkan Peringatan Keamanan Windows yang memperingatkan Anda tentang firewall yang memblokir beberapa fitur, pilih tombol Izinkan akses.
Tunggu proses pemulihan paket NuGet
NuGet adalah manajer paket yang akan memasukkan dependensi aplikasi baru Anda.
Proses pemulihan paket akan dimulai secara otomatis. Tunggu hingga pesan Dipulihkan atau Siap muncul di bilah status di bagian kiri bawah layar.
- Buka palet perintah di Visual Studio Code dengan menekan CMD+SHIFT+P.
- Ketik .NET: untuk melihat perintah yang dapat Anda jalankan dengan C# Dev Kit!
- Temukan dan pilih .NET: Proyek Baru untuk membuat proyek .NET baru.
- Pilih Aplikasi .NET MAUI.
- Pilih lokasi folder tempat Anda ingin menyimpan proyek Anda.
- Beri nama proyek MyFirstMauiApp di palet perintah saat diminta.
Jika Anda memiliki Visual Studio Subscription, masuk ke akun Anda. Jika Anda tidak melihat pop-up perintah, klik ikon C# di Bilah Status Visual Studio Code di kanan bawah jendela Anda.
Di Sidebar VS Code, pastikan Penjelajah terbuka. Di sini Anda akan melihat folder dan Penjelajah Solusi. Jika Anda membuka instance Visual Studio Code baru, Penjelajah Solusi mungkin berada di dekat bagian bawah sidebar.
Di bawah Penjelajah Solusi, pilih MainPage.xaml. File ini berisi markup yang menjelaskan struktur dan tata letak elemen antarmuka pengguna di aplikasi MAUI Anda.
Jalankan aplikasi Anda
Tutorial ini akan fokus pada penyebaran aplikasi MAUI .NET ke komputer Windows lokal Anda terlebih dahulu. Nantinya, Anda akan memiliki opsi untuk menyiapkan perangkat android atau emulator.
Di toolbar Visual Studio, target debug default adalah Komputer Windows. Tekan tombol Komputer Windows untuk membuat dan menjalankan aplikasi:
Di aplikasi yang berjalan, pilih tombol Klik ini beberapa kali dan perhatikan jumlah klik tombol bertambah:
Tutorial ini akan fokus pada penyebaran aplikasi .NET MAUI ke komputer Mac lokal Anda terlebih dahulu. Nantinya, Anda akan memiliki opsi untuk berjalan di simulator iOS.
Di kanan bawah jendela Visual Studio Code, Anda akan melihat kurung kurawal di Bilah Status. Klik pada kurung kurawal, dan Anda akan melihat Mac Saya dipilih sebagai target debug default.
Jika Anda tidak melihat kurung kurawal di Bilah Status, pastikan Anda membuka file proyek relevan seperti file .cs, .xaml, atau .csproj yang termasuk dalam proyek .NET MAUI. Alternatifnya, Anda dapat membuka palet perintah di VS Code dengan menekan CMD+SHIFT+P. Lalu ketik .NET MAUI: Pilih. Hal tersebut akan memperlihatkan opsi untuk memilih platform debug untuk proyek Anda.
Jika Anda tidak melihat apa pun yang dipilih, klik Target Debug dan pilih Mac Saya dari daftar. Harap dicatat, ini mungkin bukan item pertama dalam daftar Anda saat pertama kali memilih target debug.
Untuk menjalankan aplikasi, klik ikon Jalankan dan Debug di Bilah Aktivitas Visual Studio Code. Lalu klik Jalankan dan Debug.
Di aplikasi yang berjalan, pilih tombol Klik ini beberapa kali dan perhatikan jumlah klik tombol bertambah:
Selamat, Anda telah membuat dan menjalankan aplikasi .NET MAUI pertama Anda! Biarkan aplikasi tetap berjalan dan lanjutkan tutorial.
Edit kode Anda
Saat mengembangkan aplikasi dengan .NET MAUI, XAML Hot Reload tersedia saat Anda sedang men-debug aplikasi. Ini berarti Anda dapat mengubah antarmuka pengguna (UI) XAML saat aplikasi sedang berjalan dan UI akan diperbarui secara otomatis.
Kembali ke Visual Studio dan biarkan aplikasi berjalan. Di Penjelajah Solusi, klik dua kali file MainPage.xaml di bawah proyek MyFirstMauiApp. Jika Anda tidak melihat panel Penjelajah Solusi, pilih Tampilan > Penjelajah Solusi dari menu utama (atau tekan CTRL+ALT+L).
Kembali ke file MainPage.xaml di VS Code dan biarkan aplikasi berjalan.
Saat ini, Text dari Label kedua pada baris 17 diatur untuk menampilkan Hello, World! seperti yang ditunjukkan pada kode berikut:
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />Perbarui teks untuk membaca Hello, .NET MAUI!:
<Label
Text="Hello, .NET MAUI!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />UI aplikasi diperbarui secara otomatis saat Anda membuat perubahan.
Saat mengembangkan aplikasi dengan .NET MAUI, Anda juga dapat menggunakan .NET Hot Reload untuk memuat ulang kode C# Anda. Mari ubah logika dalam aplikasi agar ketika tombol diklik, hitungannya bertambah 10, dan bukan 1.
Buka MainPage.xaml.cs (file ini berada di bawah MainPage.xaml, atau Anda dapat mengklik kanan dan memilih Lihat Kode dari menu).
Metode OnCounterClicked pada file tersebut saat ini memiliki kode berikut:
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Perbarui count++; menjadi bertambah 10 dengan mengubahnya menjadi count += 10;.
private void OnCounterClicked(object sender, EventArgs e)
{
count += 10;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Untuk menerapkan perubahan kode Anda, simpan file dan pilih tombol Hot Reload di Visual Studio atau pilih ALT+F10.
Pilih tombol Klik ini dan lihat hitungannya bertambah 10. Bagus! Anda dapat menutup aplikasi yang sedang berjalan sekarang.
Jalankan di perangkat seluler
Anda dapat memutuskan untuk menyebarkan ke satu atau beberapa platform berdasarkan lingkungan pengembangan. Anda baru saja menjalankan dan menyebarkan aplikasi ke Windows. Sekarang, mari siapkan perangkat Android atau emulator.
Aktifkan Hyper-V
Pada Bilah Windows Search Anda, ketik Fitur Windows, lalu pilih Aktifkan atau nonaktifkan fitur Windows.
Pastikan kotak Hyper-V dicentang dan pilih Oke.
Anda perlu melakukan boot ulang mesin pada saat ini agar perubahan diterapkan.
Penginstalan SDK Android
Buka Visual Studio dan solusi MyFirstMauiApp Anda. Dari menu drop-down target debug, pilih net8.0-android di bawah Kerangka Kerja.
Versi khusus Android SDK diperlukan untuk membuat proyek. Jika Anda belum menerima lisensi Android SDK, Anda akan melihat pesan kesalahan berikut di jendela Daftar Kesalahan.
Klik dua kali pesan untuk memulai proses penerimaan lisensi. Klik Terima untuk setiap lisensi yang ada dan penginstalan otomatis akan dimulai.
Siapkan emulator Android
Jika tidak ada perangkat Android untuk disebarkan, Anda dapat mengikuti langkah-langkah berikut untuk menyiapkan emulator Android. Jika Anda sudah melakukan ini atau ingin menggunakan perangkat Android sendiri, Anda dapat melewati langkah ini.
Jika ini pertama kalinya Anda membuat aplikasi MAUI .NET, Anda akan melihat Android Emulator dipilih di menu drop-down target debug. Klik untuk memulai proses pembuatan. Jika dialog penerimaan lisensi muncul, pilih Terima.
Jendela Perangkat Baru akan muncul. Pilih tombol Buat untuk membuat emulator dengan pengaturan default. Ini akan mengunduh gambar emulator dan menyelesaikan pembuatan emulator untuk digunakan di Visual Studio. Langkah ini mungkin memerlukan waktu beberapa saat.
Jangan khawatir jika Tingkat API yang Anda lihat berbeda dari gambar. Mungkin 33 atau lebih tinggi.
Setelah emulator dibuat, Anda akan melihat tombol yang mengatakan Mulai. Klik.
Anda mungkin diminta mengaktifkan Platform Windows Hypervisor. Ikuti dokumentasi untuk mengaktifkan akselerasi guna meningkatkan performa (diperlukan agar emulator berfungsi). Pilih Tetap Jalankan.
Emulator Android akan diluncurkan dan akan sepenuhnya selesai ketika Anda melihat kemampuan untuk Hentikan di Manajer Perangkat Android. Ini mungkin perlu beberapa saat.
Setelah selesai, Anda akan melihatnya ditampilkan di menu debug Visual Studio.
Emulator Android Anda kini telah dibuat dan siap digunakan. Saat berikutnya Anda menjalankan Visual Studio, emulator akan muncul langsung di jendela target debug dan akan dimulai saat Anda memilihnya. Jika Anda mengalami masalah atau memiliki masalah performa dengan emulator, baca dokumentasi penyiapan lengkap.
Siapkan perangkat Android
Untuk mengembangkan dengan perangkat Android Anda, USB penelusuran kesalahan harus diaktifkan. Ikuti langkah-langkah ini di perangkat untuk menyambungkannya ke Visual Studio. Jika Anda tidak memiliki perangkat Android, Anda dapat melewati bagian ini.
Aktifkan mode pengembang
- Buka layar Pengaturan.
- Temukan Nomor versi menggunakan penelusuran di bagian atas layar setelan, atau temukan di Tentang ponsel.
- Ketuk Nomor build 7-10 kali hingga "Anda sekarang menjadi pengembang!" muncul.
Periksa status penelusuran kesalahan USB
- Buka layar Pengaturan.
- Temukan penelusuran kesalahan USB menggunakan pencarian di bagian atas layar pengaturan, atau temukan di opsi Pengembang.
- Aktifkanpenelusuran kesalahan USB jika belum diaktifkan.
Percayai perangkat
- Colokkan perangkat ke komputer Anda.
- Anda akan diminta untuk Izinkan proses debug USB.
- Centang Selalu izinkan dari komputer ini.
- Klik Izinkan.
Perangkat Anda sekarang dikonfigurasi dan akan muncul di Visual Studio sebagai target penyebaran.
Mengalami masalah? Periksa dokumentasi.
Emulator atau perangkat Anda sekarang harus dikonfigurasi untuk penyebaran!
Jalankan di Android
Pastikan perangkat atau emulator Anda dipilih sebagai target debug.
Dari menu, pilih Debug > Mulai Penelusuran kesalahan (atau tekan F5). Jika opsi ini dinonaktifkan, pastikan emulator atau perangkat dipilih.
Aplikasi Anda akan membuat, menyebarkan ke perangkat/emulator Android yang dipilih, dan berjalan.
Anda dapat menyebarkan ke satu atau beberapa platform berdasarkan lingkungan pengembangan Anda. Anda baru saja menjalankan dan menerapkan aplikasi Anda ke macOS. Sekarang, mari kita sebarkan ke iOS.
Tutup aplikasi .NET MAUI yang Anda jalankan dan kembali ke Visual Studio Code.
Klik tanda kurung kurawal di kanan bawah jendela Visual Studio Code di Bilah Status dan pilih Target Debug.
Gulir ke bawah dan pilih iPhone 15.
Anda sekarang akan melihat iOS: iPhone 15 sebagai target debug baru.
Untuk menjalankan aplikasi, klik ikon Jalankan dan Debug di Bilah Aktivitas Visual Studio Code. Lalu klik Jalankan dan Debug.
Aplikasi Anda akan dibuat dan disebarkan ke simulator iPhone. Harap perhatikan bahwa proses ini mungkin memerlukan waktu beberapa menit, iPhone sedang diaktifkan secara virtual!
Langkah berikutnya
Selamat, Anda telah membuat dan menjalankan aplikasi .NET MAUI pertama Anda!
Terus belajar
Sekarang setelah Anda mendapatkan dasar-dasarnya, lanjutkan mempelajari cara membuat aplikasi MAUI .NET dengan jalur pembelajaran mandiri di Microsoft Learn.
MAUI .NET untuk Pemula
Izinkan James memandu Anda membangun aplikasi MAUI .NET lengkap dari awal hingga akhir:
Anda mungkin juga tertarik dengan...
