Untuk membuat aplikasi .NET pertama, Anda perlu menginstal .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 .NET 8 SDK, 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:
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.
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 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: Harap diperhatikan bahwa jika membuka Visual Studio Code melalui terminal, Anda harus 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.
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.
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.
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 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.
Components/Pages/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 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.
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" />
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.
