Daftar Isi

1. Pengantar API RESTful dan Blazor
2. Persiapan Lingkungan Pengembangan
3. Membuat API RESTful dengan ASP.NET Core
4. Membangun Frontend Blazor untuk Konsumsi API
5. Deploy API dan Blazor ke Azure
6. Source Code dan Referensi Pembelajaran

1. Pengantar API RESTful dan Blazor

API RESTful adalah arsitektur yang memungkinkan aplikasi berkomunikasi melalui protokol HTTP dengan menggunakan metode standar seperti GET, POST, PUT, dan DELETE. Blazor adalah framework dari Microsoft yang memungkinkan pengembangan aplikasi web interaktif menggunakan C# dan .NET, baik di sisi client (Blazor WebAssembly) maupun server (Blazor Server).

Dalam panduan ini, Anda akan belajar bagaimana membuat API RESTful menggunakan ASP.NET Core, membangun frontend menggunakan Blazor, dan kemudian melakukan deploy ke platform Azure.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa hal berikut:

• Visual Studio 2022 atau Visual Studio Code dengan ekstensi C#
• .NET 6 SDK atau versi terbaru
• Azure CLI untuk deploy ke Azure
• Akunnya Microsoft Azure (bisa menggunakan free tier)

Langkah instalasi .NET SDK di Windows:

1. Kunjungi https://dotnet.microsoft.com/en-us/download
2. Download dan install .NET SDK sesuai sistem operasi Anda
3. Verifikasi instalasi dengan menjalankan dotnet --version di terminal

3. Membuat API RESTful dengan ASP.NET Core

Kita akan membuat API sederhana untuk mengelola data produk. Ikuti langkah berikut:

Langkah 1: Buat project API

dotnet new webapi -n ProductApi
cd ProductApi
      

Langkah 2: Definisikan model Produk

namespace ProductApi.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}
      

Langkah 3: Buat controller API

using Microsoft.AspNetCore.Mvc;
using ProductApi.Models;
using System.Collections.Generic;
using System.Linq;

namespace ProductApi.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ProductsController : ControllerBase
    {
        private static List<Product> products = new List<Product>()
        {
            new Product { Id = 1, Name = "Laptop", Price = 15000 },
            new Product { Id = 2, Name = "Smartphone", Price = 8000 }
        };

        [HttpGet]
        public ActionResult<IEnumerable<Product>> Get()
        {
            return Ok(products);
        }

        [HttpGet("{id}")]
        public ActionResult<Product> Get(int id)
        {
            var product = products.FirstOrDefault(p => p.Id == id);
            if (product == null) return NotFound();
            return Ok(product);
        }

        [HttpPost]
        public ActionResult<Product> Post(Product product)
        {
            product.Id = products.Max(p => p.Id) + 1;
            products.Add(product);
            return CreatedAtAction(nameof(Get), new { id = product.Id }, product);
        }

        [HttpPut("{id}")]
        public IActionResult Put(int id, Product product)
        {
            var existing = products.FirstOrDefault(p => p.Id == id);
            if (existing == null) return NotFound();
            existing.Name = product.Name;
            existing.Price = product.Price;
            return NoContent();
        }

        [HttpDelete("{id}")]
        public IActionResult Delete(int id)
        {
            var product = products.FirstOrDefault(p => p.Id == id);
            if (product == null) return NotFound();
            products.Remove(product);
            return NoContent();
        }
    }
}
      

Langkah 4: Jalankan API

Jalankan perintah berikut di terminal:

dotnet run
      

API akan berjalan di https://localhost:5001 . Anda dapat mengakses endpoint /api/products untuk melihat data produk.

4. Membangun Frontend Blazor untuk Konsumsi API

Selanjutnya, kita buat aplikasi Blazor WebAssembly yang akan mengambil dan menampilkan data produk dari API yang sudah dibuat.

Langkah 1: Buat project Blazor WebAssembly

dotnet new blazorwasm -n ProductBlazorClient
cd ProductBlazorClient
      

Langkah 2: Tambahkan model Product

namespace ProductBlazorClient.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}
      

Langkah 3: Buat service untuk panggil API

using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
using System.Collections.Generic;
using ProductBlazorClient.Models;

namespace ProductBlazorClient.Services
{
    public class ProductService
    {
        private readonly HttpClient _http;

        public ProductService(HttpClient http)
        {
            _http = http;
        }

        public async Task<IEnumerable<Product>> GetProductsAsync()
        {
            return await _http.GetFromJsonAsync<IEnumerable<Product>>("https://localhost:5001/api/products");
        }
    }
}
      

Langkah 4: Registrasi service di Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using ProductBlazorClient;
using ProductBlazorClient.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ProductService>();

await builder.Build().RunAsync();
      

Langkah 5: Tampilkan data produk di halaman Index.razor

@page "/"
@inject ProductService ProductService

Daftar Produk

@if (products == null)
{
    <p>Loading...</p>
}
else if (!products.Any())
{
    <p>Tidak ada produk tersedia.</p>
}
else
{
    <table class="table-auto w-full border-collapse border border-gray-300">
        <thead>
            <tr class="bg-indigo-100">
                <th class="border border-gray-300 px-4 py-2">ID</th>
                <th class="border border-gray-300 px-4 py-2">Nama</th>
                <th class="border border-gray-300 px-4 py-2">Harga</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in products)
            {
                <tr>
                    <td class="border border-gray-300 px-4 py-2">@product.Id</td>
                    <td class="border border-gray-300 px-4 py-2">@product.Name</td>
                    <td class="border border-gray-300 px-4 py-2">Rp @product.Price.ToString("N0")</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private IEnumerable<ProductBlazorClient.Models.Product> products;

    protected override async Task OnInitializedAsync()
    {
        products = await ProductService.GetProductsAsync();
    }
}
      

5. Deploy API dan Blazor ke Azure

Setelah aplikasi berjalan dengan baik secara lokal, saatnya melakukan deploy ke Azure agar dapat diakses secara online.

Langkah 1: Login ke Azure CLI

az login
      

Langkah 2: Buat Resource Group

az group create --name ProductAppRG --location eastus
      

Langkah 3: Buat App Service Plan

az appservice plan create --name ProductAppPlan --resource-group ProductAppRG --sku B1 --is-linux
      

Langkah 4: Buat Web App untuk API

az webapp create --resource-group ProductAppRG --plan ProductAppPlan --name productapiapp --runtime "DOTNET|6.0"
      

Langkah 5: Deploy API ke Azure

Gunakan Azure DevOps, GitHub Actions, atau deploy manual via ZIP deploy. Contoh deploy manual:

dotnet publish -c Release
az webapp deploy --resource-group ProductAppRG --name productapiapp --src-path ./bin/Release/net6.0/publish.zip
      

Langkah 6: Deploy Blazor WebAssembly ke Azure Static Web Apps

Buat Static Web App di Azure Portal dan hubungkan dengan repository GitHub Anda yang berisi project Blazor. Atau deploy manual dengan:

dotnet publish -c Release
az storage blob upload-batch -s ./bin/Release/net6.0/publish/wwwroot -d '$web' --account-name <storage_account_name>
      

6. Source Code dan Referensi Pembelajaran

Berikut beberapa sumber belajar dan repositori yang dapat Anda gunakan untuk memperdalam pengembangan API RESTful dengan Blazor dan Azure:

• ASP.NET Core Official Repository
• Dokumentasi Blazor di Microsoft Docs
• Azure App Service Documentation
• Channel YouTube dotNET (Tutorial dan Webinar)
• Channel YouTube Microsoft Azure

Anda juga dapat mengunduh source code lengkap panduan ini di: