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

Free eBook : Pengenalan Xamarin Forms dengan Azure Backend

image

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Pengenalan Xamarin Forms dengan Azure Backend. Buku ini ditujukan bagi anda yang ingin belajar untuk mengembangkan aplikasi Mobile Cross-Platform dengan target Android, IOS, dan UWP (Universal Windows Platform) menggunakan tools Visual Studio dan Xamarin Forms.

Ini adalah eBook pertama dari Seri Belajar Xamarin. eBook ini dibagi menjadi dari 6 BAB dan mempunyai ketebalan  80 halaman. Adapun materi pada eBook ini adalah sebagai berikut:

BAB 1 Pengenalan Xamarin Forms.

  • Apa itu Xamarin.
  • Cara Install Xamarin Forms.
  • Memulai Membuat Project Xamarin Form..
  • Menjalankan Aplikasi Android.
  • Menjalankan Aplikasi Xamarin Forms pada IOS. 10
  • Menjalankan Aplikasi Xamarin Forms pada Windows Phone/Windows 8.1/ UWP Win 10

BAB 2. UI (User Interface) pada Xamarin Forms.

  • Application Lifecycle pada Xamarin Forms.
  • Xamarin Forms UI (User Interface)
  • Layout.
  • Penggunaan StackLayout.
  • Contoh Penggunaan Absolute Layout.
  • Menggunakan Relative Layout.
  • Menggunakan GridLayout.
  • Menggunakan Layout dan View sederhana pada Xamarin Form..
  • Kalkulator Sederhana.
  • Cara Membuat APK pada Xamarin Form (versi baru).

BAB 3 Menampilkan Data Pada ListView..

  • Binding Data yang bertipe List Of String.
  • Menampilkan Data bertipe List Of String.
  • Menampilkan Data dari Objek Data Model
  • Menampilkan Gambar pada Cell
  • Kustomisasi Baris pada ListView..

BAB 4 Membangun Backend dengan ASP.NET Web API

  • Membuat Project ASP.NET Web API.
  • Membuat Database.
  • Membuat REST API
  • Melengkapi Program ASP.NET Web API
  • Cek REST Services dengan Fiddler.

BAB 5 – Mengakses REST Services dengan Xamarin Forms.

  • Menggunakan REST Services pada Xamarin Forms.
  • Mengakses REST Services Menggunakan Fiddler.
  • Mengakses REST Services dari Xamarin Forms.

BAB 6 Bekerja dengan Azure Mobile Apps.

  • Menambahkan Layanan Azure Mobile App.
  • Membuat Xamarin Forms Project

 

Anda dapat mengunduh eBook Pengenalan Xamarin Forms dengan Azure Backend pada tautan berikut ini. 

 

 

 

Email penulis: erick@actual-training.com
IT Training & Consulting: http://actual-training.com

Navigasi pada Xamarin Forms

Pada tutorial berikut saya akan menjelaskan konsep navigasi pada Xamarin Forms. Navigasi digunakan untuk memudahkan pengguna berpindah halaman dengan mudah. Fitur untuk navigasi meliputi menu, tap icon, tombol, tabs, dan list items.

Bentuk Navigasi pada Xamarin Forms

Ada beberapa pattern yang sering digunakan pada navigasi diantaranya:

  • Hierarchical
  • Modal
  • Drill-down
  • Navigation drawer
  • Tabs
  • Springboard
  • Carousel

Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menambahkan Navigation Page, teknik ini digunakan untuk memanggil halaman selanjutnya dari halaman pertama.

1. Tambahkan page xaml baru dengan nama NavigationPage1.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Navigasi Hirarki" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Bab4.NavigationPage1">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Home Page" FontSize="40"></Label>
      <Button Text="Go To Second Page" x:Name="btnSecond"></Button>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Tambahkan kode berikut pada App.xaml.cs

        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new NavigationPage1());
        }

3. Tambahkan kode pada NavigationPage1.xaml.cs. Method Navigation.PushAsync() digunakan untuk memanggil halaman selanjutnya.

    public partial class NavigationPage1 : ContentPage
    {
        public NavigationPage1()
        {
            InitializeComponent();
            btnSecond.Clicked += BtnSecond_Clicked;
        }

        private async void BtnSecond_Clicked(object sender, EventArgs e)
        {
            
            await Navigation.PushAsync(new NavigationPage2());
        }
    }

4. Tambahkan halaman NavigationPage2.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.NavigationPage2">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Second Page" FontSize="40"></Label>
      <Button x:Name="btnBack" Text="Back"/>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

5. Kemudian tambahkan kode pada NavigationPage2.xaml.cs. Method Navigation.PopAsync() digunakan untuk kembali ke halaman sebelumnya.

    public partial class NavigationPage2 : ContentPage
    {
        public NavigationPage2()
        {
            InitializeComponent();

            
            btnBack.Clicked += async (sender, e) =>
            {
                await Navigation.PopAsync(true);
            };
        }
    }

6. Tampilan dibawah menunjukan bagaimana cara navigasi antar form, dari form Home Page ke form Second Page.

image

image

Xamarin Forms: Menggunakan Context Action pada ListView

Pada artikel kali ini saya akan menjelaskan bagaimana menggunakan Context Action yang ada di dalam kontrol ListView.

Context Action adalah tombol berupa bar yang akan muncul ketika pengguna melakukan left-swiped pada iOS dan long-pressed pada Android.

1. Tambahkan halaman xaml baru dengan nama ListViewContextAction.xaml, kemudian tambahkan 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="Bab3.ListViewContextAction">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
      <OnPlatform.iOS>10,20,10,5</OnPlatform.iOS>
      <OnPlatform.Android>10,5,10,5</OnPlatform.Android>
    </OnPlatform>
  </ContentPage.Padding>
  
  <ListView ItemsSource="{Binding ListItems}" RowHeight="100" BackgroundColor="Black" HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ViewCell.ContextActions>
            <MenuItem Text="More" Command="{Binding MoreCommand}" />
            <MenuItem Text="Delete" Command="{Binding DeleteCommand}" IsDestructive="True" />
          </ViewCell.ContextActions>
          <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="5,10,5,15">
            <StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
              <Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold" TextColor="White" Text="{Binding Title}"/>
              <Label HorizontalOptions="Start" FontSize="12" FontAttributes="Bold" TextColor="White" Text="{Binding Description}"/>
            </StackLayout>
            <Label HorizontalOptions="End" FontSize="25" TextColor="Aqua" Text="{Binding Price}"/>
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

2. Buat class ListItem yang diturunkan dari BindableObject

        public class ListItem : BindableObject
        {
            public string Source { get; set; }
            public string Title { get; set; }
            public string Description { get; set; }
            public string Price { get; set; }

            private Command moreCommand;

            public Command MoreCommand
            {
                get { return moreCommand; }
                set { moreCommand = value; OnPropertyChanged("MoreCommand"); }
            }

            private Command deleteCommand;
            public Command DeleteCommand
            {
                get { return deleteCommand; }
                set { deleteCommand = value; OnPropertyChanged("DeleteCommand"); }
            }

            public ListItem()
            {
                MoreCommand = new Command(MoreRequested);
                deleteCommand = new Command(DeleteRequested);
            }

            void MoreRequested()
            {
                MessagingCenter.Send<ListItem>(this, "MoreRequested");
            }

            void DeleteRequested()
            {
                MessagingCenter.Send<ListItem>(this, "DeleteRequested");
            }
        }

3. Buat class ViewModel untuk membinding data pada kontrol ListView.

    public class ListViewContextActionViewModel : BindableObject
    {
        readonly Func<string, string, string, Task> displayAlertAction;

        private List<ListItem> listItems;

        public List<ListItem> ListItems
        {
            get { return listItems; }
            set { listItems = value; OnPropertyChanged("ListItems"); }
        }

        public ListViewContextActionViewModel(Func<string, string, string, Task> displayAlertAction)
        {
            this.displayAlertAction = displayAlertAction;
            ListItems = new List<ListItem> {
                new ListItem {Title = "First", Description="1st item", Price="$100.00"},
                new ListItem {Title = "Second", Description="2nd item", Price="$200.00"},
                new ListItem {Title = "Third", Description="3rd item", Price="$300.00"}
            };

            MessagingCenter.Subscribe<ListItem>(this, "MoreRequested", MoreRequested);
            MessagingCenter.Subscribe<ListItem>(this, "DeleteRequested", DeleteRequested);
        }

        void MoreRequested(ListItem listItem)
        {
            displayAlertAction.Invoke("More", listItem.Title + " more was clicked", "OK");
        }

        void DeleteRequested(ListItem listItem)
        {
            displayAlertAction.Invoke("Delete", listItem.Title + " delete was clicked", "OK");
   
        }
}

3. Terakhir tambahkan kode berikut pada file ListViewContextAction.xaml.cs

    public partial class ListViewContextAction : ContentPage
    {
        public ListViewContextAction()
        {
            InitializeComponent();

            BindingContext = new ListViewContextActionViewModel(DisplayAlert);
        }
    }

4. Jalankan program, maka anda dapat melihat hasilnya sebagai berikut:

image