[Seri Tutorial Blazor] Pengenalan Blazor Server Side

Pada blog sebelumnya kita sudah membahas apa itu Blazor, dan kita juga sudah tahu bahwa blazor memiliki 2 arsitektur yg berbeda yaitu Blazor Server dan Blazor Client.

Pada artikel kali ini kita akan membahas arsitektur dari Blazor Server dan membuat aplikasi Blazor Server baru.

Arsitektur Blazor Server

Aplikasi Blazor Server berjalan pada backend ASP.NET Core dan dapat diakses menggunakan browser. Aplikasi ASP.NET Core dapat dihosting sendiri atau berjalan di IIS. Di sisi client, browser apa pun dapat digunakan untuk mengakses aplikasi web. Blazor Server menggunakan file JavaScript yang berukuran kecil untuk menjalankan dan HTML dan CSS untuk menampilkan antarmuka penggunanya. Berbeda dengan Blazor Client, Blazor Server tidak menggunakan WebAssembly.

Di sisi server, aplikasi Blazor berisi kode .NET dan menangani salinan Dokumen Objek Model (DOM) untuk setiap client. Kita bisa memanggil .NET API kita tanpa pulang pergi jaringan tambahan, dan kita bisa langsung mengakses kode bisnis logic dari antarmuka pengguna tanpa harus membuat backend API terlebih dahulu.

Jika pengguna berinteraksi dengan aplikasi, Blazor akan mengirim event ke server menggunakan koneksi SignalR WebSocket yang persisten. Server akan mengembalikan DOM yang sudah diupdate untuk dirender di client.

Setiap interaksi memicu komunikasi jaringan antara client dan server. Berbeda dengan javacript framework yang memproses interaksi user di client, maka Blazor Server melakukannya di sisi server-side.

Membuat Project Blazor Server

Untuk membuat project Blazor anda dapat menggunakan editor Visual Studio Community 2019 atau Visual Studio Code. Berikut adalah tautan untuk mengunduh .NET SDK dan IDE yang akan digunakan.

Pada tutorial kali ini kita akan menggunakan VS 2019 Community untuk membuat project Blazor Server yang baru

1. Pada Visual Studio 2019 pilih create new Project

image

2. Kemudian pilih Blazor App, masukan BlazorAppSample sebagai nama project

image

3. Kemudian pilih Blazor Server, dan pilih .NET Core 3.1

image

4. Pada solution explorer dapat dilihat struktur project yang sudah dibuat adalah sebagai berikut:

image

5. Tekan tombol F5 untuk menjalankan aplikasinya.

image

Struktur Project dan File Folder

Jika dilihat pada Solution Explorer terdapat beberapa macam folder yang sudah dibuatkan ketika kita menggunakan template yang disediakan oleh VS 2019.

  • Program.cs adalah entry point ketika aplikasi kita dijalankan. Ketika app dijalankan maka akan menjalankan web host instance.
  • Folder Page digunakan untuk menyimpan razor comopent (file yang berekstensi .razor).
  • Static files: semua file yang ada di dalam folder wwwroot. Folder ini digunakan untuk menyimpan semua static files spt css, image, dll
  • Configuration: ada pada file appSettings.json sama seperti konfigurasi pada ASP.NET Core.
  • Folder Data: berisi file yang berhubungan dengan pengaksesan database
  • Folder Shared: berisi komponen tambahan yang dapat digunakan kembali pada komponen lain.

Workshop Cloud Computing (Azure App Services & ASP.NET Core)

poster1

Pada tanggal 19-20 Februari 2020 telah dilangsungkan Workshop Cloud Computing (Azure App Services & ASP.NET Core) dalam rangka Pekan Industri 4.0. Acara ini didukung oleh Kementrian Perindustrian Republik Indonesia, Asosiasi Perguruan Tinggi Komputer (APTIKOM), dan Asosiasi Cloud Computing Indonesia (ACCI).

Acara ini diselenggarakan di Ruang Seminar Teknologi Informasi, Universitas Pembangunan Nasional (UPN), Yogyakarta.

Pada acara seminar ini saya membahas tentang penggunaan layanan Cloud Computing Microsoft Azure. Topik yang dibahas terfokus pada layanan Platform as a Services yaitu Azure App Sevices dan Pembuatan Aplikasi Web/Backend dengan ASP.NET Core yang akan dipasang pada layanan komputasi awan tersebut. Adapun materi yang dibahas adalah:

  • Introduction to Cloud Computing & Microsoft Azure
  • Platform as a Services with Azure App Services
  • .NET Core SDK & Visual Studio Code Installation
  • Create Web Apps with ASP.NET Core
  • Create Layout with ASP.NET Core
  • Create SQL Server Database
  • CRUD with ASP.NET Core
  • Migrate On-Premise SQL Database to SQL Azure
  • Deploy ASP.NET Core Application to Azure
  • Scale Out and Scale Up with Azure Apps
  • Continuous Deployment with Azure Apps
  • Auto Scaling with Azure Apps
  • Deployment Slots with Azure Apps

w1

Materi dari seminar dan workshop dapat diunduh pada tautan berikut ini.