Xamarin Essentials: Menggunakan Geocoding

Geocoding API menyediakan informasi geocode placemark (alamat tertentu) menjadi koordinat latitude dan longitude, dan sebaliknya koordinat menjadi placemark (reverse geocode coordinates).

1. Buat halaman baru dengan nama XEGeocoding dan tambahkan kode xaml berikut:

        <StackLayout>
            <Entry x:Name="txtAlamat" Placeholder="Masukan Alamat" />
            <Button x:Name="btnGeocoding" Text="Geocoding" 
                    Clicked="btnGeocoding_Clicked" />
        </StackLayout>

2. Kemudian tambahkan code behind berikut untuk menampilkan geocode.

        private async void btnGeocoding_Clicked(object sender, EventArgs e)
        {
            try
            {
                var address = txtAlamat.Text;
                var locations = await Geocoding.GetLocationsAsync(address);
                var location = locations?.FirstOrDefault();
                if (location != null)
                {
                    await DisplayAlert("Keterangan",
                        $"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}", "OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
            
        }

3. Kemudian jalankan aplikasi dan ketikan alamat tertentu, maka akan ditampilkan posisi latitude dan longitude dari alamat tersebut.

image

4. Anda juga dapat melakukan reverse geocoding dari koordinat latitude dan longitude.

5. Tambahkan entry pada halaman xaml untuk memasukan data latitude dan longitude.

        private async void btnReverseGeo_Clicked(object sender, EventArgs e)
        {
            try
            {
                double lat = Convert.ToDouble(txtLatitude.Text);
                double lon = Convert.ToDouble(txtLongitude.Text);

                var placemarks = await Geocoding.GetPlacemarksAsync(lat, lon);

                var placemark = placemarks?.FirstOrDefault();
                if (placemark != null)
                {
                    var geocodeAddress =
                        $"AdminArea:       {placemark.AdminArea}\n" +
                        $"CountryCode:     {placemark.CountryCode}\n" +
                        $"CountryName:     {placemark.CountryName}\n" +
                        $"FeatureName:     {placemark.FeatureName}\n" +
                        $"Locality:        {placemark.Locality}\n" +
                        $"PostalCode:      {placemark.PostalCode}\n" +
                        $"SubAdminArea:    {placemark.SubAdminArea}\n" +
                        $"SubLocality:     {placemark.SubLocality}\n" +
                        $"SubThoroughfare: {placemark.SubThoroughfare}\n" +
                        $"Thoroughfare:    {placemark.Thoroughfare}\n";

                    await DisplayAlert("Keterangan",geocodeAddress,"OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
        }

image

Xamarin Essentials: Menggunakan Geolocation

Pada tutorial kali ini kita akan mencoba menggunakan salah satu API dari Xamarin Essentials yaitu Geolocation API.

Geolocation API digunakan untuk mengambil lokasi dari devices berupa informasi koordinat (latitude, dan longitude).

1. Buat halaman baru dengan nama XEGeolocation, kemudian tambahkan xaml berikut:

        <StackLayout>
            <Button x:Name="btnGeolocation" Text="Geoloation" />
        </StackLayout>

2. Tambahkan permission berikut pada Android Project. Tambahkan kode berikut pada file AssemblyInfo.cs.

[assembly: UsesPermission(Android.Manifest.Permission.AccessCoarseLocation)]
[assembly: UsesPermission(Android.Manifest.Permission.AccessFineLocation)]
[assembly: UsesFeature("android.hardware.location", Required = false)]
[assembly: UsesFeature("android.hardware.location.gps", Required = false)]
[assembly: UsesFeature("android.hardware.location.network", Required = false)]

3. Kemudian tambahkan kode berikut untuk mengambil informasi geolocation.

        private async void btnGeolocation_Clicked(object sender, EventArgs e)
        {
            try
            {
                var request = new GeolocationRequest(GeolocationAccuracy.Medium);
                var location = await Geolocation.GetLocationAsync(request);
                if (location != null)
                {
                    await DisplayAlert("Keterangan",
                        $"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}","OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (FeatureNotEnabledException fneEx)
            {
                await DisplayAlert("Error", fneEx.Message, "OK");
            }
            catch (PermissionException pEx)
            {
                await DisplayAlert("Error", pEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
        }

4. Kemudian jalankan aplikasinya, jika anda belum mengaktifkan fitur lokasi pada devices, maka akan ditampilkan notifikasi sebagai berikut:

image

5. Agar aplikasi dapat digunakan aktifkan fitur location/GPS pada devices. Maka akan ditampilkan informasi geolocationnya.

image

Xamarin Essentials: Check Battery Status

Pada tutorial kali ini kita akan menggunakan salah satu fitur pada Xamarin Esseintials API untuk mengakses status Battery dari aplikasi yang kita buat.

Dengan menggunakan Battery Status API kita dapat melakukan pengecekan ketika device terkoneksi dengan A/C Power atau status battery sudah low, dan status lainnya.

1. Anda juga dapat mengambil informasi battery status menggunakan API Xamarin Essentials. Informasi dati battery yang dapat diambil adalah:

    • · Battery dalam keadaan di charging
    • · Battery dalam keadaan Full
    • · Battery dalam keadaan tidak dicharging
    • · Power pada device dalam keadaan dicharge atau menggunakan battery
    • · Deteksi bila battery masuk dalam keadaan Energy Saver.

2. Pada android project tambahkan kode berikut untuk mengijinkan aplikasi untuk mengakses battery status. Buka file AssemblyInfo.cs pada Properties untuk menambahkan konfigurasi berikut ini:

image

[assembly: UsesPermission(Android.Manifest.Permission.BatteryStats)]

3. Buat halaman dengan nama XEBatteryInfo, kemudian tambahkan kode berikut:

        <StackLayout>
            <Button x:Name="btnBatteryStatus" Text="Cek Status" Clicked="btnBatteryStatus_Clicked" />
        </StackLayout>

4. Kemudian tambahkan kode berikut ini:

        public XEBatteryInfo()
        {
            InitializeComponent();
            Battery.BatteryInfoChanged += Battery_BatteryInfoChanged;
            Battery.EnergySaverStatusChanged += Battery_EnergySaverStatusChanged; 
        }

        private async void Battery_EnergySaverStatusChanged(object sender, EnergySaverStatusChangedEventArgs e)
        {
            //bisa on,off, atau Unknown
            var status = e.EnergySaverStatus;
            await DisplayAlert("Keterangan",$"Energy Status:{status}","OK");
        }

        private async void Battery_BatteryInfoChanged(object sender, BatteryInfoChangedEventArgs e)
        {
            var level = e.ChargeLevel;
            var state = e.State;
            var source = e.PowerSource;
            await DisplayAlert("OK",$"Reading: Level: {level}, State: {state}, Source: {source}","OK");
        }

        private async void btnBatteryStatus_Clicked(object sender, EventArgs e)
        {
            var level = Battery.ChargeLevel; // returns 0.0 to 1.0 or 1.0 when on AC or no battery.

            var state = Battery.State;
            var keterangan = string.Empty;
            switch (state)
            {
                case BatteryState.Charging:
                    keterangan += "Battery di Charge\n";
                    break;
                case BatteryState.Full:
                    keterangan += "Battery sudah Penuh\n";
                    break;
                case BatteryState.Discharging:
                case BatteryState.NotCharging:
                    keterangan += "Battery tidak di charge\n";
                    break;
                case BatteryState.NotPresent:
                case BatteryState.Unknown:
                    keterangan += "Status battery tidak ditemukan\n";
                    break;
            }

            var source = Battery.PowerSource;

            switch (source)
            {
                case BatteryPowerSource.Battery:
                    keterangan += "Menggunakan Battery\n";
                    break;
                case BatteryPowerSource.AC:
                    keterangan += "Menggunakan AC Power\n";
                    break;
                case BatteryPowerSource.Usb:
                    keterangan += "Charge menggunakan Usb\n";
                    break;
                case BatteryPowerSource.Wireless:
                    keterangan += "Charge menggunakan Wireless\n";
                    break;
                case BatteryPowerSource.Unknown:
                    keterangan += "Charge tidak diketahui\n";
                    break;
            }

            await DisplayAlert("Keterangan", keterangan, "OK");
        }
    }

5. Kemudian jalankan aplikasi pada device untuk melihat hasilnya

image

Xamarin Essentials: Cara Instalasi

Xamarin Essentials menyediakan satu API yang dapatbekerja dengan IOS, Android, dan aplikasi UWP yang dapat diakses dari satu share code. Xamarin Essentials menyediakan banyak feature yang dapat digunakan seperti:

  • · Accelerometer
  • · App Information
  • · Barometer
  • · Battery
  • · Clipboard
  • · Color Converters
  • · Compass
  • · Connectivity
  • · Detect Shake
  • · Device Display Information
  • · Device Information
  • · Email
  • · File System Helpers
  • · Flashlight
  • · Geocoding
  • · Geolocation
  • · Gyroscope
  • · Launcher
  • · Magnetometer
  • · MainThread
  • · Maps
  • · Open Browser
  • · Orientation Sensor
  • · Phone Dialer
  • · Platform Extensions
  • · Preferences
  • · Secure Storage
  • · Share
  • · SMS
  • · Text-to-Speech
  • · Unit Converters
  • · Version Tracking
  • · Vibrate

Untuk menggunakan library Xamarin Essentials, lakukan langkah-langkah sebagai berikut:

1. Buat project blank Xamarin Forms dengan nama SampleXamarinEssentials.

2. Kemudian klik kanan pada project Xamarin Forms kemudian pilih Nuget Package

image

3. Kemudian cari Xamarin Essentials. Jika anda menggunakan Visual Studio 2019, maka Xamarin Essentials sudah terpasang secara default ketika anda membuat project baru.

image

Xamarin Forms with Prism – Tabbed Page with Prism

Pada contoh dibawah ini akan ditunjukan cara menggunakan Tabbed Page dengan menggunakan Prism.

Tambahkan view baru dengan nama PrismTabbedPage.xaml.

image

Kemudian untuk menambahkan halaman yang akan ditampilkan pada TabbedPage, tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="ContohPrism.Views.PrismTabbedPage"
            xmlns:local="clr-namespace:ContohPrism.Views" Title="Tabbed Page">
    <TabbedPage.Children>
        <local:CalculatorPage Title="Calculator" />
        <local:ListArtikelPage Title="Artikel" />
    </TabbedPage.Children>
</TabbedPage>

Jangan lupa untuk meregister halaman yang akan ditampilkan pada App.xaml.cs.

        protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("PrismTabbedPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<CalculatorPage, CalculatorPageViewModel>();
            containerRegistry.RegisterForNavigation<ListArtikelPage, ListArtikelPageViewModel>();
            containerRegistry.RegisterForNavigation<PrismTabbedPage, PrismTabbedPageViewModel>();
        }

Tampilan halaman TabbedPage dapat dilihat pada gambar berikut ini:

image

Xamarin Forms MVVM : ListView dengan Menggunakan Prism

Pada bab ini akan dijelaskan bagaimana cara membinding data kedalam ListView dengan menggunakan framewrok Prism.

Pertama pada project CobaPrism yang sudah dibuat pada tutorial sebelumnya, tambahkan view dengan nama ListArtikelPage.xaml

image

Untuk membuat model yang akan di tampilkan pada ListArtikelPage, buat folder dengan nama Models. Pada folder Models tambahkan clas dengan nama Artikel.cs

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Setelah View dibuat maka file ViewModel juga otomatis akan dibuat. Tambahkan file ListArtikelPageViewModel.cs.

    public class ListArtikelPageViewModel : ViewModelBase
    {
        public ListArtikelPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
            _listArtikel = new List<Artikel>
            {
                new Artikel{ArtikelID=1,Judul="Pemrograman CSharp",Deskripsi="Deskripsi Buku Pemrograman CSharp"},
                new Artikel{ArtikelID=2,Judul="ASP.NET Core 2.1",Deskripsi="Deskripsi Buku Pemrogaman ASP.NET Core 2.1"},
                new Artikel{ArtikelID=3,Judul="Xamarin Forms",Deskripsi="Deskripsi Buku Xamarin Forms"}
            };
        }

        private List<Artikel> _listArtikel;
        public List<Artikel> ListArtikel
        {
            get { return _listArtikel; }
            set { SetProperty(ref _listArtikel, value); }
        }
    }

Pada file diatas dapat dilihat bahwa ListArtikel bertipe collection of Artikel. Data pada ListArtikel akan ditampilkan pada ListView. Pada ListArtikelPage.xaml, tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="ContohPrism.Views.ListArtikelPage" Title="{Binding Title}">
    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Jika program dijalankan maka akan ditampilkan data List Artikel pada ListView.

image

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Xamarin Forms MVVM Prism : Menggunakan EventToCommand Behaviour

ListView tidak memiliki properti command, sehingga untuk menangani event handler (ItemTapped) pada saat item dipilih harus menggunakan EventToCommandBehaviour.

Untuk menggunakan EventToCommand Behaviour, tambahkan kode berikut pada view ListArtikelPage.xaml

    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.Behaviors>
                <b:EventToCommandBehavior EventName="ItemTapped"
                                          Command="{Binding ItemTappedCommand}"
                                          EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Penambahan EventToCommandBehaviour ditujukan untuk membinding event ItemTapped pada ListView. Ini dikarenakan ListView tidak memiliki properti Command.

Untuk mengambil nilai kembalian dari event handler yang dibinding maka harus dibuat objek converter. Pada solution explorer tambahkan folder dengan nama Converters, kemudian tambahkan file baru dengan nama ItemTappedEventArgsConverter.cs. Tambahkan kode sebagai berikut:

    public class ItemTappedEventArgsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var itemTappedEventArgs = value as ItemTappedEventArgs;
            if (itemTappedEventArgs == null)
            {
                throw new ArgumentException("Kembalian diharapkan berupa Item Tapped", nameof(value));
            }
            return itemTappedEventArgs.Item;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Kemudian pada ListArtikelPageViewModel.cs tambahkan method yang digunakan untuk menangani event ItemTapped.

    public class ListArtikelPageViewModel : ViewModelBase
    {
----------------------------------------------

        public Artikel ItemSelected { get; set; }

        public DelegateCommand<Artikel> _itemTappedCommand;
        public DelegateCommand<Artikel> ItemTappedCommand =>
            _itemTappedCommand ?? (_itemTappedCommand = new DelegateCommand<Artikel>(ExecuteTtemTappedCommand));

        private void ExecuteTtemTappedCommand(Artikel obj)
        {
            ItemSelected = obj;
            _dialogService.DisplayAlertAsync("Keterangan", $"Judul: {obj.Judul}", "OK");
        }
    }

Method ExecuteItemTappedCommand juga digunakan untuk mengambil parameter objek yang dikirimkan dari Item Tapped, data yang diambil berupa data objek dari ListView.

Berikut adalah tampilan ketika memilih salah satu item pada ListView.

image