Jeffrey Hermanto Halimsetiawan's Blog

Beberapa waktu yang lalu salah seorang teman saya meluncurkan sebuah API yang masih dalam tahap percobaan dari website miliknya bernama ongkir.info. Karena tertarik untuk mencobanya, saya mempelajari cara penggunaan API tersebut dan ternyata API tersebut menggunakan metode HTTP POST. Percobaan untuk memanfaatkan API tersebut pun mulai dilakukan. Kali ini, sebuah aplikasi sederhana yang menampilkan hasil query kota dengan data binding pada Windows Phone 7 akan dibuat.

Langkah-langkah yang dilakukan antara lain:

1. Pilih New – Project.
2. Pilih Silverlight for Windows Phone pada Installed Templates, kemudian pilih Windows Phone Application.
3. Tambahkan sebuah ListBox yang diberi nama lbxQuery pada ContentPanel.
4. Tambahkan sebuah TextBox sebagai input kriteria pencarian dan Button pada ContentPanel.
5. Tambahkan event handler OnClick pada btnSearch ketika event Click dibangkitkan.
6. Pilih Add Reference untuk menambahkan System.Xml.Linq.dll yang berguna untuk melakukan parsing XML ke dalam project.
7. Lakukan pengiriman HTTP POST dengan memanfaatkan method UploadStringAsync dari kelas WebClient pada event handler OnClick yang telah ditambahkan.

     1: private void OnClick(object sender, RoutedEventArgs e)
     2: {
     3:     if (txtSearch.Text.Length == 0)
     4:         return;
     5: 
     6:     WebClient client = new WebClient();
     7: 
     8:     //URL dari API
     9:     string url = "http://api.ongkir.info/city/list";
    10:     //POST Parameter
    11:     StringBuilder parameter = new StringBuilder();
    12:     parameter.AppendFormat("{0}={1}&", "query", HttpUtility.UrlEncode(txtSearch.Text));
    13:     parameter.AppendFormat("{0}={1}&", "type", HttpUtility.UrlEncode("origin"));
    14:     parameter.AppendFormat("{0}={1}&", "courier", HttpUtility.UrlEncode("jne"));
    15:     //API Key sengaja disamarkan
    16:     parameter.AppendFormat("{0}={1}", "API-Key", HttpUtility.UrlEncode("xxxxxxx"));
    17: 
    18:     //Set header
    19:     client.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
    20:     client.Headers[HttpRequestHeader.ContentLength] = parameter.Length.ToString();
    21: 
    22:     //menangani respon yang diberikan oleh server ketika menjalankan method UploadStringAsync()
    23:     client.UploadStringCompleted += new UploadStringCompletedEventHandler(OnUploadStringCompleted);
    24:     //melakukan UploadString dengan method POST secara asynchronous
    25:     client.UploadStringAsync(new Uri(url), "POST", parameter.ToString());
    26: }

8. Tambahkan event handler OnUploadStringCompleted yang bertugas melakukan parsing XML yang diterima ketika respon diperoleh karena proses pengunggahan dilakukan secara asynchronous.

     1: private void OnUploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
     2: {
     3:     if (e.Error != null)
     4:         return;
     5:     //mengambil respons yang diperoleh
     6:     string response = e.Result;
     7:     //melakukan parsing XML dari string
     8:     XElement xmlFeed = XElement.Parse(response);
     9: 
    10:     //memperoleh kode status
    11:     var status = xmlFeed.Descendants("status").Elements<XElement>("code");
    12: 
    13:     if (Int32.Parse(status.First<XElement>().Value) == 0)
    14:     {
    15:         //memperoleh semua item kota yang ada
    16:         var cities = xmlFeed.Descendants("cities").Elements<XElement>("item");
    17:         var citiesString = from ItemFeed in cities
    18:                             select ItemFeed.Value;
    19:         //melakukan data binding ke listbox
    20:         lbxQuery.ItemsSource = citiesString;
    21:     }
    22:     else
    23:     {
    24:         MessageBox.Show("Tidak ditemukan kota yang diawali dengan band.");
    25:     }
    26: }

9. Jalankan aplikasi sederhana ini.

Respon yang diterima dalam bentuk XML dari server ketika melakukan kriteria pencarian “ban” adalah sebagai berikut:

  1: <xml>
  2:     <status>
  3:         <code>0</code>
  4:         <description>OK</description>
  5:     </status>
  6:     <cities>
  7:         <item>BANDAACEH</item>
  8:         <item>BANDARLAMPUNG</item>
  9:         <item>BANDUNG</item>
 10:         <item>BANJARMASIN</item>
 11:     </cities>
 12: </xml>
 13: 

Berikut adalah hasil dari aplikasi yang berjalan:

Selamat mencoba.