TUGAS 5 PBKK - MEMBUAT MOBILE APPLICATION MENGGUNAKAN XAMARIN

Geizka Wahyu Fahriza

05111840000062

PBKK A

MEMBUAT MOBILE APPLICATION MENGGUNAKAN XAMARIN

Untuk membuat aplikasi android menggunakan xamarin ikuti langkah - langkah berikut :

1. Langkah pertama adalah buat project di visual studio, pilihlah template berikut

2. Selanjutnya isi nama project dan tempat project, lalu klik Create

3. Setelah itu akan ada prompt untuk template appnya, Pilih blank template lalu klik Create

4. Sebelum melakukan development, pertama kita harus set-up android emulator terlebih dahulu. Untuk melakukan setup, klik tombol berikut

5. Setelah itu akan ada prompt untuk membuat default android emulator. Klik create

6. Tunggulah proses download

7. Jika sudah, emulator dapat kita jalankan dengan tombol start

8. Jika sudah, maka akan muncul emulator seperti berikut

9. Dalam development xamarin, tidak ada xaml previewer. Oleh karena itu untuk melihat bagaimana UI yang kita buat dari xaml itu, kita harus tetap membiarkan emulator dan debugger berjalan. Dengan fitur hot reload yang ada di visual studio, kita dapat mengubah xaml dan save filenya. UI atau tampilan di emulator akan berubah sesuai perubahan di file. Contohnya sebagai berikut :

Jika label text yang ditandai merah tersebut kita ubah jadi hello world. Maka tampilan akan berubah jadi sebagai berikut.

10. Saya akan mengubah UI saya sesuai dengan yang saya mau. Silahkan menggunakan 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"
	x:Class="ClickerTestApp.MainPage">
	<StackLayout>
	<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
	<Label Text="Hello World" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
	</Frame>
	<Label Text="TUGAS 5 PBKK A" FontSize="Title" Padding="30,10,30,10"/>
	<Label Text="Nama : Geizka Wahyu Fahriza" FontSize="16" Padding="30,0,30,0"/>
	<Label Text="Kelas : PBKK A" FontSize="16" Padding="30,0,30,0"/>
	<Label Text="NRP : 05111840000062" FontSize="16" Padding="30,0,30,0"/>
	<Label FontSize="16" Padding="30,24,30,0">
	<Label.FormattedText>
	<FormattedString>
	<FormattedString.Spans>
	<Span Text="Learn more at "/>
	<Span Text="https://geizkafahriza.blogspot.com/" FontAttributes="Bold"/>
	</FormattedString.Spans>
	</FormattedString>
	</Label.FormattedText>
	</Label>
	</StackLayout>
	</ContentPage>

view raw Layout before button.xaml hosted with ❤ by GitHub

11. Selanjutnya kita akan menambahkan button. Silahkan ganti kode jadi 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"
	x:Class="ClickerTestApp.MainPage">
	<StackLayout>
	<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
	<Label Text="Hello World" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
	</Frame>
	<Label Text="TUGAS 5 PBKK A" FontSize="Title" Padding="30,10,30,10"/>
	<Label Text="Nama : Geizka Wahyu Fahriza" FontSize="16" Padding="30,0,30,0"/>
	<Label Text="Kelas : PBKK A" FontSize="16" Padding="30,0,30,0"/>
	<Label Text="NRP : 05111840000062" FontSize="16" Padding="30,0,30,0"/>
	<Button Text="Click me !" Margin="20,20,20,20"/>
	<Label FontSize="16" Padding="30,24,30,0">
	<Label.FormattedText>
	<FormattedString>
	<FormattedString.Spans>
	<Span Text="Learn more at "/>
	<Span Text="https://geizkafahriza.blogspot.com/" FontAttributes="Bold"/>
	</FormattedString.Spans>
	</FormattedString>
	</Label.FormattedText>
	</Label>
	</StackLayout>
	</ContentPage>

view raw Layout after button.xaml hosted with ❤ by GitHub

12. Untuk menambahkan event clicknya. kita bisa menambahkan property Clicked lalu akan muncul menu seperti berikut

Silahkan klik enter maka akan terbuat event bernama Button_Clicked seperti berikut

13. Silahkan buka MainPage.xaml.cs di tempat berikut

Kodenya akan berisi seperti berikut

14. Dalam kode tersebut kita isi kode seperti berikut :

	using System;
	using System.Collections.Generic;
	using System.ComponentModel;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace ClickerTestApp {
	public partial class MainPage : ContentPage {
	int count = 0;
	public MainPage() {
	InitializeComponent();
	}
	private void Button_Clicked(object sender, EventArgs e) {
	count++;
	((Button)sender).Text = string.Format("Clicked {0} times", count);
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Penjelasan :
variable count akan menyimpan seberapa banyak kita menekan tombol.

Fungsi Button_Clicked akan di eksekusi setiap tombol di klik sesuai dengan yang ada di .xaml tadi.
Untuk setiap click kita akan mengubah text dari pengirim eventnya (dimana disini adalah tombol kita tadi).

15. Jalankan aplikasinya