[Free E-Book] Pengembangan Cross Platform Mobile App dengan Xamarin 5 & Visual Studio 2022

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.

[Xamarin Forms Series] – Xamarin Community Toolkit

Apa itu Xamarin Community Toolkit

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.

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

Bekerja dengan View

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

  • AvatarView
  • BadgeView
  • CameraView
  • DockLayout
  • Expander
  • LazyView
  • MediaElement
  • Popup
  • RangeSlider
  • Shield
  • StateLayout
  • TabView
  • UniformGrid
  • Uniform Grid

Pada contoh dibawah ini dijelaskan beberapa layout baru yang didukung di Xamarin Community Toolkit. Untuk lebih lengkapnya anda dapat melihat dokumentasinya.

Menggunakan DockingLayout

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:

Menggunakan UniformGrid

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:

Menggunakan Camera View

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.

Komponen Reusable Converter

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:

  • BoolToObjectConverter
  • ByteArrayToImageSourceConverter
  • CompareConverter
  • DateTimeOffsetConverter
  • DoubleToIntConverter
  • EnumToBoolConverter
  • EnumToIntConverter
  • EqualConverter
  • IndexToArrayItemConverter
  • IntToBoolConverter
  • InvertedBoolConverter
  • IsInRangeConverter
  • IsNotNullOrEmptyConverter
  • IsNullOrEmptyConverter
  • ItemSelectedEventArgsConverter
  • ItemTappedEventArgsConverter
  • ListIsNotNullOrEmptyConverter
  • ListIsNullOrEmptyConverter
  • ListToStringConverter
  • MathExpressionConverter
  • MultiConverter
  • NotEqualConverter
  • StringToListConverter
  • TextCaseConverter
  • VariableMultiValueConverter

Validasi Data dengan Reusable Behaviour

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:

  • AnimationBehavior
  • CharactersValidationBehavior
  • EmailValidationBehavior
  • EventToCommandBehavior
  • ImpliedOrderGridBehavior
  • MaskedBehavior
  • MaxLengthReachedBehavior
  • MultiValidationBehavior
  • NumericValidationBehavior
  • RequiredStringValidationBehavior
  • SetFocusOnEntryCompletedBehavior
  • TextValidationBehavior
  • UriValidationBehavior
  • UserStoppedTypingBehavior
  • ValidationBehavior

EventToCommand Behaviour Pada ListView

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.

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.