Bekraf Developer Day 2017–Denpasar Bali

Pada tanggal 6 – 7 May 2017 telah dilaksanakan acara Bekraf Developer Day 2017 di Aston Denpasar Hotel & Convention Center, Denpasar, Bali.   Acara ini diselenggarakan atas kerjasama Badan Ekonomi Kreatif (BEKRAF) dan Dicoding dengan dukungan Asosiasi Game Indonesia, BaliJS, Codepolitan, Dicoding Elite, Gamedev Bali, Google, Google Developer Expert, IBM Indonesia Intel Innovator, Komunitas ID-Android, Microsoft Indonesia, Samsung Indonesia, dan perusahaan-perusahaan teknologi di Indonesia.

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Digital

Pada acara ini peserta akan mendapatkan update teknis dari para praktisi yang telah sukses dalam pengembangan aplikasi, web, game, dan Internet of Things yang dikemas dalam sesi inspirasi, workshop/Masterclass, live coding, dan talkshow.

Situs resmi untuk pendaftaran acara ini dapat diakses pada laman berikut: https://www.dicoding.com/events/577

Pada acara ini saya diberi kesempatan untuk berbagi ilmu dengan rekan-rekan developer dari seluruh Indonesia untuk membawakan materi Master Class Workshop dengan judul Membangun Aplikasi Multiplatform dengan Xamarin.

Berikut ini adalah beberapa dokumentasi dari acara tersebut:

1

2

3

Bekraf Developer Day–Xamarin Master Class

Pada tanggal 9 April 2017 telah dilaksanakan acara BEKRAF Developer Day 2017 – Solo.

Acara ini diselenggarakan atas kerjasama Badan Ekonomi Kreatif (BEKRAF) dan Dicoding dengan dukungan Asosiasi Game Indonesia, Dicoding Elite, Google Developer Expert, IBM Indonesia, Intel Innovator, Komunitas ID-Android, TSM Indonesia, Samsung Indonesia, dan perusahaan-perusahaan teknologi di Indonesia.

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Digital

Peserta akan mendapatkan update teknis dari para praktisi yang telah sukses dalam pengembangan aplikasi, game, dan Internet of Things yang dikemas dalam sesi inspirasi, workshop/Masterclass, live coding, dan talkshow. 

Saya mendapatkan kesempatan untuk berpartisipasi sebagai narasumber pada kelas Masterclass 01 – Pembuatan Aplikasi Multiplatform dengan Xamarin.

24

1

Xamarin Forms: Menggunakan Master Page

Salah satu bentuk navigasi yang banyak digunakan pada aplikasi mobile adalah Master Page. Dengan model navigasi ini pengguna dapat dengan mudah memilih menu yang disediakan di bagian kiri halaman dan menampilkan konten pada bagian utama.

Xamarin Forms sudah menyediakan template khusus yang dapat digunakan jika anda ingin mengimplementasikan jenis navigasi ini, berikut adalah langkah-langkah untuk membuat navigasi dalam bentuk Master Page pada Xamarin Forms.

  1. Buat Project Xamarin Forms baru, kemudian tambahkan kode berikut pada halaman MainPage.xaml.
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
				  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
				  xmlns:local="clr-namespace:Modul4;assembly=Modul4"
				  x:Class="Modul4.MainPage">
  <MasterDetailPage.Master>
  	<local:MasterPage x:Name="masterPage" />
  </MasterDetailPage.Master>
	<MasterDetailPage.Detail>
		<NavigationPage>
			<x:Arguments>
				<local:ContactsPage />
			</x:Arguments>
		</NavigationPage>
	</MasterDetailPage.Detail>
</MasterDetailPage> 

2. Pada project portable, tambahkan class baru dengan nama MasterPageItem.cs. Class ini digunakan untuk merepresentasikan isi dari menu.

	public class MasterPageItem
	{
		public string Title { get; set; }
		public string IconSource { get; set; }
		public Type TargetType { get; set; }
	}

3. Pada halaman MainPage.cs tambahkan kode berikut:

	public partial class MainPage : MasterDetailPage
	{
		public MainPage ()
		{
			InitializeComponent ();
			masterPage.ListView.ItemSelected += OnItemSelected;
		}

		void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
		{
			var item = e.SelectedItem as MasterPageItem;
			if (item != null) {
				Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
				masterPage.ListView.SelectedItem = null;
				IsPresented = false;
			}
		}
	}

4. Buat file dengan nama MasterPage.xaml yang berisi list menu yang akan dipilih

<?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="MasterDetailPageNavigation.MasterPage"
			 Padding="0,40,0,0"
			 Icon="icon.png"
			 Title="Personal Organiser">
	<ContentPage.Content>
		<StackLayout VerticalOptions="FillAndExpand">
			<ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
				<ListView.ItemTemplate>
					<DataTemplate>
						<ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" />
					</DataTemplate>
				</ListView.ItemTemplate>
			</ListView>
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

5. Tambahkan kode berikut pada file MasterPage.cs

	public partial class MasterPage : ContentPage
	{
		public ListView ListView { get { return listView; } }

		public MasterPage()
		{
			InitializeComponent();

			var masterPageItems = new List<MasterPageItem> ();
			masterPageItems.Add (new MasterPageItem {
				Title = "Contacts",
				IconSource = "contacts.png",
				TargetType = typeof(ContactsPage)
			});
			masterPageItems.Add (new MasterPageItem {
				Title = "TodoList",
				IconSource = "todo.png",
				TargetType = typeof(TodoListPage)
			});
			masterPageItems.Add (new MasterPageItem {
				Title = "Reminders",
				IconSource = "reminders.png",
				TargetType = typeof(ReminderPage)
			});

			listView.ItemsSource = masterPageItems;
		}
	}

6. Untuk bagian halaman detail tambahkan kode berikut pada halaman ContactsPage.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="MasterDetailPageNavigation.ContactsPage"
			 Title="Contacts Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Contacts data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

7. Tambahkan lagi halaman dengan nama ReminderPage.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="MasterDetailPageNavigation.ReminderPage"
			 Title="Reminder Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Reminder data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

8. Terakhir tambahkan halaman dengan nama TodoListPage.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="MasterDetailPageNavigation.TodoListPage"
			 Title="TodoList Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Todo list data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

9. Pada file App.cs tambahkan kode berikut:

	public App ()
	{
			MainPage = new MasterDetailPageNavigation.MainPage();
	}

10. Hasilnya dapat dilihat pada gambar berikut ini:

imageimage

Untuk diskusi dan pertanyaan, anda dapat mengirimkan email ke: erick@actual-training.com

Modal Form Navigation pada Xamarin Forms

Xamarin Form juga mendukung Modal Form. Ada tiga pilihan dalam menggunakan navigasi berbasis Modal yaitu:

  • NavigationPage untuk full-page modals.
  • Alert untuk notifikasi pengguna.
  • Action sheet untuk pop-up menu.

Dengan menggunakan modal form anda dapat menampilkan halaman full-screen. Ketika modal form ditampilkan, maka navigation bar tidak akan ditampilkan sampai form modal tersebut ditutup.

1. Buat halaman xaml baru dengan nama ModalPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Bab4.ModalPage">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="First Page" FontSize="40" />
      <Button Text="Go to Second Page Modally" Clicked="Navigate" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Tambahkan kode berikut untuk memanggil halaman modal.

    public partial class ModalPage : ContentPage
    {
        public ModalPage()
        {
            InitializeComponent();
        }

        protected async void Navigate(object sender, EventArgs args)
        {
            await Navigation.PushModalAsync(new ModalSecondPage(), false);
        }
    }

3. Untuk halaman yang dipanggil buat halaman xaml baru dengan nama ModalSecondPage.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="Bab4.ModalSecondPage">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Second Page" FontSize="40" />
      <Button Text="Pop back to First Page" Clicked="Navigate" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

4. Kemudian tambahkan kode berikut untuk menutup form modal.

    public partial class ModalSecondPage : ContentPage
    {
        public ModalSecondPage()
        {
            InitializeComponent();
        }

        protected async void Navigate(object sender, EventArgs args)
        {
            await Navigation.PopModalAsync();
        }
    }

5. Tampilan modal form dapat dilihat pada gambar berikut.

image

image

Contoh Kompleks Modal Forms

Pada contoh kedua akan ditunjukan cara penggunaan modal form yang lebih kompleks untuk menampilkan ListView dan detail berupa modal form.

1. Buat halaman utama dengan nama MainModalPage.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="Bab4.MainModalPage" Title="Contacts">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <StackLayout>
      <ListView x:Name="listView" ItemSelected="OnItemSelected">
        <ListView.ItemTemplate>
          <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Country}" DetailColor="Red" />
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Pada project portable, tambahkan class Contact.cs, dan tulis kode berikut:

    public class Contact
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Occupation { get; set; }
        public string Country { get; set; }
    }

3. Kemudian tambahkan kode berikut pada MainModalPage.xaml.cs.

    public partial class MainModalPage : ContentPage
    {
        List<Contact> contacts;
        public MainModalPage()
        {
            InitializeComponent();
            SetupData();
            listView.ItemsSource = contacts;
        }

        async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (listView.SelectedItem != null)
            {
                var detailPage = new DetailPage();
                detailPage.BindingContext = e.SelectedItem as Contact;
                listView.SelectedItem = null;
                await Navigation.PushModalAsync(detailPage);
            }
        }

        void SetupData()
        {
            contacts = new List<Contact>();
            contacts.Add(new Contact
            {
                Name = "Erick Kurniawan",
                Age = 30,
                Occupation = "Trainer",
                Country = "Indonesia"
            });
            contacts.Add(new Contact
            {
                Name = "Bambang Supeno",
                Age = 34,
                Occupation = "Developer",
                Country = "Indonesia"
            });
            contacts.Add(new Contact
            {
                Name = “Budi Sutejo",
                Age = 52,
                Occupation = "Project Manager",
                Country = "Indonesia"
            });
            contacts.Add(new Contact
            {
                Name = "Cody Cock",
                Age = 55,
                Occupation = "Frontend Developer",
                Country = "United State"
            });
            contacts.Add(new Contact
            {
                Name = "Tan Thie Tu",
                Age = 19,
                Occupation = "Junior Developer",
                Country = "Vietnam"
            });
        }
    }

4. Untuk menampilkan form modal buat halaman DetailPage.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="Bab4.DetailPage">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
      <StackLayout Orientation="Horizontal">
        <Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
        <Label Text="Age:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Age}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
      <Label Text="Occupation:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Occupation}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
        <Label Text="Country:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Country}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
     <Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

5. Kemudian tambahka juga kode pada halaman DetailPage.xaml.cs.

    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }
        async void OnDismissButtonClicked(object sender, EventArgs args)
        {
            await Navigation.PopModalAsync();
        }
    }

6. Tampilan contoh modal form dapat dilihat pada gambar berikut.

image

image