Tutorial Blazor | Build aplikasi pertama Anda

Intro

Tujuan

Bangun aplikasi web pertama Anda dengan ASP.NET Core menggunakan Blazor dalam Visual Studio Code.

Prasyarat

Tidak ada.

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 dengan Visual Studio Code, siapkan lingkungan Anda:

Unduh dan instal .NET SDK:

Instruksi Penginstalan SDK .NET 8

Unduh .NET 8 SDK x64 (Intel)
Unduh .NET 8 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 C# di bilah pencarian, pilih C# Dev Kit, lalu pilih tombol Instal di halaman ekstensi C# Dev Kit.

Klik tautan di bawah ini untuk mengunduh file.

File Konfigurasi Winget .NET

Buka folder unduhan Anda dan klik ganda file untuk memulai penginstalan.

Pilih instruksi penginstalan Terminal atau Dev Home

Terminal
Dev Home

Setelah mengklik file tersebut dua kali, sebuah terminal akan terbuka dan Anda akan melihat file Konfigurasi Winget siap untuk menginstal .NET 8 SDK, Visual Studio Code jika Anda tidak memilikinya, dan C# Dev Kit.

Baca dan setujui perjanjian lisensi dengan mengetik "y" di terminal dan menekan Enter.

Catatan: Anda bertanggung jawab untuk memahami pengaturan konfigurasi yang dipilih 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 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 perlukan untuk memulai! Diperlukan waktu sekitar 5 menit untuk menyelesaikannya dan setelah selesai, Anda akan melihat output di bawah ini di terminal.

Setelah mengklik file tersebut dua kali, Dev Home akan terbuka dan Anda akan melihat file Konfigurasi Winget yang siap untuk menginstal .NET 8 SDK, Visual Studio Code jika Anda tidak memilikinya, dan C# Dev Kit.

Baca dan setujui perjanjian lisensi dengan mengklik "Saya setuju dan ingin melanjutkan" di kiri bawah lalu mengklik "Siapkan sebagai admin" di kanan bawah. Pilih "Ya" saat ditanya apakah Anda ingin mengizinkan Dev Home untuk membuat perubahan pada perangkat Anda.

Catatan: Anda bertanggung jawab untuk memahami pengaturan konfigurasi yang dipilih 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 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.

Dev Home sekarang menginstal semua yang Anda perlukan untuk memulai! Diperlukan waktu sekitar 5 menit untuk menyelesaikannya dan setelah selesai, Anda akan melihat output di bawah ini di jendela.

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

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

Terminal

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

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 BlazorApp di palet perintah saat diminta. Tekan Enter untuk mengonfirmasi.

Aktifkan Kepercayaan Ruang Kerja dengan mencentang kotak dan memilih Ya, saya memercayai penulis.

Jika Anda memiliki Langganan Visual Studio, 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 BlazorApp di Penjelajah Visual Studio Code.
Klik tanda bintang di sebelah kiri Penjelajah Solusi untuk memperluasnya.
Klik tanda bintang di sebelah kiri proyek BlazorApp di 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.cs adalah titik entri untuk aplikasi yang memulai server dan tempat Anda mengonfigurasi layanan aplikasi dan middleware.
Di dalam direktori Components:
- App.razor adalah komponen akar untuk aplikasi.
- Routes.razor mengonfigurasi perute Blazor.
- Direktori Pages berisi beberapa contoh halaman web untuk aplikasi.
BlazorApp.csproj menentukan proyek aplikasi dan dependensinya dan dapat dilihat dengan mengeklik dua kali node proyek BlazorApp di Penjelajah Solusi.
File launchSettings.json di dalam direktori Properties menentukan 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.

Pilih tombol Jalankan dan Debug berwarna biru.

Visual Studio Code akan membuka menu konfigurasi peluncuran. Pilih C#: BlazorApp [Konfigurasi Default].

Selanjutnya, Anda perlu memilih debugger. Pilih C#.

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:

Components/Pages/Home.razor

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

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.

Components/Pages/Counter.razor

@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 onclick diaktifkan.
Metode IncrementCount digunakan.
currentCount ditingkatkan.
Komponen dirender untuk menampilkan jumlah yang diperbarui.

Tambahkan komponen

Setiap file .razor menentukan komponen UI yang dapat digunakan kembali.

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.

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

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 IncrementAmount dengan atribut [Parameter].
Ubah metode IncrementCount untuk menggunakan IncrementAmount saat menaikkan nilai currentCount.

Kode berikut ini memperlihatkan cara mencapainya. Garis yang disorot memperlihatkan perubahan.

Components/Pages/Counter.razor

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

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

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

Dokumentasi Blazor

Telusuri dokumentasi kami tentang Blazor untuk mempelajari cara membuat aplikasi web yang mengagumkan.

Konsep penerbitan Blazor

Ikuti Microsoft Learn untuk mempelajari cara menerbitkan aplikasi Blazor dan API .NET dengan Azure Static Web Apps.

Buat REST API

Buat REST API menggunakan ASP.NET

Buat aplikasi web pertama Anda dengan ASP.NET Core menggunakan Blazor

Intro

Tujuan

Prasyarat

Waktu untuk Menyelesaikan

Skenario

Lebih suka Visual Studio atau CLI?

Unduh dan instal

Pilih instruksi penginstalan Terminal atau Dev Home

Periksa semuanya terinstal dengan benar

Ada kesalahan?

Buat aplikasi Anda

Jalankan aplikasi Anda

Ada kesalahan?

Coba penghitung

Tambahkan komponen

Ubah komponen

Langkah berikutnya

Terus belajar

Blazor untuk Pemula

Dokumentasi Blazor

Konsep penerbitan Blazor

Buat REST API

Laporkan masalah

Berikan umpan balik