Tugas 5 - Membuat Mobile Application "Hello World" Menggunakan Xamarin App Platform

Pembuatan Xamarin Mobile App dibagi atas fase - fase berikut:

Fase Project Setup:

1. Lakukan modify pada Visual Studio yang telah di-install sebelumnya. Kemudian, centanglah opsi Mobile Development with .NET dan lakukan instalasi komponen workload
   
   
   
2. Buka Visual Studio, kemudian pilih Create a New Project. Kemudian, pilihlah template Mobile App (Xamarin.Forms) sebagai template project
   
   
   
3. Tentukan Project Name, Location, dan Solution Name. Kemudian, Tekan tombol Create. Kemudian, akan muncul pop-up yang akan memberikan pilihan template. Pilih Template Blank, dan centang opsi pada "I plan to develop for:" pada OS Android dan iOS. Kemudian, lanjutkan dengan menekan tombol Create
   
   
   
4. Project sudah siap untuk digunakan

Fase Device Setup:

Untuk setup perangkat, akan digunakan Virtual Android Device sebagai device yang akan digunakan.

1. Tekan tombol Android Emulator untuk memulai proses pembuatan emulator
   
   
   
2. Akan muncul sebuah UAC Prompt untuk di-accept, yang kemudian akan memulai proses pembuatan emulator. Opsi - opsi akan ditentukan secara otomatis untuk sebuah emulator awal. Apabila diperlukan, opsi - opsi yang tertera pada property dapat dirubah value-nya. Apabila sudah selesai, dapat ditekan tombol Create
   
   
   
3. Setelah ini, anda akan diminta untuk menyetujui license agreement untuk emulator android. Baca seluruhnya dan pilih opsi Accept untuk melanjutkan prosesnya. Kemudian, proses download images untuk emulator akan dimulai dan akan mem-finalisasi pembuatan emulator pada Visual Studio. Setelah emulator dibuat, anda dapat mengklik tombol Start disebelah device yang telah di-download
   

Note: Apabila muncul sebuah notifikasi untuk mengaktifkan Windows Hypervisor Platform, ikuti langkah - langkah berikut:

1. Ketikkan pada Windows Search Bar keyword sesuai yang ada pada screenshot
   
   
   
2. Centanglah opsi Hyper-V dan kemudian pilih tombol OK. 

   
   

   

   
   
3. Setelah proses selesai, akan diminta untuk melakukan restart komputer. Lakukan operasi restart.

Fase Coding:

Tambahkan code untuk masing - masing elemen yang telah dibuat menggunakan template sebelumnya:

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="App2.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#621940" Padding="24" CornerRadius="0" >
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <!--Add Button Here -->
        <Button Text="Click Me" Clicked="Handle_Clicked" />
        
        <Label Text="Ini Halaman Hello World" FontSize="Title" Padding="30,10,30,10"/>
        <!--More Labels here -->
        <Label Text="Hello World" FontSize="16" Padding="30,0,30,0"/>
        <Label FontSize="16" Padding="30,24,30,0">
        </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 App2
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        int count = 0;
        void Handle_Clicked(object sender, System.EventArgs e)
        {
            count++;
            ((Button)sender).Text = $"You clicked {count} times.";
        }
    }
}

Demo Program