FREE E-Book: Seri Belajar Xamarin – Cross Platform Mobile Apps dengan Xamarin Forms & Visual Studio 2019

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Seri Belajar Xamarin – Cross Platform Mobile Apps dengan Xamarin Forms & Visual Studio 2019.Buku ini berisi materi pembuatan aplikasi mobile dengan target platform Android, iOS, dan Universal Windows Platform (UWP) menggunakan Xamarin Forms dan Visual Studio 2019.

Pada ebook ini dibahas beberapa fitur yang baru pada Xamarin Forms seperti Xamarin Essentials dan penggunaan Xamarin Shell.

cover

Adapun daftar isi dari buku ini adalah sebagai berikut:

  • Bab 1 – Pengenalan Xamarin Form    4
    • Apa itu Xamarin    4
    • Cara Install Xamarin Forms    5
    • Memulai Membuat Project Xamarin Form    6
    • Menjalankan Aplikasi Android    7
    • Menjalankan Aplikasi Xamarin Forms pada IOS    8
    • Menjalankan Aplikasi Xamarin Forms pada UWP/Win 10.    9
  • Bab 2 – Desain Tampilan menggunakan Layout    10
    • Pendahuluan    10
    • Application Lifecycle pada Xamarin Forms    10
    • Xamarin Forms UI (User Interface)    10
    • Page    10
    • View    11
    • Layout    11
    • Practice #2.1 Penggunaan StackLayout    11
    • Practice #2.2 Contoh Penggunaan Absolute Layout    12
    • Practice #2.3 Menggunakan Relative Layout    12
    • Practice #2.4 Menggunakan GridLayout    13
    • Task #2.1 Menggunakan Scroll View pada Xamarin Form    14
    • Task #2.2 Kalkulator Sederhana    14
      Image View    15
    • Task #2.3 Menggunakan Image View    15
  • Bab 3 – Menampilkan Data Pada ListView    20
    • Pendahuluan    20
    • Binding Data yang bertipe List Of String    20
    • Practice #3.1 Menampilkan Data bertipe List Of String    20
    • Practice #3.2 Menampilkan Data dari Objek Data Model    21
    • Practice #3.3 Menampilkan Gambar pada Cell    23
    • Practice #3.4 Kustomisasi Baris pada ListView    25
  • BAB 4 – Navigasi    27
    • Pendahuluan    27
    • Jenis-jenis Navigasi pada Xamarin Forms    27
    • Practice #4.1 Menambahkan Navigasi Sederhana    27
    • Practice #4.2 Membuat Dropdown Menu    28
    • #Practice 4.3 Menggunakan Modal Form    29
    • Practice #4.4 Membuat Popup Alert    30
    • Practice #4.5 Mengirimkan Data Antar Page    32
    • Practice #4.6 Menggunakan objek Application.Current.Properties    33
    • Practice #4.7 Menggunakan Master Page    34
    • #Practice 4.8 Menambahkan Tab Page    37
    • #Practice 4.9 Menambahkan Shell    40
    • #Practice 4.10 Shell Navigation    42
    • #Practice 4.11 Mengirimkan Parameter Dengan Route    43
    • #Practice 4.12 Fitur Search Pada Shell    44
  • BAB 5 – Local Storage dengan SQLite    48
    • Pendahuluan    48
    • Bekerja dengan SQL Lite    48
    • Practice #5.1 Membuat Aplikasi Daftar Pegawai dengan SQLite    48
  • Bab 6 – Menggunakan REST Services pada Xamarin Forms    56
    • #Practice 5.2 Mengakses REST Services Menggunakan Fiddler.    56
    • #Practice 5.3 Mengakses REST Services dari Xamarin Forms.    57
  • BAB 7 – Android Deployment (Membuat APK)    64
    • Cara  Membuat APK pada Xamarin Form    64
  • BAB 8 – Xamarin Essentials    68
    • Practice 8.1 Instalasi Xamarin Essential    68
    • Practice 8.3 Xamarin Essentials: Check Battery Status    70
    • Practice 8.4 Xamarin Essentials: Menggunakan Geolocation    72
    • Practice 8.5 Xamarin Essentials: Menggunakan Geocoding    73
    • Practice 8.6 Xamarin Essentials: Menggunakan Map    75

Anda dapat mengunduh Ebook ini secara FREE melalui tautan berikut ini.

Jika anda tertarik untuk belajar lebih lanjut dengan topik yang lebih advance, anda juga dapat mengikuti pelatihan intensive dengan studi kasus yang dibutuhkan melalui https://actual-training.com

Xamarin Shell: Mengirimkan Parameter Dengan Route

Pada tutorial kali ini akan dibahas bagaimana cara mengirimkan parameter menggunakan fitur route yang ada pada Xamarin Shell.

1. Selain menggunakan route untuk navigasi, anda juga dapat mengirimkan nilai via navigasi dengan cara berikut:

2. Pada halaman BindingListString yang sudah anda buat sebelumnya, tambahkan kode berikut untuk mengirimkan nilai.

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            var nama = "Erick";
            await Shell.Current.GoToAsync($"//imagecell?nama={nama}");
        }

3. Kemudian pada halaman ListViewImageCell tambahkan label untuk menampilkan nilai parameter yang dikirimkan.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Kemudian tambahkan attribute berikut untuk mengambil nilai parameter:

    [QueryProperty("Nama","nama")]
    public partial class ListViewImageCell : ContentPage

5. Kemudian tambahkan property untuk mengambil data.

        public string Nama
        {
            set
            {
                lblPar.Text = Uri.UnescapeDataString(value);
            }
        }

image

Xamarin Shell: Shell Navigation

Xamarin Shell mempunyai URI-based navigation yang menggunakan mekanisme routes sehingga kita dapat berpindah navigasi tanpa harus mengikuti mekanisme navigasi hirarki standard.

1. Pada aplikasi yang sudah kita buat sebelumnya, tambahkan code behind sebagai berikut:

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("liststring", typeof(BindingListString));
            Routing.RegisterRoute("imagecell", typeof(ListViewImageCell));
            Routing.RegisterRoute("datamodel", typeof(BindingToDataModel));
            Routing.RegisterRoute("customlist", typeof(ListViewCustom));
        }

2. Kemudian pada bagian xaml tambahkan route berikut ini:

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List" Route="liststring">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell" Route="imagecell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String" Route="liststring">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model" Route="datamodel">
            <views:BindingToDataModel />
        </ShellContent>
        <ShellContent Title="Custom ListView" Route="customlist">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

3. Pada halaman BindingListString yang sudah dibuat sebelumnya tambahkan tmbol untuk navigasi halaman.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Untuk navigasi dengan menggunakan route yang sudah dibuat, anda dapat menambahkan perintah berikut ini:

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("imagecell");
        }

image

Xamarin Shell: Menggunakan Shell Pada Xamarin Forms

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.

image

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:

image

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:

image

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