[Xamarin Forms Series] – Menggunakan MVVM Pattern di Xamarin Forms 5 – Part 1

Apa itu MVVM pada Xamarin Forms?

Pengembang Xamarin.Forms biasanya membuat antarmuka pengguna di XAML, dan kemudian menambahkan kode di belakang( code behind). Saat aplikasi dimodifikasi, kode bertambah banyak, dan kompleksitas bertambah, masalah pemeliharaan akan muncul. Masalah-masalah ini termasuk ketergantungan ketat (tight coupling) antara kontrol UI dan logika bisnis, yang akan meningkatkan biaya pembuatan modifikasi UI, dan kesulitan ketika  menggunakan unit testing terhadap kode tersebut.

Model-View-ViewModel (MVVM) membantu memisahkan logika bisnis dan presentasi aplikasi dari antarmuka pengguna (UI). Mempertahankan pemisahan yang bersih (loose coupling) antara logika aplikasi dan UI akan membantu mengatasi berbagai masalah pengembangan dan dapat membuat aplikasi lebih mudah untuk diuji, dipelihara, dan dikembangkan. Ini juga dapat meningkatkan peluang penggunaan kembali kode dan memungkinkan pengembang dan desainer UI untuk lebih mudah berkolaborasi saat mengembangkan bagian aplikasi masing-masing.

Ada tiga komponen inti dalam MVVM yaitu model, view, dan view mode. Masing-masing mempunyai  tanggung jawab  yang berbeda. Gambar berikut  menunjukkan hubungan antara tiga komponen.

View bertanggung jawab untuk menentukan struktur, tata letak, dan tampilan dari apa yang dilihat pengguna di layar. Idealnya, setiap tampilan didefinisikan dalam XAML, dengan code behind seminimal mungkin yang tidak mengandung logika bisnis. Namun, dalam beberapa kasus, code behind mungkin berisi logika UI yang mengimplementasikan perilaku visual yang sulit diekspresikan dalam XAML, seperti animasi.

View Model mengimplementasikan properti dan command yang akan dibinding kedalam tampilan, dan memberi tahu tampilan tentang perubahan status apa pun melalui peristiwa pemberitahuan perubahan (notify property changed). Properti dan command yang disediakan view model menentukan fungsionalitas yang akan ditawarkan oleh UI, tetapi view menentukan bagaimana fungsionalitas itu akan ditampilkan.

Kelas Model adalah kelas non-visual yang merangkum data yg digunakan pada aplikasi. Oleh karena itu, model dapat dianggap mewakili model domain aplikasi, yang biasanya menyertakan model data bersama dengan logika bisnis dan validasi. Contoh objek model termasuk data transfer object (DTO), Plain Old C# Object (POCO), dan objek entitas.

Pada contoh dibawah ini akan ditunjukan cara menggunakan mvvm pattern di Xamarin Forms.

Buat Content Page dengan nama CoffeeEquipmentPage.xaml pada folder View

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMVVM.Views.CoffeeEquipmentPage">
    <Grid RowDefinitions="*,Auto,Auto,*">
    <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
<Button x:Name="btnCount" Clicked="btnCount_Clicked" Grid.Row="2" Text="Click Me" />
    </Grid>
</ContentPage>

Kemudian tambahkan code behind sebagai berikut. Properti CountDisplay akan dibinding kedalam Label. Pada contoh dibawah ini masih digunakan event handler untuk aktivitas penekanan tombol, namun pada contoh selanjutnya akan digunakan object Command.

namespace SampleMVVM.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CoffeeEquipmentPage : ContentPage
    {
        public CoffeeEquipmentPage()
        {
            InitializeComponent();
            BindingContext = this;
        }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }

        private void btnCount_Clicked(object sender, EventArgs e)
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }
    }
}

Pada kode dibawah ini, kita akan menggunakan object Command untuk membinding proses penekanan tombol.. Modifikasi kode sebelumnya pada XAML Page.

    <Grid RowDefinitions="*,Auto,Auto,*">
        <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
        <Button 
            Command="{Binding IncreaseCount}" Grid.Row="2" Text="Click Me" />
    </Grid>

Kemudian pada code behind tambahkan kode berikut. Object Command akan dibinding kedalam button control. Object command sendiri akan digunakan untuk memanggil method OnIncrease untuk mengubah nilai variabel count. Class ini juga harus diturunkan dari BindableObject agar dapat menggunakan  objek OnPropertyChanged() untuk memberi tahu ke UI (form) ada perubahan pada property CountDisplay, sehingga nilai label di form juga ikut berubah.

        public CoffeeEquipmentPage()
        {
            InitializeComponent();
            IncreaseCount = new Command(OnIncrease);
            BindingContext = this;
        }

        private void OnIncrease()
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }

        public ICommand IncreaseCount { get; }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }
    }

Anda juga dapat memisahkan class ViewModel kedalam folder tersendiri agar lebih mudah untuk dimaintain. Buat folder ViewModel untuk menambahkan semua class viewmodel yang akan dibinding kedalam view. Pada ViewModel tambahkan class CoffeeEquipmentViewModel.cs, kemudian pindahkan kodenya.

    public class CoffeeEquipmentViewModel : BindableObject
    {
        public ICommand IncreaseCount { get; }
        public CoffeeEquipmentViewModel()
        {
            IncreaseCount = new Command(OnIncrease);
        }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }

        private void OnIncrease()
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }
    }

Kemudian pada XAML tambahkan kode berikut. Pada XAML dapat ditambahkan namespace viewmodels yang dapat digunakan secara deklaratif pada XAML.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:SampleMVVM.ViewModels"
             x:Class="SampleMVVM.Views.CoffeeEquipmentPage"
             x:DataType="viewmodels:CoffeeEquipmentViewModel">
    <ContentPage.BindingContext>
        <viewmodels:CoffeeEquipmentViewModel/>
    </ContentPage.BindingContext>
    
    <Grid RowDefinitions="*,Auto,Auto,*">
        <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
        <Button 
            Command="{Binding IncreaseCount}" Grid.Row="2" Text="Click Me" />
    </Grid>
</ContentPage>

Pada blog selanjutnya akan dibahas bagaimana cara menggunakan MVVM Helper untuk mempermudah bekerja dengan MVVM di Xamarin Forms.

Global Azure 2021 Indonesia

JIka pada tahun-tahun sebelumnya Global Azure 2021 dilaksanakan di berbagai kota seperti Yogyakarta, Bandung, Jakarta, dan Purwokerto. Maka tahun ini secara serempak Microsoft MVP melaksanakan bersama-sama secara daring di Indonesia. Kegiatan ini dimulai pada tanggal 17 April 2021 mulai pkl 09.15 – 15.45 melalui Microsoft Teams. Kegiatan ini dikelola secara volunteer oleh Microsoft User Group Indonesia – Purwokerto. Kegiatan ini mengundang 8 pembicara, satu perwakilan Microsoft Indonesia dan tujuh adalah Microsoft MVP. 

Berikut adalah daftar tema dan speaker pada Global Azure 2021. 

  • Kiki Rizki Noviandi: Database as Cloud Computing in Azure
  • Andri Yadi: Stay Awesome at Home with Smart Home, Powered by Azure
  • Erick Kurniawan: Architect API integration in Azure
  • Agus Suparno: Azure Cognitive Service
  • Ridi Ferdiana: 10 Tips to make your cloud cheaper
  • Agus Kurniawan: Containerize Your Applications to Microsoft Azure Kubernetes Service
  • Eriawan Kusumawardhono: DevOps everywhere using Azure DevOps on Azure

Pada event ini saya berkesempatan untuk membawakan topik tentang Architect API integration in Azure. Pada sesi ini didemokan bagaimana cara menggunakan Azure API Management yang ada di Azure sebagai API Gateway dari berbagai macam services yang ada pada Azure.

Xamarin Forms 5.0: Apa yang baru??

Versi yang paling stabil dari Xamarin Forms sudah rilis yaitu Xamarin Forms 5.

Rilis utama ini memberikan ratusan peningkatan kualitas dan menghadirkan fitur-fitur baru yang stabil termasuk App Theme, Brushes, CarouselView, RadioButton, Shapes and Paths, dan SwipeView.

Bagaimana cara upgrade ke Xamarin Forms 5.0?

  • Pastikan andamenggunakan Visual Studio 2019. Ini adalah versi minimum yang diperlukan.
  • UIWebView telah dihapus untuk penyesuaian dengan guidelines dari Apple yang diperbarui.
  • Ekstensi markup MediaElement, Expander, dan C # UI telah dipindahkan ke pustaka Xamarin Community Toolkit. Anda dapat menginstal Xamarin Community Toolkit melalui NuGET package manager.
  • Package DataPages dan Theme harus dihapus dari solusi anda. Paket eksperimental ini tidak lagi dirilis.
  • (Opsional) MasterDetailPage dan tipe terkait telah diubah namanya menjadi FlyoutPage. Tipe lama sudah deprecated, biarpun anda masih dapat menggunakannya pada project namun disarankan menggunakan FlyoutPage untuk memudahkan migrasi ke MAUI nantinya.

Perbarui project Xamarin Forms anda ke versi 5.0 melalui NuGet Package Manager, clean, restart Visual Studio, dan terakhir rebuild projectnya.

Berikut langkah upgrade ke Xamarin Forms 5.0

1. Buat project Mobile App (Xamarin Forms) baru dengan nama SampleForm5

2. Kemudian pilih Flyout sebagai template dari aplikasi yang dibuat.

image

3. Klik kanan pada solution explorer, kemudian pilih manage Nuget Package Manager

4. Pada tab update akan muncul package Xamarin Forms. Pilih versi yang paling baru saat ini yaitu versi 5 dan tekan tombol install.

image

5. Kemudian update juga library Xamarin Essentials

6. Clean solution, restart visual studio, buka kembali project-nya, kemudian langkah terakhir lakukan rebuild.

7. Untuk android pastikan anda menggunakan target platform Android sdk 10 (Q).

image

8. Setelah solution berhasil di rebuild tanpa pesan error, jalankan aplikasi untuk memastikan tidak ada masalah pada proses upgrade.

Pada blog selanjutnya akan dibahas juga beberapa fitur yang baru pada Xamarin Forms 5, termasuk penggunaan Xamarin Community Toolkit.



[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.