Tutorial .NET MAUI | 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.

Waktu untuk Menyelesaikan

10 menit + waktu pengunduhan/penginstalan

Skenario

Aplikasi seluler dan desktop yang berjalan di Windows dan Android yang menampilkan pesan Hello, World!.

Unduh dan instal

Unduh dan instal Visual Studio 2022.

Unduh 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:

Unduh 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 ini dilengkapi dengan C# Dev Kit dan ekstensi C#, yang diperlukan agar ekstensi .NET MAUI dapat berjalan.
Buka terminal baru dan instal beban kerja .NET MAUI dengan menjalankan perintah berikut:
Terminal
```
sudo dotnet workload install maui
```
Jika penginstalan berhasil, Anda akan melihat output yang mirip dengan berikut ini:
Terminal
```
Successfully 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.

Terminal

dotnet workload list

Jika penginstalan berhasil, Anda akan melihat output yang mirip dengan berikut ini:

Terminal

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:

Versi terbaru Xcode

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.
Buka terminal baru dan instal alat pengembang baris perintah Xcode dengan menjalankan perintah berikut:
Terminal
```
xcode-select --install
```
Saat diminta untuk menginstal alat pengembang baris perintah Xcode, pilih Instal. Terakhir, menyetujui perjanjian lisensi.

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.
Di jendela Konfigurasikan proyek baru Anda, masukkan MyFirstMauiApp sebagai nama proyek dan klik tombol Berikutnya.
Di jendela Informasi tambahan, pilih.NET 9.0 di menu menurun Kerangka Kerja jika belum dipilih dan klik tombol Buat.

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.

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:

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).

Saat ini, Text dari Label kedua pada baris 17 diatur untuk menampilkan Hello, World! seperti yang ditunjukkan pada kode berikut:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Perbarui teks untuk membaca Hello, .NET MAUI!:

MainPage.xaml

<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:

MainPage.xaml.cs

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;.

MainPage.xaml.cs

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.

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.

Jalur Pembelajaran MAUI .NET.

MAUI .NET untuk Pemula

Izinkan James memandu Anda membangun aplikasi MAUI .NET lengkap dari awal hingga akhir:

Anda mungkin juga tertarik dengan...

Dokumen pengembang

Menggali lebih dalam dengan dokumentasi untuk MAUI .NET

Sampel MAUI .NET

Jelajahi sampel MAUI .NET di GitHub

Tutorial MAUI .NET - Bangun aplikasi multi-platform pertama Anda di C #