Xamarin Essentials: Menggunakan Map

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.

image

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)

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.

image

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

image

image

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.

image

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

image

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

image

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

image

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

image

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

image

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