Erick Kurniawan

Microsoft Certified Trainer, Microsoft MVP for +15y on Developer Technologies

[MAUI Tutorial] – .NET MAUI Essentials

.NET MAUI Essentials adalah bagian integral dari .NET MAUI yang menyediakan serangkaian API lintas platform untuk mengakses fitur dan kemampuan perangkat yang mendasarinya, seperti sensor dan layanan perangkat, dengan cara yang konsisten dan mudah digunakan. Ini memungkinkan pengembang untuk membangun aplikasi yang kaya fitur tanpa harus menulis kode spesifik untuk setiap platform yang didukung, seperti Android, iOS, macOS, dan Windows.

Beberapa fitur utama yang disediakan oleh .NET MAUI Essentials meliputi:

  • Device Information: Mendapatkan informasi dasar tentang perangkat, seperti model, versi sistem operasi, dan status konektivitas.
  • Geolocation: Mengakses layanan lokasi untuk mendapatkan koordinat geografis perangkat, yang berguna dalam aplikasi yang memerlukan pelacakan lokasi atau layanan berbasis lokasi.
  • Accelerometer, Gyroscope, dan Magnetometer: Menggunakan sensor perangkat untuk mendeteksi orientasi, gerakan, dan medan magnet di sekitar perangkat.
  • Battery: Memantau status baterai perangkat, termasuk tingkat daya dan status pengisian, yang dapat digunakan untuk mengoptimalkan penggunaan daya aplikasi.
  • Connectivity: Memeriksa status konektivitas internet perangkat dan mendeteksi perubahan jaringan, memungkinkan aplikasi untuk menyesuaikan fungsionalitas berdasarkan ketersediaan jaringan.
  • File System Helpers: Memudahkan pengelolaan file dan direktori di perangkat, termasuk penyimpanan dan pengambilan data dari lokasi yang aman.
  • Text-to-Speech: Mengubah teks menjadi suara yang dapat didengar, mendukung fitur aksesibilitas dan interaksi pengguna yang lebih dinamis.
  • Vibration: Mengaktifkan getaran perangkat untuk memberikan feedback taktil kepada pengguna, yang dapat meningkatkan interaksi pengguna dengan aplikasi.
  • Clipboard: Mengakses dan memanipulasi clipboard perangkat untuk operasi salin dan tempel.
  • Share: Memungkinkan aplikasi untuk berbagi data, seperti teks atau file, dengan aplikasi lain yang terpasang di perangkat.

Dengan .NET MAUI Essentials, pengembang dapat dengan cepat mengintegrasikan fitur-fitur perangkat keras dan layanan perangkat lunak ke dalam aplikasi mereka tanpa harus khawatir tentang perbedaan implementasi antara platform. Ini tidak hanya mempercepat pengembangan tetapi juga memastikan bahwa aplikasi berfungsi dengan baik di berbagai perangkat. Untuk menggunakan MAUI Essentials tambahkan NuGET berikut:

Lab – APP INFORMATION

1. Dengan menggunakan API ini anda dapat mengetahui informasi dari aplikasi.

2. Anda dapat mengambil informasi yang ada pada AndroidManifest.xml seperti:

  • Build – android:versionCode in manifest node
  • Name – android:label in the application node
  • PackageName: package in the manifest node
  • VersionString – android:versionName in the application node

3. Kemudian tambahkan halaman xaml baru dengan nama AppInformation.xaml.

4. Kemudian tambahkan xaml kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab7.AppInformation"
             Title="AppInformation">
    <VerticalStackLayout>
        <Button x:Name="btnAppName" Text="Nama Aplikasi" Margin="5" Clicked="btnAppName_Clicked" />
        <Button x:Name="btnPackageName" Text="Nama Package" Margin="5" Clicked="btnPackageName_Clicked" />
        <Button x:Name="btnVersion" Text="Nama Versi" Margin="5" Clicked="btnVersion_Clicked" />
        <Button x:Name="btnBuildNum" Text="Build Number" Margin="5" Clicked="btnBuildNum_Clicked" />
    </VerticalStackLayout>
</ContentPage>

5. Kemudian tambahkan kode berikut untuk menampilkan informasi aplikasi.

public partial class AppInformation : ContentPage
{
    public AppInformation()
    {
        InitializeComponent();
    }

    private async void btnAppName_Clicked(object sender, EventArgs e)
    {
        var appName = AppInfo.Name;
        await DisplayAlert("Keterangan", $"Nama Aplikasi: {appName}", "OK");
    }

    private async void btnPackageName_Clicked(object sender, EventArgs e)
    {
        await DisplayAlert("Keterangan", $"Nama Package: {AppInfo.PackageName}", "OK");
    }

    private async void btnVersion_Clicked(object sender, EventArgs e)
    {
        await DisplayAlert("Keterangan", $"Nama Versi: {AppInfo.VersionString}", "OK");
    }

    private async void btnBuildNum_Clicked(object sender, EventArgs e)
    {
        await DisplayAlert("Keterangan", $"Build Number: {AppInfo.BuildString}", "OK");
    }

}

6. Jalankan aplikasi pada devices/emulator dengan menekan tombol F5, maka akan dihasilkan tampilan sebagai berikut:

Lab – Check Battery Status

1. Anda juga dapat mengambil informasi battery status menggunakan MAUI Essentials. Informasi dari 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. Buat halaman dengan nama BatteryInfo.xaml, kemudian tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab7.BatteryInfo"
             Title="BatteryInfo">
    <VerticalStackLayout>
        <Button x:Name="btnBatteryStatus" Text="Cek Status" Clicked="btnBatteryStatus_Clicked" />
    </VerticalStackLayout>
</ContentPage>

3. Kemudian tambahkan kode berikut ini:

public partial class BatteryInfo : ContentPage
{
    public BatteryInfo()
    {
        InitializeComponent();
        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");
    }

}

3. Kemudian jalankan aplikasi pada device untuk melihat hasilnya

Lab – Menggunakan Geolocation

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

1. Jika target anda menggunakan emulator/device dengan OS Android maka pada folder Platforms/Android/AndroidManifest.xml tambahkan pengaturan ijin berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.INTERNET" />

	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-feature android:name="android.hardware.location" android:required="false" />
	<uses-feature android:name="android.hardware.location.gps" android:required="false" />
	<uses-feature android:name="android.hardware.location.network" android:required="false" />
	<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
</manifest>

2. Buat halaman baru dengan nama SampleGeoloc.xaml, kemudian tambahkan xaml berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab7.SampleGeoloc"
             Title="SampleGeoloc">
    <VerticalStackLayout>
        <Button x:Name="btnGeolocation" Text="Geoloation" Clicked="btnGeolocation_Clicked" />
    </VerticalStackLayout>
</ContentPage>

3. Kemudian tambahkan kode berikut untuk mengambil informasi geolocation.

public partial class SampleGeoloc : ContentPage
{
    public SampleGeoloc()
    {
        InitializeComponent();
    }

    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.

Lab – 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 SampleGeocoding.xaml dan tambahkan kode xaml berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab7.SampleGeocoding"
             Title="SampleGeocoding">
    <VerticalStackLayout>
        <Entry x:Name="txtAlamat" Placeholder="Masukan Alamat" />
        <Button x:Name="btnGeocoding" Text="Geocoding" 
                    Clicked="btnGeocoding_Clicked" />
    </VerticalStackLayout>
</ContentPage>

2. Kemudian tambahkan code behind berikut untuk menampilkan geocode.

public partial class SampleGeocoding : ContentPage
{
    public SampleGeocoding()
    {
        InitializeComponent();
    }

    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 pada Android emulator 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 dan tombol untuk Reverse Geocode.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab7.SampleGeocoding"
             Title="SampleGeocoding">
    <VerticalStackLayout>
        <Entry x:Name="txtAlamat" Placeholder="Masukan Alamat" />
        <Button x:Name="btnGeocoding" Text="Geocoding" 
                    Clicked="btnGeocoding_Clicked" />
        <Entry x:Name="txtLatitude" Placeholder="Masukan Latitude" />
        <Entry x:Name="txtLongitude" Placeholder="Masukan Longitude" />
        <Button x:Name="btnReverseGeo" Text="Reverse Geo" Clicked="btnReverseGeo_Clicked" />
    </VerticalStackLayout>
</ContentPage>

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

7. Kemudian jalankan aplikasi pada Android emulator, masukan informasi latitude dan longitude.

Lab – Menggunakan Map

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

1. Buat halaman baru dengan nama SampleMap.xaml. 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);
        }

Published by

Leave a comment