Pengaksesan RESTful Services dengan Xamarin Forms (Part 2)

Artikel ini adalah lanjutan dari artikel sebelumnya yang dapat diakses pada alamat berikut.

1. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk itu pada project portable buat folder baru dengan nama Views.

2. Pada folder Views tambahkan halaman xaml dengan nama TodoListPage.xaml. Halaman ini digunakan untuk menampilkan informasi todolist pada kontrol ListView.

<?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="TodoREST.TodoListPage" Title="Todo">
	<ContentPage.ToolbarItems>
		<ToolbarItem Text="+" Clicked="OnAddItemClicked">
			<ToolbarItem.Icon>
			<OnPlatform x:TypeArguments="FileImageSource" Android="plus.png" />
			</ToolbarItem.Icon>
		</ToolbarItem>
	</ContentPage.ToolbarItems>
	<ContentPage.Content>
		<ListView x:Name="listView" ItemSelected="OnItemSelected">
			<ListView.ItemTemplate>
				<DataTemplate>
					<ViewCell>
						<StackLayout Padding="20,0,0,0" HorizontalOptions="StartAndExpand" Orientation="Horizontal">
				<Label Text="{Binding Name}" VerticalTextAlignment="Center" />
				<Image Source="check.png" IsVisible="{Binding Done}" />
						</StackLayout>
					</ViewCell>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>
	</ContentPage.Content>
</ContentPage>

3. Tambahkan gambar plus.png dan icon.png pada project Droid (folder Resources\drawable). Dengan klik kanan pada drawable > Add > Existing Item… > kemudian cari gambar icon.

4. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.

using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoListPage : ContentPage
    {
        bool alertShown = false;

        public TodoListPage()
        {
            InitializeComponent();
        }

        protected async override void OnAppearing()
        {
            base.OnAppearing();
            listView.ItemsSource = await App.TodoManager.GetTasksAsync();
        }

        void OnAddItemClicked(object sender, EventArgs e)
        {
            var todoItem = new TodoItem()
            {
                ID = Guid.NewGuid().ToString()
            };
            var todoPage = new TodoItemPage(true);
            todoPage.BindingContext = todoItem;
            Navigation.PushAsync(todoPage);
        }

        void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var todoItem = e.SelectedItem as TodoItem;
            var todoPage = new TodoItemPage();
            todoPage.BindingContext = todoItem;
            Navigation.PushAsync(todoPage);
        }
    }
} 

5. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol ListView, dan menambahkan event ketika list tersebut dipilih.

6. Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan untuk menampilkan detail todo, mengedit, dan mendelete data.

<?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="TodoREST.TodoItemPage" 
			 Title="Todo">
	<ContentPage.Content>
		<StackLayout VerticalOptions="StartAndExpand">
			<Label Text="Name" />
			<Entry x:Name="nameEntry" Text="{Binding Path=Name}" Placeholder="task name" />
			<Label Text="Notes" />
			<Entry x:Name="notesEntry" Text="{Binding Path=Notes}" />
			<Label Text="Done" />
			<Switch x:Name="doneSwitch" IsToggled="{Binding Path=Done}" />
			<Button Text="Save" Clicked="OnSaveActivated" />
			<Button Text="Delete" Clicked="OnDeleteActivated" />
			<Button Text="Cancel" Clicked="OnCancelActivated" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

7. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.

using System;
using TodoREST.Models;
using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoItemPage : ContentPage
    {
        bool isNewItem;

        public TodoItemPage(bool isNew = false)
        {
            InitializeComponent();
            isNewItem = isNew;
        }

        async void OnSaveActivated(object sender, EventArgs e)
        {
            var todoItem = (TodoItem)BindingContext;
            await App.TodoManager.SaveTaskAsync(todoItem, isNewItem);
            await Navigation.PopAsync();
        }

        async void OnDeleteActivated(object sender, EventArgs e)
        {
            var todoItem = (TodoItem)BindingContext;
            await App.TodoManager.DeleteTaskAsync(todoItem);
            await Navigation.PopAsync();
        }

        void OnCancelActivated(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }
    }
}

8. Langkat terakhir tambahkan kode berikut pada file App.xaml.cs pada project portable.

using TodoREST.Data;
using Xamarin.Forms;
    
public class App : Application
    {
        public static TodoItemManager TodoManager { get; private set; }

        public static ITextToSpeech Speech { get; set; }

        public App()
        {
            TodoManager = new TodoItemManager(new RestService());
            MainPage = new NavigationPage(new TodoListPage());
        }
    }

9. Tekan tombol F5 untuk menjalankan aplikasi pada emulator Android.

image

Advertisements
Posted in Cross Platform Mobile Development, Xamarin, Xamarin Forms | Tagged , , | Leave a comment

Xamarin Master Class–Bekraf Dev Day Surabaya

Pada tanggal 3 Sept 2017 telah dilangsungkan acara Bekraf Developer Day 2017 yang berlokasi di Hotel Shangri-La Surabaya.

Acara ini diselenggarakan atas kerjasama Badan Ekonomi Kreatif (BEKRAF) dan Dicoding dengan dukungan Asosiasi Game Indonesia, Bank DBS Indonesia, BEBRAS Indonesia, Codepolitan, Dicoding Elite, Ericsson, Google, IBM Indonesia, Intel Innovator, Komunitas ID-Android, Microsoft Indonesia, Samsung Developer Warrior, Samsung Indonesia, dan perusahaan-perusahaan teknologi di Indonesia.

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.

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.

16

Posted in .NET Tech, Android, iOS, Xamarin, Xamarin Forms | Tagged , , | Leave a comment

Pengaksesan RESTful Services dengan Xamarin Forms (Part 1)

Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET Web API yang sudah dipasang pada layanan komputasi awan Microsoft Azure.

Adapun alamat dari REST Service yang digunakan: http://actservices.azurewebsites.net/api/TodoItem/

Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan tool Fiddler. Anda dapat mengunduh tools fiddler secara gratis pada tautan berikut ini https://www.telerik.com/download/fiddler.

1. Langkah pertama yang akan dilakukan adalah melakukan percobaan untuk mengakses contoh backend services yang sudah tersedia.

2. Buka tools fiddler, kemudian arahkan ke tab Composer. Pilih method GET untuk mengambil dari dari REST Services, kemudian tambahkan alamat berikut http://actservices.azurewebsites.net/api/TodoItem/. Kemudian tekan tombol Execute.

image

3. Pada jendela bagian kiri akan ditampilkan hasil-nya. Status yang tertera adalah 200 OK yang menunjukan bahwa request ke server berhasil.

4. Data JSON yang dikembalikan dapat dilihat pada gambar dibawah ini.

image

Mengakses REST Services dari Xamarin Forms.

1. Buat project Xamarin Forms baru dengan nama TodoREST.

2. Klik kanan pada solution kemudian pilih Manage Nuget Package for Solution. Kemudian tambahkan library Microsoft.Bcl.Build, Microsoft.Net.Http, dan Newtonsoft.Json.

image

3. Pada project Portable, tambahkan folder dengan nama Models. Kemudian tambahkan class dengan nama TodoItem.cs. Class ini akan digunakan untuk membuat objek yang dapat menampung data dari REST Services. Tambahkan kode c# berikut:

image

4. Pada project portable, tambahkan juga class dengan nama Constants.cs untuk menyimpan alamat url dari REST Services.

image

5. Pada project portable, tambahkan foder dengan nama Data. Kemudian pada folder tersebut tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-method yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete data.

image

6. Pada folder Data, tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk mengakses REST Services menggunakan class HttpClient dan menampung datanya kedalam objek koleksi yang sudah disediakan.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using Newtonsoft.Json;
using TodoREST.Data;

namespace TodoREST.Data
{
    public class RestService : IRestService
    {
        HttpClient client;

        public List<TodoItem> Items { get; private set; }
        public RestService()
        {
            client = new HttpClient();
            client.MaxResponseContentBufferSize = 256000;
        }

        public async Task<List<TodoItem>> RefreshDataAsync()
        {
            Items = new List<TodoItem>();
            var uri = new Uri(string.Format(Constants.RestUrl, string.Empty));

            try
            {
                var response = await client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();
                    Items = JsonConvert.DeserializeObject<List<TodoItem>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(@"Kesalahan {0}", ex.Message);
            }

            return Items;
        }

        public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem = false)
        {
            var uriPost = new Uri(string.Format(Constants.RestUrl, string.Empty));
            var uriPut = new Uri(string.Format(Constants.RestUrl, item.ID));
            try
            {
                var json = JsonConvert.SerializeObject(item);
                var content = new StringContent(json, Encoding.UTF8, "application/json");

                HttpResponseMessage response = null;
                if (isNewItem)
                {
                    response = await client.PostAsync(uriPost, content);
                }
                else
                {
                    response = await client.PutAsync(uriPut, content);
                }

                if (response.IsSuccessStatusCode)
                {
                    Debug.WriteLine(@"TodoItem berhasil disimpan.");
                }

            }
            catch (Exception ex)
            {
                Debug.WriteLine(@"Kesalahan {0}", ex.Message);
            }
        }

        public async Task DeleteTodoItemAsync(string id)
        {
            var uri = new Uri(string.Format(Constants.RestUrl, id));

            try
            {
                var response = await client.DeleteAsync(uri);

                if (response.IsSuccessStatusCode)
                {
                    Debug.WriteLine(@"TodoItem berhasil didelete.");
                }

            }
            catch (Exception ex)
            {
                Debug.WriteLine(@"Kesalahan {0}", ex.Message);
            }
        }
    }
}

7. Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk menampilkan, menambah, mengedit, dan mendelete data.

8. Pada folder Data, tambahkan class dengan nama TodoItemManager.cs. Class ini berfungsi untuk memanggil method pada class RestServices.cs.

using System.Collections.Generic;
using System.Threading.Tasks;
using TodoREST.Models;

namespace TodoREST.Data
{
    public class TodoItemManager
    {
        IRestService restService;

        public TodoItemManager(IRestService service)
        {
            restService = service;
        }

        public Task<List<TodoItem>> GetTasksAsync()
        {
            return restService.RefreshDataAsync();
        }

        public Task SaveTaskAsync(TodoItem item, bool isNewItem = false)
        {
            return restService.SaveTodoItemAsync(item, isNewItem);
        }

        public Task DeleteTaskAsync(TodoItem item)
        {
            return restService.DeleteTodoItemAsync(item.ID);
        }
    }
}

Pada tutorial selanjutnya kita akan mencoba untuk menggunakan class TodoItemManager dari Xamarin Forms.

Posted in Android, Cross Platform Mobile Development, Xamarin, Xamarin Forms | Tagged , , | Leave a comment

Microsoft Youthspark: Cross Platform Mobile Apps with Xamarin

Microsoft Youthspark adalah program yang digagas oleh Microsoft sejak tahun 2012. Dengan program ini Microsoft berusaha untuk menarik generasi muda agar tertarik pada dunia pemrograman melalui pengajaran dasar-dasar pemrograman. Kegiatan tersebut berupa pelatihan-pelatihan yang bekerja sama dengan unit Microsoft yang ada di kampus seperti Microsoft Innovation Center.

Microsoft Innovation Center UGM yang merupakan salah satu unit pengembangan dan inovasi dari Microsoft yang ada di kampus. Microsoft bekerja sama dengan beberapa kampus besar di indonesia seperti UI, UGM, dan ITB. Melalui Microsoft Innovation Center Indonesia, Microsoft mengadakan program Microsoft Youthspark dengan menggandeng beberapa sekolah di level SMP dan SMA diantaranya SMPN 5 Depok, SMPN 2 Banguntapan, SMKN 3 Yogyakarta.

Kegiatan yang dilakukan pada program Microsoft Youthspark diantaranya adalah workshop dan lomba karya siswa. Salah satu workshop yang diadakan adalah workshop untuk pembuatan aplikasi mobile cross platform menggunakan platform dari Microsoft yaitu Xamarin. Workshop tersebut dilangsungkan pada tanggal 4 sampai dengan 6 Agustus 2017 di Fakultas Teknik Elektro UGM.

Pelaksanaan workshop Microsoft Youthspark diselenggarakan selama tiga hari yaitu tanggal 4, 5, dan 6 Agustus 2017. Workshop ini dilangsungkan di Lab Komputer Jurusan Teknik Elektro UGM. Peserta workshop adalah pelajar SMP, SMA, dan SMK di wilayah DIY.

Adapun materi yang disampaikan pada Workshop tersebut adalah sebagai berikut:

  • Introduction to Xamarin Forms
  • Pages Layout and Navigation
  • Basic Controls and Plugins
  • Styles and Theming
  • Binding Command and Converters
  • Dependency Services

pic

Posted in Events, Xamarin, Xamarin Forms | Tagged , , | Leave a comment

Bekraf Developer Day 2017–Palembang, Sumsel

Pada tanggal 9 – 10 July 2017 telah dilaksanakan acara Bekraf Developer Day 2017 di Hotel Novotel Palembang, Sumatera Selatan.  

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

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Teknologi 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/706

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:

WhatsApp Image 2017-07-13 at 14.08.47(1)WhatsApp Image 2017-07-13 at 14.08.47WhatsApp Image 2017-07-13 at 14.09.52WhatsApp Image 2017-07-13 at 14.09.54

Posted in Android, Bekraf, Bekraf Developer Day, Cloud & Mobile, Events, iOS, Xamarin, Xamarin Forms | Tagged , , , , | Leave a comment

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

Posted in Android, Bekraf, Bekraf Developer Day, iOS, Xamarin, Xamarin Forms | Tagged , , , , , | Leave a comment

Global Azure Bootcamp 2017–Yogyakarta

Pada tanggal 22 April 2017, telah diselenggarakan acara Global Azure Bootcamp 2017 – Yogyakarta, yang bertempat di Jogja Digital Valley (JDV).

Acara ini mempunyai tema Cloud for Yogyakarta. Pada acara ini juga dibahas bagaimana cara pengembangan aplikasi mobile menggunakan Xamarin Platform dengan Azure Backend.

Adapun pembicara pada acara ini adalah:

  1. Ridi Ferdiana – Microsoft MVP Visual Studio
  2. Erick Kurniawan – Microsoft MVP Windows Azure

WP_20170422_08_50_22_Pro

WP_20170422_08_59_46_Pro

WP_20170422_09_09_32_Pro

Eventbrite link: https://www.eventbrite.com/e/azure-as-digital-transformation-platform-to-preserve-tourism-and-culture-tickets-33298949053

Posted in Azure App Services, Azure Mobile Services, Cloud & Mobile, Cross Platform Mobile Development, Xamarin Forms | Tagged , , , , | Leave a comment