About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)

Xamarin Shell: Menggunakan Shell Pada Xamarin Forms

Posted on January 4, 2020 by Erick Kurniawan

Xamarin.Forms 4.0 memperkenalkan fitur-fitur baru yang luar biasa untuk membantu merampingkan pengembangan saat membangun aplikasi mobile yang cantik dengan C #. Penekanan utama adalah Xamarin.Forms Shell baru, yang berupaya mengurangi kerumitan membangun aplikasi mobile dengan menyediakan fitur arsitektur aplikasi mendasar. Seperti hierarki visual, navigasi, routing berbasis URI, dan penanganan pencarian terintegrasi.

Pada tutorial ini anda akan melihat betapa mudahnya memasang fitur shell pada aplikasi Xamarin. Bentuk Shell dengan berbagai jenis skema navigasi dan cara menavigasi ke sub-halaman.

1. Untuk membuat shell dari awal, anda dapat membuat project baru kemudian pilih template untuk membuat shell seperti gambar dibawah ini.

2. Namun jika anda sudah memiliki project Xamarin Forms, maka anda dapat menambahkan Shell dengan cara menambahkan halaman xaml yang diturunkan dari class Shell.

3. Pada Xamarin Forms project tambahkan xaml baru dengan nama AppShell.xaml

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Latihan1.AppShell">
</Shell>

4. Kemudian pada code behind tambahkan kode sebagai berikut:

    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }

5. Kemudian pada App class tambahkan kode berikut ini untuk membuka shell pertama kali.

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

6. Untuk menambahkan menu anda dapat menggunakan FlyoutItem atau menggunakan TabBar.

7. Untuk menampilkan menu yang dapat di slide di sebelah kiri, anda dapat menggunakan flyout item. Kodenya adalah sebagai berikut:

<Shell ---------
       xmlns:views="clr-namespace:Latihan1.Bab3">
    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">

        <ShellContent Title="Binding List String">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model">
            <views:BindingToDataModel />
        </ShellContent>

        <ShellContent Title="Custom ListView">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>
</Shell>

8. Tampilannya dapat dilihat sebagai berikut:

9. Menu yang ditmbahkan bisa juga berupa tab.

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model">
            <views:BindingToDataModel />
        </ShellContent>

        <ShellContent Title="Custom ListView">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

10. Anda dapat melihat tampilannya sebagai berikut:

Xamarin Essentials: Menggunakan Map

Posted on December 7, 2019 by Erick Kurniawan

Map API dapat digunakan untuk menampilkan posisi/lokasi tertentu kedalam google map.

1. Buat halaman baru dengan nama XEMap. Kemudian tambahkan kode xaml berikut:

        <StackLayout>
            <Button x:Name="btnMap" Text="Map" Clicked="btnMap_Clicked" />
            <Button x:Name="btnPlacemark" Text="Placemark" Clicked="btnPlacemark_Clicked" />
        </StackLayout>

2. Tambahkan kode berikut ketika tombol Map ditekan.

        public async Task NavigateToBuilding25()
        {
            var location = new Location(47.645160, -122.1306032);
            var options = new MapLaunchOptions { Name = "Microsoft Building 25" };

            await Map.OpenAsync(location, options);
        }

        private async void btnMap_Clicked(object sender, EventArgs e)
        {
            await NavigateToBuilding25();
        }

3. Jalankan aplikasi untuk membuka map sesuai lokasi yang telah ditentukan.

4. Anda juga dapat memasukan informasi placemark yang lebih lengkap sebagai berikut:

        private async void btnPlacemark_Clicked(object sender, EventArgs e)
        {
            var placemark = new Placemark
            {
                CountryName = "United States",
                AdminArea = "WA",
                Thoroughfare = "Microsoft Building 25",
                Locality = "Redmond"
            };
            var options = new MapLaunchOptions { Name = "Microsoft Building 25" };

            await Map.OpenAsync(placemark, options);
        }

Xamarin Forms: Android Deployment (Membuat APK)

Posted on November 23, 2019 by Erick Kurniawan

Pada tutorial ini akan dijelaskan bagaimana cara membuat Android APK pada Xamarin Forms.

Untuk membuat Android APK ikuti langkah-langkah berikut ini:

1. Klik kanan pada project Android, kemudian pilih Archive.

2. Setelah langkah ini dikerjakan maka Visual Studio akan menyiapkan semua file yang nanti akan dikompilasi menjadi file .apk.

3. Setelah selesai pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Ada dua pilihan yaitu Ad Hoc dan Google Play. Pilih Ad Hoc untuk mendistribusikan .apk tanpa melalui google play.

4. Anda akan diminta untuk membuat sertifikat Android Keystore, masukan data yang dibutuhkan seperti gambar dibawah ini, kemudian tekan tombol Create.

5. Setelah proses signing identity pada aplikasi yang kita buat, pilih tombol Save As.

6. Beri nama .apk tersebut, misalnya modul2.modul2

7. Anda akan diminta untuk memasukan password yang sebelumnya sudah anda buat ketika membuat Android Keystore.

8. Anda dapat melihat bahwa kita sudah berhasil membuat file .apk yang siap untuk didistribusikan.

Xamarin Essentials: Menggunakan Geocoding

Posted on November 23, 2019 by Erick Kurniawan

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.

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");
            }
        }

.NET Conf 2019

Posted on November 22, 2019 by Erick Kurniawan

Pada tanggal 15 November 2019 telah dilangsungkan acara Seminar & Workshop .NET Conf yang bertempat di Gedung Perpustakaan Fakultas Teknik Universitas Gadjah Mada. Acara ini diselenggarakan oleh MIC UGM Yogyakarta.

NET Conf merupakan sebuah agenda tahunan yang diselenggarakan oleh komunitas developer .NET di seluruh dunia. Di Indonesia pada tahun ini, salah satunya di selenggarakan di kota Yogyakarta, lebih tepatnya di Perpustakaan Fakultas Teknik UGM pada 15 Oktober 2019. Acara ini diikuti oleh 42 peserta dengan latar belakang yang berbeda, seperti profesional dan mahasiswa dari beberapa universitas di Kota Yogyakarta. Kegiatan ini diisi oleh tiga pembicara, yakni Ridi Ferdiana – Microsoft MVP, Erick Kurniawan – Microsoft MVP, dan Nindi Kusuma Ningrum – Chief Project Officer dari OkeSayur. Para pembicara memberikan beberapa insight menarik bagi para peserta, seperti bagaimana meningkatkan produktivitas .NET dengan Visual Studio, DevOps for .NET Developer, Mengembangkan aplikasi Full-stack C# Web Apps dengan Blazor di .NET Core 3.0, Machine Learning for .NET, dan sebagainya.

Pada kesempatan ini saya membahas topik tentang apa yang baru pada Xamarin Forms dan Visual Studio 2019. Adapun topik yang dibahas pada seminar ini adalah:

Introduction to Xamarin Forms and Visual Studio 2019
Using Xamarin Shell
Xamarin Essentials
XAML Hot Reload
Xamarin Forms with ASP.NET Core Backend on Azure Apps
etc

Untuk materi dari seminar .NET Conf ini bisa didownload pada tautan berikut ini.

Xamarin Essentials: Menggunakan Geolocation

Posted on November 8, 2019 by Erick Kurniawan

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:

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

Xamarin Essentials: Check Battery Status

Posted on November 1, 2019 by Erick Kurniawan

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:

[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

Erick Kurniawan

IT Trainer, Consultant, & Microsoft MVP

Author Archives: Erick Kurniawan