[MAUI Tutorial] – Akses RESTful Services dengan .NET MAUI – Part 1

Dalam era digital yang serba terkoneksi ini, aplikasi mobile tidak dapat lagi berdiri sendiri tanpa berinteraksi dengan layanan eksternal. RESTful services telah menjadi standar de facto untuk mengintegrasikan aplikasi dengan server untuk mengakses dan memanipulasi data secara efisien. Dengan RESTful API, aplikasi dapat berkomunikasi dengan berbagai layanan web, memanfaatkan data dinamis, dan menawarkan pengalaman pengguna yang kaya.

Artikel ini akan membahas bagaimana mengakses RESTful services dengan menggunakan .NET Multi-platform App UI (.NET MAUI), platform terbaru dari Microsoft yang memungkinkan pengembangan aplikasi lintas platform dengan satu basis kode (C#). .NET MAUI memberikan kemudahan bagi pengembang untuk membangun aplikasi yang responsif dan terhubung dengan layanan online.

Melalui artikel ini, Anda akan belajar cara mengkonfigurasi dan mengimplementasikan akses ke RESTful API dalam aplikasi .NET MAUI. akan dijelaskan langkah-langkah untuk melakukan permintaan HTTP, mengelola respons, dan memanfaatkan data yang diperoleh dalam aplikasi Anda.

Bagian pertama dari artikel ini akan dijelaskan bagaimana cara pembuatan backend API yang nantinya akan diakses dari .NET MAUI.

Lab – MEMBUAT BACKEND RESTFUL API DENGAN .NET CORE

1. Pilih project template ASP.NET Core Web API

2. Buat project ASP.NET Core Web API dengan nama BackendAPI.

3. Pilih .NET 9 dan uncheck pilihan “Use Controllers” untuk memastikan project yang dibuat adalah project Minimal API (tanpa controller).

4. Kemudian pada project Web API tambahkan beberapa library yang digunakan untuk pengaksesan database. Database yang digunakan pada contoh ini adalah SQLIte.

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.2" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.2" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.2">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.2" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.2">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
  </ItemGroup>

5. Pada project tambahkan folder Models, pada folder ini akan dibuat class yang digunakan untuk mapping dengan table yang akan dibuat di SQLite. Untuk pembuatan table di SQLite akan digunakan teknik migrations.

using System.ComponentModel.DataAnnotations;

namespace BackendAPI.Models
{
    public class TodoItem
    {
        [Key]
        public int TodoId { get; set; }
        public string Name { get; set; } = null!;
        public string? Notes { get; set; }
        public bool Done { get; set; }
    }
}

6. Buat folder DAL yang akan digunakan untuk menambahkan kode untuk EF DataContext object dan kode untuk membuat method CRUD-nya.

7. Tambahkan class dengan nama TodoContext.cs.

using BackendAPI.Models;
using Microsoft.EntityFrameworkCore;

namespace BackendAPI.DAL
{
    public class TodoContext : DbContext
    {
        public TodoContext(DbContextOptions<TodoContext> options) : base(options)
        {
        }
        public DbSet<TodoItem> TodoItems { get; set; }
    }
}

8. Kemudian pada folder yang sama tambahkan interface ITodoDAL.

    public interface ITodoDAL
    {
        Task<IEnumerable<TodoItem>> GetAllAsync();
        Task<TodoItem> GetByIdAsync(int id);
        Task AddAsync(TodoItem item);
        Task UpdateAsync(TodoItem item);
        Task DeleteAsync(int id);
    }

9. Buat class dengan nama TodoDAL.cs dan implement semua method pada interface. Method-method tersebut digunakan untuk CRUD.

using BackendAPI.Models;
using Microsoft.EntityFrameworkCore;

namespace BackendAPI.DAL
{
    public class TodoDAL : ITodoDAL
    {
        private readonly TodoContext _todoContext;

        public TodoDAL(TodoContext todoContext)
        {
            _todoContext = todoContext;
        }

        public async Task<IEnumerable<TodoItem>> GetAllAsync()
        {
            return await _todoContext.TodoItems.ToListAsync();
        }

        public async Task<TodoItem> GetByIdAsync(int id)
        {
            var result = await _todoContext.TodoItems.FindAsync(id);
            if (result == null)
            {
                throw new Exception("Item not found");
            }
            return result;
        }

        public async Task AddAsync(TodoItem item)
        {
            _todoContext.TodoItems.Add(item);
            await _todoContext.SaveChangesAsync();
        }

        public async Task UpdateAsync(TodoItem item)
        {
            _todoContext.Entry(item).State = EntityState.Modified;
            await _todoContext.SaveChangesAsync();
        }

        public async Task DeleteAsync(int id)
        {
            var todoItem = await _todoContext.TodoItems.FindAsync(id);
            if (todoItem != null)
            {
                _todoContext.TodoItems.Remove(todoItem);
                await _todoContext.SaveChangesAsync();
            }
        }
    }
}

10. Pada file appsettings.json tambahkan connection string berikut:

  "ConnectionStrings": {
    "TodoConnectionString": "Data Source=todo.db"
  }

11. Kemudian tambahkan kode pada Program.cs untuk menambahkan EF dan menginject object TodoDAL yang akan digunakan membuat web method.

builder.Services.AddDbContext<TodoContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("TodoConnectionString")));

builder.Services.AddScoped<ITodoDAL, TodoDAL>();

12. Untuk membuat web method pada Minimal API, tambahkan juga kode berikut pada Program.cs.

app.MapGet("/todoitems", async (ITodoDAL repository) =>
    await repository.GetAllAsync());

app.MapGet("/todoitems/{id}", async (int id, ITodoDAL repository) =>
{
    var todoItem = await repository.GetByIdAsync(id);
    return todoItem is not null ? Results.Ok(todoItem) : Results.NotFound();
});

app.MapPost("/todoitems", async (TodoItem todo, ITodoDAL repository) =>
{
    await repository.AddAsync(todo);
    return Results.Created($"/todoitems/{todo.TodoId}", todo);
});

app.MapPut("/todoitems/{id}", async (int id, TodoItem inputTodo, ITodoDAL repository) =>
{
    var todo = await repository.GetByIdAsync(id);
    if (todo is null) return Results.NotFound();

    todo.Name = inputTodo.Name;
    todo.Notes = inputTodo.Notes;
    todo.Done = inputTodo.Done;

    await repository.UpdateAsync(todo);
    return Results.NoContent();
});

app.MapDelete("/todoitems/{id}", async (int id, ITodoDAL repository) =>
{
    var todo = await repository.GetByIdAsync(id);
    if (todo is not null)
    {
        await repository.DeleteAsync(id);
        return Results.Ok(todo);
    }

    return Results.NotFound();
});

13. Tulis perintah dotnet run untuk menjalankan web api yang sudah dibuat, dan kemudian test dengan menggunakan POSTMAN. Pada contoh ini web api akan dijalankan pada url berikut: https://localhost:7050

Lab – Mengakses REST Services Menggunakan Insomnia

1. Anda dapat mengunduh tool yang dapat digunakan untuk pembuatan http request seperti POSTMAN atau Insomnia untuk menguji web api yang sudah dibuat.

2. Test method POST untuk menambahkan data Todo baru. Tambahkan beberapa data sebagai contoh.