Artikel ini adalah lanjutan dari artikel sebelumnya untuk pembuatan backend API dengan ASP.NET Core Minimal API.
Lab – MENGAKSES REST SERVICES DARI .NET MAUI
1. Pada lab ini, backend yang sebelumnya sudah dibuat akan diakses dari aplikasi .NET MAUI.
2. Buat project .NET MAUI kemudian tambahkan class TodoItem.cs. Class ini akan digunakan untuk membuat objek mapping yang dapat menampung data dari backend. Tambahkan kode c# berikut.
namespace SampleMAUIApp.Bab6
{
public class TodoItem
{
public int todoId { get; set; }
public string name { get; set; }
public string notes { get; set; }
public bool done { get; set; }
}
}
3. Tambahkan juga class dengan nama Constants.cs untuk menyimpan alamat url dari backend services yang dijalankan pada localhost.
namespace SampleMAUIApp.Bab6
{
public static class Constants
{
public static string RestUrl =
"http://localhost:5008";
}
}
4. Tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-method yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete data.
namespace SampleMAUIApp.Bab6
{
public interface IRestServices
{
Task<List<TodoItem>> RefreshDataAsync();
Task SaveTodoItemAsync(TodoItem item, bool isNewItem);
Task DeleteTodoItemAsync(int id);
}
}
5. Tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk mengakses REST Services menggunakan library HttpClient.
using System.Text;
using System.Text.Json;
namespace SampleMAUIApp.Bab6
{
public class RestServices : IRestServices
{
private HttpClient client;
public List<TodoItem> Items { get; private set; }
public RestServices()
{
client = new HttpClient();
client.MaxResponseContentBufferSize = 256000;
Items = new List<TodoItem>();
}
public async Task DeleteTodoItemAsync(int id)
{
var uri = new Uri($"{Constants.RestUrl}/todoitems/{id}");
await client.DeleteAsync(uri);
}
public async Task<List<TodoItem>> RefreshDataAsync()
{
Items.Clear();
var uri = new Uri($"{Constants.RestUrl}/todoitems");
var response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
Items = JsonSerializer.Deserialize<List<TodoItem>>(content);
}
else
{
throw new Exception("Gagal mengambil data");
}
return Items;
}
public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem)
{
Uri uri = null!;
var json = JsonSerializer.Serialize(item);
var content = new StringContent(json, Encoding.UTF8, "application/json");
HttpResponseMessage response = null!;
if (isNewItem)
{
uri = new Uri($"{Constants.RestUrl}/todoitems");
response = await client.PostAsync(uri, content);
}
else
{
uri = new Uri($"{Constants.RestUrl}/todoitems/{item.todoId}");
response = await client.PutAsync(uri, content);
}
if (response.IsSuccessStatusCode)
{
return;
}
else
{
throw new Exception("Gagal menyimpan data");
}
}
}
}
6. Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk menampilkan, menambah, mengedit, dan mendelete data.
7. Untuk mengakses class RestServices dengan lebih mudah maka buat kode berikut pada class App.xaml.cs.
namespace SampleMAUIApp
{
public partial class App : Application
{
-----------------------------
private static IRestServices empServices;
public static IRestServices EmpServices
{
get
{
if (empServices == null)
{
empServices = new RestServices();
}
return empServices;
}
}
public App()
{
InitializeComponent();
}
protected override Window CreateWindow(IActivationState? activationState)
{
return new Window(new AppShell());
}
}
}
8. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk itu pada project .NET MAUI tambahkan halaman xaml dengan nama TodoListPage.xaml. Halaman ini digunakan untuk menampilkan informasi todolist pada kontrol ListView.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleMAUIApp.Bab6.TodoListPage"
Title="Todo List Page">
<ContentPage.ToolbarItems>
<ToolbarItem Text="+" Clicked="OnAddItemClicked">
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="OnItemSelected" IsPullToRefreshEnabled="True" Refreshing="ListView_Refreshing" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout Padding="20,5,5,5">
<Label Text="{Binding name}" VerticalTextAlignment="Center" />
<Image Source="checked.png" Aspect="AspectFit" IsVisible="{Binding done}" />
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
9. Tambahkan gambar plus.png dan icon.png pada project Android (folder Resources\drawable). Dengan klik kanan pada drawable > Add > Existing Item… > kemudian cari gambar icon.
10. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.
using System.Diagnostics;
namespace SampleMAUIApp.Bab6;
public partial class TodoListPage : ContentPage
{
public TodoListPage()
{
InitializeComponent();
}
private void ListView_Refreshing(object sender, EventArgs e)
{
OnAppearing();
listView.IsRefreshing = false;
}
protected async override void OnAppearing()
{
base.OnAppearing();
var data = await App.EmpServices.RefreshDataAsync();
listView.ItemsSource = data;
}
void OnAddItemClicked(object sender, EventArgs e)
{
var todoPage = new TodoItemPage(true);
todoPage.BindingContext = new TodoItem();
Navigation.PushAsync(todoPage);
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var todoItem = e.SelectedItem as TodoItem;
var todoPage = new TodoItemPage();
todoPage.BindingContext = todoItem;
Navigation.PushAsync(todoPage);
}
}
11. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol ListView, dan menambahkan event ketika list tersebut dipilih.
12. Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan untuk menampilkan detail todo, mengedit, dan mendelete data.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleMAUIApp.Bab6.TodoItemPage"
Title="TodoItemPage">
<VerticalStackLayout>
<Label Text="Name" />
<Entry x:Name="nameEntry" Text="{Binding name}" Placeholder="task name" />
<Label Text="Notes" />
<Entry x:Name="notesEntry" Text="{Binding notes}" />
<Label Text="Done" />
<Switch x:Name="doneSwitch" IsToggled="{Binding done}" />
<Button Text="Save" Clicked="OnSaveActivated" Margin="5" />
<Button Text="Delete" Clicked="OnDeleteActivated" Margin="5" />
<Button Text="Cancel" Clicked="OnCancelActivated" Margin="5" />
</VerticalStackLayout>
</ContentPage>
13. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.
namespace SampleMAUIApp.Bab6;
public partial class TodoItemPage : ContentPage
{
public TodoItemPage()
{
InitializeComponent();
}
bool isNewItem;
public TodoItemPage(bool isNew = false)
{
InitializeComponent();
isNewItem = isNew;
}
async void OnSaveActivated(object sender, EventArgs e)
{
var todoItem = (TodoItem)BindingContext;
await App.EmpServices.SaveTodoItemAsync(todoItem, isNewItem);
await Navigation.PopAsync();
}
async void OnDeleteActivated(object sender, EventArgs e)
{
var todoItem = (TodoItem)BindingContext;
await App.EmpServices.DeleteTodoItemAsync(todoItem.todoId);
await Navigation.PopAsync();
}
void OnCancelActivated(object sender, EventArgs e)
{
Navigation.PopAsync();
}
}
14. Tekan tombol F5 untuk menjalankan kode tersebut pada emulator.
Erick Kurniawan 
Leave a comment