Buat aplikasi web pertama Anda dengan ASP.NET Core menggunakan Blazor
Intro
Tujuan
Bangun aplikasi web pertama Anda dengan ASP.NET Core menggunakan Blazor dalam Visual Studio Code.
Prasyarat
Tidak ada.
macOS 12.0 atau versi yang lebih baru.
Waktu untuk Menyelesaikan
10-15 menit + waktu pengunduhan/penginstalan
Skenario
Buat, gunakan, dan ubah komponen penghitung sederhana.
Lebih suka Visual Studio atau CLI?
Jika mau, Anda juga dapat mulai menggunakan Blazor menggunakan Visual Studio atau antarmuka baris-perintah.
Unduh dan instal
Untuk membuat aplikasi .NET pertama, Anda perlu menginstal .NET SDK, Visual Studio Code, dan C# Dev Kit.
Apa itu .NET SDK, Visual Studio Code, dan C# Dev Kit?
.NET SDK (Kit Pengembangan Perangkat Lunak) adalah kumpulan alat dan pustaka gratis dan sumber terbuka yang Anda perlukan untuk membuat dan menjalankan aplikasi menggunakan C#. C# adalah bahasa pemrograman berorientasi objek modern yang akan Anda gunakan untuk tutorial ini.
Visual Studio Code (VS Code) adalah editor kode ringan, gratis, dan bersumber terbuka yang paling populer di dunia. Di sinilah Anda akan menulis kode C# Anda.
C# Dev Kit adalah sekumpulan ekstensi Visual Studio Code canggih yang mempermudah pengembangan C#. Ekstensi ini membantu Anda menulis, menguji, dan melakukan debug kode saat membuat aplikasi.
File Konfigurasi .NET WinGet akan menginstal SDK .NET 10, Visual Studio Code, dan C# Dev Kit untuk Anda. Jika Anda sudah menginstal sesuatu, WinGet akan melewati langkah penginstalan tersebut.
Untuk membuat aplikasi .NET pertama Anda dengan Visual Studio Code, siapkan lingkungan Anda:
-
Unduh dan instal .NET SDK:
Unduh .NET 10 SDK x64 (Intel)
Unduh .NET 10 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 C# di bilah pencarian, pilih C# Dev Kit, lalu pilih tombol Instal di halaman ekstensi C# Dev Kit.
![C# Dev Kit Visual Studio Code]()
Unduh dan jalankan file konfigurasi
Klik tautan berikut untuk mengunduh file WinGet:
Buka folder unduhan Anda dan klik dua kali pada file untuk memulai penginstalan. Jika Anda diminta untuk memilih aplikasi untuk menjalankan file, pilih Pengelola Paket Windows Klien.
Terminal akan terbuka dan Anda akan melihat bahwa file Konfigurasi WinGet siap untuk menginstal SDK .NET 10, Visual Studio Code jika Anda belum memilikinya, dan C# Dev Kit.
Baca dan setujui perjanjian lisensi dengan mengetik "y" di terminal dan menekan Enter.
Note: Anda bertanggung jawab untuk memahami pengaturan konfigurasi yang Anda pilih untuk dijalankan. Microsoft tidak bertanggung jawab atas file konfigurasi yang telah Anda tulis atau impor. Konfigurasi ini dapat mengubah pengaturan di Windows, menginstal perangkat lunak, mengubah pengaturan perangkat lunak (termasuk pengaturan keamanan), dan menerima perjanjian pengguna untuk paket dan layanan pihak ketiga atas nama Anda. Dengan menjalankan file konfigurasi ini, Anda menyatakan bahwa Anda memahami dan menyetujui sumber daya dan pengaturan ini. Aplikasi apa pun yang diinstal dilisensikan kepada Anda oleh pemiliknya. Microsoft tidak bertanggung jawab atas, juga tidak memberikan lisensi apa pun kepada, paket atau layanan pihak ketiga.
WinGet sekarang menginstal semua yang Anda butuhkan untuk memulai! Waktu penginstalan akan tergantung pada spesifikasi mesin, kecepatan jaringan, dan lainnya. Diperlukan waktu hanya 5 menit, tetapi hingga 15 menit untuk diselesaikan.
Beberapa langkah penginstalan mungkin memerlukan izin tingkat administrator untuk menginstal. Waspadai perintah Kontrol Akun Pengguna (UAC) yang berkedip di Taskbar Windows dan klik ikon tersebut. Untuk melanjutkan penginstalan, Anda harus memilih Ya jika diminta.
Ketika penginstalan selesai, Anda akan melihat output di bawah ini di terminal.
Periksa semuanya terinstal dengan benar
Setelah lingkungan anda disiapkan, masuk ke Pencarian di Windows Taskbar, dan ketik Visual Studio Code. Klik aplikasi untuk membuka Visual Studio Code.
Setelah menyiapkan lingkungan, buka terminal Visual Studio Code baru. Di toolbar, pilih Terminal, lalu Terminal Baru.
Catatan: Jika membuka VS Code melalui terminal, Anda perlu mengaktifkan Kepercayaan Ruang Kerja.
Sekarang buka terminal baru dengan masuk ke toolbar dan memilih Terminal, lalu Terminal Baru.
Di terminal Anda, jalankan perintah berikut untuk memeriksa penginstalan Anda.
dotnet
Jika penginstalan berhasil, Anda akan melihat output yang mirip dengan berikut ini:
Usage: dotnet [path-to-application]
Usage: dotnet [commands]
path-to-application:
The path to an application .dll file to execute.
commands:
-h|--help Display help.
--info Display .NET information.
--list-runtimes [--arch ] Display the installed runtimes matching the host or specified architecture. Example architectures: arm64, x64, x86.
--list-sdks [--arch ] Display the installed SDKs matching the host or specified architecture. Example architectures: arm64, x64, x86. Jika semuanya terlihat baik, pilih tombol Lanjutkan di bawah untuk melanjutkan ke langkah berikutnya.
Ada kesalahan?
Jika Anda menerima kesalahan 'dotnet' tidak dikenali sebagai perintah internal atau eksternal, pastikan Anda membuka terminal Visual Studio Code baru. Jika menghidupkan ulang Visual Studio Code atau menghidupkan ulang komputer Anda tidak mengatasi masalah, gunakan tombol Saya mengalami masalah untuk mendapatkan bantuan dalam memperbaiki masalah.
Buat aplikasi Anda
- Buka palet perintah dalam Visual Studio Code dengan menekan CTRL+SHIFT+P.
- 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.
- Gulir ke bawah dan pilih Aplikasi Web Blazor.
- Pilih lokasi folder tempat Anda ingin menyimpan proyek Anda.
- Beri nama proyek
BlazorAppdi palet perintah saat diminta. Tekan Enter untuk mengonfirmasi. - Pilih format file solusi
slnx.
Aktifkan Kepercayaan Ruang Kerja dengan mencentang kotak dan memilih Ya, saya memercayai penulis.
Setelah mengaktifkan, Anda akan diminta untuk memuat ulang ekstensi C# Dev Kit. Klik tombol Muat Ulang Ekstensi
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 Bilah Sisi, pastikan Penjelajah Visual Studio Code terbuka. Di sini Anda akan melihat folder BlazorApp dan Penjelajah Solusi.Ikuti video di bawah ini untuk: menciutkan folder BlazorApp, buka Penjelajah Solusi, buka proyek BlazorApp, lalu seret dan lepaskan Penjelajah Solusi yang lebih tinggi.
- Ciutkan folder
BlazorAppdi Penjelajah Visual Studio Code. - Klik tanda bintang di sebelah kiri Penjelajah Solusi untuk memperluasnya.
- Klik tanda bintang di sebelah kiri proyek
BlazorAppdi Penjelajah Solusi untuk memperluasnya. - Seret dan lepaskan Penjelajah Solusi di bawah BlazorApp.
Proyek Anda dibuat dan dimuat dalam Visual Studio Code. Lihat konten proyek Anda menggunakan Penjelajah Solusi.
Beberapa file dibuat untuk memberi Anda aplikasi Blazor sederhana yang siap dijalankan.
Program.csadalah titik entri untuk aplikasi yang memulai server dan tempat Anda mengonfigurasi layanan aplikasi dan middleware.-
Di dalam direktori
Components:App.razoradalah komponen akar untuk aplikasi.Routes.razormengonfigurasi perute Blazor.- Direktori
Pagesberisi beberapa contoh halaman web untuk aplikasi.
BlazorApp.csprojmenentukan proyek aplikasi dan dependensinya dan dapat dilihat dengan mengeklik dua kali node proyek BlazorApp di Penjelajah Solusi.- File
launchSettings.jsondi dalam direktoriPropertiesmenentukan pengaturan profil yang berbeda untuk lingkungan pengembangan lokal. Nomor port ditetapkan secara otomatis saat pembuatan proyek dan disimpan di file ini.
Jika semuanya terlihat baik, pilih tombol Lanjutkan di bawah untuk melanjutkan ke langkah berikutnya.
Jalankan aplikasi Anda
Pilih ikon Jalankan dan Debug di Bilah Aktivitas di sisi kiri ruang kerja Anda.
Agar dapat menjalankan dan melakukan debug, pastikan Anda tidak membuka file apa pun di editor. Pilih tombol Jalankan dan Debug berwarna biru.
Anda perlu memilih debugger. Pilih C#.
Kemudian, Visual Studio Code akan membuka menu konfigurasi peluncuran. Pilih C#: BlazorApp [Konfigurasi Default].
Tunggu hingga aplikasi diluncurkan di browser. Setelah masuk ke halaman berikut, Anda berhasil menjalankan aplikasi Blazor pertama!
Anda dapat menghentikan aplikasi kapan saja dengan mengeklik tombol berhenti di toolbar atas.
Untuk menjalankan ulang aplikasi Anda, pilih menu menurun di sebelah kanan tombol jalankan di kanan atas, dan pilih Jalankan proyek yang terkait dengan file ini.
Halaman yang ditampilkan ditentukan oleh file Home.razor yang terletak di dalam direktori Components/Pages. Berikut tampilan isinya:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.Kode tersebut sudah berisi kode yang mengaturnya sebagai beranda dan menampilkan teks Hello, world! dan Welcome to your new app. Komponen PageTitle mengatur judul untuk halaman saat ini sehingga muncul di tab browser.
Ada kesalahan?
Jika Anda menerima pesan kesalahan yang mengatakan "Koneksi Anda bukan privat" dengan kode kesalahan NET::ERR_CERT_INVALID, coba mulai ulang semua jendela browser agar sertifikat baru dapat diambil oleh browser dan jalankan aplikasi lagi.
Jika Anda tidak dapat menyelesaikan masalah yang Anda alami, pilih tombol Saya mengalami masalah di bawah untuk mendapatkan bantuan dalam memperbaiki masalah tersebut.
Coba penghitung
Di aplikasi yang sedang berjalan, navigasikan ke halaman Penghitung dengan mengklik tab Penghitung di bilah sisi sebelah kiri. Halaman berikut kemudian harus ditampilkan:
Pilih tombol Klik saya untuk menambah jumlah tanpa refresh halaman. Penambahan penghitung di halaman web biasanya memerlukan penulisan JavaScript, tetapi dengan Blazor, Anda dapat menggunakan C#.
Anda dapat menemukan implementasi komponen Counter di file Counter.razor yang terletak di dalam direktori Components/Pages.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}Permintaan untuk /counter di browser, sebagaimana ditentukan oleh direktif @page di bagian atas, menyebabkan komponen Counter merender kontennya. Petunjuk @rendermode memungkinkan perenderan server interaktif untuk komponen sehingga dapat menangani kejadian antarmuka pengguna dari browser.
Setiap kali tombol Klik saya dipilih:
- Peristiwa
onclickdiaktifkan. - Metode
IncrementCountdigunakan. currentCountditingkatkan.- Komponen dirender untuk menampilkan jumlah yang diperbarui.
Tambahkan komponen
Setiap file .razor menentukan komponen UI yang dapat digunakan kembali.
Buka file Home.razor di Visual Studio. File Home.razor sudah ada, dan dibuat saat Anda membuat proyek. Ini berada di folder Components/Pages di dalam direktori BlazorApp yang dibuat sebelumnya.
Buka file Home.razor di editor teks pilihan Anda. File Home.razor sudah ada, dan dibuat saat Anda menjalankan perintah dotnet new. Ini berada di folder Components/Pages di dalam direktori BlazorApp yang dibuat sebelumnya.
Tambahkan komponen Counter ke beranda aplikasi dengan menambahkan elemen <Counter /> di akhir file Home.razor.
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />Jalankan ulang aplikasi untuk melihat perubahan. Komponen Counter akan muncul di beranda.
Setelah perubahan ini disimpan, perintah dotnet watch akan menerapkan perubahan ke aplikasi yang berjalan sehingga komponen Counter muncul di laman.
Ubah komponen
Parameter komponen ditentukan menggunakan atribut atau konten anak, yang memungkinkan Anda mengatur properti pada komponen anak. Tentukan parameter pada komponen Counter untuk menentukan berapa banyak yang bertambah dengan setiap klik tombol:
- Tambahkan properti publik untuk
IncrementAmountdengan atribut[Parameter]. - Ubah metode
IncrementCountuntuk menggunakanIncrementAmountsaat menaikkan nilaicurrentCount.
Kode berikut ini memperlihatkan cara mencapainya. Garis yang disorot memperlihatkan perubahan.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}Di Home.razor, perbarui elemen <Counter> untuk menambahkan atribut IncrementAmount yang mengubah jumlah kenaikan menjadi sepuluh seperti yang ditunjukkan oleh yang disorot baris dalam kode berikut:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />Terapkan perubahan ke aplikasi dengan mengeklik tombol Hot Reload. Komponen Home kini memiliki penghitung sendiri yang bertambah sebanyak sepuluh setiap kali tombol Klik saya dipilih, seperti yang ditunjukkan pada gambar berikut. Komponen Counter (Counter.razor) di /counter terus bertambah sebanyak satu.
Komponen Home kini memiliki penghitung sendiri yang bertambah sebanyak sepuluh setiap kali tombol Klik saya dipilih, seperti yang ditunjukkan pada gambar berikut. Komponen Counter (Counter.razor) di /counter terus bertambah sebanyak satu.
Langkah berikutnya
Selamat, Anda telah membuat dan menjalankan aplikasi Blazor pertama Anda!
Terus belajar
Setelah Anda memiliki dasar-dasarnya, lanjutkan membuat aplikasi Blazor pertama Anda dengan modul pembelajaran mandiri Blazor di Microsoft Learn tempat Anda akan membuat aplikasi daftar tugas.
Microsoft Learn: Buat aplikasi daftar tugas Blazor
Blazor untuk Pemula
Pelajari cara membuat aplikasi Blazor lengkap dari awal hingga akhir:
Anda mungkin juga tertarik dengan...
