{"id":177,"date":"2012-10-11T15:44:22","date_gmt":"2012-10-11T15:44:22","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=177"},"modified":"2012-11-04T13:03:54","modified_gmt":"2012-11-04T13:03:54","slug":"creating-simple-asp-net-mvc-web-api-to-be-accessed-by-windows-store-app","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=177","title":{"rendered":"Creating Simple ASP.NET MVC Web API to be accessed by Windows Store App"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

Pada artikel ini akan dijelaskan cara membuat HTTP Service yang sederhana untuk dikonsumsi oleh Windows Store App.<\/p>\n

{Create Web API Project<\/strong><\/em>}<\/p>\n

Berikut adalah langkah-langkah untuk membuat Web API Project.<\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

Selanjutnya pilih Web API pada pane New ASP.NET MVC 4 Project template, kemudian klik tombol OK.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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

\"image\"<\/a><\/p>\n

Selanjutnya tambahkan beberapa baris kode sehingga dapat dilihat isi file HelloWorldController.cs seperti berikut.<\/p>\n

\n
using<\/span> System;using<\/span> System.Collections.Generic;using<\/span> System.Linq;using<\/span> System.Net;using<\/span> System.Net.Http;using<\/span> System.Web.Http;\r\n\r\nnamespace<\/span> MvcApplication2.Controllers{    public<\/span> class<\/span> HelloWorldController : ApiController    {        \/\/ GET api\/values<\/span>        public<\/span> string<\/span> Get()        {            return<\/span> "Hello World"<\/span>;        }\r\n\r\n        \/\/ GET api\/values\/5<\/span>        public<\/span> string<\/span> Get(string<\/span> id)        {            return<\/span> "Hello "<\/span>+ id;        }    }}<\/pre>\n<\/div>\n
{Calling the Web API from the Browser<\/em><\/strong>}<\/p>\n
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.<\/p>\n
\"image\"<\/a><\/p>\n
Pada gambar di atas dapat dilihat alamat yang diakses adalah http:\/\/localhost:33011<\/a>. Untuk web API yang telah dibuat maka dapat dilakukan dengan cara mengakses alamat berikut dari web browser http:\/\/localhost:33011\/api\/HelloWorld\/<\/a>.<\/p>\n
\"image\"<\/a><\/p>\n
Respon dari request diatas berupa file HelloWorld.json dengan isi sebagai berikut :<\/p>\n
\n
"Hello World"<\/span><\/pre>\n<\/div>\n
Respon dari request tersebut akan berbeda jika menggunakan web browser Firefox. Pada Firefox akan didapati hasil seperti berikut.<\/p>\n
\"image\"<\/a><\/p>\n
Selanjutnya akan dicoba request dengan alamat berikut http:\/\/localhost:33011\/api\/HelloWorld\/M Reza Faisal maka akan didapat hasil seperti berikut :<\/p>\n
\"image\"<\/a><\/p>\n
{Calling the Web API from Windows Store App<\/em><\/strong>}<\/p>\n
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.<\/p>\n
Terlebih dahulu tambahkan project pada solution. Langkah-langkah yang harus dilakukan adalah klik kanan pada Solution kemudian pilih Add > New Project.<\/p>\n
\"image\"<\/a><\/p>\n
Pada pane Add New Project pilih Installed > Visual C# > Windows Store > Blank App (XAML).<\/p>\n
\"image\"<\/a><\/p>\n
Pada input Name, berikan nama aplikasi yang diinginkan, misalnya HelloWorldApp. Kemudian klik tombol OK.<\/p>\n
Sekarang dapat dilihat terdapat project dengan nama HelloWorldApp pada Solution Explorer. Selanjutnya kita akan bekerja pada MainPage.xaml.<\/p>\n
\"image\"<\/a><\/p>\n
Pada MainPage.xaml akan ditambahkan sebuah TextBlock dan Button, sehingga dapat dilihat antarmuka seperti berikut.<\/p>\n
\"image\"<\/a><\/p>\n
Berikut adalah kode pada file MainPage.xaml.<\/p>\n
\n
<<\/span>Page<\/span>    x:Class<\/span>="HelloWorldApp.MainPage"<\/span>    xmlns<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation"<\/span>    xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml"<\/span>    xmlns:local<\/span>="using:HelloWorldApp"<\/span>    xmlns:d<\/span>="http:\/\/schemas.microsoft.com\/expression\/blend\/2008"<\/span>    xmlns:mc<\/span>="http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006"<\/span>    mc:Ignorable<\/span>="d"<\/span>><\/span>\r\n\r\n    <<\/span>Grid<\/span> Background<\/span>="{StaticResource ApplicationPageBackgroundThemeBrush}"<\/span>><\/span>        <<\/span>TextBlock<\/span> x:Name<\/span>="TextBlock_Result"<\/span> HorizontalAlignment<\/span>="Left"<\/span> Margin<\/span>="23,70,0,0"<\/span> FontSize<\/span>="23"<\/span> TextWrapping<\/span>="Wrap"<\/span> Text<\/span>="TextBlock"<\/span> VerticalAlignment<\/span>="Top"<\/span> Height<\/span>="282"<\/span> Width<\/span>="612"<\/span>\/><\/span>        <<\/span>Button<\/span> x:Name<\/span>="Button_AccessWebAPI"<\/span> Content<\/span>="Access Web API"<\/span> HorizontalAlignment<\/span>="Left"<\/span> FontSize<\/span>="17"<\/span> Margin<\/span>="23,10,0,0"<\/span> VerticalAlignment<\/span>="Top"<\/span> Click<\/span>="Button_AccessWebAPI_Click"<\/span> \/><\/span>\r\n\r\n    <\/<\/span>Grid<\/span>><\/span><\/<\/span>Page<\/span>><\/span><\/pre>\n<\/div>\n
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.<\/p>\n
Dan berikut adalah kode dari file MainPage.xaml.cs.<\/p>\n
 <\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.IO;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Net.Http;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Net.Http.Headers;<\/pre>\n
<\/p>\n
   7:<\/span> using<\/span> Windows.Foundation;<\/pre>\n
<\/p>\n
   8:<\/span> using<\/span> Windows.Foundation.Collections;<\/pre>\n
<\/p>\n
   9:<\/span> using<\/span> Windows.UI.Xaml;<\/pre>\n
<\/p>\n
  10:<\/span> using<\/span> Windows.UI.Xaml.Controls;<\/pre>\n
<\/p>\n
  11:<\/span> using<\/span> Windows.UI.Xaml.Controls.Primitives;<\/pre>\n
<\/p>\n
  12:<\/span> using<\/span> Windows.UI.Xaml.Data;<\/pre>\n
<\/p>\n
  13:<\/span> using<\/span> Windows.UI.Xaml.Input;<\/pre>\n
<\/p>\n
  14:<\/span> using<\/span> Windows.UI.Xaml.Media;<\/pre>\n
<\/p>\n
  15:<\/span> using<\/span> Windows.UI.Xaml.Navigation;<\/pre>\n
<\/p>\n
  16:<\/span>  <\/pre>\n
<\/p>\n
  17:<\/span> \/\/ The Blank Page item template is documented at http:\/\/go.microsoft.com\/fwlink\/?LinkId=234238<\/span><\/pre>\n
<\/p>\n
  18:<\/span>  <\/pre>\n
<\/p>\n
  19:<\/span> namespace<\/span> HelloWorldApp<\/pre>\n
<\/p>\n
  20:<\/span> {<\/pre>\n
<\/p>\n
  21:<\/span>     \/\/\/ <summary><\/span><\/pre>\n
<\/p>\n
  22:<\/span>     \/\/\/ An empty page that can be used on its own or navigated to within a Frame.<\/span><\/pre>\n
<\/p>\n
  23:<\/span>     \/\/\/ <\/summary><\/span><\/pre>\n
<\/p>\n
  24:<\/span>     public<\/span> sealed<\/span> partial<\/span> class<\/span> MainPage : Page<\/pre>\n
<\/p>\n
  25:<\/span>     {<\/pre>\n
<\/p>\n
  26:<\/span>         private<\/span> HttpClient hc;<\/pre>\n
<\/p>\n
  27:<\/span>  <\/pre>\n
<\/p>\n
  28:<\/span>         public<\/span> MainPage()<\/pre>\n
<\/p>\n
  29:<\/span>         {<\/pre>\n
<\/p>\n
  30:<\/span>             this<\/span>.InitializeComponent();<\/pre>\n
<\/p>\n
  31:<\/span>  <\/pre>\n
<\/p>\n
  32:<\/span>             hc = new<\/span> HttpClient();<\/pre>\n
<\/p>\n
  33:<\/span>             hc.BaseAddress = new<\/span> Uri("http:\/\/localhost:33011\/"<\/span>);<\/pre>\n
<\/p>\n
  34:<\/span>             hc.DefaultRequestHeaders.Accept.Add(new<\/span> MediaTypeWithQualityHeaderValue("application\/xml"<\/span>));<\/pre>\n
<\/p>\n
  35:<\/span>  <\/pre>\n
<\/p>\n
  36:<\/span>         }<\/pre>\n
<\/p>\n
  37:<\/span>  <\/pre>\n
<\/p>\n
  38:<\/span>         \/\/\/ <summary><\/span><\/pre>\n
<\/p>\n
  39:<\/span>         \/\/\/ Invoked when this page is about to be displayed in a Frame.<\/span><\/pre>\n
<\/p>\n
  40:<\/span>         \/\/\/ <\/summary><\/span><\/pre>\n
<\/p>\n
  41:<\/span>         \/\/\/ <param name="e">Event data that describes how this page was reached.  The Parameter<\/span><\/pre>\n
<\/p>\n
  42:<\/span>         \/\/\/ property is typically used to configure the page.<\/param><\/span><\/pre>\n
<\/p>\n
  43:<\/span>         protected<\/span> override<\/span> void<\/span> OnNavigatedTo(NavigationEventArgs e)<\/pre>\n
<\/p>\n
  44:<\/span>         {<\/pre>\n
<\/p>\n
  45:<\/span>         }<\/pre>\n
<\/p>\n
  46:<\/span>  <\/pre>\n
<\/p>\n
  47:<\/span>         private<\/span> async void<\/span> Button_AccessWebAPI_Click(object<\/span> sender, RoutedEventArgs e)<\/pre>\n
<\/p>\n
  48:<\/span>         {<\/pre>\n
<\/p>\n
  49:<\/span>             var response = await hc.GetAsync("api\/HelloWorld\/"<\/span>);<\/pre>\n
<\/p>\n
  50:<\/span>             response.EnsureSuccessStatusCode(); \/\/ Throw on error code.<\/span><\/pre>\n
<\/p>\n
  51:<\/span>  <\/pre>\n
<\/p>\n
  52:<\/span>             var result = await response.Content.ReadAsStringAsync();<\/pre>\n
<\/p>\n
  53:<\/span>  <\/pre>\n
<\/p>\n
  54:<\/span>             TextBlock_Result.Text = result;<\/pre>\n
<\/p>\n
  55:<\/span>         }<\/pre>\n
<\/p>\n
  56:<\/span>     }<\/pre>\n
<\/p>\n
  57:<\/span> }<\/pre>\n
<\/div>\n<\/div>\n
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.<\/p>\n
{Setup Web API Output Format<\/em><\/strong>}<\/p>\n
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 :<\/p>\n
\n
hc.DefaultRequestHeaders.Accept.Add(new<\/span> MediaTypeWithQualityHeaderValue("application\/json"<\/span>));<\/pre>\n<\/div>\n
Berikut adalah hasil jika format output yang digunakan adalah JSON :<\/p>\n
\"image\"<\/a><\/p>\n
Dan berikut adalah jika format output yang digunakan adalah XML :<\/p>\n
\"image\"<\/a><\/p>\n
Gampang bukan? Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":149,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[23,22,21],"class_list":["post-177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-vs-2012","tag-windows-8","tag-windows-store-app"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2012\/10\/image14.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-2R","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=177"}],"version-history":[{"count":2,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions\/204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/149"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}