Pada tanggal 22-24 Maret 2022, Microsoft Indonesia mengadakan event dengan tagline Berdayakan Ekonomi Digital Indonesia. Untuk berita lengkap acara Dev//Verse Indonesia dapat dibaca pada tautan berikut.
Pada event ini saya berkesempatan untuk membawakan topik tentang Enterprise Wide API Management. Topik ini menceritakan bagaimana pentingnya pengelolaan API sebagai first-class asset yang dimiliki oleh perusahaan dengan menggunakan layanan yang ada pada Azure yaitu Azure API Management.
Acara webinar series dengan topik The Software Development Technology ini diadakan pada tanggal 19 Maret 2022. Pada webinar kali ini saya berkesempatan untuk berbagi tentang trend apa yang harus diketahui dan skill apa yang harus dipelajari untuk menjadi Programmer/Developer yang Kekinian. Pada webinar ini juga dijelaskan beberapa tools dan framework yang bisa digunakan untuk membuat programmer menjadi lebih produktif ketika menggunakan teknologi Microsoft Stack (ASP.NET Core, Visual Studio Code, Azure DevOps, Docker, etc).
Buku dengan judul Pengembangan Cross Platform Mobile App dengan Xamarin 5 & Visual Studio 2022 ini akan membahas bagaimana mengembangkan aplikasi Cross Platform (Android, IOS, Windows) menggunakan teknologi .NET dan bahasa C#. Xamarin Forms 5.0 sendiri adalah versi terakhir dari Xamarin Forms sebelum berevolusi menjadi .NET MAUI (.NET MAUI akan rilis di pertengahan tahun 2022). Buku ini cocok digunakan oleh pengembang aplikasi pemula yang akan mempelajari bagaimana cara mengembangkan aplikasi mobile dari awal.
Di permulaan bab akan dijelaskan apa itu Xamarin, dan apa saja yang dibutuhkan untuk memulai mengembangkan aplikasi mobile. Kemudian diteruskan dengan pembahasan tentang View, Layout, Navigasi antar halaman, dasar data binding, MVVM Pattern, dan bagaimana cara menampilkan data pada ListView. Setelah pembaca mengerti dasar pembuatan aplikasi, maka di bab selanjutnya akan dibahas bagaimana cara bekerja dengan data pada Local Storage, dan bagaimana cara mengakses data pada backend API. Buku ini juga menjelaskan beberapa fitur yang baru seperti bagaimana cara menggunakan Flyout, Xamarin Essentials, dan Xamarin Community Toolkit.
Akhir kata, selamat membaca dan mencoba membuat aplikasi mobile dengan Xamarin Forms. Semoga buku ini dapat bermanfaat untuk memberi fondasi dasar, dan praktek langsung untuk rekan-rekan yang memulai belajar untuk mengembangkan aplikasi mobile.
Berikut adalah tautan untuk mengunduh e-book ini.
Jika anda tertarik untuk belajar Xamarin Forms development lebih lanjut dengan topik yang lebih advance, anda juga dapat mengikuti pelatihan intensive dengan studi kasus yang dibutuhkan di https://actual-training.com. Untuk mendapatkan penawaran anda dapat menghubungi email info@actual-training.com atau no wa 087876133054.
Ketika bekerja dengan beberapa proyek Xamarin Forms, pengembang biasanya akan mencoba untuk menggunakan kembali elemen yang digunakan pada proyek sebelumnya. Elemen yang biasa digunakan kembali seperti value converter, custom view, dan behaviour. Untuk menyederhanakan kebutuhan tersebut Microsoft menawarkan library bernama Xamarin Community Toolkit.
Anda dapat memperoleh Xamarin Community Toolkit melalui NuGet Package Manager. Berikut adalah cara untuk menambahkan Xamarin Conmmunity Toolkit menggunakan Visual Studio 2022.
Anda dapat mengecek file .csproj untuk memastikan bahwa Xamarin Community Toolkit sudah ditambahkan.
Anda juga dapat melihat dokumentasi dan contoh implementasi dari Xamarin Commonity Toolkit pada tautan berikut ini.
Pada bab ini akan dibahas beberapa contoh elemen dari Xamarin Community Toolkit yang sering digunakan dalam membuat aplikasi.
Xamarin Community Toolkit menyediakan beberapa view yang dapat melengkapi view bawaan dari Xamarin Forms. Berikut ini adalah beberapa view yang ada pada Xamarin Community Toolkit
Pada contoh dibawah ini dijelaskan beberapa layout baru yang didukung di Xamarin Community Toolkit. Untuk lebih lengkapnya anda dapat melihat dokumentasinya.
Pada contoh berikut akan ditunjukan cara untuk menggunakan docking layout.
<xct:DockLayout LastChildFill="False">
<Button xct:DockLayout.Dock="Top" Text="Top" HeightRequest="50"/>
<Button xct:DockLayout.Dock="Bottom" Text="Bottom" HeightRequest="50"/>
<Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
<Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
</xct:DockLayout>
Hasilnya dapat dilihat sebagai berikut:
UniformGrid dapat digunakan untuk mengatur layout dalam bentuk Grid yang ukuran kolom dan barisnya sama persis.
<xct:UniformGrid>
<BoxView Color="Red" />
<BoxView Color="Yellow" />
<BoxView Color="Orange" />
<BoxView Color="Purple" />
<BoxView Color="Blue" />
<BoxView Color="Green" />
<BoxView Color="LightGreen" />
<BoxView Color="Gray" />
<BoxView Color="Pink" />
</xct:UniformGrid>
Hasilnya dapat dilihat sebagai berikut:
CameraView kontrol memungkinkan pengguna untuk menampilkan preview keluaran kamera. Selain itu CameraView juga dapat mengambil foto atau merekam video. CameraView juga menawarkan opsi yang anda harapkan untuk mendukung pengambilan foto dan perekaman video seperti menyalakan atau mematikan flash, menyimpan media yang diambil ke file. Berikut adalah kontrol yang dapat digunakan.
Pada contoh dibawah ini kita dapat mengcapture gambar, dan merekam video melalui kamera.
<ScrollView>
<Grid RowDefinitions="300, Auto, *">
<Grid ColumnDefinitions="*, *" Grid.Row="0">
<xct:CameraView
Grid.Column="0"
x:Name="cameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
MediaCaptured="CameraView_MediaCaptured"
OnAvailable="CameraView_OnAvailable"
VerticalOptions="FillAndExpand" />
<Label
Grid.Column="0"
Text="Camera"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
VerticalOptions="End" />
<Image
Grid.Column="1"
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray" />
<xct:MediaElement
Grid.Column="1"
x:Name="previewVideo"
Aspect="AspectFit"
BackgroundColor="LightGray"
IsVisible="false"/>
<Label
Grid.Column="1"
Text="Result"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
VerticalOptions="End" />
</Grid>
<StackLayout Grid.Row="1" Orientation="Horizontal">
<Label x:Name="zoomLabel" />
<Slider
x:Name="zoomSlider"
Margin="5,0"
IsEnabled="False"
Maximum="10"
Minimum="1"
HorizontalOptions="FillAndExpand"
ValueChanged="ZoomSlider_ValueChanged"
Value="1" />
</StackLayout>
<StackLayout Grid.Row="2">
<Grid ColumnDefinitions="*, *" RowDefinitions="*,*">
<StackLayout
Grid.Row="0"
Grid.Column="0"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="VideoSwitch_Toggled" />
<Label Text="Video" />
</StackLayout>
<StackLayout
Grid.Row="1"
Grid.Column="0"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="FrontCameraSwitch_Toggled" />
<Label Text="Front camera" />
</StackLayout>
<StackLayout
Grid.Row="0"
Grid.Column="1"
Margin="5"
Orientation="Horizontal">
<Switch
Margin="0,0,5,0"
IsToggled="False"
Toggled="FlashSwitch_Toggled" />
<Label Text="Flash" />
</StackLayout>
</Grid>
<Button
x:Name="doCameraThings"
Clicked="DoCameraThings_Clicked"
IsEnabled="False"
Text="Snap picture" />
</StackLayout>
</Grid>
</ScrollView>
Tambahkan juga kode c# berikut:
public partial class SampleCameraView : ContentPage
{
public SampleCameraView()
{
InitializeComponent();
zoomLabel.Text = string.Format("Zoom: {0}", zoomSlider.Value);
}
void ZoomSlider_ValueChanged(object? sender, ValueChangedEventArgs e)
{
cameraView.Zoom = (float)zoomSlider.Value;
zoomLabel.Text = string.Format("Zoom: {0}", Math.Round(zoomSlider.Value));
}
void VideoSwitch_Toggled(object? sender, ToggledEventArgs e)
{
var captureVideo = e.Value;
if (captureVideo)
cameraView.CaptureMode = CameraCaptureMode.Video;
else
cameraView.CaptureMode = CameraCaptureMode.Photo;
previewPicture.IsVisible = !captureVideo;
doCameraThings.Text = e.Value ? "Start Recording"
: "Snap Picture";
}
void FrontCameraSwitch_Toggled(object? sender, ToggledEventArgs e)
=> cameraView.CameraOptions = e.Value ? CameraOptions.Front : CameraOptions.Back;
void FlashSwitch_Toggled(object? sender, ToggledEventArgs e)
=> cameraView.FlashMode = e.Value ? CameraFlashMode.On : CameraFlashMode.Off;
void DoCameraThings_Clicked(object? sender, EventArgs e)
{
cameraView.Shutter();
doCameraThings.Text = cameraView.CaptureMode == CameraCaptureMode.Video
? "Stop Recording"
: "Snap Picture";
}
void CameraView_OnAvailable(object? sender, bool e)
{
if (e)
{
zoomSlider.Value = cameraView.Zoom;
var max = cameraView.MaxZoom;
if (max > zoomSlider.Minimum && max > zoomSlider.Value)
zoomSlider.Maximum = max;
else
zoomSlider.Maximum = zoomSlider.Minimum + 1; // if max == min throws exception
}
doCameraThings.IsEnabled = e;
zoomSlider.IsEnabled = e;
}
void CameraView_MediaCaptured(object? sender, MediaCapturedEventArgs e)
{
switch (cameraView.CaptureMode)
{
default:
case CameraCaptureMode.Default:
case CameraCaptureMode.Photo:
previewVideo.IsVisible = false;
previewPicture.IsVisible = true;
previewPicture.Rotation = e.Rotation;
previewPicture.Source = e.Image;
doCameraThings.Text = "Snap Picture";
break;
case CameraCaptureMode.Video:
previewPicture.IsVisible = false;
previewVideo.IsVisible = true;
previewVideo.Source = e.Video;
doCameraThings.Text = "Start Recording";
break;
}
}
}
Hasil dari program diatas dapat dilihat pada gambar dibawah ini.
Pada Xamarin.Forms terutama pada platform UI berbasis XAML, terjadi pengikatan data antara properti sumber dan properti target. Jika keduanya bertipe sama, data-binding dapat dilakukan. Jika properti memiliki tipe yang berbeda, misalnya saat perlu mengikat/binding Image.Source properti ke gambar yang diwakili oleh string Base64, mekanisme pengikatan data memerlukan konverter nilai yang sesuai yang mengubah string Base64 menjadi tipe ImageSource. Solusinya adalah menggunakan konverter nilai, yang merupakan objek yang mengimplementasikan IvalueConverter.
Adapun Reusable Converter yang dapat digunakan pada Xamarin Community Toolkit adalah sebagai berikut:
Pada Xamarin Forms, kita dapat menambahkan behaviour yang bertujuan untuk menambahkan fungsionalitas ke tampilan antarmuka pengguna tanpa harus membuat subclass-nya (turunan dari class). Beberapa behaviour yang ada pada Xamarin Community Toolkit adalah sebagai berikut:
Contoh berikut menunjukan bagaimana cara penggunaan EventToCommand behaviour yang biasa dilakukan untuk membinding event ItemTapped dari ListView ke command.
Pada contoh di artikel sebelumnya yang membahas tentang MVVM kita sudah melihat bagaimana cara untuk membinding ViewModel kedalam ListView. Namun ada satu hal yang belum kita lakukan yaitu memambahkan event hadler ItemTapped yang dibinding kedalam command yang ada di ViewModel. Untuk tujuan tersebut kita perlu menggunakan EventToCommand behaviour.
Hal yang pertama kita perlu menambahkan resources converter yang akan digunakan untuk mengkonversi event ke command.
<ContentPage.Resources>
<ResourceDictionary>
<xct:ItemSelectedEventArgsConverter x:Key="ItemSelectedEventArgsConverter" />
</ResourceDictionary>
</ContentPage.Resources>
Kemudian pada kontrol ListView kita dapat menambahkan EventToCommand behaviour.
<ListView.Behaviors>
<xct:EventToCommandBehavior EventName="ItemSelected"
Command="{Binding SelectedCommand}"
EventArgsConverter="{StaticResource ItemSelectedEventArgsConverter}"/>
</ListView.Behaviors>
Dengan menggunakan kode diatas maka kita dapat mengkonversi event ItemSelected pada ListView menjadi command SelectedCommand yang ada pada ViewModel.
SelectedCommand = new AsyncCommand<object>(SelectedCoffee);
private async Task SelectedCoffee(object arg)
{
var coffee = arg as Coffee;
if (coffee == null) return;
await Application.Current.MainPage.DisplayAlert("Selected", coffee.Name, "OK");
}
Behaviour yang sudah disediakan oleh Xamarin Community Toolkit Ini akan sangat membantu kita dalam proses development menggunakan pattern MVVM.
Erick Kurniawan 