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.

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