Bagikan melalui

Membuat .NET MAUIBlazor Hybrid aplikasi

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Tutorial ini menunjukkan kepada Anda cara membuat dan menjalankan .NET MAUIBlazor Hybrid aplikasi. Anda akan mempelajari cara untuk:

  • Membuat .NET MAUIBlazor Hybrid proyek aplikasi di Visual Studio
  • Menjalankan aplikasi di Windows
  • Menjalankan aplikasi pada perangkat seluler yang ditimulasi di Android Emulator

Prasyarat

Untuk informasi selengkapnya tentang prasyarat dan menginstal perangkat lunak untuk tutorial ini, lihat sumber daya berikut dalam .NET MAUI dokumentasi:

Membuat .NET MAUIBlazor Hybrid aplikasi

Luncurkan Visual Studio. Di Jendela Mulai, pilih Buat proyek baru:

Solusi baru.

Di jendela Buat proyek baru, gunakan menu dropdown Jenis proyek untuk memfilter templat MAUI :

Filter templat ke .NET MAUI.

.NET MAUIBlazor Hybrid Pilih templat Aplikasi lalu pilih tombol Berikutnya:

Pilih template.

Catatan

Di .NET 7 atau yang lebih lama, templat diberi nama .NET MAUIBlazor Aplikasi.

Dalam dialog Konfigurasikan proyek baru Anda:

  • Atur Nama proyek ke MauiBlazor.
  • Pilih lokasi yang sesuai untuk proyek.
  • Pilih tombol Berikutnya.

Konfigurasikan proyek.

Dalam dialog Informasi tambahan, pilih versi kerangka kerja dengan daftar dropdown Kerangka Kerja. Pilih tombol Buat :

Dialog informasi tambahan untuk memilih versi kerangka kerja dan membuat proyek.

Tunggu hingga Visual Studio membuat proyek dan memulihkan dependensi proyek. Pantau kemajuan dalam Penjelajah Solusi dengan membuka entri Dependensi.

Pemulihan dependensi:

Memulihkan dependensi.

Dependensi dipulihkan:

Dependensi yang dipulihkan.

Menjalankan aplikasi di Windows

Di toolbar Visual Studio, pilih tombol Windows Machine untuk membuat dan memulai proyek:

Tombol Komputer Windows.

Jika Mode Pengembang tidak diaktifkan, Anda diminta untuk mengaktifkannya di Pengaturan> Untuk>Pengembang Mode Pengembang (Windows 10) atau PengaturanPrivacy> & keamanan>Untuk>Pengembang Mode Pengembang (Windows 11). Atur tombol ke Aktif.

Aplikasi yang berjalan sebagai aplikasi desktop Windows:

Aplikasi yang berjalan di Windows.

Menjalankan aplikasi di Android Emulator

Jika Anda mengikuti panduan di bagian Jalankan aplikasi di Windows , pilih tombol Hentikan Penelusuran Kesalahan di toolbar untuk menghentikan aplikasi Windows yang sedang berjalan:

Tombol Hentikan Penelusuran Kesalahan.

Di toolbar Visual Studio, pilih tombol dropdown mulai konfigurasi. Pilih Emulator Android>Android Emulator:

Pilihan dropdown Android Emulators untuk tombol Android Emulator.

Android SDK diperlukan untuk membuat aplikasi untuk Android. Di panel Daftar Kesalahan, muncul pesan yang meminta Anda untuk mengeklik dua kali pesan untuk menginstal SDK Android yang diperlukan:

Daftar Kesalahan Visual Studio dengan pesan yang meminta Anda untuk mengklik pesan untuk menginstal Android SDK.

Jendela Penerimaan Lisensi Android SDK muncul, pilih tombol Terima untuk setiap lisensi yang muncul. Jendela tambahan muncul untuk lisensi Android Emulator dan SDK Patch Applier . Pilih tombol Terima .

Tunggu Hingga Visual Studio mengunduh Android SDK dan Android Emulator. Anda dapat melacak kemajuan dengan memilih indikator tugas latar belakang di sudut kiri bawah UI Visual Studio:

Indikator tugas latar belakang Visual Studio.

Indikator menunjukkan tanda centang ketika tugas latar belakang selesai:

Indikator tugas latar belakang Visual Studio dicentang.

Di toolbar, pilih tombol Android Emulator :

Tombol Android Emulator.

Di jendela Buat Perangkat Android Default, pilih tombol Buat :

Buat jendela Perangkat Android Default.

Tunggu hingga Visual Studio mengunduh, membuka zip, dan membuat Android Emulator. Saat emulator ponsel Android siap, pilih tombol Mulai .

Catatan

Aktifkan akselerasi perangkat keras untuk meningkatkan kinerja emulator Android.

Tutup jendela Android Device Manager . Tunggu hingga jendela telepon yang ditimulasi muncul, OS Android dimuat, dan layar beranda muncul.

Penting

Ponsel yang ditiru harus dinyalakan dengan OS Android yang dimuat untuk memuat dan menjalankan aplikasi di debugger. Jika telepon yang ditimulasi tidak berjalan, aktifkan telepon menggunakan pintasan keyboard Ctrl+P atau dengan memilih tombol Daya di UI:

Tombol Power Android Emulator.

Di toolbar Visual Studio, pilih tombol Pixel 5 - {VERSION} untuk membuat dan menjalankan proyek, di mana {VERSION} tempat penampung adalah versi Android. Dalam contoh berikut, versi Android adalah API 30 (Android 11.0 - API 30), dan versi yang lebih baru muncul tergantung pada Android SDK yang diinstal:

Tombol emulator Pixel 5 API 30.

Visual Studio membangun proyek dan menyebarkan aplikasi ke emulator.

Memulai emulator, memuat ponsel dan OS yang ditiru, dan menyebarkan dan menjalankan aplikasi dapat memakan waktu beberapa menit tergantung pada kecepatan sistem dan apakah akselerasi perangkat keras diaktifkan atau tidak. Anda dapat memantau kemajuan penyebaran dengan memeriksa bilah status Visual Studio di bagian bawah UI. Indikator Siap menerima tanda centang dan indikator penyebaran emulator dan pemuatan aplikasi hilang saat aplikasi berjalan:

Selama penyebaran:

Indikator deploy-run pertama yang muncul di bilah footer Visual Studio.

Selama pengaktifan aplikasi:

Indikator penyebaran kedua yang muncul di bilah footer Visual Studio.

Aplikasi yang berjalan di Android Emulator:

Aplikasi yang berjalan di Android Emulator.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

  • Membuat .NET MAUIBlazor Hybrid proyek aplikasi di Visual Studio
  • Menjalankan aplikasi di Windows
  • Menjalankan aplikasi pada perangkat seluler yang ditimulasi di Android Emulator

Pelajari selengkapnya tentang Blazor Hybrid aplikasi:

ASP.NET Core Blazor Hybrid