Tutorial Blazor - Membangun aplikasi web pertama Anda

Intro

Tujuan

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

Prasyarat

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.

Untuk membuat aplikasi .NET pertama Anda dengan Visual Studio Code, siapkan lingkungan Anda:

Unduh dan instal .NET SDK:

Instal instruksi .NET 9 SDK

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 C# di bilah pencarian, pilih C# Dev Kit, lalu pilih tombol Instal di halaman ekstensi C# Dev Kit.

Unduh dan jalankan file konfigurasi

Klik tautan berikut untuk mengunduh file WinGet:

File Konfigurasi .NET 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 .NET 9 SDK, 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 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 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 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

Unduh dan jalankan file konfigurasi

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