Creating Simple ASP.NET MVC Web API to be accessed by Windows Store App | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

Creating Simple ASP.NET MVC Web API to be accessed by Windows Store App

Oct 11, 2012 by     2 Comments    Posted under: I am Software Developer

Bagi pengguna Visual Studio 2012, maka akan menemukan ASP.NET MVC 4 pada template project web. Dan yang menarik adalah terdapat Web API sebagai salah satu fitur baru.

ASP.NET Web API adalah framework yang memudahkan membuat HTTP Service agar dapat dikonsumsi oleh aplikasi web pada web browser, aplikasi desktop ataupun aplikasi mobile. Sehingga Web API sangat berguna sebagai sumber data pada native app seperti Windows Phone atau Windows Store app. Format output dari Web API dapat berupa XML, JSON ataupun yang lainnya.

Pada artikel ini akan dijelaskan cara membuat HTTP Service yang sederhana untuk dikonsumsi oleh Windows Store App.

{Create Web API Project}

Berikut adalah langkah-langkah untuk membuat Web API Project.

Pada Visual Studio 2012 pilih New Project, untuk membuat New Project dapat dilakukan dengan cara memilih File > New > Project. Kemudian pada pane Template pilih Installed Templates > Visual C# > Web > ASP.NET MVC 4 Web Application kemudian klik OK.

image

Selanjutnya pilih Web API pada pane New ASP.NET MVC 4 Project template, kemudian klik tombol OK.

image

Selanjutnya akan dibuat Controller sederhana sebut saja HelloWorldContoller. Untuk membuat Controller ini maka klik kanan pada folder Controllers yang terdapat pada Solution Explorer, kemudian pilih Add > Controller.

image

Pada pane Add Controller, berikan nama HelloWorldController pada input Controller name. kemudian pilih Empty API Controller pada Scaffolding options > Template, kemudian klik tombol Add.

image

Selanjutnya tambahkan beberapa baris kode sehingga dapat dilihat isi file HelloWorldController.cs seperti berikut.

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Net.Http;using System.Web.Http;

namespace MvcApplication2.Controllers{    public class HelloWorldController : ApiController    {        // GET api/values        public string Get()        {            return "Hello World";        }

        // GET api/values/5        public string Get(string id)        {            return "Hello "+ id;        }    }}

{Calling the Web API from the Browser}

Untuk memanggil Web API yang telah dibuat maka pada menu di Visual Studio pilih Debug > Start Debugging atau akan lebih cepat dengan cara menekan tombol F5. Maka secara otomatis akan dilakukan proses build dan bila sukses maka web browser default akan dijalankan. Hasilnya dapat dilihat seperti gambar berikut ini.

image

Pada gambar di atas dapat dilihat alamat yang diakses adalah http://localhost:33011. Untuk web API yang telah dibuat maka dapat dilakukan dengan cara mengakses alamat berikut dari web browser http://localhost:33011/api/HelloWorld/.

image

Respon dari request diatas berupa file HelloWorld.json dengan isi sebagai berikut :

"Hello World"

Respon dari request tersebut akan berbeda jika menggunakan web browser Firefox. Pada Firefox akan didapati hasil seperti berikut.

image

Selanjutnya akan dicoba request dengan alamat berikut http://localhost:33011/api/HelloWorld/M Reza Faisal maka akan didapat hasil seperti berikut :

image

{Calling the Web API from Windows Store App}

Pada contoh di atas sudah diperlihatkan bagaimana cara memanggil Web API dari web browser dan sudah dilihat juga output dari Web API tersebut. Sekarang akan ditunjukkan bagaimana mengakses Web API dari Windows Store App.

Terlebih dahulu tambahkan project pada solution. Langkah-langkah yang harus dilakukan adalah klik kanan pada Solution kemudian pilih Add > New Project.

image

Pada pane Add New Project pilih Installed > Visual C# > Windows Store > Blank App (XAML).

image

Pada input Name, berikan nama aplikasi yang diinginkan, misalnya HelloWorldApp. Kemudian klik tombol OK.

Sekarang dapat dilihat terdapat project dengan nama HelloWorldApp pada Solution Explorer. Selanjutnya kita akan bekerja pada MainPage.xaml.

image

Pada MainPage.xaml akan ditambahkan sebuah TextBlock dan Button, sehingga dapat dilihat antarmuka seperti berikut.

image

Berikut adalah kode pada file MainPage.xaml.

<Page    x:Class="HelloWorldApp.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:HelloWorldApp"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <TextBlock x:Name="TextBlock_Result" HorizontalAlignment="Left" Margin="23,70,0,0" FontSize="23" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="282" Width="612"/>        <Button x:Name="Button_AccessWebAPI" Content="Access Web API" HorizontalAlignment="Left" FontSize="17" Margin="23,10,0,0" VerticalAlignment="Top" Click="Button_AccessWebAPI_Click" />

    </Grid></Page>

Pada Button diberikan aksi Click yang akan memanggil method Button_AccessWebAPI_Click yang berisi kode untuk mengakses Web API dan hasilnya akan ditampilkan pada TextBlock.

Dan berikut adalah kode dari file MainPage.xaml.cs.

 

   1: using System;

   2: using System.Collections.Generic;

   3: using System.IO;

   4: using System.Linq;

   5: using System.Net.Http;

   6: using System.Net.Http.Headers;

   7: using Windows.Foundation;

   8: using Windows.Foundation.Collections;

   9: using Windows.UI.Xaml;

  10: using Windows.UI.Xaml.Controls;

  11: using Windows.UI.Xaml.Controls.Primitives;

  12: using Windows.UI.Xaml.Data;

  13: using Windows.UI.Xaml.Input;

  14: using Windows.UI.Xaml.Media;

  15: using Windows.UI.Xaml.Navigation;

  16:  

  17: // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

  18:  

  19: namespace HelloWorldApp

  20: {

  21:     /// <summary>

  22:     /// An empty page that can be used on its own or navigated to within a Frame.

  23:     /// </summary>

  24:     public sealed partial class MainPage : Page

  25:     {

  26:         private HttpClient hc;

  27:  

  28:         public MainPage()

  29:         {

  30:             this.InitializeComponent();

  31:  

  32:             hc = new HttpClient();

  33:             hc.BaseAddress = new Uri("http://localhost:33011/");

  34:             hc.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/xml"));

  35:  

  36:         }

  37:  

  38:         /// <summary>

  39:         /// Invoked when this page is about to be displayed in a Frame.

  40:         /// </summary>

  41:         /// <param name="e">Event data that describes how this page was reached.  The Parameter

  42:         /// property is typically used to configure the page.</param>

  43:         protected override void OnNavigatedTo(NavigationEventArgs e)

  44:         {

  45:         }

  46:  

  47:         private async void Button_AccessWebAPI_Click(object sender, RoutedEventArgs e)

  48:         {

  49:             var response = await hc.GetAsync("api/HelloWorld/");

  50:             response.EnsureSuccessStatusCode(); // Throw on error code.

  51:  

  52:             var result = await response.Content.ReadAsStringAsync();

  53:  

  54:             TextBlock_Result.Text = result;

  55:         }

  56:     }

  57: }

Untuk mengunakan class HttpClient pada baris ke-26 maka perlu ditambahkan namespace System.Net.Http seperti yang dilihat pada baris ke-5.  Sedangkan baris ke-34 membutuhkan namespace System.Net.Http.Headers seperti pada baris ke-6.

{Setup Web API Output Format}

Kita dapat menentukan ingin mendapatkan format output XML atau JSON.  Jika ingin mendapatkan output XML maka cukup gunakan kode seperti pada baris ke-34.  Jika ingin mendapatkan output dengan format JSON maka baris ke-34 tersebut dapat kita ganti seperti berikut :

hc.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

Berikut adalah hasil jika format output yang digunakan adalah JSON :

image

Dan berikut adalah jika format output yang digunakan adalah XML :

image

Gampang bukan? Selamat mencoba :)

2 Comments + Add Comment

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: