TUGAS 5 PBKK A - Xamarin Mobile App

1. Persiapan

    Unduh dan install Visual Studio disini dengan memilih Mobile development with .NET. Bila anda sudah pernah menginstall Visual Studio tetapi belum menginstall Mobile development with .NET dengan melakukan modify pada Visual Studio melalui Visual Studio Installer. Disana kita dapat langsung memilih Mobile development with .NET kemudian klik Modify.

Setelah berhasil, buka Visual Studio dan pilih Create a new project. Pilih Mobile pada dropdown Project type dan pilih Mobile App (Xamarin.Forms) lalu klik Next

Masukkan nama project dan pilih Blank sebagai template untuk aplikasi yang akan dibuat. Pastikan kita juga telah memilih Android dan iOS kemudian klik Create

2. Device Setup

Device yang akan kita gunakan adalah Android emulator. Pertama-tama kita klik tombol Android Emulator untuk mulai membuat emulator

Karena ini adalah kali pertama kita membuat emulator android pada Visual Studio, maka kita perlu mendownload terlebih dahulu emulator yang kita inginkan dari beberapa emulator yang tersedia. Pada kali ini saya memilih Pixel 2 (Default)

setelah berhasil didownload,  tutup emulator kemudian jalankan debugging kembali. Dan akan tampil seperti berikut ini

3. Perubahan Kode

Kita akan melakukan beberapa perubahan pada kode yang telah ada. 

1. pada file MainPage.xaml, kita melakukan perubahan pada warna dengan merubah Frame BackgroundColor dengan kode berikut ini

Kemudian kita tambahkan tombol dengan kode berikut

Hasilnya menjadi sebagai berikut

Kemudian untuk menambahkan logika untuk menghandle tombol, kita dapat membuat event handler pada file MainPage.xaml.cs.

Berikut adalah kode akhir dari aplikasi

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Tugas_5_PBKK.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="Aqua" Padding="24" CornerRadius="0" >
 
 
                <Label Text="Selamat Datang di Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Button Text="Klik Disini" Clicked="Handle_Clicked" />
        <Label Text="Tugas 5 PBKK A" FontSize="Title" Padding="30,10,30,10"/>
        <Label Text="Aplikasi ini dibuat menggunakan Xamarin.Forms dari Mobile development .NET" FontSize="16" Padding="30,0,30,0"/>
        <Label FontSize="16" Padding="30,24,30,0">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>
                        <Span Text="Pelajari selengkapnya di: "/>
                        <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
 
</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace Tugas_5_PBKK
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        int count = 0;
        void Handle_Clicked(object sender, System.EventArgs e)
        {
            count++;
            ((Button)sender).Text = $"Tombol diklik {count} kali.";
        }
    }
}

Demo

kode selengkapnya dapat dilihat disini.